/* ============================================================
   Friesen24 – animations.css  v2
   Industrial-Technical Enhancement Layer
   Einbinden nach main.css in header.php:
   <link rel="stylesheet" href="<?= BASE_PATH ?>/assets/css/animations.css">
   ============================================================ */

/* ── GLOBAL: Overflow-Schutz für Mobile ─────────────────────
   Nur auf html setzen, NICHT auf body — body mit overflow:clip
   erzeugt einen neuen Stacking-Context der position:fixed
   Elemente (Canvas, Lightbox, Nav) relativ zum Body statt
   zum Viewport positioniert → riesiger Leerraum. */
html {
  overflow-x: clip;
  max-width: 100vw;
}
/* body: overflow-x clip statt hidden – hidden bricht position:sticky! */
body {
  overflow-x: clip;
  max-width: 100vw;
}

/* ── 1. Globaler Canvas: position:fixed, ganz hinten ─────── */
#global-canvas {
  position: fixed;
  inset: 0;
  width: 100vw;   /* vw statt % – zuverlässiger auf Mobile */
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

/* Alle Seitenebenen müssen über dem Canvas liegen */
.nav        { z-index: 99000; }
.nav-mobile { z-index: 98999; }
.service-nav { z-index: 98998; }   /* direkt unter nav-mobile, über allem anderen */
.hero       { z-index: 1; position: relative; }
.section,
.page-header,
.cta-band,
.footer     { position: relative; z-index: 1; }

/* Laser-Glow-Container: overflow:clip verhindert dass der Glow-Streifen
   kurz über den rechten Rand läuft und einen horizontalen Scrollbar erzeugt.
   clip (nicht hidden) damit position:sticky Kinder nicht betroffen sind. */
.hero-left,
.page-header .container {
  overflow-x: clip;
}

/* ── 2. Hero-Wörter: display:block = garantiert 3 Zeilen ─── */
.hero-title {
  white-space: normal;
  overflow: visible;
  padding-top: 8px;      /* Platz für Ä-Punkte die über die Linie hinausgehen */
}
.hero-title .hero-word {
  display: block;
  line-height: 0.95;
  overflow: visible;     /* KEIN overflow:hidden — würde Ä/Ö/Ü-Punkte abschneiden */
  clip-path: inset(-8px 100% -8px 0); /* initial versteckt mit Overhang für Ä/Ö/Ü */
}

/* ── KRITISCH: Hero transparent für Canvas ───────────────── */
.hero {
  background: transparent !important;
}

/* Hero-Elemente: initial unsichtbar ─────────────────────── */
.hero-title .hero-word,
.hero-subtitle,
.hero-desc,
.hero-actions,
.hero-stats,
.hero-tag {
  opacity: 0;
}

/* ── Page-Header: initial versteckt per clip-path ────────── */
.page-header-title {
  display: inline-block;    /* Laser-Glow braucht messbare Breite */
  position: relative;
  clip-path: inset(-8px 100% -8px 0);  /* initial per Laser verborgen */
  /* opacity/transform werden nicht mehr gebraucht — JS + clip-path übernimmt */
}
/* Nach Laser: clip-path wird per JS auf inset(-8px 0% -8px 0) gesetzt */

/* Underline-Animation bleibt */
.page-header-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 3px;
  background: var(--accent);
  transition: width 0.7s cubic-bezier(0.4,0,0.2,1) 0.1s;
}
.page-header-title.header-visible::after { width: 100%; }

/* ── 3. Hero-Tag: Einmalige Unterstreichung von links nach rechts ── */
.hero-tag {
  position: relative;
}
.hero-tag::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), rgba(192,53,47,0.3));
  transform-origin: left;
  transform: scaleX(0);
  /* Startet erst nachdem der Tag selbst eingeblendet ist (~700 ms nach Page-Load) */
  animation: tagUnderline 0.6s cubic-bezier(0.4, 0, 0.2, 1) 2.26s forwards;
}
@keyframes tagUnderline {
  0%   { transform: scaleX(0); opacity: 0.9; }
  100% { transform: scaleX(1); opacity: 0.55; }
}

/* ── 4. Service Cards: Hover-Effekte ─────────────────────── */
.service-card {
  overflow: hidden;
}
/* Scan-Welle von unten nach oben */
.service-card::after {
  content: '';
  position: absolute;
  bottom: -100%;
  left: 0; right: 0;
  height: 100%;
  background: linear-gradient(to top, rgba(192,53,47,0.07) 0%, transparent 70%);
  transition: bottom 0.42s cubic-bezier(0.4,0,0.2,1);
  pointer-events: none;
  z-index: 0;
}
.service-card:hover::after { bottom: 0; }

/* Icon: hoch + Glow */
.service-card .service-icon,
.service-card .mdi-icon {
  transition: transform 0.35s cubic-bezier(0.4,0,0.2,1), filter 0.35s ease;
}
.service-card:hover .service-icon { transform: translateY(-6px) scale(1.08); }

/* Dark-Mode Icons: kalibriert auf #b03028 */
[data-theme="dark"] .mdi-icon {
  filter: invert(22%) sepia(60%) saturate(800%) hue-rotate(330deg) brightness(135%) contrast(100%);
}
[data-theme="dark"] .machine-icon .mdi-icon {
  filter: invert(22%) sepia(60%) saturate(800%) hue-rotate(330deg) brightness(135%) contrast(100%);
}

[data-theme="dark"] .service-card:hover .mdi-icon {
  filter: invert(28%) sepia(65%) saturate(850%) hue-rotate(330deg) brightness(148%) contrast(102%)
          drop-shadow(0 0 10px rgba(176,48,40,0.5));
  transform: translateY(-6px) scale(1.08);
}
[data-theme="light"] .service-card:hover .mdi-icon {
  filter: invert(18%) sepia(72%) saturate(732%) hue-rotate(332deg) brightness(87%) contrast(107%)
          drop-shadow(0 0 8px rgba(155,41,39,0.5));
  transform: translateY(-6px) scale(1.08);
}

/* Nummer-Tag */
.service-number { transition: color 0.25s ease, letter-spacing 0.25s ease; }
.service-card:hover .service-number { color: var(--accent); letter-spacing: 0.1em; }
.service-title, .service-desc { position: relative; z-index: 1; }

/* ── 5. Machine Cards: Conic-Border-Trace ────────────────── */
@supports (background: conic-gradient(from 0deg, red, blue)) {
  @property --mca {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
  }
}

.machine-card {
  position: relative;
  overflow: hidden;
}
/* Innen-Blende damit Rahmen "sauber" bleibt */
.machine-card > * { position: relative; z-index: 1; }
.machine-card::after {
  content: '';
  position: absolute;
  inset: 1px;
  border-radius: calc(var(--radius) - 1px);
  background: var(--dark);
  z-index: 0;
  pointer-events: none;
}
/* Leuchtender Trace-Rahmen */
.machine-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: var(--radius);
  background: conic-gradient(from var(--mca, 0deg), transparent 0deg, var(--accent) 60deg, transparent 120deg);
  opacity: 0;
  transition: opacity 0.35s ease;
  z-index: 0;
  pointer-events: none;
}
.machine-card:hover::before {
  opacity: 1;
  animation: borderTrace 2s linear infinite;
}
@keyframes borderTrace { to { --mca: 360deg; } }

/* ── 6. Scroll-Reveal ────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.4,0,0.2,1), transform 0.7s cubic-bezier(0.4,0,0.2,1);
}
.reveal.visible { opacity: 1; transform: none; }

/* ── 7. Page-Header Animationen (Unterseiten) ────────────── */
/* Roter Strich oben */
.page-header::after {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -4px;
  height: 4px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent-2), transparent);
  transform: scaleX(0);
  transform-origin: left;
  animation: headerScan 0.9s ease-out forwards;
  z-index: 2;
}
@keyframes headerScan {
  0%   { transform: scaleX(0); opacity: 1;   }
  70%  { transform: scaleX(1); opacity: 1;   }
  100% { transform: scaleX(1); opacity: 0.6; }
}

/* Titel-Underline (läuft zusätzlich zur opacity-Transition) */
.page-header-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: -6px;
  width: 0; height: 3px;
  background: var(--accent);
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1) 0.5s;
}
.page-header-title.header-visible::after { width: 100%; }

/* Breadcrumb + Sub */
.breadcrumb {
  opacity: 0;
  transform: translateX(-16px);
  transition: opacity 0.5s ease 0.1s, transform 0.5s ease 0.1s;
}
.breadcrumb.header-visible { opacity: 1; transform: none; }

.page-header-sub {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease 0.5s, transform 0.5s ease 0.5s;
}
.page-header-sub.header-visible { opacity: 1; transform: none; }

/* ── 8. Hero Stats: Hover-Highlight ─────────────────────── */
.hero-stat { transition: background 0.3s ease; }
.hero-stat:hover { background: var(--accent-glow); }
.hero-stat-value { transition: color 0.3s ease; }
.hero-stat:hover .hero-stat-value {
  color: var(--accent-2);
  text-shadow: 0 0 18px var(--accent-glow-strong);
}

/* ── 9. Process Steps: Hover-Highlight ───────────────────── */
.process-step-num {
  transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.process-step:hover .process-step-num {
  background: var(--accent);
  color: white;
  box-shadow: 0 0 22px var(--accent-glow-strong);
  transform: scale(1.05);
}
.process-step-title { transition: color 0.3s ease; }
.process-step:hover .process-step-title { color: var(--accent); }

/* ── 10. CTA-Band: Puls ──────────────────────────────────── */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: '';
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 60% 80% at 50% 50%, rgba(192,53,47,0.08), transparent 70%);
  animation: ctaPulse 4s ease-in-out infinite;
}
@keyframes ctaPulse {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.04); }
}

/* ── 11. Section-Tag: Linie wächst ──────────────────────── */
.section-tag { overflow: hidden; }
.section-tag::before { width: 0; transition: width 0.6s cubic-bezier(0.4,0,0.2,1); }
.section-tag.line-visible::before { width: 16px; }

/* ── 12. Footer-Grid: Gestaffelt ─────────────────────────── */
.footer-grid > * {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.footer-grid.footer-visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:0.05s; }
.footer-grid.footer-visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.15s; }
.footer-grid.footer-visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.25s; }
.footer-grid.footer-visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.35s; }

/* ── 13. Nav: Slide-Down NUR beim ersten Session-Load ──────
   data-nav-animate wird vom inline-Script im <head> gesetzt,
   BEVOR der erste Paint stattfindet → kein Flash auf Folgeseiten. */
.nav { opacity: 1; }
[data-nav-animate="1"] .nav {
  animation: navSlideDown 0.45s cubic-bezier(0.4,0,0.2,1) both;
}
@keyframes navSlideDown {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ── 14. Button: Ripple ──────────────────────────────────── */
.btn { position: relative; overflow: hidden; }
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  transform: scale(0);
  animation: rippleAnim 0.5s linear;
  pointer-events: none;
}
@keyframes rippleAnim { to { transform: scale(4); opacity: 0; } }

/* ── 15. Spec-Table: Zeilen-Highlight ───────────────────── */
.spec-table tr { transition: background 0.2s ease; }
.spec-table tr:hover { background: var(--accent-glow); }
.spec-table tr:hover td:last-child { color: var(--accent); }

/* ── 16. Info-Box: Glow bei Hover ───────────────────────── */
.info-box { transition: box-shadow 0.3s ease; }
.info-box:hover { box-shadow: -4px 0 16px var(--accent-glow-strong); }

/* ── 17. Service-Nav: initial unsichtbar ─────────────────── */
.service-nav {
  opacity: 0;
  transform: translateY(-6px);
}

/* ── 18. Reduce-Motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  #global-canvas { display: none; }
  .hero-title .hero-word,
  .hero-subtitle,
  .hero-tag,
  .hero-actions,
  .hero-stats,
  .hero-desc,
  .breadcrumb,
  .page-header-title,
  .page-header-sub,
  .service-nav {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}