/* Sing along: Rachel and Ollie's songs and finger rhymes (home page, 5 Nov 2026).
   The playful corner of the site: rounder shapes, warm colours, tilted cards and
   drifting notes. Everything moving stops under reduced motion. */

.songs{position:relative;overflow:hidden;background:var(--cream);
  background-image:radial-gradient(circle at 12% 18%,rgba(253,215,154,.55),transparent 38%),
    radial-gradient(circle at 88% 82%,rgba(107,140,112,.22),transparent 40%)}
.songs .wrap{position:relative;z-index:1}
.songs-head{max-width:720px;margin:0 auto clamp(34px,5vw,56px);text-align:center}
.songs-head .eyebrow{display:inline-block;background:var(--gold);color:var(--navy);
  padding:.45em 1.1em;border-radius:999px;transform:rotate(-2deg)}
.songs-head h2 span{color:var(--gold-deep)}

/* the floating notes */
.songs-notes{position:absolute;inset:0;pointer-events:none;z-index:0}
.songs-notes i{position:absolute;width:34px;height:34px;opacity:.5;animation:noteFloat 9s ease-in-out infinite}
.songs-notes svg{width:100%;height:100%;fill:currentColor}
.songs-notes .n1{left:6%;top:14%;color:var(--blue);animation-delay:0s}
.songs-notes .n2{left:90%;top:10%;color:var(--gold-deep);width:44px;height:44px;animation-delay:-2s}
.songs-notes .n3{left:4%;top:68%;color:var(--sage);width:26px;height:26px;animation-delay:-4s}
.songs-notes .n4{left:93%;top:58%;color:var(--rose);width:30px;height:30px;animation-delay:-6s}
.songs-notes .n5{left:48%;top:4%;color:var(--sage);width:24px;height:24px;animation-delay:-3s}
.songs-notes .n6{left:70%;top:92%;color:var(--blue);width:28px;height:28px;animation-delay:-7s}
@keyframes noteFloat{
  0%,100%{transform:translateY(0) rotate(-8deg)}
  50%{transform:translateY(-22px) rotate(10deg)}
}

/* stage: the player beside the song list */
.songs-stage{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(26px,4vw,52px);align-items:start}
.songs-player{position:relative;min-width:0}
.songs-blob{position:absolute;inset:-18px -14px -14px -20px;background:var(--gold);
  border-radius:58% 42% 55% 45% / 46% 58% 42% 54%;z-index:0;
  animation:blob 14s ease-in-out infinite}
@keyframes blob{
  0%,100%{border-radius:58% 42% 55% 45% / 46% 58% 42% 54%;transform:rotate(-2deg)}
  50%{border-radius:44% 56% 42% 58% / 56% 44% 58% 42%;transform:rotate(2deg)}
}
.songs-screen{position:relative;z-index:1;border-radius:22px;overflow:hidden;background:var(--ink);
  border:6px solid #fff;box-shadow:0 22px 50px rgba(15,36,54,.22);transform:rotate(-1deg);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1)}
.songs-player:hover .songs-screen{transform:rotate(0)}
.songs-screen video{display:block;width:100%;aspect-ratio:16/9;background:var(--ink)}
.songs-now{position:relative;z-index:1;margin:22px 0 0 6px;font-weight:500;color:var(--navy);
  display:flex;align-items:center;gap:.6em;flex-wrap:wrap}
.songs-now strong{font-family:var(--f-loud);font-weight:500;font-size:1.25em}

/* the little dancing bars beside Now playing */
.eq{display:inline-flex;align-items:flex-end;gap:3px;height:18px}
.eq b{width:4px;height:30%;background:var(--sage);border-radius:2px}
.songs.playing .eq b{animation:eq .9s ease-in-out infinite}
.songs.playing .eq b:nth-child(2){animation-delay:-.3s;background:var(--gold-deep)}
.songs.playing .eq b:nth-child(3){animation-delay:-.6s;background:var(--blue)}
.songs.playing .eq b:nth-child(4){animation-delay:-.15s;background:var(--rose)}
@keyframes eq{0%,100%{height:25%}50%{height:100%}}

/* the song list */
.songs-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.song{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:grid;
  grid-template-columns:104px minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:10px 16px 10px 10px;border-radius:18px;background:#fff;border:2px solid transparent;
  box-shadow:0 6px 18px rgba(15,36,54,.08);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .3s,border-color .3s}
.songs-list li:nth-child(odd) .song{transform:rotate(-.8deg)}
.songs-list li:nth-child(even) .song{transform:rotate(.8deg)}
.songs-list li .song:hover{transform:rotate(0) scale(1.03);box-shadow:0 14px 30px rgba(15,36,54,.15)}
.song:focus-visible{outline:3px solid var(--gold-deep);outline-offset:3px}
.song.c0{background:#fff6e2}.song.c1{background:#eef4ee}.song.c2{background:#e9f0f7}.song.c3{background:#fbecee}
.song.on{border-color:var(--navy);transform:rotate(0) !important}

.song-pic{position:relative;display:block;border-radius:7px;overflow:hidden;aspect-ratio:16/9}
.song-pic img{width:100%;height:100%;object-fit:cover}
.song-play{position:absolute;inset:0;margin:auto;width:34px;height:34px;border-radius:50%;
  background:rgba(255,255,255,.92);box-shadow:0 4px 12px rgba(0,0,0,.2);transition:transform .3s}
.song-play::after{content:"";position:absolute;left:13px;top:10px;border-style:solid;
  border-width:7px 0 7px 11px;border-color:transparent transparent transparent var(--navy)}
.song:hover .song-play{transform:scale(1.15)}
.song.on .song-play{background:var(--gold)}

.song-txt{display:block;min-width:0}
.song-no{display:inline-grid;place-items:center;width:24px;height:24px;margin-right:8px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:.78rem;font-weight:600;vertical-align:2px}
.song-txt b{font-family:var(--f-loud);font-weight:500;color:var(--navy);font-size:1.08rem;line-height:1.25}
.song-txt small{display:block;margin-top:3px;color:var(--muted);font-size:.9rem;line-height:1.4}
.song-len{font-size:.85rem;font-weight:600;color:var(--sage-txt);background:rgba(255,255,255,.7);
  padding:.2em .6em;border-radius:999px}

@media (max-width:900px){
  .songs-stage{grid-template-columns:1fr}
  .songs-blob{inset:-10px -8px -8px -10px}
}
@media (max-width:480px){
  .song{grid-template-columns:84px minmax(0,1fr);padding:8px 12px 8px 8px}
  .song-len{display:none}
  .songs-notes i{width:22px;height:22px}
}

html.noanim .songs-notes i,html.noanim .songs-blob,html.noanim .songs.playing .eq b{animation:none}
@media (prefers-reduced-motion:reduce){
  .songs-notes i,.songs-blob,.songs.playing .eq b{animation:none}
  .song,.songs-screen{transition:none}
}
@media (max-width:600px){.songs-notes .n2,.songs-notes .n4,.songs-notes .n5{display:none}}

/* Tap for sound: the songs play muted by themselves; one tap starts the song again with sound */
.songs-unmute{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  display:inline-flex;align-items:center;gap:10px;padding:14px 22px;border:0;border-radius:999px;cursor:pointer;
  background:var(--gold);color:var(--navy);font:600 1.02rem/1 var(--f-quiet);
  box-shadow:0 10px 30px rgba(15,36,54,.35);animation:unmutePulse 2.2s ease-in-out infinite}
.songs-unmute[hidden]{display:none}
.songs-unmute svg{width:22px;height:22px;fill:currentColor}
.songs-unmute:hover{background:#fff}
.songs-unmute:focus-visible{outline:3px solid #fff;outline-offset:3px}
@keyframes unmutePulse{0%,100%{box-shadow:0 10px 30px rgba(15,36,54,.35),0 0 0 0 rgba(253,215,154,.7)}
  50%{box-shadow:0 10px 30px rgba(15,36,54,.35),0 0 0 14px rgba(253,215,154,0)}}
html.noanim .songs-unmute{animation:none}
@media (prefers-reduced-motion:reduce){.songs-unmute{animation:none}}
/* one line always; on a phone it sits in the top corner so the hands in the rhymes stay clear */
.songs-unmute{white-space:nowrap}
@media (max-width:600px){
  .songs-unmute{left:12px;top:12px;transform:none;padding:9px 14px;gap:7px;font-size:.88rem}
  .songs-unmute svg{width:18px;height:18px}
}