/* Sanya & Shan · one invitation site for every celebration
   The gate is a quiet, editorial cover: the couple's portrait on one side, the invitation on
   the other, ivory and gold. Past the gate, the page keeps the candlelit plum night and each
   event section wears its own Canva palette: plum (Mehendi), garden (Sangeet), sun (Haldi),
   royal (Shaadi). */

:root {
  --plum-0: #120818; --plum-1: #24102c; --plum-2: #3a1a44;
  --gold: #c9a45c; --gold-2: #e7c67f; --gold-3: #f4e1b0;
  --ink: #f3e9d7; --ink-2: #d9c9ad; --magenta: #b5326e;
  /* the cover */
  --cream: #f5f0e6; --cream-2: #ede6d8; --c-ink: #23201c; --c-ink-2: #5c554b; --c-muted: #8b8377;
  --c-gold: #b8975a; --c-gold-deep: #8f7340; --c-rule: #dfd6c4;
  --serif: "Cinzel", "Trajan Pro", Georgia, serif;
  --body: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --script: "Great Vibes", "Brush Script MT", cursive;
  --reveal: cubic-bezier(.77, 0, .18, 1);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--plum-1); font-family: var(--body); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
body:not(.is-in) { background: var(--cream); }
a { color: inherit; }
p { margin: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.link { background: none; border: 0; padding: 0; color: var(--gold-2); font: inherit; cursor: pointer; border-bottom: 1px solid rgba(201, 164, 92, .5); }

/* ---------- fixed backdrop (behind the welcome and the events) ---------- */
.scene { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: var(--plum-0); }
body:not(.is-in) .scene, body:not(.is-in) .tilt-cta { display: none; }
.sky { position: absolute; inset: -6% -4% -26% -4%; background: var(--plum-0) url("assets/bg-desktop.webp") center 80% / cover no-repeat; will-change: transform; animation: breathe 28s ease-in-out infinite alternate; }
@media (max-width: 700px), (orientation: portrait) and (max-width: 900px) { .sky { background-image: url("assets/bg-phone.webp"); background-position: center 70%; } }
.haze { position: absolute; inset: 0; background: radial-gradient(70% 50% at 50% 52%, rgba(18, 8, 24, .35), transparent 70%), linear-gradient(180deg, rgba(18, 8, 24, .35), transparent 30%, transparent 80%, rgba(18, 8, 24, .25)); animation: hazeShift 22s ease-in-out infinite alternate; }
.candles { position: absolute; left: 0; right: 0; bottom: 0; height: 22vh; }
.candle { position: absolute; bottom: var(--b, 4vh); left: var(--x, 50%); width: var(--s, 90px); height: var(--s, 90px); margin-left: calc(var(--s, 90px) / -2); border-radius: 50%; background: radial-gradient(circle, rgba(255, 220, 150, .75) 0%, rgba(240, 160, 70, .35) 30%, transparent 70%); filter: blur(2px); animation: flicker var(--d, 3.2s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.candle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 3px; height: 14px; margin: -8px 0 0 -1.5px; border-radius: 40% 40% 50% 50%; background: linear-gradient(#fff6d6, #f7b34c 60%, #e0662b); box-shadow: 0 0 10px 3px rgba(255, 200, 110, .8); }
.petals { position: absolute; inset: 0; }
.petal { position: absolute; top: -8vh; left: var(--x, 50%); width: var(--w, 18px); height: auto; opacity: 0; animation: drift var(--dur, 18s) linear infinite; animation-delay: var(--delay, 0s); filter: brightness(.8) saturate(1.05) drop-shadow(0 2px 3px rgba(0, 0, 0, .45)); }

/* ---------- shared type ---------- */
.kicker { font-family: var(--serif); font-weight: 400; font-size: clamp(13px, 2.2vw, 17px); letter-spacing: .42em; text-transform: uppercase; color: var(--gold-3); margin-left: .42em; }
.ornament { display: block; width: 200px; height: 18px; margin: 14px auto; color: var(--gold); }
.ornament--small { width: 150px; margin: 10px auto 18px; }
.btn { font-family: var(--serif); font-size: 12px; letter-spacing: .22em; text-transform: uppercase; text-decoration: none; color: var(--gold-2); padding: 14px 20px; border: 1px solid var(--gold); background: rgba(18, 8, 24, .35); cursor: pointer; transition: background-color .2s, color .2s; display: inline-block; }
.btn:hover, .btn:focus-visible { background: var(--gold); color: var(--plum-0); }
.btn--solid { background: var(--gold); color: var(--plum-0); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--gold-2); }
.btn[disabled] { opacity: .7; cursor: wait; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- the cover (gate) ----------
   Phone first: portrait on top, invitation below, the whole gate scrolls.
   Desktop: portrait left, invitation right; the reel opens full-width and the panel slides in. */
.gate { position: fixed; inset: 0; z-index: 5; background: var(--cream); color: var(--c-ink); overflow: auto; -webkit-overflow-scrolling: touch; transition: opacity .6s ease, transform .6s ease; }
.gate.is-hidden { opacity: 0; transform: scale(1.02); pointer-events: none; }

.cover { position: relative; width: 100%; height: 52svh; min-height: 340px; overflow: hidden; background: var(--cream-2); }
.cover__reel, .cover__main { position: absolute; inset: 0; }
.cover__shot { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; opacity: 0; transform: scale(1.08); transition: opacity .22s ease; }
.cover__shot.is-on { opacity: 1; transform: scale(1); transition: opacity .16s ease-out, transform .34s ease-out; }
.cover__main { inset: -14px; opacity: 0; transition: opacity 1s ease; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); will-change: transform; }
.gate.is-main .cover__main { opacity: 1; }
.cover__main img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform-origin: 50% 35%; animation: kenburns 38s ease-in-out infinite alternate; }
.cover__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(0, 0, 0, .06), transparent 28%, transparent 62%, var(--cream) 100%); }
.cover__grain { position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; pointer-events: none; opacity: .09; mix-blend-mode: overlay; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .7 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"); animation: grain 1.4s steps(6) infinite; }

.panel { position: relative; background: var(--cream); display: grid; grid-template-rows: 1fr auto auto; min-height: 42svh; margin-top: -22px; }
.gate__content { position: relative; z-index: 2; text-align: center; padding: clamp(10px, 3vh, 28px) clamp(22px, 6vw, 72px) clamp(18px, 3vh, 28px); align-self: center; }
.rise { opacity: 0; transform: translateY(16px); transition: opacity .9s ease, transform .9s ease; transition-delay: calc(var(--d, 0) * 95ms); }
.gate.is-ready .rise { opacity: 1; transform: none; }

.gate .kicker { color: var(--c-gold-deep); font-size: clamp(11px, 1.3vw, 13px); letter-spacing: .4em; margin-left: .4em; }
.gate .names { font-family: var(--body); font-weight: 400; font-size: clamp(40px, 5vw, 66px); line-height: 1.02; color: var(--c-ink); letter-spacing: .01em; margin: clamp(10px, 2vh, 18px) 0 0; text-shadow: none; }
.gate .names span[data-t] { display: block; }
.gate .names .amp { display: block; font-style: italic; font-weight: 300; font-size: .56em; line-height: 1.25; color: var(--c-gold); margin: 2px 0; }
.rule { width: 64px; height: 1px; background: var(--c-gold); margin: clamp(12px, 2vh, 20px) auto; }
.gate__dates { font-family: var(--serif); font-size: clamp(11px, 1.3vw, 13px); letter-spacing: .3em; text-transform: uppercase; color: var(--c-ink-2); margin-left: .3em; }
.gate__dates .tick { color: var(--c-gold); font-size: .75em; vertical-align: middle; }
.gate__lead { font-style: italic; color: var(--c-ink-2); font-size: clamp(16px, 1.5vw, 19px); max-width: 38ch; margin: clamp(12px, 2vh, 20px) auto clamp(14px, 2.4vh, 22px); }
.gate__form { display: grid; gap: 14px; max-width: 360px; margin: 0 auto; }
.gate__form input { width: 100%; font-family: var(--body); font-size: 24px; font-weight: 500; text-align: center; color: var(--c-ink); background: transparent; border: 0; border-bottom: 1px solid var(--c-gold); border-radius: 0; padding: 10px 8px; outline: none; transition: border-color .2s; }
.gate__form input::placeholder { color: var(--c-muted); font-style: italic; font-weight: 400; }
.gate__form input:focus { border-bottom-color: var(--c-ink); }
.gate .btn--solid { background: var(--c-gold); border-color: var(--c-gold); color: #1b1714; padding: 15px 20px; }
.gate .btn--solid:hover, .gate .btn--solid:focus-visible { background: var(--c-gold-deep); border-color: var(--c-gold-deep); color: var(--cream); }
.gate__error { margin: 16px auto 0; max-width: 42ch; font-style: italic; color: #9b2c2c; font-size: 17px; }
.gate__error a { color: var(--c-gold-deep); }
.gate__hint { margin: 22px auto 0; max-width: 46ch; font-size: 15px; color: var(--c-ink-2); border-top: 1px solid var(--c-rule); padding-top: 14px; }
.gate__hint b { color: var(--c-ink); font-weight: 600; }

/* the prints: photographs as tilted paper prints that drift past, bob, lift on touch, and open large */
.strip { position: relative; z-index: 2; overflow: hidden; min-height: calc(clamp(74px, 11vh, 118px) + 47px); padding: 16px 0 10px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.strip__track { display: flex; align-items: center; width: max-content; animation: slide 72s linear infinite; }
.strip:hover .strip__track, .strip.is-paused .strip__track { animation-play-state: paused; }
.print { flex: none; margin-right: 14px; padding: 5px 5px 16px; border: 0; background: #fffdf8; box-shadow: 0 6px 16px rgba(60, 45, 20, .16), 0 1px 2px rgba(60, 45, 20, .1); cursor: pointer; transform: rotate(var(--tilt, 0deg)); transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s; animation: bob 5.6s ease-in-out infinite; animation-delay: var(--bd, 0s); outline-offset: 3px; }
.print img { display: block; height: clamp(74px, 11vh, 118px); aspect-ratio: 3 / 4; object-fit: cover; object-position: 50% 28%; background: var(--cream-2); }
.print:hover, .print:focus-visible, .print.is-touched { transform: rotate(0deg) translateY(-8px) scale(1.06); box-shadow: 0 16px 30px rgba(60, 45, 20, .24); animation-play-state: paused; z-index: 2; }
.print:focus-visible { outline: 1.5px solid var(--c-gold); }
@keyframes slide { to { transform: translateX(-50%); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }

/* the planner's card: Poornima's studio, under the prints */
.planner-card { position: relative; z-index: 2; text-align: center; margin: 4px clamp(22px, 6vw, 48px) 0; padding: 18px 12px calc(22px + env(safe-area-inset-bottom)); border-top: 1px solid var(--c-rule); }
.planner-card__kicker { font-family: var(--serif); font-size: 10px; letter-spacing: .32em; text-transform: uppercase; color: var(--c-muted); margin-left: .32em; }
.planner-card__logo { display: inline-block; margin-top: 8px; font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 2vw, 24px); letter-spacing: .22em; margin-left: .22em; color: var(--c-ink); text-decoration: none; transition: color .2s; }
.planner-card__logo span { color: var(--c-gold); }
.planner-card__logo:hover { color: var(--c-gold-deep); }
.planner-card__tag { font-family: var(--body); font-style: italic; font-size: clamp(16px, 1.4vw, 18px); color: var(--c-ink-2); margin-top: 2px; }
.planner-card__links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 10px; margin-top: 10px; font-family: var(--serif); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; }
.planner-card__links a { color: var(--c-gold-deep); text-decoration: none; border-bottom: 1px solid transparent; padding-bottom: 2px; transition: border-color .2s, color .2s; }
.planner-card__links a:hover, .planner-card__links a:focus-visible { border-bottom-color: var(--c-gold); color: var(--c-ink); }
.planner-card__links span { color: var(--c-gold); font-size: 8px; }

/* the lightbox */
.lightbox { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-columns: auto 1fr auto; align-items: center; background: rgba(35, 32, 28, .9); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); animation: lbIn .3s ease both; }
.lightbox__figure { margin: 0; display: grid; justify-items: center; gap: 12px; padding: clamp(48px, 8vh, 72px) 8px calc(18px + env(safe-area-inset-bottom)); max-height: 100vh; }
.lightbox__img { max-width: min(92vw, 1100px); max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; border: 6px solid #fffdf8; box-shadow: 0 30px 80px rgba(0, 0, 0, .55); animation: lbPop .38s cubic-bezier(.22, .61, .36, 1) both; touch-action: pan-y; }
.lightbox.is-swapping .lightbox__img { animation: none; opacity: 0; transition: opacity .12s; }
.lightbox__caption { font-family: var(--serif); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: rgba(247, 242, 232, .78); display: flex; gap: 18px; }
.lightbox__count { color: rgba(247, 242, 232, .5); }
.lightbox__close { position: absolute; top: calc(10px + env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 253, 248, .12); color: #fffdf8; font: 400 30px/1 var(--body); cursor: pointer; z-index: 2; }
.lightbox__nav { width: 48px; height: 64px; margin: 0 6px; border: 0; background: transparent; color: rgba(255, 253, 248, .85); font: 400 44px/1 var(--body); cursor: pointer; }
.lightbox__nav:hover, .lightbox__close:hover { color: var(--gold-2); }
@media (max-width: 700px) { .lightbox { grid-template-columns: 1fr; } .lightbox__nav { display: none; } }
@keyframes lbIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes lbPop { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }

/* ---------- the envelope (first beat of the cover) ----------
   The screen is the envelope: a full-bleed clip of a sealed envelope, poster frame until the
   guest taps the seal, then the flap opens and the stage dissolves into the cover.
   --vidw is the rendered width of the clip (cover-cropped on tall screens, contained on wide
   ones); the pulse ring is sized from it so it hugs the seal on any screen. */
.gate.is-sealed, .gate.is-locked { overflow: hidden; }
.env-stage { --vidw: max(100vw, 56.25vh); position: absolute; inset: 0; z-index: 10; background: #efe7da; cursor: pointer; outline: none; overflow: hidden; transform-origin: 50% 46%; transition: opacity 1s ease, transform 1.1s cubic-bezier(.22, .61, .36, 1); }
.env-stage.is-away { opacity: 0; transform: scale(1.06); pointer-events: none; }
.env-stage__poster, .env-stage__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; display: block; background: transparent; }
.env-stage__freeze { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.env-stage__ring { position: absolute; left: 50%; top: 50%; width: calc(var(--vidw) * .37); aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; border: 1.5px solid rgba(184, 151, 90, .85); box-shadow: 0 0 0 0 rgba(184, 151, 90, .45); animation: envRing 2.4s ease-out .6s infinite; pointer-events: none; }
.env-stage__hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: calc(5vh + env(safe-area-inset-bottom)); padding: 9px 16px 8px; border-radius: 999px; background: rgba(250, 246, 238, .78); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); white-space: nowrap; text-align: center; font-family: var(--serif); font-size: 11px; letter-spacing: .36em; text-transform: uppercase; color: var(--c-gold-deep); margin-left: .36em; animation: envPulse 2.8s ease-in-out 1s infinite; transition: opacity .3s; pointer-events: none; text-shadow: 0 1px 8px rgba(255, 250, 240, .9); }
.env-stage.is-open .env-stage__ring, .env-stage.is-open .env-stage__hint { opacity: 0; animation: none; }
/* the instant the seal is tapped, a gold bloom rises from it and hands over to the clip's own glow */
.env-stage__bloom { position: absolute; left: 50%; top: 50%; width: calc(var(--vidw) * 1.1); aspect-ratio: 1; transform: translate(-50%, -50%) scale(.4); border-radius: 50%; pointer-events: none; opacity: 0; mix-blend-mode: screen; background: radial-gradient(circle, rgba(255, 214, 140, .95) 0%, rgba(232, 180, 90, .55) 22%, rgba(214, 160, 70, .18) 45%, rgba(214, 160, 70, 0) 68%); }
.env-stage.is-open .env-stage__bloom { animation: envBloom 1.6s ease-out forwards; }
@keyframes envBloom { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.35); } 25% { opacity: .9; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1); } }
@media (min-aspect-ratio: 3/4) {
  /* wide screens: show the whole envelope, standing in the middle, over a soft blur of itself */
  .env-stage { --vidw: min(100vw, 56.25vh); }
  .env-stage::before { content: ""; position: absolute; inset: -6%; background: #efe7da url("assets/envelope/envelope-poster-v6.webp") center / cover no-repeat; filter: blur(28px) saturate(.9); opacity: .9; }
  .env-stage__poster, .env-stage__video { object-fit: contain; }
  .env-stage__poster { filter: drop-shadow(0 30px 40px rgba(60, 45, 20, .25)); }
}
@keyframes envRing { 0% { box-shadow: 0 0 0 0 rgba(184, 151, 90, .5); opacity: 1; } 70% { box-shadow: 0 0 0 26px rgba(184, 151, 90, 0); opacity: .9; } 100% { box-shadow: 0 0 0 26px rgba(184, 151, 90, 0); opacity: 1; } }
@keyframes envPulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

@media (min-width: 900px) and (min-height: 540px) {
  .gate { overflow: hidden; }
  .cover { position: absolute; left: 0; top: 0; bottom: 0; height: auto; min-height: 0; width: 100%; transition: width 1.15s var(--reveal); }
  .gate.is-split .cover { width: 56%; }
  .cover__shade { background: linear-gradient(90deg, transparent 70%, rgba(27, 23, 20, .22) 100%), linear-gradient(180deg, rgba(0, 0, 0, .08), transparent 30%, transparent 72%, rgba(0, 0, 0, .18) 100%); }
  .panel { position: absolute; top: 0; bottom: 0; right: 0; width: 44%; margin: 0; min-height: 0; overflow: auto; transform: translateX(100%); transition: transform 1.15s var(--reveal); }
  .panel::before { content: ""; position: absolute; inset: 18px; border: 1px solid var(--c-rule); pointer-events: none; }
  .gate.is-split .panel { transform: none; }
  .gate__content { padding: clamp(28px, 6vh, 72px) clamp(28px, 4.5vw, 72px) clamp(12px, 2vh, 20px); }
  .strip { padding-bottom: 8px; margin: 0 18px; }
  .planner-card { margin: 0 34px 18px; padding-bottom: 20px; }
}
@media (min-width: 1500px) { .gate.is-split .cover { width: 58%; } .panel { width: 42%; } }
/* shorter desktop screens (laptops): tighten the column so the card fits without scrolling */
@media (min-width: 900px) and (max-height: 820px) {
  .gate__content { padding: 18px 28px 6px; }
  .gate .kicker { font-size: 11px; }
  .gate .names { font-size: clamp(32px, 4vw, 46px); margin-top: 6px; }
  .gate .names .amp { margin: 0; }
  .rule { margin: 8px auto; }
  .gate__lead { font-size: 15px; margin: 6px auto 10px; }
  .gate__form { gap: 8px; }
  .gate__form input { font-size: 20px; padding: 6px 8px; }
  .gate .btn--solid { padding: 11px 18px; }
  .strip { min-height: calc(66px + 43px); padding: 8px 0 2px; }
  .print { padding: 4px 4px 12px; margin-right: 10px; }
  .print img { height: 66px; }
  .planner-card { margin: 0 34px 10px; padding: 10px 12px 12px; }
  .planner-card__logo { margin-top: 4px; font-size: 19px; }
  .planner-card__tag { font-size: 15px; }
  .planner-card__links { margin-top: 6px; font-size: 10px; }
}


/* ---------- welcome ---------- */
main { position: relative; z-index: 1; }
.welcome { text-align: center; padding: clamp(56px, 10vw, 110px) 20px clamp(20px, 4vw, 40px); animation: rise .9s ease-out both; }
.welcome__name { font-family: var(--script); font-weight: 400; font-size: clamp(46px, 10vw, 84px); line-height: 1.1; color: var(--gold-2); margin: 8px 0 0; text-shadow: 0 2px 18px rgba(0, 0, 0, .5); }
.welcome__lead { font-family: var(--serif); font-size: clamp(13px, 2.2vw, 17px); letter-spacing: .24em; text-transform: uppercase; color: var(--gold-3); margin-left: .24em; }
.welcome__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 22px auto 0; }
.chip { font-family: var(--serif); font-size: 12px; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--gold-2); padding: 10px 16px; border: 1px solid rgba(201, 164, 92, .6); background: rgba(18, 8, 24, .4); transition: background-color .2s, color .2s; }
.chip:hover { background: var(--gold); color: var(--plum-0); }
.welcome__switch { margin-top: 22px; font-size: 16px; color: var(--ink-2); }

/* ---------- events ---------- */
.event { padding: clamp(22px, 4vw, 44px) clamp(14px, 3vw, 28px); animation: rise .9s ease-out both; animation-delay: calc(.12s * var(--i, 0) + .15s); scroll-margin-top: 16px; }
.event__frame { position: relative; width: min(100%, 720px); margin: 0 auto; padding: clamp(70px, 11vw, 110px) clamp(20px, 6vw, 64px) clamp(44px, 6vw, 64px); border: 1px solid var(--e-line); outline: 1px solid var(--e-line-2); outline-offset: 6px; background: var(--e-bg); color: var(--e-ink); text-align: center; overflow: hidden; box-shadow: 0 30px 80px rgba(0, 0, 0, .4); }
.event__arch { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--e-accent); opacity: .8; pointer-events: none; }
.event__apex { position: absolute; left: 50%; top: 10px; width: 30px; height: 30px; margin-left: -15px; color: var(--e-accent); pointer-events: none; }
.event__content { position: relative; z-index: 2; }
.event .kicker { color: var(--e-accent); }
.event .ornament { color: var(--e-accent); }
.event__families { font-family: var(--script); font-size: clamp(20px, 3.6vw, 27px); color: var(--e-muted); margin-top: 8px; }
.event__name { font-family: var(--serif); font-weight: 400; margin: 6px 0 0; font-size: clamp(46px, 11vw, 88px); line-height: 1; letter-spacing: .08em; margin-left: .08em; color: var(--e-accent); text-transform: uppercase; text-shadow: 0 0 24px var(--e-glow); }
.event__tagline { font-family: var(--script); font-size: clamp(24px, 4.4vw, 34px); line-height: 1.25; color: var(--e-ink); max-width: 26ch; margin: 4px auto 0; }
.event__invite { font-family: var(--serif); font-weight: 400; font-size: clamp(11.5px, 1.9vw, 14px); letter-spacing: .16em; text-transform: uppercase; color: var(--e-muted); line-height: 1.8; max-width: 40ch; margin: 10px auto 0; }
.event__names { font-family: var(--body); font-weight: 500; font-size: clamp(26px, 4.8vw, 36px); color: var(--e-ink); margin: clamp(12px, 2.6vw, 20px) 0 0; }
.event__names .amp { color: var(--e-accent); }
.event__day { font-family: var(--serif); font-size: clamp(14px, 2.4vw, 19px); letter-spacing: .34em; text-transform: uppercase; color: var(--e-muted); margin-left: .34em; }
.event__date { font-family: var(--serif); font-weight: 500; font-size: clamp(26px, 5.6vw, 44px); letter-spacing: .1em; text-transform: uppercase; color: var(--e-accent); line-height: 1.1; margin: 2px 0 6px; }
.event__city { font-family: var(--serif); font-size: clamp(12px, 2.2vw, 16px); letter-spacing: .3em; text-transform: uppercase; color: var(--e-muted); margin-left: .3em; }
.event__note { font-style: italic; color: var(--e-muted); font-size: clamp(16px, 2.6vw, 19px); max-width: 44ch; margin: 22px auto 24px; }
.event .btn { color: var(--e-accent); border-color: var(--e-accent); background: transparent; }
.event .btn:hover, .event .btn:focus-visible { background: var(--e-accent); color: var(--e-bg-solid); }
.event__deco { position: absolute; width: 46%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; filter: blur(30px); opacity: .55; }
.event__deco--a { left: -16%; top: -12%; background: var(--e-deco-a); }
.event__deco--b { right: -16%; bottom: -14%; background: var(--e-deco-b); }
.event__lights { display: none; }

/* Mehendi: the plum night itself */
.event--plum { --e-bg: linear-gradient(180deg, rgba(36, 16, 44, .82), rgba(18, 8, 24, .9)); --e-bg-solid: #24102c; --e-ink: #f3e9d7; --e-accent: #e7c67f; --e-muted: #d9c9ad; --e-line: rgba(201, 164, 92, .6); --e-line-2: rgba(201, 164, 92, .25); --e-glow: rgba(240, 180, 90, .25); --e-deco-a: rgba(181, 50, 110, .45); --e-deco-b: rgba(240, 160, 70, .35); }
/* Sangeet: the flower garden at night, string lights overhead */
.event--garden { --e-bg: radial-gradient(120% 90% at 50% 0%, #1e4a34 0%, #0f2a1e 55%, #0a1c14 100%); --e-bg-solid: #0f2a1e; --e-ink: #f7e8cd; --e-accent: #f0c979; --e-muted: #d8c6a0; --e-line: rgba(240, 201, 121, .6); --e-line-2: rgba(240, 201, 121, .25); --e-glow: rgba(240, 201, 121, .3); --e-deco-a: rgba(200, 56, 95, .7); --e-deco-b: rgba(233, 84, 122, .6); }
.event--garden .event__lights { display: block; position: absolute; left: 0; right: 0; top: 0; height: 90px; pointer-events: none; background: radial-gradient(3px 3px at 8% 40px, #ffe6a3 40%, transparent 41%), radial-gradient(3px 3px at 20% 62px, #ffd27a 40%, transparent 41%), radial-gradient(3px 3px at 33% 44px, #ffe6a3 40%, transparent 41%), radial-gradient(3px 3px at 46% 66px, #ffd27a 40%, transparent 41%), radial-gradient(3px 3px at 58% 46px, #ffe6a3 40%, transparent 41%), radial-gradient(3px 3px at 70% 64px, #ffd27a 40%, transparent 41%), radial-gradient(3px 3px at 82% 42px, #ffe6a3 40%, transparent 41%), radial-gradient(3px 3px at 93% 60px, #ffd27a 40%, transparent 41%); filter: drop-shadow(0 0 6px rgba(255, 214, 140, .9)); animation: twinkle 2.8s ease-in-out infinite; }
/* Haldi: sunshine, turmeric and lemons */
.event--sun { --e-bg: linear-gradient(180deg, #fcf4df 0%, #f6e5b6 100%); --e-bg-solid: #f9edc8; --e-ink: #5a4113; --e-accent: #b8860b; --e-muted: #7f6630; --e-line: rgba(184, 134, 11, .55); --e-line-2: rgba(184, 134, 11, .22); --e-glow: rgba(255, 210, 90, .35); --e-deco-a: rgba(255, 200, 60, .75); --e-deco-b: rgba(126, 168, 74, .6); }
.event--sun .event__deco { opacity: .7; }
/* Shaadi: the palace in peach and gold */
.event--royal { --e-bg: linear-gradient(180deg, #f8ead8 0%, #efd6b6 100%); --e-bg-solid: #f4e1c8; --e-ink: #6e1c28; --e-accent: #b58a3a; --e-muted: #8e5a3e; --e-line: rgba(181, 138, 58, .65); --e-line-2: rgba(181, 138, 58, .28); --e-glow: rgba(181, 138, 58, .3); --e-deco-a: rgba(160, 30, 45, .45); --e-deco-b: rgba(230, 170, 90, .7); }
.event--royal .event__name { font-weight: 500; color: #7a1f2b; text-shadow: none; }
.event--royal .event__names { font-family: var(--script); font-weight: 400; font-size: clamp(34px, 6.5vw, 50px); color: #8b2634; }

/* ---------- footer ---------- */
.foot { text-align: center; padding: 60px 20px calc(70px + env(safe-area-inset-bottom)); display: grid; gap: 8px; background: linear-gradient(180deg, transparent, rgba(18, 8, 24, .6)); }
.foot__names { font-family: var(--script); font-size: clamp(28px, 5vw, 38px); color: var(--gold-2); text-shadow: 0 2px 18px rgba(0, 0, 0, .7); }
.foot__planner { font-size: 16px; color: var(--ink-2); }
.foot__planner a { color: var(--gold-2); text-decoration: none; border-bottom: 1px solid rgba(201, 164, 92, .5); }
.tilt-cta { position: fixed; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 30; transform: translateX(-50%); font-family: var(--serif); font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold-2); background: rgba(18, 8, 24, .72); border: 1px solid rgba(201, 164, 92, .7); border-radius: 999px; padding: 11px 18px; cursor: pointer; backdrop-filter: blur(6px); box-shadow: 0 6px 24px rgba(0, 0, 0, .35); }

/* ---------- motion ---------- */
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.07); } }
@keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-4%, 3%); } 40% { transform: translate(3%, -5%); } 60% { transform: translate(-5%, -2%); } 80% { transform: translate(4%, 4%); } 100% { transform: translate(0, 0); } }
@keyframes slide { to { transform: translateX(-50%); } }
@keyframes glow { 0%, 100% { opacity: .7; transform: translate(-50%, -50%) scale(.94); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
@keyframes breathe { 0% { transform: translate3d(var(--tx, 0px), var(--py, 0px), 0) scale(1); filter: brightness(1); } 100% { transform: translate3d(var(--tx, 0px), calc(var(--py, 0px) - 1%), 0) scale(1.045); filter: brightness(1.06); } }
@keyframes hazeShift { 0% { opacity: .75; transform: translateX(-1.5%); } 100% { opacity: 1; transform: translateX(1.5%); } }
@keyframes flicker { 0%, 100% { opacity: .75; transform: scale(1); } 30% { opacity: 1; transform: scale(1.08); } 60% { opacity: .82; transform: scale(.96); } }
@keyframes twinkle { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes drift {
  0% { transform: translate3d(var(--wx, 0px), var(--wy, 0px), 0) rotate(var(--wr, 0deg)); opacity: 0; }
  8% { opacity: .85; }
  50% { transform: translate3d(calc(var(--sway, 30px) * -1 + var(--wx, 0px)), calc(55vh + var(--wy, 0px)), 0) rotate(calc(160deg + var(--wr, 0deg))); }
  92% { opacity: .7; }
  100% { transform: translate3d(calc(var(--sway, 30px) + var(--wx, 0px)), calc(112vh + var(--wy, 0px)), 0) rotate(calc(340deg + var(--wr, 0deg))); opacity: 0; }
}

@media (max-width: 560px) {
  .ornament { width: 160px; }
  .event__frame { padding-top: 64px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .sky, .haze, .candle, .petal, .event__lights, .welcome, .event, .cover__main img, .cover__grain, .strip__track, .print, .lightbox, .lightbox__img { animation: none; }
  .cover, .panel, .cover__main, .cover__shot, .rise { transition: none; }
  .env-stage { display: none; }
  .petal { display: none; }
}