/* Codebani concepts — shared stage styles (loads after codebani.css).
 * Concept files override tokens on .cx-<id> (body class) and style their own acts. */

/* ---------- pinned story ---------- */
.cx-story{position:relative;z-index:2;height:calc((var(--w,6) + 1) * 100vh);height:calc((var(--w,6) + 1) * 100svh)}
.cx-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--cx-bg,var(--bg))}
.cx-pin canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:pan-y}
.cx-overlay{position:absolute;inset:0;pointer-events:none;z-index:3}
.cx-act{position:absolute;inset:0;display:flex;align-items:center;padding:110px var(--m) 90px;opacity:0;visibility:hidden;transition:opacity 520ms ease,visibility 0s linear 520ms}
.cx-act.is-on{opacity:1;visibility:visible;transition:opacity 520ms ease,visibility 0s}
.cx-act[data-side=right]{justify-content:flex-end}
.cx-act[data-side=center]{justify-content:center;text-align:center}
.cx-act[data-side=bottom]{align-items:flex-end;justify-content:center;text-align:center}
.cx-copy{position:relative;max-width:min(44rem,46vw);pointer-events:auto}
.cx-act[data-side=center] .cx-copy,.cx-act[data-side=bottom] .cx-copy{max-width:min(62rem,90vw)}
/* staggered entrance of the copy */
.cx-act .cx-copy>*{opacity:0;transform:translateY(28px);transition:opacity 700ms var(--ease-out),transform 800ms var(--ease-out)}
.cx-act.is-on .cx-copy>*{opacity:1;transform:none}
.cx-act.is-on .cx-copy>*:nth-child(2){transition-delay:90ms}
.cx-act.is-on .cx-copy>*:nth-child(3){transition-delay:170ms}
.cx-act.is-on .cx-copy>*:nth-child(4){transition-delay:250ms}
.cx-act.is-on .cx-copy>*:nth-child(5){transition-delay:330ms}
/* split-line headline reveal: wrap each line in <span class="cb-line"><span>…</span></span> */
.cx-act .cb-line{display:block;overflow:hidden;padding-bottom:.05em}
.cx-act .cb-line>span{display:block;transform:translateY(108%);transition:transform 1000ms var(--ease-out)}
.cx-act.is-on .cb-line>span{transform:none}
.cx-act.is-on .cb-line:nth-child(2)>span{transition-delay:80ms}
.cx-act.is-on .cb-line:nth-child(3)>span{transition-delay:160ms}

/* scrim behind copy for legibility over 3D (concepts may restyle) */
.cx-scrim{position:absolute;inset:0;z-index:2;pointer-events:none;transition:background 800ms ease;background:linear-gradient(90deg,var(--cx-scrim,rgba(5,6,8,.78)) 0%,rgba(5,6,8,0) 58%)}
.cx-story[data-side=right] .cx-scrim{background:linear-gradient(270deg,var(--cx-scrim,rgba(5,6,8,.78)) 0%,rgba(5,6,8,0) 58%)}
.cx-story[data-side=center] .cx-scrim,.cx-story[data-side=bottom] .cx-scrim{background:radial-gradient(ellipse 80% 70% at 50% 60%,rgba(5,6,8,0) 30%,var(--cx-scrim,rgba(5,6,8,.6)) 100%)}

/* ---------- HUD: progress + act label + sound ---------- */
.cx-hud{position:absolute;left:var(--m);right:var(--m);bottom:24px;z-index:4;display:flex;align-items:center;gap:18px;pointer-events:none;color:var(--ink-3)}
.cx-bar{flex:1;height:2px;background:rgba(238,241,245,.12);overflow:hidden;border-radius:2px}
.cx-bar i{display:block;height:100%;background:var(--ember);transform-origin:0 50%;transform:scaleX(0)}
.cx-hud-label{font-size:13px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;min-width:9rem;color:var(--ink-2)}
.cx-sound{pointer-events:auto;display:inline-flex;align-items:center;gap:10px;height:40px;padding:0 14px;border:0;border-radius:999px;background:rgba(238,241,245,.08);color:var(--ink-2);font-size:13px;font-weight:600;letter-spacing:.04em;cursor:pointer;transition:background-color 200ms ease,color 200ms ease}
.cx-sound .eq{display:inline-flex;gap:2px;align-items:flex-end;height:14px}
.cx-sound .eq i{width:2px;height:4px;background:currentColor;border-radius:1px;transition:height 200ms ease}
.cx-sound.is-on{background:var(--ember);color:#0A0603}
.cx-sound.is-on .eq i{animation:cxeq 900ms ease-in-out infinite alternate}
.cx-sound.is-on .eq i:nth-child(2){animation-delay:-300ms}
.cx-sound.is-on .eq i:nth-child(3){animation-delay:-600ms}
@keyframes cxeq{from{height:3px}to{height:14px}}
@media (hover:hover) and (pointer:fine){.cx-sound:not(.is-on):hover{background:rgba(238,241,245,.16);color:var(--ink)}}

/* ---------- hold-to-activate button ---------- */
.cx-hold{--hold:0;position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:64px;padding:0 30px 0 24px;border:0;border-radius:999px;background:rgba(238,241,245,.08);color:var(--ink);font-weight:700;font-size:16px;letter-spacing:.02em;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:none;overflow:hidden;isolation:isolate}
.cx-hold::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ember);transform-origin:0 50%;transform:scaleX(var(--hold))}
.cx-hold .ring{width:26px;height:26px;border-radius:50%;background:conic-gradient(var(--ember) calc(var(--hold) * 360deg),rgba(238,241,245,.2) 0)}
.cx-hold.is-holding{color:#0A0603}
.cx-hold.is-done{background:var(--ember);color:#0A0603}

/* ---------- custom cursor (mouse only) ---------- */
.cx-cursor{position:fixed;inset:0;z-index:300;pointer-events:none;opacity:0;transition:opacity 300ms ease}
.cx-cursor.is-on{opacity:1}
.cx-cursor .dot,.cx-cursor .ring{position:absolute;left:0;top:0;border-radius:50%}
.cx-cursor .dot{width:6px;height:6px;margin:-3px 0 0 -3px;background:var(--ember);transform:translate(var(--x),var(--y))}
.cx-cursor .ring{width:36px;height:36px;margin:-18px 0 0 -18px;box-shadow:inset 0 0 0 1px rgba(238,241,245,.45);transform:translate(var(--rx),var(--ry)) scale(1);transition:width 250ms var(--ease-out),height 250ms var(--ease-out),margin 250ms var(--ease-out),box-shadow 250ms ease}
.cx-cursor.is-hot .ring{width:64px;height:64px;margin:-32px 0 0 -32px;box-shadow:inset 0 0 0 1px var(--ember)}
.cx-cursor.is-down .ring{width:28px;height:28px;margin:-14px 0 0 -14px}
.cx-cursor::after{content:attr(data-label);position:absolute;left:0;top:0;transform:translate(calc(var(--rx) + 30px),calc(var(--ry) - 8px));font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
@media (hover:none),(pointer:coarse){.cx-cursor{display:none}}
.cx-live.cx-hide-native,.cx-live.cx-hide-native a,.cx-live.cx-hide-native button{cursor:none}

/* ---------- no script / no WebGL / reduced motion ---------- */
html:not(.cx-live) .cx-story{height:auto}
html:not(.cx-live) .cx-pin{position:relative;height:auto;overflow:visible}
html:not(.cx-live) .cx-pin canvas,html:not(.cx-live) .cx-hud,html:not(.cx-live) .cx-scrim{display:none}
html:not(.cx-live) .cx-overlay{position:relative}
html:not(.cx-live) .cx-act{position:relative;opacity:1;visibility:visible;min-height:80vh}
html:not(.cx-live) .cx-act .cx-copy>*,html:not(.cx-live) .cx-act .cb-line>span{opacity:1;transform:none}
.cx-no-gl .cx-pin{background:var(--cx-poster,radial-gradient(ellipse 60% 60% at 70% 45%,#1A2433 0%,var(--bg) 70%))}
.cx-no-gl .cx-pin canvas{display:none}
@media (prefers-reduced-motion:reduce){
  .cx-act .cx-copy>*,.cx-act .cb-line>span{transition:opacity 300ms ease;transform:none!important}
}

/* ---------- phone ---------- */
@media (max-width:760px){
  .cx-act{align-items:flex-end;padding:90px 16px 84px}
  .cx-act[data-side=right]{justify-content:flex-start}
  .cx-copy{max-width:none;width:100%}
  .cx-scrim,.cx-story[data-side] .cx-scrim{background:linear-gradient(to top,var(--cx-scrim,rgba(5,6,8,.92)) 0%,rgba(5,6,8,.7) 38%,rgba(5,6,8,0) 66%)}
  .cx-hud{bottom:18px;left:16px;right:16px;gap:12px}
  .cx-hud-label{display:none}
}