/* ==========================================================================
   Global Blueprint — shared tokens, components and motion.
   Load-time animations (.js, set inline in <head>) always finish visible.
   Scroll reveals hide content only under .gb, which gb.js sets itself — so if
   gb.js never loads, nothing stays hidden. Reduced motion shows final states.
   ========================================================================== */
:root{--navy:#070f1c;--navy2:#0e1e36;--navy3:#1a3358;--paper:#f5f2eb;--ink:#14233a;--slate:#5c6b81;
  --gold:#d4a02a;--gold2:#b07d0d;--goldlt:#f0c95f;--line:#e6e1d6;--ok:#2e6b3c;
  --ease:cubic-bezier(.2,.75,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}

/* ---------- gold button with a travelling sheen ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn.gold::after{content:"";position:absolute;inset:-2px auto -2px -60%;width:45%;z-index:-1;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);
  animation:sheen 4.2s var(--ease) 1.6s infinite}
@keyframes sheen{0%{left:-60%}28%,100%{left:130%}}
.btn.gold:active{transform:translateY(1px) scale(.99)}

/* ---------- headline lines rising out of a mask ---------- */
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln > span{display:block}
.js .ln > span{transform:translateY(105%);animation:lineUp .9s var(--ease) forwards;animation-delay:calc(.15s + var(--i,0) * .14s)}
@keyframes lineUp{to{transform:none}}

/* ---------- generic admission (page load) ---------- */
.js [data-in]{opacity:0;transform:translateY(18px);animation:admit .8s var(--ease) forwards;animation-delay:var(--d,.3s)}
@keyframes admit{to{opacity:1;transform:none}}

/* ---------- scroll reveals ---------- */
.gb [data-reveal]{opacity:0;transform:translateY(28px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0s)}
.gb [data-reveal="left"]{transform:translateX(-24px)}
.gb [data-reveal="zoom"]{transform:scale(.94)}
.gb [data-reveal].on{opacity:1;transform:none}

/* ---------- blueprint grid that draws itself behind navy panels ---------- */
.grid-bg{position:relative;isolation:isolate}
.grid-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(rgba(240,201,95,.07) 1px,transparent 1px) 0 0/100% 32px,
  linear-gradient(90deg,rgba(240,201,95,.07) 1px,transparent 1px) 0 0/32px 100%;
  -webkit-mask-image:radial-gradient(120% 90% at 80% 10%,#000 30%,transparent 85%);mask-image:radial-gradient(120% 90% at 80% 10%,#000 30%,transparent 85%)}
.js .grid-bg::before{opacity:0;animation:gridIn 1.6s ease .1s forwards}
@keyframes gridIn{to{opacity:1}}
/* one gold scan line that sweeps the panel once on load */
.scan{position:absolute;left:0;right:0;top:0;height:2px;z-index:0;pointer-events:none;opacity:0;
  background:linear-gradient(90deg,transparent,rgba(240,201,95,.9),transparent);box-shadow:0 0 18px rgba(240,201,95,.6)}
.js .scan{animation:scan 2.2s var(--ease) .35s 1 forwards}
@keyframes scan{0%{opacity:0;transform:translateY(0)}12%{opacity:1}100%{opacity:0;transform:translateY(var(--scan-h,520px))}}
/* slow ambient glow */
.glow{position:absolute;z-index:-1;width:520px;height:520px;border-radius:50%;pointer-events:none;filter:blur(10px);
  background:radial-gradient(circle,rgba(240,201,95,.16),transparent 62%);animation:drift 14s ease-in-out infinite alternate}
@keyframes drift{from{transform:translate(0,0)}to{transform:translate(-60px,40px)}}

/* ---------- 3D book ---------- */
.book{perspective:1400px;display:inline-block}
.book .b{position:relative;display:block;transform-style:preserve-3d;transform:rotateY(-24deg) rotateX(5deg);border-radius:3px 7px 7px 3px;
  box-shadow:22px 26px 44px rgba(0,0,0,.45),6px 6px 14px rgba(0,0,0,.25)}
.book img{display:block;width:100%;height:auto;border-radius:3px 7px 7px 3px}
.book .b::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.45) 0,rgba(255,255,255,.18) 2.5%,rgba(0,0,0,.12) 5%,transparent 9%,transparent 78%,rgba(255,255,255,.1) 100%)}
.book .b::after{content:"";position:absolute;top:2%;bottom:2%;right:-9px;width:10px;border-radius:0 3px 3px 0;
  background:repeating-linear-gradient(0deg,#f4efe3 0 2px,#ddd5c3 2px 3px);transform:rotateY(60deg);transform-origin:left}
.js .book .b{opacity:0;animation:bookIn 1.3s var(--ease) var(--d,.45s) forwards,float 7s ease-in-out calc(var(--d,.45s) + 1.3s) infinite}
@keyframes bookIn{from{opacity:0;transform:translateY(40px) rotateY(0) rotateX(0) scale(.92)}to{opacity:1;transform:rotateY(-24deg) rotateX(5deg)}}
@keyframes float{0%,100%{transform:rotateY(-24deg) rotateX(5deg) translateY(0)}50%{transform:rotateY(-20deg) rotateX(4deg) translateY(-8px)}}

/* ---------- animated check mark (payment received) ---------- */
.tick{width:56px;height:56px;border-radius:50%;background:rgba(240,201,95,.12);border:1.5px solid rgba(240,201,95,.5);display:grid;place-items:center}
.tick svg{width:28px;height:28px}
.tick path{fill:none;stroke:var(--goldlt);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:40;stroke-dashoffset:0}
.js .tick{animation:pop .6s var(--spring) .15s both}
.js .tick path{stroke-dashoffset:40;animation:draw .6s var(--ease) .55s forwards}
@keyframes pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
@keyframes draw{to{stroke-dashoffset:0}}

/* ---------- stepper ---------- */
.steps{list-style:none;display:flex;gap:0;counter-reset:st;margin:0 0 22px;padding:0}
.steps li{flex:1;position:relative;font-size:12.5px;font-weight:700;color:#8a97a8;text-align:center;padding-top:30px;letter-spacing:.02em}
.steps li::before{counter-increment:st;content:counter(st);position:absolute;top:0;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;background:#fff;border:1.5px solid var(--line);color:#8a97a8;z-index:1;transition:all .4s var(--ease)}
.steps li::after{content:"";position:absolute;top:11px;left:calc(50% + 14px);right:calc(-50% + 14px);height:2px;background:var(--line)}
.steps li:last-child::after{display:none}
.steps li .fill{position:absolute;top:11px;left:calc(50% + 14px);right:calc(-50% + 14px);height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease);z-index:0}
.steps li.done::before{content:"✓";background:var(--gold);border-color:var(--gold);color:#fff}
.steps li.done .fill{transform:scaleX(1)}
.steps li.now{color:var(--ink)}
.steps li.now::before{border-color:var(--gold);color:var(--gold2);box-shadow:0 0 0 5px rgba(212,160,42,.15)}

/* ---------- skeleton shimmer ---------- */
.skel{border-radius:16px;background:linear-gradient(100deg,#ece7dc 30%,#f7f4ee 50%,#ece7dc 70%) 0 0/300% 100%;animation:skel 1.4s linear infinite}
@keyframes skel{to{background-position:-150% 0}}

/* ---------- sticky bar that slides up ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:40;background:rgba(245,242,235,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:10px 16px calc(12px + env(safe-area-inset-bottom));transform:translateY(110%);transition:transform .5s var(--ease)}
.dock.show{transform:none}

@media (prefers-reduced-motion:reduce){
  .js .ln > span,.js [data-in],.gb [data-reveal],.js .book .b,.js .tick,.js .tick path,.js .grid-bg::before{opacity:1!important;transform:none!important;animation:none!important;transition:none!important;stroke-dashoffset:0!important}
  .js .book .b{transform:rotateY(-24deg) rotateX(5deg)!important}
  .btn.gold::after,.scan,.glow,.skel{animation:none!important}
  .scan{display:none}
  .dock{transition:none}
}