/* SIslopcore.ai - full-custom layer. Loaded after site.css + fx.css.
   Every element gets an interaction: buttons, popups, numerals, bands,
   paragraphs, lists, tiles, inputs, footer, HUD. */

/* =========================================================
   0. boot overlay
   ========================================================= */
.boot { position: fixed; inset: 0; z-index: 2000; background: #07090c; display: grid; place-items: center; font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); transition: opacity .5s, visibility .5s; }
.boot.off { opacity: 0; visibility: hidden; }
.boot-lines { width: min(520px, 90vw); }
.boot-lines div { opacity: 0; transform: translateX(-6px); animation: bootLine .25s forwards; display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px dashed var(--line); }
.boot-lines div b { color: var(--acc-2); font-weight: 600; }
@keyframes bootLine { to { opacity: 1; transform: none; } }
.boot-bar { height: 2px; background: var(--line); margin-top: 16px; position: relative; overflow: hidden; }
.boot-bar::after { content: ''; position: absolute; inset: 0; background: var(--acc); transform-origin: left; animation: bootBar 1.6s cubic-bezier(.2,.8,.2,1) forwards; }
@keyframes bootBar { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* =========================================================
   1. custom buttons (SVG border + charge fill + scramble text)
   ========================================================= */
.btn { background: transparent !important; border: 0 !important; color: var(--ink); padding: 14px 26px; overflow: visible; isolation: auto; }
.btn.ghost { color: var(--ink); }
.btn::before, .btn::after { display: none; }
.btn .btn-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.btn .btn-svg .frame { fill: none; stroke: var(--line); stroke-width: 1; vector-effect: non-scaling-stroke; transition: stroke .25s; }
.btn:not(.ghost) .btn-svg .frame { stroke: var(--acc); }
.btn .btn-svg .charge { fill: var(--acc); transform: scaleX(0); transform-origin: left; transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.btn:not(.ghost) .btn-svg .charge { transform: scaleX(1); }
.btn:not(.ghost):hover .btn-svg .charge { transform: scaleX(0); transform-origin: right; }
.btn.ghost:hover .btn-svg .charge { transform: scaleX(1); }
.btn .btn-svg .dash { fill: none; stroke: var(--acc-2); stroke-width: 1; stroke-dasharray: 6 10; stroke-dashoffset: 0; opacity: 0; transition: opacity .2s; vector-effect: non-scaling-stroke; }
.btn:hover .btn-svg .dash { opacity: 1; animation: dashRun 1.2s linear infinite; }
@keyframes dashRun { to { stroke-dashoffset: -32; } }
.btn .btn-svg .tick { stroke: var(--acc); stroke-width: 1.5; opacity: 0; transition: opacity .2s, transform .3s cubic-bezier(.2,.8,.2,1); }
.btn:hover .btn-svg .tick { opacity: 1; }
.btn .btn-svg .tick.l { transform: translateX(-6px); } .btn:hover .btn-svg .tick.l { transform: translateX(-12px); }
.btn .btn-svg .tick.r { transform: translateX(6px); } .btn:hover .btn-svg .tick.r { transform: translateX(12px); }
.btn .gl { position: relative; z-index: 1; color: var(--bg); transition: color .25s; display: inline-flex; }
.btn.ghost .gl { color: var(--ink); }
.btn:not(.ghost):hover .gl { color: var(--acc-2); }
.btn.ghost:hover .gl { color: var(--bg); }
.btn .gl .ch { display: inline-block; min-width: .3em; }
.btn .gl .ch.sc { color: var(--acc); }
.btn:hover .gl { animation: none; }
.btn-mini { position: relative; overflow: hidden; }
.btn-mini::after { content: ''; position: absolute; left: 0; bottom: 0; height: 100%; width: 100%; background: var(--acc); transform: translateY(100%); transition: transform .25s; z-index: -1; }
.btn-mini:hover { color: var(--bg); border-color: var(--acc); }
.btn-mini:hover::after { transform: translateY(0); }
.seg button { position: relative; overflow: hidden; }
.seg button::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,92,108,.25), transparent); transform: translateX(-100%); transition: transform .5s; }
.seg button:hover::before { transform: translateX(100%); }

/* =========================================================
   2. nav popups, custom per product
   ========================================================= */
.callout-box { width: min(420px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.callout-art { position: relative; height: 150px; background: #000 center/cover no-repeat; filter: saturate(.85); }
.callout-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, var(--panel) 100%); }
.callout-art .scanline { position: absolute; left: 0; right: 0; height: 1px; background: var(--acc); box-shadow: 0 0 12px var(--acc); animation: artScan 2.2s linear infinite; }
@keyframes artScan { from { top: 0; } to { top: 100%; } }
.callout-art .badge { position: absolute; right: 10px; top: 10px; font-size: 9px; letter-spacing: .2em; padding: 3px 7px; border: 1px solid var(--acc); color: var(--acc-2); background: rgba(7,9,12,.7); }
.callout-art .shape { position: absolute; left: 10px; bottom: 8px; width: 64px; height: 44px; }
.callout-art .shape * { vector-effect: non-scaling-stroke; }
.callout-body { padding: 12px 14px 14px; }
.callout-head { margin-bottom: 6px; }
.callout-stat { display: flex; gap: 14px; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.callout-stat b { color: var(--acc-2); font-weight: 600; }
/* per product accent */
.callout[data-view="generator"] .callout-box::before, .callout[data-view="generator"] .callout-box::after { border-color: #ff5c6c; }
.callout[data-view="story"] .callout-box::before, .callout[data-view="story"] .callout-box::after { border-color: #9fd7ff; }
.callout[data-view="reels"] .callout-box::before, .callout[data-view="reels"] .callout-box::after { border-color: #ffd36c; }
.callout[data-view="mcp"] .callout-box::before, .callout[data-view="mcp"] .callout-box::after { border-color: #c48dff; }
.callout[data-view="story"] .callout-line polyline, .callout[data-view="story"] .callout-line circle { stroke: #9fd7ff; fill: #9fd7ff; }
.callout[data-view="reels"] .callout-line polyline, .callout[data-view="reels"] .callout-line circle { stroke: #ffd36c; fill: #ffd36c; }
.callout[data-view="mcp"] .callout-line polyline, .callout[data-view="mcp"] .callout-line circle { stroke: #c48dff; fill: #c48dff; }
.callout .bot-mini { position: absolute; left: 10px; bottom: -6px; width: 74px; height: 74px; border-radius: 50%; border: 1px solid #c48dff; background: #000 center/cover; box-shadow: 0 0 18px rgba(196,141,255,.5); animation: botBob 2.4s ease-in-out infinite; }
@keyframes botBob { 50% { transform: translateY(-4px); } }

/* nav items: scramble + underline wipe */
.nav-item { overflow: visible; }
.nav-item .ul { position: absolute; left: 6px; right: 6px; bottom: 2px; height: 1px; background: var(--acc); transform: scaleX(0); transform-origin: right; transition: transform .3s cubic-bezier(.2,.8,.2,1); }
.nav-item:hover .ul, .nav-item.on .ul { transform: scaleX(1); transform-origin: left; }

/* =========================================================
   3. bands: SVG fields, video numerals, bot card
   ========================================================= */
.band { min-height: 86vh; }
.band .field-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.band.light .field-svg { opacity: .9; }
/* generator band: reticles + pixel rain */
.ret { fill: none; stroke: rgba(255,92,108,.55); stroke-width: 1; transform-origin: center; transform-box: fill-box; }
.ret.a { animation: retSpin 14s linear infinite; }
.ret.b { animation: retSpin 22s linear infinite reverse; }
@keyframes retSpin { to { transform: rotate(360deg); } }
.rain rect { fill: rgba(255,92,108,.35); animation: rainFall 6s linear infinite; }
@keyframes rainFall { from { transform: translateY(-120px); opacity: 0; } 10% { opacity: 1; } to { transform: translateY(100vh); opacity: 0; } }
/* story band: topographic contours + altitude ticks */
.topo path { fill: none; stroke: rgba(7,9,12,.35); stroke-width: 1; stroke-dasharray: 8 6; animation: topoDrift 30s linear infinite; }
.topo path:nth-child(even) { stroke: rgba(255,92,108,.45); animation-direction: reverse; }
@keyframes topoDrift { to { stroke-dashoffset: -400; } }
.alt-ticks line { stroke: rgba(7,9,12,.5); }
.alt-ticks text { font: 600 10px var(--mono); fill: rgba(7,9,12,.55); letter-spacing: .1em; }
.alt-ticks .pin { fill: var(--acc); animation: pinDrop 4s cubic-bezier(.2,.8,.2,1) infinite alternate; }
@keyframes pinDrop { from { transform: translateY(0); } to { transform: translateY(260px); } }
/* mcp band: node network + packets */
.net line { stroke: rgba(196,141,255,.28); stroke-width: 1; }
.net circle.node { fill: #07090c; stroke: rgba(196,141,255,.7); stroke-width: 1; }
.net circle.pk { fill: #ff5c6c; filter: drop-shadow(0 0 6px #ff5c6c); }
.net text { font: 600 10px var(--mono); fill: rgba(196,141,255,.8); letter-spacing: .15em; }
.net .pulse { fill: none; stroke: #c48dff; stroke-width: 1; animation: pulse402 2.4s ease-out infinite; transform-origin: center; transform-box: fill-box; }
@keyframes pulse402 { from { transform: scale(.3); opacity: 1; } to { transform: scale(2.4); opacity: 0; } }

/* numerals with AI video inside */
.numeral { position: relative; width: 100%; aspect-ratio: 1.2; }
.numeral .num-fill { position: absolute; inset: 0; -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat; }
.numeral .num-fill video { width: 100%; height: 100%; object-fit: cover; }
.numeral svg { position: relative; }
.numeral svg { width: 100%; height: 100%; overflow: visible; }
.numeral .num-stroke path { fill: none; stroke: var(--acc); stroke-width: 1.5; stroke-dasharray: 1200; stroke-dashoffset: 1200; vector-effect: non-scaling-stroke; }
.band.in .numeral .num-stroke path { animation: numDraw 2.2s cubic-bezier(.2,.8,.2,1) .2s forwards; }
@keyframes numDraw { to { stroke-dashoffset: 0; } }
.numeral video, .numeral img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.1) contrast(1.1); opacity: 0; transition: opacity 1.2s .6s; }
.band.in .numeral video, .band.in .numeral img { opacity: 1; }
.numeral:hover .num-stroke { animation: numGlitch .35s steps(2) 1; transform-box: fill-box; }
@keyframes numGlitch { 0% { transform: translate(3px, 0); stroke: #5ad7ff; } 50% { transform: translate(-3px, 1px); stroke: #ff5c6c; } 100% { transform: none; } }
.numeral .num-ghost path { fill: none; stroke: var(--ink-3); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .4; }
.band.light .numeral .num-ghost path { stroke: rgba(7,9,12,.3); }

/* bot character card (MCP) */
.bot-card { position: relative; width: min(100%, 340px); margin: 0 auto; aspect-ratio: 9/14; border: 1px solid rgba(196,141,255,.5); background: #000; overflow: hidden; transform-style: preserve-3d; transition: transform .2s; }
.bot-card video, .bot-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bot-card .holo { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 30%, rgba(196,141,255,.22) 48%, transparent 60%); background-size: 240% 100%; animation: holo 4s linear infinite; mix-blend-mode: screen; pointer-events: none; }
@keyframes holo { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.bot-card .lines { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px); pointer-events: none; }
.bot-card .tag { position: absolute; left: 10px; top: 10px; font-size: 9px; letter-spacing: .22em; padding: 3px 7px; border: 1px solid #c48dff; color: #e6d2ff; background: rgba(7,9,12,.7); }
.bot-card .bubble { position: absolute; left: 10px; right: 10px; bottom: 10px; padding: 10px 12px; background: rgba(7,9,12,.82); border: 1px solid rgba(196,141,255,.6); font-size: 11px; letter-spacing: .06em; color: #f3f5f7; min-height: 42px; }
.bot-card .bubble::before { content: 'SI-BOT // '; color: #c48dff; }
.bot-card .bubble .cur { animation: blink 1s steps(1) infinite; }
.bot-card:hover .holo { animation-duration: 1.2s; }
.bot-card .corner { position: absolute; width: 14px; height: 14px; border: 1px solid #c48dff; }
.bot-card .corner.tl { left: -1px; top: -1px; border-right: 0; border-bottom: 0; } .bot-card .corner.br { right: -1px; bottom: -1px; border-left: 0; border-top: 0; }

/* band side layout now: numeral + label + stats */
.band-side { gap: 10px; }
.band-side .lbl { margin-top: 4px; }

/* word-by-word reveal inside slides */
.slide p .w { display: inline-block; opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .4s; }
.band.in .slide p .w { opacity: 1; transform: none; }

/* =========================================================
   4. hover on everything
   ========================================================= */
/* paragraphs: sweep highlight + ink lift */
.hv-p { position: relative; transition: color .25s, letter-spacing .25s; }
.hv-p::before { content: ''; position: absolute; left: -10px; top: 0; bottom: 0; width: 2px; background: var(--acc); transform: scaleY(0); transform-origin: top; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
.hv-p:hover { color: var(--ink); }
.hv-p:hover::before { transform: scaleY(1); }
.hv-p:hover { background: linear-gradient(90deg, rgba(255,92,108,.12), transparent 60%); }
/* headings: slice glitch */
.hv-h { position: relative; display: inline-block; }
.hv-h:hover { animation: hGlitch .45s steps(3) 1; }
@keyframes hGlitch { 0% { clip-path: inset(0 0 55% 0); transform: translateX(3px); text-shadow: -2px 0 #ff5c6c; } 33% { clip-path: inset(45% 0 0 0); transform: translateX(-3px); text-shadow: 2px 0 #5ad7ff; } 66% { clip-path: inset(20% 0 30% 0); transform: translateX(1px); } 100% { clip-path: none; transform: none; text-shadow: none; } }
/* list items */
.hv-li { transition: letter-spacing .25s, color .25s, transform .25s; }
.hv-li:hover { color: var(--ink); letter-spacing: .12em; transform: translateX(6px); }
.hv-li:hover::before { color: #fff; text-shadow: 0 0 8px var(--acc); }
/* tiles: 3D tilt + spotlight (JS sets --mx/--my) */
.tilt { transform-style: preserve-3d; transition: transform .15s, box-shadow .25s; position: relative; }
.tilt::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,92,108,.18), transparent 60%); transition: opacity .25s; }
.tilt:hover::after { opacity: 1; }
.tilt:hover { box-shadow: 0 10px 40px rgba(0,0,0,.45); }
/* field labels + inputs */
.field i { transition: letter-spacing .25s, color .25s; }
.field:hover i, .field:focus-within i { letter-spacing: .32em; color: var(--acc-2); }
.field { position: relative; }
.field::before, .field::after { content: ''; position: absolute; width: 10px; height: 10px; border: 1px solid var(--acc); opacity: 0; transition: opacity .2s, transform .3s; pointer-events: none; }
.field::before { left: -4px; top: 14px; border-right: 0; border-bottom: 0; transform: translate(4px, 4px); }
.field::after { right: -4px; bottom: -4px; border-left: 0; border-top: 0; transform: translate(-4px, -4px); }
.field:focus-within::before, .field:focus-within::after, .field:hover::before, .field:hover::after { opacity: 1; transform: none; }
/* stat tiles */
.stat { padding: 6px 8px; margin: -6px -8px; transition: background .25s, transform .25s; }
.stat:hover { background: rgba(255,92,108,.1); transform: translateY(-2px); }
.stat:hover b { text-shadow: 0 0 10px var(--acc); }
/* reticle tags */
.reticle .tag { pointer-events: auto; cursor: none; transition: transform .25s; }
.reticle .tag:hover { transform: translateX(4px); }
.reticle .tag:hover i { background: #fff; box-shadow: 0 0 8px var(--acc); }
.reticle .tag:hover b { color: var(--acc-2); }
/* story bars */
.bar { transition: background .3s; }
.bar:hover { background: linear-gradient(90deg, rgba(255,92,108,.06), transparent 50%); }
.bar:hover .bar-mark::after { width: 90px; background: var(--acc); }
.bar:hover h3 { color: var(--acc-2); }
.bar-mark::after { transition: width .35s, background .35s; }
/* code blocks */
.mcp pre { position: relative; transition: border-color .25s; }
.mcp pre:hover { border-color: var(--acc); }
.mcp pre .copy { position: absolute; right: 8px; top: 8px; font-size: 9px; letter-spacing: .2em; padding: 4px 8px; border: 1px solid var(--line); color: var(--ink-2); background: var(--panel); cursor: none; opacity: 0; transition: opacity .2s; }
.mcp pre:hover .copy { opacity: 1; }
.mcp pre .copy:hover { border-color: var(--acc); color: var(--acc-2); }
.flow li { transition: transform .25s, color .25s; }
.flow li:hover { transform: translateX(6px); color: var(--ink); }
.flow li:hover span { color: #fff; text-shadow: 0 0 8px var(--acc); }
/* HUD ruler */
.hud-frame .ruler-right { pointer-events: auto; cursor: none; }
.hud-frame .ruler-right:hover .readout b { color: var(--acc-2); }
.hud-frame .ruler-right:hover .ticks { background: repeating-linear-gradient(180deg, var(--acc) 0 1px, transparent 1px 4%); }
.hud-frame .coords, .hud-frame .bar-id { pointer-events: auto; cursor: none; transition: color .25s; }
.hud-frame .coords:hover, .hud-frame .bar-id:hover { color: var(--acc-2); }
/* ticker */
.ticker { pointer-events: auto; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-track span { transition: color .2s, text-shadow .2s; cursor: none; }
.ticker-track span:hover { color: var(--acc-2); text-shadow: 0 0 10px var(--acc); }
/* brand */
.brand-mark { display: inline-block; transition: transform .5s cubic-bezier(.2,.8,.2,1); }
.brand:hover .brand-mark { transform: rotateY(360deg); }
.brand:hover .brand-tick { color: var(--acc-2); }
/* eyebrow + lede + mode labels */
.eyebrow, .code, .mode, .panel-head h2 { transition: letter-spacing .3s, color .3s; }
.eyebrow:hover, .code:hover, .mode:hover { letter-spacing: .3em; color: var(--acc-2); }
.lede:hover { color: var(--ink); }
.title { cursor: none; }
.title:hover { animation: tglitch .38s steps(3) 1; }
/* pay strip cells */
.pay > div { padding: 4px; margin: -4px; transition: background .2s; }
.pay > div:hover { background: rgba(255,92,108,.12); }
.pay > div:hover b { color: var(--acc-2); }
/* reels */
.reel .meta b, .reel .meta span { transition: transform .25s; }
.reel:hover .meta b { transform: translateX(4px); color: var(--acc-2); }
.reel .origin { transition: background .2s, color .2s; }
.reel:hover .origin { background: var(--acc); color: var(--bg); }
/* gen warnings + failures */
.gen-warn { padding: 8px 14px; font-size: 10.5px; letter-spacing: .06em; color: #ffd36c; background: rgba(255,211,108,.08); border-bottom: 1px dashed rgba(255,211,108,.4); }
.gen-fail .code { color: #ffd36c; }
.gen-fail p { color: var(--ink-2); max-width: 46ch; margin: 8px auto 6px; line-height: 1.6; }
.gen-fail small { color: var(--ink-3); font-size: 10px; letter-spacing: .1em; }
.gen-note.fell-back { color: #ffd36c; }
.gen-prewarn { margin-top: -6px; font-size: 10.5px; color: #ffd36c; letter-spacing: .06em; display: none; }
.gen-prewarn.on { display: block; }
/* gen output + share */
.gen-out { transition: border-color .25s; }
.gen-job { grid-template-rows: auto 1fr auto auto; }
.gen-share { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line); }
.gen-share .share-x { border-color: var(--acc); color: var(--acc-2); }
.gen-out:hover { border-color: var(--acc); }
/* light band overrides */
.band.light .hv-p:hover { color: #07090c; }
.band.light .hv-li:hover { color: #07090c; }

/* =========================================================
   5. footer
   ========================================================= */
.foot { position: relative; padding-top: 28px; margin-top: 10px; border-top: 1px solid var(--line); align-items: center; }
.foot .wave { position: absolute; left: var(--gut); top: -1px; width: calc(100% - 2 * var(--gut)); height: 28px; pointer-events: none; }
.foot .wave path { fill: none; stroke: var(--acc); stroke-width: 1; stroke-dasharray: 2000; animation: waveRun 6s linear infinite; opacity: .5; }
@keyframes waveRun { to { stroke-dashoffset: -2000; } }
.foot span, .foot a { position: relative; transition: color .25s; cursor: none; }
.foot span:hover, .foot a:hover { color: var(--acc-2); }
.foot a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--acc); transform: scaleX(0); transition: transform .3s; transform-origin: right; }
.foot a:hover::after { transform: scaleX(1); transform-origin: left; }
.foot .clock { margin-left: auto; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.foot .clock b { color: var(--acc-2); }
.foot .mute { margin-left: 0; }
body[data-view="home"] .foot { display: flex; }

/* scroll-driven hero */
.hero { transform-origin: center top; will-change: transform, opacity; }

/* home: HUD altitude follows scroll (class set by JS) */
body.scrolling .ruler-right .readout b { color: var(--acc-2); }

@media (max-width: 900px) {
  .bot-card { max-width: 260px; }
  .callout-box { width: min(340px, calc(100vw - 32px)); }
  .callout-art { height: 110px; }
}
@media (prefers-reduced-motion: reduce) {
  .ret, .rain rect, .topo path, .alt-ticks .pin, .net .pulse, .bot-card .holo, .foot .wave path, .callout-art .scanline { animation: none !important; }
}

/* screenshot mode: freeze everything at its final state */
.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; animation: none !important; }
.no-anim .num-stroke path { stroke-dashoffset: 0 !important; }
.no-anim .numeral video, .no-anim .numeral img, .no-anim .slide, .no-anim .band-side, .no-anim .slide p .w { opacity: 1 !important; transform: none !important; clip-path: none !important; }
.no-anim .band { min-height: 0; padding: 60px var(--gut); }
.no-anim .band-side .num::after { clip-path: none !important; }

/* =========================================================
   6. fullscreen reel player
   ========================================================= */
body.noscroll { overflow: hidden; }
.reelbox { position: fixed; inset: 0; z-index: 1500; background: rgba(7,9,12,.96); display: none; align-items: center; justify-content: center; }
.reelbox.on { display: flex; animation: fade .25s ease both; }
.reelbox-stage { position: relative; height: min(90vh, 100%); aspect-ratio: 9/16; max-width: 94vw; background: #000; border: 1px solid var(--line); display: grid; box-shadow: 0 30px 80px rgba(0,0,0,.6); }
.reelbox-bg { position: absolute; inset: -40px; width: calc(100% + 80px); height: calc(100% + 80px); object-fit: cover; filter: blur(42px) saturate(1.2) brightness(.45); opacity: .7; pointer-events: none; }
.reelbox-stage:fullscreen { aspect-ratio: auto; width: 100vw !important; height: 100vh !important; border: 0; }
.reelbox-stage video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.reelbox-meta { position: absolute; left: 0; right: 0; bottom: 54px; padding: 14px 16px; background: linear-gradient(180deg, transparent, rgba(0,0,0,.85)); pointer-events: none; }
.reelbox-meta b { display: block; font-size: 12px; letter-spacing: .16em; text-transform: uppercase; }
.reelbox-meta span { display: block; font-size: 11px; color: var(--ink-2); margin-top: 4px; line-height: 1.4; }
.reelbox-meta .src { pointer-events: auto; display: inline-block; margin-top: 8px; font-size: 9px; letter-spacing: .2em; color: var(--acc-2); }
.reelbox .rb { position: absolute; background: rgba(7,9,12,.7); border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); cursor: none; transition: border-color .2s, color .2s; }
.reelbox .rb:hover { border-color: var(--acc); color: var(--acc-2); }
.reelbox .prev, .reelbox .next { top: 50%; width: 48px; height: 64px; margin-top: -32px; font-size: 28px; }
.reelbox .prev { left: 16px; } .reelbox .next { right: 16px; }
.reelbox .close { top: 16px; right: 16px; width: 44px; height: 44px; font-size: 22px; }
.reelbox .full { top: 16px; left: 16px; padding: 12px 14px; font-size: 10px; letter-spacing: .2em; }
.reelbox-count { position: absolute; bottom: 18px; left: 50%; transform: translateX(-50%); font-size: 10px; letter-spacing: .2em; color: var(--ink-3); }
.reel .mute { font-weight: 600; color: var(--acc-2); }
@media (max-width: 700px) { .reelbox-stage { width: 100vw; height: 100vh; max-width: none; aspect-ratio: auto; border: 0; } .reelbox .prev, .reelbox .next { display: none; } }

/* =========================================================
   7. 3D objects (TRELLIS GLBs) in bands + popups
   ========================================================= */
.obj3d { position: relative; width: 72%; margin: 0 auto -6%; aspect-ratio: 1.1; z-index: 2; }
.obj3d.small { width: 60%; aspect-ratio: 1.3; margin: 0 auto 6px; }
.obj3d canvas { width: 100%; height: 100%; display: block; cursor: none; background: var(--fallback) center / contain no-repeat; opacity: .35; transition: opacity .6s; }
.obj3d canvas.ready { background: none; opacity: 1; }
.obj3d canvas.failed { opacity: .6; }
.obj3d .obj-tag { position: absolute; left: 50%; bottom: 8%; transform: translateX(-50%); font-size: 9px; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; pointer-events: none; }
.band.light .obj3d .obj-tag { color: rgba(7,9,12,.45); }
.callout-art .pop3d { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .4s; }
.callout-art.has3d .pop3d.ready { opacity: 1; }
@media (max-width: 900px) { .obj3d { max-width: 320px; margin: 0 auto -8%; } }

/* story bar illustrations */
.bar-art { position: relative; margin: 0 0 16px; border: 1px solid var(--line); background: #000; overflow: hidden; aspect-ratio: 16/9; }
.bar-art img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.9); transition: transform 1.2s cubic-bezier(.2,.8,.2,1), filter .4s; }
.bar:hover .bar-art img { transform: scale(1.04); filter: saturate(1.1); }
.bar-art::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.14) 0 1px, transparent 1px 3px); pointer-events: none; }
.bar-art::after { content: ''; position: absolute; left: 0; right: 0; height: 1px; top: 0; background: var(--acc); box-shadow: 0 0 10px var(--acc); opacity: 0; }
.bar:hover .bar-art::after { opacity: .8; animation: artScan 2.4s linear infinite; }
.bar-art figcaption { position: absolute; left: 10px; bottom: 8px; font-size: 9px; letter-spacing: .22em; color: var(--ink-2); background: rgba(7,9,12,.7); padding: 3px 7px; border: 1px solid var(--line); }
.bar-art .corner { position: absolute; width: 12px; height: 12px; border: 1px solid var(--acc); }

/* =========================================================
   8. phone layout
   ========================================================= */
@media (max-width: 700px) {
  .top { padding: 12px var(--gut) 8px; background: linear-gradient(180deg, rgba(7,9,12,.92), rgba(7,9,12,.6) 70%, transparent); }
  .nav { flex-wrap: wrap; gap: 2px 6px; justify-content: flex-start; }
  .nav-item { font-size: 10px; letter-spacing: .06em; padding: 6px 4px; }
  .views { padding-top: 104px; }
  .hero { gap: 8px; }
  .hero-face { max-height: 58vh; }
  .reticle { inset: 4%; }
  .reticle .tag { font-size: 8px; padding-left: 30px; }
  .reticle .tag i { width: 24px; }
  .reticle .tag-1 { top: 2%; right: 0; } .reticle .tag-2 { top: 46%; right: 0; } .reticle .tag-3 { bottom: 2%; left: 0; }
  .title { font-size: clamp(30px, 9vw, 46px); }
  .stats { gap: 14px 20px; }
  .ca { grid-template-columns: 1fr auto; }
  .ca i { grid-column: 1 / -1; }
  .ticker { position: sticky; bottom: 0; }
  .band { min-height: 0; padding: 48px var(--gut); }
  .band-inner { gap: 20px; }
  .slide { padding: 18px; }
  .slide h2 { font-size: 18px; }
  .obj3d { width: 78%; aspect-ratio: 1; margin: 0 auto -4%; }
  .obj3d.small { width: 62%; }
  .numeral { width: 88%; margin: 0 auto; }
  .band-side .stat-line { justify-content: center; }
  .bot-card { max-width: 240px; }
  .panel { padding: 16px 14px; }
  .panel-head { gap: 10px; }
  .panel-head .mode { margin-left: 0; width: 100%; }
  .pay { grid-template-columns: 1fr 1fr; gap: 8px; }
  .gen-out { min-height: 240px; }
  .reels { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .reel .meta { padding: 8px; } .reel .meta b { font-size: 10px; } .reel .meta span { display: none; }
  .bar { padding-left: 0; padding-top: 44px; }
  .bar-mark { top: 14px; }
  .bar p { font-size: 13px; }
  .mcp pre { font-size: 10.5px; }
  .tool { grid-template-columns: 1fr; } .tool i { grid-column: 1; grid-row: auto; }
  .foot { gap: 6px 16px; padding-bottom: 36px; }
  .foot .clock { margin-left: 0; }
  .callout-box { width: calc(100vw - 32px); }
  .callout-art { height: 120px; }
  .reelbox .full { left: 12px; top: 12px; padding: 10px 10px; }
  .boot-lines { width: 86vw; }
}
@media (max-width: 420px) {
  .nav-item { font-size: 9px; }
  .brand { font-size: 11px; }
  .hero-face { max-height: 52vh; }
}
/* touch devices: no hover popups, tap goes straight to the view */
@media (hover: none) {
  .callout { display: none !important; }
  .hv-p::before, .tilt::after { display: none; }
}

/* brand logo */
.brand { align-items: center; }
.brand-logo { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--acc); box-shadow: 0 0 10px rgba(255,92,108,.4); margin-right: 4px; transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .3s; }
.brand:hover .brand-logo { transform: rotate(360deg) scale(1.1); box-shadow: 0 0 18px rgba(255,92,108,.8); }

/* band 3: numeral 03 as the stage behind the SI-BOT card */
.num-stage { position: relative; width: 100%; display: grid; place-items: center; padding: 6% 0 2%; }
.num-stage .numeral.num-bg { position: absolute; inset: 0 -6%; width: auto; aspect-ratio: auto; z-index: 0; opacity: .95; }
.num-stage .numeral.num-bg svg { height: 100%; }
.num-stage .bot-card { position: relative; z-index: 1; width: min(62%, 260px); box-shadow: 0 30px 60px rgba(0,0,0,.6); }
.num-stage .numeral.num-bg .num-stroke path { stroke: #c48dff; }
@media (max-width: 700px) { .num-stage .bot-card { width: 64%; } }

/* the player and boot overlay sit below the custom cursor; native cursor inside video controls as a fallback */
.reelbox video { cursor: auto; }

/* =========================================================
   9. wallet gate
   ========================================================= */
.wallet { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 14px; margin: -8px 0 20px; border: 1px solid var(--line); background: rgba(0,0,0,.3); position: relative; }
.wallet::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--acc); }
.wallet i { display: block; font-style: normal; font-size: 9px; letter-spacing: .22em; color: var(--ink-3); text-transform: uppercase; margin-bottom: 4px; }
.wallet b { display: block; font-size: 12px; font-weight: 600; }
.wallet small { display: block; margin-top: 4px; font-size: 10px; color: var(--ink-3); letter-spacing: .04em; }
.wallet-right { display: flex; align-items: center; gap: 14px; }
.wallet-btn { padding: 10px 14px; font-size: 10px; border-color: var(--acc); color: var(--acc-2); white-space: nowrap; }
.wallet-btn.connected { border-color: var(--line); color: var(--ink-2); }
.quota { display: flex; gap: 14px; }
.quota > div { text-align: center; }
.quota b { font-size: 16px; color: var(--acc-2); }
.quota i { margin: 0; }
.wallet.locked .wallet-left b { color: #ffd36c; }
.btn[disabled] { opacity: .45; }
@media (max-width: 700px) { .wallet { flex-direction: column; align-items: stretch; } .wallet-right { justify-content: space-between; } }