/* COVERF storefront — motion. Everything here is progressive enhancement. */
@view-transition { navigation: auto; }

::view-transition-old(root) { animation: 0.25s ease both fade-out; }
::view-transition-new(root) { animation: 0.4s var(--ease) both fade-in; }
@keyframes fade-out { to { opacity: 0; } }
@keyframes fade-in { from { opacity: 0; } }

.site-header { view-transition-name: site-header; }

@supports (animation-timeline: view()) {
  [data-reveal] {
    animation: reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 35%;
  }
  @keyframes reveal { from { opacity: 0; transform: translateY(2rem); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  [data-reveal] { animation: none; }
  .marquee-track { animation: none; }
  .motion-words .motion-word > span,
  .motion-card,
  .motion-photo,
  .scroll-cue,
  .hero-slide.is-active,
  .btn.is-added[data-add-cart] { animation: none !important; transition: none !important; transform: none !important; opacity: 1 !important; filter: none !important; clip-path: none !important; }
}

.motion-words .motion-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
}
.motion-words .motion-word > span {
  display: inline-block;
  transform: translateY(110%) rotate(4deg) scaleY(0.78);
  opacity: 0;
}
.motion-words.is-in .motion-word > span {
  transform: none;
  opacity: 1;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.45s ease, color 0.55s ease;
  transition-delay: calc(var(--i, 0) * 75ms);
}
.motion-words.is-ink .motion-word > span { color: var(--accent); }
.motion-words.is-ink.is-in .motion-word > span { color: inherit; }

.motion-card {
  animation: card-in 0.55s var(--ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes card-in {
  from { opacity: 0; transform: translateY(12%); }
  to { opacity: 1; transform: none; }
}

.motion-photo {
  animation: photo-in 0.9s var(--ease) both;
}
@keyframes photo-in {
  from { transform: scale(1.08); opacity: 0; filter: blur(6px); }
  to { transform: none; opacity: 1; filter: none; }
}

.hero-slide.is-active { animation: photo-settle 1.15s var(--ease) both; }
@keyframes photo-settle { from { transform: scale(1.12); } to { transform: none; } }
.hero-slides { touch-action: pan-y; }
.hero-meter { height: 2px; background: var(--line-strong); }
.hero-meter span { display: block; height: 100%; width: 0; background: var(--ink); animation: hero-meter 4.5s linear; }
@keyframes hero-meter { to { width: 100%; } }

.scroll-cue {
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid var(--ink);
  position: relative;
  animation: cue-bob 1.5s ease-in-out infinite alternate-reverse;
}
.scroll-cue span,
.scroll-cue span::before,
.scroll-cue span::after {
  position: absolute;
  left: 50%;
  width: 1.5px;
  background: var(--ink);
  border-radius: 2px;
}
.scroll-cue span { top: 22%; height: 46%; margin-left: -0.75px; }
.scroll-cue span::before,
.scroll-cue span::after { content: ""; bottom: 0; height: 55%; transform-origin: 50% 100%; }
.scroll-cue span::before { transform: rotate(50deg); }
.scroll-cue span::after { transform: rotate(-50deg); }
.scroll-cue:hover { animation-play-state: paused; background: var(--ink); }
.scroll-cue:hover span,
.scroll-cue:hover span::before,
.scroll-cue:hover span::after { background: var(--accent); }
@keyframes cue-bob { to { transform: translateY(18%); } }

.btn.is-added[data-add-cart] { animation: label-drop 0.55s cubic-bezier(0.2, 1.3, 0.3, 1) both; }
@keyframes label-drop { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }