@keyframes fade-in { from { opacity: 0; } }
@keyframes toast-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes modal-in { from { opacity: 0; transform: translateY(12px); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes pulse-dot { 50% { opacity: 0.35; } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes float-a { 50% { transform: translateY(-14px); } }
@keyframes float-b { 50% { transform: translateY(11px); } }
@keyframes draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes drift { 50% { transform: translate(-3%, 2%) scale(1.06); } }
@keyframes cursor-tap { 0%, 30%, 40%, 58%, 68%, 86%, 96%, 100% { scale: 1; } 34%, 62%, 90% { scale: 0.86; } }
@keyframes boot-out { to { opacity: 0; visibility: hidden; } }
@keyframes boot-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }

.page-enter { animation: page-in 0.5s var(--ease); }

[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }
/* Product images wipe in from a clipped edge. */
[data-wipe] { position: relative; }
[data-wipe]::after { content: ''; position: absolute; inset: 0; z-index: 5; background: var(--bg, #04050a); transform-origin: bottom; transition: transform 1.2s var(--ease); pointer-events: none; }
[data-wipe].in::after { transform: scaleY(0); }

::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.22s; }

/* First-visit boot line, echoing the main site's commit message. */
.boot { position: fixed; inset: 0; z-index: 200; display: grid; place-content: center; justify-items: center; gap: var(--s4); background: var(--void); pointer-events: none; animation: boot-out 0.5s 1s var(--ease) forwards; }
.boot svg { width: 44px; height: 44px; }
.boot p { font-family: var(--mono); font-size: var(--t-sm); color: var(--moon); animation: boot-type 0.7s steps(30) both; }
.boot b { color: var(--amber); font-weight: 400; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
  [data-wipe]::after { display: none; }
  .boot { display: none; }
}
@keyframes cursor-path {
  0%, 8% { transform: translate(18cqi, 58cqi); }
  26%, 36% { transform: translate(52cqi, 22cqi); }
  54%, 64% { transform: translate(84cqi, 40cqi); }
  82%, 92% { transform: translate(66cqi, 78cqi); }
  100% { transform: translate(18cqi, 58cqi); }
}