:root { --motion-pink: #fa2694; }
html { scroll-padding-top: 82px; }
.site-header { position: fixed; inset: 0 0 auto; background: rgba(9,9,10,.88); border-bottom: 1px solid #ffffff29; }
.site-header .wrap { max-width: none; height: 72px; padding-inline: 3.4vw; }
.site-nav a, .header-icons { color: #c9c5c4; font-size: 14px; }
.fx-layer::before { opacity: .04; animation: none; }
.fx-layer::after { opacity: .08; }
.chain-sequence { height: 300svh; position: relative; background: #09090b; }
.chain-stage { position: sticky; top: 0; height: 100svh; min-height: 540px; overflow: hidden; isolation: isolate; background: #09090b; }
.chain-canvas { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.chain-canvas canvas { display: block; width: 100%; height: 100%; }
.unbound-reveal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 110px 7vw 120px; background: radial-gradient(ellipse at 50% 48%, #80154044, transparent 65%); }
.unbound-reveal h1 { width: min(900px, 78vw); margin: 18px 0 8px; }
.unbound-reveal h1 img { width: 100%; height: auto; }
.release-eyebrow { font-size: 14px; letter-spacing: .35em; color: #f5cadf; }
.unbound-reveal p { font-size: clamp(16px, 1.5vw, 22px); color: #d2c7cd; }
.release-shop { margin-top: 20px; display: flex; align-items: center; gap: 40px; background: var(--motion-pink); color: #09090b; font-size: 14px; font-weight: 700; padding: 16px 24px; }
.release-shop:hover { background: #c9ff3d; }
.release-shop span { font-size: 22px; }
.tear-panel { position: absolute; top: 0; bottom: 0; width: 51%; background: radial-gradient(ellipse at 70% 45%, #252529 0%, #121214 40%, #0b0b0d 80%); z-index: 2; will-change: transform; }
.tear-left { left: 0; clip-path: polygon(0 0,98% 0,96% 9%,100% 17%,96% 25%,98% 34%,95% 42%,100% 50%,96% 58%,99% 67%,95% 77%,98% 86%,96% 94%,98% 100%,0 100%); }
.tear-right { right: 0; clip-path: polygon(0 0,100% 0,100% 100%,0 100%,2% 94%,0 86%,3% 77%,0 67%,2% 58%,0 50%,3% 42%,0 34%,2% 25%,0 17%,2% 9%); background: radial-gradient(ellipse at 20% 45%, #252529 0%, #121214 40%, #0b0b0d 80%); }
.chain-type { position: absolute; z-index: 3; inset: 24% 6% auto; font-family: var(--font-display); font-weight: 900; font-size: clamp(54px, 10.7vw, 170px); line-height: .95; letter-spacing: -.065em; pointer-events: none; }
.chain-type span { display: block; }
.chain-type span:nth-child(2) { margin-left: 15vw; }
.chain-type .outline-word { margin-left: 28vw; color: transparent; -webkit-text-stroke: 1px #d7d1d0; }
.chain-top { position: absolute; z-index: 6; left: 3.4vw; right: 3.4vw; top: 104px; display: flex; justify-content: space-between; font-size: 12px; letter-spacing: .13em; color: #d1ccca; }
.chain-edge { position: absolute; z-index: 6; right: 28px; top: 42%; writing-mode: vertical-rl; font-size: 12px; letter-spacing: .16em; color: #969096; }
.chain-bottom { position: absolute; z-index: 6; bottom: 30px; left: 3.4vw; right: 3.4vw; display: flex; align-items: center; justify-content: space-between; gap: 25px; }
.pull-prompt { display: flex; gap: 15px; align-items: center; font-size: 13px; letter-spacing: .06em; }
.pull-arrow { font-size: 34px; color: var(--motion-pink); }
.strain { width: 190px; font-size: 12px; letter-spacing: .09em; }
.strain > div:first-child { display: flex; justify-content: space-between; margin-bottom: 9px; }
.strain-track { height: 3px; background: #ffffff24; }
.strain-track i { display: block; height: 100%; background: var(--motion-pink); transform: scaleX(0); transform-origin: left; }
.skip-intro { font-size: 13px; border-bottom: 1px solid #ffffff66; padding-block: 8px; }
.break-flash { position: absolute; z-index: 7; inset: 0; background: #f9d0e7; opacity: 0; pointer-events: none; }
.chain-sequence.is-static { height: 100svh; }
.is-static .tear-panel, .is-static .chain-type, .is-static .chain-canvas, .is-static .strain { display: none; }
.is-static .unbound-reveal { visibility: visible !important; }
.is-static .pull-prompt { display: none; }
.is-static .chain-bottom { justify-content: flex-end; }
.is-static .release-shop { visibility: visible; }
a:focus-visible, button:focus-visible { outline: 2px solid #c9ff3d; outline-offset: 7px; }
@media (max-width: 720px) {
  .site-header .wrap { height: 64px; padding-inline: 20px; }
  .chain-stage { min-height: 540px; }
  .chain-top { top: 88px; left: 20px; right: 20px; font-size: 12px; letter-spacing: 0; }
  .chain-top span:last-child { max-width: 105px; text-align: right; }
  .chain-type { top: 28%; left: 6%; right: 6%; font-size: 14vw; line-height: 1.1; }
  .chain-type span:nth-child(2) { margin-left: 5vw; }
  .chain-type .outline-word { margin-left: 0; }
  .chain-edge { display: none; }
  .chain-bottom { left: 20px; right: 20px; bottom: 24px; flex-wrap: wrap; gap: 18px; }
  .strain { width: 105px; margin-left: auto; }
  .pull-prompt { font-size: 12px; gap: 9px; }
  .skip-intro { font-size: 12px; }
  .unbound-reveal { padding-inline: 20px; }
  .unbound-reveal h1 { width: 95%; }
  .release-eyebrow { letter-spacing: .2em; font-size: 12px; }
  .unbound-reveal p { text-align: center; max-width: 25ch; }
}
@media (prefers-reduced-motion: reduce) {
  .chain-sequence { height: 100svh; }
  .tear-panel, .chain-type, .chain-canvas, .strain { display: none; }
  .unbound-reveal { visibility: visible !important; }
  .pull-prompt { display: none; }
}