/* ═══════════════════════════════════════════════════════════════
   animations.css · shared Animationen + Reveal-States
   ═══════════════════════════════════════════════════════════════ */

/* ─── Word-by-word Reveal (Hero-Tagline) ─── */
.reveal-words .rw-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 2px;
  line-height: 1.05;
}
.reveal-words .rw-inner {
  display: inline-block;
  transform: translateY(110%);
  animation: rw-up .8s var(--t-ease) forwards;
  animation-delay: calc(var(--i, 0) * 60ms + 0.15s);
}
@keyframes rw-up { to { transform: translateY(0); } }

/* ─── Reveal Sets (Scroll-driven via Intersection Observer in JS) ─── */
.reveal,
.reveal-left,
.reveal-right,
.reveal-fade {
  transition: opacity .8s var(--t-ease), transform .9s var(--t-ease);
  will-change: opacity, transform;
}
.reveal        { transform: translateY(24px); }
.reveal-left   { transform: translateX(-24px); }
.reveal-right  { transform: translateX(24px); }
.reveal-fade   { transform: none; }

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-fade.visible {
  transform: none;
  opacity: 1;
}

/* Skill-Cards mit Stagger */
.skill-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s var(--t-ease), transform .6s var(--t-ease);
}
.skill-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Portfolio-Cards */
.portfolio-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s var(--t-ease), transform .7s var(--t-ease), border-color .3s, box-shadow .4s;
}
.portfolio-card.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Timeline-Items */
.timeline-item {
  opacity: 0;
  transform: translateX(-15px);
  transition: opacity .6s var(--t-ease), transform .6s var(--t-ease);
}
.timeline-item.visible {
  opacity: 1;
  transform: translateX(0);
}

/* Cert-Cards */
.cert-card {
  opacity: 0;
  transform: scale(.95);
  transition: opacity .5s var(--t-ease), transform .5s var(--t-ease), border-color .3s;
}
.cert-card.visible {
  opacity: 1;
  transform: scale(1);
}

/* About-Chips */
.about-chips {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity .6s var(--t-ease) .15s, transform .6s var(--t-ease) .15s;
}
.about-chips.visible { opacity: 1; transform: translateY(0); }

/* ─── Hero Entry Animation (CSS-only beim Load) ─── */
.hero-meta    { animation: heroFade .8s var(--t-ease) .1s both; }
.hero-title   { animation: heroFade .8s var(--t-ease) .25s both; }
.hero-tagline { animation: heroFade .9s var(--t-ease) .55s both; }
.hero-ctas    { animation: heroFade .8s var(--t-ease) .7s both; }
.hero-kpis    { animation: heroFade .9s var(--t-ease) .85s both; }
.hero-visual  { animation: heroVisualIn 1s var(--t-ease) .35s both; }

@keyframes heroFade {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroVisualIn {
  from { opacity: 0; transform: scale(.96) translateY(20px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════
   hybrid-sysengineer — theme-specific keyframes
   ═══════════════════════════════════════════════════════════════ */

/* Pulsating shimmer that travels along the on-prem ↔ cloud sync line.
   -v variant for vertical (desktop column-flex), plain for horizontal
   (mobile row-flex). The sync element picks the right one via animation-name. */
@keyframes hse-sync-pulse {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%);  }
}
@keyframes hse-sync-pulse-v {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100%);  }
}

/* Blinking caret for terminal cursor + logo cursor */
@keyframes hse-cursor-blink {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Subtle horizontal drift of the hero grid background */
@keyframes hse-grid-drift {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-48px, -48px, 0); }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal, .reveal-left, .reveal-right, .reveal-fade,
  .skill-card, .portfolio-card, .timeline-item, .cert-card, .about-chips {
    opacity: 1 !important;
    transform: none !important;
  }
  .reveal-words .rw-inner { transform: none; }
}