/* ============================================================
   Anna & David — Save the Date
   Candle-lit villa interior: dusky rose-clay walls, deep
   mahogany wood, warm amber glow, lit limestone. Moody, warm,
   intimate — Ornella Vanoni, "L'Appuntamento".
   ============================================================ */

:root {
  /* Lit limestone / warm cream */
  --paper:        #ECDFC6;
  --paper-deep:   #DCC8A6;
  --cream-light:  #F4EAD6;

  /* Dusky rose-clay walls */
  --rose:         #BD7864;
  --rose-deep:    #9B5645;

  /* Terracotta — surrounds the film */
  --terracotta:   #A85C3C;

  /* Mahogany wood & shadow */
  --mahogany:      #6A3927;
  --mahogany-deep: #43221A;

  /* Candle-amber / gold glow */
  --amber:        #D7A058;
  --amber-soft:   #E8C58C;
  --gold-deep:    #A9762F;

  /* Oxblood wine — the accent pop */
  --wine:        #7C2E2A;
  --wine-deep:   #591D1C;

  /* Warm ink for text on cream */
  --ink:        #3D2519;
  --ink-soft:   #6E5040;

  --serif-display: "Cormorant Garamond", Georgia, serif;
  --serif-body:    "EB Garamond", Georgia, serif;
  --script:        "Allura", "Snell Roundhand", cursive;

  /* One gentle easing curve for the whole experience */
  --ease: cubic-bezier(0.33, 0, 0.2, 1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--mahogany-deep);
  color: var(--ink);
  font-family: var(--serif-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body { overflow: hidden; }

/* Whole page breathes in gently on load */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
body { animation: fadeIn 1.6s ease both; }

.amp {
  font-family: var(--script);
  font-weight: 400;
}

/* ---------- Shared decorative rule (a warm candle-lit stroke) ---------- */
.rule {
  width: 150px;
  height: 1px;
  margin: 1.6rem auto;
  background: linear-gradient(90deg, transparent, var(--amber), transparent);
  position: relative;
}
.rule::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 8px; height: 8px;
  transform: translate(-50%, -50%) rotate(45deg);
  background: var(--wine);
}
.rule--dark { background: linear-gradient(90deg, transparent, var(--rose-deep), transparent); }
.rule--dark::after { background: var(--wine); }

.eyebrow {
  font-family: var(--serif-body);
  font-style: italic;
  letter-spacing: 0.4em;
  text-transform: uppercase;
  font-size: 0.76rem;
  margin: 0;
  color: var(--amber-soft);
  padding-left: 0.4em;
}
.eyebrow--dark { color: var(--rose-deep); }

/* ============================================================
   Background film
   ============================================================ */
.video-stage {
  position: fixed;
  inset: 0;
  background: var(--terracotta);
  overflow: hidden;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 2s var(--ease);
}
/* Full-screen blurred backdrop behind the film. Heavily blurred (the source
   is low-res) and scaled up so the blur's soft edges never reveal gaps. */
.video-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(67, 34, 26, 0.12), rgba(67, 34, 26, 0.24)),
    url("background.png?v=1") center / cover no-repeat;
  filter: blur(22px) saturate(1.08);
  transform: scale(1.12);
  z-index: 0;
}
/* Subtle fade of the film as the form drifts in front of it */
.video-stage.is-dimmed { opacity: 0.45; }

/* The film at its native size, centred above the blurred backdrop.
   It only scales down if the viewport is smaller than the video. */
.video-frame {
  position: relative;
  z-index: 1;
  max-width: 100vw;
  max-height: 100vh;
  width: auto;
  height: auto;
  border: 0;
  pointer-events: none;
}

.video-scrim { display: none; }

/* Subtle, transparent "Skip Video" control — fades in during playback */
.skip-btn {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 15;
  padding: 0.5rem 1.15rem;
  font-family: var(--serif-body);
  font-size: 0.68rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--cream-light);
  background: rgba(255, 248, 235, 0.1);
  border: 1px solid rgba(244, 234, 214, 0.5);
  border-radius: 2px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  transition: opacity .9s var(--ease), background .5s var(--ease),
              border-color .5s var(--ease), letter-spacing .5s var(--ease);
}
.skip-btn.is-visible {
  opacity: 0.72;
  pointer-events: auto;
}
.skip-btn.is-visible:hover,
.skip-btn.is-visible:focus-visible {
  opacity: 1;
  background: rgba(255, 248, 235, 0.14);
  border-color: rgba(244, 234, 214, 0.65);
  letter-spacing: 0.26em;
  outline: none;
}

/* ============================================================
   Intro / password gate — a candle-lit rose & mahogany room
   ============================================================ */
.intro {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  /* Warm rose-clay wall glowing with candlelight, deepening to
     mahogany shadow at the floor */
  background:
    radial-gradient(60% 48% at 50% 20%, rgba(215,160,88,0.38), transparent 62%),
    radial-gradient(120% 95% at 50% 124%, rgba(67,34,26,0.94), transparent 72%),
    linear-gradient(180deg, var(--rose) 0%, var(--rose-deep) 46%, var(--mahogany) 100%);
  transition: opacity 1.8s var(--ease), visibility 1.8s var(--ease);
}
.intro.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro-inner {
  max-width: 660px;
  color: var(--cream-light);
  animation: rise 1.8s var(--ease) both;
}

.names {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3.4rem, 15vw, 8.5rem);
  line-height: 1.05;
  margin: 0.3rem 0 0;
  padding: 0 0.12em 0.12em;   /* room for descenders/loops */
  letter-spacing: 0.01em;
  color: var(--cream-light);
  white-space: nowrap; /* keep "Anna & David" on a single line */
  /* Allura's trailing flourish sits right of the advance box; nudge the
     whole line left so "Anna & David" is optically centred. */
  transform: translateX(-0.26em);
}
.names .amp {
  font-size: 1em;
  color: var(--amber);
  margin: 0 0.04em;
}

.venue {
  font-family: var(--serif-display);
  font-weight: 500;
  font-size: clamp(1.25rem, 3.4vw, 1.85rem);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin: 0 0 0.35rem;
  color: var(--cream-light);
}
.when {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: clamp(1.05rem, 2.6vw, 1.4rem);
  letter-spacing: 0.1em;
  margin: 0;
  color: var(--amber-soft);
}

.begin-btn {
  display: inline-block;
  margin-top: 2.4rem;
  padding: 0.9rem 3.4rem;
  font-family: var(--serif-body);
  font-size: 1rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cream-light);
  background: transparent;
  border: 1px solid var(--amber);
  border-radius: 2px;
  cursor: pointer;
  transition: background .6s var(--ease), color .6s var(--ease), letter-spacing .6s var(--ease);
  padding-left: calc(3.4rem + 0.3em);
}
.begin-btn:hover,
.begin-btn:focus-visible {
  background: var(--amber);
  color: var(--mahogany-deep);
  letter-spacing: 0.38em;
  outline: none;
}

/* ---------- Password gate ---------- */
.gate-prompt {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: clamp(1rem, 2.6vw, 1.18rem);
  letter-spacing: 0.03em;
  color: var(--amber-soft);
  margin: 1.6rem 0 1.6rem;
}

.gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 0 auto;
  max-width: 340px;
}

.gate-input {
  width: 100%;
  padding: 0.85rem 1rem;
  font-family: var(--serif-display);
  font-size: 1.2rem;
  text-align: center;
  letter-spacing: 0.16em;
  color: var(--cream-light);
  background: rgba(255, 248, 235, 0.08);
  border: 1px solid rgba(215, 160, 88, 0.55);
  border-radius: 2px;
  transition: border-color .5s var(--ease), background .5s var(--ease);
}
.gate-input::placeholder {
  color: rgba(232, 197, 140, 0.6);
  letter-spacing: 0.16em;
  font-style: italic;
}
.gate-input:focus {
  outline: none;
  border-color: var(--amber);
  background: rgba(255, 248, 235, 0.14);
}

.gate-error {
  min-height: 1.2em;
  margin: 0.1rem 0 0;
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 0.95rem;
  color: var(--amber-soft);
}

.gate .begin-btn {
  margin-top: 1.4rem;
}

/* ============================================================
   No-JavaScript message
   ============================================================ */
.nojs {
  display: none; /* shown via <noscript> override when JS is off */
  position: fixed;
  inset: 0;
  z-index: 40;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  background:
    radial-gradient(60% 48% at 50% 20%, rgba(215,160,88,0.38), transparent 62%),
    radial-gradient(120% 95% at 50% 124%, rgba(67,34,26,0.94), transparent 72%),
    linear-gradient(180deg, var(--rose) 0%, var(--rose-deep) 46%, var(--mahogany) 100%);
}
.nojs-inner {
  max-width: 560px;
  color: var(--cream-light);
}
.nojs-text {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: clamp(1.05rem, 2.6vw, 1.3rem);
  letter-spacing: 0.03em;
  color: var(--amber-soft);
  margin: 1.6rem 0 0;
}

/* ============================================================
   Form overlay — a lit limestone invitation
   ============================================================ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  background: rgba(67, 34, 26, 0.58);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.8s var(--ease), visibility 1.8s var(--ease);
  overflow-y: auto;
}
.overlay.is-visible {
  opacity: 1;
  visibility: visible;
}

.card {
  width: 100%;
  max-width: 540px;
  margin: auto;
  background:
    radial-gradient(72% 52% at 50% 0%, rgba(255,250,238,0.7), transparent 60%),
    linear-gradient(180deg, var(--cream-light) 0%, var(--paper-deep) 100%);
  border: 1px solid rgba(106, 57, 39, 0.42);
  box-shadow: 0 28px 70px rgba(40, 18, 12, 0.5);
  padding: clamp(1.8rem, 4vw, 3rem);
  position: relative;
  transform: translateY(28px);
  transition: transform 1.8s var(--ease);
}
/* warm mahogany keyline, like a painted border */
.card::before {
  content: "";
  position: absolute;
  inset: 9px;
  border: 1px solid rgba(106, 57, 39, 0.3);
  pointer-events: none;
}
.overlay.is-visible .card { transform: translateY(0); }

.card-head { text-align: center; margin-bottom: 1.6rem; }

.card-names {
  font-family: var(--script);
  font-weight: 400;
  font-size: clamp(3.2rem, 11vw, 4.8rem);
  line-height: 1.05;
  margin: 0.2rem 0 0;
  padding-bottom: 0.08em;
  color: var(--mahogany);
  transform: translateX(-0.26em); /* optically centre Allura's flourish */
}
.card-names .amp { color: var(--wine); margin: 0 0.04em; }

.card-venue {
  font-family: var(--serif-display);
  font-weight: 600;
  font-size: clamp(1.05rem, 3.4vw, 1.35rem);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0.2rem 0 0.3rem;
  color: var(--mahogany-deep);
}
.card-location {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  margin: 0 0 0.4rem;
  color: var(--rose-deep);
}

.card-when {
  font-family: var(--serif-body);
  font-style: italic;
  font-size: 1.1rem;
  letter-spacing: 0.1em;
  margin: 0;
  color: var(--wine);
}

/* ---------- Form ---------- */
.form-intro {
  text-align: center;
  font-style: italic;
  color: var(--ink-soft);
  font-size: 1.02rem;
  margin: 0 0 1.5rem;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.field { display: block; margin-bottom: 1rem; }
.field span {
  display: block;
  font-family: var(--serif-body);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 0.4rem;
}
.field input {
  width: 100%;
  padding: 0.7rem 0.2rem;
  font-family: var(--serif-display);
  font-size: 1.15rem;
  color: var(--ink);
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(106, 57, 39, 0.38);
  border-radius: 0;
  transition: border-color .5s var(--ease);
}
.field input:focus {
  outline: none;
  border-bottom-color: var(--wine);
}
.field input:-webkit-autofill {
  -webkit-text-fill-color: var(--ink);
  transition: background-color 9999s;
}

.form-error {
  min-height: 1.2em;
  margin: 0.2rem 0 0.6rem;
  text-align: center;
  color: var(--wine);
  font-style: italic;
  font-size: 0.95rem;
}

.submit-btn {
  display: block;
  width: 100%;
  margin-top: 0.8rem;
  padding: 1rem;
  font-family: var(--serif-body);
  font-size: 1rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--cream-light);
  background: var(--mahogany);
  border: none;
  border-radius: 2px;
  cursor: pointer;
  transition: background .6s var(--ease), letter-spacing .6s var(--ease);
  padding-left: calc(1rem + 0.26em);
}
.submit-btn:hover:not(:disabled) {
  background: var(--wine);
  letter-spacing: 0.32em;
}
.submit-btn:disabled { opacity: 0.6; cursor: progress; }

/* ---------- Success ---------- */
.thanks {
  text-align: center;
  padding: 1.5rem 0.5rem;
  animation: rise 1.2s var(--ease) both;
}
.thanks-mark { color: var(--gold-deep); margin-bottom: 1.2rem; }
.thanks-text {
  font-family: var(--serif-display);
  font-weight: 400;
  font-size: clamp(1.4rem, 4.5vw, 1.85rem);
  line-height: 1.5;
  color: var(--mahogany-deep);
  margin: 0 0 1.6rem;
}
.thanks-sign {
  font-family: var(--script);
  font-size: clamp(2.6rem, 8vw, 3.6rem);
  color: var(--wine);
  margin: 0;
  transform: translateX(-0.26em); /* optically centre Allura's flourish */
}
.thanks-sign .amp { font-size: 1em; }

/* ============================================================
   Motion
   ============================================================ */
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}

@media (max-width: 420px) {
  .grid { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: .01ms !important; }
}