.js-anim [data-reveal]:not(.is-inview) {
  opacity: 0;
  transform: translateY(36px);
}

.js-anim [data-reveal] {
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-anim [data-reveal].is-inview {
  opacity: 1;
  transform: none;
}

.js-anim .p3d-card,
.js-anim .why-card,
.js-anim .app-row,
.js-anim .quote-card,
.js-anim .stat,
.js-anim .swatch {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-anim .p3d-card.is-inview,
.js-anim .why-card.is-inview,
.js-anim .app-row.is-inview,
.js-anim .quote-card.is-inview,
.js-anim .stat.is-inview,
.js-anim .swatch.is-inview {
  opacity: 1;
  transform: none;
}

.js-anim .p3d-card.is-inview:nth-child(2) { transition-delay: 0.08s; }
.js-anim .p3d-card.is-inview:nth-child(3) { transition-delay: 0.16s; }
.js-anim .p3d-card.is-inview:nth-child(4) { transition-delay: 0.24s; }
.js-anim .why-card.is-inview:nth-child(2) { transition-delay: 0.1s; }
.js-anim .why-card.is-inview:nth-child(3) { transition-delay: 0.16s; }
.js-anim .why-card.is-inview:nth-child(4) { transition-delay: 0.22s; }

.hero__line-wrap {
  display: block;
  overflow: hidden;
}

.js-anim .hero__line {
  display: block;
  animation: p3dLineIn 1.15s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.js-anim .hero__line--accent {
  animation-delay: 0.14s;
}

@keyframes p3dLineIn {
  from { transform: translate3d(0, 115%, 0); }
  to { transform: translate3d(0, 0, 0); }
}

.js-anim .hero-spool {
  animation: p3dFadeUp 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.28s both;
}

.js-anim .hero__eyebrow {
  animation: p3dFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

.js-anim .hero__text {
  animation: p3dFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.45s both;
}

.js-anim .hero__actions {
  animation: p3dFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.58s both;
}

.js-anim .hero__frame {
  animation: p3dImageIn 1.35s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.js-anim .hero__float-chip {
  animation: p3dFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.9s both;
}

.js-anim .scroll-indicator {
  animation: p3dFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1s both;
}

@keyframes p3dFadeUp {
  from { opacity: 0; transform: translate3d(0, 24px, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes p3dImageIn {
  from {
    clip-path: inset(18% 18% 18% 18%);
    transform: scale(1.1);
  }
  to {
    clip-path: inset(0);
    transform: scale(1);
  }
}

.intro-curtain {
  position: fixed;
  inset: 0;
  z-index: 400;
  pointer-events: none;
  overflow: hidden;
}

.intro-curtain__panel {
  height: 100%;
  background: #080808;
  transform-origin: top;
  animation: p3dCurtain 0.95s cubic-bezier(0.76, 0, 0.24, 1) 0.15s forwards;
}

@keyframes p3dCurtain {
  to { transform: translate3d(0, -101%, 0); }
}

.magnetic {
  will-change: transform;
}

@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

[data-float] {
  animation: floatY 6s ease-in-out infinite;
}

.hero__orb--b { animation-delay: -2s; }
.hero__orb--c { animation-delay: -4s; }

.scroll-indicator i {
  transform-origin: top;
  animation: scrollPulse 1.8s var(--p3d-ease) infinite;
}

@keyframes scrollPulse {
  0% { transform: scaleY(0.35); opacity: 0.3; }
  50% { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(0.35); opacity: 0.3; }
}

.p3d-card__cart {
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}

.p3d-card__cart:hover {
  background: var(--p3d-white);
  color: var(--p3d-black);
  border-color: var(--p3d-white);
}

.why-card__n {
  transition: -webkit-text-stroke-color 0.35s, color 0.35s;
}

.why-card:hover .why-card__n {
  color: rgba(255, 255, 255, 0.08);
  -webkit-text-stroke-color: var(--p3d-white);
}

.mobile-nav.is-open .mobile-nav__list li,
.mobile-nav.is-open .btn {
  animation: p3dLineIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;
}

.mobile-nav.is-open .mobile-nav__list li:nth-child(1) { animation-delay: 0.05s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(2) { animation-delay: 0.1s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(3) { animation-delay: 0.15s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(4) { animation-delay: 0.2s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(5) { animation-delay: 0.25s; }
.mobile-nav.is-open .mobile-nav__list li:nth-child(6) { animation-delay: 0.3s; }
.mobile-nav.is-open .btn { animation-delay: 0.38s; }

.js-anim .app-row__media img {
  transform: scale(1.08);
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.js-anim .app-row.is-inview .app-row__media img {
  transform: scale(1);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .js-anim [data-reveal],
  .js-anim .p3d-card,
  .js-anim .why-card,
  .js-anim .app-row,
  .js-anim .quote-card,
  .js-anim .stat,
  .js-anim .swatch,
  .js-anim .hero__line,
  .js-anim .hero__frame,
  .js-anim .hero-spool {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .intro-curtain { display: none; }
  [data-float] { animation: none; }
  .hero-spool__spin,
  .color-lab .spool__svg {
    animation: none !important;
  }
}