/* Small motions use independent properties so they don't overwrite 3D tilt. */
:root { --micro-ease: cubic-bezier(.2,.9,.25,1); }
button, .btn, .links a, input, .select-option, summary, .app-icon, .duration, .product-logo, .step, .faq details {
  transition: transform .12s var(--micro-ease), translate .12s var(--micro-ease), scale .12s var(--micro-ease), rotate .12s var(--micro-ease), box-shadow .12s var(--micro-ease), background-color .12s var(--micro-ease), border-color .12s var(--micro-ease), color .12s var(--micro-ease);
}
button:not(:disabled):hover, .btn:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
button:not(:disabled):active, .btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--ink); }
button, .btn, .app-icon, .avatar-photo { transition-timing-function: var(--micro-ease), var(--micro-ease), var(--micro-ease), var(--micro-ease), steps(1, end), steps(1, end), steps(1, end), steps(1, end); }
.brand { animation: nav-enter .55s .05s both; }
.links { animation: nav-enter .55s .12s both; }
.actions { animation: nav-enter .55s .2s both; }
.brand .star { display: inline-block; transition: rotate .12s var(--micro-ease), scale .12s var(--micro-ease); }
.brand:hover .star, .brand:focus-visible .star { rotate: 90deg; scale: 1.12; }
.brand { gap: 14px; }
.brand-wordmark { min-width: 0; }
.brand-avatar {
  position: relative; display: block; flex: 0 0 50px; width: 50px; height: 50px;
  rotate: -6deg; animation: avatar-sticker 7s steps(2, end) infinite;
  transition: rotate .12s var(--micro-ease), scale .12s var(--micro-ease);
}
.avatar-photo {
  display: block; width: 100%; height: 100%; border: var(--line); border-radius: 12px;
  box-shadow: 3px 3px 0 var(--ink); overflow: hidden; background: var(--sky-soft);
  isolation: isolate; position: relative; transition: box-shadow .12s var(--micro-ease);
}
.avatar-photo img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.avatar-spark {
  position: absolute; top: -9px; right: -9px; font-size: 20px; line-height: 1;
  color: #ffe56b; -webkit-text-stroke: 1px var(--ink); pointer-events: none;
  transition: rotate .12s var(--micro-ease), scale .12s var(--micro-ease);
}
.brand:is(:hover, :focus-visible) .brand-avatar { rotate: 3deg; scale: 1.06; }
.brand:is(:hover, :focus-visible) .avatar-photo { box-shadow: 5px 5px 0 var(--ink); }
.brand:is(:hover, :focus-visible) .avatar-spark { rotate: 90deg; scale: 1.2; }
.brand:active .brand-avatar { translate: 3px 3px; scale: 1; }
.brand:active .avatar-photo { box-shadow: 0 0 0 var(--ink); }
.footer-brand { display: flex; align-items: center; gap: 12px; }
.footer-brand img {
  display: block; flex: 0 0 36px; object-fit: cover; border: 2px solid var(--ink);
  border-radius: 9px; box-shadow: 2px 2px 0 var(--ink); rotate: -5deg;
  transition: rotate .12s var(--micro-ease), scale .12s var(--micro-ease);
}
.footer-brand:hover img { rotate: 5deg; scale: 1.08; }
.page-away .brand-avatar, .page-away .avatar-photo img { animation-play-state: paused; }
@keyframes avatar-sticker { 0%, 88%, 100% { transform: translate(0,0) rotate(0); } 92% { transform: translate(-1px,-2px) rotate(-3deg); } 96% { transform: translate(1px,0) rotate(2deg); } }
@media (max-width: 700px) {
  .brand { gap: 10px; }
  .brand-avatar { flex-basis: 42px; width: 42px; height: 42px; }
  .avatar-spark { font-size: 17px; top: -6px; right: -6px; }
}
@media (max-width: 420px) {
  .brand { gap: 9px; }
  .brand-avatar { flex-basis: 38px; width: 38px; height: 38px; }
  .avatar-photo { border-radius: 9px; }
}
@media (max-width: 360px) {
  .brand { font-size: 16px; gap: 7px; }
  .brand-avatar { flex-basis: 32px; width: 32px; height: 32px; }
  .actions { gap: 4px; }
  .actions .icon-btn { padding: 6px 7px; }
}
.links a { position: relative; }
.links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 3px;
  background: var(--ink); scale: 0 1; transform-origin: left; transition: scale .12s var(--micro-ease);
}
.links a:hover::after, .links a:focus-visible::after { scale: 1 1; }
.links a[aria-current="page"]::after { display: none; }
.btn > span { display: inline-block; transition: translate .12s var(--micro-ease); }
.btn:hover > span, .btn:focus-visible > span { translate: 4px 0; }
.search-wrap { transition: translate .12s var(--micro-ease); }
.search-wrap:focus-within { translate: 0 -2px; }
#search:focus { border-color: var(--primary); box-shadow: 4px 4px 0 var(--ink); }
.search-wrap > span { display: inline-block; transition: rotate .12s var(--micro-ease), scale .12s var(--micro-ease); }
.search-wrap:focus-within > span { rotate: -15deg; scale: 1.2; }
.filters button[aria-pressed="true"] { animation: filter-tap .18s steps(2, end); }
.select-trigger::after { display: inline-block; transition: rotate .12s var(--micro-ease); }
.select-trigger[aria-expanded="true"]::after { rotate: 180deg; }
.select-option:hover, .select-option:focus-visible { translate: 2px 0; }
.duration { transform-origin: left center; }
.product-art::before, .product-art::after { transition: rotate .12s var(--micro-ease), scale .12s var(--micro-ease); }
.product-art {
  contain: layout paint style;
  background-image: radial-gradient(circle, rgba(23, 33, 58, 0.22) 1.25px, transparent 1.25px);
  background-size: 16px 16px;
}
.cover-tag, .cover-category {
  position: absolute; z-index: 2; border: 2px solid var(--ink); border-radius: 3px;
  box-shadow: 2px 2px 0 var(--ink); padding: 3px 6px; font-size: 9px;
  line-height: 1.2; font-weight: 800; letter-spacing: .03em; pointer-events: none;
}
.cover-tag { top: 12px; right: 12px; background: var(--surface); rotate: 4deg; }
.cover-category { bottom: 10px; left: 12px; max-width: calc(100% - 65px); background: #ffe56b; rotate: -3deg; }
.cover-shape {
  position: absolute; top: 54px; right: 22px; width: 20px; height: 20px;
  border: 3px solid var(--ink); background: var(--lavender); rotate: 15deg;
  box-shadow: 2px 2px 0 var(--ink); pointer-events: none;
}
.cover-lines {
  position: absolute; left: 18px; top: 82px; width: 22px; height: 13px;
  border-top: 3px solid var(--ink); border-bottom: 3px solid var(--ink);
  rotate: -15deg; pointer-events: none;
}
.cover-running .app-icon { animation: cover-logo 4.8s steps(4, end) infinite; }
.cover-running .cover-shape { animation: cover-shape 3.2s steps(3, end) infinite; }
.cover-running::before, .cover-running::after { animation: cover-star 4s steps(3, end) infinite; }
.product-art .app-icon, .cover-shape, .product-art::before, .product-art::after {
  animation-delay: var(--cover-delay, 0s);
}
.cover-running .app-icon, .cover-running .cover-shape, .cover-running::before, .cover-running::after { animation-play-state: running; }
.page-away .product-art .app-icon, .page-away .cover-shape, .page-away .product-art::before, .page-away .product-art::after { animation-play-state: paused; }
@keyframes cover-logo { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes cover-shape { 0%, 100% { rotate: 15deg; translate: 0 0; } 50% { rotate: -15deg; translate: 0 3px; } }
@keyframes cover-star { 0%, 100% { scale: 1; } 50% { scale: .8; } }
@media (max-width: 700px) {
  .cover-tag, .cover-category { font-size: 7px; padding: 3px 4px; box-shadow: 1px 1px 0 var(--ink); }
  .cover-tag { top: 8px; right: 8px; }
  .cover-category { bottom: 8px; left: 8px; max-width: calc(100% - 40px); }
  .cover-shape { right: 9px; top: 45px; width: 13px; height: 13px; border-width: 2px; }
  .cover-lines { left: 9px; top: 78px; width: 12px; height: 10px; border-width: 2px; }
}
.step span { transition: rotate .12s var(--micro-ease), scale .12s var(--micro-ease); }
.step:hover span, .step:focus-within span { rotate: -12deg; scale: 1.12; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: 0 0 26px; display: grid; place-items: center; height: 26px;
  border: 2px solid var(--ink); background: var(--sky-soft); font-size: 20px;
  line-height: 1; transition: rotate .12s var(--micro-ease), background-color .12s var(--micro-ease);
}
.faq details[open]:not([data-expanding="false"]) summary::after { rotate: 45deg; background: var(--lavender); }
.faq details[data-expanding="false"] summary::after { rotate: 0deg; }
.faq summary:hover { color: var(--primary); }
.close:hover { rotate: 90deg; }
.count { transform-origin: center; }
.footer-settings { margin-top: 18px; }
.sound-preference { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; cursor: pointer; }
.sound-preference input { width: 18px; height: 18px; margin: 0; padding: 0; accent-color: var(--primary); cursor: pointer; }
.toast { bottom: 25px; }

dialog::backdrop { animation: backdrop-enter .12s var(--micro-ease) both; }
.cart-row { animation: row-enter .24s ease both; }
.cart-row:nth-child(2) { animation-delay: 35ms; }
.cart-row:nth-child(3) { animation-delay: 70ms; }
.product-preview img { animation: preview-enter .12s var(--micro-ease) both; }
.footer-row strong { transition: translate .12s var(--micro-ease); }
.footer-row strong:hover { translate: 3px -2px; }
.page-away .floating-logo { animation-play-state: paused; }
.header { transition: box-shadow .12s var(--micro-ease); }
.header.is-scrolled { box-shadow: 0 4px 0 var(--ink); }
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 3px;
  background: var(--primary); scale: var(--scroll-progress, 0) 1; transform-origin: left;
  pointer-events: none;
}
#robot-eyes ellipse { transform-box: fill-box; transform-origin: center; animation: robot-blink 5.5s infinite; }
.scene-paused .floating-logo, .scene-paused #robot-eyes ellipse, .page-away #robot-eyes ellipse { animation-play-state: paused; }
.product-preview:hover img { scale: 1.08; rotate: -4deg; transition: scale .12s var(--micro-ease), rotate .12s var(--micro-ease); }
@media (hover: hover) and (pointer: fine) {
  .card:hover .cover-tag { rotate: -3deg; translate: -2px -2px; }
  .card:hover .cover-category { rotate: 0deg; }
  .cover-tag, .cover-category { transition: rotate .12s var(--micro-ease), translate .12s var(--micro-ease); }
  .icon-btn:hover { rotate: -5deg; }
  .filters button:hover { rotate: -2deg; }
  .card:hover .app-icon, .card:focus-within .app-icon { transform: rotate(-5deg) translateY(-5px); box-shadow: 8px 8px 0 var(--ink); }
  .card:hover .product-logo, .card:focus-within .product-logo { scale: 1.06; }
  .card:hover .duration, .card:focus-within .duration { translate: 2px 0; rotate: -1deg; }
  .card:hover .product-art::before { rotate: 25deg; scale: 1.12; }
  .card:hover .product-art::after { rotate: -20deg; scale: 1.1; }
  .step:hover { translate: -2px -3px; box-shadow: 7px 7px 0 var(--ink); }
  .faq details:hover { box-shadow: 6px 6px 0 var(--ink); }
}
@keyframes nav-enter { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
@keyframes filter-tap { from { scale: .94; } 65% { scale: 1.06; } to { scale: 1; } }
@keyframes backdrop-enter { from { background-color: #20366700; } to { background-color: #20366766; } }
@keyframes row-enter { from { opacity: 0; translate: 8px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes preview-enter { from { scale: .85; rotate: -8deg; } to { scale: 1; rotate: 0deg; } }
@keyframes robot-blink { 0%, 92%, 96%, 100% { scale: 1 1; } 94% { scale: 1 .1; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .brand .star, .btn > span, .search-wrap, .search-wrap > span, .step span, .close,
  .card .app-icon, .card .product-logo, .card .duration, .product-art::before, .product-art::after,
  .icon-btn, .filters button, .select-option, .step, .footer-row strong, .product-preview img {
    translate: none !important; scale: none !important; rotate: none !important;
  }
  .card:hover .app-icon, .card:focus-within .app-icon { transform: rotate(-12deg); }
  .brand-avatar, .avatar-spark, .footer-brand img { translate: none !important; scale: none !important; }
  .brand:is(:hover, :focus-visible) .brand-avatar { rotate: -6deg; }
  .brand:is(:hover, :focus-visible) .avatar-spark { rotate: 0deg; }
  .footer-brand:hover img { rotate: -5deg; }
}