/* Royal Gateway section layout and choreography. */
@property --rim-angle { syntax:'<angle>'; inherits:false; initial-value:0deg; }
html { scroll-behavior:auto; }
.reveal { opacity:0; transform:translate(var(--reveal-x,0px),90px) scale(.94); transition:opacity 1.3s cubic-bezier(.22,1,.36,1),transform 1.3s cubic-bezier(.22,1,.36,1); transition-delay:var(--reveal-delay,0s); }
.reveal.visible { opacity:1; transform:none; }
.hero-art { animation: royal-atmosphere 40s ease-in-out infinite alternate; }
.gate-locked .hero-art,.gate-locked .hero-rays { animation-play-state:paused; }
.hero-rays { opacity:1; }
@keyframes royal-atmosphere {
  0% { transform:scale(1.25); filter:blur(10px) brightness(.8); }
  8% { transform:scale(1.1); filter:blur(0) brightness(1); }
  100% { transform:scale(1.18) translateX(-2.5%); filter:blur(0) brightness(1); }
}
.hero-copy { translate:0 var(--hero-copy-y,0px); opacity:var(--hero-copy-alpha,1); }
.gate-locked .hero-copy { opacity:0; }
.hero-copy h2 { filter:drop-shadow(0 2px 2px #502d2029); }
.palace-scene { position:relative; z-index:1; flex:none; width:112%; margin:auto 0 0; translate:0 var(--palace-y,0px); }
.palace-scene .palace-cutout { position:relative; width:100%; left:0; margin:0; }
.palace-sun { position:absolute; left:50%; top:14%; width:56vw; aspect-ratio:1; pointer-events:none; transform:translate(-50%,-50%) translateY(var(--sun-y,120px)); opacity:var(--sun-alpha,0); }
.sun-disc { width:100%; height:100%; background:radial-gradient(circle,#fff 0 6%,#fff6cc 9%,#ffde82f2 14%,#ffbe5f99 24%,#ffa04b47 38%,#ff96461a 52%,transparent 70%); animation:sun-breathe 6s ease-in-out infinite alternate; }
.palace-sheen { position:absolute; inset:0; overflow:hidden; pointer-events:none; mask:url('assets/reference/grand-palace.webp') center / 100% 100%; }
.palace-sheen::after { content:''; position:absolute; inset:0 auto 0 -45%; width:33%; background:linear-gradient(90deg,transparent,#ffffff40,transparent); transform:skewX(-12deg); animation:palace-light 9s 3s ease-in-out infinite; }
@keyframes palace-light { 0%,25%{translate:0} 65%,100%{translate:480%} }
@keyframes sun-breathe { to{scale:1.08} }
.gate-locked .sun-disc,.gate-locked .palace-sheen::after { animation-play-state:paused; }

/* Text is revealed as words, with separate letter entrances on family names. */
.motion-word { display:inline-block; opacity:0; transform:translateY(36px) rotate(4deg); transition:opacity 1s cubic-bezier(.22,1,.36,1),transform 1s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--text-delay,200ms) + var(--word-index,0) * 90ms); }
.text-entered .motion-word { opacity:1; transform:none; }
.word-wrap { display:inline-block; white-space:nowrap; }
.family-name .motion-letter { display:inline-block; opacity:0; transform:translateY(18px) rotateX(-80deg); transition:opacity .6s cubic-bezier(.22,1,.36,1),transform .6s cubic-bezier(.22,1,.36,1); transition-delay:calc(var(--family-delay,.8s) + var(--letter-index) * 40ms); }
.family-name.text-entered .motion-letter { opacity:1; transform:none; }
.family-name,.family-group-title { color:#c9973a; }
.family-name .motion-letter,.family-group-title { background:linear-gradient(110deg,#8a5a12 0%,#dea645 24%,#fff1b8 42%,#c9973a 60%,#8a5a12 80%); background-size:220% 100%; background-clip:text; -webkit-background-clip:text; color:transparent; }
.in-view .family-name .motion-letter,.family-group-title.in-view { animation:gold-glint 6s linear infinite; }
@keyframes gold-glint { to{background-position:-220% 0} }
.ornamental-line::before { transform-origin:right; }
.ornamental-line::after { transform-origin:left; }
.section-heading.reveal:not(.visible) .ornamental-line::before,.section-heading.reveal:not(.visible) .ornamental-line::after { transform:scaleX(0); }
.ornamental-line::before,.ornamental-line::after { transition:transform 1.2s .5s cubic-bezier(.22,1,.36,1); }
.in-view .ornamental-line>span { display:inline-block; animation:ornament-turn 18s linear infinite; }
@keyframes ornament-turn { to{rotate:360deg} }

/* Six relatives in the reference's staggered two-column portrait arrangement. */
.families { max-width:1280px; margin-inline:auto; padding:64px 16px; }
.families .section-heading { margin-bottom:32px; }
.family-group + .family-group { margin-top:56px; }
.family-group-title { display:flex; justify-content:center; align-items:center; gap:12px; margin:0 0 32px; padding-bottom:8px; font:400 32px/1.25 var(--script); text-align:center; }
.family-group-title::before,.family-group-title::after { content:''; height:1px; width:24px; flex:none; background:linear-gradient(90deg,transparent,#c9973a); }
.family-group-title::after { transform:scaleX(-1); }
.family-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:32px 24px; max-width:896px; margin-inline:auto; }
.family-card { min-width:0; width:100%; text-align:center; }
.family-card:nth-child(1) { grid-area:1 / 1 / span 2; justify-self:start; }
.family-card:nth-child(2) { grid-area:2 / 2 / span 2; justify-self:end; }
.family-card:nth-child(3) { grid-area:3 / 1 / span 2; justify-self:start; }
.family-card.reveal { transform:translateY(90px) scale(.94); }
.family-card.reveal.visible { transform:none; }
.families .family-card .small-frame { width:100%; max-width:176px; height:auto; aspect-ratio:800/1036; margin:0 auto; }
.family-window { position:absolute; inset:11.583% 17% 8.88031%; overflow:hidden; clip-path:polygon(0 100%,0 25%,4% 15%,12% 9%,24% 4%,38% 1%,50% 0,62% 1%,76% 4%,88% 9%,96% 15%,100% 25%,100% 100%); }
.families .family-window .family-portrait { inset:0; width:100%; height:100%; object-fit:cover; }
.families .family-window .portrait-door { top:0; bottom:0; width:50%; }
.families .family-window .door-left { left:0; }
.families .family-window .door-right { right:0; }
.families .family-card .jharokha { content:normal; }
.family-card:nth-child(2) .portrait-door { background-color:#d81b60; box-shadow:inset 0 0 0 2px #9c0f45; }
.families .family-card .family-ribbon { position:relative; display:table; left:auto; transform:none; width:fit-content; max-width:100%; margin:24px auto 0; padding:6px 20px; background:linear-gradient(#b3122e,#6d0a1d); color:#fff1b8; font:700 9.6px/1.625 var(--serif); letter-spacing:.15em; text-transform:uppercase; white-space:normal; overflow-wrap:anywhere; }
.family-card .family-name { width:100%; margin:12px 0 0; font:700 18px/1.375 var(--serif); text-transform:none; }
.family-name .word-wrap + .word-wrap { margin-left:0; }
/* Open each portrait only on its own entry, never when an ancestor enters. */
.door-frame:not(.visible) .door-left,.door-frame:not(.visible) .door-right { transform:none; opacity:1; }
.door-frame.visible .door-left { transform:translateX(-101%); }
.door-frame.visible .door-right { transform:translateX(101%); }
.door-frame .portrait-door,.door-frame.visible .portrait-door { opacity:1; transition:transform 1.6s .5s cubic-bezier(.65,0,.35,1); }
.couple .person:first-child .jharokha,.couple .person:nth-child(2) .jharokha { content:normal; }
.couple .painted-frame { height:auto; aspect-ratio:800 / 1036; }
.couple .portrait-window { overflow:hidden; }
.couple .portrait-window .portrait-door { top:0; bottom:0; width:50%; border:0; background-color:#f8c21b; background-image:radial-gradient(circle,#fffffff0 0 33%,transparent 35%),radial-gradient(circle,#fffffff0 0 33%,transparent 35%); background-size:16px 16px; background-position:0 0,8px 8px; box-shadow:inset 0 0 0 2px #c98a00; }
.couple .portrait-window .door-left { left:0; }.couple .portrait-window .door-right { right:0; }
.story-art { aspect-ratio:800/1036; }
.story-window { left:17%;top:11.583%;width:66%;height:79.537%; }
.story-row:nth-child(2) .story-leaf { background-color:#f8c21b;border-color:#c98a00; }
.story-row:nth-child(3) .story-leaf { background-color:#2bb24c;border-color:#17803a; }

/* The scroll body and its ink share one moving lower edge. */
.event-scroll .velvet-body { overflow:hidden; }
.event-scroll .scroll-bottom { transform:translateY(var(--unroll-y,-433.083%)) rotate(var(--roll-angle,-1.2deg)); }
.event-scroll .scroll-top { top:0; height:52.0833%; width:100%; }
.event-scroll .event-copy { opacity:var(--unroll-opacity,0); }
.event-scroll .event-copy { inset:14% 23% 10%; }
.event-copy > * { translate:none; transition:none; }
.event-copy p.event-venue-line { margin-top:3cqw!important; font-style:italic!important; }
.event { position:relative; }
.event .timeline-node { top:50%; }
.event-timeline::before { background:#dea6454d; }
.timeline-progress { position:absolute; top:0; bottom:0; left:50%; width:3px; background:linear-gradient(#dea645,#f3d489,#b16f23); transform:translateX(-50%) scaleY(var(--timeline-progress,0)); transform-origin:top; border-radius:3px; }
.event-scroll .velvet-body { background-size:100% 100%; }

/* Venue surfaces: fine gold rim, subdued photographic texture and burgundy. */
.venue-reference .venue-card,.venue-reference .venue-card:nth-child(2),.venue-reference .venue-card:nth-child(3) {
 isolation:isolate; position:relative; border:3px solid transparent; border-radius:32px; background:radial-gradient(ellipse at 30% 20%,#a3172f 0%,#6d0a1d 45%,#3a0410 100%) padding-box,conic-gradient(from var(--rim-angle),#f6d27a,#8a5a12 20%,#fff1b8 30%,#b98321 50%,#f6d27a 70%,#8a5a12 85%,#f6d27a) border-box; padding:56px 24px 80px; gap:48px; min-height:0; box-shadow:0 30px 60px -20px #5a0a1499; }
.venue-card.in-view { animation:gilded-rim 18s linear infinite; }
@keyframes gilded-rim { to{--rim-angle:360deg} }
.venue-art { position:absolute; inset:0; overflow:hidden; border-radius:29px; z-index:-1; pointer-events:none; }
.venue-art::before { content:''; position:absolute; inset:0; background:radial-gradient(circle,#f6d27a 1.2px,transparent 1.6px) 0 0/22px 22px; opacity:.12; }
.venue-art::after { content:''; position:absolute; top:-80px; left:-80px; width:384px; height:384px; background:radial-gradient(circle,#ffc86e59,transparent 70%); }
.venue-art img { position:absolute; width:100%; height:100%; object-fit:cover; object-position:left; opacity:.25; mix-blend-mode:luminosity; mask-image:linear-gradient(to right,#000 20%,transparent); }
.venue-art img:last-child { inset:auto 0 0; height:30%; opacity:.3; object-position:center 35%; mask-image:linear-gradient(to top,#000 10%,transparent); }
.venue-reference .venue-card::before { inset:12px; border:1px solid #f6d27ab3; border-radius:24px; box-shadow:none; pointer-events:none; }
.venue-reference .venue-card::after { inset:18px; background:none; border:1px dashed #f6d27a59; border-radius:21px; }
.venue-gem { position:absolute; width:16px; height:16px; background:radial-gradient(circle at 35% 30%,#ff8fa3,#b3122e); border:1px solid #f6d27a; transform:rotate(45deg); pointer-events:none; }
.venue-gem:nth-of-type(1) { top:8px; left:8px; }.venue-gem:nth-of-type(2) { top:8px; right:8px; }.venue-gem:nth-of-type(3) { bottom:8px; left:8px; }.venue-gem:nth-of-type(4) { bottom:8px; right:8px; }
.venue-reference .venue-copy>.script { font:400 36px/40px var(--script); margin:0; color:#f6d27a; }
.venue-reference .venue-copy h3 { font:700 36px/1.25 var(--serif); margin:8px 0 0; background:linear-gradient(135deg,#dea645,#f3d489,#b16f23); color:transparent; background-clip:text; -webkit-background-clip:text; filter:drop-shadow(0 3px 4px #28000099); }
.venue-reference .venue-copy .ornamental-line { margin:32px 0; }
.venue-details { gap:16px; margin:32px 0; }
.venue-details>div { min-height:82px; padding:16px 16px 16px 84px; border:1px solid #f6d27a4d; border-radius:16px; background:#ffffff0d; }
.venue-details dt { font:400 12px/16px var(--serif); letter-spacing:2.4px; color:#eac57a; }
.venue-details dt span { top:12px; left:12px; width:56px; height:56px; border:3px solid #f6d27a; background:#94152b; }
.venue-details dt svg { width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.venue-details dd { margin:0; font:600 20px/1.35 var(--sans); color:#fff1d6; }
.venue-reference .venue-copy .gold-button { display:flex; justify-content:center; align-items:center; gap:12px; font:700 14px/20px var(--serif); letter-spacing:2px; padding:16px 24px; min-height:54px; border-radius:999px; border:2px solid #f9e5a2; background:linear-gradient(110deg,#ffefaa,#d4a33e); color:#651422; }
.venue-map-stage { position:relative; width:100%; max-width:544px; aspect-ratio:4/3; align-self:center; justify-self:center; min-width:0; }
.venue-reference .venue-map { width:100%; height:100%; aspect-ratio:4/3; max-width:544px; border-radius:24px; }
.venue-card.reveal { transform:translateY(90px) scale(.94); }
.venue-card.reveal.visible { transform:none; }
.venue-copy>* { position:relative; }
.venue-copy [data-detail-motion],.venue-map { opacity:0; translate:0 30px; transition:opacity .8s cubic-bezier(.22,1,.36,1),translate .8s cubic-bezier(.22,1,.36,1); }
.venue-copy [data-detail-motion].detail-visible,.venue-map.detail-visible { opacity:1; translate:0 0; }
.venue-map { clip-path:circle(0% at 50% 50%); scale:.92; translate:0 40px; transition:opacity 1.2s .3s cubic-bezier(.22,1,.36,1),translate 1.2s .3s cubic-bezier(.22,1,.36,1),scale 1.2s .3s cubic-bezier(.22,1,.36,1),clip-path 1.8s cubic-bezier(.16,1,.3,1); }
.venue-map.detail-visible { clip-path:circle(75% at 50% 50%); scale:1; }
.map-decoration { position:absolute; inset:0; box-shadow:inset 0 0 60px 12px #3c04108c; pointer-events:none; }
.map-pulse { position:absolute; left:50%; top:50%; width:80px; height:80px; margin:-40px; border:2px solid #f6d27a; border-radius:50%; opacity:0; background:radial-gradient(circle,#f6d27a40,transparent 70%); }
.in-view .detail-visible .map-pulse { animation:map-ring 3s 1.8s ease-out infinite; }
.in-view .detail-visible .map-pulse:nth-child(2) { animation-delay:2.8s; }.in-view .detail-visible .map-pulse:nth-child(3) { animation-delay:3.8s; }
@keyframes map-ring { from{scale:.2;opacity:.9} to{scale:3.2;opacity:0} }
.map-marker { position:absolute; top:50%; left:50%; width:38px; height:46px; translate:-50% -95%; filter:drop-shadow(0 6px 5px #38000a88); }
.map-marker svg { width:100%; height:100%; fill:#a3172f; stroke:#f6d27a; stroke-width:1.6; }
.map-compass { position:absolute; top:12px; right:12px; width:48px; height:48px; }
.map-compass svg { width:100%; height:100%; }
.rsvp-seal { opacity:0; transform:scale(2.4) rotate(-40deg); transition:transform 1.1s cubic-bezier(.22,1.3,.36,1) .3s,opacity .7s .3s; }
.rsvp-seal.detail-visible { opacity:1; transform:none; }
#petals .petal { width:14px; height:20px; border-radius:70% 15% 65% 30%; background:radial-gradient(ellipse at 30% 20%,#ffc2ce,#e96888 65%,#b83959); box-shadow:inset 1px 1px 2px #ffedf655; }
.hero:not(.in-view) .hero-art,.hero:not(.in-view) .hero-rays,.hero:not(.in-view) .sun-disc,.hero:not(.in-view) .palace-sheen::after { animation-play-state:paused; }
.venue-reference .venue-note { display:none; }
.site-header { height:28px; font:500 12px/28px Arial,sans-serif; }
.scroll-cue { font:700 12px/16px Arial,sans-serif; letter-spacing:2.4px; }
.parchment .section-reveal,.section-reveal.visible { opacity:var(--section-opacity,0); transform:translateY(var(--section-y,110px)); transition:none; }
.palace-sun { transition:translate 2.4s .6s cubic-bezier(.22,1,.36,1); }
.gate-locked .palace-sun { translate:0 200px; opacity:0; }

@media (max-width:767px) {
 .palace-scene { width:150%; }
 .palace-sun { width:80vw; }
 .event-timeline { margin-top:32px; max-width:none; }
 .event,.event.reverse { display:grid; grid-template-columns:40px minmax(0,1fr); gap:8px; width:100%; height:auto; min-height:0; margin:0 0 28px; }
 .event:last-child { height:auto; margin-bottom:0; }
 .event-scroll,.event.reverse .event-scroll { grid-column:2; grid-row:1; width:100%; min-width:0; max-width:416px; height:auto; aspect-ratio:2/3; margin:0 auto; }
 .event .timeline-node { display:block!important; position:relative; grid-column:1; grid-row:1; top:auto; left:auto; margin:0; transform:none; align-self:center; justify-self:center; }
 .event-date { display:none; }
 .event-timeline::before,.timeline-progress { display:block!important; left:20px; }
 .timeline-car { display:block!important; left:20px; width:36px; }
 .venue-reference .venue-card,.venue-reference .venue-card:nth-child(2),.venue-reference .venue-card:nth-child(3) { grid-template-columns:1fr; min-height:0; text-align:center; }
 .venue-reference .venue-copy { text-align:center; }
 .venue-reference .venue-copy .ornamental-line { justify-content:center; }
 .venue-reference .venue-copy .gold-button { width:100%; }
 .venue-stack { gap:48px; }
 .venue-map-stage { max-width:304px; }
 .venue-reference .venue-map { width:100%; max-width:304px; }
 .section-heading h2 { font-size:clamp(25px,7.7vw,30px); line-height:1.2; }
}
@media (min-width:640px) { .family-card { max-width:208px; } }
@media (min-width:768px) {
 .families { padding:112px 24px; }
 .families .section-heading { margin-bottom:56px; }
 .family-group + .family-group { margin-top:80px; }
 .family-group-title { font-size:36px; gap:20px; margin-bottom:40px; }
 .family-group-title::before,.family-group-title::after { width:96px; }
 .family-grid { row-gap:40px; }
 .family-card .family-name { font-size:20px; }
 .venue-reference .venue-card:nth-child(n) { padding:64px 56px; gap:40px; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); }
 .venue-reference .venue-copy h3 { font-size:48px; }
 .venue-art img:first-child { width:45%; }
 .venue-reference .venue-card::before { inset:20px; }
 .venue-reference .venue-card::after { inset:26px; }
}
@media (min-width:1024px) {
 .family-card { max-width:288px; }
 .families .family-card .small-frame { max-width:240px; }
 .family-grid { column-gap:48px; }
 .family-group-title { font-size:60px; }
 .families .family-card .family-ribbon { font-size:12px; letter-spacing:.25em; padding-inline:24px; }
 .family-card .family-name { font-size:30px; }
 .venue-reference .venue-card:nth-child(n) { padding:80px; }
 .venue-reference .venue-copy>.script { font-size:48px; line-height:48px; }
 .venue-reference .venue-copy h3 { font-size:60px; }
}
@media (prefers-reduced-motion:reduce) {
 .hero-art,.hero-rays,.sun-disc,.palace-sheen::after,.in-view .ornamental-line>span,.in-view .family-name .motion-letter,.family-group-title.in-view,.venue-card.in-view,.map-pulse { animation:none!important; }
 .hero-art { filter:none; transform:none; }
 .hero-copy,.palace-scene { translate:none; opacity:1; }
 .palace-sun { opacity:1; transform:translate(-50%,-50%); }
 .motion-word,.family-name .motion-letter,.venue-copy [data-detail-motion],.venue-map { opacity:1; transform:none; translate:none; transition:none; }
 .event-copy>* { translate:none; transition:none; }
 .family-card.reveal,.venue-card.reveal { transform:none; }
 .venue-map { clip-path:none; scale:1; }.rsvp-seal { opacity:1;transform:none;transition:none; }
 .parchment .section-reveal,.section-reveal.visible { opacity:1; transform:none; }
}

/* A single responsive layout contract for the scenes. These dimensions follow
   content and artistic aspect ratios; entrance transforms never reserve space. */
.parchment { font:400 16px/1.5 'Cormorant Garamond',serif; }
.parchment::after { position:fixed; inset:12px; width:auto; height:auto; background:none; transform:none; }
.couple,.story,.families,.celebrations,.venue-reference,.rsvp,.contacts { padding:64px 16px; margin-top:0; }
.couple { max-width:1152px; margin-inline:auto; }
.story { max-width:1024px; margin-inline:auto; }
.families,.venue-reference { max-width:1280px; margin-inline:auto; }
.section-heading { max-width:none; margin:0 0 32px; }
.section-heading>.script { font:400 30px/36px var(--script); margin:0; }
.section-heading h2,.families .section-heading h2,.contacts .section-heading h2 { font:400 30px/36px var(--serif); letter-spacing:0; margin:8px 0 0; max-width:none; }
.section-heading .ornamental-line,.plaque-scene>.ornamental-line { height:28px; margin:16px 0 0; gap:12px; font:400 20px/28px var(--sans); }
.ornamental-line::before,.ornamental-line::after { width:64px; background:#dea645; }
.section-heading .ornamental-line>span { font:inherit; line-height:28px; }
.section-reveal .section-heading.reveal:not(.visible) { transform:translateY(90px) scale(.94); }
.venue-reference>.section-heading { top:auto; }
#invitation.invitation { padding:0; margin:0; }
#invitation::after { content:none; }
.plaque-scene { display:flex; flex-direction:column; align-items:center; padding:32px 24px 40px; overflow:hidden; }
.plaque-scene>.ornamental-line { flex:none; width:100%; margin:0; }
.plaque-scene .date-plaque { flex:none; margin:20px 0 0; }
.date-plaque>div { padding:9% 6% 0; flex-direction:column; }
.date-plaque>div>span { --text-delay:1400ms; }
.date-plaque .plaque-venue { position:relative; width:100%; margin:1.5cqw 0 0; font:400 2.7cqw/1.5 var(--serif); letter-spacing:.3em; opacity:0; }
.date-plaque.plaque-open .plaque-venue { opacity:1; }
.date-plaque .plaque-door { transition:transform 2s .5s cubic-bezier(.65,0,.35,1); }
.plaque-scroll-cue { display:block; height:24px; margin-top:20px; font:24px/24px Georgia,serif; color:#9e141e; }
.invitation-intro { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:64px 24px; }
.invitation-copy { width:100%; max-width:672px; }
.invitation .invitation-copy .section-heading { margin:0; }
.invitation .invitation-copy .section-heading>.script { font:400 36px/40px var(--script); margin:0; }
.invitation .invitation-copy .invitation-message { padding:0; margin:16px 0 0!important; font:italic 600 24px/32px 'Cormorant Garamond',serif!important; color:#7a0c15; --text-delay:300ms; }
.invitation .invitation-copy .ornamental-line { margin-top:32px; }
.rosette-stage { width:128px; height:128px; margin-bottom:24px; flex:none; opacity:0; transform:scale(.4) rotate(-90deg); transition:opacity 1.8s cubic-bezier(.16,1,.3,1),transform 1.8s cubic-bezier(.16,1,.3,1); }
.rosette-stage.detail-visible { opacity:1; transform:none; }
.invitation .rosette-stage .rosette { display:block; width:100%; height:100%; margin:0; }
.rosette-stage.in-view .rosette { animation:rosette-turn 60s linear infinite; }
@keyframes rosette-turn { to{rotate:360deg} }
.invitation .countdown { margin:40px 0 0; }
.invitation .countdown>.eyebrow { font:400 30px/36px var(--script); margin:0; }
.invitation .countdown-items { width:100%; max-width:672px; gap:10px; margin:20px auto 0; }
.countdown-items>div { opacity:0; transform:translateY(40px) rotateX(-60deg); transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1); transition-delay:calc(300ms + var(--count-index,0)*120ms); }
.countdown-items>div.detail-visible { opacity:1; transform:none; }
.countdown-items>div.in-view { animation:countdown-float 4s ease-in-out infinite; animation-delay:calc(var(--count-index,0)*500ms); }
@keyframes countdown-float { 50%{translate:0 -7px} }
.scratch-stage { padding:0 16px 40px; }
.invitation .scratch-card { margin:0 auto; }
.couple .couple-grid { gap:20px; align-items:start; }
.couple .painted-frame { width:100%; max-width:320px; height:auto; aspect-ratio:800/1036; }
.couple .person-role.script { margin-top:24px; font:400 24px/32px var(--script); }
.couple .person h3 { margin:0; font:400 20px/28px var(--serif); }
.couple .person>p:last-child { margin:8px 0 0; font:italic 400 14px/19.25px 'Cormorant Garamond',serif; }
.person.in-view .painted-frame { animation:couple-float 6s ease-in-out infinite; }
.person:nth-child(2) .painted-frame { animation-delay:1.5s; }
@keyframes couple-float { 50%{translate:0 -12px} }
.family-card.in-view .painted-frame { animation:family-float 5s ease-in-out infinite; }
@keyframes family-float { 50%{translate:0 -8px} }
.door-frame:not(.doors-open) .portrait-door,.door-frame:not(.doors-open) .story-leaf { opacity:1; transform:none; }
.door-frame.doors-open .door-left,.door-frame.doors-open .story-leaf-left { opacity:1; transform:translateX(-101%); }
.door-frame.doors-open .door-right,.door-frame.doors-open .story-leaf-right { opacity:1; transform:translateX(101%); }
.story-leaf { transition:transform 1.6s .5s cubic-bezier(.65,0,.35,1); }
.story-window::after { content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 18px 6px #00000059; }
.story-window>span { font:400 48px/1 var(--script); }
.story .story-timeline { gap:64px; }
.story .story-timeline .story-row { display:flex; flex-direction:column; gap:24px; min-height:0; }
.story-art { width:208px; flex:none; }
.story .story-timeline .story-copy { min-width:0; flex:1; width:100%; text-align:center; }
.story .story-timeline .story-copy .story-date { display:block; font:400 30px/36px var(--script); }
.story .story-timeline .story-copy h3 { font:400 24px/32px var(--serif); margin:8px 0 0; overflow-wrap:break-word; }
.story .story-timeline .story-copy h3::after { height:1px; margin:12px auto 0; }
.story .story-timeline .story-copy p { font:400 20px/32px 'Cormorant Garamond',serif; margin:12px 0 0; max-width:none; }
.event-timeline { width:100%; max-width:1152px; margin:0 auto; }
.event,.event.reverse { display:grid; grid-template-columns:40px minmax(0,1fr); gap:8px; min-height:0; height:auto; margin:0 0 28px; }
.event:last-child { height:auto; margin-bottom:0; }
.event.reverse .timeline-node { grid-row:1; }
.event-scroll,.event.reverse .event-scroll { width:100%; max-width:416px; height:auto; min-height:0; aspect-ratio:2/3; grid-column:2; grid-row:1; margin:0 auto; }
.event-scroll.in-view .event-symbol { animation:ceremony-symbol 3s ease-in-out infinite; }
@keyframes ceremony-symbol { 0%,100%{rotate:-8deg;translate:0 0}50%{rotate:8deg;translate:0 -4px} }
.gallery { padding:80px 0; }
@media(max-width:767px){.invitation .scratch-card{padding-top:50px;padding-bottom:44px}}
@media(min-width:640px){.story-art{width:240px}.invitation .countdown-items{gap:20px}}
@media(min-width:768px){
 .couple,.story,.families,.celebrations,.venue-reference,.rsvp,.contacts { padding:112px 24px; }
 .section-heading { margin-bottom:56px; }
 .section-heading>.script { font-size:36px; line-height:40px; }
 .section-heading h2,.families .section-heading h2,.contacts .section-heading h2 { font-size:48px; line-height:48px; }
 .invitation-intro { min-height:80svh; padding:96px 24px; }
 .rosette-stage { width:176px; height:176px; margin-bottom:32px; }
 .invitation .invitation-copy .invitation-message { font-size:30px!important; line-height:36px!important; }
 .couple .couple-grid { gap:64px; }
 .couple .person-role.script { margin-top:32px; font-size:36px; line-height:40px; }
 .couple .person h3 { font-size:36px; line-height:40px; }
 .couple .person>p:last-child { font-size:16px; line-height:22px; }
 .story .story-timeline { gap:80px; }
 .story .story-timeline .story-row { flex-direction:row; gap:56px; }
 .story .story-timeline .story-row-reverse { flex-direction:row-reverse; }
 .story .story-timeline .story-copy { width:auto; text-align:left; }
 .story .story-timeline .story-row-reverse .story-copy { text-align:right; }
 .story .story-timeline .story-copy .story-date { font-size:36px; line-height:40px; }
 .story .story-timeline .story-copy h3 { font-size:30px; line-height:36px; }
 .story .story-timeline .story-copy h3::after { margin-left:0; }
 .story .story-timeline .story-row-reverse .story-copy h3::after { margin-left:auto; margin-right:0; }
 .event,.event.reverse { grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr); gap:32px; margin-bottom:64px; }
 .event:last-child { margin-bottom:0; }
 .event .event-scroll { grid-column:1; }.event.reverse .event-scroll{grid-column:3;}
 .event .event-date { display:block;grid-column:3;grid-row:1; }.event.reverse .event-date{grid-column:1;}
 .event .timeline-node { position:relative; grid-column:2;grid-row:1;top:auto;left:auto;margin:0;transform:none;align-self:center;justify-self:center; }
 .gallery { padding:128px 0; }
}
@media(min-width:1024px){
 .section-heading>.script { font-size:48px;line-height:48px; }
 .section-heading h2,.families .section-heading h2,.contacts .section-heading h2 { font-size:60px;line-height:60px; }
 .invitation-copy { max-width:896px; }
 .invitation .invitation-copy .section-heading>.script { font-size:60px;line-height:60px; }
 .invitation .invitation-copy .invitation-message { font-size:36px!important;line-height:45px!important; }
 .invitation .countdown>.eyebrow { font-size:48px;line-height:48px; }
 .invitation .countdown-items { max-width:768px;gap:28px; }
 .couple .painted-frame { max-width:448px; }
 .couple .person-role.script,.couple .person h3 { font-size:48px;line-height:48px; }
 .couple .person>p:last-child { font-size:20px;line-height:27.5px; }
}
@media(prefers-reduced-motion:reduce){
 .rosette-stage,.countdown-items>div { opacity:1;transform:none;transition:none; }
 .rosette-stage .rosette,.countdown-items>div,.person .painted-frame,.family-card .painted-frame,.event-symbol { animation:none!important; }
 .date-plaque .plaque-door,.story-leaf,.portrait-door { display:none; }
}

/* Viewport-based ambience: the ornaments follow page progress, not a fixed
   oversized background, and falling petals travel one viewport at any size. */
.parchment .fan { position:fixed; width:58vmin; height:58vmin; transform:none; rotate:var(--fan-angle,0deg); opacity:calc(.35 * var(--fan-alpha,0)); background:none; }
.parchment .fan-left { left:-27vmin; bottom:-27vmin; top:auto; right:auto; }
.parchment .fan-right { right:-27vmin; top:-27vmin; bottom:auto; left:auto; }
.fan::before { content:''; position:absolute; inset:0; background:url('assets/reference/blue-mandala.webp') center/contain no-repeat; animation:fan-turn 90s linear infinite,fan-breathe 7s ease-in-out infinite; }
.fan-left::before { animation-direction:reverse,normal; }
@keyframes fan-turn { to{rotate:360deg} }
@keyframes fan-breathe { 50%{scale:1.04} }
#petals .petal { top:-32px; width:var(--petal-size,24px); height:var(--petal-size,24px); background:none; box-shadow:none; border-radius:0; opacity:1; perspective:400px; animation-name:royal-petal-fall; animation-timing-function:linear; animation-fill-mode:both; }
#petals .petal svg { display:block; width:100%; height:100%; animation:royal-petal-flip var(--petal-flip,4s) linear infinite; }
@keyframes royal-petal-fall { 0%{transform:translate(0,0) rotate(0deg)}33%{transform:translate(40px,36.3vh) rotate(calc(var(--petal-turn)*.33))}66%{transform:translate(-25px,72.6vh) rotate(calc(var(--petal-turn)*.66))}100%{transform:translate(10px,110vh) rotate(var(--petal-turn))} }
@keyframes royal-petal-flip { 0%{transform:rotateX(0) rotateY(0)}50%{transform:rotateX(180deg) rotateY(90deg)}100%{transform:rotateX(360deg) rotateY(0)} }
.gate-locked #petals .petal,.gate-locked #petals svg { animation-play-state:paused; }
@media(min-width:768px){
 .parchment .fan-left { width:58vmax;height:58vmax;left:-24vmax;bottom:-24vmax; }
 .parchment .fan-right { width:38vmax;height:38vmax;right:-16vmax;top:-16vmax; }
}
@media(prefers-reduced-motion:reduce){.fan::before{animation:none}#petals{display:none}}

/* The carousel follows viewport width; the caption belongs below its artwork. */
.gallery { --gallery-card-width:64vw; --gallery-card-inset:16px; }
.gallery .gallery-track { height:calc((var(--gallery-card-width) - var(--gallery-card-inset))*1.4 + 80px); }
.gallery .gallery-slide { top:40px; width:var(--gallery-card-width); margin-left:calc(var(--gallery-card-width)*-.5); padding:0 8px; transition-timing-function:cubic-bezier(.22,1,.36,1); }
.gallery-slide .gallery-frame { transition-timing-function:cubic-bezier(.22,1,.36,1); }
.gallery .gallery-banner { width:min(88vw,416px); min-height:0; margin-top:-8px; padding:12px 24px; }
.gallery-banner .gallery-caption { height:auto; font-size:30px; line-height:1.25; border:0; box-shadow:none; }
.gallery-banner .gallery-counter { margin-top:2px; font-size:10.4px; line-height:15.6px; }
.gallery .gallery-controls { margin-top:24px; }
.gallery-progress i { transform:scaleX(0); transition:none; }
.gallery-frame .gallery-photo { transform:scale(1); }
.gallery-slide.active .gallery-photo { animation:gallery-photo-drift 5.5s linear forwards; }
.gallery-paused .gallery-photo { animation-play-state:paused; }
@keyframes gallery-photo-drift { to { transform:scale(1.08); } }
@media(min-width:640px){.gallery{--gallery-card-width:38vw}}
@media(min-width:768px){.gallery{--gallery-card-inset:32px}.gallery .gallery-slide{padding:0 16px}.gallery-banner .gallery-caption{font-size:36px}}
@media(min-width:1024px){.gallery{--gallery-card-width:26vw}}
@media(prefers-reduced-motion:reduce){.gallery-slide.active .gallery-photo{animation:none}.gallery-slide,.gallery-slide .gallery-frame{transition:none}}