/* ————————————————————————————————————————————————
   VASTRASO — Coming Soon
   Noir stage · maroon velvet · gold zari · ivory serif.
   Palette drawn from the brand collateral.
   ———————————————————————————————————————————————— */

:root {
  --noir:        #0E0906;
  --noir-2:      #140C08;
  --espresso:    #1C1109;
  --maroon-deep: #3A0E15;
  --maroon:      #5A1620;
  --wine:        #6E1F2A;
  --bronze:      #6E5530;
  --gold:        #C49D42;
  --gold-hi:     #EBD08A;
  --champagne:   #D9C29A;
  --ivory:       #F5EFE3;
  --ink:         #2A0A10; /* dark maroon ink — for text on gold foil */
  --rose-error:  #E0916A;

  --serif-display: "Cinzel", "Trajan Pro", "Times New Roman", serif;
  --serif-body: "Cormorant Garamond", Georgia, serif;
  --sans: "Jost", "Futura", sans-serif;
  --devanagari: "Tiro Devanagari Sanskrit", serif;

  --ease: cubic-bezier(0.19, 1, 0.22, 1);
}

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

html { height: 100%; }

body {
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(130% 100% at 50% 40%, var(--noir-2) 0%, var(--noir) 60%, #080503 100%);
  color: var(--ivory);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--gold); color: var(--noir); }

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
  border-radius: 1px;
}

/* ——— the velvet ——— */

#veil {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* CSS-only velvet if WebGL is unavailable */
.veil-fallback {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: none;
  pointer-events: none;
  background:
    radial-gradient(70% 55% at 70% 34%, rgba(140, 52, 66, 0.55), transparent 62%),
    radial-gradient(90% 70% at 30% 70%, rgba(90, 22, 34, 0.55), transparent 60%),
    radial-gradient(130% 110% at 50% 55%, var(--maroon-deep) 0%, #1a0a0d 62%, var(--noir) 100%);
}
.no-webgl #veil { display: none; }
.no-webgl .veil-fallback { display: block; }

.vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 95% at 50% 44%, transparent 46%, rgba(8, 5, 3, 0.72) 100%);
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.16;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

/* वस्त्र — Sanskrit for garment */
.devanagari {
  position: fixed;
  top: 50%;
  right: -0.06em;
  transform: translateY(-50%);
  z-index: 1;
  writing-mode: vertical-rl;
  font-family: var(--devanagari);
  font-size: clamp(9rem, 26vh, 17rem);
  line-height: 1;
  color: var(--gold-hi);
  opacity: 0.05;
  /* no letter-spacing: it severs the shirorekha of the conjunct वस्त्र */
  letter-spacing: normal;
  pointer-events: none;
  user-select: none;
  will-change: transform;
}

/* ——— my own corner filigree ——— */

.corners {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  animation: fade-in 2.2s ease 0.8s forwards;
}
.corner {
  position: absolute;
  width: clamp(44px, 7vw, 82px);
  height: clamp(44px, 7vw, 82px);
  opacity: 0.5;
}
.corner.tl { top: clamp(14px, 2.4vw, 26px); left: clamp(14px, 2.4vw, 26px); }
.corner.tr { top: clamp(14px, 2.4vw, 26px); right: clamp(14px, 2.4vw, 26px); transform: scaleX(-1); }
.corner.bl { bottom: clamp(14px, 2.4vw, 26px); left: clamp(14px, 2.4vw, 26px); transform: scaleY(-1); }
.corner.br { bottom: clamp(14px, 2.4vw, 26px); right: clamp(14px, 2.4vw, 26px); transform: scale(-1, -1); }
@keyframes fade-in { to { opacity: 1; } }

/* ——— top bar ——— */

.topbar {
  position: relative;
  z-index: 5;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.8rem, 4.5vw, 3.4rem) 0;
}

.topbar-status {
  display: inline-flex;
  align-items: center;
  gap: 0.7em;
  font-size: 0.64rem;
  font-weight: 400;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--champagne);
}

/* a small gold lozenge that breathes like an ember — not a SaaS "live" ping */
.pulse-dot {
  width: 6px;
  height: 6px;
  background: var(--gold);
  transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(196, 157, 66, 0.6);
  animation: ember 3.8s ease-in-out infinite;
}
@keyframes ember {
  0%, 100% { opacity: 0.5; box-shadow: 0 0 4px rgba(196, 157, 66, 0.45); }
  50%      { opacity: 1;   box-shadow: 0 0 11px rgba(196, 157, 66, 0.9); }
}

/* ——— center stage ——— */

.stage {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2rem, 4vh, 3.5rem) 1.4rem;
}

/* pool of shadow behind the copy so it always floats above the velvet —
   biased downward so the RSVP + fine print keep a dark backing too */
.stage::before {
  content: "";
  position: absolute;
  inset: -6% -4%;
  z-index: -1;
  background: radial-gradient(60% 66% at 50% 56%,
    rgba(8, 4, 2, 0.92) 0%,
    rgba(8, 4, 2, 0.74) 44%,
    rgba(8, 4, 2, 0.42) 70%,
    rgba(8, 4, 2, 0.12) 86%,
    transparent 96%);
  pointer-events: none;
}

.crest {
  position: relative;
  width: clamp(104px, 15vh, 152px);
  margin-bottom: clamp(1.1rem, 2.6vh, 2rem);
  animation: breathe 9s ease-in-out infinite;
  will-change: transform;
}
.crest img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 46px rgba(0, 0, 0, 0.6));
}
/* light sweep, masked to the monogram itself */
.crest-sheen {
  position: absolute;
  inset: 0;
  -webkit-mask-image: url("/assets/logo-dark-bg.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-image: url("/assets/logo-dark-bg.svg");
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  background: linear-gradient(112deg,
    transparent 42%,
    rgba(245, 239, 227, 0.55) 50%,
    transparent 58%);
  background-size: 320% 100%;
  animation: sheen 7.5s ease-in-out infinite;
}
@keyframes sheen {
  0%, 55%  { background-position: 120% 0; }
  75%, 100% { background-position: -60% 0; }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.012); }
}

.eyebrow {
  font-size: clamp(0.6rem, 1.4vw, 0.72rem);
  font-weight: 400;
  letter-spacing: 0.5em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: clamp(0.9rem, 2vh, 1.4rem);
  padding-left: 0.5em; /* optically recenters tracked text */
  /* halo keeps gold caps legible where a zari highlight drifts beneath */
  text-shadow: 0 1px 7px rgba(8, 4, 2, 0.95);
}

/* letter-by-letter engraved reveal */
.wordmark {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(3rem, 10.5vw, 7.4rem);
  line-height: 1.04;
  letter-spacing: 0.1em;
  padding-left: 0.1em;
  color: var(--ivory);
  text-shadow: 0 2px 70px rgba(196, 157, 66, 0.28);
}
.wordmark span {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.35em);
  filter: blur(6px);
  animation: letter-rise 0.9s var(--ease) forwards;
  animation-delay: calc(1.05s + var(--i) * 0.075s);
}
@keyframes letter-rise {
  to { opacity: 1; transform: translateY(0); filter: blur(0); }
}

.divider {
  width: min(320px, 66vw);
  margin: clamp(1.1rem, 2.5vh, 1.8rem) 0;
}
.divider svg {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 1px 7px rgba(196, 157, 66, 0.3));
}

.tagline {
  font-family: var(--serif-body);
  font-size: clamp(1.18rem, 2.6vw, 1.6rem);
  font-weight: 400;
  color: var(--champagne);
  letter-spacing: 0.02em;
}
.tagline em {
  font-style: italic;
  color: var(--ivory);
}

/* ——— the RSVP ——— */

.rsvp {
  margin-top: clamp(1.8rem, 4.5vh, 3rem);
  width: min(410px, 88vw);
}

.rsvp-label {
  font-size: 0.62rem;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.1rem;
  padding-left: 0.4em;
  text-shadow: 0 1px 7px rgba(8, 4, 2, 0.95);
}

.field {
  border-bottom: 1px solid rgba(217, 194, 154, 0.3);
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}
.field:focus-within {
  border-bottom-color: var(--gold);
  box-shadow: 0 16px 34px -20px rgba(196, 157, 66, 0.55);
}
.field.error {
  border-bottom-color: var(--rose-error);
  animation: shake 0.4s ease;
}
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  50% { transform: translateX(5px); }
  75% { transform: translateX(-3px); }
}

#email {
  width: 100%;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  padding: 0.8rem 0.2rem;
  font-family: var(--serif-body);
  font-weight: 500;
  font-size: 1.12rem;
  letter-spacing: 0.03em;
  text-align: center;
  color: var(--ivory);
  caret-color: var(--gold);
  text-shadow: 0 1px 6px rgba(8, 4, 2, 0.9);
}
#email::placeholder {
  color: rgba(228, 210, 178, 0.78);
  font-style: italic;
}

#atelier {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* ——— the couture CTA: dark ink pressed on gold foil ——— */

.foil {
  position: relative;
  overflow: hidden;
  display: block;
  width: 100%;
  margin-top: 1.2rem;
  padding: 0.95rem 1.5rem;
  border: none;
  cursor: pointer;
  background:
    linear-gradient(100deg,
      #a87e2c 0%, #d3ab4d 20%, #f4e2a4 40%, #e6c66e 58%, #c49d42 78%, #9c7328 100%);
  color: var(--ink);
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: 0.82rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 224, 0.6),
    inset 0 -2px 6px rgba(90, 20, 16, 0.28),
    0 18px 36px -18px rgba(196, 157, 66, 0.6);
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease), filter 0.4s ease;
}
/* engraved inner keyline — the invitation double-rule */
.foil::before {
  content: "";
  position: absolute;
  inset: 5px;
  border: 1px solid rgba(58, 14, 21, 0.32);
  pointer-events: none;
}
.foil-label {
  position: relative;
  z-index: 1;
  padding-left: 0.28em;
}
.foil-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  transform: translateX(-130%);
  pointer-events: none;
}
.foil:hover, .foil:focus-visible {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255, 248, 224, 0.7),
    inset 0 -2px 6px rgba(90, 20, 16, 0.28),
    0 22px 42px -18px rgba(196, 157, 66, 0.75);
}
.foil:hover .foil-sheen, .foil:focus-visible .foil-sheen {
  animation: foil-sweep 0.9s ease;
}
.foil:active { transform: translateY(0); }
.foil:disabled { cursor: wait; }
.foil.sending .foil-sheen { animation: foil-sweep 1.5s ease infinite; }
@keyframes foil-sweep {
  from { transform: translateX(-130%); }
  to   { transform: translateX(130%); }
}

.form-note {
  margin-top: 0.95rem;
  font-size: 0.7rem;
  font-weight: 300;
  letter-spacing: 0.14em;
  color: var(--champagne);
  text-shadow: 0 1px 6px rgba(8, 4, 2, 0.9);
  transition: color 0.3s ease;
}
.form-note.is-error { color: var(--rose-error); }

.form-consent {
  margin-top: 0.55rem;
  font-size: 0.64rem;
  font-weight: 300;
  letter-spacing: 0.08em;
  color: rgba(224, 205, 172, 0.86);
  text-shadow: 0 1px 6px rgba(8, 4, 2, 0.9);
}
.form-consent a {
  color: var(--ivory);
  text-underline-offset: 3px;
  text-decoration-color: rgba(217, 194, 154, 0.55);
}
.form-consent a:hover { color: var(--gold); }

.rsvp-success {
  animation: success-in 1s var(--ease);
}
.success-flourish {
  display: block;
  color: var(--gold);
  font-size: 1.1rem;
  margin-bottom: 0.8rem;
}
.rsvp-success p {
  font-family: var(--serif-body);
  font-size: 1.4rem;
  color: var(--ivory);
}
.rsvp-success .success-sub {
  font-style: italic;
  font-size: 1.05rem;
  color: var(--champagne);
  margin-top: 0.25rem;
}
@keyframes success-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ——— footer ——— */

.foot {
  position: relative;
  z-index: 5;
  padding-bottom: clamp(1.1rem, 2.6vh, 2rem);
}
/* the footer sits outside the stage pool, so give it its own dark backing
   or the fine print rides straight over live zari */
.foot::before {
  content: "";
  position: absolute;
  inset: -10% 0 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(8, 4, 2, 0.94) 12%, rgba(8, 4, 2, 0.62) 58%, transparent 100%);
  pointer-events: none;
}

.marquee {
  overflow: hidden;
  padding: 0.9rem 0;
  border-top: 1px solid rgba(110, 85, 48, 0.32);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 52s linear infinite;
}
.marquee-track span {
  font-size: 0.62rem;
  font-weight: 300;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: rgba(217, 194, 154, 0.5);
  white-space: nowrap;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.colophon {
  text-align: center;
  margin-top: 1rem;
  font-size: 0.58rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(224, 205, 172, 0.88);
  text-shadow: 0 1px 5px rgba(8, 4, 2, 0.95);
}
.colophon a {
  color: var(--champagne);
  text-decoration: none;
  border-bottom: 1px solid rgba(196, 157, 66, 0.4);
  padding-bottom: 1px;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.colophon a:hover {
  color: var(--gold-hi);
  border-color: var(--gold);
}

/* ——— entrance choreography ——— */

.reveal {
  opacity: 0;
  transform: translateY(14px);
  animation: reveal 1.1s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
.reveal-soft {
  opacity: 0;
  transform: scale(0.96);
  animation: reveal-soft 1.6s var(--ease) forwards;
  animation-delay: var(--d, 0s);
}
@keyframes reveal {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes reveal-soft {
  to { opacity: 1; transform: scale(1); }
}
/* .crest carries both an entrance and an infinite breathe — compose them. */
.crest.reveal-soft {
  animation: reveal-soft 1.6s var(--ease) var(--d, 0s) forwards,
             breathe 9s ease-in-out 2.2s infinite;
}

/* ——— small screens ——— */

@media (max-width: 640px) {
  .devanagari { opacity: 0.04; font-size: 8.5rem; }
  .topbar-status { letter-spacing: 0.2em; font-size: 0.58rem; }
  .corner { opacity: 0.4; }
}

/* ——— privacy dialog ——— */

/* keep the closed dialog hidden even where the native
   `dialog:not([open]){display:none}` UA rule is missing */
#privacy-dialog:not([open]) { display: none; }

#privacy-dialog {
  position: fixed;
  inset: 0;
  margin: auto; /* the global `* { margin:0 }` reset removed the native centering */
  border: 1px solid rgba(196, 157, 66, 0.35);
  border-radius: 2px;
  width: min(460px, 92vw);
  height: fit-content;
  max-height: 90vh;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: linear-gradient(160deg, var(--espresso) 0%, var(--noir) 100%);
  color: var(--champagne);
  box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.85);
}
#privacy-dialog::backdrop {
  background: rgba(8, 5, 3, 0.74);
  backdrop-filter: blur(3px);
}
#privacy-dialog[open] { animation: dialog-in 0.4s var(--ease); }
@keyframes dialog-in {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#privacy-title {
  font-family: var(--serif-body);
  font-weight: 600;
  font-size: 1.6rem;
  color: var(--ivory);
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}
#privacy-dialog p {
  font-family: var(--serif-body);
  font-size: 1.04rem;
  line-height: 1.5;
  margin-bottom: 0.85rem;
}
#privacy-dialog strong { color: var(--ivory); font-weight: 600; }
#privacy-dialog a {
  color: var(--gold-hi);
  text-underline-offset: 3px;
  text-decoration-color: rgba(196, 157, 66, 0.5);
}
#privacy-dialog a:hover { color: var(--ivory); }
.dialog-meta {
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(110, 85, 48, 0.4);
  font-size: 0.82rem !important;
  color: rgba(217, 194, 154, 0.62);
}
.dialog-close {
  position: absolute;
  top: 0.6rem;
  right: 0.9rem;
  background: none;
  border: none;
  color: var(--champagne);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s ease;
}
.dialog-close:hover { color: var(--gold); }

/* ——— reduced motion: show everything, move nothing ——— */

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-soft, .wordmark span, .crest, .crest.reveal-soft, .corners {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
  /* silence every remaining looping/entrance animation, including the ones
     fired on interaction: validation shake, foil sheen, success reveal, dialog */
  .crest-sheen, .marquee-track, .pulse-dot, .veil-fallback,
  .field.error, .foil-sheen, .foil.sending .foil-sheen, .rsvp-success,
  #privacy-dialog[open] {
    animation: none !important;
  }
  .corners { opacity: 1 !important; }
}