/**
 * kids24 - Motion layer (restrained, content-first)
 * Loads after styles.css. Progressive enhancement via html.js.
 */

:root {
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-fast: 160ms;
  --motion-ui: 220ms;
  --motion-reveal: 620ms;
  --reveal-distance: 14px;
  --reveal-stagger: 55ms;
}

/* --- Progressive reveal: visible without JS --- */
[data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

html.js [data-reveal]:not(.revealed) {
  opacity: 0;
  transform: translate3d(0, var(--reveal-distance), 0);
  transition: none;
  will-change: opacity, transform;
}

html.js [data-reveal].revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity var(--motion-reveal) var(--ease-soft),
    transform var(--motion-reveal) var(--ease-soft);
  transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
  will-change: auto;
}

html.js [data-reveal][data-reveal-from="left"]:not(.revealed) {
  transform: translate3d(-12px, 0, 0);
}

html.js [data-reveal][data-reveal-from="right"]:not(.revealed) {
  transform: translate3d(12px, 0, 0);
}

html.js [data-reveal][data-reveal-from="fade"]:not(.revealed) {
  transform: none;
}

/* --- Hero entrance (once, subtle stagger) --- */
@keyframes kids24-hero-in {
  from {
    opacity: 0;
    transform: translate3d(0, 12px, 0);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

html.js [data-hero-in] {
  animation: kids24-hero-in 0.72s var(--ease-soft) both;
  animation-delay: calc(var(--hero-i, 0) * 70ms);
}

html.js .hero__cards .hero__card {
  animation: kids24-hero-in 0.68s var(--ease-soft) both;
}

html.js .hero__cards .hero__card:nth-child(1) { animation-delay: 180ms; }
html.js .hero__cards .hero__card:nth-child(2) { animation-delay: 240ms; }
html.js .hero__cards .hero__card:nth-child(3) { animation-delay: 300ms; }
html.js .hero__cards .hero__card:nth-child(4) { animation-delay: 360ms; }
html.js .hero__cards .hero__card:nth-child(5) { animation-delay: 420ms; }

html.js .page-header__inner {
  animation: kids24-hero-in 0.65s var(--ease-soft) both;
}

/* Soften perpetual bounce on scroll cue */
.hero__scroll {
  animation-duration: 2.8s;
  animation-timing-function: var(--ease-in-out);
}

/* --- Microinteractions: buttons --- */
.btn {
  transition:
    transform var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-ui) var(--ease-out),
    background-color var(--motion-ui) ease,
    color var(--motion-ui) ease,
    border-color var(--motion-ui) ease;
}

.btn:active {
  transform: scale(0.97);
}

.btn--primary:active,
.btn--whatsapp:active,
.btn--outline:active,
.btn--outline-dark:active {
  transform: scale(0.97);
}

@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover,
  .btn--whatsapp:hover {
    transform: translateY(-2px);
  }

  .btn--primary:hover:active,
  .btn--whatsapp:hover:active {
    transform: scale(0.97);
  }

  .card:hover,
  .card--link:hover,
  .team-card:hover,
  .wissen-card:hover,
  .concept-pillar:hover,
  .dual-cta-card:hover {
    transform: translateY(-3px);
  }

  .job-card:hover {
    transform: translateX(3px);
  }

  .einblick-item:hover {
    transform: scale(1.015);
  }

  .whatsapp-btn:hover {
    transform: scale(1.06);
  }
}

/* --- Cards / interactive surfaces: specify properties --- */
.card,
.team-card,
.wissen-card,
.concept-pillar,
.dual-cta-card,
.benefit-item,
.job-card,
.trust-kachel,
.einblick-item {
  transition:
    transform var(--motion-ui) var(--ease-out),
    box-shadow var(--motion-ui) var(--ease-out),
    border-color var(--motion-ui) ease,
    background-color var(--motion-ui) ease;
}

/* FAQ icon: snappier */
.faq-q__icon {
  transition:
    transform var(--motion-ui) var(--ease-out),
    background-color var(--motion-ui) ease,
    color var(--motion-ui) ease;
}

.faq-a {
  transition: grid-template-rows 280ms var(--ease-out);
}

/* Search overlay */
.search-overlay {
  transition: visibility var(--motion-ui), opacity var(--motion-ui) var(--ease-out);
}

.search-overlay__panel {
  transition: transform 280ms var(--ease-out);
}

/* Smooth scroll only when motion is OK */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* --- Accessibility: reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js [data-reveal]:not(.revealed),
  html.js [data-reveal].revealed {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  html.js [data-hero-in],
  html.js .hero__cards .hero__card,
  html.js .page-header__inner {
    animation: none;
  }

  .hero__scroll,
  .hero__badge-dot,
  .tag--new {
    animation: none !important;
  }

  .btn,
  .card,
  .team-card,
  .wissen-card,
  .concept-pillar,
  .dual-cta-card,
  .benefit-item,
  .job-card,
  .trust-kachel,
  .einblick-item,
  .whatsapp-btn,
  .faq-q__icon,
  .faq-a,
  .search-overlay,
  .search-overlay__panel {
    transition: none !important;
  }

  .btn:active,
  .btn:hover,
  .card:hover,
  .einblick-item:hover,
  .job-card:hover,
  .whatsapp-btn:hover {
    transform: none !important;
  }
}

@media (scripting: none) {
  [data-reveal],
  [data-hero-in] {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}