/* Jaggo Night — a night of lights */
:root {
  --night: #0A0F2C;
  --indigo: #141B4A;
  --indigo-2: #222B6B;
  --amber: #FFB547;
  --glow: #FFE0A0;
  --gold: #E2B45E;
  --ember: #FF7A2F;
  --mist: #C8CCEB;
  --text: #EEF0FF;
  --display: "Bodoni Moda", Didot, Georgia, serif;
  --sans: "Jost", "Segoe UI", sans-serif;
  --script: "Allura", cursive;
  --gurmukhi: "Baloo Paaji 2", sans-serif;
  --ease: cubic-bezier(.22, .8, .2, 1);
  --glow-text: 0 0 18px rgba(255,181,71,.55), 0 0 2px rgba(255,224,160,.9);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--night);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; height: 100svh; }
img, video, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }

.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  background: var(--glow); color: var(--night); padding: 8px 14px; border-radius: 6px;
}
.skip-link:focus { top: 16px; }

.stars { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
main { position: relative; z-index: 1; }

.eyebrow {
  font-family: var(--sans); font-weight: 500;
  font-size: .7rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--amber);
  margin: 0 0 .8rem;
}
.display {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2.1rem, 9vw, 3.3rem);
  line-height: 1.08;
  margin: 0 0 1.4rem;
}
.display em { font-style: italic; color: var(--glow); text-shadow: var(--glow-text); }
.pa-big { font-family: var(--gurmukhi); font-weight: 700; font-size: 1.7rem; color: var(--amber); margin: 0 0 .2rem; text-shadow: var(--glow-text); }

/* ================= Intro ================= */
.intro {
  position: fixed; inset: 0; z-index: 50;
  overflow: hidden;
  background: var(--night);
  transition: opacity 1.1s ease, visibility 1.1s;
}
.intro.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
.intro__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* The dark layer is cut away by a growing circle of light */
@property --r { syntax: "<length>"; inherits: false; initial-value: 0px; }
.intro__dark {
  transition: --r 2.4s cubic-bezier(.55, 0, .25, 1);
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 38%, #18205A 0%, var(--night) 70%);
  display: grid; place-items: center;
  --r: 0px;
  -webkit-mask: radial-gradient(circle at 50% 30%, transparent var(--r), #000 calc(var(--r) + 2px));
  mask: radial-gradient(circle at 50% 30%, transparent var(--r), #000 calc(var(--r) + 2px));
}
.intro__gaagar {
  position: relative;
  width: min(62vw, 300px);
  margin-top: -18vh;
  filter: brightness(.28) saturate(.5);
  transition: filter 1.2s ease, transform 1.6s var(--ease), opacity 1s;
  animation: float 6s ease-in-out infinite;
}
@keyframes float { 50% { transform: translateY(-8px); } }
.intro__halo {
  position: absolute; left: 50%; top: 30%;
  width: 10px; height: 10px; margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,224,160,.95), rgba(255,181,71,.5) 40%, transparent 70%);
  opacity: 0;
  transition: transform 1.4s var(--ease), opacity .8s;
}
.is-open-light .intro__dark { --r: 150vmax; }
.is-lit .intro__gaagar { filter: brightness(1.08) saturate(1.1) drop-shadow(0 0 40px rgba(255,181,71,.7)); }
.is-lit .intro__halo { opacity: 1; transform: scale(60); }

.intro__text {
  position: absolute; left: 16px; right: 16px; bottom: max(7vh, 48px);
  text-align: center;
  transition: opacity .6s;
}
.is-lit .intro__text { opacity: 0; pointer-events: none; }
.intro__pa { font-family: var(--gurmukhi); font-weight: 700; font-size: 1.5rem; color: var(--amber); margin: 0; text-shadow: var(--glow-text); animation: up 1s var(--ease) .3s both; }
.intro__names { font-family: var(--display); font-style: italic; font-size: clamp(2.3rem, 10vw, 3.2rem); line-height: 1.1; margin: .1rem 0 1.2rem; animation: up 1s var(--ease) .5s both; }
.intro__names span { font-family: var(--script); font-style: normal; color: var(--amber); }
@keyframes up { from { opacity: 0; transform: translateY(14px); } }

.tap {
  display: inline-flex; align-items: center; gap: .7rem;
  border: 1px solid rgba(255,181,71,.6); border-radius: 999px;
  padding: .85rem 1.6rem;
  background: rgba(20,27,74,.7);
  color: var(--glow);
  font-family: var(--sans); font-weight: 500; font-size: .78rem; letter-spacing: .2em; text-transform: uppercase;
  animation: up 1s var(--ease) .7s both;
}
.tap:hover, .tap:focus-visible { background: var(--indigo-2); outline: none; box-shadow: 0 0 0 3px rgba(255,181,71,.35); }

/* A small CSS flame, reused for the button and the countdown diyas */
.tap__flame, .diya__flame {
  position: relative;
  width: 10px; height: 16px;
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  background: radial-gradient(ellipse at 50% 70%, #FFF6D8 0%, var(--amber) 45%, var(--ember) 80%);
  box-shadow: 0 0 12px 3px rgba(255,181,71,.6);
  animation: flicker 1.6s ease-in-out infinite alternate;
  transform-origin: 50% 90%;
}
@keyframes flicker {
  0% { transform: scale(1) rotate(-2deg); opacity: .95; }
  40% { transform: scale(1.08, .94) rotate(2deg); }
  70% { transform: scale(.94, 1.06) rotate(-1deg); opacity: 1; }
  100% { transform: scale(1.04) rotate(1.5deg); opacity: .9; }
}

/* ================= Controls ================= */
.controls {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60;
  display: flex; gap: 10px; align-items: center;
}
.controls[hidden], .ctl[hidden] { display: none; }
.ctl {
  border: 1px solid rgba(255,181,71,.55); border-radius: 999px;
  background: rgba(10,15,44,.75); color: var(--glow);
  padding: .5rem 1rem;
  font-family: var(--sans); font-weight: 500; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase;
  backdrop-filter: blur(6px);
}
.ctl--round { width: 44px; height: 44px; padding: 0; display: grid; place-items: center; }
.ctl svg { width: 20px; height: 20px; fill: currentColor; }
.ctl .ico-off { display: none; }
.ctl[aria-pressed="false"] .ico-on { display: none; }
.ctl[aria-pressed="false"] .ico-off { display: block; }

/* ================= Hero ================= */
.hero { position: relative; min-height: 100svh; overflow: hidden; display: flex; justify-content: center; text-align: center; }
.hero__bg { position: absolute; inset: 0; background: url("media/night-end.webp") center bottom / cover; }
.hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,15,44,.92) 0%, rgba(10,15,44,.78) 38%, rgba(10,15,44,.2) 62%, rgba(10,15,44,.55) 100%);
}
.hero__text { position: relative; z-index: 2; padding: max(10svh, 64px) 16px 0; max-width: 560px; }
.hero__names {
  font-family: var(--display); font-weight: 400; font-style: italic;
  font-size: clamp(3.4rem, 16vw, 5.6rem);
  line-height: 1;
  margin: 0 0 .8rem;
  display: flex; flex-direction: column; align-items: center;
  color: #FFF4DA;
  text-shadow: var(--glow-text);
}
.hero__names em { font-family: var(--script); font-style: normal; font-size: .62em; color: var(--amber); margin: -.05em 0; }
.hero__line { font-family: var(--display); font-style: italic; font-size: 1.15rem; color: var(--mist); margin: 0 auto 1rem; max-width: 20em; }
.hero__date {
  display: inline-block; margin: 0;
  font-weight: 500; font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--glow);
  padding: .5rem 1.1rem;
  border: 1px solid rgba(255,181,71,.5); border-radius: 999px;
  background: rgba(10,15,44,.5);
}

.fade { opacity: 0; }
.is-open .fade { animation: fade-up 1.2s var(--ease) var(--d, 0s) both; }
@keyframes fade-up { from { opacity: 0; transform: translateY(16px); filter: blur(4px); } to { opacity: 1; transform: none; filter: none; } }

/* ================= Invitation ================= */
.invite { position: relative; padding: 5rem 16px 4.5rem; text-align: center; background: var(--indigo); }
/* paper-cut scalloped top edge */
.invite::before {
  content: ""; position: absolute; left: 0; right: 0; top: -22px; height: 24px;
  background: radial-gradient(circle at 18px 24px, var(--indigo) 17px, transparent 18px) 0 0 / 36px 24px repeat-x;
}
.invite__inner { max-width: 32rem; margin: 0 auto; }
.invite__lead { font-weight: 400; font-size: 1.02rem; color: var(--text); margin: 1.4rem 0 .4rem; }
.invite__lead span { font-family: var(--display); font-style: italic; color: var(--mist); }
.invite__name { font-family: var(--script); font-weight: 400; font-size: clamp(3rem, 14vw, 4rem); line-height: 1.1; color: var(--glow); text-shadow: var(--glow-text); margin: .4rem 0 0; }
.invite__with { font-family: var(--display); font-style: italic; color: var(--amber); margin: 0; }

/* ================= Window + countdown ================= */
.window { padding: 4.5rem 16px; display: grid; gap: 2.2rem; justify-items: center; text-align: center; }
.window__frame {
  width: 300px; height: 500px;
  /* a cusped Punjabi arch, cut like paper */
  clip-path: path("M0 500V150C0 97 35 62 80 46 106 35 132 16 150 0 168 16 194 35 220 46 265 62 300 97 300 150V500Z");
  overflow: hidden;
  background: var(--indigo-2);
  filter: drop-shadow(0 0 30px rgba(255,181,71,.35));
}
.window__film { width: 100%; height: 100%; object-fit: cover; }
.window__text { max-width: 30rem; }
.window__text p:not(.eyebrow) { color: var(--mist); }

.diyas { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; width: 100%; max-width: 30rem; }
.diya { display: grid; justify-items: center; gap: .2rem; padding-top: .4rem; }
.diya__flame { width: 12px; height: 20px; margin-bottom: 2px; }
.diya:nth-child(2) .diya__flame { animation-delay: -.4s; }
.diya:nth-child(3) .diya__flame { animation-delay: -.9s; }
.diya:nth-child(4) .diya__flame { animation-delay: -1.3s; }
.diya b {
  display: grid; place-items: center;
  width: 100%; max-width: 86px; height: 52px;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  background: linear-gradient(180deg, #C9813A, #7A3E16);
  box-shadow: inset 0 4px 0 rgba(255,224,160,.45), 0 8px 20px rgba(255,122,47,.25);
  font-family: var(--display); font-weight: 500; font-size: 1.5rem; color: #FFF4DA;
}
.diya small { font-size: .62rem; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); }

/* ================= Lantern path ================= */
.path { padding: 4.5rem 16px 5rem; text-align: center; background: linear-gradient(180deg, transparent, rgba(20,27,74,.85) 12%, rgba(20,27,74,.85) 88%, transparent); }
.path__list { position: relative; list-style: none; margin: 0 auto; padding: 0; max-width: 34rem; display: grid; gap: 2.4rem; text-align: left; }
.path__line { position: absolute; left: 27px; top: 10px; bottom: 10px; width: 2px; background: rgba(200,204,235,.15); }
.path__line span { position: absolute; left: 0; top: 0; width: 100%; height: calc(var(--p, 0) * 100%); background: linear-gradient(var(--amber), var(--ember)); box-shadow: 0 0 10px var(--amber); }
.stop { position: relative; display: grid; grid-template-columns: 56px 1fr; gap: 1rem; }
.lantern { width: 56px; height: 80px; position: relative; z-index: 1; }
.lantern svg { width: 100%; height: 100%; overflow: visible; }
.lantern .body { fill: #2A2F63; stroke: var(--gold); stroke-width: 1.5; transition: fill .8s; }
.lantern .light { fill: var(--amber); opacity: 0; transition: opacity .8s; filter: blur(.5px); }
.lantern .cap { fill: var(--gold); }
.stop.is-lit .lantern .body { fill: #F6A73E; }
.stop.is-lit .lantern .light { opacity: 1; }
.stop.is-lit .lantern svg { filter: drop-shadow(0 0 14px rgba(255,181,71,.8)); animation: swing 4s ease-in-out infinite; transform-origin: 50% 0; }
@keyframes swing { 50% { transform: rotate(3deg); } }
.stop__card {
  padding: 1.1rem 1.2rem 1.2rem;
  border-radius: 14px;
  background: rgba(10,15,44,.55);
  border: 1px solid rgba(255,181,71,.18);
  transition: border-color .8s, box-shadow .8s;
}
.stop.is-lit .stop__card { border-color: rgba(255,181,71,.5); box-shadow: 0 0 40px rgba(255,181,71,.12); }
.stop__when { font-weight: 500; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; color: var(--amber); margin: 0; }
.stop__name { font-family: var(--display); font-weight: 400; font-style: italic; font-size: 1.8rem; line-height: 1.15; margin: .1rem 0 0; color: #FFF4DA; }
.stop__pa { font-family: var(--gurmukhi); font-weight: 500; color: var(--glow); margin: 0 0 .6rem; }
.stop__place { font-weight: 500; margin: 0; }
.stop__note { color: var(--mist); margin: .2rem 0 .3rem; font-size: .98rem; }
.stop__dress { font-family: var(--script); font-size: 1.5rem; color: var(--amber); margin: 0; line-height: 1.2; }
.stop__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: .55rem 1.15rem;
  border: 1px solid rgba(255,181,71,.6); border-radius: 999px;
  background: transparent; color: var(--glow);
  font-family: var(--sans); font-weight: 500; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none;
  transition: background .25s, color .25s, box-shadow .25s;
}
.btn:hover, .btn:focus-visible { background: rgba(255,181,71,.15); box-shadow: 0 0 18px rgba(255,181,71,.3); outline: none; }
.btn--solid { background: var(--amber); border-color: var(--amber); color: var(--night); }
.btn--solid:hover, .btn--solid:focus-visible { background: var(--glow); color: var(--night); }

/* ================= RSVP ================= */
.rsvp { padding: 4.5rem 16px; text-align: center; }
.rsvp__form { max-width: 28rem; margin: 0 auto; display: grid; gap: 1.1rem; text-align: left; }
.field { display: grid; gap: .35rem; }
.field > span, .choice legend { font-weight: 500; font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--amber); }
.field small { text-transform: none; letter-spacing: 0; color: var(--mist); }
.field input, .field select, .field textarea {
  width: 100%;
  font: inherit; font-weight: 400; font-size: 1rem;
  padding: .7rem .9rem;
  border-radius: 10px;
  border: 1px solid rgba(200,204,235,.3);
  background: rgba(20,27,74,.6);
  color: var(--text);
}
.field select option { background: var(--indigo); }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.choice { border: 0; padding: 0; margin: 0; display: grid; gap: .5rem; }
.choice legend { margin-bottom: .4rem; }
.choice--multi { grid-template-columns: 1fr 1fr; }
.choice--multi legend { grid-column: 1 / -1; }
.choice label {
  display: flex; align-items: center; gap: .6rem;
  min-height: 44px; padding: .6rem .9rem;
  border: 1px solid rgba(200,204,235,.25); border-radius: 10px;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.choice input { accent-color: var(--amber); width: 18px; height: 18px; margin: 0; }
.choice label:has(input:checked) { border-color: var(--amber); background: rgba(255,181,71,.1); }
.rsvp__actions { display: grid; gap: .6rem; margin-top: .3rem; }

/* ================= Footer ================= */
.foot { text-align: center; padding: 3rem 16px calc(5.5rem + env(safe-area-inset-bottom)); }
.foot__gaagar { width: 120px; margin: 0 auto 1rem; filter: drop-shadow(0 0 30px rgba(255,181,71,.55)); }
.foot__en { font-family: var(--display); font-style: italic; color: var(--mist); margin: 0 0 1rem; }
.foot__names { font-family: var(--script); font-size: 2.4rem; color: var(--glow); text-shadow: var(--glow-text); margin: 0 0 1.4rem; }

/* ================= Reveal + toast ================= */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

.toast {
  position: fixed; left: 50%; bottom: calc(80px + env(safe-area-inset-bottom)); z-index: 70;
  transform: translate(-50%, 20px);
  max-width: calc(100% - 32px);
  padding: .7rem 1.1rem;
  background: var(--glow); color: var(--night);
  border-radius: 10px;
  font-size: .95rem; font-weight: 400;
  opacity: 0; pointer-events: none;
  transition: opacity .3s, transform .3s;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

@media (min-width: 820px) {
  .window { grid-template-columns: auto minmax(0, 30rem); align-items: center; justify-content: center; column-gap: 4rem; text-align: left; }
  .diyas { grid-column: 1 / -1; justify-self: center; }
  .hero__bg { background-size: auto 100%; background-repeat: no-repeat; background-color: var(--night); }
  .intro__film { object-fit: contain; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .fade, .reveal { opacity: 1; transform: none; filter: none; }
}