/* ============================================================
   RESPONSIVE STRATEGY
   - Every size derives from clamp() or vmin, never fixed px.
   - The hands stage is a fixed-aspect box; hands are placed in
     PERCENTAGES of that box, so the composition is identical
     at any resolution.
   - --stage-w flips from width-driven (landscape) to
     height-driven (portrait) so the art never crops.
   ============================================================ */

:root {
  --gold: #d9a066;
  --stage-ratio: 2000 / 1414;   /* real hand PNG dimensions */

  --pad-top:    clamp(28px, 6vh, 70px);
  --pad-bottom: clamp(24px, 5vh, 64px);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html { -webkit-text-size-adjust: 100%; }

body {
  background: #0e0e0e;
  overflow-x: hidden;
  overscroll-behavior-y: none;   /* stops iOS rubber-banding out of the lock */
}

body.locked {
  overflow: hidden;
  height: 100svh;
  position: fixed;               /* hard lock for mobile Safari */
  width: 100%;
}

/* ---------- LOADING SCREEN ----------
   Sits above everything (z 100). JS adds .loader--done to fade it out,
   then removes the node entirely. */

.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 45%, #1d1d1f 0%, #101011 60%, #08080a 100%);
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.loader--done {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-inner {
  text-align: center;
  color: #fff;
  padding: 0 6vw;
}

.loader-ring {
  position: relative;
  width: clamp(84px, 15vmin, 128px);
  height: clamp(84px, 15vmin, 128px);
  margin: 0 auto clamp(20px, 3.5vmin, 34px);
}

.loader-ring svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);   /* start the arc at 12 o'clock */
}

.loader-ring circle {
  fill: none;
  stroke-width: 2.5;
  stroke-linecap: round;
}

.ring-track { stroke: rgba(255, 255, 255, 0.12); }

.ring-fill {
  stroke: var(--gold);
  /* r=44 => circumference = 2*PI*44 = 276.46 */
  stroke-dasharray: 276.46;
  stroke-dashoffset: 276.46;   /* JS drives this down to 0 */
  transition: stroke-dashoffset 0.35s ease;
}

.loader-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(0.68rem, 1.5vmin, 0.85rem);
  font-weight: 300;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.55);
  font-variant-numeric: tabular-nums;
}

.loader-names {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.6rem, 4.6vmin, 2.9rem);
  font-weight: 500;
  letter-spacing: 2px;
  margin-bottom: clamp(8px, 1.4vmin, 14px);
}

.loader-names span {
  color: var(--gold);
  font-style: italic;
  margin: 0 0.35em;
}

.loader-msg {
  font-family: 'Poppins', system-ui, sans-serif;
  font-size: clamp(0.62rem, 1.3vmin, 0.8rem);
  font-weight: 300;
  letter-spacing: clamp(2px, 0.6vmin, 4px);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  min-height: 1.2em;
  transition: opacity 0.4s ease;
}

.loader-msg.is-swapping { opacity: 0; }

/* ---------- HERO ---------- */

.hero {
  position: relative;
  /* svh keeps mobile browser chrome from clipping the composition */
  height: 100svh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;   /* text blocks are gone; centre the hands */
  align-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #4a4a4a 0%, #2b2b2b 45%, #141414 100%);
}

/* LAYER 1 — bbg.png (2814x1583, ratio ~1.777) */
.bg-big {
  position: absolute;
  inset: 0;
  background-image: url('images/bbg.png');
  background-image: image-set(
    url('images/bbg.webp') type('image/webp'),
    url('images/bbg.png') type('image/png')
  );
  background-size: cover;        /* fills any aspect without letterboxing */
  background-position: center center;
  background-repeat: no-repeat;
  opacity: 1;                    /* visible from the start */
  will-change: transform;
  pointer-events: none;
  z-index: 1;
}

.bg-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.06;
  background-image:
    radial-gradient(circle at 20% 20%, transparent 0, transparent 40px, rgba(255,255,255,0.4) 41px, transparent 42px),
    radial-gradient(circle at 80% 60%, transparent 0, transparent 40px, rgba(255,255,255,0.4) 41px, transparent 42px);
  background-size: clamp(180px, 26vmin, 320px) clamp(180px, 26vmin, 320px);
  pointer-events: none;
  z-index: 2;
}

.bg-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom,
    rgba(0,0,0,0.40) 0%,
    rgba(0,0,0,0) 26%,
    rgba(0,0,0,0) 72%,
    rgba(0,0,0,0.62) 100%);
  pointer-events: none;
  z-index: 3;
}

/* ---------- FLOWERS ---------- */

.flowers {
  position: absolute;
  inset: 0;
  z-index: 11;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease;
}

body.decorative-ready .flowers { opacity: 1; }

.flower {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity, filter;
  object-fit: contain;
  /* every flower sized in vmin => identical proportion on all screens */
  width: clamp(90px, 22vmin, 300px);
}

/* --- BOTTOM LEFT (f2 = front, f1 = behind, both anchored to the edge) --- */
.f2 { left: -3%;  bottom: -4%;  width: clamp(140px, 34vmin, 460px); z-index: 2; }
.f1 { left: 14%;  bottom: -6%;  width: clamp(150px, 36vmin, 480px); z-index: 1; }

/* --- TOP LEFT --- */
.f5 { left: -4%;  top: -3%;     width: clamp(130px, 32vmin, 430px); z-index: 2; }

/* --- BOTTOM RIGHT (f6 = front, f3 = behind, both anchored to the edge) --- */
.f6 { right: -3%; bottom: -4%;  width: clamp(130px, 32vmin, 430px); z-index: 2; }
.f3 { right: 13%; bottom: -6%;  width: clamp(150px, 36vmin, 480px); z-index: 1; }

/* --- f4: tall narrow sprig, center-left edge --- */
.f4 {
  left: -1%;
  top: 50%;
  margin-top: -14vmin;   /* half its own height => vertically centered */
  width: clamp(30px, 7vmin, 90px);
  z-index: 1;
}

/* ---------- ALL TEXT (artwork layer) ----------
   Placement derived from full_scene.jpg, where the text block occupies
   x 26.2%-71.8%, y 15.4%-91.7% of a 1.778-ratio frame:
       centre  = 49.0% across, 53.6% down
       height  = 76.4% of the frame height
   Anchored by HEIGHT (its long axis) with width auto, so the 1.062
   aspect of all_text.png is always preserved.

   z-index 6: above bg (1-3) and flowers (5), below hands (10). */

.all-text {
  position: absolute;
  left: 49%;
  top: 53.6%;
  translate: -50% -50%;      /* separate from transform, which JS owns */
  height: 76.4svh;
  width: auto;
  max-width: 92vw;           /* never let it touch the side edges */
  object-fit: contain;
  z-index: 12;
  opacity: 0;                /* hidden on load; JS fades it in after hands arrive */
  will-change: opacity, transform, filter;
  pointer-events: none;
}

/* Prevent half-loaded decorative reveals; JS removes this gate when ready. */
body:not(.decorative-ready) .all-text { opacity: 0 !important; }

/* ---------- HANDS ---------- */

.hands-stage {
  position: relative;
  z-index: 10;
  aspect-ratio: var(--stage-ratio);

  /* SIZE OF THE HANDS.
     The clasped pair spans ~126% of THIS box's width and ~68% of its
     height, and is centred in it. So:
         hands width  as % of viewport = vw-number x 1.26
         hands height as % of viewport = svh-number x 0.68
     Whichever term is SMALLER wins, so the hands can never be cut on
     either axis. Raise both together to enlarge. */
  width: min(102vw, 1500px, calc(150svh * (2000 / 1414)));
  margin: auto;
  flex: none;          /* never let flexbox shrink the stage */
  max-width: none;     /* let the wrists bleed past the edges */
  pointer-events: none;
  will-change: filter;
}

.hand {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  will-change: transform;
  backface-visibility: hidden;
}

/* THE 3-LAYER STACK (bottom -> top):
     z1 .groom-hand     — full groom hand + sleeve
     z2 .bride-hand     — bride hand, crosses over the groom
     z3 .groom-hand-cut — groom's fingertips redrawn on top, so his
                          fingers read as being in front of hers

   groom-hand and groom-hand-cut are the SAME artwork on two layers.
   Their object-position AND transform-origin must match exactly, or
   the cutout slides off the hand it is meant to overlay. */
/* The stage now matches the PNG ratio exactly (2000:1414), so every
   layer fills the box identically and object-position is a no-op.
   All three MUST share the same origin or the layers drift apart. */
.groom-hand,
.bride-hand,
.groom-hand-cut { object-position: center; transform-origin: 50% 50%; }

.groom-hand     { z-index: 1; }
.bride-hand     { z-index: 2; }
.groom-hand-cut { z-index: 3; opacity: 1; }

/* ---------- SCROLL CUE ---------- */

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(8px, 1.6vh, 18px);
  transform: translateX(-50%);
  z-index: 25;
  width: clamp(18px, 3vmin, 26px);
  height: clamp(30px, 5vmin, 42px);
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 999px;
  transition: opacity 0.3s ease;
}

.scroll-cue span {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: var(--gold);
  animation: cue 1.6s ease-in-out infinite;
}

@keyframes cue {
  0%   { transform: translateY(0);   opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateY(160%); opacity: 0; }
}

/* ---------- BREAKPOINT NUDGES ---------- */

/* Tall/narrow phones: hands shrink, text gets room */
@media (max-aspect-ratio: 3/4) {
  .hands-stage { width: min(102vw, calc(150svh * (2000 / 1414))); }
  /* portrait: anchor the text by WIDTH instead, or it renders tiny */
  .all-text { height: auto; width: 88vw; max-width: 88vw; top: 42%; left: 50%; }
  /* phones: pull the corner clusters in tighter and shrink */
  .f2 { left: -8%;  bottom: -2%; width: clamp(120px, 42vmin, 240px); }
  .f1 { left: 8%;   bottom: -4%; width: clamp(125px, 44vmin, 250px); }
  .f5 { left: -10%; top: -1%;    width: clamp(115px, 40vmin, 230px); }
  .f6 { right: -8%; bottom: -2%; width: clamp(115px, 40vmin, 230px); }
  .f3 { right: 7%;  bottom: -4%; width: clamp(125px, 44vmin, 250px); }
  .f4 { left: -2%; top: 50%; margin-top: -16vmin; width: clamp(24px, 8vmin, 52px); }
}

/* Short landscape (phone rotated, small laptops) */
@media (max-height: 560px) and (orientation: landscape) {
  .hands-stage { width: min(102vw, calc(78svh * (2000 / 1414))); }
  .all-text { height: 86svh; }
  :root { --pad-top: 16px; --pad-bottom: 14px; }
  .scroll-cue { display: none; }
}

/* Ultra-wide displays: stop the art from ballooning */
@media (min-aspect-ratio: 21/9) {
  .hands-stage { width: min(62vw, 1500px, calc(92svh * (2000 / 1414))); }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue span { animation: none; }
}