/* ==========================================================================
   StudioOS Scroll-Logo-Intro (nur Startseite)
   Alle Klassen/IDs mit "sos-" präfixt, Variablen auf .sos-intro gescoped –
   JS setzt --sos-p, --sos-glow … auf die Section, nicht auf :root.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("../fonts/montserrat.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

.sos-intro {
  --sos-bg: #07070a;
  --sos-white: #f2f2f4;
  --sos-purple: #8b3dff;
  --sos-pink: #ff2d95;
  --sos-orange: #ff8a1f;
  --sos-grad: linear-gradient(100deg, var(--sos-purple) 0%, var(--sos-pink) 50%, var(--sos-orange) 100%);
  position: relative;
  height: 320vh; /* Scroll-Länge der Animation */
  background: var(--sos-bg);
  color: var(--sos-white);
  font-family: "Montserrat", system-ui, sans-serif;
}
.sos-stage {
  position: sticky; top: 0; height: 100vh; height: 100svh;
  overflow: hidden; display: grid; place-items: center;
}

/* Hintergrund: Rauch-Video (per Scroll gespult) + CSS-Fallback */
.sos-bg, .sos-bg video, .sos-bg .sos-fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.sos-bg { opacity: calc(1 - var(--sos-out, 0) * 0.85); }
.sos-bg video { object-fit: cover; opacity: 0; transition: opacity .8s; transform: scale(calc(1.08 - var(--sos-zoom, 0) * 0.08)); }
.sos-bg video.sos-ready { opacity: 1; }
.sos-bg .sos-fallback {
  background:
    radial-gradient(40% 35% at 20% 25%, rgba(139,61,255,.18), transparent 70%),
    radial-gradient(35% 30% at 80% 75%, rgba(255,138,31,.14), transparent 70%),
    radial-gradient(60% 60% at 50% 50%, #111116, var(--sos-bg) 75%);
  animation: sos-drift 18s ease-in-out infinite alternate;
}
@keyframes sos-drift { to { transform: scale(1.12) rotate(2deg); } }
.sos-bg::after { /* Vignette, damit das Logo immer vor dunklem Grund steht */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(55% 55% at 50% 50%, rgba(7,7,10,.55), rgba(7,7,10,.15) 60%, rgba(7,7,10,.85) 100%);
}

.sos-logo {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  width: min(88vw, 640px);
  transform: translateY(calc(var(--sos-out, 0) * -9vh)) scale(calc(0.9 + var(--sos-zoom, 0) * 0.1 - var(--sos-out, 0) * 0.08));
  opacity: calc(1 - var(--sos-out, 0) * 1.1);
  filter: blur(calc(var(--sos-out, 0) * 8px));
}

/* Monogramm */
.sos-mark { width: 46%; overflow: visible; filter: drop-shadow(0 0 calc(var(--sos-glow, 0) * 28px) rgba(255,45,149,.55)); }
.sos-mark path { fill: none; stroke-width: 44; stroke-linejoin: round; stroke-linecap: butt; }
.sos-mark .sos-w { stroke: var(--sos-white); }
.sos-mark .sos-a { stroke: url(#sos-accent); }

/* Schriftzug */
.sos-word {
  margin-top: 7%; font-weight: 700; letter-spacing: -0.02em; line-height: 1;
  font-size: clamp(44px, 13vw, 118px); white-space: nowrap;
  opacity: var(--sos-word, 0);
  transform: translateY(calc((1 - var(--sos-word, 0)) * 30px));
  filter: blur(calc((1 - var(--sos-word, 0)) * 10px));
}
.sos-word .sos-os {
  margin-left: .14em;
  /* Verlauf + heller Glanz, der beim Scrollen einmal drüberläuft */
  background:
    linear-gradient(100deg, transparent 40%, rgba(255,255,255,.85) 50%, transparent 60%),
    var(--sos-grad);
  background-size: 300% 100%, 100% 100%;
  background-position: calc(100% - var(--sos-sweep, 0) * 100%) 0, 0 0;
  background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sos-tag {
  margin-top: 5%; font-weight: 400; font-size: clamp(10px, 2.4vw, 19px);
  letter-spacing: calc(0.35em + (1 - var(--sos-tag, 0)) * 0.5em);
  text-indent: calc(0.35em + (1 - var(--sos-tag, 0)) * 0.5em); /* hält den Text zentriert */
  opacity: var(--sos-tag, 0); white-space: nowrap; color: #d6d6dc;
}
.sos-ig { margin-top: 5%; display: flex; align-items: center; gap: 18px; opacity: var(--sos-ig, 0); }
.sos-ig span { display: block; height: 1.5px; width: calc(var(--sos-ig, 0) * 64px); background: #9a9aa3; }
.sos-ig svg { width: 36px; height: 36px; transform: scale(calc(0.6 + var(--sos-ig, 0) * 0.4)); }

.sos-hint {
  position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 1;
  font-size: 11px; letter-spacing: .3em; color: #8a8a93; opacity: calc(1 - var(--sos-p, 0) * 6);
}

@media (prefers-reduced-motion: reduce) {
  .sos-bg .sos-fallback { animation: none; }
}

/* weicher Übergang vom Rauch in den Seitenhintergrund, wenn die Stage wegscrollt */
.sos-intro::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45vh; z-index: 2; pointer-events: none;
  background: linear-gradient(transparent, var(--bg, #07060a));
}