/* Etusivu: responsiivisuus ja liike */
.kk-page { --kk-inset: max(40px, calc((100% - 1280px) / 2)); --kk-ease: cubic-bezier(0.2, 0.7, 0.2, 1); }
.kk-page img { max-width: 100%; }
.kk-nav a:hover { border-bottom-color: var(--brand-red) !important; }
.kk-cell { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.kk-foot a { color: var(--on-inverse); }

/* Yläpalkki: pysyy ylhäällä, lasimainen tausta */
.kk-sticky { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.82); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(28, 26, 26, 0.06); }

/* Rajattu kuva, joka avautuu koko leveydelle (lepotila: rajattu) */
.kk-expand { clip-path: inset(0 var(--kk-inset) round 12px); }
.kk-chip { left: calc(var(--kk-inset) + 20px); }

/* Kortit: nosto ja kuvan zoomaus */
.kk-card { transition: translate 0.5s var(--kk-ease); }
.kk-card img { transition: transform 0.9s var(--kk-ease); }
.kk-card:hover { translate: 0 -6px; }
.kk-card:hover img { transform: scale(1.05); }

/* Latautuessa: otsikko nousee ja tarkentuu */
@keyframes kk-rise-in { from { opacity: 0; transform: translateY(32px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.kk-rise { animation: kk-rise-in 1.1s var(--kk-ease) both; }

/* Vierityksen mukaan etenevät animaatiot (Chrome, Edge, Safari 26). Muualla sivu näkyy staattisena. */
@supports (animation-timeline: view()) {
  @keyframes kk-reveal-in { from { opacity: 0; transform: translateY(56px); } to { opacity: 1; transform: none; } }
  @keyframes kk-soft-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes kk-open { from { clip-path: inset(0 var(--kk-inset) round 12px); } to { clip-path: inset(0 0 round 0px); } }
  @keyframes kk-zoom-out { from { transform: scale(1.14); } to { transform: scale(1); } }
  @keyframes kk-drift { from { transform: translateY(-7%) scale(1.16); } to { transform: translateY(7%) scale(1.16); } }
  @keyframes kk-panel { from { transform: scale(0.93); opacity: 0.4; } to { transform: none; opacity: 1; } }
  @keyframes kk-up { from { transform: translateY(96px); opacity: 0; } to { transform: none; opacity: 1; } }
  @keyframes kk-word-on { from { opacity: 0.16; } to { opacity: 1; } }
  @keyframes kk-step-in { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: none; } }

  .kk-reveal { animation: kk-reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  .kk-reveal-soft { animation: kk-soft-in linear both; animation-timeline: view(); animation-range: entry 10% entry 90%; }
  .kk-card { animation: kk-reveal-in linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  .kk-card:nth-child(2) { animation-range: entry 12% entry 85%; }
  .kk-card:nth-child(3) { animation-range: entry 24% entry 100%; }

  .kk-expand { animation: kk-open linear both; animation-timeline: view(); animation-range: cover 30% cover 60%; }
  .kk-expand.kk-rise { animation: kk-rise-in 1.1s var(--kk-ease) both, kk-open linear both; animation-timeline: auto, view(); animation-range: normal, cover 35% cover 65%; animation-delay: 0.6s, 0s; }
  .kk-zoom { animation: kk-zoom-out linear both; animation-timeline: view(); animation-range: cover 0% cover 60%; }
  .kk-parallax { animation: kk-drift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }

  .kk-panel-in { animation: kk-panel linear both; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  .kk-slide-up { animation: kk-up linear both; animation-timeline: view(); animation-range: entry 10% entry 100%; }

  .kk-word { animation: kk-word-on linear both; animation-timeline: view(); animation-range: cover 22% cover 42%; }
  .kk-steps .kk-step { animation: kk-step-in linear both; animation-timeline: view(); animation-range: entry 10% entry 100%; }
}

@media (max-width: 900px) {
  .kk-page { --kk-inset: 16px; }
  .kk-hide-narrow { display: none !important; }
  .kk-logo-top { height: 32px !important; }
  header.kk-bar { height: 72px !important; }
  .kk-section { padding-top: 64px !important; padding-bottom: 64px !important; }
  .kk-bar { padding-left: 16px !important; padding-right: 16px !important; }
  .kk-display { font-size: 44px !important; letter-spacing: -0.02em !important; }
  .kk-hero-img { height: 520px !important; }
  .kk-panel { padding: 32px 20px !important; }
}
@media (min-width: 901px) {
  .kk-show-narrow { display: none !important; }
}

/* Liikettä vältteleville: kaikki paikallaan */
@media (prefers-reduced-motion: reduce) {
  .kk-rise, .kk-reveal, .kk-reveal-soft, .kk-card, .kk-expand, .kk-zoom, .kk-parallax, .kk-panel-in, .kk-slide-up, .kk-word, .kk-steps .kk-step { animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important; }
  .kk-card, .kk-card img { transition: none !important; }
}