/* Motion is progressive: content stays visible until motion.js opts it in. */
.intro-loader {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  place-items: center;
  background: #f7f8fb;
  color: #101725;
}
:root[data-intro=show] .intro-loader,
:root[data-intro=leaving] .intro-loader { display: grid; }
.intro-mark { display: flex; flex-direction: column; align-items: center; gap: 17px; }
.intro-mark img { display: block; width: clamp(155px, 25vw, 200px); height: auto; }
.intro-mark span { font: 800 11px var(--font); letter-spacing: .23em; }
.intro-mark i { display: block; width: 72px; height: 3px; background: var(--blue); transform-origin: left; }

@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .intro-mark img { animation: rcx-intro-logo 850ms cubic-bezier(.16,1,.3,1) both; }
  .intro-mark span { animation: rcx-intro-label 550ms ease 260ms both; }
  .intro-mark i { animation: rcx-intro-progress 950ms ease-out 140ms both; }
  :root[data-intro=leaving] .intro-loader { transform: translateY(-100%); transition: transform 450ms cubic-bezier(.76,0,.24,1); }

  @keyframes rcx-intro-logo {
    from { opacity: 0; transform: translateX(-34px) scale(.82) skewX(-9deg); }
    70% { opacity: 1; transform: translateX(4px) scale(1.04) skewX(1deg); }
    to { opacity: 1; transform: translateX(0) scale(1) skewX(0); }
  }
  @keyframes rcx-intro-label {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
  }
  @keyframes rcx-intro-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
  }

  ::view-transition-old(root) {
    animation: rcx-page-out 180ms ease-in both;
  }

  ::view-transition-new(root) {
    animation: rcx-page-in 350ms cubic-bezier(.2,.8,.2,1) both;
  }

  @keyframes rcx-page-out {
    to { opacity: .5; transform: translateY(-8px); }
  }

  @keyframes rcx-page-in {
    from { opacity: .55; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .hero-content.slide-enter { animation: none; }
  .hero-content.slide-enter > .eyebrow,
  .hero-content.slide-enter > h1,
  .hero-content.slide-enter > p,
  .hero-content.slide-enter > .hero-buttons,
  .hero-content.slide-enter > .hero-micro {
    animation: rcx-hero-enter 620ms cubic-bezier(.2,.8,.2,1) both;
  }
  .hero-content.slide-enter > .eyebrow { animation-delay: 40ms; }
  .hero-content.slide-enter > h1 { animation-delay: 90ms; }
  .hero-content.slide-enter > p { animation-delay: 160ms; }
  .hero-content.slide-enter > .hero-buttons { animation-delay: 230ms; }
  .hero-content.slide-enter > .hero-micro { animation-delay: 300ms; }

  @keyframes rcx-hero-enter {
    from { opacity: .25; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .micro-track { position: relative; overflow: hidden; }
  .micro-track::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform: scaleX(0);
    transform-origin: left;
  }
  .hero.is-playing .micro-track::after {
    animation: rcx-slide-progress 5600ms linear forwards;
  }
  @keyframes rcx-slide-progress { to { transform: scaleX(1); } }

  .motion-reveal {
    opacity: 0;
    transform: translate3d(0, 28px, 0);
    transition: opacity 700ms cubic-bezier(.2,.8,.2,1),
                transform 700ms cubic-bezier(.2,.8,.2,1);
    transition-delay: var(--reveal-delay, 0ms);
  }
  .motion-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }

  .button .icon,
  .text-link .icon,
  .category-link .icon { transition: transform 250ms cubic-bezier(.2,.8,.2,1); }
  .button:hover .icon,
  .button:focus-visible .icon,
  .text-link:hover .icon,
  .text-link:focus-visible .icon,
  .category-card:hover .category-link .icon,
  .category-card:focus-visible .category-link .icon { transform: translateX(5px); }

  .product-card { transition: transform 250ms cubic-bezier(.2,.8,.2,1); }
  .product-card:not(.motion-reveal):hover,
  .product-card.is-visible:hover { transform: translateY(-6px); }

  .search-results:not([hidden]) { animation: rcx-panel-in 240ms cubic-bezier(.2,.8,.2,1) both; }
  @keyframes rcx-panel-in {
    from { opacity: 0; transform: translateY(-9px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: .01ms !important; }
  .hero-content.slide-enter,
  .hero-content.slide-enter > * { animation: none !important; }
}