/* ============================================================
   Between Earth & Sky — deck
   Visual tokens, the six signature effects, and the payoff's look and motion.
   Layout, the band shape and the character cascade are the engine's.

   Effect durations do NOT scale themselves. They live here and are checked by
   hand against fxDelay plus the slide hold in deck.json. At slide 3800 the
   ceiling is 950 + duration <= 3800; the longest survivor is `pressed` at
   2.6s, which ends at 3550.
   ============================================================ */

.cnh[data-deck="beas"]{
  --gold:#e8c06a;
  --gold-deep:#c79a3e;
  --bone:#f2e9d6;
  --obsidian:#0a090d;
  --jade:#39907b;
  --blood:#a3242a;
  --prophecy:#8b5cc4;

  --ui:'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* CAUDEX, Jeremy 2026-10-23, replacing Marcellus the same day it was locked:
     Marcellus read too light in the band. BEaS headers and marketing use
     Albertus Nova, which is Monotype's and is not licensed for the web here.
     Caudex carries the same flared, chiselled stems and humanist Roman
     proportions, and it ships a real 700, so --line-weight goes back up and the
     line no longer leans on its shadow alone for presence. --line-track stays
     positive, because a chiselled face wants air, but tighter than Marcellus's
     .012em since the heavier weight already fills the word.
     The near neighbours were Marcellus, Cinzel and Quattrocento. All three
     tokens and the font URL in deck.json change together. */
  --display:'Caudex', 'Albertus Nova', 'Albertus MT', Palatino, serif;
  --line-weight:700;
  --line-track:.004em;

  --ease-out:cubic-bezier(.16,.84,.26,1);
  --ease-soft:cubic-bezier(.33,0,.1,1);

  /* 2.4/1 is the old 3/1 band 25% taller. A 3:2 painting shows 62.5% of its
     height here, not the 50% a 3:1 band showed, and every `focus` in deck.json
     was recomputed for that. Changing this means recomputing all six crops with
     the formula in this deck's README, which needs each subject's band fraction
     and not the painting's midpoint. */
  --cnh-ratio: 2.4 / 1;
  /* The phone band is deliberately left at 4:5. It is already portrait, and
     making it taller crops more width out of a landscape painting rather than
     showing more of it. */
  --cnh-ratio-phone: 4 / 5;
  --cnh-max-height: 88vh;

  --scrim:.4;
  --scrim-phone:.5;

  --logo-b-inset:8.4%;
}

/* ---------- the gold seal ----------
   Declared as an ornament on slides 1 and 2. It has no SVG geometry: the
   <symbol> in ornament.svg is empty and this is the whole of it. */
.cnh-ornament[data-ornament="seal"]{
  position:relative;
  display:block;
  height:2px;
  width:min(46ch,78%);
  margin-top:clamp(17.6px,2.4vw,35.2px);
  opacity:0;
  background:linear-gradient(90deg,transparent,var(--gold) 12%,var(--gold) 88%,transparent);
  transform:scaleX(0);
  transform-origin:left center;
  box-shadow:0 0 22px rgba(232,192,106,.55);
}
.cnh-copy[data-pos="right"] .cnh-ornament[data-ornament="seal"]{transform-origin:right center}
.cnh-copy[data-pos="center"] .cnh-ornament[data-ornament="seal"]{transform-origin:center}

/* slide 1 — the seal draws across, then presses the words down */
.cnh-fx-seal .cnh-ornament[data-ornament="seal"]{animation:cnhSealDraw 1.5s var(--ease-out) var(--t-fx) forwards}
@keyframes cnhSealDraw{
  from{opacity:0;transform:scaleX(0)}
  to  {opacity:1;transform:scaleX(1)}
}
.cnh-fx-seal .cnh-line{animation:cnhPressed 2.6s var(--ease-soft) var(--t-fx) forwards}
@keyframes cnhPressed{
  from{filter:none}
  to  {filter:brightness(.74) saturate(.7)}
}

/* slide 2 — starts sealed, then snaps it */
.cnh-fx-break .cnh-ornament[data-ornament="seal"]{
  opacity:1;transform:scaleX(1);
  animation:cnhSealSnap 1.1s var(--ease-out) var(--t-fx) forwards;
}
@keyframes cnhSealSnap{
  0%  {opacity:1;transform:scaleX(1);filter:none}
  18% {opacity:1;transform:scaleX(1.04);filter:brightness(2.6)}
  100%{opacity:0;transform:scaleX(1.5);filter:brightness(3) blur(7px)}
}
.cnh-fx-break .cnh-line{animation:cnhFlare 1.8s var(--ease-out) var(--t-fx) forwards}
@keyframes cnhFlare{
  0%  {text-shadow:var(--line-shadow)}
  22% {text-shadow:0 0 34px rgba(232,192,106,.95), 0 0 90px rgba(232,192,106,.6), var(--line-shadow)}
  100%{text-shadow:0 0 18px rgba(232,192,106,.3), var(--line-shadow)}
}

/* slide 3 — chromatic shudder as the dark magic lands */
.cnh-fx-shudder .cnh-line{position:relative}
.cnh-fx-shudder .cnh-line::before,
.cnh-fx-shudder .cnh-line::after{
  content:attr(data-text);
  position:absolute;
  inset:0;
  opacity:0;
  pointer-events:none;
  text-shadow:none;
}
.cnh-fx-shudder .cnh-line::before{color:var(--blood);mix-blend-mode:screen}
.cnh-fx-shudder .cnh-line::after {color:var(--jade);mix-blend-mode:screen}
.cnh-slide.cnh-is-active.cnh-fx-shudder .cnh-line::before{animation:cnhGhostL 1.5s var(--ease-out) var(--t-fx) forwards}
.cnh-slide.cnh-is-active.cnh-fx-shudder .cnh-line::after {animation:cnhGhostR 1.5s var(--ease-out) var(--t-fx) forwards}
@keyframes cnhGhostL{
  0%{opacity:.85;transform:translate3d(-16px,5px,0)}
  70%{opacity:.4}
  100%{opacity:0;transform:translate3d(0,0,0)}
}
@keyframes cnhGhostR{
  0%{opacity:.85;transform:translate3d(16px,-5px,0)}
  70%{opacity:.4}
  100%{opacity:0;transform:translate3d(0,0,0)}
}

/* slide 4 — prophecy glow.
   Every keyframe carries the full dark stack through var(--line-shadow). An
   animated text-shadow replaces the property outright, so a keyframe listing
   only the glow silently drops the shadow the line was relying on. That is what
   washed this slide out: the copy crosses the oracle's white garment, the
   brightest passage any line sits on in the deck, behind a single 40px black
   while every other slide had three layers. The slide's own lineShadow in
   deck.json then overrides the default with four, including a wide 56px halo. */
.cnh-fx-prophecy .cnh-line{animation:cnhProphecyGlow 2.4s var(--ease-soft) var(--t-fx) forwards}
@keyframes cnhProphecyGlow{
  0%  {text-shadow:var(--line-shadow)}
  40% {text-shadow:0 0 40px rgba(139,92,196,.85), var(--line-shadow)}
  100%{text-shadow:0 0 22px rgba(139,92,196,.42), var(--line-shadow)}
}

/* slide 5 — the question splits */
.cnh-split .cnh-line:first-child{opacity:0;animation:cnhSplitA 1.5s var(--ease-out) var(--t-fx) forwards}
.cnh-split .cnh-line:last-child {opacity:0;animation:cnhSplitB 1.5s var(--ease-out) calc(var(--t-fx) + 420ms) forwards}
@keyframes cnhSplitA{
  from{opacity:0;transform:translate3d(0,.55em,0)}
  to  {opacity:1;transform:translate3d(-.14em,0,0)}
}
@keyframes cnhSplitB{
  from{opacity:0;transform:translate3d(0,-.3em,0)}
  to  {opacity:1;transform:translate3d(.14em,0,0);color:var(--gold)}
}

/* ---------- slide 6, the payoff ---------- */
.cnh-fx-payoff .cnh-art{filter:brightness(.9) saturate(1.1) blur(1px)}
.cnh-slide.cnh-fx-payoff .cnh-plane--fog{
  background:
    radial-gradient(124% 96% at 50% 46%, rgba(6,5,10,.1) 0%, rgba(6,5,10,.4) 68%, rgba(4,3,7,.6) 100%),
    linear-gradient(to top, rgba(5,4,8,.52) 0%, rgba(5,4,8,.08) 42%, transparent 70%);
}

/* The two counter-rotating glyph rings. One element each now, carrying both
   the fade-in and the spin; the prototype used a wrapper for the first and the
   svg for the second. */
.cnh-lockup .cnh-ornament{
  position:absolute;
  aspect-ratio:1;
  color:var(--gold);
  opacity:0;
}
.cnh-ornament[data-ornament="ring-outer"]{width:min(420px,30vw)}
.cnh-ornament[data-ornament="ring-inner"]{width:min(560px,40vw)}
.cnh-slide.cnh-is-active .cnh-lockup .cnh-ornament{
  animation:cnhRingIn 2.4s var(--ease-out) .35s forwards, cnhSpin 72s linear infinite;
}
.cnh-slide.cnh-is-active .cnh-ornament[data-ornament="ring-inner"]{
  animation:cnhRingIn 2.4s var(--ease-out) .35s forwards, cnhSpin 98s linear infinite reverse;
}
@keyframes cnhRingIn{to{opacity:.5}}
@keyframes cnhSpin{to{transform:rotate(360deg)}}

.cnh-logo{
  opacity:0;
  filter:drop-shadow(0 0 34px rgba(0,0,0,.9)) drop-shadow(0 0 14px rgba(232,192,106,.35));
}
.cnh-slide.cnh-is-active .cnh-logo{animation:cnhLogoIn 1.7s var(--ease-out) .5s forwards}
@keyframes cnhLogoIn{
  from{opacity:0;transform:scale(.9) translateY(18px);filter:drop-shadow(0 0 0 rgba(0,0,0,0)) blur(10px)}
  to  {opacity:1;transform:scale(1) translateY(0);filter:drop-shadow(0 0 34px rgba(0,0,0,.9)) drop-shadow(0 0 14px rgba(232,192,106,.35)) blur(0)}
}

.cnh-kicker{opacity:0}
.cnh-slide.cnh-is-active .cnh-kicker{animation:cnhFadeUp 1.2s var(--ease-out) 1.25s forwards}

.cnh-products{
  opacity:0;
  filter:drop-shadow(0 26px 46px rgba(0,0,0,.8));
}
.cnh-slide.cnh-is-active .cnh-products{animation:cnhFadeUp 1.5s var(--ease-out) 1.5s forwards}
@keyframes cnhFadeUp{
  from{opacity:0;transform:translateY(26px)}
  to  {opacity:1;transform:translateY(0)}
}

.cnh-cta{
  opacity:0;
  transition:color .4s, border-color .4s, background .4s, transform .4s var(--ease-out);
}
.cnh-slide.cnh-is-active .cnh-cta{animation:cnhFadeUp 1.2s var(--ease-out) 1.85s forwards}
.cnh-cta::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg,transparent,rgba(232,192,106,.42),transparent);
  transform:translateX(-120%);
  transition:transform .7s var(--ease-out);
}
.cnh-cta:hover{color:#1a140a;border-color:var(--gold);background:var(--gold);transform:translateY(-2px)}
.cnh-cta:hover::after{transform:translateX(120%)}

@media (max-width:760px){
  .cnh-fx-payoff .cnh-art{filter:brightness(.88) saturate(1) blur(0)}
  .cnh-ornament[data-ornament="ring-outer"]{width:min(300px,62vw)}
  .cnh-ornament[data-ornament="ring-inner"]{width:min(300px,62vw)}
}

@media (prefers-reduced-motion:reduce){
  .cnh-ornament[data-ornament="seal"]{opacity:1;transform:scaleX(1)}
  .cnh-lockup .cnh-ornament{opacity:.5}
  .cnh-logo,
  .cnh-kicker,
  .cnh-products,
  .cnh-cta{opacity:1}
  .cnh-split .cnh-line:first-child,
  .cnh-split .cnh-line:last-child{opacity:1}
}