/* ============================================================
   雨声白噪音 · 巨大极简 hero
   ============================================================
   全屏暗色，一个巨大的圆按钮，别的都收着——按你说的"清新脱俗"、
   "复刻"那种一按就下雨的干净感觉。往下滑才是电台和站点清单。
*/
.gm-rain{
	position:relative;overflow:hidden;
	min-height:min(84vh,780px);
	margin:0 0 22px;border-radius:var(--gm-radius-lg);
	display:flex;flex-direction:column;align-items:center;justify-content:center;
	gap:26px;padding:60px 24px;text-align:center;
	background:
		radial-gradient(circle at 50% 0%,rgba(120,160,200,.16),transparent 55%),
		linear-gradient(180deg,#0a0f16 0%,#0c131c 55%,#0a0f16 100%);
	color:#eef3f7;
}

/* 雨丝：一批细线各自下落，透明度低，纯装饰，reduce-motion 时直接不转 */
.gm-rain__streaks{position:absolute;inset:0;pointer-events:none;opacity:.5}
.gm-rain__streaks i{
	position:absolute;top:-20%;width:1px;height:90px;
	background:linear-gradient(180deg,transparent,rgba(190,210,230,.5),transparent);
	animation:gmRainFall linear infinite;
}
@keyframes gmRainFall{
	0%{transform:translateY(-10%)}
	100%{transform:translateY(120vh)}
}

.gm-rain__body{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:22px;max-width:520px}
.gm-rain__eyebrow{margin:0;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:#9fb4c6}
.gm-rain__title{margin:0;font-size:clamp(26px,4vw,38px);font-weight:600;color:#fff}
.gm-rain__desc{margin:0;font-size:14px;line-height:1.75;color:#aebecb}

.gm-rain__btn{
	position:relative;width:clamp(148px,20vw,204px);height:clamp(148px,20vw,204px);
	border-radius:50%;border:1.5px solid rgba(238,243,247,.5);background:rgba(255,255,255,.04);
	color:#fff;cursor:pointer;display:flex;align-items:center;justify-content:center;
	transition:background .25s ease,border-color .25s ease,transform .15s ease;
}
.gm-rain__btn:hover{border-color:#fff;transform:translateY(-1px)}
.gm-rain__btn:active{transform:translateY(0) scale(.98)}
.gm-rain__btn svg{width:38%;height:38%}
.gm-rain__btn .gm-rain__icon-pause{display:none}
.gm-rain.is-playing .gm-rain__btn .gm-rain__icon-play{display:none}
.gm-rain.is-playing .gm-rain__btn .gm-rain__icon-pause{display:block}
.gm-rain.is-playing .gm-rain__btn{background:rgba(120,160,200,.22);border-color:rgba(158,190,214,.9)}

/* 播放时按钮外圈的呼吸涟漪，两圈错开时间，静止态完全不显示 */
.gm-rain__ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(158,190,214,.55);opacity:0;pointer-events:none}
.gm-rain.is-playing .gm-rain__ring{animation:gmRainRipple 3.2s ease-out infinite}
.gm-rain.is-playing .gm-rain__ring--b{animation-delay:1.6s}
@keyframes gmRainRipple{
	0%{transform:scale(1);opacity:.55}
	100%{transform:scale(1.55);opacity:0}
}

.gm-rain__status{margin:0;min-height:20px;font-size:13px;color:#c7d4de;letter-spacing:.02em}

/* 场景 tab：雨声 / 雨声+雷 / 篝火 / 海浪，来自真实 CC0 录音，不是合成——
   来源写在页面底部「音源说明」，不只是代码注释里 */
.gm-rain__tabs{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.gm-rain__tab{
	padding:7px 16px;border-radius:999px;border:1px solid rgba(238,243,247,.3);
	background:none;color:#c7d4de;font:13px/1 var(--gm-sans);cursor:pointer;transition:.18s;
}
.gm-rain__tab:hover{border-color:rgba(238,243,247,.6);color:#fff}
.gm-rain__tab.is-active{background:rgba(120,160,200,.22);border-color:rgba(158,190,214,.9);color:#fff}

.gm-rain.is-loading .gm-rain__btn{opacity:.6;cursor:wait}

.gm-rain__controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px;opacity:.55;transition:opacity .25s}
.gm-rain.is-playing .gm-rain__controls{opacity:1}
.gm-rain__vol{display:flex;align-items:center;gap:10px;font-size:12px;color:#9fb4c6}
.gm-rain__vol input[type="range"]{
	-webkit-appearance:none;appearance:none;width:120px;height:2px;border-radius:2px;
	background:rgba(238,243,247,.28);outline:none;
}
.gm-rain__vol input[type="range"]::-webkit-slider-thumb{
	-webkit-appearance:none;width:12px;height:12px;border-radius:50%;background:#eef3f7;cursor:pointer;
}
.gm-rain__vol input[type="range"]::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:#eef3f7;cursor:pointer}

.gm-rain__thunder{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;
	border:1px solid rgba(238,243,247,.28);background:none;color:#c7d4de;font:12px/1 var(--gm-sans);cursor:pointer}
.gm-rain__thunder.is-on{border-color:rgba(158,190,214,.8);color:#fff;background:rgba(120,160,200,.14)}

.gm-rain__hint{
	position:absolute;left:50%;bottom:18px;transform:translateX(-50%);
	display:flex;flex-direction:column;align-items:center;gap:6px;
	font-size:11px;letter-spacing:.08em;color:#7f92a2;
}
.gm-rain__hint svg{width:14px;height:14px;animation:gmRainBounce 1.8s ease-in-out infinite}
@keyframes gmRainBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}

.gm-rain__warn{position:relative;z-index:1;margin:-6px 0 0;font-size:12px;color:#e2b477}

@media (prefers-reduced-motion:reduce){
	.gm-rain__streaks i,.gm-rain__ring,.gm-rain__hint svg{animation:none !important}
}
@media (max-width:640px){
	.gm-rain{min-height:74vh;padding:44px 18px;gap:20px}
	.gm-rain__controls{gap:14px}
}