/* Motion is opt-in via JavaScript; the static page stays visible without it. */
:root {
  --motion-ease: cubic-bezier(.2, .7, .25, 1);
}

.motion-on .motion-reveal {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 460ms var(--motion-ease),
              translate 460ms var(--motion-ease);
  transition-delay: var(--reveal-delay, 0ms);
}

.motion-on .motion-reveal.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* Keyboard navigation must never land on an invisible control. */
.motion-on .motion-reveal:focus-within {
  opacity: 1;
  translate: 0 0;
  transition: none;
}

.motion-on .hero-art,
.motion-on .history-archive,
.motion-on .cta-player {
  translate: var(--motion-x, 0px) var(--motion-y, 0px);
}

.intro-pending .hero-title-lead,
.intro-pending .hero-title-speed,
.intro-pending .hero-art,
.intro-pending .hero-specs > div {
  opacity: 0;
}

.hero-title-lead {
  display: inline-block;
  font-weight: inherit;
}

.hero-title-speed {
  position: relative;
  display: inline-block;
  text-shadow: 0 1px 1px #0003;
  box-shadow: none;
}

.intro-playing .hero-title-lead {
  animation: title-arrive 480ms var(--motion-ease) backwards;
}

.intro-playing .hero-title-speed {
  animation: title-speed-arrive 780ms var(--motion-ease) 220ms backwards;
}

/* A text-clipped ice reflection preserves the red lettering underneath. */
.hero-title-speed::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: transparent;
  text-shadow: none;
  box-shadow: none;
  filter: none;
  background: linear-gradient(105deg, transparent 44%, #b9efff99 47%,
              #fff 49%, #d5f7ff 50%, transparent 53%) 100% 0 / 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  opacity: 0;
}

.hero-title-speed.ice-playing::after {
  animation: title-ice-glint 950ms ease-out var(--ice-glint-delay, 0ms) backwards;
}

.hero-ice-chip {
  position: absolute;
  left: var(--chip-left);
  top: var(--chip-top);
  width: 4px;
  height: 7px;
  background: #dcf7ff;
  clip-path: polygon(25% 0, 100% 32%, 65% 100%, 0 68%);
  pointer-events: none;
  opacity: 0;
}

.ice-playing .hero-ice-chip {
  animation: title-ice-chip 700ms ease-out var(--ice-chip-delay, 180ms) backwards;
}

.intro-playing .hero-art {
  animation: stick-arrive 850ms var(--motion-ease) backwards;
}

.intro-playing .hero-specs > div {
  animation: detail-arrive 360ms var(--motion-ease) var(--intro-delay, 240ms) backwards;
}

@keyframes title-arrive {
  from { opacity: 0; translate: 0 18px; filter: blur(3px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}

@keyframes title-speed-arrive {
  0% { opacity: 0; translate: 0 16px; filter: blur(2px); }
  55%, 100% { opacity: 1; translate: 0 0; filter: blur(0); }
}

@keyframes title-ice-glint {
  0% { opacity: 0; background-position: 100% 0; }
  15%, 70% { opacity: .8; }
  100% { opacity: 0; background-position: 0% 0; }
}

@keyframes title-ice-chip {
  0% { opacity: 0; transform: translate(0, 0) rotate(0); }
  15% { opacity: .85; }
  100% { opacity: 0; transform: translate(var(--chip-x), var(--chip-y)) rotate(var(--chip-turn)); }
}

/* Individual translate leaves the existing mobile transform and masks intact. */
@keyframes stick-arrive {
  from {
    opacity: 0;
    translate: calc(var(--motion-x, 0px) + 48px) calc(var(--motion-y, 0px) - 30px);
  }
  to {
    opacity: var(--art-opacity, 1);
    translate: var(--motion-x, 0px) var(--motion-y, 0px);
  }
}

@keyframes detail-arrive {
  from { opacity: 0; translate: 0 8px; }
  to { opacity: 1; translate: 0 0; }
}

/* Keep each control's hit area fixed, including on the lower hover edge. */
.btn,
.icon-button,
.text-link,
.navbar-toggler,
.site-footer nav button,
.site-footer nav a,
.socials button,
.cart-remove {
  transition: background-color 180ms ease, color 180ms ease,
              border-color 180ms ease, box-shadow 180ms ease;
}

.btn-close {
  transition: opacity 180ms ease, color 180ms ease,
              background-color 180ms ease, border-color 180ms ease,
              box-shadow 180ms ease;
}

.btn svg,
.icon-button svg,
.text-link svg,
.socials svg,
.navbar-toggler-icon {
  pointer-events: none;
}

/* Decorative layers cannot take pointer events away from a control. */
button::before,
button::after,
.btn::before,
.btn::after,
.technology-card::after,
.product-card::after {
  pointer-events: none;
}

.btn svg,
.text-link svg {
  transition: transform 180ms var(--motion-ease);
}

.technology-card {
  transition: transform 200ms var(--motion-ease),
              border-color 200ms ease, box-shadow 200ms ease;
}

/* Its buttons must stay stationary while the parent card is hovered. */
.product-card {
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .btn:hover svg:has(use[href="#i-arrow"]),
  .text-link:hover svg:has(use[href="#i-arrow"]) {
    transform: translateX(3px);
  }

  .technology-card:hover { transform: translateY(-3px); }

  .technology-card:hover,
  .product-card:hover {
    border-color: #808b94;
    box-shadow: 0 7px 18px #0004;
  }
}

@media (max-width: 767.98px) {
  .hero-ice-chip:nth-of-type(n + 4) { display: none; }
  .hero-ice-chip { width: 3px; height: 5px; }
  .hero-art { --art-opacity: .95; }
  .motion-on .motion-reveal { translate: 0 10px; }
  .motion-on .motion-reveal.is-visible,
  .motion-on .motion-reveal:focus-within { translate: 0 0; }
}

@media (prefers-reduced-motion: reduce) {
  .motion-reveal,
  .hero-art,
  .history-archive,
  .cta-player,
  .hero::before,
  .hero h1,
  .hero-title-lead,
  .hero-title-speed,
  .hero-specs > div {
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }

  .motion-on .motion-reveal,
  .intro-pending .hero-title-lead,
  .intro-pending .hero-title-speed,
  .intro-pending .hero-specs > div { opacity: 1; }
  .intro-pending .hero-art { opacity: var(--art-opacity, 1); }
  .hero-title-speed::after,
  .hero-ice-chip { display: none; animation: none !important; }
}

@media print {
  .motion-on .motion-reveal { opacity: 1; translate: none; }
  .intro-pending .hero-title-lead,
  .intro-pending .hero-title-speed,
  .intro-pending .hero-specs > div { opacity: 1; }
  .intro-pending .hero-art { opacity: var(--art-opacity, 1); }
  .hero-title-speed::after,
  .hero-ice-chip { display: none; }
  .intro-playing .hero-title-lead,
  .intro-playing .hero-title-speed,
  .intro-playing .hero-art,
  .intro-playing .hero-specs > div { animation: none; }
}