/* Reset, design tokens, and the scene/frame geometry every section is built on. */

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

:root {
  /* Sampled out of the PSDs by tools/extract_gf.py — do not eyeball-tweak. */
  --c-brown-deep: #632e0a;   /* rgb(99,46,10)   — Cormorant copy, ornament */
  --c-brown-mid:  #884f28;   /* rgb(136,79,40)  — kicker + quote */
  --c-sand:       #bd9e88;   /* rgb(189,158,136)— slide 3 Color Fill 2 */
  --c-cream:      #fffedb;
  --c-gold:       #d4af37;
  --c-gold-lt:    #f9e28c;

  /* The gold the PSD clips over the couple's names: a horizontal gradient,
     sampled across the 'Vector Smart Object' above 'Geetansh & Fiza'. */
  --grad-gold: linear-gradient(to right,
      #c18c00 0%, #ebcc4d 5%, #f2d96a 10%, #fbed9f 20%, #fdf0aa 25%,
      #f9e994 40%, #edd464 50%, #ddb838 60%, #eacd5b 70%, #f6ea9e 85%,
      #fffedb 100%);

  --dur-slow: 1.5s;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* overscroll-behavior stops the rubber-band at the document edges. Without it
   a scratch stroke near the end of the page drags the whole document (the
   scratch slide is the last section until the calendar mounts), which is what
   the client saw as "the whole view shakes". */
html {
  -webkit-text-size-adjust: 100%;
  overscroll-behavior: none;
}

body {
  background: #2a1a10;
  color: var(--c-cream);
  font-family: var(--font-serif);
  overflow-x: clip;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent;
}

/* Scroll stays locked until the hero reveal finishes (reference behaviour). */
body.is-locked { overflow: hidden; height: 100dvh; }

img { display: block; max-width: 100%; }

/* The UA's own `[hidden] { display: none }` is a plain type-less rule, so any
   author `display` (e.g. `.scene { display: flex }`) beats it and the element
   stays in layout. Scene 4 is `hidden` until the scratch reveal, so this has
   to actually hold. */
[hidden] { display: none !important; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ---------------------------------------------------------------- geometry
 * A scene fills the viewport. Inside it a 9:16 `.stage` is centred (on a phone
 * it simply fills the screen); inside that a `.frame` is a literal 1080x1920
 * box scaled by --s so that every child can be positioned in raw PSD pixels.
 * js/main.js sets --s = max(stageW/1080, stageH/1920) — i.e. cover.
 * Behind the stage the scene paints its own extended artwork.
 */
.scene {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  isolation: isolate;
}

.scene__backdrop {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
}

.stage {
  /* The gate's stage/frame are <span>s (a <button> may only contain phrasing
     content), so they have to be told to be blocks or they size to nothing. */
  display: block;
  position: relative;
  z-index: 1;
  height: 100dvh;
  width: min(100vw, calc(100dvh * 9 / 16));
  overflow: hidden;
}

.frame {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1080px;
  height: 1920px;
  transform: translate(-50%, -50%) scale(var(--s, 0.36));
  transform-origin: 50% 50%;
}

.frame__art {
  position: absolute;
  inset: 0;
  width: 1080px;
  height: 1920px;
  object-fit: cover;
}

/* ------------------------------------------------------------------- text
 * `.t` is one PSD text line. `--y` is the PSD BASELINE and `--fs` the PSD
 * font size; line-height:0 plus the family's --bl factor lands the baseline
 * exactly where Photoshop put it. `--x` is the PSD centre of the run.
 */
.t {
  position: absolute;
  left: 0;
  width: 1080px;
  text-align: center;
  line-height: 0;
  white-space: nowrap;
  font-size: calc(var(--fs) * 1px);
  top: calc((var(--y) - var(--fs) * var(--blf)) * 1px);
  transform: translateX(calc((var(--x, 540) - 540) * 1px));
}

.t--serif { font-family: var(--font-serif); font-weight: 600; --blf: var(--bl-serif); }
.t--sans  { font-family: var(--font-sans);  font-weight: 500; --blf: var(--bl-sans); }
.t--script{ font-family: var(--font-script); font-weight: 400; --blf: var(--bl-script); }
.t--amp   { font-family: var(--font-amp);    font-weight: 400; --blf: var(--bl-amp); }

/* Cormorant's default figures are old-style; `case` swaps in the tall lining
   figures the client artwork shows. Required, not cosmetic. */
.t--serif { font-feature-settings: 'case' 1; }