/* ============================================================
   BELLA — V2 MOTION LAYER  (Sprint 11, production)
   The page is hard-set to data-variant="v2" data-register="considered".
   All rules below remain scoped behind [data-variant="v2"] so the
   selector intent is preserved even though only the V2 path runs.
   Pairs with v2-motion.js.
   ============================================================ */

/* ============================================================
   MOTION — register intensity variables
   One reveal/parallax engine; the register only changes the numbers.
   ============================================================ */
[data-variant="v2"] {
  --v2-rise: 24px;
  --v2-dur: 820ms;
  --v2-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --v2-img-dur: 1100ms;
  --v2-para: 0;          /* parallax intensity, read by JS */
  --v2-kb: 0;            /* ken-burns on hero, read by JS/CSS */
}
[data-variant="v2"] { --v2-stagger: 80ms; }
[data-variant="v2"][data-register="editorial"] {
  --v2-rise: 10px;  --v2-dur: 900ms;  --v2-img-dur: 1000ms; --v2-stagger: 60ms;  --v2-para: 0;    --v2-kb: 0;
}
[data-variant="v2"][data-register="considered"] {
  --v2-rise: 24px;  --v2-dur: 820ms;  --v2-img-dur: 1100ms; --v2-stagger: 80ms;  --v2-para: 0.06; --v2-kb: 0;
}
[data-variant="v2"][data-register="cinematic"] {
  --v2-rise: 46px;  --v2-dur: 1050ms; --v2-img-dur: 1400ms; --v2-stagger: 110ms; --v2-para: 0.14; --v2-kb: 1;
}

/* ------- Reveal: text, titles, portraits, bottles, close ------- */
[data-variant="v2"] .v2-reveal {
  opacity: 0;
  transform: translateY(var(--v2-rise));
  transition: opacity var(--v2-dur) var(--v2-ease),
              transform var(--v2-dur) var(--v2-ease);
  transition-delay: calc(var(--v2-i, 0) * var(--v2-stagger));
  will-change: opacity, transform;
}
[data-variant="v2"] .v2-reveal.v2-shown {
  opacity: 1;
  transform: none;
}

/* ------- Reveal: full-width image bands -------
   No transform on the band itself (transform is reserved for JS
   parallax on the inner <img>). Bands reveal with opacity; the inner
   image settles from a soft scale; cinematic adds a clip wipe. ------- */
[data-variant="v2"] .v2-band {
  opacity: 0;
  transition: opacity var(--v2-img-dur) var(--v2-ease),
              clip-path var(--v2-img-dur) var(--v2-ease);
  transition-delay: calc(var(--v2-i, 0) * var(--v2-stagger));
}
[data-variant="v2"] .v2-band.v2-shown { opacity: 1; }
[data-variant="v2"] .v2-band > img,
[data-variant="v2"] .v2-band .landscape-figure > img { will-change: transform; }

/* Inner-image settle (scale down to rest). Skipped while JS parallax
   owns the transform — JS adds .v2-para-on to opt out of CSS scale. */
[data-variant="v2"][data-register="considered"] .v2-band:not(.v2-para-on) > img,
[data-variant="v2"][data-register="cinematic"] .v2-band:not(.v2-para-on) > img {
  transform: scale(1.06);
  transition: transform var(--v2-img-dur) var(--v2-ease);
}
[data-variant="v2"] .v2-band.v2-shown:not(.v2-para-on) > img { transform: scale(1); }

/* Cinematic: bands wipe up behind a clip-path reveal */
[data-variant="v2"][data-register="cinematic"] .v2-band { clip-path: inset(0 0 100% 0); }
[data-variant="v2"][data-register="cinematic"] .v2-band.v2-shown { clip-path: inset(0 0 0 0); }

/* ------- Hero: lockup signature + image entrance -------
   The V1 .hero-lockup is absolutely centred via translate(-50%,-50%);
   every register below must preserve that centring transform. */

/* Editorial — quiet fade up */
[data-variant="v2"][data-register="editorial"] .hero-lockup.v2-reveal {
  opacity: 0; transform: translate(-50%, calc(-50% + 10px));
  transition: opacity 1100ms var(--v2-ease), transform 1100ms var(--v2-ease);
}
[data-variant="v2"][data-register="editorial"] .hero-lockup.v2-reveal.v2-shown {
  opacity: 1; transform: translate(-50%, -50%);
}
/* Considered — fade + settle from slightly small */
[data-variant="v2"][data-register="considered"] .hero-lockup.v2-reveal {
  opacity: 0; transform: translate(-50%, -50%) scale(0.94);
  transition: opacity 1000ms var(--v2-ease), transform 1200ms var(--v2-ease);
}
[data-variant="v2"][data-register="considered"] .hero-lockup.v2-reveal.v2-shown {
  opacity: 1; transform: translate(-50%, -50%) scale(1);
}
/* Cinematic — vertical clip wipe reveals the lockup (centring preserved) */
[data-variant="v2"][data-register="cinematic"] .hero-lockup.v2-reveal {
  opacity: 0;
  transform: translate(-50%, -50%);
  clip-path: inset(0 0 100% 0);
  transition: opacity 700ms var(--v2-ease) 200ms, clip-path 1400ms var(--v2-ease);
}
[data-variant="v2"][data-register="cinematic"] .hero-lockup.v2-reveal.v2-shown {
  opacity: 1; clip-path: inset(0 0 0 0);
}

/* Hero image entrance + ken burns (cinematic) */
[data-variant="v2"][data-register="considered"] .hero.v2-shown .hero-frame img.is-active {
  animation: v2HeroSettle 1800ms var(--v2-ease) both;
}
[data-variant="v2"][data-register="cinematic"] .hero.v2-shown .hero-frame img.is-active {
  animation: v2HeroSettle 1600ms var(--v2-ease) both, v2KenBurns 18s ease-out 1600ms both;
}
@keyframes v2HeroSettle { from { transform: scale(1.08); } to { transform: scale(1); } }
@keyframes v2KenBurns   { from { transform: scale(1); } to { transform: scale(1.08); } }

/* Lighter motion on phones (parallax is disabled in JS regardless) */
@media (max-width: 720px) {
  [data-variant="v2"] { --v2-rise: 14px; }
  [data-variant="v2"][data-register="cinematic"] { --v2-rise: 18px; }
}

/* ============================================================
   REDUCED MOTION — mandatory near-static fallback.
   Everything resolves to its end state with no movement.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-variant="v2"] .v2-reveal,
  [data-variant="v2"] .v2-band {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    transition: opacity 300ms ease !important;
  }
  [data-variant="v2"] .v2-band > img { transform: none !important; }
  [data-variant="v2"] .hero-frame img.is-active { animation: none !important; transform: none !important; }
  [data-variant="v2"] .hero-lockup.v2-reveal { transition: opacity 300ms ease !important; }

  /* Restore lockup centring under reduced motion. The blanket
     `transform: none !important` above strips the .hero-lockup's
     translate(-50%, -50%) so it would jump off-centre in V2.
     This override re-applies the centring without re-introducing
     motion. (Brief 5, named fix.) */
  [data-variant="v2"] .hero-lockup.v2-reveal,
  [data-variant="v2"] .hero-lockup.v2-reveal.v2-shown {
    transform: translate(-50%, -50%) !important;
  }
}