/* "Pick how it looks": a live mock of the app in its five layouts, Side by Side first. Plain CSS, light on phones. */
.lay-sec { --acc: #2bf08a; --c1: #4ff08a; --c2: #46dfe0; padding-top: clamp(40px, 7vw, 90px); }
.lay-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0 auto 26px; max-width: 760px; }
.lay-tab { appearance: none; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.05); color: rgba(255, 255, 255, 0.78); font: inherit; font-weight: 700; font-size: 0.95rem; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: background 200ms, color 200ms, border-color 200ms, transform 200ms; }
.lay-tab:hover { background: rgba(255, 255, 255, 0.1); transform: translateY(-1px); }
.lay-tab[aria-selected="true"] { background: linear-gradient(135deg, #2bf08a, #46dfe0); color: #04130c; border-color: transparent; box-shadow: 0 8px 26px -8px rgba(43, 240, 138, 0.6); }

.lay-stage { position: relative; max-width: 1040px; margin: 0 auto; aspect-ratio: 16 / 9.6; border-radius: 26px; overflow: hidden; background: #0b0c10; border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, 0.8), 0 0 70px -24px rgba(43, 240, 138, 0.35); isolation: isolate; transition: background 600ms ease; }
.lay-bg { position: absolute; inset: -12%; z-index: -1; background: url("img/layout-cover.jpg") center / cover; filter: blur(60px) saturate(1.6) brightness(0.5); opacity: 0; transition: opacity 600ms ease; }
.lay-stage[data-lay="side"] .lay-bg, .lay-stage[data-lay="immersive"] .lay-bg { opacity: 1; }
.lay-stage[data-lay="readalong"] { background: #2b6f73; }
.lay-win { position: absolute; inset: 0; display: flex; flex-direction: column; padding: clamp(14px, 3vw, 30px); color: #fff; }

.lay-top { display: flex; align-items: center; gap: 10px; font-size: clamp(11px, 1.3vw, 14px); font-weight: 700; }
.lay-top img { width: 26px; height: 26px; border-radius: 8px; }
.lay-pill { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.14); display: inline-flex; align-items: center; gap: 6px; }
.lay-pill i { width: 8px; height: 8px; border-radius: 50%; background: #1db954; box-shadow: 0 0 8px #1db954; }

.lay-main { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr); align-items: center; gap: clamp(18px, 4vw, 54px); transition: gap 500ms ease; }
.lay-left { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.lay-cover { width: min(100%, 300px); height: auto; aspect-ratio: 1; border-radius: 22px; object-fit: cover; box-shadow: 0 30px 60px -22px rgba(0, 0, 0, 0.8); transition: width 500ms ease, border-radius 500ms ease; }
.lay-title { font-size: clamp(16px, 2.2vw, 26px); font-weight: 800; letter-spacing: -0.01em; }
.lay-artist { font-size: clamp(11px, 1.4vw, 15px); color: rgba(255, 255, 255, 0.66); margin-top: -6px; }
.lay-prog { display: block; width: 100%; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.lay-prog i { display: block; height: 100%; width: 38%; border-radius: 2px; background: #fff; animation: layProg 26s linear infinite; }
@keyframes layProg { from { width: 4%; } to { width: 96%; } }

.lay-view { position: relative; height: 100%; max-height: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%, #000 82%, transparent 100%); }
.lay-track { position: relative; transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1); will-change: transform; }
.lay-line { padding: 0.35em 0; font-weight: 800; line-height: 1.12; letter-spacing: -0.015em; font-size: clamp(20px, 3.6vw, 44px); color: rgba(255, 255, 255, 0.5); opacity: max(0.16, calc(1 - var(--d, 3) * 0.2)); transition: opacity 500ms ease, color 400ms ease; text-shadow: 0 2px 20px rgba(0, 0, 0, 0.4); }
.lay-line .w { display: inline-block; margin-right: 0.26em; }
.lay-line.cur { color: rgba(255, 255, 255, 0.34); opacity: 1; }
.lay-line.cur .w { animation: layWord 0.6s ease forwards; animation-delay: calc(var(--i) * 0.32s + 0.15s); }
@keyframes layWord { 0% { color: rgba(255, 255, 255, 0.34); } 100% { color: #fff; text-shadow: 0 0 22px rgba(43, 240, 138, 0.55); transform: translateY(-0.03em); } }
.lay-line.past { color: rgba(255, 255, 255, 0.55); }

/* ---- Side by Side: cover on the left, big lyrics on the right (the default) ---- */
.lay-stage[data-lay="side"] .lay-line { text-align: left; padding-right: 8%; }

/* ---- the others: one column, a small cover row on top ---- */
.lay-stage:not([data-lay="side"]) .lay-main { grid-template-columns: 1fr; align-content: stretch; align-items: stretch; grid-template-rows: auto 1fr; gap: 6px; }
.lay-stage:not([data-lay="side"]) .lay-left { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.lay-stage:not([data-lay="side"]) .lay-cover { width: 54px; border-radius: 12px; }
.lay-stage:not([data-lay="side"]) .lay-title { font-size: 15px; }
.lay-stage:not([data-lay="side"]) .lay-artist { margin: 0; }
.lay-stage:not([data-lay="side"]) .lay-prog { flex-basis: 100%; max-width: 360px; }
.lay-stage[data-lay="scroll"] .lay-line, .lay-stage[data-lay="classic"] .lay-line, .lay-stage[data-lay="immersive"] .lay-line { text-align: center; }
.lay-stage[data-lay="scroll"] .lay-line { font-size: clamp(16px, 2.6vw, 30px); }
.lay-stage[data-lay="classic"] .lay-line { font-size: clamp(16px, 2.4vw, 28px); opacity: 0; }
.lay-stage[data-lay="classic"] .lay-line[style*="--d: 1"], .lay-stage[data-lay="classic"] .lay-line.cur { opacity: 0.5; }
.lay-stage[data-lay="classic"] .lay-line.cur { opacity: 1; font-size: clamp(20px, 3.2vw, 38px); }
.lay-stage[data-lay="immersive"] .lay-line { font-size: clamp(22px, 4.4vw, 54px); opacity: 0; }
.lay-stage[data-lay="immersive"] .lay-line[style*="--d: 1"], .lay-stage[data-lay="immersive"] .lay-line.cur { opacity: 0.45; }
.lay-stage[data-lay="immersive"] .lay-line.cur { opacity: 1; }
.lay-stage[data-lay="classic"] .lay-view, .lay-stage[data-lay="immersive"] .lay-view { -webkit-mask-image: none; mask-image: none; }

/* ---- Read Along: the album colour, bold lines, sung words white, the rest dark ---- */
.lay-stage[data-lay="readalong"] .lay-line { text-align: left; font-weight: 900; font-size: clamp(22px, 4vw, 48px); color: rgba(0, 0, 0, 0.5); text-shadow: none; }
.lay-stage[data-lay="readalong"] .lay-line.past { color: rgba(255, 255, 255, 0.82); }
.lay-stage[data-lay="readalong"] .lay-line.cur { color: rgba(0, 0, 0, 0.5); }
.lay-stage[data-lay="readalong"] .lay-line.cur .w { animation-name: layWordRA; }
@keyframes layWordRA { 0% { color: rgba(0, 0, 0, 0.5); } 100% { color: #fff; } }

.lay-note { text-align: center; margin: 20px auto 0; max-width: 640px; color: rgba(255, 255, 255, 0.62); font-size: 0.95rem; }
.lay-note b { color: #fff; }

@media (max-width: 720px) {
  .lay-stage { aspect-ratio: 4 / 5; }
  .lay-main { grid-template-columns: 1fr !important; grid-template-rows: auto 1fr; align-items: stretch; gap: 8px; }
  .lay-stage[data-lay="side"] .lay-left { flex-direction: row; align-items: center; gap: 12px; flex-wrap: wrap; }
  .lay-stage[data-lay="side"] .lay-cover { width: 76px; border-radius: 14px; }
  .lay-stage[data-lay="side"] .lay-prog { flex-basis: 100%; }
  .lay-bg { filter: blur(40px) saturate(1.5) brightness(0.5); }
}
@media (prefers-reduced-motion: reduce) { .lay-track, .lay-line, .lay-tab { transition: none; } .lay-line.cur .w { animation-duration: 0.01s; animation-delay: 0s; } .lay-prog i { animation: none; } }

/* Phones: no big blurred picture, no mask, no will-change. iPhones drop whole tiles of the page (blank areas) when big layers are blurred or masked, so this section stays flat and simple there. */
@media (max-width: 820px), (pointer: coarse) {
  .lay-bg { filter: none; inset: 0; background: radial-gradient(70% 60% at 25% 20%, rgba(43, 240, 138, 0.26), transparent 70%), radial-gradient(70% 60% at 85% 85%, rgba(124, 107, 255, 0.3), transparent 70%); }
  .lay-view { -webkit-mask-image: none; mask-image: none; }
  .lay-track { will-change: auto; }
  .lay-line { text-shadow: none; }
  .lay-stage { box-shadow: none; }
  .lay-cover { box-shadow: none; }
}

/* Phones get a picture of the Side by Side demo instead of the live one: nothing animated, nothing to go wrong in Safari. */
.lay-static { display: none; }
@media (max-width: 820px), (pointer: coarse) {
  .lay-tabs, .lay-stage { display: none !important; }
  .lay-static { display: block; width: 100%; max-width: 720px; height: auto; margin: 0 auto; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.14); }
}