/* v11: progressive motion and accessible controls. No independent type or spacing scale. */
[data-reveal] { --reveal-delay: 0ms; }
[data-reveal-order="1"] { --reveal-delay: var(--motion-stagger); }
[data-reveal-order="2"] { --reveal-delay: calc(2 * var(--motion-stagger)); }
/* Only JavaScript may arm an offscreen item. Default HTML is always visible. */
.reveal-pending { opacity: 0; transform: translateY(var(--motion-distance)); }
.is-revealing { animation: reveal-enter var(--motion-duration) var(--motion-ease) var(--reveal-delay) both; }
@keyframes reveal-enter {
  from { opacity: 0; transform: translateY(var(--motion-distance)); }
  to { opacity: 1; transform: none; }
}
/* The H1 and hero photograph never fade out or wait for an animation. */
.hero.hero-enter .hero-content { animation: hero-content-enter 580ms var(--motion-ease) both; }
@keyframes hero-content-enter { from { transform: translateY(12px); } to { transform: none; } }
.hero.hero-enter .hero-content h1::after { transform-origin: left; animation: accent-enter 650ms var(--motion-ease) both; }
@keyframes accent-enter { from { transform: scaleX(.35); } to { transform: scaleX(1); } }
.hero.is-motion-active .orbit-ring, .hero.is-motion-active .orbit-dashes { animation-play-state: running; }
.motion-toggle {
  position: absolute; z-index: 6; right: 0; bottom: var(--space-5);
  display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px;
  padding: 8px 14px; color: var(--white); background: rgb(2 12 16 / 82%);
  border: 1px solid rgb(156 197 206 / 35%); border-radius: 999px;
  font: 700 var(--text-small) / 1.4 var(--font-body);
}
.motion-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.motion-toggle .play-symbol { display: none; }
.motion-toggle[aria-pressed="true"] .pause-symbol { display: none; }
.motion-toggle[aria-pressed="true"] .play-symbol { display: block; }
.footer-motion { padding: 4px 0; border: 0; color: var(--muted); background: none; text-align: left; font-size: var(--text-small); min-height: 44px; }
.footer-motion:hover { color: var(--cyan); }
.footer-bottom-inner { flex-wrap: wrap; }
.back-to-top { position: fixed; z-index: 35; right: max(20px,env(safe-area-inset-right)); bottom: max(20px,env(safe-area-inset-bottom)); display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--cyan); border-radius: 50%; color: var(--white); background: var(--ink); box-shadow: 0 4px 16px rgb(0 0 0 / 15%); }
.back-to-top svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.menu-search { display: none; }
.newsletter-note { margin-top: var(--space-3); color: var(--muted); font-size: var(--text-small); }
.footer-newsletter-fields button:disabled { cursor: not-allowed; background: #af5a0d; }
.wish-button[aria-pressed="true"] { color: #b42c40; }
/* Search and truthful status notices, native dialog handles focus confinement. */
.site-dialog { width: min(560px, calc(100% - 2 * var(--gutter))); max-height: calc(100dvh - 2 * var(--space-5)); margin: auto; padding: var(--space-6); border: 1px solid rgb(var(--accent-rgb) / 30%); border-radius: var(--radius-card); color: var(--white); background: var(--ink); box-shadow: 0 24px 64px rgb(0 0 0 / 38%); overscroll-behavior: contain; }
.site-dialog:not([open]) { display: none; }
.site-dialog::backdrop { background: rgb(0 7 10 / 72%); }
.dialog-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); margin-bottom: var(--space-5); }
.dialog-close { width: 44px; height: 44px; flex: 0 0 44px; display: grid; place-items: center; padding: 0; border-radius: 50%; border: 1px solid #526a75; background: none; color: var(--white); }
.dialog-close svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.site-dialog > .button { margin-top: var(--space-5); }
.search-label { display: block; font-size: var(--text-small); margin-bottom: var(--space-2); }
.product-query { display: block; width: 100%; min-height: var(--button-height); border: 1px solid #617b86; border-radius: var(--radius-control); padding: 12px 16px; background: #0c2029; color: var(--white); font: inherit; }
.product-query::placeholder { color: var(--muted); }
.search-summary { margin-block: var(--space-4); color: var(--muted); font-size: var(--text-small); }
.search-results { padding: 0; margin: 0; list-style: none; }
.search-results a { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 64px; padding: var(--space-3) 0; text-decoration: none; border-top: 1px solid #29404a; }
.search-results a:hover { color: var(--cyan); }
.search-results strong { font-size: var(--text-body); }
.search-results small { display: block; color: var(--muted); font-size: var(--text-small); }
.search-results .search-price { flex: 0 0 auto; font-size: var(--text-small); }
/* Mouse-only hover affordances. No continuously animated filters, shadows or parallax. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .featured-boilie-visual img { transition: transform 240ms var(--motion-ease); }
  .featured-boilie-card:hover .featured-boilie-visual img { transform: translateY(-3px) scale(1.025); }
}
@media (max-width: 1099px) {
  .main-nav { max-height: calc(100dvh - var(--header-height) - 24px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 767px) {
  :root { --motion-distance: 14px; --motion-duration: 420ms; --motion-stagger: 40ms; }
  .hero.hero-enter .hero-content h1::after { transform-origin: center; }
  .motion-toggle { bottom: var(--space-4); }
  .site-dialog { padding: var(--card-padding); }
  .footer-motion { flex-basis: 100%; }
}
html.motion-disabled { scroll-behavior: auto; }
html.motion-disabled *, html.motion-disabled *::before, html.motion-disabled *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html.motion-disabled .reveal-pending { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal-pending, .is-revealing { opacity: 1 !important; transform: none !important; animation: none !important; }
  .orbit-ring, .orbit-dashes { animation: none !important; }
}
@media print {
  .reveal-pending, .is-revealing { opacity: 1 !important; transform: none !important; animation: none !important; }
  .site-header { position: static; }
  .motion-toggle, .back-to-top, .footer-motion, .site-dialog { display: none !important; }
}