/* ============================================================
   STORY MOTION SYSTEM  ·  Apricot News
   Shared scroll/hover choreography for every story page.
   Pairs with story-motion.js. Reads the page's own palette
   variables (--accent, --accent-d, --line, --ink…).
   Defensive by design:
     · everything hides only under body.sm-on
     · yields to Canva move-mode (no !important on transforms)
     · respects prefers-reduced-motion
   ============================================================ */
:root{
  --sm-ease:cubic-bezier(.22,.61,.36,1);
  --sm-dist:24px;
  --sm-dur:.78s;
}
body.sm-subtle{ --sm-dist:12px; --sm-dur:.58s; }

/* ---------- scroll progress bar ---------- */
#sm-progress{
  position:fixed; top:0; left:0; height:3px; width:0; z-index:150;
  background:linear-gradient(90deg,var(--accent,#E8763A),var(--accent-d,#C25A22));
  box-shadow:0 0 14px -2px var(--accent,#E8763A);
  transform-origin:left; pointer-events:none; will-change:width;
}

/* ---------- reveal items (entrance + stagger) ---------- */
/* Hidden state applies ONLY when motion is enabled, so motion-off /
   reduced-motion / no-JS all show content immediately. */
body.sm-on [data-sm-item]{
  opacity:0; transform:translateY(var(--sm-dist));
  transition:opacity var(--sm-dur) var(--sm-ease), transform var(--sm-dur) var(--sm-ease);
}
body.sm-on [data-sm-item].sm-in{ opacity:1; transform:none; }

/* directional flavours */
body.sm-on [data-sm-item="left"]{ transform:translateX(calc(-1 * var(--sm-dist))); }
body.sm-on [data-sm-item="right"]{ transform:translateX(var(--sm-dist)); }
body.sm-on [data-sm-item="scale"]{ transform:scale(.94); }
body.sm-on [data-sm-item="left"].sm-in,
body.sm-on [data-sm-item="right"].sm-in,
body.sm-on [data-sm-item="scale"].sm-in{ transform:none; }

/* motion fully off — make sure legacy .reveal blocks show too */
body.sm-off:not(.move-mode) .reveal{ opacity:1 !important; transform:none !important; }

/* ---------- animated bars / meters ---------- */
.conf .cbar i{ transition:width 1.15s var(--sm-ease); }
.spectrum i{ transition:left 1.15s var(--sm-ease); }
.spectrum{ transform:scaleX(1); }
body.sm-on .spectrum[data-sm-draw]{ transform:scaleX(0); transform-origin:left; transition:transform 1s var(--sm-ease); }
body.sm-on .spectrum[data-sm-draw].sm-in{ transform:scaleX(1); }

/* count-up numbers use a tabular feel so width doesn't jitter */
[data-sm-count]{ font-variant-numeric:tabular-nums; }

/* ---------- parallax hero (non-cinematic pages) ---------- */
body.sm-on .hero-img .fr img{ will-change:transform; }

/* ============================================================
   CINEMATIC SCROLL-ZOOM HERO
   The photo fills the viewport, with the headline overlaid
   top-left and the "Why it matters" card bottom-right. On scroll
   the photo eases down into a centred framed slot while the two
   text blocks travel from the screen corners to the photo's
   corners. Text stays white over the photo the whole way (a scrim
   keeps it legible) so there is no colour interpolation to stall.
   JS writes only a handful of transforms per frame; CSS owns the
   resting look + the display:contents fallback for move-mode /
   motion-off / reduced-motion.
   ============================================================ */
.cine-track, .cine-stage{ display:contents; }
.cine-scrim, .cine-cue{ display:none; }
/* resting / fallback "why it matters" card (static header) */
.hero-why{ position:static; max-width:600px; margin:18px 0 0 auto;
  background:var(--gray-2,#FAF8F5); border:1px solid var(--line,#E6E1DA);
  border-radius:16px; padding:17px 20px; box-shadow:0 18px 44px -28px rgba(60,40,15,.4); }
.hero-why .hw-label{ font-family:var(--mono); font-size:11px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--accent-d,#C25A22); margin-bottom:7px; }
.hero-why p{ margin:0; font-size:15.5px; line-height:1.5; color:var(--ink,#1A1714); letter-spacing:-.01em; text-wrap:pretty; }

/* --- ACTIVE cinematic mode --- */
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine{ padding:0; }
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .cine-track{
  display:block; position:relative; height:var(--cine-h,150vh);
}
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .cine-stage{
  display:flex; align-items:center; justify-content:center;
  position:sticky; top:var(--nav-h,64px); height:calc(100vh - var(--nav-h,64px));
  overflow:hidden; z-index:1; background:#fff;
}
/* the framed photo — scaled up to cover the viewport at the top */
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-img{
  position:relative; z-index:2; margin:0; width:min(1040px, calc(100vw - 64px));
  transform-origin:center center; will-change:transform;
}
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-img .fr{
  aspect-ratio:16/9; border-radius:var(--fr-r,18px); overflow:hidden; margin:0;
  box-shadow:0 40px 100px -46px rgba(0,0,0,.72);
}
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-img .fr img{
  width:100%; height:100%; object-fit:cover;
}
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-img .cap{ display:none; }
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .cine-scrim{
  display:block; position:absolute; inset:0; z-index:1; pointer-events:none; border-radius:inherit;
  opacity:var(--scrim-o,1);
  background:
    linear-gradient(to bottom, rgba(8,6,4,.72) 0%, rgba(8,6,4,.18) 26%, rgba(8,6,4,0) 46%),
    linear-gradient(to top, rgba(8,6,4,.74) 0%, rgba(8,6,4,.20) 28%, rgba(8,6,4,0) 50%);
}
/* headline — overlaid top-left, white over the photo */
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-head{
  position:absolute; left:0; top:0; z-index:4; margin:0;
  width:max-content; max-width:min(1040px, 92vw); will-change:transform;
}
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-head .eyebrow,
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-head h1,
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-head .meta{
  transition:color .45s var(--sm-ease), text-shadow .45s var(--sm-ease);
}
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-head .eyebrow{ color:#FFD2A6; }
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-head h1{
  color:#fff; max-width:none; font-size:clamp(30px,3.4vw,50px); line-height:1.07; margin:0;
  text-shadow:0 2px 34px rgba(0,0,0,.42);
}
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-head .meta{
  color:rgba(255,255,255,.8); margin-top:14px; max-width:46ch; text-shadow:0 1px 14px rgba(0,0,0,.5);
}
/* once the headline rests above the photo on white, flip its colours to ink */
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-head.on-light h1{
  color:var(--ink,#1A1714); text-shadow:none;
}
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-head.on-light .eyebrow{ color:var(--accent-d,#C25A22); }
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-head.on-light .meta{
  color:var(--ink-3,#8E867D); text-shadow:none;
}
/* why it matters — overlaid bottom-right, translucent dark card */
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-why{
  position:absolute; left:0; top:0; z-index:5; margin:0; width:min(480px, 44vw);
  background:rgba(20,15,11,.46); border:1px solid rgba(255,255,255,.16);
  box-shadow:0 26px 64px -30px rgba(0,0,0,.6);
  backdrop-filter:blur(14px) saturate(1.4); -webkit-backdrop-filter:blur(14px) saturate(1.4);
  will-change:transform;
}
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-why .hw-label{ color:#FFD2A6; }
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-why p{ color:#fff; }
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-why{
  padding:13px 16px;
}
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-why p{
  font-size:14px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:5;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* scroll cue */
body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .cine-cue{
  display:flex; flex-direction:column; align-items:center; gap:9px;
  position:absolute; left:50%; bottom:24px; transform:translateX(-50%); z-index:6;
  opacity:var(--cue-o,1);
}
.cine-cue .cc-word{ font-family:var(--mono); font-size:10.5px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(255,255,255,.72); }
.cine-cue .cc-line{ width:1px; height:34px; background:linear-gradient(rgba(255,255,255,.7),rgba(255,255,255,0));
  position:relative; overflow:hidden; }
.cine-cue .cc-line::after{ content:""; position:absolute; left:0; top:-34px; width:1px; height:34px;
  background:linear-gradient(rgba(255,255,255,0),#fff); animation:cineCue 1.9s var(--sm-ease) infinite; }
@keyframes cineCue{ 0%{transform:translateY(0)} 60%,100%{transform:translateY(68px)} }

/* nav sits above the hero now — it keeps its normal look and never overlaps the photo */
.nav{ transition:background .35s var(--sm-ease), border-color .35s var(--sm-ease); }

@media(max-width:760px){
  body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .cine-track{ height:185vh; }
  body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-why{ width:min(92vw,480px); }
  body.sm-on:not(.move-mode):not(.sm-cine-off) .hero.cine .hero-head h1{ font-size:clamp(26px,7vw,40px); }
}
@media(prefers-reduced-motion:reduce){ .cine-cue .cc-line::after{ animation:none; } }

/* ============================================================
   FRAMING — sticky scrollytelling
   ============================================================ */
.fr-scrolly{
  display:grid; grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:44px 56px; align-items:start;
}
.fr-scrolly .fcards{ grid-template-columns:1fr; gap:22px; margin-top:0; }
.fr-sticky{ position:static; align-self:start; }

.fr-sticky .fr-eyebrow{ margin-bottom:18px; }
.fr-sticky h2.h2{ text-align:left; }
.fr-sticky .lead{ margin:18px 0 0; max-width:38ch; text-align:left; }

/* sticky nav reflecting the active frame */
.fr-nav{ list-style:none; margin:30px 0 0; padding:0; display:flex; flex-direction:column; gap:2px; }
.fr-nav li{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  padding:14px 4px; border-top:1px solid rgba(255,255,255,.1); cursor:pointer;
  opacity:.5; transition:opacity .4s var(--sm-ease);
}
.fr-nav li:last-child{ border-bottom:1px solid rgba(255,255,255,.1); }
.fr-nav .fn-n{ font-family:var(--mono); font-size:12px; font-weight:700; letter-spacing:.06em; color:#8E867D; }
.fr-nav .fn-t{ font-size:16px; font-weight:600; letter-spacing:-.015em; color:#C9C4BD; line-height:1.2; }
.fr-nav .fn-r{ font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.07em; text-transform:uppercase;
  color:#8E867D; border:1px solid rgba(255,255,255,.16); border-radius:980px; padding:3px 9px; white-space:nowrap; }
.fr-nav li.active{ opacity:1; }
.fr-nav li.active .fn-n{ color:var(--accent,#F0934A); }
.fr-nav li.active .fn-t{ color:#fff; }
.fr-nav li.active .fn-r{ color:#1A1714; background:#F0934A; border-color:#F0934A; }

/* pinned + dimmed active behaviour — desktop only, gated on body.sm-pin */
@media(min-width:921px){
  body.sm-pin .fr-sticky{ position:sticky; top:84px; }
  body.sm-pin .fr-scrolly .fcard{
    opacity:.4;
    transition:opacity .55s var(--sm-ease), box-shadow .55s var(--sm-ease), border-color .55s var(--sm-ease);
  }
  body.sm-pin .fr-scrolly .fcard.sm-active{
    opacity:1; border-color:rgba(240,147,74,.55);
    box-shadow:0 32px 74px -36px rgba(0,0,0,.75);
  }
}
@media(max-width:920px){
  .fr-scrolly{ grid-template-columns:1fr; gap:30px; }
  .fr-nav{ display:none; }
}

/* ============================================================
   TIMELINE — drawn rail
   ============================================================ */
.ctl[data-sm-rail]{ position:relative; }
.ctl[data-sm-rail]::before{
  content:""; position:absolute; left:-3px; top:0; bottom:0; width:3px; border-radius:3px;
  background:var(--line,#E6E1DA);
}
.ctl[data-sm-rail] .sm-rail-fill{
  position:absolute; left:-3px; top:0; width:3px; height:100%; border-radius:3px;
  background:linear-gradient(var(--accent,#E8763A),var(--accent-d,#C25A22));
  box-shadow:0 0 12px -1px var(--accent,#E8763A), 0 0 3px var(--accent,#E8763A);
  transform:scaleY(var(--sm-tl,0)); transform-origin:top; transition:transform .12s linear;
}
/* glowing head that travels down the rail with the fill */
.ctl[data-sm-rail] .sm-rail-fill::after{
  content:""; position:absolute; left:50%; bottom:0; width:13px; height:13px; border-radius:50%;
  transform:translate(-50%,50%) scaleY(calc(1 / max(var(--sm-tl,.001),.04)));
  background:radial-gradient(circle, #FFD2A6 0%, var(--accent,#E8763A) 55%, rgba(232,118,58,0) 72%);
  box-shadow:0 0 16px 2px var(--accent,#E8763A);
}
@media(max-width:600px){ .ctl[data-sm-rail]::before,.ctl[data-sm-rail] .sm-rail-fill{ display:none; } }

/* ============================================================
   LIGHT HOVER LIFTS — cards & images only
   ============================================================ */
@media(hover:hover){
  body:not(.move-mode) .fcard,
  body:not(.move-mode) .signal,
  body:not(.move-mode) .callout,
  body:not(.move-mode) .note,
  body:not(.move-mode) .conf,
  body:not(.move-mode) .tile{
    transition:transform .32s var(--sm-ease), box-shadow .32s var(--sm-ease), border-color .32s var(--sm-ease);
  }
  body:not(.move-mode) .signal:hover,
  body:not(.move-mode) .callout:hover,
  body:not(.move-mode) .note:hover,
  body:not(.move-mode) .conf:hover{
    transform:translateY(-4px);
    box-shadow:0 24px 54px -30px rgba(60,40,15,.5);
  }
  body:not(.move-mode) .tile:hover{ transform:translateY(-4px); box-shadow:0 28px 64px -34px rgba(60,40,15,.5); }
  body:not(.move-mode) .fcard:hover{ transform:translateY(-4px); box-shadow:0 30px 70px -34px rgba(0,0,0,.7); }

  /* images */
  body:not(.move-mode) .hero-img .fr{ transition:transform .45s var(--sm-ease), box-shadow .45s var(--sm-ease); }
  body:not(.move-mode) .hero-img .fr:hover{ transform:translateY(-3px); box-shadow:0 40px 96px -44px rgba(60,40,15,.6); }
}

/* ============================================================
   TWEAKS PANEL (vanilla, host-protocol driven)
   ============================================================ */
#sm-panel{
  position:fixed; right:18px; top:50%; transform:translateY(-50%) translateX(12px);
  z-index:230; width:268px; max-width:calc(100vw - 28px);
  background:rgba(255,255,255,.9); backdrop-filter:blur(20px) saturate(1.6);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);
  border:1px solid var(--line,#E6E1DA); border-radius:18px;
  box-shadow:0 24px 64px -24px rgba(60,40,15,.5);
  padding:16px 16px 18px; opacity:0; pointer-events:none;
  transition:opacity .25s var(--sm-ease), transform .25s var(--sm-ease);
  font-family:var(--sans);
}
#sm-panel.open{ opacity:1; pointer-events:auto; transform:translateY(-50%) translateX(0); }
@media(max-width:640px){
  #sm-panel{ top:auto; bottom:14px; left:14px; right:14px; width:auto;
    transform:translateY(12px); }
  #sm-panel.open{ transform:translateY(0); }
}
#sm-panel .sm-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
#sm-panel .sm-title{ font-size:14px; font-weight:700; letter-spacing:-.01em; color:var(--ink,#1A1714); }
#sm-panel .sm-x{ width:26px; height:26px; border:0; border-radius:50%; cursor:pointer; font-size:18px; line-height:1;
  background:var(--gray,#F5F3F0); color:var(--ink-2,#6E6862); display:grid; place-items:center; }
#sm-panel .sm-x:hover{ background:var(--line,#E6E1DA); }
#sm-panel .sm-sec{ font-family:var(--mono); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-3,#9A938B); margin:14px 0 8px; }
#sm-panel .sm-sec:first-of-type{ margin-top:2px; }

/* segmented radio */
#sm-panel .sm-seg{ display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:3px;
  background:var(--gray,#F5F3F0); border-radius:11px; padding:3px; }
#sm-panel .sm-seg button{ font:inherit; font-size:12px; font-weight:600; cursor:pointer; border:0; border-radius:8px;
  padding:8px 4px; color:var(--ink-2,#6E6862); background:transparent; transition:background .18s,color .18s; }
#sm-panel .sm-seg button.on{ background:#fff; color:var(--accent-d,#C25A22); box-shadow:0 1px 4px rgba(60,40,15,.12); }

/* toggle row */
#sm-panel .sm-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:9px 0;
  border-top:1px solid var(--line,#E6E1DA); }
#sm-panel .sm-row:first-of-type{ border-top:0; }
#sm-panel .sm-row .lbl{ font-size:13.5px; font-weight:500; color:var(--ink,#1A1714); letter-spacing:-.01em; }
#sm-panel .sm-sw{ flex:none; width:42px; height:25px; border-radius:980px; border:0; cursor:pointer; position:relative;
  background:var(--line,#E6E1DA); transition:background .2s; }
#sm-panel .sm-sw::after{ content:""; position:absolute; top:3px; left:3px; width:19px; height:19px; border-radius:50%;
  background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .2s var(--sm-ease); }
#sm-panel .sm-sw.on{ background:var(--accent,#E8763A); }
#sm-panel .sm-sw.on::after{ transform:translateX(17px); }
#sm-panel .sm-row.dim{ opacity:.42; pointer-events:none; }
#sm-panel .sm-note{ font-size:11.5px; line-height:1.45; color:var(--ink-3,#9A938B); margin:12px 2px 0; letter-spacing:-.005em; }

/* reduced motion: strip transitions/entrance offsets entirely */
@media(prefers-reduced-motion:reduce){
  body.sm-on [data-sm-item]{ opacity:1 !important; transform:none !important; transition:none !important; }
  body.sm-on .spectrum[data-sm-draw]{ transform:none !important; }
  #sm-progress{ display:none; }
}