/**
 * AIEE motion — Emil Kowalski design-engineering patterns
 * Transform + opacity only · custom ease-out · @starting-style · stagger · reduced motion
 */
:root {
  --aiee-ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --aiee-ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
  --aiee-duration-fast: 160ms;
  --aiee-duration-ui: 220ms;
  --aiee-duration-enter: 480ms;
}

/* ── Scroll reveals (paired with aiee-motion.js) ── */
.aiee-reveal {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity var(--aiee-duration-enter) var(--aiee-ease-out),
    transform var(--aiee-duration-enter) var(--aiee-ease-out);
}

.aiee-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.aiee-stagger.is-visible > .kngcl-news-item:nth-child(1) { transition-delay: 0ms; }
.aiee-stagger.is-visible > .kngcl-news-item:nth-child(2) { transition-delay: 55ms; }
.aiee-stagger.is-visible > .kngcl-news-item:nth-child(3) { transition-delay: 110ms; }

.aiee-stagger > .kngcl-news-item {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 400ms var(--aiee-ease-out),
    transform 400ms var(--aiee-ease-out),
    border-color 200ms var(--aiee-ease-out),
    box-shadow 200ms var(--aiee-ease-out);
}

.aiee-stagger.is-visible > .kngcl-news-item {
  opacity: 1;
  transform: translateY(0);
}

.aiee-pillars.is-visible .kngcl-pillar:nth-child(1) { transition-delay: 0ms; }
.aiee-pillars.is-visible .kngcl-pillar:nth-child(2) { transition-delay: 45ms; }
.aiee-pillars.is-visible .kngcl-pillar:nth-child(3) { transition-delay: 90ms; }
.aiee-pillars.is-visible .kngcl-pillar:nth-child(4) { transition-delay: 135ms; }
.aiee-pillars.is-visible .kngcl-pillar:nth-child(5) { transition-delay: 180ms; }
.aiee-pillars.is-visible .kngcl-pillar:nth-child(6) { transition-delay: 225ms; }

.aiee-pillars .kngcl-pillar {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 450ms var(--aiee-ease-out),
    transform 450ms var(--aiee-ease-out);
}

.aiee-pillars.is-visible .kngcl-pillar {
  opacity: 1;
  transform: translateY(0);
}

/* ── Hero entrance (@starting-style + fallback) ── */
.kngcl-hero .kngcl-eyebrow,
.kngcl-hero .kngcl-hero-title,
.kngcl-hero .kngcl-hero-actions,
.kngcl-hero .kngcl-feature-card {
  opacity: 1;
  transform: none;
  transition:
    opacity 520ms var(--aiee-ease-out),
    transform 520ms var(--aiee-ease-out);
}

@supports (animation-range: entry) {
  .kngcl-hero .kngcl-eyebrow {
    @starting-style { opacity: 0; transform: translateY(10px); }
  }
  .kngcl-hero .kngcl-hero-title {
    @starting-style { opacity: 0; transform: translateY(18px); }
  }
  .kngcl-hero .kngcl-hero-actions {
    @starting-style { opacity: 0; transform: translateY(12px); }
  }
  .kngcl-hero .kngcl-feature-card {
    @starting-style { opacity: 0; transform: translateY(20px) scale(0.97); }
    transform-origin: 100% 50%;
  }
}

html:not(.js) .kngcl-hero .kngcl-feature-card,
html.aiee-reduced-motion .kngcl-hero .kngcl-feature-card {
  opacity: 1;
  transform: none;
}

/* ── Feature card: origin-aware lift (not center scale) ── */
.kngcl-feature-card {
  transform-origin: 100% 42%;
  transition:
    transform var(--aiee-duration-ui) var(--aiee-ease-out),
    box-shadow var(--aiee-duration-ui) var(--aiee-ease-out),
    border-color 200ms var(--aiee-ease-out) !important;
}

.kngcl-feature-card:hover {
  transform: translateY(-4px) !important;
}

.kngcl-feature-card img {
  transition: transform 520ms var(--aiee-ease-out) !important;
}

/* ── Buttons: Emil press feedback ── */
.kngcl-btn,
body.kngcl-site .button,
body.kngcl-site button.button {
  transition:
    transform var(--aiee-duration-fast) var(--aiee-ease-out),
    box-shadow var(--aiee-duration-ui) var(--aiee-ease-out),
    background var(--aiee-duration-ui) var(--aiee-ease-out),
    border-color var(--aiee-duration-ui) var(--aiee-ease-out),
    color var(--aiee-duration-ui) var(--aiee-ease-out) !important;
}

.kngcl-btn:active,
body.kngcl-site .button:active,
body.kngcl-site button.button:active {
  transform: scale(0.97) !important;
  transition-duration: 80ms !important;
}

/* ── Cards: specify properties (never transition: all) ── */
.kngcl-news-item,
.kngcl-pillar-card {
  transition:
    transform var(--aiee-duration-ui) var(--aiee-ease-out),
    box-shadow var(--aiee-duration-ui) var(--aiee-ease-out),
    border-color 200ms var(--aiee-ease-out) !important;
}

.kngcl-pillar-card:hover {
  transform: translateY(-3px) !important;
}

/* ── Stats: subtle pop when visible ── */
.aiee-stats.is-visible .kngcl-stat {
  animation: aiee-stat-in 520ms var(--aiee-ease-out) backwards;
}

.aiee-stats.is-visible .kngcl-stat:nth-child(1) { animation-delay: 0ms; }
.aiee-stats.is-visible .kngcl-stat:nth-child(2) { animation-delay: 60ms; }
.aiee-stats.is-visible .kngcl-stat:nth-child(3) { animation-delay: 120ms; }
.aiee-stats.is-visible .kngcl-stat:nth-child(4) { animation-delay: 180ms; }

@keyframes aiee-stat-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ── Header: snappy shadow on scroll ── */
.main-header {
  transition:
    box-shadow 280ms var(--aiee-ease-out),
    border-color 280ms var(--aiee-ease-out) !important;
}

/* ── Submenu enter ── */
@media screen and (min-width: 951px) {
  body.kngcl-site .main-menu li .sub-menu {
    transform: translateY(6px) scale(0.98);
    transform-origin: top left;
    transition:
      opacity 180ms var(--aiee-ease-out),
      transform 180ms var(--aiee-ease-out),
      visibility 180ms !important;
  }
  body.kngcl-site .main-menu li:hover .sub-menu,
  body.kngcl-site .main-menu li:focus-within .sub-menu {
    transform: translateY(0) scale(1);
  }
}

/* ── Image clip reveal on band ── */
.kngcl-band-media img {
  clip-path: inset(0 0 0 0);
  transition: clip-path 700ms var(--aiee-ease-out), transform 600ms var(--aiee-ease-out);
}

.aiee-reveal.is-visible .kngcl-band-media img {
  clip-path: inset(0 0 0 0);
}

.aiee-reveal:not(.is-visible) .kngcl-band-media img {
  clip-path: inset(8% 0 0 0);
}

/* ── Reduced motion: keep comprehension, drop movement ── */
@media (prefers-reduced-motion: reduce) {
  .aiee-reveal,
  .aiee-stagger > .kngcl-news-item,
  .aiee-pillars .kngcl-pillar {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .kngcl-feature-card:hover,
  .kngcl-pillar-card:hover,
  .kngcl-news-item:hover {
    transform: none !important;
  }

  .kngcl-feature-card img,
  .kngcl-pillar-img {
    transition: none !important;
  }
}

html.aiee-reduced-motion .aiee-reveal,
html.aiee-reduced-motion .aiee-stagger > .kngcl-news-item,
html.aiee-reduced-motion .aiee-pillars .kngcl-pillar {
  opacity: 1;
  transform: none;
  animation: none;
}