/* "Why Konstent" — an editorial card-stack section: a huge watermark
   headline behind a stack of cards whose artwork/title/description arrive
   one by one as the visitor scrolls. Dark is this site's default theme (see
   tokens.css) so that's the base palette below; light is opt-in, following
   the exact same selector pattern tokens.css and process-story.css use for
   the rest of the site.

   Structure mirrors the same progressive-enhancement pattern used by
   hero-story/process-story: the base (non-enhanced) rules below render a
   plain, fully-readable stacked list of four cards — correct for no-JS and
   as the very first paint before JS opts in. `.is-enhanced` (added
   unconditionally by why-konstent.js, on every viewport) switches this into
   the scroll-pinned crossfading experience. */

.why-konstent {
  position: relative;
  background: var(--wk-bg);
}

.why-konstent {
  --wk-bg: #0a0f16;
  --wk-headline: #f4f7fb;
  --wk-card-bg: #131a24;
  --wk-card-border: rgba(255, 255, 255, 0.09);
  --wk-title: #f4f7fb;
  --wk-body: #a9b4c4;
  --wk-blue: #3182ce;
  --wk-cyan: #63b3ed;
  --wk-dot: rgba(99, 179, 237, 0.22);
  --wk-art-bg-a: rgba(49, 130, 206, 0.16);
  --wk-art-bg-b: rgba(66, 153, 225, 0.05);
  --wk-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6), 0 10px 26px -12px rgba(0, 0, 0, 0.45);
}

@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) .why-konstent {
    --wk-bg: #eef0f4;
    --wk-headline: #0a0f1a;
    --wk-card-bg: #fdfdfe;
    --wk-card-border: rgba(10, 15, 26, 0.08);
    --wk-title: #10161f;
    --wk-body: #4b5568;
    --wk-cyan: #4299e1;
    --wk-dot: rgba(49, 130, 206, 0.16);
    --wk-art-bg-a: rgba(49, 130, 206, 0.07);
    --wk-art-bg-b: rgba(66, 153, 225, 0.03);
    --wk-shadow: 0 30px 70px -20px rgba(23, 58, 94, 0.28), 0 10px 26px -12px rgba(23, 58, 94, 0.18);
  }
}

:root[data-theme='light'] .why-konstent {
  --wk-bg: #eef0f4;
  --wk-headline: #0a0f1a;
  --wk-card-bg: #fdfdfe;
  --wk-card-border: rgba(10, 15, 26, 0.08);
  --wk-title: #10161f;
  --wk-body: #4b5568;
  --wk-cyan: #4299e1;
  --wk-dot: rgba(49, 130, 206, 0.16);
  --wk-art-bg-a: rgba(49, 130, 206, 0.07);
  --wk-art-bg-b: rgba(66, 153, 225, 0.03);
  --wk-shadow: 0 30px 70px -20px rgba(23, 58, 94, 0.28), 0 10px 26px -12px rgba(23, 58, 94, 0.18);
}

/* Hidden until .is-enhanced (see the display:flex override further down) —
   this watermark sits behind the pinned card stack, so it only makes sense
   once that pinned layout is actually active; in the plain base/no-JS
   stacked list it would just be distracting, oversized noise above the
   cards. */
.why-konstent__headline {
  display: none;
  position: absolute;
  inset: 0;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.1em;
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  color: var(--wk-headline);
  line-height: 0.98;
  letter-spacing: -0.02em;
  font-size: clamp(2.75rem, 3.4rem + 4vw, 7.5rem);
  padding-inline: var(--space-lg);
  z-index: 0;
  pointer-events: none;
}

.why-konstent__stage {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100%;
  padding-block: var(--space-2xl);
}

.why-konstent__panel {
  position: relative;
  width: min(100%, 30rem);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  background: var(--wk-card-bg);
  border: 1px solid var(--wk-card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--wk-shadow);
  padding: var(--space-lg);
  overflow: hidden;
}

.wk-art {
  position: relative;
  aspect-ratio: 8 / 5;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: linear-gradient(160deg, var(--wk-art-bg-a), var(--wk-art-bg-b));
  margin-bottom: var(--space-md);
}

.wk-art__svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.why-konstent__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-xl);
  color: var(--wk-title);
  margin-bottom: var(--space-2xs);
}

.why-konstent__body {
  font-size: var(--fs-base);
  color: var(--wk-body);
  max-width: 34ch;
}

.why-konstent__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wk-blue);
  margin-bottom: var(--space-sm);
}

.why-konstent__eyebrow::before {
  content: '';
  width: 1.25rem;
  height: 2px;
  background: var(--wk-blue);
}

/* --- Base (non-enhanced): normal vertical stack, every panel visible,
   nothing pinned or overlapped — the no-JS / small-viewport / initial-paint
   state. --- */
.why-konstent__list {
  display: grid;
  gap: var(--space-lg);
  padding-block: var(--space-2xl);
}

/* --- Enhanced: scroll-pinned crossfade, on every viewport (why-konstent.js
   adds .is-enhanced unconditionally). --- */
.why-konstent.is-enhanced {
  display: grid;
}

.why-konstent.is-enhanced .why-konstent__headline {
  display: flex;
}

.why-konstent.is-enhanced .why-konstent__sticky,
.why-konstent.is-enhanced .why-konstent__track {
  grid-area: 1 / 1;
}

.why-konstent.is-enhanced .why-konstent__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.why-konstent.is-enhanced .why-konstent__track {
  height: calc(var(--hero-phase-height, 100vh) * 4);
  display: flex;
  flex-direction: column;
  pointer-events: none;
}

.why-konstent.is-enhanced .why-konstent__marker {
  flex: 1 0 var(--hero-phase-height, 100vh);
}

/* Cards overlap in the same grid cell — why-konstent.js then positions each
   one with its own translateY/scale/opacity/z-index/filter based on how far
   "behind" the current front card it sits, building a real physical stack
   (each completed card stays visible behind the new one, offset and
   slightly dimmed) rather than crossfading one card's content in place. */
.why-konstent.is-enhanced .why-konstent__list {
  display: grid;
  padding-block: 0;
}

.why-konstent.is-enhanced .why-konstent__panel {
  grid-area: 1 / 1;
  pointer-events: none;
  will-change: opacity, transform;
}

.why-konstent.is-enhanced .why-konstent__panel.is-active {
  pointer-events: auto;
}

/* --- Per-artwork idle motion: only the active panel's art animates, and
   only outside prefers-reduced-motion. --- */
@keyframes wk-flow-dash {
  to {
    stroke-dashoffset: -20;
  }
}

@keyframes wk-pulse-dot {
  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.3);
    opacity: 0.7;
  }
}

@keyframes wk-orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes wk-ring-ping {
  0% {
    transform: scale(0.85);
    opacity: 0.55;
  }

  75%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

.why-konstent__panel.is-active .wk-art__path {
  stroke-dasharray: 6 6;
  animation: wk-flow-dash 2.6s linear infinite;
}

.why-konstent__panel.is-active .wk-art__dot,
.why-konstent__panel.is-active .wk-art__core {
  transform-box: fill-box;
  transform-origin: center;
  animation: wk-pulse-dot 2.4s ease-in-out infinite;
}

.why-konstent__panel.is-active .wk-art__orbit {
  transform-box: view-box;
  animation: wk-orbit 9s linear infinite;
}

.why-konstent__panel.is-active .wk-art__core-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: wk-ring-ping 2.8s ease-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .why-konstent__panel.is-active .wk-art__path,
  .why-konstent__panel.is-active .wk-art__dot,
  .why-konstent__panel.is-active .wk-art__core,
  .why-konstent__panel.is-active .wk-art__orbit,
  .why-konstent__panel.is-active .wk-art__core-ring {
    animation: none;
  }
}