/* ============================================================
   CYRCLE Sports – Reset & Motion
   Wird NACH allen Oxygen-Stylesheets geladen.

   Hier steht ausschliesslich, was insert-stylesheet nicht traegt:
   - Tag-Selektoren, die Oxygens eigene Vorgaben neutralisieren
     (global-settings.css setzt body/h1-h6/a per Tag, normalize.min.css
     setzt h1{margin:.67em 0} und h1-h6{line-height:1.2})
   - @media (prefers-reduced-motion: ...) – keine registrierte
     Breakpoint-Query, wird beim Import still verworfen
   - @supports mit verschachtelter Media Query (Hero-Parallaxe)

   Alles andere gehoert in die Oxygen-Selektoren.
   ============================================================ */

/* ---------- 1. Reset ---------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

/* Oxygen setzt h1-h6 per Tag auf --bde-hN-font-size und
   --bde-heading-font-family. Hier auf inherit zuruecksetzen, damit
   ausschliesslich die t-*-Klassen die Typografie bestimmen. */
h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-family: var(--font-sans);
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}

p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* global-settings.css: a{color:var(--bde-links-color)} (0,0,1)
   und a:hover{color:var(--bde-links-color-hover)} (0,1,1).
   Gleiche Spezifitaet, diese Datei laedt spaeter und gewinnt.
   Buttons (.cs-btn:hover = 0,2,0) bleiben davon unberuehrt. */
a { color: inherit; text-decoration: none; }
a:hover { color: inherit; }

/* Langform: die Kurzform "outline:" verliert beim Speichern den Stil. */
:where(a, button, [tabindex]):focus-visible {
  outline-width: 2px;
  outline-style: solid;
  outline-color: var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Der Header liegt absolut und transparent ueber dem Inhalt. Die Wortmarke
   ist cremefarben - das traegt nur ueber dem dunklen Hero der Startseite.
   Auf allen anderen Seiten (Talent-Detailseite) waere sie unsichtbar.
   Spezifitaet 0,2,1 schlaegt .cs-header__logo (0,1,0) unabhaengig von der
   Ladereihenfolge - noetig, weil Oxygen seine Stylesheets nach wp_head
   einfuegt und ueber die Reihenfolge nicht zu gewinnen ist. */
body:not(.home) .cs-header__logo { color: var(--cs-ink); }
/* .cs-logo-mark setzt am inneren Wrapper erneut Creme; das SVG erbt sein
   currentColor von dort, nicht vom <a>. Ohne diese Zeile bleibt die
   Wortmarke auf allen Creme-Seiten unsichtbar. 0,3,1 schlaegt 0,1,0. */
body:not(.home) .cs-header__logo .cs-logo-mark { color: var(--cs-ink); }
body:not(.home) .cs-nav-toggle__icon { color: var(--cs-purple); }

/* Textmarkierung in der Markenfarbe. Cremeschrift auf Purple ergibt
   10,7:1 - deutlich ueber der Anforderung. text-shadow raus, weil
   Schatten unter der Markierung schmutzig aussehen.
   Hinweis: innerhalb von .cs-footer ist --cs-purple lokal etwas
   dunkler gesetzt; die Markierung folgt dem automatisch. */
::selection {
  background-color: var(--cs-purple);
  color: var(--cs-cream);
  text-shadow: none;
}

/* Lange Komposita duerfen den Container nicht sprengen. */
.cs-service-card__text, .cs-contact__text, .cs-footer-address {
  overflow-wrap: break-word;
}


/* ---------- 2. Reduced Motion -------------------------------
   Die Marquee-Regeln brauchen dieselbe Spezifitaet wie die
   Richtungsregel (.cs-marquee--right .cs-marquee__track = 0,2,0),
   sonst greifen sie nicht.
------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  :root { --dur-fast: .01ms; --dur: .01ms; }

  .cs-marquee--left .cs-marquee__track,
  .cs-marquee--right .cs-marquee__track { animation: none; transform: none; }

  .cs-marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; }

  /* Bewegung raus, Ein-/Ausblenden bleibt als Orientierung. */
  .reveal-armed .cs-reveal { transform: none; }
  .cs-reveal { transition-duration: 250ms; transition-delay: 0ms; }

  /* Zoom raus, Rahmen und Purple-Layer bleiben - eine Farbblende
     ist keine Bewegung. body davor, weil Oxygens selectors.css
     spaeter laedt und bei gleicher Spezifitaet sonst gewinnt. */
  body .cs-talent-card__frame:hover .cs-talent-card__img { transform: none; }
}


/* ---------- 3. Hero-Parallaxe -------------------------------
   Scroll-driven CSS-Animation, laeuft off-main-thread.
   scale(1.12) ist der Puffer, damit beim Versatz keine Kante
   sichtbar wird. Fehlt animation-timeline, bleibt das Bild
   statisch - bewusst kein rAF-Fallback.
------------------------------------------------------------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .cs-hero__img {
      animation: cs-hero-parallax linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100vh;
      will-change: transform;
    }

    @keyframes cs-hero-parallax {
      from { transform: translate3d(0, -5%, 0) scale(1.12); }
      to   { transform: translate3d(0,  5%, 0) scale(1.12); }
    }
  }
}


/* ---------- 4. Smooth Scroll (Lenis) ------------------------
   Offizielle Regeln der Bibliothek. Sie greifen nur, solange
   Lenis laeuft - bei prefers-reduced-motion wird es gar nicht
   erst gestartet, dann gilt wieder scroll-behavior: auto.
------------------------------------------------------------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Kontrastumschaltung der Wortmarke. Das JS misst die Helligkeit der
   Flaeche unter dem Header und setzt is-on-dark bzw. is-on-light.
   Vier Klassen (0,4,0) schlagen die statische Regel darueber (0,3,1),
   die als Rueckfall ohne JavaScript stehen bleibt. */
.cs-header.is-on-dark  .cs-header__logo .cs-logo-mark { color: var(--cs-cream); }
.cs-header.is-on-light .cs-header__logo .cs-logo-mark { color: var(--cs-ink); }
.cs-header.is-on-dark  .cs-nav-toggle__icon { color: var(--cs-cream); }
.cs-header.is-on-light .cs-nav-toggle__icon { color: var(--cs-purple); }

.cs-logo-mark,
.cs-nav-toggle__icon { transition: color 200ms cubic-bezier(.22, 1, .36, 1); }

/* Kein Faden beim ersten Setzen - siehe is-contrast-ready im JS. */
.cs-header:not(.is-contrast-ready) .cs-logo-mark,
.cs-header:not(.is-contrast-ready) .cs-nav-toggle__icon { transition: none; }