/* Subtle reading and interaction layer */
.nav,
.tabs-wrap {
  position: sticky;
}

.motion-ready .reveal-target {
  opacity: 0;
  transform: translateY(22px) scale(0.985);
  transition:
    opacity 700ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 700ms cubic-bezier(0.22, 1, 0.36, 1),
    filter 700ms cubic-bezier(0.22, 1, 0.36, 1);
  filter: contrast(0.92);
  will-change: opacity, transform;
}

.motion-ready .reveal-target.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: contrast(1);
}

.motion-ready .sec-copy.reveal-target p,
.motion-ready .sec-copy.reveal-target li {
  color: color-mix(in srgb, var(--text-2) 88%, var(--bg));
}

.motion-ready .sec-copy.reveal-target.is-revealed p,
.motion-ready .sec-copy.reveal-target.is-revealed li {
  color: var(--text-2);
}

.motion-ready .sec-copy .reveal-bullet {
  opacity: 0;
  transform: translateY(10px) scale(0.99);
  transition:
    opacity 500ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 500ms cubic-bezier(0.22, 1, 0.36, 1),
    color 180ms var(--ease);
}

.motion-ready .sec-copy.is-revealed .reveal-bullet {
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: var(--bullet-delay, 0ms), var(--bullet-delay, 0ms), 0ms;
}

.bullets li {
  transition: color 180ms var(--ease), transform 180ms var(--ease);
}

.bullets li::before {
  transition: width 180ms var(--ease), background 180ms var(--ease), opacity 180ms var(--ease);
}

.bullets li strong {
  transition: color 180ms var(--ease);
}

@media (hover: hover) and (pointer: fine) {
  .bullets li:hover {
    color: var(--text-1);
    transform: translateX(3px);
  }

  .bullets li:hover::before {
    width: 20px;
    background: var(--accent);
    opacity: 0.9;
  }

  .bullets li:hover strong {
    color: var(--accent);
  }
}

.tab {
  transition: color 200ms var(--ease);
}

.tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 22px;
  bottom: -0.5px;
  height: 1.5px;
  background: var(--text-1);
  opacity: 0;
  transform: scaleX(0);
  transform-origin: left center;
  transition: opacity 220ms var(--ease), transform 280ms var(--ease);
}

.tab.active::after {
  opacity: 1;
  transform: scaleX(1);
}

.section.active.section-enter {
  animation: tabContentIn 340ms cubic-bezier(0.22, 1, 0.36, 1);
}

.section.active.section-enter .sec-header,
.section.active.section-enter .sec-copy,
.section.active.section-enter .sec-grid > .mock-stack,
.section.active.section-enter .sec-grid > .img-mock,
.section.active.section-enter .sec-grid > .case-iframe,
.section.active.section-enter .sec-nav {
  animation: tabStepIn 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.section.active.section-enter .sec-header {
  animation-delay: 0ms;
}

.section.active.section-enter .sec-copy {
  animation-delay: 70ms;
}

.section.active.section-enter .sec-grid > .mock-stack,
.section.active.section-enter .sec-grid > .img-mock,
.section.active.section-enter .sec-grid > .case-iframe {
  animation-delay: 140ms;
}

.section.active.section-enter .sec-nav {
  animation-delay: 190ms;
}

@keyframes tabContentIn {
  from { opacity: 0.94; }
  to { opacity: 1; }
}

@keyframes tabStepIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.99);
    filter: contrast(0.94);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: contrast(1);
  }
}

.approach-card {
  will-change: transform;
}

.v-header {
  transition: color 180ms var(--ease);
}

.v-inner {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 280ms var(--ease), transform 280ms var(--ease);
}

.v-item.open .v-inner {
  opacity: 1;
  transform: translateY(0);
}

.v-item.open .preview-bg img {
  transform: translateY(-2px) scale(1.04);
}

@media (hover: hover) and (pointer: fine) {
  .v-header:hover .v-name,
  .v-header:hover .v-num {
    color: var(--text-1);
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
  }

  .motion-ready .reveal-target,
  .motion-ready .sec-copy .reveal-bullet,
  .section.active.section-enter .sec-header,
  .section.active.section-enter .sec-copy,
  .section.active.section-enter .sec-grid > .mock-stack,
  .section.active.section-enter .sec-grid > .img-mock,
  .section.active.section-enter .sec-grid > .case-iframe,
  .section.active.section-enter .sec-nav,
  .v-inner {
    opacity: 1;
    transform: none;
    filter: none;
  }
}