/* Effects use the same image coordinates and cover crop as .hero-scene. */
.hero > .hero-scene { background-image: url('/assets/isla-mortis-storm-base-v3.webp'); }
.hero-effects { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; pointer-events: none; }
.hero-vignette { z-index: 2; pointer-events: none; }
.panel-btn { background: linear-gradient(135deg, #80a343, #507d2c); color: #f3f7df; border-color: #a1c45f; }
.panel-btn span { font-size: 1.2rem; color: #e6f3bd; }
.hero-kicker { position: relative; z-index: 1; margin-bottom: 1rem; }
.hero-logo { margin-top: 0; }
.hero-actions { flex-wrap: wrap; }
.effects-toggle { position: absolute; bottom: 1.3rem; left: 1.3rem; z-index: 4; border: 1px solid var(--line); border-radius: 999px; padding: .5rem .8rem; color: #bac8bf; background: rgba(2, 7, 6, .75); font: inherit; font-size: .7rem; cursor: pointer; }
.effects-toggle[hidden] { display: none; }
.music-player { position: fixed; right: max(1.2rem, env(safe-area-inset-right)); bottom: max(1.2rem, env(safe-area-inset-bottom)); z-index: 40; display: flex; align-items: center; gap: .8rem; width: 278px; max-width: calc(100vw - 1.5rem); padding: .8rem; border: 1px solid rgba(167, 201, 87, .32); border-radius: 1rem; background: rgba(5, 16, 12, .94); box-shadow: 0 12px 42px #0008, inset 0 1px #ffffff06; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: var(--bone); }
.music-cover { flex: 0 0 56px; width: 56px; height: 56px; object-fit: contain; border-radius: .5rem; background: #020706; }
.music-info { flex: 1; min-width: 0; }
.music-info strong { display: block; font-size: .85rem; letter-spacing: .035em; }
.music-status { display: block; color: #a6b8ac; font-size: .65rem; margin-top: .1rem; }
.music-volume-label { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; color: var(--moss); }
.music-volume { width: 92px; height: 16px; margin: 0; accent-color: var(--moss); cursor: pointer; }
.music-toggle { flex: 0 0 44px; width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid #bed96b88; border-radius: 50%; color: #102014; background: #b7d46d; cursor: pointer; transition: background .2s; }
.music-toggle:hover { background: #d2e87a; }
.music-toggle .pause-icon, .music-player.is-playing .play-icon { display: none; }
.music-player.is-playing .pause-icon { display: block; }
.music-toggle:focus-visible, .music-volume:focus-visible, .effects-toggle:focus-visible { outline: 2px solid var(--acid); outline-offset: 4px; }
body > footer { padding-bottom: 8.5rem; }
@media (max-width: 700px) {
  .hero { min-height: 49rem; }
  .hero-content { padding-bottom: 6rem; }
  .hero-actions { gap: .7rem; }
  .music-player { right: max(.75rem, env(safe-area-inset-right)); bottom: max(.75rem, env(safe-area-inset-bottom)); width: 256px; gap: .65rem; padding: .65rem; }
  .scroll-cue { bottom: 7.5rem; }
  .effects-toggle { bottom: 7.5rem; left: .75rem; font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) { .hero-effects { display: none; } }