/* premium.css — Award-Level-Elevation ÜBER dem Mockup (lädt nach site.css +
   fixes.css). Verändert site.css nicht. Ziel: distinktive Display-Typografie,
   filmischer Headline-Reveal, taktile Micro-Interactions, scroll-reaktiver
   Header — GPU-only (transform/opacity), reduced-motion-sicher. */

/* ---------------------------------------------------------------------------
   1. Display-Typografie — Space Grotesk (self-hosted) für Headlines.
   Kein Default-Inter-Look mehr; Inter bleibt für Fliesstext. Thematisch zum
   Cosmic/„Loglight"-Brand. Über --display steuerbar/swappbar.
--------------------------------------------------------------------------- */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-display: swap;
  font-weight: 300 700;
  src: url('/fonts/space-grotesk-variable.woff2') format('woff2');
}
:root { --display: 'Space Grotesk', 'Inter', sans-serif; }

h1, h2, h3,
.menuLinks a,
.kicker, .eyebrow,
.preloaderText,
.caseInfo h2, #caseTitle,
.portfolioIntro h2 {
  font-family: var(--display);
}
/* Space Grotesk trägt mehr Gewicht pro Glyphe — Tracking leicht öffnen,
   Weight auf das verfügbare Maximum (700) für Display-Wucht. */
h1, h2, .caseInfo h2, #caseTitle, .portfolioIntro h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
}
.menuLinks a { font-weight: 700; letter-spacing: -0.04em; }

/* ---------------------------------------------------------------------------
   2. Filmischer Hero-Headline-Reveal (Wort-Clip-Stagger).
   premium.js splittet die Hero-H1 in .pw > .pw-in. Wörter steigen geclippt
   nach oben ein, gestaffelt über --i. Nur transform/opacity.
--------------------------------------------------------------------------- */
.pw { display: inline-block; overflow: hidden; vertical-align: top; }
.pw-in {
  display: inline-block;
  transform: translateY(115%);
  opacity: 0;
  will-change: transform;
  transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.is-in .pw-in { transform: translateY(0); opacity: 1; }

/* ---------------------------------------------------------------------------
   3. Taktile Micro-Interactions (nur feiner Zeiger, kein Touch).
--------------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .btn { will-change: transform; }
  .btn.magnetic { transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.25s ease, background 0.25s ease; }
  .btn.primary {
    position: relative;
    overflow: hidden;
  }
  /* Sheen-Sweep beim Hover über den Primär-CTA. */
  .btn.primary::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%);
    transform: translateX(-130%);
    transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    pointer-events: none;
  }
  .btn.primary:hover::after { transform: translateX(130%); }
  .cleanRefCard, .storyTile, .compare, .founderCard { transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease, border-color 0.3s ease; }
  .cleanRefCard:hover, .founderCard:hover { transform: translateY(-6px); }
}

/* ---------------------------------------------------------------------------
   4. Scroll-reaktiver Header — versteckt beim Runterscrollen, kommt beim
   Hochscrollen zurück; verdichtet sich (stärkeres Glas) nach dem ersten Scroll.
--------------------------------------------------------------------------- */
.header {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease;
  border-bottom: 1px solid transparent;
  will-change: transform;
}
.header.is-scrolled {
  background: linear-gradient(180deg, rgba(5, 5, 8, 0.86), rgba(5, 5, 8, 0.55));
  backdrop-filter: blur(18px) saturate(1.2);
  border-bottom-color: rgba(255, 255, 255, 0.07);
}
.header.is-hidden { transform: translateY(-105%); }
body.menu-open .header.is-hidden { transform: none; } /* bei offenem Menü sichtbar */

/* ---------------------------------------------------------------------------
   5. Smooth-Scroll (Lenis) — Feinheiten. premium.js entscheidet, ob aktiv.
--------------------------------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------------------------------------------------------------------------
   6. Reduced Motion — alle Zusatz-Animationen aus.
--------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .pw-in { transform: none !important; opacity: 1 !important; transition: none !important; }
  .btn.primary::after { display: none; }
  .header { transition: none; }
}