@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes enter {
  from { opacity: 0; transform: scale(var(--reveal-scale)); }
  to { opacity: 1; transform: none; }
}

@keyframes settle {
  from { transform: scale(var(--settle-scale)); }
  to { transform: none; }
}

/* Page entrance */
.js .site-header,
.js .hero__text,
.js .hero__text > *,
.js .hero__media { opacity: 0; }

.is-ready .site-header { animation: fade-in var(--duration-base) ease both; }
.is-ready .hero__text { animation: enter var(--duration-slow) var(--ease-out) 0.05s both; }
.is-ready .hero__text > * { animation: fade-in var(--duration-base) ease both; animation-delay: calc(0.25s + var(--i, 0) * 100ms); }
.hero__text > :nth-child(1) { --i: 0; }
.hero__text > :nth-child(2) { --i: 1; }
.hero__text > :nth-child(3) { --i: 2; }
.is-ready .hero__media { animation: enter var(--duration-slow) var(--ease-out) 0.15s both; }
.is-ready .hero__media img { animation: settle 1400ms var(--ease-out) 0.15s both; }

/* Scroll reveal */
.js [data-reveal] {
  opacity: 0;
  transform: scale(var(--reveal-scale));
  transition: opacity var(--duration-base) ease, transform var(--duration-slow) var(--ease-out);
  transition-delay: calc(var(--reveal-index, 0) * 80ms);
}
.js [data-reveal].is-revealed { opacity: 1; transform: none; }
.reveal-fallback [data-reveal] { opacity: 1; transform: none; }

/* Items that appear after a filter change */
.is-entering { animation: enter var(--duration-base) var(--ease-out) calc(var(--enter-index, 0) * 70ms) both; }

/* Photos */
.product-card img, .category-card img, .review-card img, .gallery img { transition: opacity var(--duration-base) ease; }
img.photo-pending { opacity: 0; }

/* Panel content */
.panel.is-open .product > .gallery,
.panel.is-open .product__content > *,
.panel.is-open .product > .product__bar,
.panel.is-open .video {
  animation: fade-in var(--duration-base) ease both;
  animation-delay: calc(var(--panel-open) * 0.4 + var(--i, 0) * 70ms);
}
.product > .gallery { --i: 0; }
.product__content > :nth-child(1) { --i: 1; }
.product__content > :nth-child(2) { --i: 2; }
.product__content > :nth-child(3) { --i: 3; }
.product__content > :nth-child(4) { --i: 4; }
.product__content > :nth-child(n + 5) { --i: 5; }
.product > .product__bar { --i: 4; }

/* Mobile menu */
.site-menu {
  opacity: 0;
  transform: scale(0.96);
  transform-origin: top right;
  pointer-events: none;
  transition: opacity var(--duration-fast) ease, transform var(--duration-fast) var(--ease-out);
}
.site-menu.is-open { opacity: 1; transform: none; pointer-events: auto; }
.site-menu.is-open > * { animation: fade-in var(--duration-base) ease both; animation-delay: calc(60ms + var(--i, 0) * 45ms); }

.menu-icon path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 12px 12px;
  transition: transform var(--duration-base) var(--ease-out);
}
.menu-toggle[aria-expanded="true"] .menu-icon__top { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon__bottom { transform: translateY(-4px) rotate(-45deg); }

/* Touch feedback */
.product-card:active, .category-card:active { transform: scale(0.985); }

@media (prefers-reduced-motion: reduce) {
  .menu-icon path, .segmented__thumb { transition: none; }
  .site-menu { transform: none; }
}

/* Intro */
.intro { display: none; }
.js .intro {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  color: var(--text);
  transition: opacity 500ms ease;
}
.intro.is-leaving { opacity: 0; pointer-events: none; }
.intro-skip .intro { display: none; }

.intro__logo { display: flex; align-items: center; }
.intro__mark {
  width: 64px;
  height: 64px;
  flex: none;
  color: var(--accent);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  opacity: 0;
  transform: scale(0.9);
}
.intro.is-mark .intro__mark {
  stroke-dashoffset: 0;
  opacity: 1;
  transform: none;
  transition: stroke-dashoffset 800ms var(--ease-out), opacity 300ms ease, transform 800ms var(--ease-out);
}
.intro__word {
  display: block;
  max-width: 0;
  overflow: hidden;
  transition: max-width 700ms cubic-bezier(0.65, 0, 0.35, 1);
}
.intro.is-word .intro__word { max-width: var(--word-width); }
.intro__text {
  display: block;
  padding: 4px 4px 4px 16px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-45%);
  transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1), opacity 500ms ease;
}
.intro.is-word .intro__text { opacity: 1; transform: none; }