/* ============================================================
   Royal Infinity Tech — effects.css (WOW-Layer, auf Dimis Ansage)
   Farbe, Tiefe, Parallax, 3D. Liegt UEBER site.css. Alle
   Ausblend-Zustaende gelten NUR unter html.fx-on (setzt JS, wenn
   prefers-reduced-motion aus ist) — ohne JS bleibt alles sichtbar.
   ============================================================ */

:root {
  --grad-royal: linear-gradient(120deg, #2547CB 0%, #2F45D6 45%, #4A72E8 100%);
  --grad-text: linear-gradient(105deg, #2436A8 0%, #2F45D6 55%, #2E8FE0 115%);
  --tint-a: #EEF3FE;
  --tint-b: #F8FAFF;
  --glow-blue: 0 20px 60px -24px rgba(47, 69, 214, .45);
}

/* ---------- Scroll-Fortschritt + Header ---------- */
.fx-progress {
  position: fixed; top: 0; left: 0; height: 4px; width: 100%;
  transform-origin: 0 50%; transform: scaleX(0);
  background: var(--grad-royal); z-index: 90; pointer-events: none;
  box-shadow: 0 1px 10px rgba(47,69,214,.55);
}
html.fx-on .site-header { transition: transform .45s cubic-bezier(.2,.65,.25,1), box-shadow .45s ease, background-color .45s ease; }
html.fx-on .site-header.fx-hide { transform: translateY(-100%); }
html.fx-on .site-header.fx-raised {
  box-shadow: 0 8px 30px -18px rgba(11,16,32,.25);
  background: rgba(251,251,253,.78);
  -webkit-backdrop-filter: saturate(1.5) blur(14px);
  backdrop-filter: saturate(1.5) blur(14px);
}

/* ---------- Aurora-Farbflaechen ---------- */
.hero, .page-hero { position: relative; overflow: clip; }
/* Aurora stark gedaempft (04.08., Dimi: wirkte KI-generiert) — ein leiser
   Farbhauch oben rechts, keine Farbnebel-Buehne mehr. */
.hero::before, .page-hero::before {
  content: ""; position: absolute; inset: -18% -10% auto auto;
  width: 70%; height: 120%; pointer-events: none; z-index: 0;
  background:
    radial-gradient(44% 55% at 78% 26%, rgba(74,114,232,.12), transparent 68%),
    radial-gradient(30% 40% at 92% 58%, rgba(195,239,255,.14), transparent 70%);
}
html.fx-on .hero::before, html.fx-on .page-hero::before { animation: aurora 18s ease-in-out infinite alternate; }
@keyframes aurora {
  from { transform: translate3d(0,0,0) scale(1); opacity: .8; }
  to { transform: translate3d(-3%, 2%, 0) scale(1.05); opacity: 1; }
}
.hero .wrap, .page-hero .wrap { position: relative; z-index: 2; }

/* Konstellations-Canvas entfernt (04.08., Dimi: der KI-Template-Marker). */

/* ---------- Farbige Sektionen statt flacher Flaechen ---------- */
.section-tint { background: linear-gradient(180deg, var(--tint-b) 0%, var(--tint-a) 55%, var(--tint-b) 100%); }
.section { position: relative; }
h2 .lead-in {
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #2436A8;
}
.eyebrow::before { color: var(--blue); }
.stat-row { box-shadow: var(--glow-blue); border-color: #DFE6F8; overflow: hidden; position: relative; }
.stat-row::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--grad-royal);
}
.section-dark .stat-row { box-shadow: none; }
.stat-value { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.section-dark .stat-value { background: linear-gradient(105deg, #C3EFFF, #8FB4FF 60%, #A9B4FF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* Knoepfe: Verlauf + Schein + Sweep */
.btn-primary {
  background: var(--grad-royal);
  box-shadow: 0 10px 30px -12px rgba(47,69,214,.55);
  position: relative; overflow: hidden;
}
.btn-primary::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  transform: translateX(-120%);
}
html.fx-on .btn-primary:hover::after { transition: transform .7s ease; transform: translateX(120%); }
.btn-primary:hover { box-shadow: 0 14px 40px -12px rgba(47,69,214,.7); }
html.fx-on .btn { transition: transform .18s ease, box-shadow .25s ease, background-color .2s ease; will-change: transform; }

/* ---------- 3D-Karten (Tilt + Glanz) ---------- */
html.fx-on .card, html.fx-on .doc-index {
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateZ(0);
  transition: transform .25s cubic-bezier(.2,.65,.3,1), box-shadow .3s ease, border-color .2s ease;
  position: relative; overflow: clip;
}
html.fx-on a.card:hover {
  box-shadow: 0 24px 60px -24px rgba(47,69,214,.45);
  border-color: var(--blue);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(-4px);
}
html.fx-on .card::after, html.fx-on .doc-index::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(74,114,232,.24), transparent 65%);
  transition: opacity .25s ease;
}
/* Tiefen-Pop: Kartenkinder schweben beim Tilt leicht vor der Flaeche */
html.fx-on .card > h3, html.fx-on .card > .card-media { transform: translateZ(22px); }
html.fx-on .card > p, html.fx-on .card > .num { transform: translateZ(12px); }
html.fx-on .card:hover::after, html.fx-on .doc-index:hover::after { opacity: 1; }
html.fx-on .doc-index { box-shadow: 0 30px 70px -30px rgba(11,16,32,.35); }

/* ---------- Reveal-Grundzustaende (nur fx-on) ---------- */
html.fx-on [data-fx="rise"], html.fx-on .block, html.fx-on .stat, html.fx-on .card,
html.fx-on .rel-list li, html.fx-on .kv, html.fx-on .diagram-frame, html.fx-on table {
  opacity: 0; transform: translateY(34px);
}
html.fx-on .fx-in { opacity: 1 !important; transform: none !important; }

/* Hero-Zeilen: 3D-Kipp-Reveal */
html.fx-on .fx-line { display: block; overflow: hidden; }
html.fx-on .fx-line > span {
  display: block; transform-origin: 50% 100%;
  transform: translateY(110%) rotateX(-38deg); opacity: 0;
}
.hero h1 { perspective: 800px; }

/* Alte Einmal-Animationen unter fx-on abschalten (GSAP uebernimmt) */
html.fx-on .reveal, html.fx-on .reveal-2, html.fx-on .reveal-3 { animation: none; }
html.fx-on .loop-ready .loop-node, html.fx-on .loop-ready .loop-edge, html.fx-on .loop-ready .loop-esc,
html.fx-on .loop-node, html.fx-on .loop-edge, html.fx-on .loop-esc { transition: none; }

/* ---------- Die dunkle Sektion: Kino ---------- */
.section-dark { position: relative; overflow: clip; }
.section-dark::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(55% 70% at 82% 10%, rgba(47,69,214,.35), transparent 65%),
    radial-gradient(40% 55% at 12% 88%, rgba(14,101,168,.28), transparent 70%),
    radial-gradient(24% 30% at 50% 0%, rgba(195,239,255,.10), transparent 75%);
}
.section-dark::after {
  content: ""; position: absolute; left: -10%; right: -10%; bottom: -12%;
  height: 55%; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(143,180,255,.13) 0 1px, transparent 1px 64px),
    repeating-linear-gradient(0deg, rgba(143,180,255,.10) 0 1px, transparent 1px 44px);
  transform: perspective(620px) rotateX(62deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
}
.section-dark .wrap { position: relative; z-index: 2; }
.section-dark .glow-line { display: block; }

/* ---------- Seitenuebergang ---------- */
/* WICHTIG: kein transform auf body — selbst eine Identitaets-Transformation
   zerstoert position:fixed (Pin-Szene). Nur Deckkraft. */
html.fx-on body { animation: pagein .5s ease both; }
@keyframes pagein { from { opacity: 0; } to { opacity: 1; } }
html.fx-on body.fx-leaving { transition: opacity .22s ease; opacity: 0; }

/* ---------- Scroll-Hinweis im Hero ---------- */
.fx-cue {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: 2.2rem;
  font: 500 .74rem/1 var(--font-data); letter-spacing: .16em; color: var(--slate);
  text-transform: lowercase;
}
.fx-cue::before {
  content: ""; width: 1px; height: 2.4rem; background: linear-gradient(var(--blue), transparent);
}
html.fx-on .fx-cue::before { animation: cue 1.8s ease-in-out infinite; transform-origin: top; }
@keyframes cue { 0% { transform: scaleY(.2); opacity: 0; } 45% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1) translateY(12px); opacity: 0; } }

/* ---------- Footer-Wasserzeichen ---------- */
.site-footer { position: relative; overflow: clip; }
.site-footer::after {
  content: ""; position: absolute; right: -4%; bottom: -18%; width: 340px; height: 226px;
  background: url("../img/rit-mark.svg") no-repeat center / contain;
  opacity: .05; pointer-events: none;
}

/* ---------- Reduzierte Bewegung: alles statisch ---------- */
@media (prefers-reduced-motion: reduce) {
  .hero::before, .page-hero::before, .fx-cue::before,
  .stat-row::before, h2 .lead-in { animation: none !important; }
  .fx-ring, .fx-wipe, .fx-grain, .fx-sweep { display: none; }
}

/* ---------- Bild-Komponenten (Nano-Banana-Set, CI-Look) ---------- */
.hero-visual { position: relative; display: none; }
@media (min-width: 1000px) {
  .hero-visual { display: block; }
  .hero-grid { grid-template-columns: 1.35fr 1fr; }
  .hero-grid h1 { font-size: clamp(2.4rem, 3.9vw, 3.85rem); max-width: none; }
}
.hero-visual img {
  display: block; width: 100%; border-radius: 10px;
  box-shadow: 0 40px 90px -35px rgba(4,17,41,.55);
}
/* Doc-Index unter dem Schaubild (04.08.: darf keinen Inhalt mehr verdecken) */
.hero-visual .doc-index {
  position: static; max-width: none; margin-top: 1.1rem; background: #fff;
}
.hero-visual .doc-index ol { columns: 2; column-gap: 1.6rem; }
.hero-visual .doc-index li { break-inside: avoid; }
.card-media { display: block; margin: -1.6rem -1.6rem 1rem; overflow: hidden; border-bottom: 1px solid var(--mist); }
.card-media img { display: block; width: 100%; height: 150px; object-fit: cover;
  transition: transform .6s cubic-bezier(.2,.65,.3,1); }
html.fx-on a.card:hover .card-media img { transform: scale(1.06); }
.ph-media { margin: 0; position: relative; }
.ph-media img { display: block; width: 100%; border-radius: 10px;
  box-shadow: 0 30px 70px -30px rgba(4,17,41,.5); }
.page-hero .wrap.hero-grid { align-items: center; }
.fx-banner { margin: 0; position: relative; overflow: clip; border-radius: 12px;
  box-shadow: 0 36px 80px -34px rgba(4,17,41,.5); }
.fx-banner img { display: block; width: 100%; }
.fx-banner + * { margin-top: 2.2rem; }
.section-dark { background-image:
  linear-gradient(rgba(4,17,41,.78), rgba(11,16,32,.92)), url("../img/gen/dark-vault.webp");
  background-size: cover; background-position: center; }

/* ============================================================
   VERSTAERKUNGSRUNDE (04.08.2026, Ansage Dimi: "alle Effekte
   verstaerken, mehr Grafiken, mehr schoene Effekte")
   ============================================================ */

/* ---------- Hero-Zeilen: Schaerfe-Aufblende zusaetzlich zum 3D-Kipp ---------- */
html.fx-on .fx-line > span { filter: blur(14px); }

/* ---------- Bild-Vorhang: Medien enthuellen sich beim Eintritt ---------- */
html.fx-on .fx-banner { clip-path: inset(0 100% 0 0 round 12px); }
html.fx-on .ph-media { clip-path: inset(0 100% 0 0 round 10px); }
html.fx-on .card-media { clip-path: inset(0 100% 0 0); }

/* ---------- Nav: gezeichnete Verlaufs-Unterstreichung (nur Desktop-Nav) ---------- */
@media (min-width: 901px) {
  html.fx-on .site-nav a:not(.nav-cta) { position: relative; }
  html.fx-on .site-nav a:not(.nav-cta)::after {
    content: ""; position: absolute; left: 0; right: 100%; bottom: 2px; height: 2px;
    background: var(--grad-royal); transition: right .32s cubic-bezier(.2,.65,.3,1);
  }
  html.fx-on .site-nav a:not(.nav-cta):hover::after { right: 0; }
}

/* ---------- H2: Royal-Gold-Linie zeichnet sich nach dem Reveal ----------
   Linie selbst (Farbe, Mass) steht statisch in site.css — hier nur Animation. */
html.fx-on .section h2::after, html.fx-on .section-dark h2::after {
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .9s cubic-bezier(.2,.65,.3,1) .15s;
}
html.fx-on .section h2.fx-lined::after, html.fx-on .section-dark h2.fx-lined::after { transform: scaleX(1); }

/* ---------- Zahlenband: wandernder Schimmer auf der Kopflinie ---------- */
html.fx-on .stat-row::before {
  background: linear-gradient(90deg, #2547CB 0%, #4A72E8 30%, #C3EFFF 50%, #4A72E8 70%, #2547CB 100%);
  background-size: 220% 100%;
  animation: statline 7s linear infinite;
}
@keyframes statline { from { background-position: 0% 0; } to { background-position: 220% 0; } }

/* ---------- Lead-in: langsamer Verlaufsdrift im Gradient-Text ---------- */
html.fx-on h2 .lead-in { background-size: 220% 100%; animation: leaddrift 9s ease-in-out infinite alternate; }
@keyframes leaddrift { from { background-position: 0% 0; } to { background-position: 100% 0; } }

/* ---------- Ring-Cursor (nur feine Zeiger, folgt via JS) ---------- */
.fx-ring {
  position: fixed; top: 0; left: 0; width: 34px; height: 34px; z-index: 130;
  border: 1.5px solid rgba(47,69,214,.5); border-radius: 50%;
  pointer-events: none; transform: translate(-50%,-50%);
  transition: width .25s ease, height .25s ease, border-color .25s ease, background-color .25s ease, opacity .3s ease;
  opacity: 0;
}
.fx-ring.is-on { opacity: 1; }
.fx-ring.is-active { width: 56px; height: 56px; border-color: rgba(47,69,214,.95); background: rgba(74,114,232,.10); }

/* ---------- Klick-Ripple auf Knoepfen ---------- */
html.fx-on .btn { position: relative; overflow: hidden; }
.fx-ripple {
  position: absolute; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.5), rgba(255,255,255,0) 70%);
  transform: scale(0);
}
.btn-ghost .fx-ripple { background: radial-gradient(circle, rgba(47,69,214,.28), rgba(47,69,214,0) 70%); }

/* ---------- Seitenwechsel: Verlaufs-Wipe beim Verlassen ---------- */
.fx-wipe {
  position: fixed; inset: 0; z-index: 200; pointer-events: none;
  background: linear-gradient(105deg, #0B1020 0%, #16247E 55%, #2547CB 100%);
  transform: translateX(-103%);
}

/* ---------- Dunkle Sektion: Kino-Grain + Licht-Sweep (Kinder via JS) ---------- */
.fx-grain {
  position: absolute; inset: 0; pointer-events: none; z-index: 1; opacity: .045;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.fx-sweep {
  position: absolute; top: -5%; bottom: -5%; left: 0; width: 42%;
  pointer-events: none; z-index: 1;
  background: linear-gradient(100deg, transparent 8%, rgba(143,180,255,.10) 45%, rgba(195,239,255,.14) 52%, rgba(143,180,255,.10) 59%, transparent 92%);
  transform: translateX(-120%) skewX(-8deg);
}