/* Valley Radio theme: the Myoho Valley look, in turquoise and deep blue. Loaded after style.css. */
:root{
  --night:#031428; --night-2:#062a4d; --plum:#0a4a73;
  --rose:#1fd1c8; --coral:#2aa8ff; --gold:#8ff2e3; --mint:#5cf0c8; --sky:#7cc4ff; --lilac:#a9c8ff; --teal:#12b5c9;
  --cream:#eefcff; --ink:#05223d; --muted:#b4d6ec;
  --sun:#ffd47a;
  --aurora:linear-gradient(100deg,#1fd1c8,#2aa8ff 32%,#8ff2e3 55%,#5cf0c8 78%,#7cc4ff);
}
body{background:radial-gradient(1200px 700px at 12% -8%,rgba(31,209,200,.22),transparent 60%),radial-gradient(900px 700px at 100% 35%,rgba(42,168,255,.20),transparent 60%),linear-gradient(180deg,#031428,#04223f 55%,#031428)}
.lead{color:#e0f6ff}
.eyebrow{color:var(--gold)}
.btn.primary{box-shadow:0 10px 30px -8px rgba(31,209,200,.6)}
.phero img{filter:hue-rotate(158deg) saturate(1.15) brightness(.95)}
.phero::after{background:linear-gradient(to bottom,rgba(3,20,40,.5),rgba(3,20,40,.55) 50%,var(--night))}
.topnav .brand img{border-radius:12px;box-shadow:0 0 18px rgba(31,209,200,.55)}
.footlogo{border-radius:20px}
.song,.station{background:rgba(124,196,255,.08);border-color:rgba(143,242,227,.22)}
.station h3,.rule h3{letter-spacing:.02em}
.eq i{background:var(--mint)}
.getradio .rule:nth-child(3n+3),.rules .rule[style*="--rose"]{color:var(--ink)}
.radiostrip{display:none}
/* gentle wave divider under heroes */
.phero::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:70px;z-index:0;background:
  url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'%3E%3Cpath d='M0 40c120-30 240-30 360 0s240 30 360 0 240-30 360 0 240 30 360 0v30H0z' fill='%23031428' fill-opacity='.9'/%3E%3C/svg%3E") bottom/100% 100% no-repeat}

/* ---- fig and mimosa leaves ---- */
.leaves{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.leaves .lf{position:absolute;opacity:.2;transform:rotate(var(--r,0deg));transform-origin:50% 90%;animation:leafsway 16s ease-in-out infinite alternate;filter:drop-shadow(0 6px 18px rgba(0,0,0,.25))}
.leaves .lf-mimosa{opacity:.3}
@keyframes leafsway{from{transform:rotate(calc(var(--r,0deg) - 4deg)) translateY(0)}to{transform:rotate(calc(var(--r,0deg) + 5deg)) translateY(-14px)}}
@media (prefers-reduced-motion:reduce){.leaves .lf{animation:none}}
@media (max-width:700px){.leaves .lf{opacity:.14}.leaves .lf-mimosa{opacity:.2}}
.embedbody .leaves,.embedbody .lookpick{display:none}

/* ---- five looks: fonts (the original is the default) ---- */
html[data-look="1"]{--serif:"Fraunces",Georgia,serif;--sans:"Outfit",system-ui,sans-serif}
html[data-look="2"]{--serif:"Playfair Display",Georgia,serif;--sans:"Nunito Sans",system-ui,sans-serif}
html[data-look="3"]{--serif:"Cormorant Garamond",Georgia,serif;--sans:"Karla",system-ui,sans-serif}
html[data-look="3"] h1,html[data-look="3"] h2{font-weight:700;letter-spacing:.005em}
html[data-look="3"] body{font-size:19px}
html[data-look="4"]{--serif:"DM Serif Display",Georgia,serif;--sans:"DM Sans",system-ui,sans-serif}
html[data-look="4"] h1,html[data-look="4"] h2,html[data-look="4"] h3{font-weight:400}
html[data-look="5"]{--serif:"Space Grotesk",system-ui,sans-serif;--sans:"Inter",system-ui,sans-serif}
html[data-look="5"] h1,html[data-look="5"] h2{letter-spacing:-.01em;font-weight:700}
/* looks also shift the leaves a little */
html[data-look="3"] .leaves .lf-mimosa{opacity:.42}
html[data-look="4"] .leaves .lf-fig{opacity:.32}
html[data-look="2"] .leaves{filter:hue-rotate(-25deg)}
html[data-look="5"] .leaves{filter:saturate(.7) brightness(1.1)}

/* ---- the look picker ---- */
.lookpick{position:fixed;left:14px;bottom:14px;z-index:60;font-family:var(--sans)}
.lookbtn{background:rgba(3,20,40,.85);color:var(--cream);border:1px solid rgba(143,242,227,.5);border-radius:999px;padding:9px 16px;font-weight:700;cursor:pointer;backdrop-filter:blur(8px)}
.lookpanel{margin-top:8px;background:rgba(3,20,40,.94);border:1px solid rgba(143,242,227,.35);border-radius:18px;padding:12px;width:min(280px,calc(100vw - 28px));display:grid;gap:6px;backdrop-filter:blur(10px)}
.lookpanel[hidden]{display:none}
.lookpanel p{font-size:.8rem;color:var(--muted);margin:0 0 4px}
.lookpanel button{display:flex;justify-content:space-between;align-items:center;gap:10px;text-align:left;background:rgba(124,196,255,.08);color:var(--cream);border:1px solid rgba(143,242,227,.18);border-radius:12px;padding:9px 12px;cursor:pointer}
.lookpanel button small{color:var(--muted);font-size:.72rem}
.lookpanel button.on{background:var(--aurora);color:var(--ink);border-color:transparent}
.lookpanel button.on small{color:var(--ink)}

/* ---- plant versions: only the chosen set shows ---- */
.leaves .set{display:none}
html[data-plants="1"] .leaves .set[data-set="1"],html[data-plants="2"] .leaves .set[data-set="2"],html[data-plants="3"] .leaves .set[data-set="3"],
html[data-plants="4"] .leaves .set[data-set="4"],html[data-plants="5"] .leaves .set[data-set="5"],html[data-plants="6"] .leaves .set[data-set="6"]{display:block}
.leaves .lf{opacity:.22}
.leaves .set[data-set="5"] .lf{filter:none}
.leaves .set[data-set="6"] .lf{transform-origin:50% 100%;animation-name:leafsway6}
@keyframes leafsway6{from{transform:rotate(calc(var(--r,0deg) - 2deg))}to{transform:rotate(calc(var(--r,0deg) + 3deg))}}
.leaves .pom{position:absolute;top:-14px;width:var(--s,6px);height:var(--s,6px);border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b8,#ffd47a);opacity:.55;animation:pomfall 14s linear infinite}
@keyframes pomfall{from{transform:translate(0,-10px) rotate(0)}50%{transform:translate(26px,52vh)}to{transform:translate(-14px,108vh) rotate(160deg)}}
@media (prefers-reduced-motion:reduce){.leaves .pom{animation:none;display:none}}
@media (max-width:700px){.leaves .set[data-set="2"] .lf,.leaves .set[data-set="4"] .lf{width:150px!important;height:150px!important}}

/* ---- language switcher ---- */
.langs{display:inline-flex;gap:2px;align-items:center;background:rgba(124,196,255,.1);border:1px solid rgba(143,242,227,.25);border-radius:999px;padding:3px}
.langs a{font-size:.74rem;font-weight:700;letter-spacing:.06em;text-decoration:none;padding:5px 9px;border-radius:999px;color:var(--muted)}
.langs a:hover{color:var(--cream)}
.langs a.on{background:var(--aurora);color:var(--ink)}
.embedbody .langs{display:none}
@media (max-width:520px){.langs a{padding:5px 7px}}