/* ══════════════════════════════════════════════════════════
   Paul & Lara — 16 May 2027
   One screen. Looping video. Text revealed in sequence.
   ══════════════════════════════════════════════════════════ */

:root{
  --ink:       #2b2113;
  --ink-soft:  #463722;
  --ink-faint: #5e4d34;
  --gold:      #8a6324;
  --gold-line: rgba(138,99,36,.6);

  --halo: 0 0 4px rgba(255,253,247,.9), 0 1px 12px rgba(255,252,244,.9), 0 0 30px rgba(255,251,240,.7);

  --ease: cubic-bezier(.22,.61,.36,1);
  --ease-soft: cubic-bezier(.33,1,.68,1);

  --f-display: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --f-sans: "Jost", "Century Gothic", "Segoe UI", sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:#1b1710;
  color:var(--ink);
  font-family:var(--f-sans);
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  -webkit-text-size-adjust:100%;
  overflow:hidden;                /* one page — nothing scrolls */
}

/* ───────────── Background video ───────────── */
.stage{ position:fixed; inset:0; z-index:0; overflow:hidden; }

.stage__video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:50% 50%;
  transform:scale(1.2) translate3d(0,5.5%,0);
  animation:drift 30s var(--ease-soft) infinite alternate;
}
@keyframes drift{
  from{ transform:scale(1.2)  translate3d(0,5.5%,0); }
  to  { transform:scale(1.26) translate3d(0,7.2%,0); }
}

/* barely-there lift at the top so the serif type keeps its edge */
.stage__scrim{
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(180deg,
    rgba(255,251,241,.46) 0%,
    rgba(255,250,239,.40) 26%,
    rgba(255,249,236,.28) 44%,
    rgba(255,248,234,.20) 56%,
    rgba(255,248,234,.10) 66%,
    transparent 78%),
  radial-gradient(120% 52% at 50% 24%, rgba(255,252,245,.30), transparent 70%);
}

/* ───────────── The invitation ───────────── */
.invite{
  position:relative; z-index:10;
  height:100svh;
  display:flex; flex-direction:column; align-items:center;
  padding:
    max(4.4svh, env(safe-area-inset-top))
    clamp(1rem,5vw,2rem)
    1rem;
  text-align:center;
  text-shadow:var(--halo);
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;

  /* everything below is sized in em, so the whole block
     scales to whichever is tighter — width or height      */
  font-size:clamp(9.5px, min(3.3vw, 1.4vh), 17px);
}

.quote{
  margin:0;
  font-weight:500;
  font-family:var(--f-display);
  font-size:1.18em;
  line-height:1.62;
  color:var(--ink-soft);
}
.quote em{ font-style:italic; }

.quote__ref{
  margin:.7em 0 0;
  font-weight:400;
  font-size:.62em;
  letter-spacing:.3em; text-indent:.3em;
  text-transform:uppercase;
  color:var(--ink-faint);
}

.rule{
  display:block;
  width:11em; max-width:46vw; height:1px;
  margin:1.55em 0;
  background:linear-gradient(90deg,transparent,var(--gold-line) 18%,var(--gold-line) 82%,transparent);
  transform-origin:center;
}
.rule--slim{ width:7em; margin:1.05em 0; }

.parents{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.9rem,6vw,3rem);
  font-family:var(--f-display);
}
.parents__side{ display:flex; flex-direction:column; }
.parents__names{
  font-weight:500;
  font-size:1.14em;
  line-height:1.3;
  color:var(--ink);
}
.parents__family{
  font-weight:500;
  position:relative;
  margin-top:.28em; padding-top:.3em;
  font-size:1.04em;
  line-height:1.3;
  color:var(--ink-soft);
}
.parents__family::before{
  content:""; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:3.2em; height:1px; background:var(--gold-line);
}
.parents__sep{
  flex:none; width:1px; height:3.4em;
  background:linear-gradient(180deg,transparent,var(--gold-line),transparent);
}

.lead{
  margin:1.6em 0 0;
  font-weight:400;
  font-size:.7em;
  letter-spacing:.34em; text-indent:.34em;
  text-transform:uppercase;
  color:var(--ink-soft);
}

.names{
  margin:.28em 0 0;
  font-family:var(--f-display);
  font-weight:500;
  font-size:3.5em;
  line-height:1.1;
  letter-spacing:.045em;
  text-transform:uppercase;
  color:var(--ink);
  display:flex; flex-wrap:nowrap; white-space:nowrap;
  align-items:baseline; justify-content:center;
  gap:0 .22em;
}
.names__amp{
  font-size:.62em;
  font-style:italic;
  text-transform:none;
  letter-spacing:0;
  color:var(--gold);
}

.when{
  font-weight:400;
  display:flex; align-items:center; justify-content:center;
  flex-wrap:nowrap;
  gap:.9em;
  margin-top:.9em;
  font-size:.74em;
  letter-spacing:.26em; text-indent:.26em;
  text-transform:uppercase;
  color:var(--ink-soft);
  white-space:nowrap;
}
.when__date{
  font-weight:500;
  font-family:var(--f-display);
  font-size:1.62em;
  letter-spacing:.1em; text-indent:.1em;
  text-transform:uppercase;
  color:var(--ink);
  direction:ltr; unicode-bidi:isolate;
}
.when__bar{ flex:none; width:1px; height:1.5em; background:var(--gold-line); }

.where{ margin-top:1.25em; }
.where__venue{
  margin:0;
  font-family:var(--f-sans);
  font-weight:500;
  font-size:.94em;
  line-height:1.5;
  letter-spacing:.2em; text-indent:.2em;
  text-transform:uppercase;
  color:var(--ink);
}
.where__city{
  font-weight:500;
  margin:.45em 0 0;
  font-size:.66em;
  letter-spacing:.4em; text-indent:.4em;
  text-transform:uppercase;
  color:var(--gold);
}

.note{
  font-weight:500;
  max-width:25em;
  text-wrap:balance;
  margin:1.4em 0 0;
  font-family:var(--f-display);
  font-style:italic;
  font-size:1.1em;
  line-height:1.65;
  color:var(--ink-soft);
}

.gift{
  font-weight:700;
  max-width:23em;
  text-wrap:balance;
  margin:0;
  font-family:var(--f-display);
  font-size:1.12em;
  line-height:1.62;
  color:var(--ink);
}

.whish{
  -webkit-appearance:none; appearance:none;
  border-bottom-width:1.5px;
  display:block; margin:.45em auto 0;
  padding:0 .1em .15em;
  background:none; border:0; border-bottom:1px solid var(--gold-line);
  font-family:inherit; color:inherit; cursor:pointer;
  text-shadow:inherit;
  transition:border-color .35s var(--ease), transform .3s var(--ease);
}
.whish:hover{ border-color:var(--gold); }
.whish:active{ transform:scale(.98); }
.whish:focus-visible{ outline:2px solid var(--gold); outline-offset:4px; }
.whish__num{
  -webkit-user-select:all; user-select:all;
  font-weight:700;
  font-family:var(--f-display);
  font-size:1.6em;
  letter-spacing:.18em; text-indent:.18em;
  color:var(--gold);
  font-variant-numeric:tabular-nums;
  direction:ltr; unicode-bidi:isolate;
}
.whish__hint{
  display:block;
  height:1.2em; margin-top:.5em;
  font-size:.56em;
  letter-spacing:.3em; text-indent:.3em;
  text-transform:uppercase;
  color:var(--gold);
  opacity:0;
  transition:opacity .4s var(--ease);
  text-shadow:var(--halo);
}
.whish__hint.is-on{ opacity:1; }

/* ───────────── Controls ───────────── */
.controls{
  position:fixed; z-index:30;
  right:max(.9rem, env(safe-area-inset-right));
  bottom:max(.9rem, env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:.55rem;
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .9s var(--ease), transform .9s var(--ease);
}
.controls.is-ready{ opacity:1; transform:none; pointer-events:auto; }

.ctrl{
  -webkit-appearance:none; appearance:none;
  width:40px; height:40px;
  display:grid; place-items:center;
  border-radius:50%;
  border:1px solid rgba(138,99,36,.45);
  background:rgba(255,252,245,.6);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  cursor:pointer;
  text-decoration:none;
  transition:background .3s var(--ease), border-color .3s var(--ease), transform .25s var(--ease);
}
.ctrl:hover{ background:rgba(255,253,248,.95); border-color:var(--gold); }
.ctrl:active{ transform:scale(.94); }
.ctrl:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; }
.ctrl svg{
  width:18px; height:18px; grid-area:1/1;
  fill:none; stroke:var(--gold); stroke-width:1.5;
}

#dlBtn.is-busy{ animation:pulse 1.1s var(--ease-soft) infinite; }
@keyframes pulse{ 50%{ opacity:.45; } }

.sound .sound__on{ display:none; }
.sound[aria-pressed="true"] .sound__on{ display:block; }
.sound[aria-pressed="true"] .sound__off{ display:none; }

/* ═══════════ Sequential reveal ═══════════ */
[data-seq]{
  opacity:0;
  transform:translateY(20px);
  filter:blur(7px);
  transition:
    opacity 1.15s var(--ease) var(--d,0ms),
    transform 1.15s var(--ease) var(--d,0ms),
    filter 1.15s var(--ease) var(--d,0ms);
  will-change:opacity,transform,filter;
}
[data-seq].is-in{ opacity:1; transform:none; filter:none; }

.rule[data-seq]{ transform:scaleX(0); filter:none; }
.rule[data-seq].is-in{ transform:scaleX(1); }

.names [data-word]{
  display:inline-block;
  opacity:0;
  transform:translateY(30px) scale(.97);
  filter:blur(9px);
  transition:
    opacity 1.25s var(--ease) var(--d,0ms),
    transform 1.25s var(--ease) var(--d,0ms),
    filter 1.25s var(--ease) var(--d,0ms);
}
.names [data-word].is-in{ opacity:1; transform:none; filter:none; }

/* ───────────── Fine tuning ───────────── */
@media (max-width:360px){
  .parents{ gap:.75rem; }
  .when{ gap:.6em; }
}

/* roomy screens: a larger scale, and more sky behind the type */
@media (min-width:700px){
  .invite{ font-size:clamp(11px, min(1.9vw, 1.78vh), 21px); }
  .stage__video{ object-position:50% 34%; }
}

/* landscape phones: keep the whole invitation on the screen */
@media (max-height:520px) and (orientation:landscape){
  .invite{ font-size:clamp(8px, 1.55vh, 13px); }
  .quote br{ display:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  [data-seq],.names [data-word]{ opacity:1; transform:none; filter:none; }
  .rule[data-seq]{ transform:scaleX(1); }
  .stage__video{ animation:none; transform:scale(1.02); }
}