/* ============================================================
   KOPFKINO — Website  ·  Core / Chrome  (site.css)
   Sora-led · Rotlicht #E8593C · cinematic dark
   ============================================================ */

:root{
  --black:   #050505;
  --ink:     #0A0A0A;
  --ink-2:   #121212;
  --ink-3:   #1A1A1A;
  --line:    rgba(245,244,240,.12);
  --line-2:  rgba(245,244,240,.06);
  --white:   #F5F4F0;
  --mid:     #8C8C8C;
  --dim:     #5C5C58;
  --red:     #E8593C;
  --red-2:   #ff6a47;

  --font:  "Sora", system-ui, -apple-system, sans-serif;
  --mono:  "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --pad:   clamp(20px, 5vw, 80px);
  --maxw:  1440px;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--ink); color:var(--white);
  font-family:var(--font); font-weight:400; line-height:1.5;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
body.locked{ overflow:hidden; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--red); color:#0A0A0A; }

@media (min-width:1024px){ body{ cursor:none; } }

/* ---------- type helpers ---------- */
.eyebrow{ font-family:var(--mono); font-size:clamp(10px,.85vw,12px); letter-spacing:.28em;
  text-transform:uppercase; color:var(--red); font-weight:500; display:inline-flex; align-items:center; gap:12px; }
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--red); }
.eyebrow.center{ justify-content:center; }
.mono{ font-family:var(--mono); font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--mid); }
.display{ font-weight:800; line-height:.92; letter-spacing:-.03em; text-wrap:balance; }
.display em{ font-style:normal; color:var(--red); }
h1,h2,h3,h4{ font-weight:800; line-height:1; letter-spacing:-.02em; }
.lede{ color:var(--mid); font-size:clamp(16px,1.5vw,21px); line-height:1.6; max-width:62ch; }
.lede strong{ color:var(--white); font-weight:600; }

.wrap{ max-width:var(--maxw); margin:0 auto; padding-left:var(--pad); padding-right:var(--pad); }
section{ position:relative; }

/* ---------- buttons ---------- */
.btn{ display:inline-flex; align-items:center; gap:12px; font-family:var(--mono);
  font-size:12px; letter-spacing:.16em; text-transform:uppercase; font-weight:500;
  padding:16px 26px; border-radius:999px; border:1px solid var(--line);
  transition:.35s cubic-bezier(.2,.7,.2,1); position:relative; overflow:hidden; }
.btn .dot{ width:7px; height:7px; border-radius:50%; background:var(--red); }
.btn.primary{ background:var(--red); color:#0A0A0A; border-color:var(--red); font-weight:700; }
.btn.primary .dot{ background:#0A0A0A; }
.btn.primary:hover{ background:var(--red-2); transform:translateY(-2px); box-shadow:0 12px 40px -12px var(--red); }
.btn.ghost:hover{ border-color:var(--white); background:rgba(245,244,240,.04); transform:translateY(-2px); }
.btn .arr{ transition:transform .35s; }
.btn:hover .arr{ transform:translateX(4px); }

/* ============================================================
   CURSOR
   ============================================================ */
.cursor,.cursor-ring{ display:none; }
@media (min-width:1024px){
  .cursor{ position:fixed; top:0; left:0; width:7px; height:7px; background:var(--red);
    border-radius:50%; pointer-events:none; z-index:9999; transform:translate(-50%,-50%);
    mix-blend-mode:difference; transition:width .25s,height .25s; display:block; }
  .cursor-ring{ position:fixed; top:0; left:0; width:38px; height:38px; border:1px solid rgba(245,244,240,.5);
    border-radius:50%; pointer-events:none; z-index:9998; transform:translate(-50%,-50%);
    transition:width .25s,height .25s,border-color .25s,opacity .25s; display:block; }
  .cursor-ring.hover{ width:74px; height:74px; border-color:var(--red); }
  .cursor.hover{ width:0; height:0; }
  .cursor-ring.down{ width:28px; height:28px; }
}

/* ============================================================
   LOADER
   ============================================================ */
.loader{ position:fixed; inset:0; z-index:10000; background:var(--black);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:34px;
  transition:opacity .8s ease,visibility .8s; }
.loader.done{ opacity:0; visibility:hidden; pointer-events:none; }
.loader-logo{ width:74px; height:auto; opacity:0; animation:logoIn 1.1s cubic-bezier(.2,.7,.2,1) forwards; }
@keyframes logoIn{ 0%{ opacity:0; transform:scale(.6) rotate(-8deg);} 100%{ opacity:1; transform:scale(1) rotate(0);} }
.loader-tag{ font-family:var(--mono); font-size:11px; letter-spacing:.4em; text-transform:uppercase;
  color:var(--red); font-weight:700; opacity:0; animation:fadeIn .7s ease .5s forwards; }
.loader-bar{ width:180px; height:1px; background:rgba(245,244,240,.12); overflow:hidden; }
.loader-fill{ height:100%; width:0; background:var(--red); }
.loader-pct{ font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--dim); }
@keyframes fadeIn{ to{ opacity:1; } }

/* ============================================================
   HEADER / NAV
   ============================================================ */
.header{ position:fixed; inset:0 0 auto 0; z-index:200; display:flex; align-items:center;
  justify-content:space-between; padding:18px var(--pad); pointer-events:none;
  transition:background .4s,backdrop-filter .4s,padding .4s,border-color .4s;
  border-bottom:1px solid transparent; }
.header.solid{ padding-top:12px; padding-bottom:12px; }

/* broadcast status bar (top) */
.statusbar{ position:sticky; top:0; z-index:200; display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:9px var(--pad); background:rgba(8,8,8,.66); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line); font-family:var(--mono); font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:var(--mid); }
.statusbar .sb-brand{ display:flex; align-items:center; gap:12px; }
.statusbar .sb-brand img{ height:17px; width:auto; }
.statusbar .sb-tag{ color:var(--mid); }
.statusbar .rec{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--red); animation:pulse 1.3s infinite; }
.statusbar .sb-meta{ display:flex; align-items:center; gap:18px; white-space:nowrap; }
.statusbar #tc{ color:var(--white); font-variant-numeric:tabular-nums; }
.statusbar .eq{ display:inline-flex; gap:2px; align-items:flex-end; height:13px; }
.statusbar .eq i{ width:2px; background:var(--red); border-radius:1px; animation:eq .8s ease-in-out infinite alternate; }
.statusbar .eq i:nth-child(2){ animation-delay:.1s } .statusbar .eq i:nth-child(3){ animation-delay:.2s }
.statusbar .eq i:nth-child(4){ animation-delay:.15s } .statusbar .eq i:nth-child(5){ animation-delay:.25s }
@media(max-width:1024px){ .statusbar .sb-tag{ display:none; } }
@media(max-width:560px){ .statusbar .hide-sm{ display:none; } .statusbar .sb-meta{ gap:14px; } }
@media(prefers-reduced-motion:reduce){ .statusbar .rec,.statusbar .eq i{ animation:none; } }
.header.hide{ transform:translateY(-110%); }
.header > *{ pointer-events:auto; }
.brand{ display:flex; align-items:center; gap:12px; }
.brand img{ height:30px; width:auto; }
.brand .eq{ display:inline-flex; gap:2px; align-items:flex-end; height:14px; }
.brand .eq i{ width:2px; background:var(--red); border-radius:1px; animation:eq .8s ease-in-out infinite alternate; }
.brand .eq i:nth-child(2){ animation-delay:.1s } .brand .eq i:nth-child(3){ animation-delay:.2s }
@keyframes eq{ 0%{ height:11px } to{ height:3px } }

.nav{ display:flex; gap:28px; align-items:center; }
.nav a{ font-family:var(--mono); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,244,240,.8); position:relative; padding:4px 0; }
.nav a::after{ content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:var(--red); transition:width .3s; }
.nav a:hover{ color:var(--white); } .nav a:hover::after{ width:100%; }
.nav .cta-link{ color:var(--red); }
.nav-toggle{ display:none; }
.header-meta{ font-family:var(--mono); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
  color:rgba(245,244,240,.7); display:flex; align-items:center; gap:9px; }
.header-meta .rec{ width:7px; height:7px; border-radius:50%; background:var(--red); box-shadow:0 0 10px var(--red); animation:pulse 1.3s infinite; }
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1)} 50%{ opacity:.4; transform:scale(.7)} }

@media (max-width:1024px){
  .nav{ position:fixed; inset:0; flex-direction:column; justify-content:center; gap:8px;
    background:rgba(5,5,5,.97); backdrop-filter:blur(8px); transform:translateY(-100%);
    transition:transform .5s cubic-bezier(.6,0,.2,1); z-index:190; }
  .nav.open{ transform:translateY(0); }
  .nav a{ font-size:20px; letter-spacing:.06em; }
  .nav a::after{ display:none; }
  .header-meta{ display:none; }
  .nav-toggle{ display:flex; flex-direction:column; gap:5px; width:30px; height:22px; justify-content:center;
    background:none; border:0; cursor:pointer; z-index:210; }
  .nav-toggle span{ height:2px; background:var(--white); border-radius:2px; transition:.35s; }
  .nav-toggle.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .nav-toggle.open span:nth-child(2){ opacity:0; }
  .nav-toggle.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
}

/* fixed corner UI */
.ui-corner{ position:fixed; bottom:18px; z-index:150; font-family:var(--mono); font-size:9px;
  letter-spacing:.18em; text-transform:uppercase; color:rgba(245,244,240,.45); mix-blend-mode:difference; pointer-events:none; }
.ui-corner.bl{ left:var(--pad); } .ui-corner.br{ right:var(--pad); display:flex; gap:3px; align-items:flex-end; height:20px; }
.ui-corner.br i{ width:3px; background:var(--white); border-radius:1px; animation:eq .8s ease-in-out infinite alternate; }
.ui-corner.br i:nth-child(2){ animation-delay:.12s } .ui-corner.br i:nth-child(3){ animation-delay:.22s }
.ui-corner.br i:nth-child(4){ animation-delay:.16s } .ui-corner.br i:nth-child(5){ animation-delay:.26s }
@media(max-width:900px){ .ui-corner{ display:none; } }

/* ============================================================
   REVEAL SYSTEM
   ============================================================ */
.reveal{ opacity:0; transform:translateY(38px); transition:opacity 1s cubic-bezier(.2,.7,.2,1),transform 1s cubic-bezier(.2,.7,.2,1); }
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:.08s } .reveal.d2{ transition-delay:.16s } .reveal.d3{ transition-delay:.24s }
.reveal.d4{ transition-delay:.32s } .reveal.d5{ transition-delay:.4s }
.clip{ clip-path:inset(0 100% 0 0); transition:clip-path 1.1s cubic-bezier(.6,0,.2,1); }
.clip.in{ clip-path:inset(0 0 0 0); }
.img-zoom{ overflow:hidden; }
.img-zoom img{ transition:transform 1.4s cubic-bezier(.2,.7,.2,1); transform:scale(1.18); }
.img-zoom.in img{ transform:scale(1); }
@media (prefers-reduced-motion:reduce){
  .reveal,.clip,.img-zoom img{ opacity:1!important; transform:none!important; clip-path:none!important; transition:none!important; }
  .brand .eq i,.ui-corner.br i,.header-meta .rec{ animation:none!important; }
}

/* ============================================================
   HERO — IRIS REVEAL
   ============================================================ */
.hero{ height:240vh; position:relative; }
.hero-sticky{ position:sticky; top:0; height:100vh; overflow:hidden;
  display:flex; align-items:center; justify-content:center; background:var(--black); }
.hero-media{ position:absolute; inset:0; }
.hero-media img{ width:100%; height:100%; object-fit:cover;
  transform:scale(calc(1.35 - .35 * var(--p,0)));
  filter:brightness(.62) contrast(1.12) saturate(1.05) blur(calc((1 - var(--p,0)) * 14px)); }
.hero-media::after{ content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at center, transparent 25%, rgba(5,5,5,.55) 78%),
             linear-gradient(180deg, rgba(5,5,5,.6), transparent 30%, rgba(5,5,5,.92)); }
/* iris: black with a growing transparent circle */
.hero-iris{ position:absolute; inset:0; pointer-events:none; z-index:3;
  background:radial-gradient(circle at center,
    transparent calc(var(--p,0) * 150%),
    var(--black) calc(var(--p,0) * 150% + .5px)); }
.hero-aperture{ position:absolute; top:50%; left:50%; width:min(70vw,70vh); height:min(70vw,70vh);
  transform:translate(-50%,-50%) scale(calc(.5 + var(--p,0) * 1.6)) rotate(calc(var(--p,0) * 80deg));
  z-index:4; pointer-events:none; opacity:calc(.5 - var(--p,0) * .6); }
.hero-aperture .ring{ position:absolute; inset:0; border:1px solid rgba(232,89,60,.5); border-radius:50%; }
.hero-aperture .ring:nth-child(2){ inset:12%; border-color:rgba(245,244,240,.18); }
.hero-aperture .ring:nth-child(3){ inset:30%; border-color:rgba(232,89,60,.3); }
.hero-aperture .tick{ position:absolute; top:50%; left:50%; width:50%; height:1px;
  background:linear-gradient(90deg, transparent, rgba(245,244,240,.25)); transform-origin:left center; }

.hero-copy{ position:relative; z-index:5; text-align:center; padding:0 var(--pad);
  opacity:calc((var(--p,0) - .35) * 2.6); transform:translateY(calc((1 - var(--p,0)) * 40px)); }
.hero-kicker{ margin-bottom:clamp(20px,3vw,34px); }
.hero h1{ font-size:clamp(56px,13vw,210px); line-height:.86; letter-spacing:-.04em; }
.hero h1 em{ font-style:normal; color:var(--red); }
.hero-sub{ margin-top:clamp(22px,3vw,38px); font-family:var(--mono); font-size:clamp(10px,1.1vw,13px);
  letter-spacing:.26em; text-transform:uppercase; color:rgba(245,244,240,.78); }
.hero-scroll{ position:absolute; bottom:30px; left:50%; transform:translateX(-50%); z-index:5;
  font-family:var(--mono); font-size:10px; letter-spacing:.3em; text-transform:uppercase; color:var(--mid);
  display:flex; flex-direction:column; align-items:center; gap:10px; opacity:calc(1 - var(--p,0)*1.6); }
.hero-scroll .line{ width:1px; height:34px; background:linear-gradient(var(--red),transparent); animation:scrollLine 2s ease-in-out infinite; }
@keyframes scrollLine{ 0%,100%{ transform:scaleY(.4); transform-origin:top } 50%{ transform:scaleY(1); transform-origin:top } }
.hero-scanlines{ position:absolute; inset:0; z-index:6; pointer-events:none; opacity:.35; mix-blend-mode:overlay;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee{ overflow:hidden; white-space:nowrap; border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:clamp(26px,4vw,48px) 0; }
.marquee-row{ display:inline-flex; gap:64px; align-items:center; animation:marq 30s linear infinite; }
.marquee:hover .marquee-row{ animation-play-state:paused; }
.marquee-row span{ font-weight:800; font-size:clamp(28px,5vw,72px); letter-spacing:-.02em; color:rgba(245,244,240,.42); transition:color .3s; }
.marquee-row span:hover{ color:var(--white); }
.marquee-row .dot{ width:10px; height:10px; border-radius:50%; background:var(--red); flex:none; }
@keyframes marq{ to{ transform:translateX(-50%); } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer{ background:var(--black); border-top:1px solid var(--line); padding:clamp(60px,8vw,110px) 0 40px; }
.footer-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:40px; }
@media(max-width:780px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:32px; } }
@media(max-width:520px){ .footer-grid{ grid-template-columns:1fr; } }
.footer .col h5{ font-family:var(--mono); font-size:10px; letter-spacing:.2em; text-transform:uppercase; color:var(--red); margin-bottom:18px; font-weight:500; }
.footer .col a,.footer .col p{ display:block; color:var(--mid); font-size:14px; line-height:2; }
.footer .col a:hover{ color:var(--white); }
.footer .big img{ height:40px; margin-bottom:22px; }
.footer .big .claim{ font-weight:700; font-size:clamp(18px,2vw,24px); letter-spacing:-.01em; max-width:18ch; line-height:1.15; }
.footer .big .claim em{ font-style:normal; color:var(--red); }
.footer-base{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:clamp(48px,6vw,80px);
  padding-top:24px; border-top:1px solid var(--line); font-family:var(--mono); font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:var(--dim); }