/* Motion enhances the existing layouts; no content is hidden until JS is ready. */
:root {
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
}
.motion-ready .motion-reveal {
  transition: opacity .7s var(--ease-out) var(--motion-delay, 0ms), transform .85s var(--ease-out) var(--motion-delay, 0ms);
}
.motion-ready .motion-reveal:not(.is-visible):not(:focus-within) {
  opacity: 0;
  transform: translateY(22px);
}
.motion-ready .hero-visual.motion-reveal:not(.is-visible) {
  transform: translateY(16px) scale(.96);
}
.motion-ready .motion-reveal:focus-within,
.motion-ready .reveal:focus-within {
  opacity: 1;
  transform: none;
  transition: none;
}
.motion-ready .motion-reveal:is(:hover, :active) { transition-delay: 0ms; }
.hero-visual .orbit-art { animation-iteration-count: 2; }

/* Small responses show what can be interacted with without moving surrounding text. */
.button, .menu-toggle, .hp-carousel-arrow, .filter-button, .back-top {
  transition: color .2s, background .2s, border-color .2s, box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}
.button > span, .text-link > span, .closing-contact > span, .detail-return > span,
.product-arrow, .hp-arrow, .page-navigation a > span {
  transition: color .2s, background .2s, border-color .2s, transform .35s var(--ease-out);
}
.text-link, .closing-contact, .detail-return {
  transition: color .2s, border-color .2s;
}
.navigation a, .page-navigation a {
  transition: color .2s, background .2s, border-color .2s;
}
.button:focus-visible, .menu-toggle:focus-visible, .hp-carousel-arrow:focus-visible,
.filter-button:focus-visible {
  box-shadow: 0 5px 18px #10233f18;
}
.text-link:focus-visible > span, .detail-return:focus-visible > span,
.closing-contact:focus-visible > span { transform: translate(2px, -2px); }
.button:active, .menu-toggle:active, .hp-carousel-arrow:active:not(:disabled),
.filter-button:active, .back-top:active { transform: translateY(1px) scale(.98); }
.hp-carousel-dot:active span { transform: scale(.85); }
.hp-carousel-dot span {
  transition: width .35s var(--ease-out), background .2s, transform .2s;
}
.product-card-link { transition: box-shadow .35s var(--ease-out), transform .35s var(--ease-out); }
.product-card-link:focus-visible { box-shadow: 0 12px 35px #18374f18; }

/* The carousel owns scrolling and slide selection. Motion only follows its state. */
.hp-slide { transition: transform .55s var(--ease-out), opacity .3s; }
.hp-slide-body, .bc-card-heading, .bc-description {
  transition: translate .55s var(--ease-out);
}
.hp-paper-logo {
  transition: scale .7s var(--ease-out);
}
.hp-window, .hp-dialogue, .hp-deck {
  transition: translate .7s var(--ease-out);
}
.hp-carousel.is-ready .hp-slide:not(.is-current):not(:focus-within) .bc-card-heading,
.hp-carousel.is-ready .hp-slide:not(.is-current):not(:focus-within) .hp-slide-body,
.hp-carousel.is-ready .hp-slide:not(.is-current):not(:focus-within) .bc-description {
  translate: 0 5px;
}
.hp-carousel.is-ready .hp-slide:not(.is-current):not(:focus-within) .hp-paper-logo {
  scale: .97;
}
.hp-carousel.is-ready .hp-slide:not(.is-current):not(:focus-within) :is(.hp-window, .hp-dialogue, .hp-deck) {
  translate: 0 5px;
}
.hp-slide:focus-within :is(.hp-slide-body, .bc-card-heading, .bc-description, .hp-paper-logo, .hp-window, .hp-dialogue, .hp-deck) {
  transition: none;
}
.hp-carousel-track.is-dragging :is(.hp-slide, .hp-slide-body, .bc-card-heading, .bc-description, .hp-paper-logo, .hp-window, .hp-dialogue, .hp-deck) {
  transition: none;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover { box-shadow: 0 8px 22px #10233f1b; }
  .button:hover > span, .text-link:hover > span, .closing-contact:hover > span,
  .detail-return:hover > span, .page-navigation a:hover > span { transform: translate(3px, -3px); }
  .menu-toggle:hover, .hp-carousel-arrow:hover:not(:disabled) { transform: translateY(-2px); }
  .product-card-link:hover { transform: translateY(-3px); }
  .product-card-link:hover .product-arrow, .hp-slide-link:hover .hp-arrow { transform: rotate(8deg); }
  .hp-slide.is-current .hp-slide-link:hover .hp-paper-logo { scale: 1.025; }
  .button:active, .menu-toggle:active, .hp-carousel-arrow:active:not(:disabled) { transform: translateY(1px) scale(.98); }
}

@media (max-width: 760px) and (prefers-reduced-motion: no-preference) {
  .navigation.is-open { animation: menu-panel-in .28s var(--ease-out) both; }
  .navigation.is-open > a { animation: menu-link-in .36s var(--ease-out) calc(var(--menu-order, 0) * 35ms) both; }
  .navigation.is-open:focus-within,
  .navigation.is-open > a:focus-visible { animation: none; }
  .navigation.is-closing {
    display: flex;
    pointer-events: none;
    animation: menu-panel-out .2s var(--ease-in-out) both;
  }
}
@keyframes menu-panel-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes menu-panel-out {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-8px); }
}
@keyframes menu-link-in {
  from { opacity: 0; transform: translateY(-5px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Pause the existing decorative animation when the document is not visible. */
.is-page-hidden *, .is-page-hidden *::before, .is-page-hidden *::after {
  animation-play-state: paused !important;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready .motion-reveal:not(.is-visible), .motion-ready .reveal:not(.is-visible) {
    opacity: 1;
    transform: none;
  }
  .hp-carousel.is-ready .hp-slide :is(.hp-slide-body, .bc-card-heading, .bc-description, .hp-window, .hp-dialogue, .hp-deck) { translate: none; }
  .hp-carousel.is-ready .hp-slide :is(.hp-paper-logo) { scale: none; }
}