/* ============================================================
   UNFO · CINEMATIC — video-forward, VYZN-clean, red on black,
   with iridescent chrome rings + geometric motion.
   Part 1: base · cursor · nav · hero · chrome · marquee · statement · stats
   ============================================================ */

html.anim { scroll-behavior: smooth; }
body { background: var(--void); overflow-x: hidden; }

@media (hover: hover) and (pointer: fine) { .cursor-on, .cursor-on * { cursor: none; } }

.eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--body); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--ink-dim); }
.eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--red); }
.eyebrow.c::before { display: none; }
.mono { font-family: var(--body); font-weight: 600; font-size: 0.68rem; letter-spacing: 0.2em; text-transform: uppercase; }
.u-red { color: var(--red); }

.section { padding: clamp(5rem, 11vw, 12rem) 0; position: relative; }
.wrap { width: min(1560px, 100% - clamp(2.5rem, 10vw, 12rem)); margin-inline: auto; }
.wrap-wide { width: min(1820px, 100% - clamp(1.5rem, 5vw, 4rem)); margin-inline: auto; }

/* buttons */
.btn { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--body); font-weight: 700; font-size: 0.82rem; letter-spacing: 0.04em; padding: 0.8rem 1.5rem; border-radius: 100px; transition: transform 0.3s var(--ease-out), background 0.3s, color 0.3s, box-shadow 0.3s; white-space: nowrap; text-transform: uppercase; }
.btn--red { background: var(--red); color: var(--white); }
.btn--red:hover { box-shadow: 0 14px 44px var(--accent-glow); }
.btn--solid { background: var(--white); color: var(--black); }
.btn--ghost { border: 1px solid var(--line); color: var(--ink); }
.btn--ghost:hover { border-color: var(--white); }
.btn--lg { padding: 1.05rem 2.1rem; font-size: 0.9rem; }
.mag { display: inline-block; will-change: transform; }

/* ============================================================
   CUSTOM CURSOR
   ============================================================ */
.cursor { position: fixed; inset: 0; z-index: 9000; pointer-events: none; mix-blend-mode: difference; }
.cursor__dot { position: fixed; width: 9px; height: 9px; border-radius: 50%; background: var(--white); transform: translate(-50%,-50%); transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out); }
.cursor.hot .cursor__dot { width: 76px; height: 76px; }
.cursor__label { position: fixed; transform: translate(-50%,-50%); font-family: var(--body); font-weight: 700; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--white); opacity: 0; transition: opacity 0.25s; white-space: nowrap; mix-blend-mode: difference; }
.cursor.hot .cursor__label { opacity: 1; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }

/* ============================================================
   GRAIN (global, subtle)
   ============================================================ */
.grain { position: fixed; inset: 0; z-index: 8000; pointer-events: none; opacity: calc(0.045 * var(--accent-amt)); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 0.8s steps(3) infinite; }
@keyframes grain { 0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)} }

/* ============================================================
   NAV
   ============================================================ */
.nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: clamp(0.9rem,1.4vw,1.5rem) clamp(1.5rem,4vw,3.2rem); transition: background 0.5s var(--ease-out), backdrop-filter 0.5s, border-color 0.5s; border-bottom: 1px solid transparent; }
.nav.scrolled { background: rgba(5,0,0,0.62); backdrop-filter: blur(20px) saturate(1.2); border-bottom: 1px solid var(--line-soft); }
.nav__brand { display: flex; align-items: center; gap: 0.7rem; }
.nav__brand .nav__wordmark { height: clamp(13px, 1.5vw, 18px); width: auto; max-width: 52vw; }
.nav__brand img { height: clamp(22px,2vw,28px); width: auto; }
.nav__brand .bn { display: flex; flex-direction: column; line-height: 1; }
.nav__brand .bn b { font-family: var(--display); font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em; }
.nav__brand .bn b sup { font-size: 0.5em; vertical-align: super; }
.nav__brand .bn span { font-family: var(--body); font-size: 0.54rem; letter-spacing: 0.26em; text-transform: uppercase; color: var(--ink-faint); margin-top: 3px; }
.nav__links { display: flex; align-items: center; gap: clamp(0.8rem,1.8vw,2rem); justify-self: center; }
.nav__links a { font-family: var(--body); font-weight: 600; font-size: 0.82rem; color: var(--ink-dim); position: relative; padding: 0.3rem 0; transition: color 0.25s; text-transform: lowercase; }
.nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: var(--red); transition: width 0.3s var(--ease-out); }
.nav__links a:hover { color: var(--ink); } .nav__links a:hover::after { width: 100%; }
.nav__sep { color: var(--ink-faint); font-size: 0.7rem; }
.nav__right { display: flex; align-items: center; gap: clamp(0.7rem,1.4vw,1.2rem); justify-self: end; }
.lang { display: flex; border: 1px solid var(--line); border-radius: 100px; overflow: hidden; }
.lang button { font-family: var(--body); font-size: 0.64rem; font-weight: 700; letter-spacing: 0.08em; padding: 0.34rem 0.58rem; color: var(--ink-faint); transition: 0.25s; }
.lang button.on { background: var(--red); color: var(--white); }
.nav__burger { display: none; flex-direction: column; gap: 5px; padding: 8px; }
.nav__burger span { width: 22px; height: 2px; background: var(--ink); }

/* clean hero: nav menu hidden at top, appears once you scroll down */
.nav__links, .nav .lang, .nav__right .btn--red { transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out); }
.nav:not(.scrolled) .nav__links,
.nav:not(.scrolled) .lang,
.nav:not(.scrolled) .nav__right .btn--red { opacity: 0; transform: translateY(-10px); pointer-events: none; }

/* ============================================================
   HERO — full-bleed looping video + iridescent chrome rings
   ============================================================ */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
.hero__video { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.05) contrast(1.04); }
.hero__scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(to top, var(--void) 1%, rgba(5,0,0,0.25) 38%, rgba(5,0,0,0.45) 100%), radial-gradient(135% 100% at 78% 24%, transparent 30%, rgba(5,0,0,0.72) 100%); }
/* film grain over the hero video — cinematic texture */
.hero__grain { position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: calc(0.16 * var(--accent-amt)); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); background-size: 200px; animation: grain 0.6s steps(4) infinite; }
.no-anim .hero__grain { animation: none; }

/* iridescent chrome ring cluster */
.rings { position: absolute; z-index: 1; top: 50%; right: -8vw; transform: translateY(-54%); width: min(70vw, 760px); aspect-ratio: 1; pointer-events: none; mix-blend-mode: screen; opacity: 0.3; will-change: transform; }
.ring { position: absolute; inset: 0; border-radius: 50%; }
.ring__band {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from var(--a,0deg),
    #1a1a22 0deg, #d8d8e8 26deg, #2a2a34 52deg, #ff3b3b 70deg, #1a1a22 92deg,
    #b8e0ff 120deg, #20202a 150deg, #ffe24a 172deg, #1a1a22 196deg,
    #4affc0 224deg, #24242e 252deg, #ff4ae0 280deg, #1a1a22 306deg,
    #d8d8e8 334deg, #1a1a22 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 var(--in,58%), #000 calc(var(--in,58%) + 1%) var(--out,76%), transparent calc(var(--out,76%) + 1%));
          mask: radial-gradient(circle, transparent 0 var(--in,58%), #000 calc(var(--in,58%) + 1%) var(--out,76%), transparent calc(var(--out,76%) + 1%));
  filter: blur(1px) contrast(1.2) saturate(0.9) brightness(0.7);
}
.ring--1 { --in: 60%; --out: 78%; animation: spin 26s linear infinite; }
.ring--2 { --in: 40%; --out: 57%; animation: spin 18s linear infinite reverse; opacity: 0.82; }
.ring--3 { --in: 20%; --out: 37%; animation: spin 32s linear infinite; opacity: 0.7; }
.ring--1 .ring__band { --a: 0deg; }
.ring--2 .ring__band { --a: 120deg; }
.ring--3 .ring__band { --a: 240deg; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin { to { --a: 360deg; } }
/* fallback rotation if @property unsupported */
@supports not (background: conic-gradient(from var(--a))) {
  .ring--1 { animation: rot 26s linear infinite; } .ring--2 { animation: rot 18s linear infinite reverse; } .ring--3 { animation: rot 32s linear infinite; }
}
@keyframes rot { to { transform: rotate(360deg); } }
.no-anim .ring { animation: none !important; }

.hero__inner { position: relative; z-index: 5; padding: 0 clamp(1.5rem,4vw,3.2rem) clamp(2.5rem,5vw,4rem); width: 100%; }
.hero__eyebrow { margin-bottom: clamp(1.2rem,2vw,2rem); }
.hero__title { font-family: var(--display); font-weight: 300; font-size: clamp(2.7rem,8.4vw,9.8rem); line-height: 0.92; letter-spacing: -0.035em; max-width: 16ch; }
.hero__title .ln { display: block; overflow: hidden; padding-bottom: 0.04em; }
.hero__title .ln > span { display: block; }
.hero__title .accent { color: var(--red); }
.hero__row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; margin-top: clamp(1.6rem,3vw,2.6rem); flex-wrap: wrap; }
.hero__sub { max-width: 38ch; color: var(--ink-dim); font-size: var(--fs-sub); }
.hero__actions { display: flex; gap: 0.9rem; align-items: center; }
.hero__play { display: inline-flex; align-items: center; gap: 0.8rem; font-family: var(--body); font-weight: 600; font-size: 0.86rem; color: var(--ink); }
.hero__play .ic { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: 0.3s; background: rgba(5,0,0,0.3); backdrop-filter: blur(6px); }
.hero__play .ic::before { content: ""; border-left: 12px solid var(--white); border-top: 8px solid transparent; border-bottom: 8px solid transparent; margin-left: 3px; }
.hero__play:hover .ic { background: var(--red); border-color: var(--red); transform: scale(1.06); }

.hero__featured { display: flex; align-items: center; gap: 1.2rem; margin-top: clamp(2rem,4vw,3.2rem); padding-top: 1.4rem; border-top: 1px solid var(--line-soft); }
.hero__featured .fk { font-family: var(--body); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; display: flex; align-items: center; gap: 0.5rem; }
.hero__featured .fk::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 10px var(--red); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 0%,100%{transform:scale(1);opacity:1} 50%{transform:scale(1.6);opacity:0.5} }
.hero__ticker { overflow: hidden; flex: 1; -webkit-mask: linear-gradient(90deg, transparent, #000 4%, #000 92%, transparent); }
.hero__ticker ul { display: flex; gap: 2.5rem; list-style: none; animation: tick 26s linear infinite; }
.no-anim .hero__ticker ul { animation: none; }
.hero__ticker li { font-family: var(--display); font-weight: 600; font-size: clamp(0.95rem,1.4vw,1.3rem); color: var(--ink-dim); white-space: nowrap; }
.hero__ticker li .y { color: var(--ink-faint); font-size: 0.7em; margin-left: 0.5rem; }
@keyframes tick { to { transform: translateX(-50%); } }

.hero__cue { position: absolute; bottom: 1.6rem; right: clamp(1.5rem,4vw,3.2rem); z-index: 5; display: flex; align-items: center; gap: 0.6rem; font-family: var(--body); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); }
.hero__cue .ln { width: 40px; height: 1px; background: var(--ink-faint); position: relative; overflow: hidden; }
.hero__cue .ln::after { content: ""; position: absolute; inset: 0; left: -100%; background: var(--red); animation: cue 2.4s var(--ease-cine) infinite; }
@keyframes cue { 0%{left:-100%} 60%,100%{left:100%} }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee { border-block: 1px solid var(--line-soft); padding: clamp(1rem,1.8vw,1.6rem) 0; overflow: hidden; white-space: nowrap; background: var(--surface); }
.marquee__t { display: inline-flex; align-items: center; animation: scrollx 30s linear infinite; }
.no-anim .marquee__t { animation: none; }
.marquee:hover .marquee__t { animation-play-state: paused; }
.marquee__t span { font-family: var(--display); font-weight: 700; font-size: clamp(1.1rem,2vw,1.7rem); color: var(--ink-faint); padding: 0 1.4rem; display: inline-flex; align-items: center; gap: 1.4rem; }
.marquee__t span::after { content: "✶"; color: var(--red); font-size: 0.7em; }
@keyframes scrollx { to { transform: translateX(-50%); } }

/* ============================================================
   STATEMENT
   ============================================================ */
.statement .wrap { display: grid; grid-template-columns: 0.32fr 1fr; gap: clamp(1.5rem,4vw,5rem); }
.statement__k { align-self: start; }
.statement__body { font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem,3.6vw,3.4rem); line-height: 1.1; letter-spacing: -0.02em; text-wrap: balance; }
.statement__body .word { display: inline-block; transition: opacity 0.5s var(--ease-out); }
.anim .statement__body .word { opacity: 0.18; }
.statement__body .hot, .statement__body .word.hot { color: var(--red); font-weight: 600; }

/* ============================================================
   STATS
   ============================================================ */
.stats { border-top: 1px solid var(--line-soft); }
.stats .wrap { display: grid; grid-template-columns: repeat(4,1fr); gap: clamp(1.5rem,3vw,3rem); }
.stat { border-top: 2px solid var(--red); padding-top: 1.2rem; }
.stat__v { font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem,5.5vw,5rem); line-height: 0.9; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.stat__l { font-family: var(--body); font-size: 0.9rem; color: var(--ink-dim); margin-top: 0.7rem; max-width: 20ch; }

/* ============================================================
   REVEAL (JS sets inline styles too — bulletproof)
   ============================================================ */
.anim .rev { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease-cine), transform 1s var(--ease-cine); }
.anim .rev-l > span { transform: translateY(112%); transition: transform 1.05s var(--ease-cine); }
.anim .stagger > * { opacity: 0; transform: translateY(28px); transition: opacity 0.85s var(--ease-cine), transform 0.85s var(--ease-cine); }
.stagger.show > *:nth-child(1){transition-delay:.04s}.stagger.show > *:nth-child(2){transition-delay:.1s}
.stagger.show > *:nth-child(3){transition-delay:.16s}.stagger.show > *:nth-child(4){transition-delay:.22s}
.stagger.show > *:nth-child(5){transition-delay:.28s}.stagger.show > *:nth-child(6){transition-delay:.34s}
.stagger.show > *:nth-child(7){transition-delay:.40s}.stagger.show > *:nth-child(8){transition-delay:.46s}
.d1{transition-delay:.08s}.d2{transition-delay:.18s}.d3{transition-delay:.28s}.d4{transition-delay:.38s}