/* Top Chase Group – shared tokens + components for homepage concepts */
:root{
  --navy:#0A1128; --navy-2:#111B3B; --navy-3:#1A2750;
  --white:#F8F8F8; --paper:#F1EEE6; --ink:#0A1128;
  --accent:#F9533C; --muted:#9AA3C0; --line:rgba(248,248,248,.14);
  --ease:cubic-bezier(.22,1,.36,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --display:'Archivo',system-ui,sans-serif; --body:'Inter Tight',system-ui,sans-serif; --mono:'JetBrains Mono',ui-monospace,monospace; --serif:'Instrument Serif',Georgia,serif;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--navy);color:var(--white);font:400 1.125rem/1.55 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--white);outline-offset:3px;box-shadow:0 0 0 6px var(--accent)}
.skip{position:fixed;left:12px;top:-60px;z-index:200;background:var(--white);color:var(--ink);padding:.7rem 1rem;font-weight:700}
.skip:focus{top:12px}
.mono{font:500 .75rem/1.4 var(--mono);letter-spacing:.12em;text-transform:uppercase}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mega{font-family:var(--display);font-stretch:62%;font-weight:900;text-transform:uppercase;letter-spacing:-.015em;line-height:.8;margin:0}
.serif{font-family:var(--serif);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}

/* logo crop: shows only the mark's content box of logo.png */
.logo{position:relative;aspect-ratio:967/560;overflow:hidden;display:block}
.logo img{position:absolute;width:103.41%;height:auto;left:-1.55%;top:-16.79%;max-width:none}

/* reveals */
[data-r]{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
[data-r].in{opacity:1;transform:none}
.line{display:block;overflow:hidden;padding-bottom:.04em}
.line>span{display:block;transform:translateY(112%);transition:transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.line.in>span{transform:none}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.7rem;padding:1.05rem 1.6rem;border:1.5px solid var(--white);border-radius:999px;font:600 0.875rem/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:transparent;color:var(--white);cursor:pointer;position:relative;overflow:hidden;transition:color .4s var(--ease),border-color .4s}
.btn::before{content:"";position:absolute;inset:0;background:var(--white);transform:translateY(101%);transition:transform .5s var(--ease);z-index:-1}
.btn{isolation:isolate}
.btn:hover{color:var(--ink)}.btn:hover::before{transform:none}
.btn.solid{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.btn.solid::before{background:var(--white)}
.btn svg{width:14px;height:14px;transition:transform .4s var(--ease)}
.btn:hover svg{transform:translateX(4px)}

/* cursor */
.cur,.ring{position:fixed;left:0;top:0;pointer-events:none;z-index:300;mix-blend-mode:difference}
.cur{width:8px;height:8px;margin:-4px;border-radius:50%;background:#fff}
.ring{width:44px;height:44px;margin:-22px;border-radius:50%;border:1.5px solid #fff;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease)}
.ring.hot{width:84px;height:84px;margin:-42px}
@media (pointer:coarse){.cur,.ring{display:none}}

/* marquee */
.marq{overflow:hidden;white-space:nowrap;display:flex;user-select:none}
.marq>div{display:flex;flex:none;animation:marq var(--t,38s) linear infinite;padding-right:var(--gap,3rem);gap:var(--gap,3rem);align-items:center}
@keyframes marq{to{transform:translateX(-100%)}}

/* ---- 3D box (built by shared.js) ---- */
.scene{perspective:1400px;display:inline-block}
.box{position:relative;width:var(--w);height:var(--h);transform-style:preserve-3d;transform:rotateX(-12deg) rotateY(-28deg)}
.box>i{position:absolute;display:block;backface-visibility:hidden;font-style:normal;overflow:hidden}
.box .f{inset:0;transform:translateZ(calc(var(--d)/2));background:linear-gradient(158deg,var(--c1),var(--c2))}
.box .b{inset:0;transform:rotateY(180deg) translateZ(calc(var(--d)/2));background:var(--c2)}
.box .r,.box .l{width:var(--d);height:var(--h);top:0;left:50%;margin-left:calc(var(--d)/-2);background:linear-gradient(90deg,var(--c2),color-mix(in srgb,var(--c2) 70%,#000))}
.box .r{transform:rotateY(90deg) translateZ(calc(var(--w)/2))}
.box .l{transform:rotateY(-90deg) translateZ(calc(var(--w)/2));filter:brightness(.8)}
.box .t,.box .bt{width:var(--w);height:var(--d);left:0;top:50%;margin-top:calc(var(--d)/-2)}
.box .t{transform:rotateX(90deg) translateZ(calc(var(--h)/2));background:color-mix(in srgb,var(--c1) 80%,#fff)}
.box .bt{transform:rotateX(-90deg) translateZ(calc(var(--h)/2));background:#000}
.box .f::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 38%,rgba(255,255,255,.26) 50%,transparent 62%),repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 2px,transparent 2px 5px)}
.box .art{position:absolute;inset:7% 8%;display:flex;flex-direction:column;justify-content:space-between;color:var(--ink)}
.box .art b{font:900 calc(var(--w)*.2)/.82 var(--display);font-stretch:62%;text-transform:uppercase;letter-spacing:-.01em;display:block}
.box .art small{font:600 calc(var(--w)*.05)/1.2 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.box .art .bar{height:calc(var(--w)*.035);background:currentColor;opacity:.9}
.box.dk .art{color:var(--white)}
.shadow{position:absolute;left:8%;right:8%;bottom:-8%;height:10%;background:radial-gradient(closest-side,rgba(0,0,0,.55),transparent);filter:blur(6px);transform:translateZ(-1px)}

@media (prefers-reduced-motion:reduce){
  html:not(.motion-on) [data-r],html:not(.motion-on) .line>span{opacity:1;transform:none;transition:none}
  html:not(.motion-on) .marq>div{animation:none}
  html:not(.motion-on) .cur,html:not(.motion-on) .ring{display:none}
}
