/* =====================================================================
   SANGITIFY — motion. Everything here is switched off for people who
   prefer reduced motion (see the block at the end).
   ===================================================================== */

/* ---------- Splash ---------- */
.splash {
  position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center;
  background: #080A0F; color: #fff; transition: opacity .45s var(--ease), visibility 0s linear .45s;
}
.splash.hide { opacity: 0; visibility: hidden; }
html.returning .splash { display: none; }
.splash .s-inner { display: flex; flex-direction: column; align-items: center; gap: 18px; }
.splash .s-logo { width: auto; max-width: 260px; height: 92px; object-fit: contain; opacity: 0; animation: s-logo .7s var(--ease) .1s forwards; filter: drop-shadow(0 0 0 rgba(255, 79, 163, 0)); }
.splash .s-eq { display: flex; align-items: flex-end; gap: 5px; height: 28px; opacity: 0; animation: s-fade .4s ease .5s forwards; }
.splash .s-eq i { width: 5px; border-radius: 4px; background: linear-gradient(to top, #5C7CFF, #FF4FA3); height: 30%; animation: eq 0.9s ease-in-out infinite; }
.splash .s-eq i:nth-child(2) { animation-delay: -.2s; }
.splash .s-eq i:nth-child(3) { animation-delay: -.45s; }
.splash .s-eq i:nth-child(4) { animation-delay: -.1s; }
.splash .s-eq i:nth-child(5) { animation-delay: -.6s; }
.splash .s-name { font-weight: 700; letter-spacing: .32em; font-size: 1.25rem; padding-left: .32em; opacity: 0; animation: s-rise .55s var(--ease) .75s forwards; }
.splash .s-tag { color: #9CA3AF; font-size: .85rem; opacity: 0; animation: s-rise .55s var(--ease) 1s forwards; }
@keyframes s-logo {
  0% { opacity: 0; transform: scale(.8); }
  60% { opacity: 1; filter: drop-shadow(0 0 22px rgba(255, 79, 163, .65)); }
  100% { opacity: 1; transform: scale(1); filter: drop-shadow(0 0 14px rgba(155, 92, 255, .5)); }
}
@keyframes s-fade { to { opacity: 1; } }
/* ---------- Android app splash (Admin → Settings → App). Transform/opacity only. ---------- */
.splash .s-mark { position: relative; display: grid; place-items: center; }
.splash.app-splash { background: radial-gradient(circle at 50% 40%, #2a1458 0%, #0b0812 62%); }
.splash.app-splash .s-inner { gap: 22px; }
.splash .s-icon { width: 112px; height: 112px; max-width: none; border-radius: 30px; object-fit: cover; filter: none;
  box-shadow: 0 22px 60px -14px rgba(255, 79, 163, .55); animation: s-pop .75s var(--ease) .05s forwards; }
.splash .s-ring { position: absolute; inset: -16px; border-radius: 40px; border: 2px solid rgba(155, 92, 255, .35); opacity: 0; }
.splash.app-splash .s-eq { height: 40px; gap: 6px; }
.splash.app-splash .s-eq i { width: 6px; height: 100%; transform-origin: 50% 100%; transform: scaleY(.25); }
.splash.app-splash .s-name { font-size: 1.6rem; letter-spacing: .22em; padding-left: .22em; }
.splash.app-splash .s-tag { color: #c9b8f2; }
.splash .s-fest { color: #ffd38a !important; font-weight: 600; }
@keyframes s-pop { 0% { opacity: 0; transform: scale(.6); } 60% { opacity: 1; transform: scale(1.06); } 100% { opacity: 1; transform: scale(1); } }
/* Pulse: soft rings breathe out from the icon */
.splash[data-style="pulse"] .s-eq { display: none; }
.splash[data-style="pulse"] .s-ring { animation: s-ring 1.6s ease-out .45s infinite; }
.splash[data-style="pulse"] .s-ring.r2 { animation-delay: 1.25s; }
@keyframes s-ring { 0% { opacity: .9; transform: scale(.85); } 100% { opacity: 0; transform: scale(1.55); } }
/* Vinyl: the icon becomes a spinning record */
.splash[data-style="vinyl"] .s-eq { display: none; }
.splash[data-style="vinyl"] .s-icon { border-radius: 50%; width: 132px; height: 132px; animation: s-pop .6s var(--ease) .05s forwards, s-spin 2.4s linear .6s infinite; }
.splash[data-style="vinyl"] .s-ring { inset: -10px; border-radius: 50%; border: 6px solid #111; box-shadow: inset 0 0 0 10px #1a1a1f, inset 0 0 0 12px #2b2b33; opacity: 1; }
@keyframes s-spin { to { transform: rotate(360deg); } }
html.is-app .install-bar { display: none !important; }

@keyframes s-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Equalizer & waveform ---------- */
/* transform-only (no layout): animating height re-laid-out the whole page 60×/s */
@keyframes eq { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(1); } }
.eq i { height: 100%; transform-origin: 50% 100%; animation: eq .9s ease-in-out infinite; will-change: transform; }
.eq i:nth-child(2) { animation-delay: -.3s; }
.eq i:nth-child(3) { animation-delay: -.6s; }
.eq.paused i { animation-play-state: paused; }
@keyframes wave { 0%, 100% { transform: scaleY(.35); } 50% { transform: scaleY(1); } }
.hero .wave i { animation: wave 2.4s ease-in-out infinite; animation-play-state: paused; }
.hero.in-view .wave i { animation-play-state: running; } /* only while the hero is on screen */
.hero .wave i:nth-child(2n) { animation-duration: 1.9s; }
.hero .wave i:nth-child(3n) { animation-duration: 2.8s; animation-delay: -.8s; }
.hero .wave i:nth-child(5n) { animation-delay: -1.3s; }

/* ---------- Loading ---------- */
@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.skel { animation: shimmer 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.spinner, .player .p-play.loading::after { animation: spin .8s linear infinite; }

/* ---------- View transition (answers navigation) ---------- */
@keyframes view-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.view.enter { animation: view-in .38s var(--ease) both; }

/* ---------- Sheets, modals, toasts ---------- */
@keyframes sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes sheet-up-center { from { transform: translate(-50%, 40px); opacity: 0; } to { transform: translateX(-50%); opacity: 1; } }
@keyframes scrim-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes modal-in { from { opacity: 0; transform: translate(-50%, -46%) scale(.97); } to { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } }
.scrim { animation: scrim-in .2s ease both; }
.sheet { animation: sheet-up .32s var(--ease) both; }
@media (min-width: 768px) { .sheet { animation-name: sheet-up-center; } }
.modal { animation: modal-in .25s var(--ease) both; }
.toast { animation: toast-in .28s var(--ease) both; }
.toast.out { opacity: 0; transform: translateY(8px); transition: all .25s ease; }

/* like pop */
@keyframes pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
.pop { animation: pop .35s var(--ease); }

/* tap feedback on mobile cards */
@media (hover: none) {
  .card:active .cover { transform: scale(.97); }
  .row:active { background: var(--card); }
}

/* playing halo breathing */
@keyframes breathe { 0%, 100% { transform: rotate(0deg) scale(.96); opacity: .7; } 50% { transform: rotate(180deg) scale(1.04); opacity: 1; } }
.fullplayer.playing .fp-halo { animation: breathe 9s ease-in-out infinite; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .splash .s-logo, .splash .s-eq, .splash .s-name, .splash .s-tag { opacity: 1; }
  .hero .wave i { transform: scaleY(.6); }
}

/* ---------- Battery saver ----------
   Screen off / app in background / tab hidden: freeze every animation.
   Low-power mode (Data saver, "reduce motion", or a slow/low-memory phone): calmer UI. */
html.sg-hidden *, html.sg-hidden *::before, html.sg-hidden *::after { animation-play-state: paused !important; }
html.sg-lite .hero .wave i, html.sg-lite .eq i, html.sg-lite .fp-ring, html.sg-lite .fp-bg i, html.sg-lite .fp-halo,
html.sg-lite .tg-orbs i, html.sg-lite .fx-float, html.sg-lite .ded-seal span { animation: none !important; }