/* ==========================================================================
   Albums — micro-animation layer (shared by Media + Principal)
   Everything here is disabled for people who ask for reduced motion.
   ========================================================================== */

:root {
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --spring-soft: cubic-bezier(.25, 1.25, .5, 1);
  --out: cubic-bezier(.16, 1, .3, 1);
}

/* ---------- Keyframes ---------- */
@keyframes m-rise    { from { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes m-fade    { from { opacity: 0; } }
@keyframes m-pop     { 0% { opacity: 0; transform: scale(.5); } 60% { opacity: 1; } }
@keyframes m-bump    { 0% { transform: scale(1); } 35% { transform: scale(1.22); } 70% { transform: scale(.94); } 100% { transform: scale(1); } }
@keyframes m-nudge   { 0% { transform: scale(1); } 40% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes m-shake   { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-8px); } 40%, 60% { transform: translateX(8px); } }
@keyframes m-in-r    { from { opacity: 0; transform: translateX(36px); } }
@keyframes m-in-l    { from { opacity: 0; transform: translateX(-36px); } }
@keyframes m-down    { from { opacity: 0; transform: translateY(-14px); } }
@keyframes m-up      { from { opacity: 0; transform: translateY(24px); } }
@keyframes m-reveal  { from { transform: translateY(105%); } }
@keyframes m-draw    { from { stroke-dashoffset: var(--len, 30); } to { stroke-dashoffset: 0; } }
@keyframes m-pulse-ring { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 6px transparent; } }
@keyframes m-breathe { 50% { opacity: .55; transform: scale(.985); } }
@keyframes m-float   { 0%, 100% { transform: translateY(-6px) scale(1.06) rotate(-2.5deg); } 50% { transform: translateY(-10px) scale(1.07) rotate(1.5deg); } }
@keyframes m-jiggle  { 0%, 100% { transform: rotate(-1.2deg); } 50% { transform: rotate(1.2deg); } }
@keyframes m-spin    { to { transform: rotate(360deg); } }
@keyframes m-toast-out { to { opacity: 0; transform: translate(-50%, -16px) scale(.96); } }
@keyframes m-drop-in { 0% { opacity: 0; transform: translateY(-46px) rotate(var(--r, 0deg)); } 60% { opacity: 1; } }
@keyframes m-fan-a   { from { transform: rotate(0) translateX(28%); } }
@keyframes m-fan-b   { from { transform: rotate(0) translateX(-28%); } }
@keyframes m-glow    { 0%, 100% { box-shadow: 0 10px 30px color-mix(in srgb, var(--blue) 40%, transparent); } 50% { box-shadow: 0 10px 44px color-mix(in srgb, var(--blue) 70%, transparent); } }
@keyframes m-burst   { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(var(--a)) translateY(0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) rotate(var(--a)) translateY(-46px) scale(.3); } }
@keyframes m-sheen   { from { transform: translateX(-120%) skewX(-18deg); } to { transform: translateX(260%) skewX(-18deg); } }
@keyframes m-blur-in { from { opacity: 0; filter: blur(12px); transform: scale(.96); } }
@keyframes m-dot-wave { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }

/* ---------- Staggered entrances ----------
   Add .stagger to a container; children rise in one after another each time
   their screen/pane becomes visible (JS restarts it by toggling .play). */
.play .stagger > *, .play.stagger > * {
  animation: m-rise .6s var(--out) both;
  animation-delay: calc(var(--i, 0) * 38ms + var(--d, 0ms));
}
.play .stagger-fast > * {
  animation: m-rise .5s var(--out) both;
  animation-delay: calc(var(--i, 0) * 16ms + var(--d, 0ms));
}
.play .stagger-pop > * {
  animation: m-pop .55s var(--spring) both;
  animation-delay: calc(var(--i, 0) * 45ms + var(--d, 0ms));
}
.play .m-rise { animation: m-rise .6s var(--out) both; animation-delay: var(--d, 0ms); }
.play .m-fade { animation: m-fade .6s ease both; animation-delay: var(--d, 0ms); }
.play .m-pop  { animation: m-pop .6s var(--spring) both; animation-delay: var(--d, 0ms); }
.play .m-up   { animation: m-up .7s var(--out) both; animation-delay: var(--d, 0ms); }
.play .m-blur { animation: m-blur-in .8s var(--out) both; animation-delay: var(--d, 0ms); }

/* Line-by-line headline reveal */
.reveal-lines .ln { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.reveal-lines .ln > span { display: inline-block; }
.play .reveal-lines .ln > span { animation: m-reveal .9s var(--out) both; animation-delay: calc(var(--i, 0) * 90ms + var(--d, 0ms)); }

/* One-shot helpers (JS adds, then removes on animationend) */
.m-bump  { animation: m-bump .45s var(--spring); }
.m-nudge { animation: m-nudge .35s var(--spring); }
.m-shake { animation: m-shake .5s cubic-bezier(.36, .07, .19, .97); }

/* ---------- Press feedback ---------- */
.btn, .chip, .choice, .share-btn, .q-opt, .side-item, .nav-btn, .v-btn, .v-circle, .v-act, .go, .send, .album-card, .tile, .p, .slot, .mode button, .segmented button, .dnav button, .v-nav, .v-arrow, .row .btn-plain, .switch {
  -webkit-tap-highlight-color: transparent;
}
.btn, .chip, .share-btn, .nav-btn, .v-btn, .v-circle, .v-act, .go, .send, .v-nav, .v-arrow, .mode button, .segmented button {
  transition: transform .35s var(--spring), background-color .2s, color .2s, box-shadow .25s, opacity .2s;
}
.btn:active, .chip:active, .share-btn:active, .nav-btn:active, .v-btn:active, .v-circle:active, .v-act:active, .go:active, .v-nav:active, .v-arrow:active, .mode button:active, .segmented button:active { transform: scale(.94); transition-duration: .08s; }
.send:active { transform: scale(.97); transition-duration: .08s; }
.btn-primary:hover, .go:hover { box-shadow: 0 6px 18px color-mix(in srgb, var(--blue) 40%, transparent); }
.btn-primary { position: relative; overflow: hidden; }
.btn-primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); transform: translateX(-120%) skewX(-18deg); pointer-events: none; }
.btn-primary:hover::after { animation: m-sheen .8s var(--out); }
.v-nav:hover, .v-arrow:hover { transform: translateY(-50%) scale(1.08); }
.v-nav:active, .v-arrow:active { transform: translateY(-50%) scale(.92); }

/* Icons inside buttons get a tiny nudge on hover */
.btn:hover .i, .share-btn:hover .ic, .go:hover .i { transition: transform .35s var(--spring); }
.btn:hover .i { transform: scale(1.08); }
.go:hover .i, .choice:hover .chev { transform: translateX(3px); }
.choice .chev { transition: transform .35s var(--spring), opacity .2s; }
.choice:hover .chev { opacity: .8; }
.share-btn:hover .ic { transform: scale(1.08) rotate(-4deg); }
.choice:hover .ic { animation: m-nudge .4s var(--spring); }

/* ---------- Segmented controls with a sliding thumb ---------- */
.has-thumb { position: relative; isolation: isolate; }
.has-thumb > button.on { background: transparent !important; box-shadow: none !important; }
.seg-thumb {
  position: absolute; z-index: -1; top: 2px; bottom: 2px; left: 0; width: 0;
  border-radius: 6px; background: var(--bg-elevated);
  box-shadow: 0 1px 3px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04);
  transition: transform .45s var(--spring-soft), width .45s var(--spring-soft);
}
.mode .seg-thumb { top: 3px; bottom: 3px; border-radius: 9px; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 0 0 .5px rgba(0,0,0,.04); }
.dnav .seg-thumb { display: none; }

/* ---------- Toggles & choices ---------- */
.switch { cursor: pointer; }
.switch::after { transition: transform .4s var(--spring), width .2s ease; }
.switch:active::after { width: 24px; }
.switch.on:active::after { transform: translateX(10px); }
.q-opt { transition: box-shadow .25s, background-color .25s, transform .35s var(--spring); cursor: pointer; }
.q-opt:active { transform: scale(.97); }
.q-opt.on { animation: m-nudge .35s var(--spring); }
.q-opt .rec { transition: opacity .2s; }

.chip { transition: background-color .25s, color .25s, transform .35s var(--spring); }

/* Count values that update */
.m-count { display: inline-block; font-variant-numeric: tabular-nums; }

/* Pulsing status dots */
.pill-orange .dot { animation: m-pulse-ring 1.8s ease-out infinite; }
.badge.hot { animation: m-bump .6s .8s var(--spring) both; }

/* Toasts */
.toast.out { animation: m-toast-out .35s ease forwards !important; }

/* Spinner */
.m-spinner { width: 18px; height: 18px; border-radius: 50%; border: 2.4px solid rgba(255,255,255,.35); border-top-color: #fff; animation: m-spin .7s linear infinite; }

/* Typing dots */
.m-dots { display: inline-flex; gap: 3px; vertical-align: middle; }
.m-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; animation: m-dot-wave 1.1s infinite; }
.m-dots i:nth-child(2) { animation-delay: .12s; }
.m-dots i:nth-child(3) { animation-delay: .24s; }

/* Star burst particles */
.burst { position: fixed; pointer-events: none; z-index: 9998; width: 0; height: 0; }
.burst i { position: absolute; left: 0; top: 0; width: 7px; height: 7px; border-radius: 50%; animation: m-burst .6s var(--out) forwards; }

/* Flying clone (FLIP) */
.fly-clone { position: fixed; z-index: 9997; pointer-events: none; background-size: cover; background-position: center; border-radius: 10px; box-shadow: 0 18px 40px rgba(0,0,0,.3); transition: transform .55s var(--out), opacity .55s, border-radius .55s; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important;
    transition-duration: .01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important;
  }
}