/* ============================================================
   Maler Ruck — UI/UX Animations
   Pure CSS + IntersectionObserver. No external libs.
   Respects prefers-reduced-motion.
   ============================================================ */

/* ============================================================
   GLOBAL TIMING TOKENS
   ============================================================ */
:root {
  --anim-fast: .25s;
  --anim-base: .45s;
  --anim-slow: .7s;
  --anim-ease-out: cubic-bezier(.16,1,.3,1);
  --anim-ease-in-out: cubic-bezier(.65,0,.35,1);
}

/* ============================================================
   HERO — INITIAL LOAD
   ============================================================ */

/* Ken-Burns on hero image */
.hero-visual .fig img {
  will-change: transform;
  animation: kenBurns 12s ease-in-out infinite alternate;
}
@keyframes kenBurns {
  0%   { transform: scale(1) translate(0,0); }
  100% { transform: scale(1.05) translate(-1%, -1.2%); }
}

/* Hero text staged entrance.
   We split h1 into <span class="word"> at runtime; each word starts hidden. */
.hero h1 .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(24px);
  will-change: transform, opacity;
  transition: opacity var(--anim-base) var(--anim-ease-out),
              transform var(--anim-base) var(--anim-ease-out);
}
.hero h1.hero-anim-in .word {
  opacity: 1;
  transform: none;
}

/* Hero eyebrow + lede + CTA cascade */
.hero-eyebrow,
.hero p.lede,
.hero-cta,
.hero-meta {
  opacity: 0;
  transform: translateY(16px);
  will-change: transform, opacity;
  transition: opacity var(--anim-base) var(--anim-ease-out),
              transform var(--anim-base) var(--anim-ease-out);
}
.hero.hero-anim-in .hero-eyebrow { transition-delay: .15s; opacity: 1; transform: none; }
.hero.hero-anim-in p.lede        { transition-delay: 1.0s; opacity: 1; transform: none; }
.hero.hero-anim-in .hero-cta     { transition-delay: 1.2s; opacity: 1; transform: none; }
.hero.hero-anim-in .hero-cta .btn { animation: ctaCascade .55s var(--anim-ease-out) backwards; }
.hero.hero-anim-in .hero-cta .btn:nth-child(1) { animation-delay: 1.25s; }
.hero.hero-anim-in .hero-cta .btn:nth-child(2) { animation-delay: 1.35s; }
.hero.hero-anim-in .hero-meta    { transition-delay: 1.45s; opacity: 1; transform: none; }
@keyframes ctaCascade {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Hero visual fade + scale entrance */
.hero-visual {
  opacity: 0;
  transform: translateY(24px) scale(.98);
  transition: opacity .8s var(--anim-ease-out),
              transform .8s var(--anim-ease-out);
  transition-delay: .35s;
  will-change: transform, opacity;
}
.hero.hero-anim-in .hero-visual { opacity: 1; transform: none; }

.hero-visual .swatch-strip,
.hero-visual .stamp {
  opacity: 0;
  transition: opacity .5s var(--anim-ease-out);
}
.hero.hero-anim-in .hero-visual .swatch-strip { transition-delay: 1.4s; opacity: 1; }
.hero.hero-anim-in .hero-visual .stamp        { transition-delay: 1.55s; opacity: 1; }

/* Magenta underline paint-roll under "30 Jahren" */
.hero h1 .underline {
  /* `position: relative` + `display: inline-block` are set in home.css */
  padding-bottom: 6px;
}
.hero h1 .underline::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 6px;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left center;
  will-change: transform;
  pointer-events: none;
}
.hero.hero-anim-in h1 .underline::after {
  animation: paintRoll 1s var(--anim-ease-out) 1.0s forwards;
}
@keyframes paintRoll {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* ============================================================
   STATUS PILL — pulsing dot
   ============================================================ */
.openpill .blink {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #2F9E5C; /* open: green */
  margin-right: 8px;
  vertical-align: middle;
  animation: dotPulse 1.5s var(--anim-ease-in-out) infinite;
  will-change: transform, opacity;
}
.openpill.closed .blink {
  background: #9B9B9B; /* closed: muted */
}
@keyframes dotPulse {
  0%, 100% { transform: scale(1);   opacity: .6; }
  50%      { transform: scale(1.4); opacity: 1; }
}

/* ============================================================
   SCROLL INDICATOR
   ============================================================ */
.scroll-indicator {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-3);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s ease;
  z-index: 2;
}
.hero.hero-anim-in .scroll-indicator { opacity: .85; transition-delay: 1.7s; }
.scroll-indicator.hidden { opacity: 0 !important; transition-delay: 0s !important; }
.scroll-indicator .arr {
  width: 14px; height: 14px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  animation: arrowBob 1.8s var(--anim-ease-in-out) infinite;
  will-change: transform;
}
@keyframes arrowBob {
  0%, 100% { transform: rotate(45deg) translate(0,0); opacity: .6; }
  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 1; }
}

/* ============================================================
   SECTION FADE-IN — replaces simple .reveal
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--anim-slow) var(--anim-ease-out),
              transform var(--anim-slow) var(--anim-ease-out);
  will-change: transform, opacity;
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* Cards / images get a slightly bigger lift + delay via inline transition-delay */
.what-card.reveal,
.team-card.reveal,
.ref-tile.reveal {
  transform: translateY(32px);
}

/* Mischanlage block: photo slides in from left */
.mix-visual.reveal {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity .8s var(--anim-ease-out),
              transform .8s var(--anim-ease-out);
}
.mix-visual.reveal.in { opacity: 1; transform: none; }

/* Mischanlage headline word-by-word */
.mix-words .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--anim-base) var(--anim-ease-out),
              transform var(--anim-base) var(--anim-ease-out);
}
.mix-words.in .word { opacity: 1; transform: none; }

/* ============================================================
   ROTATING COLOREXPRESS BADGE
   ============================================================ */
.spiral-badge {
  position: absolute;
  top: 14px; right: 14px;
  width: 64px; height: 64px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
  background: white;
  will-change: transform;
  animation: spinSlow 10s linear infinite;
}
.spiral-badge img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ============================================================
   CARDS — hover lift
   ============================================================ */
.what-card {
  transition: transform var(--anim-fast) var(--anim-ease-out),
              box-shadow var(--anim-fast) var(--anim-ease-out),
              border-color var(--anim-fast) var(--anim-ease-out);
  will-change: transform;
}
.what-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  border-color: var(--brand);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  transition: transform var(--anim-fast) var(--anim-ease-out),
              box-shadow var(--anim-fast) var(--anim-ease-out),
              background var(--anim-fast) var(--anim-ease-out),
              color var(--anim-fast) var(--anim-ease-out);
  will-change: transform;
}
.btn-primary:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(236, 38, 143, 0.30);
}
.btn-ghost:hover {
  background: rgba(236, 38, 143, 0.08);
}

/* ============================================================
   STICKY HEADER SHRINK
   ============================================================ */
.site-header {
  transition: background .3s ease,
              backdrop-filter .3s ease,
              border-color .3s ease;
}
.site-header .wrap {
  transition: height .3s ease;
}
.site-header.shrunk {
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.site-header.shrunk .wrap { height: 64px; }
.site-header .brand-mark {
  transition: transform .3s ease;
  transform-origin: left center;
}
.site-header.shrunk .brand-mark { transform: scale(.9); }

/* ============================================================
   PREFERS-REDUCED-MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
    scroll-behavior: auto !important;
  }
  .hero-visual .fig img { animation: none !important; transform: none !important; }
  .openpill .blink { animation: none !important; }
  .scroll-indicator .arr { animation: none !important; }
  .spiral-badge { animation: none !important; }
  /* Force everything to its final state immediately */
  .reveal, .hero h1 .word, .hero-eyebrow, .hero p.lede,
  .hero-cta, .hero-meta, .hero-visual, .hero-visual .swatch-strip,
  .hero-visual .stamp, .mix-visual, .mix-words .word {
    opacity: 1 !important;
    transform: none !important;
  }
  .hero h1 .underline::after { transform: scaleX(1) !important; animation: none !important; }
}