/* UnBanned — "wow" layer: report ticker, category cards, buttons, steps.
   One palette + motion system. Animates only transform, opacity, background-position. */
:root {
  --w-red:#a4122a; --w-orange:#b0420a; --w-gold:#7d5a00; --w-green:#0d6842; --w-purple:#5f1fb0; --w-teal:#0a6f76;
  --w-ink:#17130f; --w-white:#fffdf8;
  --wow-grad:linear-gradient(100deg,var(--w-red),var(--w-orange),var(--w-gold),var(--w-green),var(--w-purple),var(--w-red));
  --wow-glow:rgba(176,66,10,.55);
  --wow-radius:18px; --wow-pill:999px;
  --wow-ease:cubic-bezier(.2,.8,.2,1);
  --wow-fast:220ms; --wow-med:600ms; --wow-slow:24s;
}
.sr-only { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }

@keyframes wow-shift { to { background-position:300% 50%; } }
@keyframes wow-marquee { to { transform:translateX(-50%); } }
@keyframes wow-pulse { 0%,100% { opacity:.25; } 50% { opacity:.6; } }
@keyframes wow-shine { 0%,70% { transform:translateX(-140%) skewX(-18deg); } 100% { transform:translateX(340%) skewX(-18deg); } }

/* ---------- entrance ---------- */
.wow-ready .wow-reveal { opacity:0; transform:translateY(26px); transition:opacity var(--wow-med) var(--wow-ease),transform var(--wow-med) var(--wow-ease); transition-delay:calc(var(--i,0)*110ms); }
.wow-ready .wow-reveal.in { opacity:1; transform:none; }

/* ---------- button family ---------- */
.wow-btn { position:relative; isolation:isolate; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:12px 24px; border:2px solid transparent; border-radius:var(--wow-pill); color:var(--w-ink); font:700 .86rem/1.3 var(--sans); letter-spacing:.01em; text-align:center; cursor:pointer;
  background:linear-gradient(var(--w-white),var(--w-white)) padding-box,var(--wow-grad) border-box; background-size:100% 100%,300% 100%;
  transition:transform var(--wow-fast) var(--wow-ease); }
.wow-btn::before { content:''; position:absolute; inset:-3px; z-index:-1; border-radius:inherit; background:var(--wow-grad); background-size:300% 100%; filter:blur(12px); opacity:.3; transition:opacity var(--wow-fast); }
.wow-btn .arr { display:inline-block; transition:transform var(--wow-fast) var(--wow-ease); }
.wow-btn:hover,.wow-btn:focus-visible { transform:translateY(-3px); background-position:0 0,100% 50%; }
.wow-btn:hover::before,.wow-btn:focus-visible::before { opacity:.75; }
.wow-btn:hover .arr,.wow-btn:focus-visible .arr { transform:translate(4px,-1px); }
.wow-btn:focus-visible { outline:3px solid var(--w-ink); outline-offset:4px; }
.wow-btn:active { transform:translateY(-1px); }
.wow-btn--fill { color:#fff; background:var(--wow-grad) border-box; background-size:300% 100%; animation:wow-shift var(--wow-slow) linear infinite; }
.wow-btn--fill:hover,.wow-btn--fill:focus-visible { background-position:0 0; }

/* ---------- 1. report ticker ---------- */
.report { padding:0 0 28px; background:var(--cream); }
.report-ticker { position:relative; padding:14px 0 18px; color:#fff; background:var(--wow-grad); background-size:300% 100%; animation:wow-shift var(--wow-slow) linear infinite; overflow:hidden; }
.report-label-row { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:0 var(--page-inset) 6px; }
.report-label { font:700 .7rem/1.6 var(--sans); letter-spacing:.15em; text-transform:uppercase; color:#fff; }
.tk-toggle { min-height:36px; padding:4px 14px; border:2px solid #fff; border-radius:var(--wow-pill); background:rgba(0,0,0,.28); color:#fff; font:700 .72rem/1.2 var(--sans); cursor:pointer; }
.tk-toggle:hover { background:rgba(0,0,0,.5); }
.tk-toggle:focus-visible { outline:3px solid #fff; outline-offset:3px; }
.tk-toggle .tk-play,.tk-toggle[aria-pressed="true"] .tk-pause { display:none; }
.tk-toggle[aria-pressed="true"] .tk-play { display:inline; }
.tk-static { display:none; padding:8px var(--page-inset) 0; font:600 1.2rem/1.4 var(--sans); color:#fff; }
.tk-viewport { overflow:hidden; }
.tk-track { display:flex; width:max-content; will-change:transform; animation:wow-marquee 36s linear infinite; }
.tk-half { display:flex; flex-shrink:0; }
.tk-item { display:inline-flex; align-items:center; gap:18px; padding-right:28px; white-space:nowrap; }
.tk-text { font:600 1.05rem/1.2 var(--sans); }
.tk-num { font:800 clamp(3.4rem,8vw,6.5rem)/1 var(--sans); letter-spacing:-.04em; color:#fff; text-shadow:0 3px 0 rgba(0,0,0,.28); }
.tk-sep { flex-shrink:0; opacity:.9; margin-left:10px; }
.report:hover .tk-track,.report:focus-within .tk-track,.tk-paused .tk-track { animation-play-state:paused; }
.report-links { display:flex; flex-wrap:wrap; gap:14px 16px; padding:26px var(--page-inset) 0; }

/* ---------- 2. category cards ---------- */
.cat-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; margin-top:48px; border:0; perspective:1100px; }
.category-links.cat-grid a { padding:0 22px 24px; border:0; font:inherit; }
.category-links.cat-grid a:hover { color:var(--fg); }
.cat-card { --c1:var(--w-red); --c2:#d3321f; --fg:#fff; --dx:44px; --rot:8deg; --lift:0px; --front-rx:0deg; --front-ry:0deg;
  position:relative; isolation:isolate; display:flex; flex-direction:column; justify-content:flex-end; min-height:370px; padding:0 22px 24px; color:var(--fg); border-radius:var(--wow-radius); text-decoration:none; transform:translateY(var(--lift)); transition:transform var(--wow-med) var(--wow-ease),opacity var(--wow-med) var(--wow-ease); }
.cat-adult { --c1:#8e0f24; --c2:#d12b2b; }
.cat-teen { --c1:#4d12b8; --c2:#8a2be2; }
.cat-mg { --c1:#075f66; --c2:#0b8a8f; --c2:#0a7a80; }
.cat-pb { --c1:#ffb21f; --c2:#f26b0f; --fg:var(--w-ink); }
.cat-bg { position:absolute; inset:0; z-index:-2; border-radius:inherit; overflow:hidden; background:linear-gradient(115deg,var(--c1),var(--c2),var(--c1)); background-size:300% 100%; animation:wow-shift calc(var(--wow-slow)*.8) linear infinite; }
.cat-bg::after { content:''; position:absolute; top:0; bottom:0; left:0; width:35%; background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent); animation:wow-shine 8s ease-in-out infinite; animation-delay:calc(var(--i,0)*1.6s); }
.cat-card::before { content:''; position:absolute; inset:6px; z-index:-3; border-radius:inherit; background:linear-gradient(115deg,var(--c1),var(--c2)); filter:blur(22px); opacity:.35; animation:wow-pulse 5s ease-in-out infinite; animation-delay:calc(var(--i,0)*1.2s); }
.cat-stack { position:relative; height:230px; margin:0 -22px; transform-style:preserve-3d; }
.cat-stack img { position:absolute; bottom:12px; left:50%; width:118px; height:auto; margin-left:-59px; border-radius:4px; background:#fff; box-shadow:0 10px 24px rgba(0,0,0,.4); transition:transform var(--wow-med) var(--wow-ease); transform-origin:50% 100%; }
.cat-stack .cat-c1 { z-index:3; width:132px; margin-left:-66px; transform:rotateY(var(--front-ry)) rotateX(var(--front-rx)); }
.cat-stack .cat-c2 { z-index:2; filter:brightness(.8); transform:translateX(calc(var(--dx)*-1)) rotate(calc(var(--rot)*-1)) scale(.9); }
.cat-stack .cat-c3 { z-index:1; filter:brightness(.7); transform:translateX(var(--dx)) rotate(var(--rot)) scale(.84); }
.cat-name { font:700 clamp(1.7rem,2.4vw,2.3rem)/1.1 var(--serif); letter-spacing:-.03em; }
.cat-count { margin-top:8px; font:600 .84rem/1.4 var(--sans); }
.cat-arrow { position:absolute; top:16px; right:16px; display:grid; place-items:center; width:42px; height:42px; border-radius:50%; background:rgba(255,255,255,.92); color:var(--w-ink); font:700 1.1rem/1 var(--sans); transition:transform var(--wow-fast) var(--wow-ease); }
.cat-card:hover,.cat-card:focus-visible,.cat-card.in-view-touch { --lift:-10px; --dx:78px; --rot:15deg; --front-ry:-9deg; --front-rx:5deg; }
.cat-card:hover::before,.cat-card:focus-visible::before { opacity:.7; animation:none; }
.cat-card:hover .cat-arrow,.cat-card:focus-visible .cat-arrow { transform:translate(4px,-4px); }
.cat-card:focus-visible { outline:3px solid var(--w-ink); outline-offset:5px; }
.wow-ready .cat-card.wow-reveal { transform:translateY(calc(var(--lift) + 26px)); }
.wow-ready .cat-card.wow-reveal.in { transform:translateY(var(--lift)); }
.cat-card.in-view-touch { --dx:56px; --rot:10deg; --front-ry:-5deg; --front-rx:3deg; --lift:-4px; }

@media(max-width:1100px) { .cat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:600px) {
  .cat-grid { display:flex; gap:16px; margin-right:calc(var(--gutter)*-1); padding:14px var(--gutter) 22px 0; overflow-x:auto; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; }
  .cat-card { flex:0 0 74%; scroll-snap-align:start; min-height:350px; }
  .tk-num { font-size:3.6rem; }
}

/* ---------- 3. ACLU / Bookshop ---------- */
.wow-actions { display:flex; flex-wrap:wrap; gap:16px; margin-top:28px; }

/* ---------- 5. steps ---------- */
.how-grid { gap:28px; border-top:0; counter-reset:step; }
.how .how-card,.how .how-card+.how-card { position:relative; padding:34px 30px 32px; border:0; border-radius:var(--wow-radius); background:var(--w-white); box-shadow:0 1px 0 rgba(0,0,0,.06),0 16px 36px -22px rgba(0,0,0,.45); overflow:visible; }
.how-card::before { content:''; position:absolute; left:0; right:0; top:0; height:7px; border-radius:var(--wow-radius) var(--wow-radius) 0 0; background:linear-gradient(90deg,var(--sc1),var(--sc2)); }
.step-1 { --sc1:#4d12b8; --sc2:#8a2be2; }
.step-2 { --sc1:#075f66; --sc2:#0b8a8f; --sc2:#0a7a80; }
.step-3 { --sc1:#a4122a; --sc2:#b0420a; }
.how .step-n { font:800 clamp(4.5rem,7vw,6.5rem)/1 var(--sans); letter-spacing:-.05em; margin-bottom:16px; color:var(--w-red); background:var(--wow-grad); background-size:300% 100%; -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; animation:wow-shift var(--wow-slow) linear infinite; }
.how .step-body { color:#4a443b; }
.how .how-cta { align-self:flex-start; margin-top:auto; }
.wow-btn--step { color:#fff; border-color:transparent; background:linear-gradient(100deg,var(--sc1),var(--sc2),var(--sc1)) border-box; background-size:300% 100%; }
.wow-btn--step::before { background:linear-gradient(100deg,var(--sc1),var(--sc2)); }
.wow-btn--step:hover,.wow-btn--step:focus-visible { color:#fff; background-position:100% 50%; }
.wow-btn--ghost { --sc1:var(--w-ink); --sc2:var(--w-ink); }
.step-actions { display:flex; flex-wrap:wrap; gap:12px; margin-top:auto; }
.how .step-actions .how-cta { margin-top:0; }
.how .share-msg { margin-top:10px; min-height:1.2em; }
/* flow connector (desktop) */
@media(min-width:961px) {
  .how-card:not(:last-child)::after { content:''; position:absolute; z-index:2; top:62px; left:100%; width:28px; height:3px; background:linear-gradient(90deg,var(--sc2),var(--sc1)); }
  .how-card:not(:last-child) .step-title::after { content:'▸'; position:absolute; top:51px; right:-20px; z-index:3; color:var(--w-ink); font-size:1.3rem; line-height:1; }
}
@media(max-width:960px) { .how-grid { gap:20px; } .how .how-card,.how .how-card+.how-card { padding:30px 24px; } }

/* ---------- toast ---------- */
.toast { position:fixed; left:50%; bottom:28px; z-index:1200; padding:12px 22px; border-radius:var(--wow-pill); background:var(--w-ink); color:#fff; font:700 .9rem/1.3 var(--sans); opacity:0; pointer-events:none; transform:translate(-50%,18px); transition:opacity var(--wow-fast),transform var(--wow-fast) var(--wow-ease); }
.toast.show { opacity:1; transform:translate(-50%,0); }

/* ---------- reduced motion: calm, static, colourful ---------- */
@media(prefers-reduced-motion:reduce) {
  .report-ticker,.tk-track,.cat-bg,.cat-bg::after,.cat-card::before,.how .step-n,.wow-btn--fill { animation:none!important; }
  .wow-ready .wow-reveal,.wow-ready .cat-card.wow-reveal { opacity:1; transform:none; transition:none; }
  .tk-viewport,.tk-toggle { display:none; }
  .tk-static { display:block; }
  .tk-static .tk-num { font-size:clamp(2.6rem,9vw,4.5rem); vertical-align:-.08em; }
  .cat-bg::after { display:none; }
  .cat-card,.cat-card:hover,.cat-card:focus-visible,.cat-card.in-view-touch { --lift:0px; --front-rx:0deg; --front-ry:0deg; --dx:50px; --rot:9deg; transform:none; transition:none; }
  .wow-btn,.wow-btn:hover,.wow-btn:focus-visible { transform:none; transition:none; }
  .wow-btn .arr,.cat-arrow { transition:none; transform:none!important; }
  .cat-stack img { transition:none; }
  .cat-grid { scroll-behavior:auto; }
}