/* Motion. Only transform, opacity and filter, so animations stay smooth and cheap.
   Entrance animations apply only when the head script adds .motion (skipped for reduced motion). */
:root{--ease:cubic-bezier(.2,.7,.2,1);--ease-out:cubic-bezier(.16,1,.3,1)}

/* Smooth fades between pages, with the header held still. */
@view-transition{navigation:auto}
.top{view-transition-name:top}
::view-transition-old(root){animation:vt-out .22s var(--ease) both}
::view-transition-new(root){animation:vt-in .32s var(--ease-out) both}
::view-transition-group(product-photo){animation-duration:.45s;animation-timing-function:var(--ease-out)}
@keyframes vt-out{to{opacity:0;transform:translateY(-6px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(10px)}}


/* ---------- Homepage intro ---------- */
/* The portrait and the name are what Google measures as the main paint (LCP), so they are fully
   visible from the first frame: the photo settles in with a slow zoom and brightening, and the name
   drifts up. Neither starts from opacity 0 or a clip, which would hide them from LCP. */
@keyframes photo-in{from{transform:scale(1.06);filter:brightness(.55) saturate(.7)}}
@keyframes drift{from{transform:translateY(.22em)}}
@keyframes rise{from{opacity:0;transform:translateY(18px)}}
@keyframes fade{from{opacity:0}}
.motion .split{overflow:hidden}
.motion .split .photo{animation:photo-in 1.4s var(--ease-out) both}
.motion .txt>*{animation:rise .8s var(--ease-out) both}
.motion .txt>.label{animation-delay:.35s}
.motion .txt>h1{animation:drift .9s var(--ease-out) both}
.motion .txt>.bio{animation-delay:.7s}
.motion .txt>.player-slot{animation-delay:.85s}
.motion .txt>.stat{animation-delay:1s}
.motion .top{animation:fade .8s var(--ease) .2s both}

/* Shop page and product page intros */
.motion .shop-hero>*{animation:rise .7s var(--ease-out) both}
.motion .shop-hero>h1{animation:drift .8s var(--ease-out) both}
.motion .shop-hero>p:not(.label){animation-delay:.25s}
.motion .tabs .tab{animation:rise .6s var(--ease-out) both}
.motion .tabs .tab:nth-child(2){animation-delay:.06s}
.motion .tabs .tab:nth-child(3){animation-delay:.12s}
.motion .tabs .tab:nth-child(n+4){animation-delay:.18s}
.motion .buy>*{animation:rise .7s var(--ease-out) both}
.motion .buy>:nth-child(2){animation-delay:.06s}
.motion .buy>:nth-child(3){animation-delay:.12s}
.motion .buy>:nth-child(n+4){animation-delay:.18s}

/* ---------- Reveal on scroll (motion.js adds .reveal and .is-in) ---------- */
/* Uses translate (not transform) so hover lifts still work after an item is revealed. */
.motion-ready .reveal{opacity:0;translate:0 22px;transition:opacity .7s var(--ease-out) var(--d,0s),translate .7s var(--ease-out) var(--d,0s),transform .35s var(--ease),box-shadow .35s var(--ease)}
.motion-ready .reveal.is-in{opacity:1;translate:none}

/* ---------- Player ---------- */
.player{transition:background .3s var(--ease),transform .2s var(--ease)}
.player:hover{background:#352d26}
.player:active{transform:scale(.98)}
.play{transition:transform .3s var(--ease)}
.player:hover .play{transform:scale(1.08)}
.play::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid var(--fg);opacity:0}
.motion .play::before{animation:ring 3.2s var(--ease-out) 2s infinite}
@keyframes ring{0%{transform:scale(1);opacity:.5}60%,100%{transform:scale(1.7);opacity:0}}
.wave{transform-origin:center;transition:opacity .3s}
.motion .wave{animation:breathe 2.4s ease-in-out infinite}
.player:hover .wave{opacity:.75}
@keyframes breathe{50%{transform:scaleY(.55)}}

/* ---------- Music tiles ---------- */
.rel{position:relative;overflow:hidden;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.rel::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-110%);transition:transform .7s var(--ease)}
.rel::after{content:"Play ↗";position:absolute;top:12px;right:12px;font:500 11px var(--mono);letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(-6px);transition:opacity .3s,transform .3s var(--ease)}
.rel span{position:relative;transition:transform .35s var(--ease)}
.rel:hover{transform:translateY(-6px);box-shadow:0 18px 30px -18px rgba(0,0,0,.8)}
.rel:hover::before{transform:translateX(110%)}
.rel:hover::after{opacity:1;transform:none}
.rel:hover span{transform:translateY(-2px)}

/* ---------- Links and buttons ---------- */
.top nav a,.foot a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--ease),color .2s}
.top nav a{padding-bottom:2px}
.top nav a:hover,.foot nav a:hover{background-size:100% 1px}
.foot nav a{text-decoration:none}
.btn{transition:transform .2s var(--ease),opacity .2s,background .2s,color .2s}
.btn:active{transform:scale(.97)}
.btn-ghost:hover{background:var(--fg);color:var(--bg);opacity:1}

/* ---------- Product cards ---------- */
.card-img img{transition:transform .8s var(--ease-out),opacity .45s var(--ease)}
.card:hover .card-img img{transform:scale(1.05)}
.card-img .alt-img{position:absolute;inset:0;opacity:0}
.card:hover .card-img .alt-img.is-ready{opacity:1}
.card-name{transition:color .2s}
.card:hover .card-name{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
/* Loading placeholders pulse with opacity only, which the browser can animate off the main thread. */
.skel .card-img,.skel-line{animation:pulse 1.4s ease-in-out infinite}

/* ---------- Tabs, chips, options ---------- */
.tab,.chip span,.size span,.swatch span{transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease),box-shadow .2s}
.tab:hover{color:var(--fg);border-color:var(--muted)}
.chip span:hover,.size span:hover{border-color:var(--muted);color:var(--fg)}
.swatch:hover span{transform:scale(1.08)}
.size input:checked+span,.swatch input:checked+span{animation:pop .3s var(--ease-out)}
@keyframes pop{50%{transform:scale(1.08)}}

/* Product photo swap */
.gallery-main img.swap{animation:fade .4s var(--ease) both}
.thumb{transition:border-color .2s,opacity .2s}
.thumb:hover{opacity:.85}

/* Add to cart success */
.btn.is-added{animation:pop .4s var(--ease-out)}

/* ---------- Cart ---------- */
.cart-count.bump{animation:bump .45s var(--ease-out)}
@keyframes bump{40%{transform:scale(1.45)}}
.drawer-panel{transition:transform .38s var(--ease-out)}
.drawer.is-opening .line{animation:slide-in .45s var(--ease-out) both}
.drawer.is-opening .line:nth-child(2){animation-delay:.05s}
.drawer.is-opening .line:nth-child(3){animation-delay:.1s}
.drawer.is-opening .line:nth-child(n+4){animation-delay:.15s}
@keyframes slide-in{from{opacity:0;transform:translateX(24px)}}
.bar span{transition:width .6s var(--ease-out)}

@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* Quick add window */
.motion .quick[open]{animation:rise .35s var(--ease-out)}
.motion .quick[open]::backdrop{animation:fade .3s var(--ease)}