/* ============================================================
   FUN LAYER — beautification lane 5 (Andrew's order 2026-10-16:
   the site must be FUN and INTERACTIVE). Loads LAST, after
   site.css / rev7.css / dwell.css. Purely additive: every rule
   below is new or a state-layer enhancement of an existing
   class; no base rule is redefined, no layout is changed.
   Tokens only (DESIGN-LANGUAGE.md website ramps, via var()
   with codified fallbacks — gold frames/rings, orange spent on
   play states, navy surfaces). All motion is disabled under
   prefers-reduced-motion. Nothing here depends on hover:
   every effect also fires on touch / keyboard.
   ============================================================ */

/* ---------- 1. SOUND-BOARD PADS: ripple + glow pulse ----------
   Pads are .pad buttons (player.js); the live state class is
   .pad-on (set while the one-shot sounds) / .pad.hit. */
.pad{position:relative;overflow:hidden;isolation:isolate}
.pad>*{position:relative;z-index:1}
.pad-on,.pad.hit{
  box-shadow:0 0 0 2px var(--gold,#C9A45C),0 0 24px rgba(232,98,44,.45);
  animation:funPadGlow 1.1s var(--ease,cubic-bezier(.28,.11,.32,1)) infinite;
}
.pad.pad-err{box-shadow:0 0 0 2px rgba(232,98,44,.55)}
@keyframes funPadGlow{
  0%{box-shadow:0 0 0 2px var(--gold,#C9A45C),0 0 0 0 rgba(201,164,92,.45),0 0 18px rgba(232,98,44,.35)}
  55%{box-shadow:0 0 0 2px var(--gold,#C9A45C),0 0 0 9px rgba(201,164,92,0),0 0 30px rgba(232,98,44,.55)}
  100%{box-shadow:0 0 0 2px var(--gold,#C9A45C),0 0 0 0 rgba(201,164,92,0),0 0 18px rgba(232,98,44,.35)}
}
/* touch/pointer ripple, spawned by fun.js at the hit point */
.fun-ripple{
  position:absolute;z-index:0;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(232,196,118,.55) 0%,rgba(232,98,44,.35) 42%,rgba(232,98,44,0) 70%);
  transform:translate(-50%,-50%) scale(.15);opacity:.9;
  animation:funRipple .55s var(--ease,cubic-bezier(.28,.11,.32,1)) forwards;
}
@keyframes funRipple{
  to{transform:translate(-50%,-50%) scale(1);opacity:0}
}

/* ---------- 2. SEQUENCER: playhead steps pop ----------
   .step = main inline sequencer, .dwell-step = dwell D1.
   The .now class lands on a fresh cell each step, so the
   pop animation replays per step with zero JS. */
.step,.dwell-step{position:relative;overflow:hidden}
.step.now,.dwell-step.now{animation:funStepPop .22s var(--ease,cubic-bezier(.28,.11,.32,1))}
@keyframes funStepPop{
  0%{transform:scale(1.14)}
  100%{transform:scale(1)}
}
.step.on.now,.dwell-step.on.now{
  box-shadow:0 0 0 1px var(--gold,#C9A45C),0 0 14px rgba(232,98,44,.55);
}

/* ---------- 3. DWELL PANELS: playing glow ----------
   fun.js toggles .fun-playing on a .dwell panel while any of
   its transports reads "Pause" (pattern player, sequencer,
   compare, radio). Gold frame breathes; status gets a live
   pulsing dot. */
.dwell{transition:border-color var(--dur-med,.45s) var(--ease,cubic-bezier(.28,.11,.32,1)),box-shadow var(--dur-med,.45s) var(--ease,cubic-bezier(.28,.11,.32,1))}
.dwell.fun-playing{
  border-color:rgba(201,164,92,.65);
  animation:funDwellGlow 2.2s ease-in-out infinite;
}
@keyframes funDwellGlow{
  0%,100%{box-shadow:0 0 0 0 rgba(201,164,92,0),0 0 16px rgba(185,58,3,.14)}
  50%{box-shadow:0 0 0 1px rgba(201,164,92,.35),0 0 30px rgba(185,58,3,.28)}
}
.dwell.fun-playing .dwell-status{padding-left:16px;position:relative}
.dwell.fun-playing .dwell-status::before{
  content:"";position:absolute;left:0;top:.32em;width:8px;height:8px;border-radius:50%;
  background:var(--accent-bright,#E8622C);
  animation:funLiveDot 1.1s ease-in-out infinite;
}
@keyframes funLiveDot{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.45);opacity:.65}
}
/* transport button gets a soft breathing ring while it pauses */
.dwell.fun-playing .dwell-play{
  box-shadow:0 0 0 0 rgba(232,98,44,.5);
  animation:funPlayRing 1.6s ease-out infinite;
}
@keyframes funPlayRing{
  0%{box-shadow:0 0 0 0 rgba(232,98,44,.45)}
  100%{box-shadow:0 0 0 12px rgba(232,98,44,0)}
}

/* ---------- 4. DEMO PLAY STATES: waveform shimmer + card aura --- */
[data-card-wave]{position:relative;overflow:hidden}
.card.playing [data-card-wave]::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,transparent 25%,rgba(233,220,192,.16) 50%,transparent 75%);
  transform:translateX(-110%);
  animation:funShimmer 1.9s var(--ease,cubic-bezier(.28,.11,.32,1)) infinite;
}
@keyframes funShimmer{
  60%,100%{transform:translateX(110%)}
}
.card.playing canvas.card-wave,.track.playing .t-wave{filter:brightness(1.28) saturate(1.15)}
.card.playing{animation:funCardAura 2.4s ease-in-out infinite}
@keyframes funCardAura{
  0%,100%{box-shadow:var(--shadow-rest,0 1px 2px rgba(6,13,24,.5)),0 0 0 1px rgba(232,98,44,.30),0 18px 44px rgba(185,58,3,.16)}
  50%{box-shadow:var(--shadow-rest,0 1px 2px rgba(6,13,24,.5)),0 0 0 1px rgba(232,98,44,.45),0 18px 52px rgba(185,58,3,.30)}
}

/* ---------- 5. SURPRISE ME: button + spotlight ring ---------- */
.fun-shuffle{
  display:inline-flex;align-items:center;gap:8px;cursor:pointer;flex:none;
  min-height:44px;padding:10px 18px;box-sizing:border-box;
  border-radius:999px;border:var(--frame,1px solid rgba(201,164,92,.30));
  background:var(--navy-800,#122239);color:var(--champagne,#E9DCC0);
  font-family:var(--font-label,'Oswald',sans-serif);
  font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  transition:transform var(--dur-fast,.3s) var(--ease,cubic-bezier(.28,.11,.32,1)),background var(--dur-fast,.3s) var(--ease,cubic-bezier(.28,.11,.32,1)),border-color var(--dur-fast,.3s) var(--ease,cubic-bezier(.28,.11,.32,1));
  -webkit-tap-highlight-color:transparent;touch-action:manipulation;
}
.fun-shuffle .fun-star{color:var(--gold-pop,#E8C476);font-size:.95rem;line-height:1}
.fun-shuffle:active{transform:scale(.95)}
@media (hover:hover){
  .fun-shuffle:hover{background:var(--navy-700,#1B3050);border-color:var(--gold,#C9A45C)}
}
.fun-shuffle:focus-visible{outline:2px solid var(--gold-pop,#E8C476);outline-offset:2px}
.card.fun-spot{animation:funSpot 2.6s var(--ease,cubic-bezier(.28,.11,.32,1)) forwards;z-index:2}
@keyframes funSpot{
  0%{box-shadow:0 0 0 0 rgba(201,164,92,0)}
  12%{box-shadow:0 0 0 3px var(--gold,#C9A45C),0 0 38px rgba(232,196,118,.55);transform:translateY(-5px) scale(1.015)}
  68%{box-shadow:0 0 0 3px var(--gold,#C9A45C),0 0 38px rgba(232,196,118,.55);transform:translateY(-5px) scale(1.015)}
  100%{box-shadow:var(--shadow-rest,0 1px 2px rgba(6,13,24,.5));transform:none}
}

/* ---------- 6. MICRO-INTERACTIONS (touch-first) ----------
   Press feedback on controls that lacked it, and a slow art
   zoom on card hover (fine pointers only). Every animated
   element here also responds to :active, so touch gets the
   same delight without hover. */
.btn:active{transform:scale(.97)}
.feat-arrow:active,.bb-btn:active{transform:scale(.94)}
.chip:active,.tag:active{transform:scale(.96)}
.btn,.feat-arrow,.bb-btn{transition:transform var(--dur-fast,.3s) var(--ease,cubic-bezier(.28,.11,.32,1))}
@media (hover:hover){
  .card .art img{transition:transform .7s var(--ease,cubic-bezier(.28,.11,.32,1))}
  .card:hover .art img{transform:scale(1.045)}
  .feat-slide .f-art img{transition:transform .7s var(--ease,cubic-bezier(.28,.11,.32,1))}
  .feat-slide:hover .f-art img{transform:scale(1.03)}
}

/* ---------- 7. REDUCED MOTION: the fun goes quiet ---------- */
@media (prefers-reduced-motion: reduce){
  .fun-ripple{display:none!important}
  .pad-on,.pad.hit,.card.playing,.card.fun-spot,
  .dwell.fun-playing,.dwell.fun-playing .dwell-play,
  .dwell.fun-playing .dwell-status::before,
  .card.playing [data-card-wave]::after,
  .step.now,.dwell-step.now{animation:none!important}
  .card:hover .art img,.feat-slide:hover .f-art img{transform:none}
}