/* ─────────────────────────────────────────────────────────────────────────
   Martijn & Ida · Save the Date
   Warm earthy palette · script + serif · medium parallax
   ───────────────────────────────────────────────────────────────────────── */

/* Fonts ------------------------------------------------------------------ */
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Cormorant+SC:wght@400;500&display=swap');

/* Tokens (palette can be tweaked from JS) -------------------------------- */
:root {
  --bg:           #efe6da;      /* warm cream */
  --bg-deep:      #e3d6c4;      /* deeper warm sand */
  --bg-vignette:  #d2bda1;      /* edge vignette tone */
  --paper:        #f7efe2;      /* card paper */
  --kraft:        #c9a98a;      /* envelope kraft */
  --kraft-deep:   #ad8a68;      /* envelope shadow */
  --kraft-edge:   #946d4b;      /* envelope edge / flap inside */
  --ink:          #4a3320;      /* dark warm brown — primary text */
  --ink-soft:     #7a5c44;      /* secondary text */
  --ink-faint:    rgba(74,51,32,.45);
  --terracotta:   #b85c3a;      /* wax seal */
  --terracotta-d: #8a3f24;      /* wax seal shadow */
  --botanical:    #6e553d;      /* botanical line color */
  --botanical-2:  #8e7152;      /* lighter botanical */

  --shadow-card:  0 30px 60px -25px rgba(74,51,32,.45),
                  0 10px 20px -10px rgba(74,51,32,.25);

  --grain-opacity: .14;
}

/* Reset / base ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  min-height: 100vh;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  color: var(--ink);
  background: var(--bg);
  overflow-x: hidden;
  position: relative;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

/* Background — warm gradient + vignette + grain -------------------------- */
.bg-stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(ellipse 90% 70% at 50% 35%, var(--bg) 0%, var(--bg-deep) 55%, var(--bg-vignette) 100%);
  pointer-events: none;
}
.bg-stage::after {
  /* paper grain */
  content: "";
  position: absolute;
  inset: -10%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.29 0 0 0 0 0.2 0 0 0 0 0.13 0 0 0 0.4 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
  opacity: var(--grain-opacity);
  mix-blend-mode: multiply;
}

/* Botanical layers (parallax) ------------------------------------------- */
.botanicals {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.botanicals .layer {
  position: absolute;
  inset: -8%;
  will-change: transform;
  transition: transform .8s cubic-bezier(.2,.7,.2,1);
}
.botanicals svg { width: 100%; height: 100%; display: block; }
.botanicals .b { color: var(--botanical); }
.botanicals .b-soft { color: var(--botanical-2); }

/* Top bar ---------------------------------------------------------------- */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px clamp(18px, 4vw, 40px);
  pointer-events: none;
}
.topbar > * { pointer-events: auto; }

.brand {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-family: 'Cormorant SC', 'Cormorant Garamond', serif;
  font-weight: 500;
  letter-spacing: .26em;
  font-size: 11px;
  color: var(--ink-soft);
  text-transform: uppercase;
  flex-shrink: 0;
}
.brand .dot {
  display: inline-block;
  width: 4px; height: 4px;
  background: var(--terracotta);
  border-radius: 50%;
  margin: 0 .8em;
  vertical-align: middle;
  transform: translateY(-1px);
}

.lang {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,.35);
  backdrop-filter: blur(8px);
  border: .5px solid rgba(74,51,32,.18);
  border-radius: 999px;
  padding: 3px;
}
.lang button {
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 999px;
  /* min 24x24 touch target (WCAG 2.2 AA 2.5.8) */
  min-height: 28px;
  min-width: 36px;
  padding: 7px 14px;
  font-family: 'Cormorant SC', serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--ink-soft);
  cursor: pointer;
  text-transform: uppercase;
  transition: background .25s, color .25s;
}
.lang button:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 2px;
}
.lang button.active {
  background: var(--ink);
  color: var(--paper);
}

/* Stage ------------------------------------------------------------------ */
.stage { display: contents; }  /* deprecated, kept as safety net */

/* Hero scroll region — gives us scroll travel for the envelope to open */
.hero-scroll {
  position: relative;
  z-index: 5;
  height: 240vh;  /* 100vh visible + 140vh scroll travel */
}
.hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(28px, 5vh, 56px);
  padding: clamp(80px, 14vh, 140px) 20px clamp(40px, 6vh, 80px);
}

/* Post-hero — countdown + date stamp, revealed once envelope is open */
.post-hero {
  position: relative;
  z-index: 5;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(36px, 6vh, 64px);
  padding: clamp(60px, 10vh, 120px) 20px clamp(60px, 10vh, 100px);
}

/* Inline scroll cue under the envelope — clickable button */
.scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  /* button reset */
  appearance: none;
  background: transparent;
  border: 0;
  padding: 10px 18px;
  border-radius: 999px;
  cursor: pointer;
  font-family: 'Cormorant SC', serif;
  font-size: 11px;
  letter-spacing: .42em;
  /* WCAG AA contrast: --ink-faint (~2.3:1 on cream) failed; --ink-soft is 5:1 */
  color: var(--ink-soft);
  text-transform: uppercase;
  opacity: calc(1 - var(--open, 0) * 2);  /* fades out fast as envelope opens */
  transition: opacity .25s linear, color .25s, transform .25s;
}
.scroll-cue[hidden] { display: none; }
.scroll-cue:hover,
.scroll-cue:focus-visible { color: var(--ink); }
.scroll-cue:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 4px;
}
.scroll-cue__arrow {
  width: 14px;
  height: 18px;
  display: block;
  animation: arrowBob 2.2s ease-in-out infinite;
}
@keyframes arrowBob {
  0%, 100% { transform: translateY(0); opacity: .55; }
  50%      { transform: translateY(4px); opacity: 1; }
}

/* Eyebrow ---------------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
  font-family: 'Cormorant SC', serif;
  font-size: 11px;
  letter-spacing: .42em;
  color: var(--ink-soft);
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0;
  animation: fadeUp 1.2s .15s forwards;
}
.eyebrow > span { flex-shrink: 0; }
.eyebrow::before, .eyebrow::after {
  content: "";
  width: 30px;
  height: 1px;
  background: var(--ink-soft);
  opacity: .55;
}

/* Envelope --------------------------------------------------------------- */
.envelope-wrap {
  position: relative;
  width: min(520px, 88vw);
  aspect-ratio: 7 / 5;
  /* perspective removed — handled per-element via perspective() fn */
  opacity: 0;
  animation: fadeUp 1.4s .35s forwards;
}

.envelope {
  position: absolute;
  inset: 0;
  /* no preserve-3d — each 3D element uses perspective() in its own transform */
  /* purely visual / scroll-driven; not actionable, so no cursor:pointer or focus styles */
}

/* Back of envelope (the rectangle behind everything) */
.envelope__back {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, var(--kraft) 0%, var(--kraft-deep) 100%);
  border-radius: 4px;
  box-shadow:
    var(--shadow-card),
    inset 0 0 60px rgba(74,51,32,.18),
    inset 0 0 0 .5px rgba(74,51,32,.25);
  overflow: hidden;
}
.envelope__back::after {
  /* paper texture */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.28 0 0 0 0 0.18 0 0 0 0.35 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: .35;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* The card that lives inside */
.envelope__card {
  position: absolute;
  left: 5%;
  right: 5%;
  top: 8%;
  bottom: 8%;
  background:
    linear-gradient(180deg, var(--paper) 0%, #f0e6d6 100%);
  border-radius: 2px;
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 12px 30px -10px rgba(74,51,32,.35);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 6% 8%;
  /* scroll-driven: lifts up as --open goes 0→1 */
  /* no translateZ — z-index stacking handles depth correctly without preserve-3d */
  transform: translateY(calc(var(--open, 0) * -58%));
  z-index: 2;
}
.envelope__card::before {
  /* card edge inner shadow */
  content: "";
  position: absolute;
  inset: 5%;
  border: .5px solid rgba(74,51,32,.18);
  pointer-events: none;
}
.envelope__card .card__eyebrow {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(9px, 1.4vw, 11px);
  letter-spacing: .38em;
  color: var(--ink-soft);
  margin: 0 0 8px;
  text-transform: uppercase;
}
.envelope__card .card__names {
  font-family: 'Pinyon Script', cursive;
  font-weight: 400;
  font-size: clamp(38px, 7.5vw, 64px);
  line-height: .95;
  margin: 0;
  color: var(--ink);
  letter-spacing: -.01em;
}
.envelope__card .card__names .amp {
  display: inline-block;
  margin: 0 .12em;
  color: var(--terracotta);
}
.envelope__card .card__divider {
  width: 40%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ink-faint), transparent);
  margin: 14px 0 12px;
}
.envelope__card .card__date {
  font-family: 'Cormorant SC', serif;
  font-size: clamp(11px, 1.6vw, 13px);
  letter-spacing: .32em;
  color: var(--ink);
  margin: 0;
  text-transform: uppercase;
}
.envelope__card .card__venue {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(12px, 1.7vw, 14px);
  color: var(--ink-soft);
  margin: 6px 0 0;
}

/* Front pocket — the V-cut bottom layer that holds the card */
.envelope__pocket {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(160deg, var(--kraft) 0%, var(--kraft-deep) 100%);
  clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%);
  z-index: 3;
  box-shadow: inset 0 -20px 40px rgba(74,51,32,.25);
}
.envelope__pocket::before {
  /* diagonal crease lines from V */
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, transparent 49.7%, rgba(74,51,32,.18) 50%, transparent 50.3%) top left / 50% 100% no-repeat,
    linear-gradient(225deg, transparent 49.7%, rgba(74,51,32,.18) 50%, transparent 50.3%) top right / 50% 100% no-repeat;
  pointer-events: none;
}
.envelope__pocket::after {
  /* paper grain */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.28 0 0 0 0 0.18 0 0 0 0.35 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: .3;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Flap — the triangle that covers the top */
.envelope__flap {
  position: absolute;
  inset: 0;
  clip-path: polygon(0 0, 100% 0, 50% 50%);
  transform-origin: top center;
  /* perspective() in transform avoids preserve-3d stacking issues;
     backface-visibility:hidden makes flap vanish once rotated past 90° */
  transform: perspective(1800px) rotateX(calc(var(--open, 0) * -180deg));
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  z-index: 4;
  background:
    linear-gradient(180deg, var(--kraft-deep) 0%, var(--kraft) 75%, var(--kraft-edge) 100%);
  box-shadow:
    0 4px 14px rgba(74,51,32,.25),
    inset 0 -8px 16px rgba(74,51,32,.2);
}
.envelope__flap::after {
  /* grain on flap */
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.28 0 0 0 0 0.18 0 0 0 0.35 0'/></filter><rect width='180' height='180' filter='url(%23n)'/></svg>");
  background-size: 180px 180px;
  opacity: .35;
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Wax seal — 2D element on top of the flap; fades out as flap lifts */
.seal {
  position: absolute;
  left: 50%;
  top: 50%;   /* sits on the flap tip where the wax would seal the closure */
  width: 22%;
  aspect-ratio: 1 / 1;
  transform: translate(-50%, -50%);
  /* fades out over the first half of the open animation */
  opacity: max(0, calc(1 - var(--open, 0) * 2.5));
  z-index: 5;
  pointer-events: none;
}
.seal__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, #d57353 0%, var(--terracotta) 35%, var(--terracotta-d) 78%, #642a16 100%);
  box-shadow:
    0 6px 12px rgba(138,63,36,.55),
    inset 0 -4px 8px rgba(0,0,0,.3),
    inset 0 2px 4px rgba(255,255,255,.18);
  clip-path: polygon(
    50% 0%,  58% 6%,  68% 4%,  74% 12%, 84% 14%, 86% 24%, 94% 32%, 92% 42%,
    100% 50%, 92% 58%, 96% 68%, 86% 76%, 84% 86%, 74% 88%, 68% 96%, 58% 94%,
    50% 100%, 42% 94%, 32% 96%, 26% 88%, 16% 86%, 14% 76%,  6% 68%,  8% 58%,
     0% 50%,  8% 42%,  4% 32%, 14% 24%, 16% 14%, 26% 12%, 32%  4%, 42%  6%
  );
}
.seal__mono {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Pinyon Script', cursive;
  font-size: clamp(20px, 3.5vw, 30px);
  color: rgba(255,235,220,.92);
  text-shadow: 0 1px 0 rgba(0,0,0,.3);
  letter-spacing: -.02em;
  padding-bottom: 4%;
}

/* Tap hint (legacy — unused; scroll cue replaces it) */
.tap-hint { display: none; }

/* Opened state — deeper drop shadow once the card has cleared the pocket */
.envelope.fully-open .envelope__card {
  box-shadow:
    0 1px 0 rgba(255,255,255,.6) inset,
    0 26px 50px -15px rgba(74,51,32,.55),
    0 10px 22px -10px rgba(74,51,32,.35);
  transition: box-shadow .4s linear;
}

/* Inside-card details (revealed when open) — driven by --open */
.inside-note {
  position: absolute;
  left: 0; right: 0;
  bottom: -2px;
  text-align: center;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(12px, 1.6vw, 14px);
  color: var(--ink-soft);
  padding: 0 12%;
  /* opacity ramps 0→1 over progress 0.65 → 1 */
  opacity: calc((var(--open, 0) - 0.65) * 2.85);
  transform: translateY(calc(var(--open, 0) * 36px));
  pointer-events: none;
}

/* Countdown ------------------------------------------------------------- */
.countdown {
  display: flex;
  align-items: flex-start;
  gap: clamp(14px, 3vw, 36px);
  opacity: 0;
  animation: fadeUp 1.4s .8s forwards;
}
.countdown__unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 56px;
}
.countdown__num {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 300;
  font-size: clamp(40px, 6.5vw, 64px);
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.countdown__lbl {
  font-family: 'Cormorant SC', serif;
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--ink-soft);
  text-transform: uppercase;
  margin-top: 8px;
}
.countdown__sep {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 200;
  font-size: clamp(36px, 5.5vw, 56px);
  color: var(--ink-faint);
  line-height: 1;
  margin-top: 6px;
}

/* Footer date line ------------------------------------------------------ */
.datestamp {
  text-align: center;
  font-family: 'Cormorant SC', serif;
  font-size: 11px;
  letter-spacing: .42em;
  color: var(--ink-soft);
  text-transform: uppercase;
  opacity: 0;
  animation: fadeUp 1.4s 1.05s forwards;
}
.datestamp .sep {
  display: inline-block;
  margin: 0 .9em;
  color: var(--terracotta);
}
.datestamp .venue {
  display: block;
  margin-top: 8px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  text-transform: none;
}

/* Scroll affordance (legacy fixed-bottom — hidden, inline .scroll-cue replaces) */
.scroll-hint { display: none; }

/* Below-the-fold section (parallax continues) --------------------------- */
.section-2 {
  position: relative;
  z-index: 5;
  min-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  padding: 80px 24px;
  text-align: center;
}
.section-2 h2 {
  font-family: 'Pinyon Script', cursive;
  font-weight: 400;
  font-size: clamp(46px, 7vw, 74px);
  margin: 0;
  color: var(--ink);
  line-height: 1;
}
.section-2 .sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(15px, 2vw, 20px);
  color: var(--ink-soft);
  max-width: 38ch;
  line-height: 1.55;
  margin: 0;
}
.section-2 .domains {
  margin-top: 30px;
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  font-family: 'Cormorant SC', serif;
  font-size: 11.5px;
  letter-spacing: .32em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.section-2 .domains a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.section-2 .domains a:hover,
.section-2 .domains a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--terracotta);
}
.section-2 .domains a:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 4px;
  border-radius: 2px;
}
.section-2 .domains span:nth-child(2) {
  color: var(--terracotta);
}

/* Animations ------------------------------------------------------------ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulse {
  0%   { transform: scale(1); opacity: 1; }
  70%  { transform: scale(2.4); opacity: 0; }
  100% { transform: scale(2.4); opacity: 0; }
}
@keyframes drop {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; }
}

/* Reduced motion -------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .15s !important; }
  .botanicals .layer { transition: none; }
}

/* Mobile tweaks --------------------------------------------------------- */
@media (max-width: 520px) {
  .topbar { padding: 16px 14px; }
  .brand { font-size: 10px; letter-spacing: .22em; }
  /* keep ≥24px tap height on mobile */
  .lang button { padding: 6px 12px; font-size: 10px; min-height: 28px; }
  .countdown { gap: 8px; }
  .countdown__sep { display: none; }
  .countdown__num { font-size: 38px; }
  .countdown__unit { min-width: 0; flex: 1; }
  .countdown__lbl { font-size: 9px; letter-spacing: .2em; }
  .envelope__card .card__names { font-size: 44px; }
  .tap-hint { font-size: 9.5px; letter-spacing: .26em; }
  .datestamp { font-size: 10px; letter-spacing: .32em; }
}