/* The homepage hero's opener (see hero-intro.js) and the headline's masked line reveal. */
/* While an intro plays, the hero's own animations wait. */
html.intro-hold .p-hero .reveal, html.intro-hold .hero-art .printer .receipt, html.intro-hold .hero-art .printer .stamp { animation-play-state: paused !important; }
html.intro-on .hero-art .printer { visibility: hidden; }
html.printed .hero-art .printer .receipt, html.printed .hero-art .printer .stamp { animation: none !important; opacity: 1 !important; clip-path: none !important; transform: none; }
html.printed .hero-art .printer .stamp { transform: rotate(-8deg); }

#intro { position: fixed; inset: 0; z-index: 120; display: none; }
html.intro-on #intro { display: block; cursor: pointer; }
html.intro-on.intro-black #intro { background: #050507; }
#intro.fade { background: transparent !important; transition: background .7s ease; }
#intro .skip { position: absolute; right: 18px; bottom: 18px; font: 500 11px var(--typed); letter-spacing: .16em; text-transform: uppercase; color: #55555C; z-index: 3; }

/* ---------- The headline: masked line reveal (all versions but Decode) ---------- */
.p-hero h1 .ln { display: block; overflow: hidden; white-space: nowrap; padding: .02em .06em .14em 0; margin-bottom: -.12em; }
.p-hero h1 .in { display: block; transform: translateY(108%); }
html.go-lines .p-hero h1 .in { animation: lnUp 1.15s cubic-bezier(.16, 1, .3, 1) var(--d, 0s) forwards; }
@keyframes lnUp { 0% { transform: translateY(108%) rotate(3deg); filter: blur(8px); } 60% { filter: blur(0); } 100% { transform: none; filter: none; } }
/* The rest arrives sharp from a blur, not sliding up. */
html .p-hero .reveal { animation-name: blurIn !important; animation-duration: 1s !important; animation-timing-function: cubic-bezier(.16, 1, .3, 1) !important; }
@keyframes blurIn { from { opacity: 0; filter: blur(12px); transform: translateY(10px); } to { opacity: 1; filter: none; transform: none; } }

/* ---------- 1. The chart ---------- */
.iv-chart { position: absolute; inset: 0; transition: opacity .6s ease; }
.iv-chart canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.iv-chart.dim canvas { opacity: .22; transition: opacity .6s ease; }
.iv-chart.out { opacity: 0; }
.iv-chart .tok { position: absolute; left: 5vw; top: max(64px, 9vh); display: flex; align-items: center; gap: 14px; }
.iv-chart .tok img { width: 46px; height: 46px; border-radius: 12px; }
.iv-chart .tok b { display: block; font: 800 22px/1 var(--display); color: var(--paper); letter-spacing: -.02em; }
.iv-chart .tok small { font: 500 12px var(--typed); color: #6E6E76; }
.iv-chart .mc { position: absolute; left: 5vw; top: calc(max(64px, 9vh) + 62px); font: 500 12px var(--typed); color: #6E6E76; letter-spacing: .08em; text-transform: uppercase; }
.iv-chart .mc b { display: block; margin-top: 4px; font: 700 clamp(30px, 3.4vw, 46px)/1 var(--typed); letter-spacing: -.03em; color: var(--paper); font-variant-numeric: tabular-nums; }
.iv-chart .mc i { font-style: normal; font: 600 15px var(--typed); color: #3BDB82; margin-left: 10px; letter-spacing: 0; }
.iv-chart.dead .mc i { color: #FF4D4D; }
.iv-chart .feed { position: absolute; right: 4vw; top: 24vh; width: 21vw; min-width: 230px; display: flex; flex-direction: column; gap: 4px; font: 500 12px var(--typed); }
.iv-chart .feed div { display: grid; grid-template-columns: 44px 1fr auto; gap: 8px; align-items: center; padding: 5px 8px; border-radius: 6px; background: rgba(255,255,255,.02); color: #8E8E96; animation: rowIn .25s ease-out; }
.iv-chart .feed .b span:first-child { color: #3BDB82; }
.iv-chart .feed .s { background: rgba(255,77,77,.1); color: #F2F1EC; }
.iv-chart .feed .s span:first-child { color: #FF4D4D; }
.iv-chart .feed em { font-style: normal; font-size: 10px; padding: 1px 6px; border-radius: 4px; background: #F5C518; color: #0A0A0B; margin-left: 6px; }
@keyframes rowIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (max-width: 900px) { .iv-chart .feed { display: none; } }
.iv-flip { position: fixed; z-index: 2; transform-origin: 0 0; }
.iv-flip.land { transition: transform .85s cubic-bezier(.7, 0, .2, 1); }
#intro .printer .receipt { animation-duration: 1.25s !important; animation-delay: .05s !important; }
#intro .printer .stamp { animation-delay: 1.35s !important; }

@media (prefers-reduced-motion: reduce) { #intro { display: none !important; } .p-hero h1 .in { transform: none; } }