/* ATLAS BEATS — v14.2 intro
   Desktop (html:not(.m-splash)): a three-second "film" of the site — a tunnel of covers flying past the camera, a light
   canvas, three floating scenes (player · radio · playlists) and the emblem landing in the middle; the exit zooms into the site.
   Phones (html.m-splash): emblem + wordmark + bar only, no canvas, no tunnel — instant and lag-free. */
.splash { position: fixed; inset: 0; z-index: 999; overflow: hidden; background: #06060b; display: grid; place-items: center; perspective: 1100px; transition: opacity .75s ease, visibility .75s, transform .75s cubic-bezier(.2, .7, .2, 1); }
.splash.hide { opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.14); }
.splash.hide.instant { transition: opacity .3s ease, visibility .3s; transform: none; }
.splash-bg { position: absolute; inset: 0; background: radial-gradient(70% 55% at 28% 18%, color-mix(in srgb, var(--c1) 34%, transparent), transparent 70%), radial-gradient(55% 55% at 76% 82%, color-mix(in srgb, var(--c2) 26%, transparent), transparent 70%), radial-gradient(40% 40% at 50% 50%, rgba(255, 255, 255, .04), transparent 70%); animation: spBgIn 1.2s ease both; }
@keyframes spBgIn { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: none; } }
.splash-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; mix-blend-mode: screen; }
.splash-fx[hidden] { display: none; }

/* ── cover tunnel ── */
.splash-rows { position: absolute; inset: 0; display: block; padding: 0; gap: 0; transform-style: preserve-3d; perspective: 900px; pointer-events: none; }
.splash-rows .splash-card { position: absolute; left: 50%; top: 50%; width: 180px; height: 180px; margin: -90px 0 0 -90px; min-height: 0; border-radius: 22px; overflow: hidden; background: linear-gradient(135deg, var(--s1), var(--s2)); box-shadow: 0 30px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .08) inset; opacity: 0; will-change: transform, opacity; animation: spFly var(--d, 2.6s) cubic-bezier(.3, .1, .6, 1) var(--dl, 0s) both; transform: translate3d(var(--x), var(--y), -2200px) rotateZ(var(--r)); }
.splash-rows .splash-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .92; }
.splash-rows .splash-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(6, 6, 11, .85)); }
.splash-rows .splash-card .em { position: absolute; top: 12px; inset-inline-start: 12px; font-size: 26px; }
.splash-rows .splash-card .nm { position: absolute; bottom: 12px; inset-inline: 12px; z-index: 1; font-weight: 800; font-size: 13px; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.splash-rows .splash-card .nm small { display: block; font-weight: 500; font-size: 10.5px; color: rgba(255, 255, 255, .7); }
@keyframes spFly {
  0% { opacity: 0; transform: translate3d(var(--x), var(--y), -2200px) rotateZ(var(--r)); }
  18% { opacity: .95; }
  88% { opacity: .9; }
  100% { opacity: 0; transform: translate3d(calc(var(--x) * 2.2), calc(var(--y) * 2.2), 520px) rotateZ(calc(var(--r) * -1)); }
}

/* ── scenes (mini site views) ── */
.splash-scenes { position: absolute; inset: 0; pointer-events: none; transform-style: preserve-3d; }
.sp-scene { position: absolute; width: 360px; border-radius: 26px; padding: 18px; background: rgba(12, 10, 24, .62); border: 1px solid rgba(255, 255, 255, .12); box-shadow: 0 40px 120px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .03) inset; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; will-change: transform, opacity; color: #fff; font-family: var(--font-en); direction: ltr; text-align: left; }
.sp-scene .sp-h { display: flex; align-items: center; gap: 8px; font-size: 10.5px; font-weight: 900; letter-spacing: .16em; color: rgba(255, 255, 255, .65); margin-bottom: 12px; }
.sp-scene .sp-h i { width: 8px; height: 8px; border-radius: 50%; background: var(--c1); box-shadow: 0 0 12px var(--c1); font-style: normal; }
.sp-scene .sp-h i.red { background: #ef4444; box-shadow: 0 0 12px #ef4444; }
.sp-scene .sp-h em { margin-inline-start: auto; font-style: normal; padding: 2px 8px; border-radius: 99px; background: rgba(255, 255, 255, .1); font-size: 9.5px; letter-spacing: .1em; }
/* scene 1: now playing */
.sp-np { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: center; }
.sp-disc { width: 96px; height: 96px; border-radius: 50%; background: linear-gradient(135deg, var(--c1), var(--c2)); overflow: hidden; position: relative; box-shadow: 0 16px 40px rgba(0, 0, 0, .5); animation: spSpin 6s linear infinite; }
.sp-disc img { width: 100%; height: 100%; object-fit: cover; }
.sp-disc::after { content: ''; position: absolute; inset: 50%; width: 18px; height: 18px; margin: -9px; border-radius: 50%; background: #06060b; box-shadow: 0 0 0 3px rgba(255, 255, 255, .15); }
@keyframes spSpin { to { transform: rotate(1turn); } }
.sp-np b { display: block; font-size: 17px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-np span { display: block; font-size: 12px; color: rgba(255, 255, 255, .65); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; margin-top: 12px; }
.sp-bar i { display: block; height: 100%; width: 0; border-radius: 4px; background: linear-gradient(90deg, var(--c2), var(--c1), #fff); animation: spBar 2.4s linear .4s both; }
@keyframes spBar { to { width: 72%; } }
.sp-ctl { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.sp-ctl i { width: 30px; height: 30px; border-radius: 50%; background: rgba(255, 255, 255, .1); }
.sp-ctl i.big { width: 42px; height: 42px; background: #fff; position: relative; }
.sp-ctl i.big::after { content: ''; position: absolute; left: 16px; top: 12px; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent #06060b; }
.sp-eq { display: flex; align-items: flex-end; gap: 3px; height: 22px; margin-inline-start: auto; }
.sp-eq i { width: 4px; border-radius: 3px; background: linear-gradient(180deg, var(--c1), var(--c2)); height: 100%; transform-origin: bottom; animation: spEq .8s ease-in-out infinite alternate; }
.sp-eq i:nth-child(2) { animation-delay: .15s; } .sp-eq i:nth-child(3) { animation-delay: .3s; } .sp-eq i:nth-child(4) { animation-delay: .45s; } .sp-eq i:nth-child(5) { animation-delay: .6s; }
@keyframes spEq { from { transform: scaleY(.25); } to { transform: scaleY(1); } }
/* scene 2: radio */
.sp-rd { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.sp-rd span { aspect-ratio: 1.25; border-radius: 14px; background: linear-gradient(135deg, var(--s1), var(--s2)); display: grid; place-items: center; font-size: 22px; position: relative; overflow: hidden; }
.sp-rd span::after { content: 'LIVE'; position: absolute; top: 6px; left: 6px; font-size: 7px; font-weight: 900; letter-spacing: .14em; padding: 2px 5px; border-radius: 99px; background: rgba(185, 28, 28, .95); }
.sp-rd small { grid-column: 1 / -1; font-size: 11.5px; color: rgba(255, 255, 255, .7); margin-top: 2px; }
/* scene 3: playlists */
.sp-pl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.sp-pl span { aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--s1), var(--s2)); display: grid; place-items: center; font-size: 22px; position: relative; }
.sp-pl span img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sp-pl b { grid-column: 1 / -1; font-size: 13px; font-weight: 800; margin-top: 4px; }
.sp-pl b small { font-weight: 500; color: rgba(255, 255, 255, .65); margin-inline-start: 6px; font-size: 11.5px; }
/* scene choreography */
.sp-scene.s1 { left: calc(50% + 230px); top: calc(50% - 300px); animation: spScene1 2.9s cubic-bezier(.2, .8, .2, 1) .35s both; }
.sp-scene.s2 { left: calc(50% - 600px); top: calc(50% + 60px); animation: spScene2 2.5s cubic-bezier(.2, .8, .2, 1) .9s both; }
.sp-scene.s3 { left: calc(50% + 260px); top: calc(50% + 120px); animation: spScene3 2.2s cubic-bezier(.2, .8, .2, 1) 1.45s both; }
@keyframes spScene1 { 0% { opacity: 0; transform: translate3d(160px, 40px, -500px) rotateY(-26deg) rotateX(8deg); } 22% { opacity: 1; transform: translate3d(0, 0, 0) rotateY(-14deg) rotateX(4deg); } 78% { opacity: 1; transform: translate3d(-30px, -20px, 120px) rotateY(-10deg) rotateX(2deg); } 100% { opacity: 0; transform: translate3d(-80px, -60px, 420px) rotateY(-6deg); } }
@keyframes spScene2 { 0% { opacity: 0; transform: translate3d(-180px, 60px, -500px) rotateY(26deg) rotateX(-6deg); } 24% { opacity: 1; transform: translate3d(0, 0, 0) rotateY(16deg) rotateX(-3deg); } 76% { opacity: 1; transform: translate3d(30px, -24px, 120px) rotateY(12deg); } 100% { opacity: 0; transform: translate3d(90px, -70px, 420px) rotateY(6deg); } }
@keyframes spScene3 { 0% { opacity: 0; transform: translate3d(0, 200px, -400px) rotateX(18deg) rotateY(-12deg); } 26% { opacity: 1; transform: translate3d(0, 0, 0) rotateX(6deg) rotateY(-10deg); } 76% { opacity: 1; transform: translate3d(-20px, -30px, 140px) rotateX(3deg) rotateY(-8deg); } 100% { opacity: 0; transform: translate3d(-40px, -90px, 460px); } }

/* ── centre ── */
.splash-center { position: relative; z-index: 3; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 36px 48px 30px; border-radius: 36px; background: rgba(6, 6, 11, .5); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); border: 1px solid rgba(255, 255, 255, .1); box-shadow: 0 40px 120px rgba(0, 0, 0, .6), 0 0 80px color-mix(in srgb, var(--c1) 18%, transparent); animation: spCenter 1.1s cubic-bezier(.2, .8, .2, 1) .1s both; max-width: min(92vw, 520px); }
@keyframes spCenter { from { opacity: 0; transform: scale(.82) translateY(20px); filter: blur(8px); } to { opacity: 1; transform: none; filter: none; } }
.splash-halo { position: absolute; left: 50%; top: 86px; width: 240px; height: 240px; margin-left: -120px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c1) 55%, transparent), transparent 62%); filter: blur(10px); pointer-events: none; animation: spHalo 2.2s ease-in-out infinite alternate; }
@keyframes spHalo { from { transform: scale(.9); opacity: .6; } to { transform: scale(1.12); opacity: 1; } }
.splash-logo { position: relative; width: 132px; height: 132px; border-radius: 50%; object-fit: cover; box-shadow: 0 20px 60px color-mix(in srgb, var(--c1) 50%, transparent), 0 0 0 1px rgba(255, 255, 255, .12); animation: spLogo 1.4s cubic-bezier(.2, .8, .2, 1) .15s both, logoFloat 4s ease-in-out 1.5s infinite; }
@keyframes spLogo { 0% { opacity: 0; transform: scale(.4) rotate(-30deg); filter: blur(10px) brightness(2); } 60% { opacity: 1; filter: blur(0) brightness(1.4); } 100% { transform: none; filter: none; } }
.splash .wordmark.xl { animation: spWm 1s cubic-bezier(.2, .8, .2, 1) .5s both; }
.splash .wordmark.xl .wm { letter-spacing: .3em; animation: spTrack 1.6s cubic-bezier(.2, .8, .2, 1) .5s both; }
@keyframes spWm { from { opacity: 0; transform: translateY(14px); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes spTrack { from { letter-spacing: .5em; } to { letter-spacing: .14em; } }
.splash-tag { font-size: 13px; color: var(--muted); letter-spacing: .5px; animation: spWm .8s ease .95s both; }
.splash-count { display: flex; align-items: baseline; gap: 6px; font-size: 13px; color: var(--muted); animation: spWm .8s ease 1.15s both; }
.splash-count .num { font-size: 26px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.splash-bar { width: 240px; height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; margin-top: 4px; animation: spWm .6s ease 1.1s both; }
.splash-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--c2), var(--c1), #fff); transition: width .3s linear; box-shadow: 0 0 12px color-mix(in srgb, var(--c1) 70%, transparent); }
.splash-skip { margin-top: 6px; font-size: 12px; font-weight: 700; color: var(--muted); padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: transparent; cursor: pointer; animation: spWm .8s ease 1.6s both; }
.splash-skip:hover { color: #fff; background: var(--glass-2); }

/* ── phones: light and instant ── */
html.m-splash .splash { perspective: none; transition: opacity .45s ease, visibility .45s; }
html.m-splash .splash.hide { transform: none; }
html.m-splash .splash-bg { animation: none; }
html.m-splash .splash-fx, html.m-splash .splash-rows, html.m-splash .splash-scenes, html.m-splash .splash-halo { display: none; }
html.m-splash .splash-center { padding: 28px 24px 24px; border-radius: 30px; gap: 8px; backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(6, 6, 11, .35); box-shadow: none; animation: spMIn .5s ease both; }
@keyframes spMIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html.m-splash .splash-logo { width: 104px; height: 104px; animation: spMLogo .7s cubic-bezier(.2, .8, .2, 1) both; box-shadow: 0 16px 44px color-mix(in srgb, var(--c1) 45%, transparent); }
@keyframes spMLogo { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
html.m-splash .splash .wordmark.xl, html.m-splash .splash .wordmark.xl .wm, html.m-splash .splash-tag, html.m-splash .splash-count, html.m-splash .splash-bar, html.m-splash .splash-skip { animation: spMIn .5s ease .15s both; letter-spacing: normal; }
html.m-splash .splash-bar { width: 200px; }

/* reduce motion / lite: no film at all */
html.reduce-motion .splash-rows, html.reduce-motion .splash-scenes, html.reduce-motion .splash-fx, html.reduce-motion .splash-halo, html.lite .splash-rows, html.lite .splash-scenes, html.lite .splash-fx { display: none; }
html.reduce-motion .splash-center, html.reduce-motion .splash-logo, html.reduce-motion .splash .wordmark.xl, html.reduce-motion .splash .wordmark.xl .wm, html.reduce-motion .splash-tag, html.reduce-motion .splash-count, html.reduce-motion .splash-bar, html.reduce-motion .splash-skip { animation: none; }
@media (max-width: 1100px) { .sp-scene { width: 300px; } .sp-scene.s1 { left: calc(50% + 150px); } .sp-scene.s2 { left: calc(50% - 470px); } .sp-scene.s3 { left: calc(50% + 180px); } }

/* ── v14.4: the front door — after the film the centre card turns into a two-way gate: ATLAS BEATS (playlists) or ATLAS RADIO.
   The remembered choice carries a countdown ring and enters by itself; any pointer or key press pauses the countdown. ── */
.splash.gate .splash-rows, .splash.gate .splash-scenes, .splash.gate .splash-fx { opacity: .18; transition: opacity .6s ease; }
.splash.gate .splash-count, .splash.gate .splash-bar { display: none; }
.splash.gate .splash-center { max-width: min(94vw, 720px); padding-bottom: 26px; }
.splash-gate { display: grid; gap: 14px; justify-items: center; width: 100%; animation: spGate .6s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes spGate { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
.sg-title { font-size: 13px; font-weight: 800; letter-spacing: .4px; color: var(--muted); text-transform: uppercase; }
.sg-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; width: 100%; }
.sg-btn { position: relative; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .12); background: rgba(255, 255, 255, .05); color: #fff; font: inherit; text-align: start; cursor: pointer; overflow: hidden; isolation: isolate; transition: transform .25s cubic-bezier(.2, .8, .2, 1), border-color .25s, background .25s, box-shadow .25s; }
.sg-btn::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, var(--g1), var(--g2)); opacity: .14; transition: opacity .3s; }
.sg-btn.sg-pl { --g1: #7c3aed; --g2: #3b82f6; }
.sg-btn.sg-rd { --g1: #dc2626; --g2: #f59e0b; }
.sg-btn:hover, .sg-btn:focus-visible { transform: translateY(-3px); border-color: rgba(255, 255, 255, .3); box-shadow: 0 18px 50px color-mix(in srgb, var(--g1) 40%, transparent); outline: none; }
.sg-btn:hover::before, .sg-btn:focus-visible::before, .sg-btn.def::before { opacity: .3; }
.sg-btn.def { border-color: color-mix(in srgb, var(--g1) 70%, #fff 20%); box-shadow: 0 0 0 1px color-mix(in srgb, var(--g1) 50%, transparent), 0 16px 44px color-mix(in srgb, var(--g1) 35%, transparent); }
.sg-ic { position: relative; flex: none; width: 56px; height: 56px; border-radius: 18px; display: grid; place-items: center; background: linear-gradient(135deg, var(--g1), var(--g2)); box-shadow: 0 10px 26px color-mix(in srgb, var(--g1) 45%, transparent); }
.sg-ic .i { width: 26px; height: 26px; color: #fff; }
.sg-live { position: absolute; top: -4px; inset-inline-end: -4px; width: 14px; height: 14px; border-radius: 50%; background: #ff3b3b; border: 2px solid #0b0a12; box-shadow: 0 0 0 0 rgba(255, 59, 59, .7); animation: sgLive 1.4s ease-out infinite; }
@keyframes sgLive { to { box-shadow: 0 0 0 10px rgba(255, 59, 59, 0); } }
.sg-tx { display: grid; gap: 4px; min-width: 0; }
.sg-tx b { font-size: 17px; font-weight: 800; letter-spacing: -.2px; }
.sg-tx small { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.sg-ring { position: absolute; inset-inline-end: 12px; top: 12px; width: 26px; height: 26px; opacity: 0; transition: opacity .3s; }
.sg-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.sg-ring circle { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 113; stroke-dashoffset: 0; }
.sg-btn.def .sg-ring { opacity: .9; }
.sg-btn.def .sg-ring circle { animation: sgRing var(--sg-t, 6s) linear forwards; }
.splash-gate.paused .sg-ring { opacity: 0; }
@keyframes sgRing { to { stroke-dashoffset: 113; } }
.sg-hint { font-size: 12.5px; color: var(--muted); min-height: 18px; font-variant-numeric: tabular-nums; }
html.m-splash .splash.gate .splash-center { width: min(94vw, 420px); padding: 22px 16px 20px; }
html.m-splash .sg-row { grid-template-columns: 1fr; gap: 10px; }
html.m-splash .sg-btn { padding: 13px 14px; border-radius: 20px; }
html.m-splash .sg-ic { width: 48px; height: 48px; border-radius: 15px; }
html.m-splash .sg-tx b { font-size: 15.5px; }
html.m-splash .splash.gate .splash-logo { width: 72px; height: 72px; }
html.m-splash .splash.gate .splash-tag { display: none; }
@media (max-height: 640px) { .splash.gate .splash-logo { width: 72px; height: 72px; } .splash.gate .splash-tag { display: none; } }
html.reduce-motion .splash-gate, html.reduce-motion .sg-live, html.reduce-motion .sg-btn.def .sg-ring circle { animation: none; }