/* ============================================================
   ANIMATIONS.CSS — Keyframes · Scroll-Reveal · Cursor · Motion
   everspice.de · 2026
   ============================================================ */

/* ────────────────────────────────────────────────────────────
   KEYFRAMES
   ──────────────────────────────────────────────────────────── */

/* Marquee */
@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Hero Gradient Mesh — langsam, hypnotisch */
@keyframes hero-mesh {
  0%   { transform: rotate(0deg) scale(1); opacity: 0.85; }
  33%  { transform: rotate(4deg) scale(1.08); opacity: 1; }
  66%  { transform: rotate(-3deg) scale(0.96); opacity: 0.90; }
  100% { transform: rotate(2deg) scale(1.04); opacity: 0.95; }
}

@keyframes hero-mesh-2 {
  0%   { transform: scale(1) translateX(0); opacity: 0.6; }
  50%  { transform: scale(1.12) translateX(-5%); opacity: 1; }
  100% { transform: scale(0.95) translateX(5%); opacity: 0.7; }
}

/* Scroll Indicator Linie */
@keyframes scroll-line {
  0%   { opacity: 0; transform: scaleY(0); transform-origin: top; }
  50%  { opacity: 1; transform: scaleY(1); transform-origin: top; }
  100% { opacity: 0; transform: scaleY(1); transform-origin: bottom; }
}

/* Fade In */
@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Slide Up */
@keyframes slide-up {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Clip-Path Reveal — von unten nach oben (Headlines) */
@keyframes clip-reveal {
  from { clip-path: inset(100% 0 0 0); opacity: 0; }
  to   { clip-path: inset(0% 0 0 0);   opacity: 1; }
}

/* Gold Shimmer — auf Hover-Elementen */
@keyframes gold-shimmer {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

/* Cursor Pulse */
@keyframes cursor-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 0.55; }
  50%       { transform: translate(-50%, -50%) scale(1.15); opacity: 0.3; }
}

/* Page Load */
@keyframes page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Red Dot Pulse — Hero Accent */
@keyframes dot-pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.6); opacity: 0.5; }
}


/* ────────────────────────────────────────────────────────────
   PAGE LOAD — NUR opacity, kein transform auf body
   (transform auf body bricht position:fixed für den Cursor)
   ──────────────────────────────────────────────────────────── */
body > main,
body > footer {
  animation: page-in 0.6s var(--ease-out) 0.05s both;
}
/* header NICHT animieren — transform bricht position:fixed der Nav */


/* ────────────────────────────────────────────────────────────
   HERO REVEAL — Gestaffelt
   ──────────────────────────────────────────────────────────── */
.hero__label {
  animation: fade-in 0.5s ease 0.05s both;
}

.hero__headline {
  animation: slide-up 1.0s var(--ease-expo) 0.15s both;
}

.hero__tagline {
  animation: slide-up 0.7s var(--ease-out) 0.30s both;
}

.hero__cta {
  animation: slide-up 0.7s var(--ease-out) 0.42s both;
}

.hero__services-bar,
.hero__aside {
  animation: fade-in 0.8s ease 0.60s both;
}

.hero__diagonal {
  animation: fade-in 1.2s ease 0.50s both;
}

.hero__bracket-deco {
  animation: fade-in 1.4s ease 0.35s both;
}


/* ────────────────────────────────────────────────────────────
   SCROLL REVEAL — data-reveal System (IntersectionObserver)
   ──────────────────────────────────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.7s var(--ease-out),
              transform 0.7s var(--ease-out);
}

[data-reveal="left"] {
  transform: translateX(-36px);
  opacity: 0;
}

[data-reveal="right"] {
  transform: translateX(36px);
  opacity: 0;
}

[data-reveal="scale"] {
  transform: scale(0.93);
  opacity: 0;
}

[data-reveal="clip"] {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transform: none;
  transition: clip-path 0.9s var(--ease-expo);
}

[data-reveal].is-revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
  clip-path: inset(0 0% 0 0);
}

/* Stagger via JS inline-style (--delay) */
[data-reveal][style*="--delay"] {
  transition-delay: var(--delay, 0s);
}


/* ────────────────────────────────────────────────────────────
   CUSTOM CURSOR — Gold Akzent (nur Desktop / pointer: fine)
   ──────────────────────────────────────────────────────────── */
@media (pointer: fine) {
  body { cursor: none; }

  /* Dot — weiß mit hartem dunklen Rand: sichtbar auf jedem Hintergrund */
  .cursor-dot {
    position: fixed;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    /* Dunkler Ring außen + roter Glow innen = sichtbar auf hell UND dunkel */
    box-shadow:
      0 0 0 1.5px rgba(0, 0, 0, 0.80),
      0 0 0 3px rgba(232, 25, 44, 0.30);
    pointer-events: none;
    z-index: 9999;
    transform: translate(-50%, -50%);
    transition: width 0.2s ease, height 0.2s ease, opacity 0.15s ease;
  }

  /* Ring — rot, halbtransparent */
  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid rgba(232, 25, 44, 0.50);
    pointer-events: none;
    z-index: 9998;
    transform: translate(-50%, -50%);
    transition: width 0.35s var(--ease-out), height 0.35s var(--ease-out),
                border-color 0.35s ease, opacity 0.15s ease;
  }

  /* Hover — Dot wächst, Ring größer */
  body.cursor-hover .cursor-dot {
    width: 14px;
    height: 14px;
  }

  body.cursor-hover .cursor-ring {
    width: 56px;
    height: 56px;
    border-color: rgba(232, 25, 44, 0.75);
  }

  /* Click — Compress */
  body.cursor-click .cursor-dot {
    width: 6px;
    height: 6px;
  }
  body.cursor-click .cursor-ring {
    width: 28px;
    height: 28px;
    border-color: rgba(232, 25, 44, 0.90);
  }

  a, button, [role="button"], .card, label, .service-item {
    cursor: none;
  }
}


/* ────────────────────────────────────────────────────────────
   GOLD SHIMMER — auf Headlines bei Hover
   ──────────────────────────────────────────────────────────── */
.shimmer-gold {
  background: linear-gradient(
    105deg,
    var(--color-text-primary) 0%,
    var(--color-text-primary) 35%,
    var(--color-red-hover) 50%,
    var(--color-text-primary) 65%,
    var(--color-text-primary) 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.shimmer-gold:hover {
  animation: gold-shimmer 1.4s linear;
}


/* ────────────────────────────────────────────────────────────
   SCROLL PROGRESS BAR (in components.css definiert,
   Transition hier)
   ──────────────────────────────────────────────────────────── */
.scroll-progress {
  transition: transform 0.08s linear;
}


/* ────────────────────────────────────────────────────────────
   SECTION HOVER EFFECTS
   ──────────────────────────────────────────────────────────── */

/* Service Item — Title shimmer on hover */
.service-item:hover .service-item__title {
  animation: none; /* Farbe handled in sections.css */
}

/* Card Image — smooth Zoom */
.card .card__img-wrap img {
  transition: transform 0.8s var(--ease-expo);
}

/* Gold Line Grow — wiederverwendbar */
.gold-line {
  display: block;
  height: 1px;
  background: linear-gradient(90deg, var(--color-red), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.6s var(--ease-out);
}

.gold-line.grow { transform: scaleX(1); }