/* ═══════════════════════════════════════════════════════════════════════════
   Essig Elektro — Motion Additions v1.1
   Support layer for the v2.0 animation engine on the v1.0 design.
   Word reveals, scrubbed process line, service-cell spotlight, card tilt,
   and gating that disables v1 CSS entrance animations when GSAP is active.
   NOTE: this file already uses the final essig-* naming (post-rebrand).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Word-reveal helper (GSAP splits + animates) ─────────────────────── */

.js-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.08em;
  margin-bottom: -0.08em;  /* avoid descender clipping */
}

.js-word__inner {
  display: inline-block;
  will-change: transform;
}

/* ── Process steps — scrubbed gradient progress line ─────────────────── */

.c-process-steps__grid .js-progress-line {
  position: absolute;
  top: 0;
  left: calc(var(--space-lg) + 6px);
  right: calc(var(--space-lg) + 6px);
  height: 2px;
  background: linear-gradient(90deg, hsl(14 85% 52%), hsl(198 40% 42%));
  transform: scaleX(0);
  transform-origin: left;
  z-index: 1;
}

@media (max-width: 768px) {
  .c-process-steps__grid .js-progress-line {
    top: 0;
    bottom: 0;
    left: 6px;
    right: auto;
    width: 2px;
    height: auto;
    transform: scaleY(0);
    transform-origin: top;
  }
}

/* ── Service-cell cursor spotlight (position set by JS) ──────────────── */

.c-service-cell {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.c-service-cell::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%), hsl(14 85% 52% / 0.12), transparent 70%);
  opacity: 0;
  transition: opacity var(--motion-duration-base) var(--motion-ease-out);
  pointer-events: none;
}

.c-service-cell:hover::after {
  opacity: 1;
}

.c-service-cell--highlight::after {
  background: radial-gradient(240px circle at var(--spot-x, 50%) var(--spot-y, 50%), hsl(0 0% 100% / 0.12), transparent 70%);
}

/* ── Card tilt — GSAP owns transform, drop the CSS transform transition ── */

.c-team-card {
  transition: box-shadow var(--motion-duration-base) var(--motion-ease-out);
}

.c-team-card:hover {
  transform: none;
}

/* ── Footer CTA glow blob (element created by JS) ────────────────────── */

.c-footer-cta {
  overflow: hidden;
}

.c-footer-cta__glow {
  animation: essig-glow-drift 14s ease-in-out infinite;
}

@keyframes essig-glow-drift {
  0%   { transform: translate3d(-6%, 4%, 0) scale(1); }
  50%  { transform: translate3d(6%, -6%, 0) scale(1.15); }
  100% { transform: translate3d(-6%, 4%, 0) scale(1); }
}

/* ── Gate v1 CSS entrance animations when GSAP is active ─────────────── */

html.gsap-ready .c-hero__canvas,
html.gsap-ready .c-hero__badge,
html.gsap-ready .c-hero__kicker-line {
  animation: none;
}

html.gsap-ready .c-process-steps.essig-sequence.is-visible .c-process-step__number,
html.gsap-ready .c-process-steps.essig-sequence.is-visible .c-process-step::before {
  animation: none;
}

html.gsap-ready .essig-animate.is-visible .c-services-grid .c-service-cell__number {
  animation: none;
}

/* ── Reduced motion — GSAP exits early; keep words plain ─────────────── */

@media (prefers-reduced-motion: reduce) {
  .js-word {
    overflow: visible;
    padding-bottom: 0;
    margin-bottom: 0;
  }

  .c-footer-cta__glow {
    animation: none;
  }
}

/* ── Page transition — flüssiges Fade (v1.4.0) ─────────────────────────────
   Overlay in der Seiten-Hintergrundfarbe: blendet bei internem
   Navigationsklick ein, die neue Seite startet gedeckt und blendet aus.
   Kein-JS: Overlay bleibt ausgeblendet (Zustand haengt an .is-veiled).
   Reduced-Motion: nie sichtbar (Pre-Paint-Script + main.js pruefen das). */
.page-veil {
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: var(--color-surface-light);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity var(--motion-duration-base) var(--motion-ease-out),
    visibility var(--motion-duration-base) var(--motion-ease-out);
}

.page-veil.is-veiled {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}