/* ═══════════════════════════════════════════════════════════
   MOTION + WOW LAYER — shared by index.html & portfolio.html
   emil-design-eng principles: custom easing · UI <300ms ·
   ease-out · entries scale≥0.95 · exit faster than enter ·
   GPU-only props · reduced-motion safe.
   ═══════════════════════════════════════════════════════════ */
:root {
  --ease-emil-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-emil-inout: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);

  /* ── Frosted-glass button system (shared, rectangular) ─────────
     One source of truth — tweak colors/radius here for ALL pages.
     Primary = filled blue glass · Secondary = glass outline.
     Text uses a white→blue shimmer (background-clip:text).        */
  --gbtn-blur: blur(12px) saturate(1.7);
  --gbtn-fill: linear-gradient(135deg, rgba(74,142,255,0.74), rgba(42,108,246,0.52));
  --gbtn-fill-hover: linear-gradient(135deg, rgba(112,176,255,0.88), rgba(58,130,252,0.66));
  --gbtn-border: linear-gradient(135deg, rgba(190,220,255,1), rgba(86,150,255,0.85), rgba(124,184,255,0.5));
  --gbtn-border-hover: linear-gradient(135deg, rgba(215,233,255,1), rgba(135,192,255,1), rgba(135,192,255,0.65));
  --gbtn-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 10px 30px -12px rgba(5,8,15,0.7), 0 0 48px -8px rgba(66,132,255,0.9);
  --gbtn-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.4), 0 16px 46px -12px rgba(66,132,255,0.72), 0 0 72px -4px rgba(135,192,255,1);
  --gbtn2-fill: rgba(86,156,255,0.1);
  --gbtn2-fill-hover: rgba(96,165,250,0.22);
  --gbtn2-border: linear-gradient(135deg, rgba(132,190,255,0.85), rgba(150,192,255,0.3), rgba(96,165,250,0.32));
  --gbtn2-border-hover: linear-gradient(135deg, rgba(190,220,255,1), rgba(132,190,255,0.85), rgba(132,190,255,0.5));
  --gbtn2-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  --gbtn2-shadow-hover: inset 0 1px 0 rgba(255,255,255,0.18), 0 0 40px -12px rgba(96,165,250,0.72);
  --gbtn-text: linear-gradient(180deg, #ffffff 0%, #f1f6ff 55%, #e4edff 100%);
}

/* Button labels — stronger weight so text reads clearly (not too thin) */
.nav-cta, .menu-cta, .cta-magnetic, .cta-btn, .lp-cta-btn,
.project-link, .news-more, .svc-link { font-weight: 600; }

/* #6 — Pressable feedback (instant, GPU-only) */
@media (hover: hover) and (pointer: fine) {
  .cta-magnetic:active,
  .form-submit:active,
  .nav-cta:active,
  .menu-cta:active,
  .quiz-next:active { transform: scale(0.97); }
  .quiz-tile:active { transform: scale(0.99); }
}
.cta-arrow { transition: transform 220ms var(--ease-emil-out); }

/* #1 — Hero kinetic headline (per-char slide-up + stagger) */
.kin-word { display: inline-block; }
.kin-char {
  display: inline-block;
  transform: translateY(0.42em);
  opacity: 0;
  will-change: transform, opacity;
}
.kin-char.kin-space { width: 0.28em; transform: none; }
.hero-brand-name.kin-ready .kin-char {
  transition: transform 820ms var(--ease-emil-out), opacity 820ms var(--ease-emil-out);
}
.hero-brand-name.kin-in .kin-char { transform: translateY(0); opacity: 1; }

/* #2 — Problem card icons draw on enter */
.prob-draw path {
  stroke-dasharray: var(--len, 120);
  stroke-dashoffset: var(--len, 120);
  transition: stroke-dashoffset 1100ms var(--ease-emil-out);
}
.prob-draw.drawn path { stroke-dashoffset: 0; }

/* #3 — Cases hover lift (no layout shift, parallax already present) */
@media (hover: hover) and (pointer: fine) {
  .case-card { transition: transform 420ms var(--ease-emil-out), box-shadow 420ms var(--ease-emil-out); }
  .case-card:hover { transform: scale(1.02); box-shadow: 0 32px 70px -30px rgba(96,165,250,0.5); z-index: 2; }
  .case-img { transition: transform 640ms var(--ease-emil-out); }
  .case-card:hover .case-img { transform: scale(1.05); }
}

/* #4 — Process scrub progress bar (desktop pin only) */
.proc-progress {
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(96,165,250,0.12);
  z-index: 12; overflow: hidden; pointer-events: none;
}
.proc-progress-fill {
  position: absolute; inset: 0 100% 0 0;
  background: linear-gradient(90deg, var(--accent), var(--accent-glow));
  box-shadow: 0 0 16px rgba(96,165,250,0.7);
}
@media (max-width: 767px) { .proc-progress { display: none; } }

/* #7 — Quiz: origin scale-in + blur crossfade, faster exit */
.quiz {
  transform: scale(0.97);
  transition: opacity 320ms var(--ease-emil-out), transform 320ms var(--ease-emil-out), visibility 0s linear 320ms;
}
.quiz.open {
  transform: scale(1);
  transition: opacity 380ms var(--ease-emil-out), transform 380ms var(--ease-emil-out), visibility 0s linear 0s;
}
.quiz-slide-inner {
  filter: blur(6px);
  transition: opacity 520ms var(--ease-emil-out) 0.16s, transform 520ms var(--ease-emil-out) 0.16s, filter 520ms var(--ease-emil-out) 0.16s;
}
.quiz-slide.active .quiz-slide-inner { filter: blur(0); }

/* #9 — Page transition fade overlay */
.page-fade {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--navy-0);
  opacity: 0; pointer-events: none;
  transition: opacity 280ms var(--ease-emil-out);
}
.page-fade.show { opacity: 1; pointer-events: all; }

/* Quality — calmer marquee */
.marquee-track { animation-duration: 64s; }

/* Accessibility — reduced motion: keep opacity, drop movement */
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
  .kin-char { transform: none !important; opacity: 1 !important; }
  .case-card:hover, .case-card:hover .case-img { transform: none !important; }
  .quiz, .quiz.open { transform: none !important; }
  .quiz-slide-inner { filter: none !important; }
  .prob-draw path { stroke-dashoffset: 0 !important; transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════
   WOW LAYER — signature interactions (desktop, motion-safe):
   ambient aurora · custom cursor · per-section heading reveals ·
   decode/scramble eyebrows.
   ═══════════════════════════════════════════════════════════ */

/* Ambient aurora (global depth, sits behind content) */
.aurora {
  position: fixed; inset: -20% -10% auto -10%; height: 130vh;
  z-index: -1; pointer-events: none; opacity: 0.45;
  background:
    radial-gradient(40% 40% at 20% 30%, rgba(29,78,216,0.20), transparent 70%),
    radial-gradient(36% 36% at 80% 22%, rgba(96,165,250,0.16), transparent 70%),
    radial-gradient(46% 46% at 62% 82%, rgba(59,130,246,0.13), transparent 70%);
  filter: blur(46px);
  /* statisch (keine Animation) — maximale Scroll-Performance */
}

/* Custom cursor entfernt — Standard-Mauszeiger überall (cursor: auto / pointer). */

/* Per-section heading word reveal */
.wow-word { display: inline-block; transform: translateY(0.5em); opacity: 0; will-change: transform, opacity; }
.wow-reveal .wow-word { transition: transform 720ms var(--ease-emil-out), opacity 720ms var(--ease-emil-out); }
.wow-reveal.in .wow-word { transform: translateY(0); opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .aurora { animation: none; }
  .wow-word { transform: none !important; opacity: 1 !important; }
}

/* ═══════════════ NEW: branded intro reveal ═══════════════ */
.intro {
  position: fixed; inset: 0; z-index: 10000; background: var(--navy-0);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px;
  transition: transform 820ms var(--ease-emil-inout);
}
.intro.out { transform: translateY(-101%); }
.intro-brand {
  font-family: 'Bricolage Grotesque', Georgia, sans-serif; font-weight: 500;
  font-size: clamp(2rem, 6vw, 4rem); letter-spacing: -0.03em; color: var(--paper);
  opacity: 0; transform: translateY(14px);
  transition: opacity .6s var(--ease-emil-out), transform .6s var(--ease-emil-out);
  text-shadow: 0 0 30px rgba(96,165,250,0.35);
}
.intro-brand em { font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--accent-glow); }
.intro-bar { width: min(220px, 44vw); height: 2px; border-radius: 2px; background: rgba(96,165,250,0.15); overflow: hidden; }
.intro-bar > i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), var(--accent-glow)); box-shadow: 0 0 14px rgba(96,165,250,0.7); }
.intro.show .intro-brand { opacity: 1; transform: none; }
.intro.show .intro-bar > i { width: 100%; transition: width 950ms var(--ease-emil-out) .1s; }

@media (prefers-reduced-motion: reduce) {
  .intro { display: none !important; }
}

/* ═══════════════ NEW: hero particle constellation ═══════════════ */
.hero-net {
  position: absolute; inset: 0; z-index: 0;
  pointer-events: none; opacity: 0.6;
}
@media (prefers-reduced-motion: reduce) { .hero-net { display: none !important; } }
@media (hover: none), (pointer: coarse) { .hero-net { display: none !important; } }

/* ═══════════════ NEW: growth spine (scroll progress + nav) ═══════════════ */
.spine {
  position: fixed; left: 20px; top: 0; bottom: 0; width: 2px; z-index: 60; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.spine-track { position: absolute; inset: 0; background: rgba(96,165,250,0.12); }
.spine-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  transform-origin: top; transform: scaleY(0);
  background: linear-gradient(180deg, var(--accent-glow), var(--accent));
  box-shadow: 0 0 12px rgba(96,165,250,0.6);
  transition: transform 120ms linear;
}
.spine-node {
  position: absolute; left: 50%; width: 9px; height: 9px; margin-left: -4.5px;
  border-radius: 50%; background: var(--navy-0); border: 1.5px solid rgba(96,165,250,0.5);
  transform: translateY(-50%) scale(0.8); pointer-events: auto; cursor: pointer;
  transition: transform .3s var(--ease-emil-out), background-color .3s, border-color .3s, box-shadow .3s;
}
.spine-node.active { background: var(--accent-glow); border-color: var(--accent-glow); box-shadow: 0 0 14px var(--accent-glow); transform: translateY(-50%) scale(1.2); }
.spine-node::after {
  content: attr(data-label); position: absolute; left: 18px; top: 50%; transform: translateY(-50%);
  white-space: nowrap; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: .15em;
  text-transform: uppercase; color: var(--accent-glow); opacity: 0; transition: opacity .3s;
}
.spine-node:hover::after { opacity: 0.95; }
@media (max-width: 1200px) { .spine { display: none; } }

/* ═══════════════ NEW: DSGVO consent banner ═══════════════ */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9000;
  max-width: 560px; margin: 0 auto;
  background: rgba(10,15,28,0.92); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid rgba(96,165,250,0.25); border-radius: 16px; padding: 18px 20px; color: var(--paper);
  box-shadow: 0 24px 60px -20px rgba(0,0,0,0.7);
  transform: translateY(140%); opacity: 0;
  transition: transform .5s var(--ease-emil-out), opacity .5s var(--ease-emil-out);
}
.cookie.show { transform: none; opacity: 1; }
.cookie p { font-size: 13.5px; line-height: 1.6; color: rgba(242,239,230,0.72); margin: 0 0 14px; }
.cookie a { color: var(--accent-glow); }
.cookie-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.cookie-btn {
  font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  padding: 10px 16px; border-radius: 999px; cursor: pointer; border: 1px solid rgba(242,239,230,0.25);
  background: rgba(255,255,255,0.05); color: var(--paper); box-shadow: inset 0 1px 0 rgba(255,255,255,0.06);
  transition: background-color .2s, border-color .2s, transform .15s;
}
.cookie-btn:active { transform: translateY(1px); }
.cookie-btn.primary { background: var(--accent); border-color: rgba(96,165,250,0.55); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18), 0 4px 12px -5px rgba(5,8,15,0.55); }
.cookie-btn.primary:hover { background: var(--accent-light); }
.cookie-btn.ghost:hover { background: rgba(255,255,255,0.1); border-color: rgba(242,239,230,0.4); }

/* ═══════════════ NEW: footer brand signature ═══════════════ */
.footer-brand {
  font-family: 'Bricolage Grotesque', Georgia, sans-serif; font-weight: 500;
  font-size: clamp(2.4rem, 6vw, 4.5rem); letter-spacing: -0.04em; line-height: 1;
  color: var(--paper); text-shadow: 0 0 30px rgba(96,165,250,0.25);
}
.footer-brand em { font-family: 'Fraunces', Georgia, serif; font-style: italic; color: var(--accent-glow); text-shadow: 0 0 26px rgba(96,165,250,0.5); }