/* The Founder's War — motion layer. Everything is gated on html.js (set inline in <head>)
   so the page is fully readable without JS. Reduced-motion and <900px switch it off,
   except the spine fill (driven in motion.js). */
:root{--ease:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,.8,.2,1)}

/* ---------- atmosphere ---------- */
.grain{position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.045;background-image:url(img/grain.png);background-size:160px 160px}
.vig{position:fixed;inset:0;pointer-events:none;z-index:9998;background:radial-gradient(130% 110% at 50% 40%,transparent 55%,rgba(0,0,0,.72))}
.rail{box-shadow:0 0 14px rgba(178,92,52,.6);transition:width .12s linear}

/* ---------- reveal on scroll ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .creed p.c.rv{filter:blur(8px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease),filter 1.2s var(--ease)}
.js .creed p.c.rv.in{filter:none}
.js .creed p.c em{background:linear-gradient(90deg,#D07242,#D07242) no-repeat 0 100%/0 1px;transition:background-size 1.4s .9s var(--ease)}
.js .creed p.c.in em{background-size:100% 1px}

/* ---------- hero entrance (landing) ---------- */
@keyframes rise{to{transform:none}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes bookIn{from{opacity:0;transform:rotateY(-70deg) rotateX(8deg) translateX(40px)}to{opacity:1}}
@keyframes pulse{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -10px}}
.js .kick,.js .lede,.js .by,.js .status,.js .ctas,.js .hint{opacity:0;animation:fadeUp .9s var(--ease) forwards}
.js .kick{animation-delay:.05s}
.js .lede{animation-delay:.4s}.js .by{animation-delay:.5s}.js .status{animation-delay:.58s}.js .ctas{animation-delay:.66s}.js .hint{animation-delay:1.2s}
.big .ln{display:block}
.js .big .ln{overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.js .big .ln i{display:inline-block;font-style:normal;transform:translateY(112%);animation:rise .9s var(--ease-out) forwards}
.js .big .ln:nth-child(1) i{animation-delay:.08s}.js .big .ln:nth-child(2) i{animation-delay:.18s}.js .big .ln:nth-child(3) i{animation-delay:.28s}
.big .ln em{font-style:italic}
.js .stage .book{animation:bookIn 1.1s .05s var(--ease-out) both;transition:transform .3s ease-out}
.js .stage{animation:floaty 9s 1.4s ease-in-out infinite}
.glow{animation:pulse 6s ease-in-out infinite;will-change:opacity}
.hint:after{animation:drop 1.8s ease-in-out infinite}
.hero{overflow:hidden}

/* sub-page headers */
.js header .h1{animation:fadeUp 1s .1s var(--ease) both}
.js header .eyebrow{display:inline-block;animation:fadeUp .8s var(--ease) both}
.js header .lead,.js header>p{animation:fadeUp 1s .35s var(--ease) both}

/* ---------- buttons, links ---------- */
.btn{position:relative;overflow:hidden;transition:background .28s,border-color .28s,color .28s,transform .28s var(--ease),box-shadow .28s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0)}
.btn-solid:hover{box-shadow:0 12px 32px -12px rgba(196,106,60,.7)}
.btn-ghost:hover{background:rgba(178,92,52,.08)}
.btn-solid::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.3) 50%,transparent 70%);transform:translateX(-130%);transition:transform .8s var(--ease)}
.btn-solid:hover::after{transform:translateX(130%)}
a.tl{position:relative}
a.tl::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:1px;background:#B25C34;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
a.tl:hover::after,a.tl.on::after{transform:scaleX(1)}
.topbar{transition:box-shadow .3s,border-color .3s}
.topbar.scrolled{box-shadow:0 10px 30px -18px rgba(0,0,0,.9);border-color:#2d251e}

/* ---------- six-act spine ---------- */
.spine-fill{height:0;will-change:height}
.node{transition:background .5s,box-shadow .5s,transform .5s var(--ease)}
.node.on{transform:translate(-50%,-50%) rotate(45deg) scale(1.25)}
.js .chaps li{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .cell.in .chaps li{opacity:.9;transform:none}
.js .cell .roman{display:inline-block;letter-spacing:.8em;transition:letter-spacing 1.2s var(--ease)}
.js .cell.in .roman{letter-spacing:.34em}
.pin .lbl{transition:color .5s}

/* ---------- cards ---------- */
.tier,.blurb,.card,.task{transition:transform .4s var(--ease),border-color .4s,box-shadow .4s,background .4s}
.tier:hover,.js .tier.rv.in:hover{transform:translateY(-6px);border-color:#D07242;box-shadow:0 24px 50px -28px rgba(178,92,52,.55)}
.blurb:hover,.js .blurb.rv.in:hover{transform:translateY(-4px);border-color:#3a322b}
.card:hover,.js .card.rv.in:hover{transform:translateY(-6px) rotate(-1deg);border-color:#B25C34}
.card.open{animation:openglow 3.6s ease-in-out infinite}
@keyframes openglow{0%,100%{box-shadow:0 0 0 rgba(178,92,52,0)}50%{box-shadow:0 0 34px rgba(178,92,52,.35)}}
.three .rule,.use .rule{transform-origin:left;transition:transform .9s .2s var(--ease)}
.js .rv .rule,.js .rule.rv{transform:scaleX(0)}
.js .rv.in .rule{transform:scaleX(1)}

/* ---------- warordle flip ---------- */
@keyframes flip{0%{transform:rotateX(90deg);opacity:0}100%{transform:none;opacity:1}}
.js .wd i{opacity:0}
.js .wd.in i{animation:flip .6s var(--ease-out) both}

/* ---------- audio player ---------- */
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(196,106,60,.55)}100%{box-shadow:0 0 0 16px rgba(196,106,60,0)}}
.play.playing,.pbtn.playing{animation:ring 1.6s ease-out infinite}
.bar i{transition:width .25s linear}
.play,.pbtn{transition:transform .3s var(--ease)}
.play:hover,.pbtn:hover{transform:scale(1.08)}

/* ---------- form fields ---------- */
.fld{transition:border-color .25s,box-shadow .25s}

/* ---------- off switches ---------- */
@media(max-width:900px){
  .js .kick,.js .lede,.js .by,.js .status,.js .ctas,.js .hint,.js header .h1,.js header .eyebrow,.js header .lead,.js header>p{animation:none;opacity:1;transform:none}
  .js .big .ln i{animation:none;transform:none}
  .js .stage,.js .stage .book,.glow{animation:none}
  .js .rv,.js .creed p.c.rv{opacity:1;transform:none;filter:none;transition:none}
  .js .chaps li{opacity:.9;transform:none;transition:none}
  .js .cell .roman{letter-spacing:.34em;transition:none}
  .js .wd i{opacity:1}.js .wd.in i{animation:none}
  .js .rv .rule,.js .rule.rv{transform:none}
  .btn:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
  .js .kick,.js .lede,.js .by,.js .status,.js .ctas,.js .hint,.js header .h1,.js header .eyebrow,.js header .lead,.js header>p{animation:none;opacity:1;transform:none}
  .js .big .ln i{animation:none;transform:none}
  .js .stage,.js .stage .book,.glow,.hint:after,.card.open,.play.playing,.pbtn.playing{animation:none}
  .js .rv,.js .creed p.c.rv{opacity:1;transform:none;filter:none;transition:none}
  .js .chaps li{opacity:.9;transform:none;transition:none}
  .js .cell .roman{letter-spacing:.34em;transition:none}
  .js .wd i{opacity:1}.js .wd.in i{animation:none}
  .js .rv .rule,.js .rule.rv{transform:none}
  .btn,.btn::after,.tier,.card,a.tl::after{transition:none}
  .rail{transition:none}
}