/* BlokStreams Music — shared look for the player, profiles and sign-in pages.
   A listening room: cool black, one green, and the colour of whatever is playing. */
@font-face { font-family: "Figtree"; font-weight: 400; src: url(/fonts/figtree-400.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Figtree"; font-weight: 500; src: url(/fonts/figtree-500.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Figtree"; font-weight: 600; src: url(/fonts/figtree-700.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Figtree"; font-weight: 700; src: url(/fonts/figtree-700.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Figtree"; font-weight: 800; src: url(/fonts/figtree-800.woff2) format("woff2"); font-display: swap; }

/* the colour of the artwork now playing; registered so it can fade from one track to the next */
@property --aura { syntax: "<color>"; inherits: true; initial-value: #1ed760; }

:root {
  color-scheme: dark;
  --base: #070908; --main: #0f1211; --card: #161a18; --card-hover: #1f2522; --elevated: #1d2320; --line: #29322d;
  --text: #f2f5f3; --subdued: #a3ada7; --faint: #6c7770;
  --green: #1ed760; --green-hi: #3be477; --accent-text: #3be477; --on-green: #04130a;
  --tint: rgba(255, 255, 255, .07); --tint2: rgba(255, 255, 255, .12); --shadow: rgba(0, 0, 0, .65); --track: #3a433e;
  --danger: #ff6b6b; --aura: #1ed760; --fill: var(--text);
  --font: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.2, .7, .2, 1); --spring: cubic-bezier(.3, 1.45, .5, 1);
  transition: --aura 1.2s ease;
}
/* Daylight. Follows the device unless a choice was saved on it. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    color-scheme: light;
    --base: #e6ece8; --main: #f7faf8; --card: #ffffff; --card-hover: #e9efeb; --elevated: #ffffff; --line: #d6dfd9;
    --text: #0e1512; --subdued: #55625b; --faint: #8a968f;
    --green: #1bc65a; --green-hi: #1ed760; --accent-text: #0c7435; --on-green: #04130a;
    --tint: rgba(10, 40, 22, .06); --tint2: rgba(10, 40, 22, .11); --shadow: rgba(20, 50, 30, .28); --track: #cdd7d1;
    --danger: #c5382b;
  }
}
:root[data-theme="light"] {
  color-scheme: light;
  --base: #e6ece8; --main: #f7faf8; --card: #ffffff; --card-hover: #e9efeb; --elevated: #ffffff; --line: #d6dfd9;
  --text: #0e1512; --subdued: #55625b; --faint: #8a968f;
  --green: #1bc65a; --green-hi: #1ed760; --accent-text: #0c7435; --on-green: #04130a;
  --tint: rgba(10, 40, 22, .06); --tint2: rgba(10, 40, 22, .11); --shadow: rgba(20, 50, 30, .28); --track: #cdd7d1;
  --danger: #c5382b;
}
:root[data-theme="dark"] { color-scheme: dark; }

* { box-sizing: border-box; margin: 0; -webkit-tap-highlight-color: transparent; }
html { background: var(--base); }
body { font-family: var(--font); background: var(--base); color: var(--text); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
input { font: inherit; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; border-radius: 6px; }
::selection { background: var(--green); color: var(--on-green); }

.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; padding: 14px 22px; font-size: 15.5px; font-weight: 800;
  transition: transform .2s var(--spring), filter .2s; }
.btn:active { transform: scale(.96); }
.btn-green { background: var(--green); color: var(--on-green); box-shadow: 0 12px 26px -10px var(--green); }
@media (hover: hover) { .btn-green:hover { transform: translateY(-1px) scale(1.02); filter: brightness(1.08); } }
.btn-quiet { border: 1px solid var(--line); color: var(--subdued); }
@media (hover: hover) { .btn-quiet:hover { border-color: var(--text); color: var(--text); } }
.field { width: 100%; padding: 14px 16px; font-size: 16px; font-weight: 500; border-radius: 14px; border: 1.5px solid var(--line); background: var(--tint); color: var(--text); outline: none;
  transition: border-color .18s, box-shadow .18s; }
.field::placeholder { color: var(--faint); }
.field:focus { border-color: var(--green); box-shadow: 0 0 0 4px color-mix(in srgb, var(--green) 18%, transparent); }

/* sound rising behind the sign-in and profile screens: slow bars along the floor */
.floor { position: fixed; left: 0; right: 0; bottom: 0; height: 46vh; display: flex; align-items: flex-end; gap: clamp(4px, 1vw, 10px); padding: 0 2vw; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(transparent, #000 70%); mask-image: linear-gradient(transparent, #000 70%); opacity: .5; }
.floor i { flex: 1; border-radius: 6px 6px 0 0; background: linear-gradient(var(--green), transparent); height: 100%; transform-origin: bottom; animation: floor var(--t, 2s) ease-in-out var(--d, 0s) infinite alternate; }
@keyframes floor { from { transform: scaleY(.12); } to { transform: scaleY(var(--h, .8)); } }

@keyframes rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes pop { from { opacity: 0; transform: scale(.6); } }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@keyframes pulse { 50% { opacity: .35; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
  .floor { display: none; }
}
.floor ~ * { position: relative; z-index: 1; }