/* Decorative motion never blocks taps or changes the document layout. */
.opening-veil{display:none;pointer-events:none}
.js .opening-veil{display:block;position:fixed;inset:0;z-index:90;overflow:hidden}
.opening-veil>.door-panel{position:absolute;top:0;bottom:0;width:50.1%;background:repeating-linear-gradient(90deg,#ffffff00 0 35px,#e6c27d06 36px 38px),linear-gradient(100deg,#241019,#542334,#32141f);box-shadow:0 0 60px #17060f66}
.opening-veil>.door-panel:first-child{left:0;border-right:1px solid #d2b173;animation:curtain-left 4.2s 1.1s cubic-bezier(.65,0,.2,1) both}
.opening-veil>.door-panel:nth-child(2){right:0;border-left:1px solid #d2b173;animation:curtain-right 4.2s 1.1s cubic-bezier(.65,0,.2,1) both}
@keyframes curtain-left{to{transform:translateX(-102%)}}
@keyframes curtain-right{to{transform:translateX(102%)}}
.hero-copy{animation:none}
.hero-copy>.eyebrow,.hero-copy>.hindi-invocation,.hero-copy>.hero-description,.hero-copy>.hero-date,.hero-copy>.ceremony-tag,.hero-copy>.hero-footnote{animation:invitation-arrive 1.8s both;animation-delay:2.25s}
.hero-copy>.hindi-invocation{animation-delay:2.4s}
.hero-copy>h1{animation:none}
.hero-copy h1>span:not(.name-join){display:block;animation:name-arrive 2s 2.35s both}
.hero-copy h1>span:last-child{animation-delay:2.65s}
.hero-copy .name-join{animation:invitation-arrive 1.8s 2.5s both}
.hero-copy>.hero-description{animation-delay:2.8s}
.hero-copy>.hero-date{animation-delay:3.05s}
.hero-copy>.ceremony-tag{animation-delay:3.25s}
.hero-copy>.hero-footnote{animation-delay:3.4s}
@keyframes invitation-arrive{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@keyframes name-arrive{from{opacity:0;transform:translateY(23px);filter:blur(3px)}to{opacity:1;transform:translateY(0);filter:blur(0)}}
.hero .arch-inner{position:relative;isolation:isolate}
.hero .arch-inner:before{content:'';position:absolute;width:67%;aspect-ratio:1;left:16.5%;top:21%;border:1px solid #ebcd9124;border-radius:50%;background:radial-gradient(circle,#f1c76c20,transparent 70%);box-shadow:0 0 30px #ecc4800d,inset 0 0 25px #ecc4800d;z-index:-1;pointer-events:none;animation:sacred-breath 8s ease-in-out infinite}
@keyframes sacred-breath{0%,100%{opacity:.35;transform:scale(.93)}50%{opacity:1;transform:scale(1.06)}}
.hero.effects-paused *,.hero.effects-paused *:before,.hero.effects-paused *:after{animation-play-state:paused!important}
body.motion-paused *,body.motion-paused *:before,body.motion-paused *:after{animation-play-state:paused!important}
.js .reveal .motion-item{transition:opacity 1.4s ease,translate 1.4s cubic-bezier(.2,.7,.3,1);transition-delay:var(--reveal-delay,0ms)}
.js .reveal:not(.visible) .motion-item{opacity:0;translate:0 25px}
.js .reveal.visible .motion-item{opacity:1;translate:0 0}
.scroll-cue>span:last-child{animation:scroll-invitation 3.8s ease-in-out infinite}
@keyframes scroll-invitation{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
.button{position:relative;isolation:isolate;overflow:hidden;transition:transform .25s,box-shadow .25s}
.button:active{transform:scale(.98)}
.button-ripple{position:absolute;left:var(--ripple-x);top:var(--ripple-y);width:20px;height:20px;margin:-10px;border-radius:50%;background:#e8c88a55;pointer-events:none;z-index:-1;animation:blessing-ripple 1.2s ease-out forwards}
@keyframes blessing-ripple{to{transform:scale(30);opacity:0}}
@media(hover:hover) and (pointer:fine){.button:hover{transform:translateY(-3px);box-shadow:0 8px 25px #78492f25}.date-card{transition:translate .4s,box-shadow .4s}.date-card:hover{translate:0 -5px;box-shadow:0 20px 45px #75513522}}
@media(max-width:767px){.hero-copy h1>span:not(.name-join){animation-name:invitation-arrive}.opening-veil>.door-panel{box-shadow:none}}
@media(prefers-reduced-motion:reduce){.js .opening-veil{display:none}.hero-copy>*,.hero-copy h1>span,.hero .arch-inner:before,.scroll-cue>span:last-child{animation:none!important}.js .reveal .motion-item{opacity:1;translate:none;transition:none}.button-ripple{display:none}}

/* Slower layers add depth without moving the invitation text. */
.hero .sacred-arch{animation-duration:11s}
.hero .hero-mandala{animation-duration:240s}
.temple-canopy i{animation-duration:9s}
.hero .diya i{animation-duration:4.5s}
.hero .ambient-light span{animation-duration:34s}
.hero .floral{transform-origin:50% 90%;animation:floral-breeze 15s ease-in-out infinite alternate}
.hero .floral-right{animation-delay:-8s;animation-direction:alternate-reverse}
@keyframes floral-breeze{from{rotate:-1.5deg}to{rotate:1.5deg}}
.hero .ambient-light:before,.hero .ambient-light:after{content:'';position:absolute;inset:-40%;pointer-events:none;background:linear-gradient(110deg,transparent 35%,#efc47707 48%,transparent 60%);animation:temple-light 28s ease-in-out infinite alternate}
.hero .ambient-light:after{animation-delay:-14s;animation-direction:alternate-reverse;opacity:.65}
@keyframes temple-light{from{transform:translate3d(-5%,0,0) rotate(-4deg)}to{transform:translate3d(5%,0,0) rotate(4deg)}}
.sacred-orbits{position:absolute;left:50%;top:46%;width:91%;max-width:495px;aspect-ratio:1;transform:translate(-50%,-50%);border:1px solid #d9b87720;border-radius:50%;pointer-events:none;z-index:0}
.orbit-light{position:absolute;inset:0;border-radius:50%;animation:sacred-orbit 60s linear infinite}
.orbit-light:after{content:'';position:absolute;left:50%;top:-3px;width:5px;height:5px;border-radius:50%;background:#f3d7a3;box-shadow:0 0 13px 3px #e2b96d55}
.orbit-light:nth-child(2){inset:10%;animation-duration:80s;animation-delay:-29s;animation-direction:reverse;border:1px dashed #d9b87718}
.orbit-light:nth-child(3){inset:-5%;animation-duration:100s;animation-delay:-65s;opacity:.65}
@keyframes sacred-orbit{to{transform:rotate(360deg)}}
.reveal h2:after{content:'';display:block;width:65px;height:1px;margin:20px 0;background:linear-gradient(90deg,transparent,#b58b51,transparent);transform-origin:center}
.blessing-section h2:after,.venue-heading h2:after,.family-section h2:after{margin-left:auto;margin-right:auto}
.js .reveal:not(.visible) h2:after{transform:scaleX(0)}
.js .reveal.visible h2:after{animation:blessing-line 2.5s .35s both}
@keyframes blessing-line{from{transform:scaleX(0);opacity:0}to{transform:scaleX(1);opacity:1}}
.js .reveal{transition-duration:1.4s}
@media(min-width:768px) and (max-width:1100px){
  .hero{padding-top:55px;padding-bottom:80px;gap:20px;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .hero h1{font-size:clamp(76px,8.7vw,96px)}
  .hero .hero-art{min-width:0}
  .hero .hero-description{max-width:100%}
  .ceremony-tag{letter-spacing:1px}
}
@media(max-width:767px){
  .sacred-orbits{width:94%;top:45%}.orbit-light:nth-child(3){display:none}
  .hero .floral{animation-duration:20s}
  @keyframes floral-breeze{from{rotate:-.7deg}to{rotate:.7deg}}
  .hero .ambient-light:after{display:none}
  .reveal h2:after{margin-left:auto;margin-right:auto}
}
@media(prefers-reduced-motion:reduce){
  .sacred-orbits{display:none}.hero .floral,.hero .ambient-light:before,.hero .ambient-light:after{animation:none}
  .js .reveal.visible h2:after{animation:none;transform:none;opacity:1}
}

/* Blessings fall continuously across every section after the opening. */
.blessing-shower{position:fixed;inset:0;z-index:8;overflow:hidden;pointer-events:none;clip-path:inset(var(--shower-top,100vh) 0 0 0);visibility:hidden;opacity:0;transition:opacity .8s;contain:strict}
.blessing-shower.is-active{visibility:visible;opacity:1}
.shower-piece{position:absolute;left:var(--petal-x);top:-35px;display:block;opacity:0;animation:continuous-blessings var(--petal-duration) var(--petal-delay) linear infinite;will-change:transform}
.shower-flower{width:var(--bloom-size,34px);height:var(--bloom-size,34px);background:center/contain no-repeat;filter:drop-shadow(0 2px 2px #675a4930);--piece-opacity:.92}
.bloom-rose{background-image:url('assets/blessing-rose.svg')}
.bloom-marigold{background-image:url('assets/blessing-marigold.svg')}
.bloom-lavender{background-image:url('assets/blessing-lavender.svg')}

@keyframes continuous-blessings{0%{opacity:0;transform:translate3d(0,0,0) rotate(0)}10%,85%{opacity:var(--piece-opacity,.6)}100%{opacity:0;transform:translate3d(var(--petal-drift),var(--shower-distance,110vh),0) rotate(var(--petal-spin))}}
.blessing-shower:not(.is-active) .shower-piece{animation-play-state:paused}
@media(max-width:767px), (max-width:1024px) and (pointer:coarse){.shower-piece:nth-child(n+15){display:none}.shower-flower{width:calc(var(--bloom-size,34px)*.78);height:calc(var(--bloom-size,34px)*.78)}}
@media(prefers-reduced-motion:reduce){.blessing-shower{display:none}}

#petals{clip-path:inset(var(--shower-top,100vh) 0 0 0)}

/* An embossed monogram seal sits across the opening door seam. */
.opening-seal{position:absolute;left:50%;top:47%;width:190px;height:190px;transform:translate(-50%,-50%) rotate(-7deg);animation:seal-release 1.8s .8s ease-in-out both}
.opening-seal img{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 8px 14px #16060d66)}
.opening-seal strong{position:absolute;left:0;right:0;top:59px;text-align:center;color:#70431e;font:500 43px/1.3 var(--serif);text-shadow:0 1px #fff0bc,0 -1px 1px #6d431e55;letter-spacing:1px}
.opening-seal strong i{font-size:30px;font-weight:400}
.opening-seal small{position:absolute;top:117px;left:0;right:0;text-align:center;font:600 8px/1.5 var(--sans);letter-spacing:1.2px;color:#795024;text-shadow:0 1px #f6dda755}
@keyframes seal-release{0%,25%{opacity:1;transform:translate(-50%,-50%) rotate(-7deg) scale(1)}100%{opacity:0;transform:translate(-50%,-50%) rotate(3deg) scale(1.14)}}
.petal.blessing-burst:nth-child(n){width:30px;height:30px;border:0;border-radius:0;background:var(--burst-image) center/contain no-repeat;box-shadow:none;filter:drop-shadow(0 2px 2px #675a4930)}
@media(max-width:767px){.opening-seal{width:158px;height:158px}.opening-seal strong{top:49px;font-size:36px}.opening-seal strong i{font-size:26px}.opening-seal small{top:98px;font-size:7px}}
@media(prefers-reduced-motion:reduce){.opening-seal{display:none}}

/* A soft halo and moving highlight give the engraved seal depth. */
.opening-seal:before{content:'';position:absolute;inset:-18px;border-radius:50%;background:radial-gradient(circle,#e6bf7633,transparent 70%);box-shadow:0 0 48px #eac47e20;z-index:-1}
.opening-seal:after{content:'';position:absolute;inset:12%;border-radius:50%;pointer-events:none;background:linear-gradient(115deg,transparent 30%,#fff4cd88 46%,transparent 62%);background-size:260% 100%;animation:seal-glint 2.4s ease-in-out both;mix-blend-mode:soft-light}
@keyframes seal-glint{from{background-position:140% 0;opacity:0}30%{opacity:.8}to{background-position:-60% 0;opacity:0}}

/* Reduced motion keeps offscreen content readable before reveal observers run. */
@media(prefers-reduced-motion:reduce){
  .js .reveal:not(.visible) .motion-item{opacity:1;translate:none;transition:none}
  .js .reveal:not(.visible) h2:after{transform:none;opacity:1}
}
