/* ============================================================
 * MK-MOTION v2 · CSS
 * Mehrkunden 26 · Emil Kowalski animation principles
 * ============================================================ */

:root {
  /* Custom easings — never built-in CSS defaults (Emil's rule) */
  --mk-ease-out:    cubic-bezier(0.23, 1, 0.32, 1);
  --mk-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --mk-ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* Durations — UI stays under 300ms (Emil's rule) */
  --mk-fast: 160ms;
  --mk-base: 220ms;
  --mk-slow: 280ms;
  --mk-reveal: 700ms;  /* Reveals can be slower since they're rare */
}

/* ============================================================
 * SCROLL REVEAL
 * Entering elements: ease-out (Emil rule)
 * ============================================================ */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--mk-reveal) var(--mk-ease-out),
              transform var(--mk-reveal) var(--mk-ease-out);
  will-change: opacity, transform;
}
[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal="down"]  { transform: translateY(-28px); }
[data-reveal="left"]  { transform: translateX(32px); }
[data-reveal="right"] { transform: translateX(-32px); }
[data-reveal="scale"] { transform: scale(0.95); }  /* never scale(0) — Emil */
[data-reveal="fade"]  { transform: none; }

[data-reveal].in-view {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

[data-stagger-item] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 600ms var(--mk-ease-out),
              transform 600ms var(--mk-ease-out);
  will-change: opacity, transform;
}
[data-reveal].in-view [data-stagger-item] {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
 * TEXT REVEAL (word-by-word)
 * ============================================================ */
.mk-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding-bottom: 0.05em;
  line-height: 1;
}
.mk-word-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 900ms var(--mk-ease-out),
              opacity 700ms ease;
  will-change: transform, opacity;
}
.mk-word-inner.reveal {
  transform: translateY(0);
  opacity: 1;
}
[data-text-reveal] {
  line-height: 1.05;
}

/* ============================================================
 * MAGNETIC (inner content offset)
 * ============================================================ */
[data-magnetic] { cursor: pointer; }
.magnetic-inner {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  pointer-events: none;
}

/* ============================================================
 * 3D TILT — Glare layer
 * ============================================================ */
.tilt-glare {
  z-index: 1;
  mix-blend-mode: overlay;
}

/* ============================================================
 * STICKY SEQUENCE
 * ============================================================ */
[data-sticky-sequence] [data-step] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 500ms var(--mk-ease-out),
              transform 500ms var(--mk-ease-out);
  pointer-events: none;
}
[data-sticky-sequence] [data-step].active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
[data-sequence-progress] {
  transition: width 180ms linear;
}

/* ============================================================
 * BUTTON PRESS FEEDBACK
 * Emil rule: every button needs :active scale(0.97)
 * ============================================================ */
button, .btn-primary, .btn-lime, .btn-wa, .btn-ghost, [role="button"],
a.btn-primary, a.btn-lime, a.btn-wa, a.btn-ghost {
  -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) and (pointer: fine) {
  /* Hover scales only on real pointers */
}

button:active,
.btn-primary:active,
.btn-lime:active,
.btn-wa:active,
.btn-ghost:active,
a.btn-primary:active,
a.btn-lime:active,
a.btn-wa:active,
a.btn-ghost:active {
  transform: scale(0.97);
  transition: transform 100ms var(--mk-ease-out);
}

/* ============================================================
 * REDUCED MOTION
 * Emil rule: reduced motion = fewer/gentler, not zero.
 * Keep opacity changes (aid comprehension), remove movement.
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    transform: none !important;
    transition: opacity 300ms ease !important;
  }
  [data-reveal].in-view {
    opacity: 1;
  }
  [data-stagger-item] {
    transform: none !important;
    transition: opacity 200ms ease !important;
  }
  .mk-word-inner {
    transform: none !important;
  }
  .mk-word-inner.reveal {
    opacity: 1;
  }
  [data-sticky-sequence] [data-step] {
    transform: none !important;
  }
  /* Disable magnetic/tilt entirely */
  [data-magnetic], [data-tilt], [data-parallax] {
    transform: none !important;
  }
}

/* ============================================================
 * MK-MOTION v3 · Distinctive Premium Layer
 * Aurora hero, blur-in headline, CTA sheen, scroll cue, live dot
 * GPU-safe (transform/opacity/filter), reduced-motion guarded
 * ============================================================ */

/* 1. Hero headline: blur-in word reveal (Vercel/Linear signature) */
[data-text-reveal] .mk-word-inner {
  filter: blur(14px);
  transition: transform 1100ms var(--mk-ease-out),
              opacity 800ms ease,
              filter 900ms var(--mk-ease-out);
}
[data-text-reveal] .mk-word-inner.reveal {
  filter: blur(0);
}

/* 2. Animated aurora — slow living gradient behind the hero */
.mk-aurora {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 80%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(40% 50% at 20% 30%, rgba(163,230,53,0.09), transparent 70%),
    radial-gradient(35% 45% at 75% 25%, rgba(163,230,53,0.06), transparent 70%),
    radial-gradient(30% 40% at 50% 60%, rgba(120,200,40,0.05), transparent 70%);
  filter: blur(30px);
  opacity: 0.5;
  animation: mk-aurora-drift 18s ease-in-out infinite alternate;
}
@keyframes mk-aurora-drift {
  0%   { transform: translate3d(-3%, -2%, 0) scale(1);    }
  50%  { transform: translate3d(4%, 3%, 0) scale(1.08);   }
  100% { transform: translate3d(-2%, 2%, 0) scale(1.03);  }
}

/* 3. CTA sheen — periodic light sweep on the primary lime button */
.btn-lime {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-lime::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: translateX(-250%) skewX(-20deg);
  z-index: 2;
  animation: mk-sheen 4.5s ease-in-out infinite;
  pointer-events: none;
}
@keyframes mk-sheen {
  0%, 55%  { transform: translateX(-250%) skewX(-20deg); }
  78%      { transform: translateX(266.7%) skewX(-20deg); }
  100%     { transform: translateX(266.7%) skewX(-20deg); }
}

/* 4. Scroll cue — coaching motion at hero bottom (keeps visitor scrolling) */
.mk-scroll-cue {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.mk-scroll-cue .mk-cue-track {
  width: 22px;
  height: 34px;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 12px;
  position: relative;
}
.mk-scroll-cue .mk-cue-dot {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 3px;
  height: 6px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: #A3E635;
  animation: mk-cue-bob 1.8s var(--mk-ease-out) infinite;
}
@keyframes mk-cue-bob {
  0%   { transform: translateY(0);    opacity: 0; }
  30%  { opacity: 1; }
  70%  { transform: translateY(14px); opacity: 0; }
  100% { transform: translateY(14px); opacity: 0; }
}

/* 5. Live dot — pulsing presence signal */
.mk-live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #25D366;
  position: relative;
  flex-shrink: 0;
  display: inline-block;
}
.mk-live-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #25D366;
  animation: mk-ping 2s cubic-bezier(0,0,0.2,1) infinite;
}
@keyframes mk-ping {
  0%   { transform: scale(1);   opacity: 0.7; }
  75%, 100% { transform: scale(2.6); opacity: 0; }
}

/* 6. Hero load choreography — staggered entrance for hero children */
[data-hero-seq] > * { opacity: 0; transform: translateY(20px); }
[data-hero-seq].mk-in > * {
  opacity: 1; transform: translateY(0);
  transition: opacity 700ms var(--mk-ease-out), transform 700ms var(--mk-ease-out);
}
[data-hero-seq].mk-in > *:nth-child(1) { transition-delay: 0ms;   }
[data-hero-seq].mk-in > *:nth-child(2) { transition-delay: 90ms;  }
[data-hero-seq].mk-in > *:nth-child(3) { transition-delay: 200ms; }
[data-hero-seq].mk-in > *:nth-child(4) { transition-delay: 320ms; }
[data-hero-seq].mk-in > *:nth-child(5) { transition-delay: 420ms; }
[data-hero-seq].mk-in > *:nth-child(6) { transition-delay: 520ms; }

/* Reduced-motion: disable all v3 decorative motion */
@media (prefers-reduced-motion: reduce) {
  [data-text-reveal] .mk-word-inner { filter: none !important; }
  .mk-aurora { animation: none !important; }
  .btn-lime::after { animation: none !important; display: none; }
  .mk-cue-dot { animation: none !important; }
  .mk-live-dot::before { animation: none !important; }
  .mk-scroll-cue { display: none !important; }
  [data-hero-seq] > * { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   Mobile horizontal-overflow guard  ·  desktop (>=1024px) untouched
   Verhindert das seitliche Beschneiden durch minimales Sub-Pixel-
   Ueberlaufen. overflow-x:clip (NICHT hidden) -> position:sticky
   und das weiche Scrollen zu Ankern bleiben voll funktionsfaehig.
   ============================================================ */
@media (max-width: 1023px) {
  html, body { overflow-x: clip; max-width: 100%; }
  [data-parallax] { transform: none !important; }
}