/* ============================================================================
   CLEO'S MUSIC: the page's own style (play/music/music.css)
   An Eternal Raine Ltd product.

   The tokens are the Visual Bible's (play/world.css) copied by value, not
   loaded, so this page stays still and quiet and does not change when the
   world's own surfaces do. One typeface, Baloo 2, self-hosted in the repo.
   Mobile first at 375; every target at least 48 by 48.
   ========================================================================== */
@font-face{
  font-family:'Baloo 2';
  src:url('../../assets/fonts/baloo2.woff2') format('woff2');
  font-weight:400 800; font-display:swap;
}
:root{
  --abyss:#04182b; --deep:#072a45; --sea:#0b4f6c; --shallow:#12909f; --lagoon:#2ad0c8; --foam:#d9f6fb;
  --gold:#ffc94a; --gold-deep:#e0982a; --gold-pale:#ffe9a8; --paper:#fffaf0;
  --ink:#04182b; --text:#eef3ff; --dim:rgba(238,243,255,.82); --line:rgba(255,255,255,.14);
  --glass:rgba(7,42,69,.62); --aqua-ring:#4FD8C4;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; min-height:100vh; overflow-x:hidden;
  font-family:'Baloo 2','Trebuchet MS','Segoe UI Rounded',system-ui,sans-serif;
  color:var(--text); line-height:1.35;
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(255,201,74,.14) 0%, transparent 60%),
    linear-gradient(180deg, #0a2340 0%, var(--deep) 40%, var(--abyss) 100%);
  background-color:var(--abyss);
  padding-bottom:env(safe-area-inset-bottom);
}
[hidden]{display:none !important}
:where(a,button,input,summary,[tabindex]):focus-visible{outline:3px solid var(--aqua-ring); outline-offset:3px}
.sr{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:12px; top:-60px; z-index:10; background:var(--gold); color:var(--ink); padding:10px 14px; border-radius:12px; font-weight:800; text-decoration:none}
.skip:focus{top:10px}

/* ---------- top: one way home ------------------------------------------- */
.top{max-width:620px; margin:0 auto; padding:calc(10px + env(safe-area-inset-top)) 16px 0}
.back{
  display:inline-flex; align-items:center; gap:6px; min-height:48px; padding:0 14px 0 8px;
  border-radius:999px; color:var(--text); text-decoration:none; font-weight:700; font-size:1rem;
  background:rgba(255,255,255,.06); border:1px solid var(--line);
}
.back:hover{background:rgba(255,255,255,.12)}

/* ---------- page ------------------------------------------------------- */
.wrap{max-width:620px; margin:0 auto; padding:8px 16px 24px}
h1{margin:10px 0 0; font-size:clamp(2rem, 9vw, 2.8rem); line-height:1.05; font-weight:800; color:var(--gold-pale); letter-spacing:.01em}
.lede{margin:4px 0 14px; color:var(--dim); font-size:1.05rem}

/* ---------- the picture ------------------------------------------------- */
.scene{
  position:relative; border-radius:22px; overflow:hidden; height:clamp(150px, 42vw, 220px);
  box-shadow:0 14px 34px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.08);
}
.scene svg{display:block; width:100%; height:100%}
.scene .anim{transform-box:view-box}
.scene .w1{animation:mDrift400 16s linear infinite}
.scene .w2{animation:mDrift360 22s linear infinite}
.scene .w3{animation:mDrift320 30s linear infinite}
.scene .c1{animation:mDrift400 90s linear infinite}
.scene .c2{animation:mDrift400 140s linear infinite}
.scene .boat{transform-origin:196px 140px; animation:mBob 7s ease-in-out infinite}
.scene .glow{transform-origin:200px 118px; animation:mGlow 9s ease-in-out infinite}
/* after the shorthands above, which would otherwise set it running */
.scene .anim{animation-play-state:paused}
html.is-playing .scene .anim{animation-play-state:running}
@keyframes mDrift400{from{transform:translateX(0)}to{transform:translateX(-400px)}}
@keyframes mDrift360{from{transform:translateX(0)}to{transform:translateX(-360px)}}
@keyframes mDrift320{from{transform:translateX(0)}to{transform:translateX(-320px)}}
@keyframes mBob{0%,100%{transform:translateY(0) rotate(-1.5deg)}50%{transform:translateY(3px) rotate(1.5deg)}}
@keyframes mGlow{0%,100%{opacity:.75}50%{opacity:1}}

/* ---------- the player ------------------------------------------------- */
.player{
  margin-top:-26px; position:relative; z-index:1;
  background:var(--glass); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid var(--line); border-radius:22px; padding:16px 16px 12px;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
}
.now{text-align:center}
.now p{margin:0}
.now-label{font-size:.85rem; letter-spacing:.08em; text-transform:uppercase; color:var(--lagoon); font-weight:700}
.now-title{font-size:1.6rem; font-weight:800; color:#fff; line-height:1.15; margin-top:2px !important}
.now-line{color:var(--dim); font-size:1.02rem}

.seek{margin:12px 0 2px}
.times{display:flex; justify-content:space-between; font-size:.9rem; color:var(--dim); font-variant-numeric:tabular-nums; margin-top:2px}

/* range inputs, drawn once for both the seek bar and the volume */
input[type=range]{
  -webkit-appearance:none; appearance:none; width:100%; height:44px; margin:0; background:transparent; cursor:pointer;
  --fill:0%;
}
input[type=range]::-webkit-slider-runnable-track{
  height:10px; border-radius:999px;
  background:linear-gradient(90deg, var(--gold) 0 var(--fill), rgba(255,255,255,.18) var(--fill) 100%);
}
input[type=range]::-moz-range-track{height:10px; border-radius:999px; background:rgba(255,255,255,.18)}
input[type=range]::-moz-range-progress{height:10px; border-radius:999px; background:var(--gold)}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none; width:26px; height:26px; margin-top:-8px; border-radius:50%;
  background:var(--paper); border:3px solid var(--gold-deep); box-shadow:0 2px 6px rgba(0,0,0,.35);
}
input[type=range]::-moz-range-thumb{width:22px; height:22px; border-radius:50%; background:var(--paper); border:3px solid var(--gold-deep)}

.controls{display:flex; align-items:center; justify-content:center; gap:clamp(14px, 6vw, 30px); margin:8px 0 12px}
button{font:inherit; color:inherit; -webkit-tap-highlight-color:transparent}
.ctl{
  display:grid; place-items:center; width:64px; height:64px; border-radius:50%; cursor:pointer;
  color:var(--text); background:rgba(255,255,255,.08); border:1px solid var(--line);
  transition:transform .15s ease, background .15s ease;
}
.ctl:hover{background:rgba(255,255,255,.15)}
.ctl:active{transform:scale(.94)}
.ctl.big{
  width:96px; height:96px; color:var(--ink); border:none;
  background:radial-gradient(circle at 35% 30%, var(--gold-pale), var(--gold) 45%, var(--gold-deep));
  box-shadow:0 10px 24px rgba(224,152,42,.35), inset 0 -4px 0 rgba(0,0,0,.12);
}
.ctl.big:hover{background:radial-gradient(circle at 35% 30%, #fff3c4, var(--gold) 45%, var(--gold-deep))}
.ctl .i-pause{display:none}
html.is-playing .ctl.big .i-play{display:none}
html.is-playing .ctl.big .i-pause{display:block}
.ctl.big .i-play{margin-left:4px}

.modes{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.mode{
  display:flex; align-items:center; justify-content:center; gap:8px; min-height:52px; padding:6px 10px;
  border-radius:16px; cursor:pointer; font-weight:700; font-size:1rem;
  color:var(--dim); background:rgba(255,255,255,.05); border:2px solid var(--line);
}
.mode:hover{background:rgba(255,255,255,.1)}
.mode[aria-pressed="true"]{color:var(--ink); background:var(--lagoon); border-color:var(--lagoon)}

.vol{display:flex; align-items:center; gap:10px; margin-top:12px}
.mute{
  flex:0 0 auto; display:grid; place-items:center; width:48px; height:48px; border-radius:14px; cursor:pointer;
  background:rgba(255,255,255,.06); border:1px solid var(--line); color:var(--text);
}
.mute .i-off{display:none}
.mute[aria-pressed="true"] .i-on{display:none}
.mute[aria-pressed="true"] .i-off{display:block}
.vol input{flex:1 1 auto; min-width:0}

.status{min-height:1.4em; margin:6px 0 0; text-align:center; color:var(--gold-pale); font-size:.95rem}

/* ---------- the list ---------------------------------------------------- */
.list h2{margin:22px 0 8px; font-size:1.3rem; color:var(--gold-pale)}
.list ol{list-style:none; margin:0; padding:0; display:grid; gap:10px}
.trk{
  width:100%; display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px;
  min-height:68px; padding:10px 14px 10px 10px; text-align:left; cursor:pointer;
  border-radius:18px; background:rgba(255,255,255,.05); border:2px solid var(--line); color:var(--text);
}
.trk:hover{background:rgba(255,255,255,.1)}
.trk[aria-current="true"]{border-color:var(--gold); background:rgba(255,201,74,.12)}
.trk .num{
  display:grid; place-items:center; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.08); font-weight:800; color:var(--gold-pale);
}
.trk[aria-current="true"] .num{background:var(--gold); color:var(--ink)}
.trk .txt{min-width:0}
.trk .t{display:block; font-weight:800; font-size:1.1rem; line-height:1.15}
.trk .l{display:block; color:var(--dim); font-size:.95rem; line-height:1.25}
.trk .d{color:var(--dim); font-variant-numeric:tabular-nums; font-size:.95rem}
/* the little bars on the tune that is playing */
.eq{display:none; gap:3px; align-items:flex-end; height:18px}
.eq i{display:block; width:4px; height:6px; border-radius:2px; background:var(--ink); animation:mEq 1.1s ease-in-out infinite; animation-play-state:paused}
.eq i:nth-child(2){animation-delay:-.4s}
.eq i:nth-child(3){animation-delay:-.75s}
.trk[aria-current="true"] .eq{display:flex}
.trk[aria-current="true"] .n{display:none}
html:not(.is-playing) .trk .eq{display:none}
html:not(.is-playing) .trk[aria-current="true"] .n{display:inline}
html.is-playing .eq i{animation-play-state:running}
@keyframes mEq{0%,100%{height:5px}50%{height:17px}}

/* ---------- footer ------------------------------------------------------- */
.foot{max-width:620px; margin:0 auto; padding:8px 16px calc(24px + env(safe-area-inset-bottom)); text-align:center; color:rgba(238,243,255,.6); font-size:.85rem}
.foot p{margin:6px 0}
.foot p.links{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:0 4px}
.foot a{color:rgba(255,233,168,.8); display:inline-flex; align-items:center; justify-content:center; min-height:44px; min-width:44px; padding:0 6px}

@media (min-width:700px){
  .player{padding:20px 24px 16px}
  .now-title{font-size:1.9rem}
}

/* ---------- reduced motion: everything stands still --------------------- */
@media (prefers-reduced-motion: reduce){
  .scene .anim, .eq i{animation:none !important}
  .ctl, .ctl:active{transition:none; transform:none}
  html.is-playing .trk[aria-current="true"] .eq i:nth-child(1){height:9px}
  html.is-playing .trk[aria-current="true"] .eq i:nth-child(2){height:15px}
  html.is-playing .trk[aria-current="true"] .eq i:nth-child(3){height:11px}
}