/* ==========================================================================
   Radio Dervishi — faqja e player-it (app/views/radio.php)
   Gjendja e player-it vjen nga atributi data-state te <main>:
   wait, idle, loading, playing, error, empty (e vendos assets/js/radio.js).
   ========================================================================== */

@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/cormorant-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/cormorant-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400 700; font-display: swap;
  src: url("../fonts/cormorant-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  color-scheme: dark;
  --green-950: #05150f;
  --green-900: #08201a;
  --gold-500: #c39a3b;
  --gold-400: #d6b566;
  --gold-300: #e7d19b;
  --ink: #f4f0e6;
  --text: #c5cfc8;
  --muted: #8b9c93;
  --line: rgba(214, 181, 102, .2);
  --live: #e2604d;

  --serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Cg fill='none' stroke='%23d6b566' stroke-width='1'%3E%3Cpath d='M78 48l-8.800 8.800v12.400H56.800L48 78l-8.800-8.800H26.800V56.800L18 48l8.800-8.800V26.800h12.400L48 18l8.800 8.800h12.400v12.400z'/%3E%3Cpath d='M48 0v18M48 78v18M0 48h18M78 48h18M0 0l26.800 26.800M96 0L69.200 26.800M0 96l26.800-26.800M96 96L69.200 69.200'/%3E%3Ccircle cx='48' cy='48' r='9'/%3E%3C/g%3E%3C/svg%3E");
}

/* ---- base ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; min-height: 100dvh; display: grid; grid-template-rows: auto 1fr auto; font-family: var(--sans); font-size: 1rem; line-height: 1.6;
  color: var(--text); background: var(--green-950); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
img { max-width: 100%; height: auto; }
p { margin: 0; }
a { color: var(--gold-300); text-decoration: none; transition: color .2s; }
a:hover { color: #fff; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 3px; border-radius: 6px; }
.icon { flex: none; display: block; }

.stage { position: fixed; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(1100px 760px at 50% -8%, #17573d 0%, #0b2c21 46%, var(--green-950) 100%); }
.stage::before { content: ""; position: absolute; inset: 0; background-image: var(--pattern); background-size: 96px 96px; opacity: .07;
  -webkit-mask-image: radial-gradient(circle at 50% 30%, transparent 0, #000 70%); mask-image: radial-gradient(circle at 50% 30%, transparent 0, #000 70%); }
.stage::after { content: ""; position: absolute; left: 50%; top: 250px; width: 640px; height: 640px; margin: -320px 0 0 -320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(214, 181, 102, .17), transparent 62%); }

/* ---- top and bottom ------------------------------------------------------ */
.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem clamp(1rem, 4vw, 2.2rem); }
.top__brand img { display: block; width: clamp(150px, 40vw, 212px); }
.top__links { display: flex; align-items: center; gap: 1rem; }
.top__site { display: inline-flex; align-items: center; gap: .4rem; font-size: .84rem; font-weight: 500; color: rgba(255, 255, 255, .76); }
.langs { display: flex; border: 1px solid rgba(255, 255, 255, .22); border-radius: 999px; overflow: hidden; }
.langs a { padding: .16rem .64rem; font-size: .72rem; font-weight: 600; letter-spacing: .08em; color: rgba(255, 255, 255, .76); }
.langs a.is-active, .langs a.is-active:hover { background: var(--gold-500); color: var(--green-950); }

.foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .3rem 1.6rem; padding: 1.1rem 1rem calc(1.1rem + env(safe-area-inset-bottom, 0px)); font-size: .82rem; color: var(--muted); text-align: center; }
.foot a { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; }

/* ---- the player ---------------------------------------------------------- */
.radio { display: grid; justify-items: center; align-content: center; width: 100%; max-width: 540px; margin: 0 auto; padding: .6rem clamp(1rem, 5vw, 1.6rem) 1.6rem; text-align: center; }

.disc { position: relative; display: grid; place-items: center; width: clamp(150px, 40vw, 208px); aspect-ratio: 1; margin-bottom: 1.1rem; }
.disc img { position: relative; width: 78%; filter: drop-shadow(0 16px 36px rgba(0, 0, 0, .55)); }
.disc__ring { position: absolute; inset: 0; border-radius: 50%; border: 1px dashed rgba(214, 181, 102, .5); animation: spin 70s linear infinite; }
.disc__wave { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--gold-400); opacity: 0; }
[data-state="playing"] .disc__wave { animation: wave 3.3s ease-out infinite; }
[data-state="playing"] .disc__wave:nth-child(2) { animation-delay: 1.1s; }
[data-state="playing"] .disc__wave:nth-child(3) { animation-delay: 2.2s; }
[data-state="playing"] .disc__ring { animation-duration: 24s; border-color: rgba(214, 181, 102, .8); }

.onair { display: inline-flex; align-items: center; gap: .55rem; font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-400); }
.onair i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(226, 96, 77, .6); animation: pulse 2s ease-out infinite; }
h1 { margin: .35rem 0 0; font-family: var(--serif); font-size: clamp(2.7rem, 10vw, 4rem); font-weight: 600; line-height: 1.02; letter-spacing: -.01em; color: #fff; }
h1 span { font-style: italic; color: var(--gold-400); }
.lead { margin-top: .5rem; }

.play { position: relative; display: grid; place-items: center; width: 92px; height: 92px; margin: 1.5rem 0 .75rem; padding: 0; border: 0; border-radius: 50%; color: var(--green-950);
  background: linear-gradient(160deg, var(--gold-300), var(--gold-500)); box-shadow: 0 14px 34px rgba(195, 154, 59, .36), 0 0 0 9px rgba(214, 181, 102, .13); transition: transform .2s, box-shadow .2s, opacity .2s; }
.play:hover { transform: scale(1.05); box-shadow: 0 18px 40px rgba(195, 154, 59, .46), 0 0 0 11px rgba(214, 181, 102, .16); }
.play:active { transform: scale(.96); }
.play:disabled { opacity: .55; cursor: default; transform: none; }
.play__go { margin-left: 5px; }                      /* a triangle looks centred a little to the right of the middle */
.play__stop { display: none; }
[data-state="playing"] .play__go, [data-state="loading"] .play__go { display: none; }
[data-state="playing"] .play__stop, [data-state="loading"] .play__stop { display: block; }
.play::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 3px solid transparent; border-top-color: var(--gold-300); opacity: 0; transition: opacity .2s; }
[data-state="wait"] .play::after, [data-state="loading"] .play::after { opacity: 1; animation: spin .9s linear infinite; }

.status { min-height: 1.6em; font-size: .9rem; color: var(--muted); }
[data-state="error"] .status, .status--warn { color: #f1968c; }
[data-state="empty"] .status { max-width: 30ch; font-size: 1rem; color: var(--text); }

.now { width: 100%; margin-top: 1.4rem; padding: 1.05rem 1.2rem 1rem; border: 1px solid var(--line); border-radius: 18px; background: rgba(8, 32, 26, .66); box-shadow: 0 18px 44px rgba(0, 0, 0, .3);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-align: left; }
.now__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.now__label, .now__next span { flex: none; font-size: .68rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-400); }
.now__title { margin: .3rem 0 .85rem; font-family: var(--serif); font-size: clamp(1.45rem, 5.4vw, 1.8rem); font-weight: 600; line-height: 1.2; color: var(--ink); overflow-wrap: anywhere; }
.now__bar { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.now__bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold-500), var(--gold-300)); transform: scaleX(0); transform-origin: left; transition: transform 1s linear; }
.now__next { display: flex; align-items: baseline; gap: .7rem; margin-top: .95rem; padding-top: .75rem; border-top: 1px solid var(--line); font-size: .93rem; }
.now__next strong { min-width: 0; font-weight: 500; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.eq { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.eq i { width: 3px; height: 100%; border-radius: 2px; background: var(--gold-400); transform: scaleY(.2); transform-origin: bottom; }
[data-state="playing"] .eq i { animation: eq 1s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.6s; }
.eq i:nth-child(3) { animation-delay: -.2s; }
.eq i:nth-child(4) { animation-delay: -.8s; }
.eq i:nth-child(5) { animation-delay: -.4s; }

.vol { display: flex; align-items: center; gap: .8rem; width: min(100%, 300px); margin-top: 1.15rem; }
.vol button { flex: none; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: rgba(255, 255, 255, .04); color: var(--gold-300); transition: border-color .2s, color .2s; }
.vol button:hover { border-color: var(--gold-400); color: #fff; }
.vol__off, .is-muted .vol__on { display: none; }
.is-muted .vol__off { display: block; }
.vol input { --fill: 100%; flex: 1; min-width: 0; height: 26px; margin: 0; padding: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; }
.vol input::-webkit-slider-runnable-track { height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold-400) var(--fill), rgba(255, 255, 255, .16) var(--fill)); }
.vol input::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; margin-top: -6px; border: 0; border-radius: 50%; background: var(--gold-300); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.vol input::-moz-range-track { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, .16); }
.vol input::-moz-range-progress { height: 4px; border-radius: 4px; background: var(--gold-400); }
.vol input::-moz-range-thumb { width: 16px; height: 16px; border: 0; border-radius: 50%; background: var(--gold-300); box-shadow: 0 2px 6px rgba(0, 0, 0, .45); }
.is-muted .vol input { opacity: .45; }
.vol--fixed { width: auto; }                         /* phones that set the loudness only with their own buttons */

/* the browser did not let the radio start by itself: a tap anywhere on the page starts it */
.is-armed body { cursor: pointer; }

[data-state="empty"] .now, [data-state="empty"] .vol, [data-state="empty"] .play { display: none; }
[data-state="empty"] .status { margin-top: 1.4rem; }

/* the same soft cross-fade as between the site's pages, when arriving from or going back to them */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .25s; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(226, 96, 77, 0); } 100% { box-shadow: 0 0 0 0 rgba(226, 96, 77, 0); } }
@keyframes wave { from { transform: scale(1); opacity: .6; } to { transform: scale(1.6); opacity: 0; } }
@keyframes eq { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(1); } }

@media (max-width: 560px) {
  .top__site { display: none; }                      /* the logo and the link at the bottom lead to the same place */
  .disc { margin-bottom: .8rem; }
  .play { margin-top: 1.2rem; }
  .now { margin-top: 1.1rem; }
}
@media (max-height: 720px) {
  .disc { width: 132px; margin-bottom: .8rem; }
  .play { width: 80px; height: 80px; margin-top: 1.1rem; }
  .now { margin-top: 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .disc__ring, .disc__wave, .onair i, .eq i, .now__bar i { animation: none !important; transition: none; }
  [data-state="playing"] .eq i { transform: scaleY(.7); }
}