/* THE CASE — shared choreography. Elements rest hidden; an ancestor [data-play="1"] starts
   them. Every animated element carries its FINAL state inline, so reduced-motion / no-JS
   shows the finished composition rather than a half-drawn one. */
:root { --cc:#02A9E8; --ccD:#036A99; --ink:#0C1124; --grn:#12866F; --red:#A72023; --ln:#9BC4ED; }

@keyframes bUp    { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:none; } }
@keyframes bFade  { from { opacity:0; } to { opacity:1; } }
@keyframes bPop   { from { opacity:0; transform:scale(.78); } to { opacity:1; transform:scale(1); } }
@keyframes bArtL  { from { opacity:0; transform:translateX(-36px) scale(1.05); } to { opacity:1; transform:none; } }
@keyframes bArtR  { from { opacity:0; transform:translateX(36px) scale(1.05); } to { opacity:1; transform:none; } }
@keyframes bArtUp { from { opacity:0; transform:translateY(32px) scale(1.03); } to { opacity:1; transform:none; } }
@keyframes bDraw  { from { opacity:1; stroke-dashoffset:1; } to { opacity:1; stroke-dashoffset:0; } }
@keyframes bRing  { from { opacity:1; stroke-dashoffset:100; } to { opacity:1; stroke-dashoffset:0; } }
@keyframes bGrowY { from { opacity:1; transform:scaleY(0); } to { opacity:1; transform:scaleY(1); } }
/* The ring's endpoint marker is the same circle geometry with a zero-length round-cap dash,
   so sliding its dashoffset walks the dot along the arc in lockstep with bRing. */
@keyframes bRingDot { from { opacity:1; stroke-dashoffset:0; } to { opacity:1; stroke-dashoffset:-78; } }
@keyframes bGrowX { from { opacity:1; transform:scaleX(0); } to { opacity:1; transform:scaleX(1); } }

[data-beat] [data-a] { opacity: 0; }
/* Durations below are 2x the original hand-tuned pace (18 Aug), a blanket slowdown across every
   beat's entrance choreography and the card-switch transition in benefits.frag.html — delays
   (below) are untouched, so the cascade's relative rhythm is unchanged, only each element's own
   glide is twice as slow. */
[data-play="1"] [data-a] { animation-duration:1.24s; animation-timing-function:cubic-bezier(.16,1,.3,1); animation-fill-mode:both; }
[data-play="1"] [data-a="up"]    { animation-name:bUp; }
[data-play="1"] [data-a="fade"]  { animation-name:bFade; animation-duration:1.56s; }
[data-play="1"] [data-a="pop"]   { animation-name:bPop; animation-duration:1.44s; animation-timing-function:cubic-bezier(.34,1.42,.5,1); }
[data-play="1"] [data-a="artL"]  { animation-name:bArtL;  animation-duration:2.36s; }
[data-play="1"] [data-a="artR"]  { animation-name:bArtR;  animation-duration:2.36s; }
[data-play="1"] [data-a="artUp"] { animation-name:bArtUp; animation-duration:2.1s; }
[data-play="1"] [data-a="draw"]  { animation-name:bDraw; animation-duration:2.7s; animation-timing-function:cubic-bezier(.32,.9,.35,1); }
[data-play="1"] [data-a="ring"]  { animation-name:bRing; animation-duration:3.1s; animation-timing-function:cubic-bezier(.32,.9,.35,1); }
[data-play="1"] [data-a="ringdot"] { animation-name:bRingDot; animation-duration:3.1s; animation-timing-function:cubic-bezier(.32,.9,.35,1); }
[data-play="1"] [data-a="growY"] { animation-name:bGrowY; animation-duration:1.64s; }
[data-play="1"] [data-a="growX"] { animation-name:bGrowX; animation-duration:1.4s; }

[data-d="1"]  { animation-delay:0s; }
[data-d="2"]  { animation-delay:.08s; }
[data-d="3"]  { animation-delay:.16s; }
[data-d="4"]  { animation-delay:.26s; }
[data-d="5"]  { animation-delay:.34s; }
[data-d="6"]  { animation-delay:.42s; }
[data-d="7"]  { animation-delay:.50s; }
[data-d="8"]  { animation-delay:.58s; }
[data-d="9"]  { animation-delay:.66s; }
[data-d="10"] { animation-delay:.76s; }
[data-d="11"] { animation-delay:.86s; }
[data-d="12"] { animation-delay:.96s; }
[data-d="13"] { animation-delay:1.08s; }
[data-d="14"] { animation-delay:1.20s; }
[data-d="15"] { animation-delay:1.34s; }
[data-d="16"] { animation-delay:1.50s; }

/* ---- STAT-TILE HOVER ACCENT ---------------------------------------------------------------
   Descendant hover (tile -> underline) is exactly what style-hover="" cannot express — it only
   ever compiles to a self-only .scpN:hover rule (support.js: collectProps/createPseudoSheet).
   Real selectors need stable hooks, same reasoning as data-bolt-card in benefits.frag.html.
   Each tile brightens its OWN underline by one step, not to one universal colour: Beat 2's pale
   #C3DEF5 resting bars step up to the saturated #0A8FD6 already used for their icon badges; Beat
   3's already-saturated #0A8FD6 bars step up to #02A9E8, the site's brightest cyan (same colour
   as the orb ring's arc). The resting colours live in an inline style attribute, which outranks
   a stylesheet rule, hence !important — same bargain the bolt-card block strikes. */
[data-stat-tile] { transition: transform .18s cubic-bezier(.16,1,.3,1); }
[data-stat-tile]:hover,
[data-stat-tile]:focus-within { transform: translateY(-3px); }

[data-stat-tile] [data-underline] {
  transition: background-color .22s ease, box-shadow .22s ease, width .22s cubic-bezier(.16,1,.3,1);
}
[data-stat-tile]:hover [data-underline],
[data-stat-tile]:focus-within [data-underline] {
  background: #0A8FD6 !important;
  box-shadow: 0 0 10px rgba(10,143,214,0.4);
  width: clamp(46px,7cqw,96px) !important;
}
/* Beat 3's bars start from the saturated colour already, so their hover step goes one shade
   brighter still — scoped past the rule above via source order. */
[data-beat="3"] [data-stat-tile]:hover [data-underline],
[data-beat="3"] [data-stat-tile]:focus-within [data-underline] {
  background: #02A9E8 !important;
  box-shadow: 0 0 10px rgba(2,169,232,0.45);
  width: clamp(24px,3.4cqw,44px) !important;
}
/* Touch has no hover; a sticky :hover after a tap would leave one tile lit for the rest of the
   session. Restores rest state for pointerless input — :focus-within still covers keyboard. */
@media (hover: none) {
  [data-stat-tile]:hover { transform: none; }
  [data-stat-tile]:hover [data-underline] { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-stat-tile], [data-stat-tile] [data-underline] { transition: none !important; }
}

/* The in-card headline is SHOWN in deck mode too (18 Aug). It used to be hidden here on the
   reasoning that the deck "keeps its headline above the stack" — but the page's own h2 is the
   SECTION line ("You gave them the internet…"), a different string from each beat's own h3
   ("More connected. Yet, happiness fell."), so hiding it dropped real copy and left the card
   with nothing but a stretched tile row and a tall empty field. The reference slides carry
   both. [data-art="0"] still hides art where a beat opts out. */
[data-art="0"] [data-artimg] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  [data-beat] [data-a] { opacity:1 !important; animation:none !important; }
}

/* ---- BLENDED TREATMENT ------------------------------------------------------------------
   The deck needs card surfaces because a slide is an object you look AT. Blended, the beats
   are part of the page you read THROUGH: the white panels dissolve, structure comes from
   gutters and hairlines, and the artwork feathers into the ground instead of being clipped
   inside a rounded box. Same markup, same choreography — only the chrome goes. */
[data-mode="blend"] [data-surface] { background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
[data-mode="blend"] [data-strip]   { background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border: 0 !important; border-top: 1px solid rgba(16,22,48,0.12) !important; border-bottom: 1px solid rgba(16,22,48,0.12) !important; }
[data-mode="blend"] [data-artframe]{ background: transparent !important; border: 0 !important; border-radius: 0 !important; }
[data-mode="blend"] [data-artframe] img {
  -webkit-mask-image: radial-gradient(118% 112% at 52% 48%, #000 46%, transparent 92%);
          mask-image: radial-gradient(118% 112% at 52% 48%, #000 46%, transparent 92%);
}
/* The one surface that stays: the 80% orb is the focal statement, not a container. */
[data-mode="blend"] [data-orb] { box-shadow: 0 22px 60px rgba(16,24,48,0.10) !important; }

/* A softer arrival to match — content resolves out of the background rather than sliding on. */
@keyframes bUpSoft { from { opacity:0; transform:translateY(30px); filter:blur(7px); } to { opacity:1; transform:none; filter:blur(0); } }
@keyframes bPopSoft { from { opacity:0; transform:scale(.9); filter:blur(6px); } to { opacity:1; transform:scale(1); filter:blur(0); } }
[data-mode="blend"] [data-play="1"] [data-a="up"]  { animation-name: bUpSoft; animation-duration: 1.9s; }
[data-mode="blend"] [data-play="1"] [data-a="pop"] { animation-name: bPopSoft; animation-duration: 1.8s; animation-timing-function: cubic-bezier(.16,1,.3,1); }
[data-mode="blend"] [data-play="1"] [data-a="artL"],
[data-mode="blend"] [data-play="1"] [data-a="artR"],
[data-mode="blend"] [data-play="1"] [data-a="artUp"] { animation-duration: 3.0s; }

/* Each crop carries its own pale-blue field. Behind a white card that never showed; on the
   bare page ground any edge that does not reach zero alpha paints a pasted-photo rectangle.
   A single radial can't do it — anchored at the edge the art sits on, that edge is by
   definition full black. So: independent per-axis fades composed with intersect, and the
   bleed removed in blend so the falloff finishes INSIDE the panel's clip box rather than
   being cut flat by it. */
[data-mode="blend"] img[src*="case-ship"],
[data-mode="blend"] img[src*="case-officer-rail"] { margin: auto 0 0 !important; width: 100% !important; }
/* Beat 2's panels centre their whole stack, so the photo must stay tied to its caption —
   an auto top margin here would shove it back to the panel floor and reopen the hole. */
[data-mode="blend"] img[src*="case-officer-sea"] { margin: clamp(8px,1.4cqw,20px) 0 0 !important; width: 100% !important; }

[data-mode="blend"] img[data-artimg] {
  -webkit-mask-image:
    linear-gradient(180deg, transparent 0%, #000 40%),
    linear-gradient(90deg, transparent 0%, #000 17%, #000 83%, transparent 100%),
    linear-gradient(0deg, transparent 0%, #000 17%) !important;
  mask-image:
    linear-gradient(180deg, transparent 0%, #000 40%),
    linear-gradient(90deg, transparent 0%, #000 17%, #000 83%, transparent 100%),
    linear-gradient(0deg, transparent 0%, #000 17%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}
[data-mode="blend"] img[src*="case-gangway"] {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 30%, #000 80%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 13%, #000 85%, transparent 100%) !important;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 30%, #000 80%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 13%, #000 85%, transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}
[data-mode="blend"] img[src*="case-bridge"] {
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%) !important;
  mask-image:
    linear-gradient(90deg, transparent 0%, #000 13%, #000 87%, transparent 100%),
    linear-gradient(180deg, transparent 0%, #000 11%, #000 89%, transparent 100%) !important;
  -webkit-mask-composite: source-in !important;
  mask-composite: intersect !important;
}

/* ---- PHONES. The beats are built as wide evidence rows; below 760px they stack. Connectors
   and the gangway vignette are the first things to go — they only mean anything side by side. */
@media (max-width: 760px) {
  [data-beat] [data-cols] { grid-template-columns: 1fr !important; row-gap: 20px; width: 100% !important; }
  [data-beat] [data-conn] { display: none !important; }
  [data-beat] img[src*="case-gangway"] { display: none !important; }
  [data-beat] [data-cols="3"] > * { border-left: 0 !important; }
}