/* =============================================================
   CINEMATIC SUB v1 - shared layer for warum-jetzt, methodik, faq
   13.05.2026 · S1+S2+S3 + page-specific patches
   ============================================================= */

/* --- S1 Hero-Letter-Reveal - wraps H1 words and fades them in --- */
.cs-h1 .cs-word{
  display:inline-block;
  opacity:0;
  transform:translateY(36px) rotate(-2deg);
  filter:blur(6px);
  transition:opacity 1.1s cubic-bezier(0.16,1,0.3,1),
             transform 1.1s cubic-bezier(0.16,1,0.3,1),
             filter 1.1s cubic-bezier(0.16,1,0.3,1);
}
.cs-h1.is-revealed .cs-word{
  opacity:1;
  transform:translateY(0) rotate(0);
  filter:blur(0);
}

/* --- S2 Scroll-Reveal --- */
.cs-reveal{
  opacity:0;
  transform:translateY(40px);
  transition:opacity .9s cubic-bezier(0.22,1,0.36,1),
             transform .9s cubic-bezier(0.22,1,0.36,1);
  will-change:opacity,transform;
}
.cs-reveal.is-on{
  opacity:1;
  transform:none;
  will-change:auto;
}
.cs-reveal.cs-delay-1{transition-delay:.10s}
.cs-reveal.cs-delay-2{transition-delay:.22s}
.cs-reveal.cs-delay-3{transition-delay:.34s}

/* --- warum-jetzt specific: Counter-Strip Tick-In --- */
.wj-counter-num{
  font-variant-numeric:tabular-nums;
}
.wj-counter-strip:not(.cs-counted) .wj-counter-num{
  opacity:.35;
  filter:blur(2px);
  transition:opacity .55s cubic-bezier(0.22,1,0.36,1),
             filter .55s cubic-bezier(0.22,1,0.36,1);
}
.wj-counter-strip.cs-counted .wj-counter-num{
  opacity:1;
  filter:blur(0);
}

/* --- methodik specific: prism-vs Spotlight-Hover (.vs-col) --- */
.prism-vs .vs-col{
  transition:opacity .5s cubic-bezier(0.22,1,0.36,1),
             transform .5s cubic-bezier(0.16,1,0.3,1),
             filter .5s cubic-bezier(0.22,1,0.36,1),
             box-shadow .5s cubic-bezier(0.22,1,0.36,1);
}
.prism-vs-inner:hover .vs-col:not(:hover):not(:focus-within){
  opacity:.42;
  transform:scale(.985);
  filter:saturate(.55);
}
.prism-vs .vs-col:hover,
.prism-vs .vs-col:focus-within{
  transform:scale(1.012) translateY(-2px);
  box-shadow:0 16px 44px rgba(0,0,0,.22), 0 0 0 1px rgba(37,99,235,.20);
}

/* --- faq specific: smoother open-animation + arrow polish (overrides existing) --- */
.faq-item .faq-a{
  /* existing inline rule: max-height:0 → 800px, transition: max-height .3s ease */
  transition:max-height .55s cubic-bezier(0.22,1,0.36,1),
             opacity .45s cubic-bezier(0.22,1,0.36,1) !important;
  opacity:0;
}
.faq-item.open .faq-a{
  opacity:1;
  max-height:1200px !important;
}
.faq-item{
  transition:border-color .35s cubic-bezier(0.22,1,0.36,1),
             box-shadow .35s cubic-bezier(0.22,1,0.36,1),
             transform .35s cubic-bezier(0.22,1,0.36,1) !important;
}
.faq-item:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 24px rgba(0,0,0,.15);
}
.faq-arrow{
  transition:transform .4s cubic-bezier(0.16,1,0.3,1),
             color .35s cubic-bezier(0.22,1,0.36,1) !important;
}

/* Stagger-Reveal for FAQ list when section visible */
.faq-list.cs-staggered .faq-item{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .55s cubic-bezier(0.16,1,0.3,1),
             transform .55s cubic-bezier(0.16,1,0.3,1);
}
.faq-list.cs-staggered.is-on .faq-item{
  opacity:1;
  transform:none;
}
.faq-list.cs-staggered.is-on .faq-item:nth-child(1){transition-delay:.05s}
.faq-list.cs-staggered.is-on .faq-item:nth-child(2){transition-delay:.10s}
.faq-list.cs-staggered.is-on .faq-item:nth-child(3){transition-delay:.15s}
.faq-list.cs-staggered.is-on .faq-item:nth-child(4){transition-delay:.20s}
.faq-list.cs-staggered.is-on .faq-item:nth-child(5){transition-delay:.25s}
.faq-list.cs-staggered.is-on .faq-item:nth-child(n+6){transition-delay:.30s}

/* --- S3 Easing-Audit: small overrides for common buttons + cards --- */
.btn-primary, .btn-secondary, .nav-cta{
  transition-timing-function:cubic-bezier(0.22,1,0.36,1) !important;
}

/* --- Burger + Mobile Nav Drawer (Patch M6, 13.05.2026) --- */
.nav-burger{
  display:none;
  width:40px;height:40px;
  background:transparent;border:1px solid var(--border);border-radius:10px;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  cursor:pointer;padding:0;margin-left:10px;
  transition:border-color .25s cubic-bezier(0.22,1,0.36,1),
             background .25s cubic-bezier(0.22,1,0.36,1);
}
.nav-burger:hover{border-color:#06B6D4;background:rgba(6,182,212,.06)}
.nav-burger span{
  display:block;width:18px;height:2px;background:var(--text);border-radius:2px;
  transition:transform .35s cubic-bezier(0.16,1,0.3,1),
             opacity .25s cubic-bezier(0.22,1,0.36,1);
}
.nav-burger.open span:nth-child(1){transform:translateY(7px) rotate(45deg);background:#06B6D4}
.nav-burger.open span:nth-child(2){opacity:0}
.nav-burger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:#06B6D4}
.mobile-nav{
  position:fixed;top:0;right:0;bottom:0;width:88%;max-width:360px;
  background:var(--bg);border-left:1px solid var(--border);
  padding:96px 28px 36px;
  display:flex;flex-direction:column;gap:6px;
  transform:translateX(100%);
  transition:transform .45s cubic-bezier(0.16,1,0.3,1);
  z-index:998;overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.mobile-nav.open{transform:translateX(0)}
.mobile-nav a{
  color:var(--text);font-size:1.1rem;font-weight:500;
  padding:14px 4px;border-bottom:1px solid var(--border);text-decoration:none;
  transition:color .25s cubic-bezier(0.22,1,0.36,1),
             padding-left .25s cubic-bezier(0.22,1,0.36,1);
}
.mobile-nav a:hover,.mobile-nav a:focus{color:#06B6D4;padding-left:8px}
.mobile-nav-actions{margin-top:24px;display:flex;flex-direction:column;gap:10px}
.mobile-nav .m-cta{
  display:inline-flex;align-items:center;justify-content:center;
  background:#06B6D4;color:#06061A !important;
  padding:14px 18px;border-radius:10px;border:none;
  font-weight:700;font-size:.95rem;text-align:center;
}
.mobile-nav-backdrop{
  position:fixed;inset:0;z-index:997;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  opacity:0;pointer-events:none;
  transition:opacity .35s cubic-bezier(0.22,1,0.36,1);
}
.mobile-nav-backdrop.open{opacity:1;pointer-events:auto}
@media (max-width:980px){
  .nav-burger{display:flex}
  .nav-links{display:none}
}
@media (min-width:981px){
  .nav-burger,.mobile-nav,.mobile-nav-backdrop{display:none !important}
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce){
  .cs-h1 .cs-word,
  .cs-reveal,
  .wj-counter-strip:not(.cs-counted) .wj-counter-num,
  .prism-vs .vs-side,
  .faq-list.cs-staggered .faq-item{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
    transition:none !important;
  }
  .faq-item .faq-a{
    transition:none;
  }
}