/* ─────────────────────────────────────────────────────────────
   सस्नेह निमंत्रण — scroll-through-the-home invitation

   DOM-first: the 3D canvas is a fixed decorative layer behind the
   content. Every section must read completely with the canvas
   absent — that is the mobile guarantee, not a fallback.
   ───────────────────────────────────────────────────────────── */

:root {
  /* 60 — warm neutrals carry the page */
  --bone:    #FAF6EF;
  --bone-2:  #F3EADD;
  /* 30 — beige/sand for depth and edges */
  --sand:    #E5D8C3;
  --sand-2:  #D8C6A8;
  /* 10 — accents, carried over from the printed card */
  --maroon:  #7A1113;
  --gold:    #C9922E;
  --gold-hi: #E3C079;

  --ink:      #3A2A1E;
  --ink-soft: #6E5949;

  --shell: min(92vw, 34rem);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  min-height: 100%;
  background: var(--bone);
  color: var(--ink);
  font-family: "Tiro Devanagari Marathi", "Noto Serif Devanagari", Georgia, serif;
  font-size: clamp(1rem, .55rem + 1.1vw, 1.16rem);
  line-height: 1.75;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ── layers ─────────────────────────────────────────────────── */
#bg {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  display: block;
  z-index: 0;
  /* until the scene boots, this reads as warm dawn light, not a hole */
  background:
    radial-gradient(135% 95% at 50% 6%, #FFFDF8 0%, #FAF3E6 42%, #EDDFC7 100%);
}

/* paper tooth — keeps large flat areas from looking like flat CSS */
.grain {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .32;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

main { position: relative; z-index: 2; }

/* ── top bar ────────────────────────────────────────────────── */
.topbar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(.9rem, 2.5vw, 1.6rem) clamp(1rem, 4vw, 2.4rem);
}
.mark { width: 26px; color: var(--maroon); opacity: .8; }
.mark svg { width: 100%; display: block; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.topbar-actions { display: flex; gap: .5rem; }

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-height: 44px;              /* touch target */
  padding: 0 1rem;
  border: 1px solid var(--sand-2);
  border-radius: 100px;
  background: rgba(250, 246, 239, .86);
  backdrop-filter: blur(6px);
  color: var(--ink);
  font: inherit;
  font-size: .88rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.chip:hover { border-color: var(--gold); }
.chip:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }
.chip--icon { width: 44px; padding: 0; }
.chip--icon svg { width: 19px; height: 19px; fill: currentColor; stroke: currentColor; }
.chip--icon .i-on { display: none; }
.chip--icon[aria-pressed="true"] .i-on  { display: block; }
.chip--icon[aria-pressed="true"] .i-off { display: none; }

/* ── sections ───────────────────────────────────────────────── */
.scene {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  padding: clamp(5rem, 14vh, 9rem) clamp(1.25rem, 6vw, 5rem);
}
.panel {
  position: relative;
  width: var(--shell);
  /* a soft one-sided wash instead of a glass card — keeps type legible
     over the moving scene without stamping a rectangle on it */
  padding: clamp(1.5rem, 4vw, 2.5rem);
  margin: -1rem;
}
.panel::before {
  content: "";
  position: absolute;
  inset: -12% -30% -12% -30%;
  z-index: -1;
  background: radial-gradient(60% 55% at 50% 50%,
              rgba(250, 246, 239, .95) 0%,
              rgba(250, 246, 239, .82) 45%,
              rgba(250, 246, 239, 0) 100%);
}
.panel--left   { margin-right: auto; }
.panel--right  { margin-left: auto; }
.panel--center { margin-inline: auto; text-align: center; }

/* ── type ───────────────────────────────────────────────────── */
.eyebrow {
  font-size: clamp(.82rem, 2.2vw, .95rem);
  letter-spacing: .06em;
  color: var(--maroon);
  margin-bottom: 1.1rem;
}

.display {
  font-family: "Rozha One", serif;
  font-weight: 400;
  font-size: clamp(3.4rem, 13vw, 7.5rem);
  line-height: 1.08;             /* Devanagari matras collide below ~1.05 */
  letter-spacing: .005em;
  color: var(--maroon);
  margin-bottom: 1.4rem;
}

h2 {
  font-family: "Rozha One", serif;
  font-weight: 400;
  font-size: clamp(2.1rem, 6.5vw, 3.4rem);
  line-height: 1.08;
  color: var(--maroon);
  margin-bottom: 1rem;
}

.kicker {
  font-size: .85rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin-bottom: .7rem;
}

.lede { font-size: clamp(1.05rem, 3vw, 1.3rem); color: var(--ink-soft); }
.body { color: var(--ink-soft); }

.verse { font-size: clamp(1.1rem, 3.4vw, 1.5rem); line-height: 1.85; }
.verse b { font-weight: 400; color: var(--maroon); }
.verse + .body { margin-top: 1.4rem; }

/* ── date / day / time ──────────────────────────────────────── */
.facts { margin-top: 2rem; display: grid; gap: .1rem; }
.facts > div {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 1rem;
  align-items: baseline;
  padding: .85rem 0;
  border-top: 1px solid var(--sand-2);
}
.facts > div:last-child { border-bottom: 1px solid var(--sand-2); }
.facts dt { font-size: .9rem; letter-spacing: .05em; color: var(--ink-soft); }
.facts dd {
  font-family: "Rozha One", serif;
  font-size: clamp(1.3rem, 4vw, 1.75rem);
  line-height: 1.2;
  color: var(--ink);
}

/* ── scroll cue ─────────────────────────────────────────────── */
.scroll-cue {
  margin-top: 3rem;
  font-size: .85rem;
  letter-spacing: .1em;
  color: var(--ink-soft);
}
.scroll-cue i {
  display: block;
  width: 1px; height: 3rem;
  margin: 1rem auto 0;
  background: linear-gradient(var(--gold), transparent);
  transform-origin: top;
  animation: cue 2.4s ease-in-out infinite;
}
@keyframes cue {
  0%, 100% { transform: scaleY(.4); opacity: .4 }
  50%      { transform: scaleY(1);  opacity: 1 }
}

/* ── finale card ────────────────────────────────────────────── */
.scene--finale { justify-content: center; }
/* on wide screens the card moves off centre so the lit niche behind it
   stays visible — centred, the card sits exactly on top of it */
@media (min-width: 900px) {
  .scene--finale { justify-content: flex-end; padding-right: clamp(3rem, 8vw, 9rem); }
}
/* card + credit as one column, so the desktop flex-end rule that shifts
   them clear of the niche still has a single item to move */
.finale-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
  width: var(--shell);
}

.madeby {
  font-size: .74rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.madeby a {
  display: inline-block;
  padding: .5rem .6rem;              /* comfortable tap target */
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .2s, border-color .2s;
}
.madeby a:hover { color: var(--maroon); border-bottom-color: var(--gold); }
.madeby a:focus-visible { outline: 2px solid var(--maroon); outline-offset: 2px; }

.card {
  width: 100%;
  /* kept compact deliberately: at 3.5rem block padding the card is taller
     than an 800px-high window and its top gets cut off */
  padding: clamp(1.6rem, 3.6vw, 2.4rem) clamp(1.4rem, 4vw, 2.4rem);
  text-align: center;
  background: var(--bone);
  border: 1px solid var(--sand-2);
  border-radius: 2px;                       /* sharp = stationery, not app UI */
  box-shadow:
    0 1px 0 var(--bone-2) inset,
    0 30px 60px -30px rgba(90, 60, 30, .28);
}
.card::after {
  content: "";
  display: block;
  width: 3rem; height: 1px;
  margin: 1.4rem auto 0;
  background: var(--gold);
}
.card-title { font-size: clamp(1.5rem, 4.6vw, 2rem); margin-bottom: 1.2rem; }

.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .5rem;
  margin: 1.3rem 0;
  padding: .9rem .5rem;
  border-block: 1px solid var(--sand-2);
}
.countdown > div { display: flex; flex-direction: column; align-items: center; gap: .25rem; }
.countdown b {
  font-family: "Rozha One", serif;
  font-size: clamp(1.5rem, 5vw, 2rem);
  font-weight: 400;
  line-height: 1;
  color: var(--maroon);
  font-variant-numeric: tabular-nums;
}
.countdown span { font-size: .72rem; letter-spacing: .06em; color: var(--ink-soft); }
.cd-done { margin: 1.5rem 0; color: var(--maroon); }

.where { font-style: normal; color: var(--ink-soft); margin-bottom: 1.3rem; }
.where a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--gold); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  min-height: 48px;
  padding: 0 1.6rem;
  border-radius: 100px;
  background: var(--maroon);
  color: var(--bone);
  text-decoration: none;
  font-size: .95rem;
  transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(122, 17, 19, .7); }
.btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.btn svg { width: 17px; height: 17px; fill: currentColor; }

.sign { margin-top: 1.5rem; color: var(--maroon); }
.sign-names { min-height: 1.6rem; }

/* ── hotspots (positioned by journey.js) ────────────────────── */
.hotspots {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s;
}
.hotspot[data-on="1"] { opacity: 1; }
.hotspot::before {
  content: "";
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--bone);
  border: 1px solid var(--maroon);
  box-shadow: 0 0 0 0 rgba(122, 17, 19, .45);
  animation: ping 2.8s ease-out infinite;
}
@keyframes ping {
  0%   { box-shadow: 0 0 0 0 rgba(122, 17, 19, .4) }
  70%  { box-shadow: 0 0 0 16px rgba(122, 17, 19, 0) }
  100% { box-shadow: 0 0 0 0 rgba(122, 17, 19, 0) }
}
.hotspot:focus-visible { outline: 2px solid var(--maroon); outline-offset: 4px; border-radius: 50%; }

.hotspot-label {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.96);
  width: max-content; max-width: 15rem;
  padding: .8rem 1.1rem;
  background: var(--bone);
  border: 1px solid var(--sand-2);
  box-shadow: 0 18px 40px -20px rgba(90, 60, 30, .45);
  font-size: .92rem;
  line-height: 1.55;
  text-align: left;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.hotspot[aria-expanded="true"] .hotspot-label {
  opacity: 1;
  transform: translate(-50%, calc(-50% - 3.2rem)) scale(1);
}
.hotspot-label b { display: block; font-family: "Rozha One", serif; font-weight: 400; color: var(--maroon); }

/* ── entrance reveals ───────────────────────────────────────── */
.panel, .card, .madeby {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease-out, transform .9s cubic-bezier(.2,.8,.3,1);
}
.scene.is-in .panel,
.scene.is-in .card,
.scene.is-in .madeby { opacity: 1; transform: none; }
.scene.is-in .madeby { transition-delay: .25s; }

/* ── narrow screens ─────────────────────────────────────────── */
@media (max-width: 640px) {
  /* copy sits as a caption along the bottom so the upper two-thirds of
     the screen stays clear for the house — a centred scrim on a phone
     covers the very thing it is captioning */
  .scene { align-items: flex-end; padding-bottom: clamp(2.5rem, 9vh, 5rem); }
  .scene--finale { align-items: center; }

  .panel { width: 100%; margin-inline: 0; text-align: left; }
  .panel--center { text-align: center; }
  .panel::before {
    inset: -55% -25% -45% -25%;
    background: linear-gradient(to top,
                rgba(250, 246, 239, .97) 0%,
                rgba(250, 246, 239, .93) 48%,
                rgba(250, 246, 239, 0)   100%);
  }
  .facts > div { grid-template-columns: 5.5rem 1fr; }
}

/* ── reduced motion ─────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .panel, .card, .madeby { opacity: 1 !important; transform: none !important; transition: none; }
  .scroll-cue i, .hotspot::before { animation: none; }
  .btn:hover { transform: none; }
}