/* ==========================================================================
   DESIGN TOKENS
   ========================================================================== */
:root {
  --ink:        #0a0604;   /* deeper, richer near-black */
  --panel:      #170d08;   /* darker warm brown-black panel */
  --panel-2:    #2b1710;
  --gold:       #d4af37;   /* true antique/luxury gold (richer than before) */
  --gold-bright:#f3d992;   /* bright gold / glow, slightly softer */
  --maroon:     #5c1029;   /* deep wine/burgundy instead of brick-red */
  --cream:      #f6ecd9;   /* ivory */
  --cream-dim:  #d8c7a0;

  --font-script: 'Great Vibes', cursive;
  --font-serif:  'Cormorant Garamond', serif;
  --font-label:  'Cinzel', serif;

  --container: 720px;
}

* { box-sizing: border-box; }
html {
  scroll-behavior: smooth;
  overflow-x: hidden;
  width: 100%;
}

body {
  margin: 0;
  background: var(--ink);
  color: var(--cream);
  font-family: var(--font-serif);
  overflow-x: hidden;
  width: 100%;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.eyebrow {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(0.75rem, 2vw, 0.95rem);
  letter-spacing: 0.05em;
  color: var(--cream-dim);
  margin: 0 0 0.5rem;
  text-align: center;
}

.script-names {
  font-family: var(--font-script);
  font-size: clamp(2.6rem, 10vw, 5rem);
  font-weight: 400;
  line-height: 1.1;
  color: var(--gold-bright);
  text-shadow: 0 0 18px rgba(240, 207, 122, 0.45), 0 0 40px rgba(201, 162, 78, 0.25);
  text-align: center;
  margin: 0.2em 0;
}
.script-names .amp { color: var(--maroon); filter: drop-shadow(0 0 6px rgba(122,32,32,0.5)); }

.section-title {
  font-family: var(--font-label);
  font-size: clamp(1.4rem, 4vw, 2rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold-bright);
  text-align: center;
  margin: 0 0 1.5rem;
}

/* Faint mandala ring-art background used behind several sections */
.mandala-bg{
  position:absolute;
  top:50%;
  left:50%;
  width:min(900px,140vw);
  height:min(900px,140vw);
  transform:translate(-50%,-50%);
  opacity:.14;
  z-index:0;
  pointer-events:none;
}

.btn-gold {
  display: inline-block;
  font-family: var(--font-label);
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--ink);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  padding: 0.9em 2.2em;
  border-radius: 2px;
  box-shadow: 0 6px 20px rgba(201,162,78,0.25);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(201,162,78,0.35); }

/* ==========================================================================
   1. LOADER
   ========================================================================== */
#loader {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 40%, #180b0c 0%, var(--ink) 70%);
}
.smoke-wrap { position: absolute; inset: 0; pointer-events: none; }
.smoke {
  position: absolute; bottom: -20%; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(244,233,207,0.08) 0%, rgba(244,233,207,0) 70%);
  filter: blur(6px);
  animation: smokeRise 9s ease-in-out infinite;
}
.smoke.s1 { left: 12%; animation-delay: 0s; }
.smoke.s2 { left: 48%; width: 420px; height: 420px; animation-delay: 2.4s; }
.smoke.s3 { left: 74%; animation-delay: 4.8s; }
@keyframes smokeRise {
  0% { transform: translateY(0) scale(0.8); opacity: 0; }
  25% { opacity: 0.6; }
  100% { transform: translateY(-70vh) scale(1.5); opacity: 0; }
}
.loader-content { position: relative; z-index: 2; text-align: center; }
.om-ring { position: relative; width: 120px; height: 120px; margin: 0 auto 1.4rem; }
.om-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.om-ring-track { fill: none; stroke: rgba(212,175,55,0.15); stroke-width: 2; }
.om-ring-fill {
  fill: none; stroke: var(--gold); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 327; stroke-dashoffset: 327;
  animation: ringFill 2.4s cubic-bezier(0.65,0,0.35,1) infinite;
}
@keyframes ringFill {
  0% { stroke-dashoffset: 327; }
  70% { stroke-dashoffset: 0; }
  100% { stroke-dashoffset: -327; }
}
.om-glyph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 2.4rem; color: var(--gold-bright); font-family: var(--font-label);
  text-shadow: 0 0 18px rgba(240,207,122,0.5);
}
.loader-label {
  font-family: var(--font-label); letter-spacing: 0.28em; text-transform: uppercase;
  font-size: 0.7rem; color: var(--cream-dim);
}
.dots span { animation: dotBlink 1.4s infinite; opacity: 0; }
.dots span:nth-child(2) { animation-delay: .2s; }
.dots span:nth-child(3) { animation-delay: .4s; }
@keyframes dotBlink { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }

/* ==========================================================================
   Shared full-screen "screen" sections (loader, gate, temple)
   ========================================================================== */
.screen {
  position: fixed; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: 6vh 6vw;
  background: radial-gradient(ellipse at 50% 30%, #241708 0%, var(--ink) 70%);
  z-index: 10;
}
#gate { cursor: pointer; z-index: 20; }
#temple-scene { z-index: 15; }


/* Native fallback for the Tap-to-Open transition. This does not depend on GSAP. */
#gate.gate-closing {
  opacity: 0;
  transition: opacity .6s ease;
  pointer-events: none;
}

/* ==========================================================================
   2. GATE
   ========================================================================== */
.gate-garland { width: min(90vw, 420px); position: fixed; top: 0; left: 50%; transform: translateX(-50%); z-index: 1000; }
.gate-diya { width: clamp(38px, 8vw, 60px); margin: 0.4rem 0 0.8rem; filter: drop-shadow(0 0 14px rgba(240,207,122,0.55)); position: relative; z-index: 1; }
.gate-sub {
  font-family: var(--font-serif); font-style: italic; letter-spacing: 0.08em;
  text-transform: uppercase; font-size: 1rem; color: #ffffff;
  text-shadow: 0 0 8px rgba(255,255,255,.85), 0 0 18px rgba(255,255,255,.55), 0 0 32px rgba(240,207,122,.4);
  margin: 0.2rem 0 2rem; position: relative; z-index: 1;
}
.tap-hint {
  font-family: var(--font-label); font-size: 1.2rem; letter-spacing: 0.15em;
  color: var(--gold-bright); text-transform: uppercase;
  animation: pulse 1.8s ease-in-out infinite;
  position: relative; z-index: 1;
}
@keyframes pulse { 0%,100% { opacity: 0.55; } 50% { opacity: 1; } }

/* ==========================================================================
   3. TEMPLE SCENE — TRUE 9:16 STAGE + UPLOADED GOLDEN FRAME
   ========================================================================== */
#temple-scene {
  display: none;
  opacity: 1;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 38%, rgba(121, 78, 22, 0.28), transparent 34%),
    radial-gradient(ellipse at 50% 15%, #2b1b0b 0%, #120b06 56%, #080504 100%);
}

.temple-scene-glow {
  position: absolute;
  width: min(90vw, 620px);
  height: min(90vw, 620px);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,175,55,.16) 0%, rgba(212,175,55,.05) 35%, transparent 70%);
  filter: blur(8px);
  animation: templeGlow 3.2s ease-in-out infinite;
  pointer-events: none;
}
@keyframes templeGlow {
  0%,100% { transform: scale(.94); opacity: .65; }
  50% { transform: scale(1.06); opacity: 1; }
}

.temple-frame-wrap {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  height: 100%;
}

.temple-diya {
 display: none;
}

/* The entire stage is locked to portrait 9:16. */
.temple-frame {
  position: relative;
  width: 100%;       /* Force full viewport width */
  height: 100%;     /* Force full dynamic viewport height */
  /* Remove aspect-ratio entirely */
  background: #030201;
  overflow: hidden;
  isolation: isolate;
  /* box-shadow: 0 22px 70px rgba(0,0,0,.72), 0 0 55px rgba(201,162,78,.24); */
}

/* The mask is generated from the real transparent opening in temple-frame.png.
   This is the important part: the video physically cannot paint outside the arch. */
#templeVideo {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #000;
  /* clip-path: url(#templeArch);
  -webkit-clip-path: url(#templeArch); */
}

/* A tiny dark edge keeps the video visually seated behind the gold artwork. */
.temple-video-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  box-shadow: inset 0 0 45px 12px rgba(0,0,0,.24);
}

/* Uploaded transparent frame sits above the video. */
.temple-frame-art {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  filter: drop-shadow(0 0 10px rgba(240,207,122,.20));
}

.temple-loading {
  position: absolute;
  left: 50%;
  bottom: max(2.2rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 8;
  display: flex;
  align-items: center;
  gap: .55rem;
  white-space: nowrap;
  font-family: var(--font-label);
  font-size: .62rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(244,233,207,.72);
  transition: opacity .35s ease;
}
.temple-loading.hidden { opacity: 0; pointer-events: none; }
.temple-loading__dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold-bright);
  box-shadow: 0 0 14px rgba(240,207,122,.8);
  animation: templeDot 1s ease-in-out infinite;
}
@keyframes templeDot { 0%,100% { transform: scale(.65); opacity:.45; } 50% { transform: scale(1); opacity:1; } }

.skip-btn {
  position: absolute; top: max(1.2rem, env(safe-area-inset-top)); right: 1.2rem;
  z-index: 20;
  font-family: var(--font-label); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--cream-dim); background: rgba(0,0,0,.28);
  border: 1px solid rgba(201,162,78,.35);
  padding: .5em 1em; border-radius: 20px; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity .4s ease;
}
.skip-btn.visible { opacity: 1; pointer-events: auto; }

/* Scroll cue (used both inside temple scene and statically in hero) */
.scroll-cue {
  position: absolute; bottom: max(2rem, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
  font-family: var(--font-label); font-size: 0.65rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--cream-dim);
  opacity: 0; z-index: 25; cursor: pointer;
}
.scroll-cue--static { position: relative; bottom: auto; margin-top: 3rem; opacity: 1; z-index: 1; }
.scroll-cue__arrow {
  width: 10px; height: 10px;
  border-right: 1px solid var(--gold-bright); border-bottom: 1px solid var(--gold-bright);
  transform: rotate(45deg);
  animation: bob 1.6s ease-in-out infinite;
}
@keyframes bob { 0%,100% { transform: translateY(0) rotate(45deg); } 50% { transform: translateY(6px) rotate(45deg); } }

/* ==========================================================================
   PAGE SECTIONS (scrollable content after the temple scene)
   ========================================================================== */
.page-section {
  position: relative;
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 5rem 6vw;
  text-align: center;
}
.reveal { opacity: 0; transform: translateY(30px); }

/* ============ MUSIC BUTTON ============ */
#music-btn{
  position:fixed;bottom:24px;right:24px;z-index:600;
  width:58px;height:58px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #4a2c62, #2a1533);
  box-shadow:0 0 18px 4px rgba(155,110,255,.45), inset 0 0 8px rgba(255,255,255,.15);
  display:flex;align-items:center;justify-content:center;
  border:1px solid rgba(212,175,55,.5);
}
#music-btn svg{width:22px;height:22px;fill:var(--gold);}
#music-btn .disc{
  position:absolute;inset:6px;border-radius:50%;
  border:1px dashed rgba(212,175,55,.35);
  animation:rotateSlow 5s linear infinite;
  animation-play-state:paused;
}
#music-btn.playing .disc{animation-play-state:running;}


/* =========================================================
   HERO SECTION
   ========================================================= */

#hero {
  min-height: 100vh;
  display: block;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
  box-sizing: border-box;
}

/* Never expose the hero while the temple scene is loading/playing. */
#hero.hero-locked {
  opacity: 0;
  visibility: hidden;
}
#hero.hero-visible {
  visibility: visible;
}

/* Hero content */
.hero-content {
  position: relative;
  z-index: 5;
  width: 100%;
}


/* =========================================================
   GARLAND
   ========================================================= */

.hero-garland {
  width: min(90vw, 480px);
  margin-bottom: -0.5rem;
  position: relative;
  z-index: 1;
}

/* If using .hero-garland-wrap in your HTML */
.hero-garland-wrap {
  width: min(90vw, 480px);
  margin: 0 auto 14px;
  position: relative;
  z-index: 1;
  pointer-events: none;
}

.hero-garland-wrap img {
  width: 20px;
  height: 30px;
  display: block;
  margin: 0 auto 14px;
  position: relative;
  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.4));
}

/* =========================================================
   ORNAMENT TEXT
   ========================================================= */

.hero-ornament {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(0.8rem, 2vw, 1rem);
  color: var(--gold);
  letter-spacing: 0.05em;
  opacity: 0.9;
  margin: 0 0 18px;
}

/* =========================================================
   COUPLE NAMES + DIYAS
   ========================================================= */

.hero-names-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;   /* was nowrap — this is what let the row push past the screen edge on mobile */
  gap: clamp(8px, 3vw, 30px);
  width: 100%;
  max-width: 100%;
}

.hero-diya {
  width: clamp(28px, 6vw, 52px);
  height: auto;
  flex-shrink: 0;
  filter: drop-shadow(
    0 0 12px rgba(240, 207, 122, 0.55)
  );

  /* Diya animation */
  animation: diyaFlicker 1.6s ease-in-out infinite alternate;
}

.hero-diya-right {
  animation-delay: 0.4s;
}

@keyframes diyaFlicker {
  0% {
    opacity: 0.85;
    filter: drop-shadow(
      0 0 4px rgba(255, 180, 60, 0.4)
    );
  }

  50% {
    opacity: 1;
    filter: drop-shadow(
      0 0 12px rgba(255, 180, 60, 0.75)
    );
  }

  100% {
    opacity: 0.9;
    filter: drop-shadow(
      0 0 6px rgba(255, 180, 60, 0.5)
    );
  }
}

/* Names */
.hero-names {
  margin: 0;
  padding: 0;
  font-family: var(--font-script);
  font-size: clamp(2.2rem, 9vw, 6rem);
  line-height: 1.05;
  font-weight: normal;
  color: var(--gold);
  text-align: center;
  white-space: nowrap;   /* fine on wider screens, overridden below on mobile */
  max-width: 100%;
  text-shadow:
    0 0 30px rgba(212, 175, 55, 0.35);
}

/* =========================================================
   DIVIDER
   ========================================================= */

.hero-divider {
  width: min(220px, 60vw);
  height: 1px;
  margin: 22px auto;
  background: linear-gradient(
    90deg,
    transparent,
    var(--gold),
    transparent
  );
}

/* =========================================================
   SUBTITLE
   ========================================================= */

.hero-subtitle {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: clamp(0.85rem, 2.4vw, 1.05rem);
  color: var(--cream-dim);
  max-width: 480px;
  margin: 0 auto 1.2rem;
  line-height: 1.6;
}

/* =========================================================
   DATE
   ========================================================= */

.hero-date {
  font-family: var(--font-label);
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0.3rem 0;
  line-height: 1.5;
}

/* =========================================================
   VENUE
   ========================================================= */

.hero-venue {
  font-family: var(--font-label);
  font-size: clamp(0.75rem, 2vw, 0.9rem);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0.3rem 0;
  line-height: 1.5;
}

/* =========================================================
   MAP BUTTON
   ========================================================= */

.hero-map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  margin-top: 1.2rem;

  font-family: var(--font-label);
  letter-spacing: 0.15em;
  font-size: 0.78rem;
  text-transform: uppercase;

  color: var(--bg-primary);
  background: linear-gradient(
    135deg,
    var(--gold-hover),
    var(--gold-temple)
  );

  padding: 12px 28px;
  border-radius: 2px;

  text-decoration: none;

  box-shadow:
    0 6px 24px rgba(212, 175, 55, 0.3);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
}

.hero-map-link:hover {
  transform: translateY(-3px);

  box-shadow:
    0 12px 30px rgba(212, 175, 55, 0.45);
}

/* =========================================================
   SCROLL INDICATOR
   ========================================================= */

.hero-scroll {
  margin-top: 30px;

  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 8px;

  color: var(--gold);

  font-family: var(--font-label);
  font-size: 0.65rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
}

.hero-scroll span {
  display: block;
}

.scroll-arrow {
  width: 1px;
  height: 35px;

  background: linear-gradient(
    180deg,
    var(--gold),
    transparent
  );

  animation:
    scrollBounce 1.8s ease-in-out infinite;
}

@keyframes scrollBounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(10px);
    opacity: 0.3;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  #hero {
    min-height: 100svh;
    padding: 20px 14px;
  }

  .hero-garland,
  .hero-garland-wrap {
    width: min(90vw, 380px);
  }

  .hero-ornament {
    font-size: 0.82rem;
    margin-bottom: 14px;
  }

  .hero-names-row {
    gap: 7px;
  }

  .hero-diya {
    width: clamp(24px, 8vw, 38px);
  }

  .hero-names {
    font-size: clamp(2rem, 10.5vw, 4rem);
    line-height: 1.15;
    white-space: normal;   /* let "Srinivas & Lavanya" wrap instead of forcing horizontal scroll */
    word-spacing: 0.1em;
  }

  .hero-divider {
    width: 55vw;
    margin: 18px auto;
  }

  .hero-subtitle {
    max-width: 90%;
    font-size: 0.88rem;
    line-height: 1.5;
  }

  .hero-date {
    font-size: 0.7rem;
    letter-spacing: 0.08em;
  }

  .hero-venue {
    font-size: 0.78rem;
  }

  .hero-map-link {
    margin-top: 1rem;
    padding: 11px 22px;
    font-size: 0.7rem;
  }

  .hero-scroll {
    margin-top: 22px;
    font-size: 0.58rem;
  }

  .scroll-arrow {
    height: 30px;
  }
}

/* =========================================================
   VERY SMALL MOBILE
   ========================================================= */

@media (max-width: 380px) {

  #hero {
    padding-left: 10px;
    padding-right: 10px;
  }

  .hero-names-row {
    gap: 4px;
  }

  .hero-diya {
    width: 25px;
  }

  .hero-names {
    font-size: clamp(1.7rem, 10vw, 2.8rem);
    white-space: normal;
  }

  .hero-ornament {
    font-size: 0.75rem;
  }

  .hero-subtitle {
    font-size: 0.82rem;
  }

  .hero-date {
    font-size: 0.65rem;
  }

  .hero-venue {
    font-size: 0.72rem;
  }
}

/* ---- Countdown ---- */
.countdown-grid { display: flex; gap: clamp(0.6rem, 3vw, 1.4rem); justify-content: center; flex-wrap: wrap; }
.countdown-box {
  background: var(--panel); border: 1px solid rgba(201,162,78,0.35);
  border-radius: 4px; padding: 1rem clamp(0.9rem, 4vw, 1.6rem);
  min-width: 72px;
}
.countdown-num { display: block; font-family: var(--font-label); font-size: clamp(1.4rem, 5vw, 2.2rem); color: var(--gold-bright); }
.countdown-label { font-family: var(--font-label); font-size: 0.65rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cream-dim); }

/* ---- Venue ---- */
.venue-address { font-style: italic; color: var(--cream-dim); margin-top: -0.5rem; }
.venue-map {
  width: 100%; aspect-ratio: 16/10; max-height: 360px;
  border-radius: 4px; overflow: hidden; border: 1px solid rgba(201,162,78,0.35);
  margin: 1.6rem 0;
}
.venue-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(0.15) sepia(0.15); }

/* ---- RSVP ---- */
.rsvp-copy { color: var(--cream-dim); max-width: 34ch; margin: 0 auto 1.6rem; }
.btn-whatsapp { background: linear-gradient(180deg, var(--gold-bright), var(--gold)); }

/* ---- Footer ---- */
#site-footer { text-align: center; padding: 3rem 6vw 4rem; position: relative; }
.footer-divider { width: 80px; height: 1px; background: var(--gold); margin: 0 auto 1.2rem; }
.footer-names { font-family: var(--font-script); font-size: clamp(1.6rem, 5vw, 2.2rem); color: var(--gold-bright); margin: 0; }
.footer-line { color: var(--cream-dim); font-size: 0.85rem; margin-top: 0.4rem; }

/* Mute toggle */
#muteToggle {
  position: fixed; bottom: max(1.2rem, env(safe-area-inset-bottom)); right: 1.2rem; z-index: 40;
  width: 42px; height: 42px; border-radius: 50%;
  background: rgba(15,10,6,0.7); border: 1px solid var(--gold);
  color: var(--gold-bright); font-size: 1.1rem; cursor: pointer;
  opacity: 0; pointer-events: none; transition: opacity 0.4s ease;
}
#muteToggle.visible { opacity: 1; pointer-events: auto; }

/* ==========================================================================
   RESPONSIVE — tablet & up
   ========================================================================== */
@media (min-width: 640px) {
  .temple-frame { width: min(60vw, 380px); }
}

@media (min-width: 1024px) {
  .temple-frame { width: 400px; }
  .page-section { padding: 7rem 2rem; }
}


/* ===== MERGED PREMIUM ANIMATION LAYER FROM index(1).html ===== */
.section-inner{max-width:1180px;margin:0 auto;padding:0 24px;position:relative;z-index:2;}
.eyebrow{
  font-family:var(--font-sub);
  letter-spacing:.35em;
  font-size:.72rem;
  color:var(--gold);
  text-transform:uppercase;
  text-align:center;
  display:block;
  margin-bottom:14px;
  opacity:.9;
}
.big-heading{
  font-family:var(--font-heading);
  font-weight:600;
  font-style:italic;
  text-align:center;
  color:var(--cream);
  font-size:clamp(2rem,5vw,3.6rem);
  margin-bottom:14px;
  letter-spacing:.01em;
}
.gold-shimmer{
  background:linear-gradient(90deg,#B8860B 0%,#F7E7A1 20%,#D4AF37 40%,#F7E7A1 60%,#B8860B 80%);
  background-size:300% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:shimmerMove 6s linear infinite;
}
@keyframes shimmerMove{
  0%{background-position:0% 50%;}
  100%{background-position:300% 50%;}
}
.divider{
  width:120px;height:2px;margin:22px auto 46px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  position:relative;
}
.divider::before{
  content:'❖';
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:var(--bg-primary);
  color:var(--gold);
  padding:0 12px;
  font-size:.9rem;
}
section{position:relative;padding:120px 0;overflow:hidden;}
.section-alt{background:var(--bg-alt);}
.section-sec{background:var(--bg-secondary);}

/* subtle shared texture */
section::after{
  content:'';
  position:absolute;inset:0;
  background-image:radial-gradient(circle at 20% 20%, rgba(212,175,55,.05), transparent 40%),
                    radial-gradient(circle at 80% 80%, rgba(212,175,55,.05), transparent 40%);
  pointer-events:none;
}

/* ============ CUSTOM CURSOR ============ */
#cursor-dot,#cursor-ring{
  position:fixed;top:0;left:0;pointer-events:none;z-index:9999;
  border-radius:50%;transform:translate(-50%,-50%);
}
#cursor-dot{width:6px;height:6px;background:var(--gold);box-shadow:0 0 8px 2px var(--glow);}
#cursor-ring{width:32px;height:32px;border:1px solid var(--gold);opacity:.6;transition:width .25s,height .25s,opacity .25s;}
@media (max-width:900px), (hover:none){ #cursor-dot,#cursor-ring{display:none;} }


/* ============ COUPLE ============ */
.couple-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 6vw, 90px);
  flex-wrap: wrap;
  margin-top: 50px;
}

.couple-figure {
  text-align: center;
  position: relative;
}

.portrait {
  width: 230px;
  height: 230px;
  border-radius: 50%;
  position: relative;
  background: var(--bg-secondary);
  border: 3px solid var(--gold);
  padding: 8px;
  box-shadow:
    0 0 0 1px rgba(212,175,55,.25),
    0 20px 50px rgba(0,0,0,.5);
  transition: transform .5s ease, box-shadow .5s ease;
}

.portrait::before {
  content: '';
  position: absolute;
  inset: -14px;
  border-radius: 50%;
  border: 1px solid rgba(212,175,55,.35);
}

.portrait .inner {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(145deg, #5a3620, #2b170f);
  display: flex;
  align-items: center;
  justify-content: center;
}

.portrait .inner svg {
  width: 60%;
  height: 60%;
  opacity: .85;
}

.couple-figure:hover .portrait {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 0 40px 6px var(--glow);
}

.couple-label {
  font-family: var(--font-heading);
  font-style: italic;
  font-size: 1.5rem;
  color: var(--gold);
  margin-top: 20px;
}

.couple-role {
  font-family: var(--font-sub);
  font-size: .68rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--cream);
  opacity: .7;
  margin-top: 4px;
}

.couple-lotus {
  width: 120px;
  height: auto;
  position: relative;
  margin: 0 20px;
}
@media (max-width: 600px) {

  .couple-row {
    flex-direction: column;
    gap: 25px;
    margin-top: 30px;
  }

  .portrait {
    width: 170px;
    height: 170px;
  }

  .couple-lotus {
    width: 70px;
    margin: 5px 0;
  }

  .couple-label {
    font-size: 1.3rem;
    margin-top: 14px;
  }

  .couple-role {
    font-size: .6rem;
    letter-spacing: .2em;
  }
}
@keyframes lotusRotate{to{transform:rotate(360deg);}}

/* ============ EVENTS ============ */
.bell-hang{width:64px;height:64px;margin:0 auto 6px;transform-origin:top center;animation:bellSwing 3.4s ease-in-out infinite;}
.event-card{
  max-width:520px;margin:40px auto 0;
  background:linear-gradient(160deg, rgba(212,175,55,.06), rgba(0,0,0,.15));
  border:1px solid rgba(212,175,55,.4);
  border-radius:4px;
  padding:46px 40px;
  text-align:center;
  position:relative;
  box-shadow:0 20px 60px rgba(0,0,0,.45);
  transition:transform .45s ease, box-shadow .45s ease, border-color .45s ease;
}
.event-card::before{
  content:'';position:absolute;inset:10px;border:1px solid rgba(212,175,55,.2);pointer-events:none;
}
.event-card:hover{
  transform:translateY(-10px);
  border-color:var(--gold);
  box-shadow:0 30px 70px rgba(0,0,0,.55), 0 0 40px rgba(212,175,55,.25);
}
.event-name{font-family:var(--font-heading);font-style:italic;font-size:2.1rem;color:var(--cream);margin-bottom:18px;}
.event-detail{font-family:var(--font-body);font-size:.95rem;color:var(--ivory);opacity:.85;margin:6px 0;letter-spacing:.02em;}
.event-detail b{color:var(--gold);font-weight:600;}

/* ============ COUNTDOWN ============ */
.countdown-grid{
  display:flex;justify-content:center;gap:clamp(12px,3vw,28px);flex-wrap:wrap;margin-top:50px;
}
.count-box{
  width:120px;height:120px;
  border:1px solid var(--gold);
  border-radius:4px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  background:linear-gradient(160deg, rgba(212,175,55,.08), rgba(0,0,0,.2));
  box-shadow:0 0 25px rgba(212,175,55,.12);
  animation:floatBox 4s ease-in-out infinite;
  position:relative;
}
.count-box:nth-child(2){animation-delay:.3s;}
.count-box:nth-child(3){animation-delay:.6s;}
.count-box:nth-child(4){animation-delay:.9s;}
@keyframes floatBox{
  0%,100%{transform:translateY(0);}
  50%{transform:translateY(-8px);}
}
.count-num{
  font-family:var(--font-heading);font-weight:600;font-size:2.6rem;color:var(--gold);
  text-shadow:0 0 18px rgba(212,175,55,.4);
}
.count-label{
  font-family:var(--font-sub);font-size:.62rem;letter-spacing:.25em;text-transform:uppercase;color:var(--cream);opacity:.75;
}

/* ============ TIMELINE ============ */
.timeline{position:relative;max-width:780px;margin:60px auto 0;padding-left:0;overflow-x:hidden;}
.timeline::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--gold) 8%, var(--gold) 92%,transparent);
  transform:translateX(-50%);
}
.timeline-item{
  position:relative;width:50%;padding:0 44px 70px;
}
.timeline-item:nth-child(odd){left:0;text-align:right;}
.timeline-item:nth-child(even){left:50%;text-align:left;}
.timeline-icon{
  position:absolute;top:0;width:44px;height:44px;border-radius:50%;
  background:var(--bg-primary);
  border:1px solid var(--gold);
  display:flex;align-items:center;justify-content:center;
  font-size:1.1rem;
  box-shadow:0 0 16px rgba(212,175,55,.3);
}
.timeline-item:nth-child(odd) .timeline-icon{right:-22px;}
.timeline-item:nth-child(even) .timeline-icon{left:-22px;}
.timeline-title{font-family:var(--font-heading);font-style:italic;font-size:1.5rem;color:var(--gold);margin-bottom:8px;}
.timeline-text{font-size:.92rem;color:var(--ivory);opacity:.82;line-height:1.6;}
@media (max-width:680px){
  .timeline::before{left:20px;}
  .timeline-item, .timeline-item:nth-child(even){width:100%;left:0;text-align:left;padding:0 0 50px 60px;}
  .timeline-item:nth-child(odd){text-align:left;}
  .timeline-item:nth-child(odd) .timeline-icon, .timeline-item:nth-child(even) .timeline-icon{left:-2px;right:auto;}
}

/* ============ SCRATCH CARD ============ */
.scratch-wrap{max-width:480px;margin:50px auto 0;text-align:center;}
.scratch-card{
  position:relative;width:100%;aspect-ratio:16/10;border-radius:8px;overflow:hidden;
  border:2px solid var(--gold);box-shadow:0 20px 60px rgba(0,0,0,.5), 0 0 40px rgba(212,175,55,.15);
  background:linear-gradient(135deg,#3a2218,#2b170f);
}
.scratch-reveal-label{position:relative;width:100%;margin:0 0 8px;padding:10px 20px;text-align:center;}
.scratch-reveal-sub{position:relative;width:100%;margin:0 0 14px;padding:0 20px;text-align:center;color:var(--gold);font-weight:600;font-size:2.5rem;line-height:1.15;font-family:var(--font-script);}
.scratch-reveal{position:relative;width:100%;margin:0;padding:0 26px 26px;text-align:center;font-family:var(--font-heading);font-style:italic;font-size:1.12rem;line-height:1.6;color:var(--cream);background:radial-gradient(circle at center,rgba(212,175,55,.12),transparent 70%);}


.scratch-card canvas{position:absolute;inset:0;touch-action:none;cursor:pointer;}
.scratch-hint{
  margin-top:16px;font-family:var(--font-sub);font-size:0.8rem;letter-spacing:.25em;text-transform:uppercase;color:var(--gold);opacity:.8;
}
.heart-pulse{
  position:absolute;bottom:14px;right:16px;width:26px;height:26px;opacity:0;
}
.heart-pulse.show{opacity:1;animation:heartBeat 1.1s ease-in-out infinite;}
@keyframes heartBeat{
  0%,100%{transform:scale(1);}
  50%{transform:scale(1.25);}
}

/* ============ RSVP ============ */
.rsvp-card{
  max-width:560px;margin:50px auto 0;
  background:var(--cream);
  color:var(--bg-primary);
  border-radius:6px;
  padding:clamp(28px,5vw,54px);
  position:relative;
  box-shadow:0 30px 80px rgba(0,0,0,.5);
  border:1px solid var(--gold);
}
.rsvp-card::before{
  content:'';position:absolute;inset:10px;border:1px solid rgba(184,134,11,.4);border-radius:3px;pointer-events:none;
}
.rsvp-title{font-family:var(--font-heading);font-style:italic;font-size:1.8rem;text-align:center;color:var(--maroon);margin-bottom:6px;}
.rsvp-sub{font-family:var(--font-sub);font-size:.66rem;letter-spacing:.25em;text-align:center;text-transform:uppercase;color:var(--gold-temple);margin-bottom:30px;}
.form-row{margin-bottom:20px;position:relative;}
.form-row label{
  display:block;font-family:var(--font-sub);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;color:var(--maroon);margin-bottom:8px;
}
.form-row input,.form-row textarea,.form-row select{
  width:100%;padding:13px 14px;border:1px solid rgba(90,32,21,.3);border-radius:3px;
  font-family:var(--font-body);font-size:.95rem;background:#fff;color:var(--bg-primary);
  transition:border-color .3s, box-shadow .3s;
}
.form-row input:focus,.form-row textarea:focus,.form-row select:focus{
  outline:none;border-color:var(--gold-temple);box-shadow:0 0 0 3px rgba(212,175,55,.2);
}
.form-row.error input,.form-row.error select{border-color:var(--red-temple);}
.error-msg{font-size:.72rem;color:var(--red-temple);margin-top:5px;display:none;}
.form-row.error .error-msg{display:block;}
.attend-toggle{display:flex;gap:12px;}
.attend-opt{
  flex:1;padding:13px;text-align:center;border:1px solid rgba(90,32,21,.3);border-radius:3px;
  font-family:var(--font-sub);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:all .3s;
}
.attend-opt.active{background:var(--gold-temple);color:#fff;border-color:var(--gold-temple);}
.rsvp-submit{
  width:100%;padding:16px;margin-top:10px;
  background:linear-gradient(135deg,var(--gold-hover),var(--gold-temple));
  color:#2b170f;font-family:var(--font-sub);letter-spacing:.15em;text-transform:uppercase;font-size:.8rem;
  border-radius:3px;position:relative;overflow:hidden;
}
.success-popup{
  position:fixed;inset:0;z-index:9000;display:flex;align-items:center;justify-content:center;
  background:rgba(20,10,5,.75);opacity:0;pointer-events:none;transition:opacity .4s;
}
.success-popup.show{opacity:1;pointer-events:auto;}
.success-box{
  background:var(--cream);color:var(--maroon);padding:50px 40px;border-radius:8px;text-align:center;max-width:340px;
  border:1px solid var(--gold);
}
.success-box svg{width:64px;height:64px;margin-bottom:16px;}
.success-box h3{font-family:var(--font-heading);font-style:italic;font-size:1.6rem;margin-bottom:8px;}
.success-box p{font-size:.9rem;opacity:.8;margin-bottom:20px;}
.success-box button{
  padding:10px 28px;background:var(--gold-temple);color:#fff;border-radius:3px;font-family:var(--font-sub);font-size:.72rem;letter-spacing:.15em;text-transform:uppercase;
}

/* ============ FOOTER ============ */
footer{
  position:relative;padding:100px 0 40px;text-align:center;background:var(--bg-primary);overflow:hidden;
}
.footer-temple{
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  width:min(900px,140vw);opacity:.12;z-index:0;
}
.footer-mandala{
  position:absolute;top:10%;left:50%;transform:translate(-50%,-50%);
  width:340px;height:340px;opacity:.08;animation:rotateSlow 70s linear infinite;
}
.footer-names{font-family:var(--font-script);font-size:clamp(2.2rem,5vw,3.4rem);color:var(--gold);position:relative;z-index:2;}
.footer-date{font-family:var(--font-sub);letter-spacing:.3em;font-size:.75rem;text-transform:uppercase;color:var(--cream);margin-top:12px;position:relative;z-index:2;}
.footer-thanks{font-family:var(--font-heading);font-style:italic;font-size:1.15rem;color:var(--ivory);opacity:.8;margin-top:22px;position:relative;z-index:2;}
.footer-copy{margin-top:40px;font-size:.72rem;color:var(--ivory);opacity:.45;position:relative;z-index:2;letter-spacing:.05em;}

/* generic reveal helpers used by GSAP/JS */
.reveal{opacity:0;}
.floating-petal{position:fixed;top:-40px;z-index:3;pointer-events:none;opacity:.85;}

@media (max-width:600px){
  section{padding:80px 0;}
  .hero-diya{width:34px;}
  .portrait{width:180px;height:180px;}
}

/* ---- spotlight ---- */
.spotlight{
  position:absolute;
  top:-15%;
  left:50%;
  transform:translateX(-50%);
  width:80vw;
  height:80vw;
  max-width:1000px;
  max-height:1000px;
  background:radial-gradient(
    circle,
    rgba(255,215,90,.30) 0%,
    rgba(212,175,55,.18) 25%,
    rgba(212,175,55,.08) 45%,
    transparent 70%
  );
  filter:blur(8px);
  z-index:1;
  pointer-events:none;
  opacity:.85;
}

/* ==========================================================================
   TEMPLE DOOR OVERLAY — adapted from the uploaded Temple Door script
   The doors are a full-screen layer above the 9:16 frame.
   ========================================================================== */
.temple-door-screen {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  z-index: 50;
  overflow: hidden;
  background:
    /* faint carved corner brackets, top and bottom of the door */
    radial-gradient(circle at 28px 28px, rgba(212,175,55,.55) 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 28px) 28px, rgba(212,175,55,.55) 0 3px, transparent 4px),
    radial-gradient(circle at 28px calc(100% - 28px), rgba(212,175,55,.55) 0 3px, transparent 4px),
    radial-gradient(circle at calc(100% - 28px) calc(100% - 28px), rgba(212,175,55,.55) 0 3px, transparent 4px),
    radial-gradient(circle at 50% 50%, rgba(96,48,15,.98) 0%, rgba(48,20,8,.99) 55%, rgba(16,6,2,1) 100%),
    repeating-linear-gradient(90deg, #3a2412 0 7px, #2c1a0c 7px 14px);
  box-shadow: inset 0 0 70px rgba(0,0,0,.85);
  transition: transform 0.8s cubic-bezier(.77,0,.175,1);
  pointer-events: none;
}

/* Outer carved frame — a double border gives the moulding a routed, 3D look */
.temple-door-screen::before {
  content: '';
  position: absolute;
  top: 25px;
  bottom: 25px;
  width: calc(100% - 35px);
  border: 2px solid rgba(212,175,55,.75);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 5px rgba(16,6,2,.9),
    inset 0 0 0 6px rgba(212,175,55,.3),
    inset 0 12px 30px rgba(0,0,0,.55);
  opacity: .8;
}

/* Rangoli lotus medallions — replaces the wood-carved panel look */
.door-rangoli {
  position: absolute;
  left: 50%;
  width: min(60%, 170px);
  height: auto;
  transform: translateX(-50%);
  filter: drop-shadow(0 0 10px rgba(212,175,55,.35));
  opacity: .92;
}
.door-rangoli--top    { top: 12%; }
.door-rangoli--bottom { bottom: 12%; }

/* Dotted "muggu" thread linking the two medallions down the centre of the door */
.door-thread {
  position: absolute;
  top: 30%;
  bottom: 30%;
  left: 50%;
  width: 1px;
  transform: translateX(-50%);
  background: repeating-linear-gradient(
    to bottom,
    var(--gold) 0 2px,
    transparent 2px 14px
  );
  opacity: .5;
}

.temple-door-screen--left {
  left: 0;
  transform-origin: left center;
  border-right: 4px solid var(--gold);
}
.temple-door-screen--left::before { left: 25px; }

.temple-door-screen--right {
  right: 0;
  transform-origin: right center;
  border-left: 4px solid var(--gold);
}
.temple-door-screen--right::before { right: 25px; }

/* Exact behavior of the uploaded Temple Door script's `.opened` class. */
#temple-scene.opened .temple-door-screen--left {
  transform: translateX(-100%);
}
#temple-scene.opened .temple-door-screen--right {
  transform: translateX(100%);
}