/* מספרת מיקי, "רדיו שנות ה־90": a cassette with spinning reels, a now-playing ticker, sides A and B, a broadcast schedule. */
:root {
  --bg: #1E1B2E; --panel: #2A2540; --cream: #FFF6E0; --pink: #FF4F9A; --teal: #2EC4B6; --yellow: #FFD166; --muted: #C9C2DD;
  --display: "Secular One", "Rubik Variable", system-ui, sans-serif; --font: "Rubik Variable", system-ui, sans-serif; --pad: clamp(18px, 5vw, 48px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; color: var(--cream); font: 400 17px/1.6 var(--font); -webkit-font-smoothing: antialiased;
  background: var(--bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' fill='none' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M14 30q10-12 20 0t20 0' stroke='%232EC4B6' opacity='.35'/%3E%3Cpath d='M110 40l14 24h-28z' stroke='%23FF4F9A' opacity='.3'/%3E%3Ccircle cx='40' cy='120' r='8' stroke='%23FFD166' opacity='.3'/%3E%3Cpath d='M112 126h26M125 113v26' stroke='%23FFF6E0' opacity='.15'/%3E%3C/svg%3E"); }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2 { font-family: var(--display); font-weight: 400; text-wrap: balance; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; top: -60px; inset-inline-start: 12px; padding: 10px 14px; background: var(--yellow); color: var(--bg); z-index: 9; }
.skip:focus { top: 12px; }
.demo { background: var(--pink); color: #fff; text-align: center; font-size: 13px; padding: 7px 16px; }

.top { display: flex; align-items: center; justify-content: space-between; max-width: 1100px; margin: 0 auto; padding: 18px var(--pad); }
.logo { font: 400 24px/1 var(--display); text-decoration: none; }
.logo b { font-weight: 400; color: var(--yellow); }
.onair { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--muted); }
.dot { width: 10px; height: 10px; border-radius: 50%; background: var(--pink); box-shadow: 0 0 0 4px rgb(255 79 154 / .25); }

.ticker { overflow: hidden; background: var(--yellow); color: var(--bg); font-weight: 700; padding: 9px 0; }
.ticker__in { display: flex; width: max-content; animation: tick 28s linear infinite; }
.ticker span { padding-inline: 28px; white-space: nowrap; }
@keyframes tick { to { transform: translateX(50%); } }

.hero { max-width: 1100px; margin: 0 auto; padding: 40px var(--pad) 72px; display: grid; gap: 26px; }
h1 { margin: 0; font-size: clamp(54px, 15vw, 120px); line-height: .95; }
h1 span { color: var(--teal); }
.lead { margin: 0; max-width: 32ch; font-size: clamp(18px, 2.3vw, 21px); color: var(--muted); }
.cassette { max-width: 420px; filter: drop-shadow(0 26px 30px rgb(0 0 0 / .45)); rotate: -4deg; }
.reel { transform-box: fill-box; transform-origin: center; animation: spin 3.2s linear infinite; }
.reel--b { animation-duration: 2.4s; }
@keyframes spin { to { rotate: 360deg; } }
.cta { display: flex; flex-wrap: wrap; gap: 12px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 0 24px; border-radius: 14px; font-weight: 700; font-size: 17px; text-decoration: none; transition: transform .15s ease; }
.btn:active { transform: scale(.96); }
.btn--play { background: var(--pink); color: #fff; box-shadow: 0 6px 0 #B3245F; }
.btn--play:active { box-shadow: 0 2px 0 #B3245F; transform: translateY(4px); }
.btn--line { box-shadow: inset 0 0 0 2px var(--cream); }
.tri { width: 0; height: 0; border-block: 9px solid transparent; border-inline-end: 14px solid currentColor; }
.score { margin: 0; color: var(--muted); }
.score b { color: var(--yellow); font-size: 22px; }

.side { max-width: 1100px; margin: 0 auto; padding: 64px var(--pad); border-top: 2px dashed rgb(255 246 224 / .2); }
.side__tag { display: inline-block; margin: 0 0 14px; padding: 4px 14px; border-radius: 6px; background: var(--teal); color: var(--bg); font-weight: 700; font-size: 14px; }
.side--b .side__tag { background: var(--pink); color: #fff; }
h2 { margin: 0 0 10px; font-size: clamp(36px, 8vw, 64px); line-height: 1; }
.sub { margin: 0 0 30px; color: var(--muted); }
.tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.tracks li { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: start; padding: 20px; border-radius: 16px; background: var(--panel); }
.no { font: 400 28px/1 var(--display); color: var(--yellow); }
.tracks p { margin: 0 0 6px; font-size: 18px; }
.tracks small { color: var(--muted); }
.big { margin: 0 0 22px; padding: 26px; border-radius: 18px; background: var(--cream); color: var(--bg); }
.big p { margin: 0 0 12px; font: 400 clamp(22px, 3.6vw, 30px)/1.35 var(--display); }
.big footer { font-size: 14px; color: #5A5370; }
.sched { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 520px; }
.sched li { display: flex; justify-content: space-between; padding: 14px 18px; border-radius: 12px; background: var(--panel); }
.sched li.off { opacity: .6; }
.sched b { font-weight: 600; }
.addr { color: var(--muted); }

.end { text-align: center; padding: 80px var(--pad) 90px; background: var(--panel); }
.end h2 { color: var(--yellow); }
.end p { margin: 0 0 26px; color: var(--muted); }
.foot { padding: 28px var(--pad) 110px; text-align: center; color: var(--muted); font-size: 14px; }
.foot p { margin: 4px 0; }
.sticky { position: fixed; inset-inline: 14px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 5; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; border-radius: 14px; background: var(--pink); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 6px 0 #B3245F, 0 18px 30px -10px rgb(0 0 0 / .6); }

@media (min-width: 820px) {
  .hero { grid-template-columns: 1.1fr .9fr; grid-template-areas: "h c" "l c" "b c" "s c"; align-items: center; column-gap: 40px; }
  h1 { grid-area: h; } .lead { grid-area: l; } .cta { grid-area: b; } .score { grid-area: s; } .cassette { grid-area: c; }
  .tracks { grid-template-columns: repeat(3, 1fr); }
  .tracks li { grid-template-columns: 1fr; }
}
@media (min-width: 900px) { .sticky { display: none; } .foot { padding-bottom: 32px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ticker__in, .reel { animation: none; } .btn { transition: none; } }