/* ==========================================================================
   THE OFFICIAL JAN SEDERLÖF FAN CLUB — styles.css
   ==========================================================================
   HOW THIS FILE IS ORGANIZED
   1. Design tokens (colors/fonts) — change the look of the WHOLE site here
   2. Base + accessibility resets
   3. Starfield background
   4. Page frame / container
   5. Header + title
   6. Nav bar
   7. Marquee ticker
   8. Content columns (main + sidebar)
   9. Widgets: visitor counter, join box, badges
   10. Footer
   11. Responsive (mobile)
   ========================================================================== */

/* ---------- 1. DESIGN TOKENS ---------- */
:root {
  --space-navy:      #05050f;
  --cream:            #fdf6e0;
  --hot-pink:         #ff36a0;
  --electric-cyan:    #00e5ff;
  --gold:             #ffd700;
  --link-blue:        #0000ee;
  --link-visited:     #551a8b;
  --ink:              #1a1a1a;
  --lcd-green:        #39ff14;

  --font-display: "Arial Black", "Arial Bold", Arial, sans-serif;
  --font-body:    "Times New Roman", Times, serif;
  --font-ui:      Arial, Helvetica, sans-serif;
  --font-mono:    "Courier New", Courier, monospace;

  --page-width: 780px;
}

/* ---------- 2. BASE + ACCESSIBILITY ---------- */
* { box-sizing: border-box; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--space-navy);
  background-image:
    radial-gradient(1px 1px at 10% 15%, #fff, transparent),
    radial-gradient(1px 1px at 25% 60%, #fff, transparent),
    radial-gradient(1px 1px at 40% 30%, var(--electric-cyan), transparent),
    radial-gradient(2px 2px at 60% 80%, #fff, transparent),
    radial-gradient(1px 1px at 75% 20%, #fff, transparent),
    radial-gradient(1px 1px at 85% 55%, var(--hot-pink), transparent),
    radial-gradient(1px 1px at 92% 85%, #fff, transparent),
    radial-gradient(2px 2px at 15% 90%, #fff, transparent),
    radial-gradient(1px 1px at 50% 10%, #fff, transparent),
    radial-gradient(1px 1px at 33% 45%, var(--gold), transparent),
    radial-gradient(1px 1px at 68% 12%, var(--hot-pink), transparent),
    radial-gradient(1px 1px at 5% 70%, var(--electric-cyan), transparent),
    radial-gradient(1px 1px at 18% 35%, #fff, transparent),
    radial-gradient(1px 1px at 45% 75%, #fff, transparent),
    radial-gradient(2px 2px at 55% 5%, #fff, transparent),
    radial-gradient(1px 1px at 62% 45%, var(--gold), transparent),
    radial-gradient(1px 1px at 78% 65%, #fff, transparent),
    radial-gradient(1px 1px at 88% 30%, var(--electric-cyan), transparent),
    radial-gradient(1px 1px at 95% 95%, #fff, transparent),
    radial-gradient(2px 2px at 8% 45%, #fff, transparent),
    radial-gradient(1px 1px at 30% 85%, var(--hot-pink), transparent),
    radial-gradient(1px 1px at 52% 55%, #fff, transparent);
  background-repeat: repeat;
  background-size: 300px 300px, 300px 300px, 300px 300px, 300px 300px, 300px 300px,
    300px 300px, 300px 300px, 300px 300px, 300px 300px, 220px 220px, 260px 260px,
    240px 240px, 190px 190px, 210px 210px, 170px 170px, 230px 230px, 200px 200px,
    250px 250px, 180px 180px, 220px 220px, 200px 200px, 160px 160px;
  animation: twinkle 6s linear infinite;
  padding: 24px 12px 60px;
}

@keyframes twinkle {
  0%, 100% { background-color: var(--space-navy); }
  50% { background-color: #0a0a1c; }
}

a { color: var(--link-blue); }
a:visited { color: var(--link-visited); }
a:hover { color: var(--hot-pink); }
a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 3px solid var(--electric-cyan);
  outline-offset: 2px;
}

img { max-width: 100%; display: block; }
figure { margin: 0; }

/* ---------- 4. PAGE FRAME ---------- */
.page {
  max-width: var(--page-width);
  margin: 0 auto;
}

/* ---------- 5. HEADER ---------- */
.site-header {
  position: relative;
  text-align: center;
  padding: 18px 12px 10px;
  background: transparent;
  border-bottom: 6px double var(--gold);
}

.site-title {
  margin: 0;
  display: inline-block;
  transform: rotate(-1deg);
}

.site-title img {
  display: block;
  width: clamp(240px, 70vw, 420px);
  max-width: 100%;
  height: auto;
  margin: 0 auto;
}

.site-tagline {
  font-family: var(--font-ui);
  font-size: 0.7rem;
  color: var(--cream);
  opacity: 0.65;
  margin: -6px 0 18px;
}

.site-subtitle {
  font-family: var(--font-ui);
  color: var(--cream);
  font-size: 0.85rem;
  margin: 6px 0 0;
  letter-spacing: 0.5px;
}

.site-subtitle strong {
  color: var(--electric-cyan);
}

/* ---------- 6. NAV ---------- */
.site-nav {
  background: transparent;
  padding: 8px 6px;
  text-align: center;
  border-bottom: 3px solid var(--hot-pink);
}

.site-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: 0.8rem;
  text-transform: uppercase;
}

.site-nav a {
  color: var(--electric-cyan);
  text-decoration: none;
  padding: 2px 4px;
}

.site-nav a:visited { color: var(--electric-cyan); }
.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--gold);
  text-decoration: underline wavy var(--hot-pink);
}

/* Starburst nav badges — 90s clip-art "NEW!" sticker style, built as an
   SVG polygon so it works for any label without needing separate image
   assets per word. */
.site-nav a.nav-burst {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 92px;
  height: 60px;
  color: var(--space-navy);
  text-decoration: none;
  padding: 0;
}

.site-nav a.nav-burst svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  fill: var(--gold);
  stroke: var(--space-navy);
  stroke-width: 2;
  z-index: 0;
  filter: drop-shadow(1px 2px 0 rgba(0, 0, 0, 0.35));
}

.site-nav a.nav-burst span {
  position: relative;
  z-index: 1;
  font-size: 0.68rem;
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.1;
  transform: rotate(-4deg);
}

.site-nav a.nav-burst:hover svg,
.site-nav a.nav-burst[aria-current="page"] svg {
  fill: var(--hot-pink);
}

.site-nav a.nav-burst:hover span,
.site-nav a.nav-burst[aria-current="page"] span {
  color: var(--cream);
}

/* ---------- 7. MARQUEE TICKER ---------- */
.ticker {
  overflow: hidden;
  background: var(--ink);
  color: var(--lcd-green);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 6px 0;
  border-bottom: 3px solid var(--gold);
}

.ticker__icon {
  width: 22px;
  height: 18px;
  vertical-align: -4px;
  margin-right: 2px;
}

.ticker__track {
  display: inline-block;
  white-space: nowrap;
  padding-left: 100%;
  animation: scroll-left 38.25s linear infinite;
}

@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
  .ticker { overflow-x: auto; }
  .ticker__track { animation: none; padding-left: 0; }
}

/* ---------- 8. CONTENT LAYOUT ---------- */
.content {
  display: grid;
  grid-template-columns: 5fr 2fr;
  gap: 0;
}

/* Pages with no sidebar widgets left: let main-col take the full width. */
.content--single {
  grid-template-columns: 1fr;
}

.content--single .main-col {
  border-right: 0;
}

.main-col {
  padding: 16px 18px;
  border-right: 3px dashed var(--hot-pink);
  background: var(--cream);
}

.sidebar-col {
  padding: 16px 12px;
  background: #fff9ec;
}

/* Frameless sections: content sits directly on the page background,
   no border/box around it. */
.bare-panel {
  margin-bottom: 18px;
}

.bare-panel h2 {
  font-family: var(--font-display);
  color: var(--hot-pink);
  border-bottom: 2px dotted var(--space-navy);
  padding-bottom: 4px;
  margin-top: 0;
  font-size: 1.2rem;
}

.bare-panel h3,
.main-col h3 {
  font-family: var(--font-display);
  color: var(--gold);
  margin: 20px 0 6px;
  font-size: 1rem;
  letter-spacing: 0.5px;
}

.blink {
  animation: blink 1.2s steps(1) infinite;
  font-weight: bold;
  color: var(--hot-pink);
}

@keyframes blink {
  50% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .blink { animation: none; }
}

/* Video frame */
.video-frame {
  border: 4px solid var(--space-navy);
  background: #000;
  aspect-ratio: 16 / 9;
  width: 100%;
}

.video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.caption {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--space-navy);
  margin-top: 4px;
}

/* ---------- 9. WIDGETS ---------- */

/* Visitor counter */
.counter {
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.75rem;
}

.counter__digits {
  display: inline-flex;
  gap: 2px;
  background: var(--ink);
  padding: 6px 8px;
  margin-top: 6px;
  border: 2px inset var(--space-navy);
}

.counter__digits span {
  font-family: var(--font-mono);
  font-size: 1.2rem;
  color: var(--lcd-green);
  background: #001a00;
  padding: 2px 4px;
  min-width: 1ch;
}

/* Join fan club box */
.join-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
}

.join-form label {
  font-weight: bold;
}

.join-form input[type="email"] {
  padding: 6px;
  border: 2px inset var(--space-navy);
  font-family: var(--font-ui);
}

.join-form button {
  background: var(--hot-pink);
  color: var(--cream);
  border: 3px outset var(--gold);
  font-family: var(--font-display);
  font-size: 0.95rem;
  padding: 8px;
  cursor: pointer;
}

.join-form button:hover { background: var(--electric-cyan); color: var(--ink); }
.join-form button:active { border-style: inset; }

.instagram-btn,
.contact-btn {
  display: block;
  text-align: center;
  background: var(--electric-cyan);
  color: var(--ink);
  border: 3px outset var(--gold);
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: bold;
  text-decoration: none;
  padding: 8px;
  cursor: pointer;
}

.instagram-btn { margin-top: 12px; }

.instagram-btn:hover,
.contact-btn:hover { background: var(--hot-pink); color: var(--cream); }

.instagram-btn:active,
.contact-btn:active { border-style: inset; }

.contact-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 16px 0;
}

.contact-links .contact-btn {
  flex: 1 1 180px;
}

.join-form__status {
  font-size: 0.8rem;
  font-weight: bold;
  margin: 0;
}

/* Star icon spin */
.spin-star {
  display: inline-block;
  animation: spin 4s linear infinite;
}

@keyframes spin {
  100% { transform: rotate(360deg); }
}

/* ---------- 10. FOOTER ---------- */
.site-footer {
  background: var(--space-navy);
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  text-align: center;
  padding: 14px 10px 18px;
  border-top: 6px double var(--gold);
}

.hosted-by {
  margin: 12px 0 0;
}

.hosted-by img {
  display: block;
  margin: 4px auto 0;
  max-width: 100%;
  height: auto;
}

/* ---------- 11. RESPONSIVE ---------- */
@media (max-width: 600px) {
  .content {
    grid-template-columns: 1fr;
  }
  .main-col {
    border-right: none;
    border-bottom: 3px dashed var(--hot-pink);
  }
  .site-nav ul {
    font-size: 0.75rem;
  }
}

/* Below 416px the full-size bursts (92px) no longer fit on one row, so
   shrink them — that keeps all four side by side down to ~360px instead
   of wrapping. */
@media (max-width: 415px) {
  .site-nav a.nav-burst {
    width: 78px;
    height: 51px;
  }
  .site-nav a.nav-burst span {
    font-size: 0.56rem;
    letter-spacing: -0.3px;
  }
}

/* Below this width even the shrunk bursts don't fit on one row —
   force a clean 2x2 grid instead of letting flex-wrap fall back to 3+1. */
@media (max-width: 359px) {
  .site-nav ul {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    justify-content: center;
  }
}

/* ==========================================================================
   12. CHAOS EXTRAS — because a fan site cannot be tasteful
   ========================================================================== */

/* Sparkle row divider used inside content columns */
.sparkle-divider {
  text-align: center;
  color: var(--hot-pink);
  letter-spacing: 6px;
  font-size: 0.9rem;
  margin: 4px 0 16px;
  user-select: none;
}

/* "welcome to" flame text: CSS stand-in for the old flame-GIF banner —
   lets the wording actually be edited in the HTML instead of baked into
   image pixels. Gradient fill + flickering glow approximate the burning-
   text look; not literal fire, but close in spirit. */
.flame-text {
  display: block;
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: clamp(1rem, 4vw, 1.4rem);
  font-weight: bold;
  letter-spacing: 1px;
  background: linear-gradient(180deg, #fff59d 0%, #ffb300 35%, #ff5722 68%, #b71c1c 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: flame-flicker 1.8s ease-in-out infinite;
}

@keyframes flame-flicker {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 6px rgba(255, 87, 34, 0.55)); }
  50%      { filter: brightness(1.18) drop-shadow(0 0 14px rgba(255, 140, 0, 0.85)); }
}

@media (prefers-reduced-motion: reduce) {
  .flame-text {
    animation: none;
    filter: drop-shadow(0 0 6px rgba(255, 87, 34, 0.55));
  }
}

.link-like,
.share-trigger {
  display: inline;
  background: none;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.link-like {
  color: var(--link-blue);
  text-decoration: underline;
}

.share-trigger {
  color: inherit;
}

.link-like:hover { color: var(--hot-pink); }

/* Font salad "share" button: every word insists on being a different
   font/color, but the whole thing is one clickable share action. */
.font-salad {
  background: none;
  border: 0;
  padding: 2px 0;
  margin: 0;
  cursor: pointer;
  font-size: 1em;
  text-align: left;
  color: inherit;
  text-decoration: none;
  display: inline;
}
.font-salad:hover span,
.font-salad:focus-visible span {
  text-decoration: underline wavy var(--hot-pink);
}
.font-salad span {
  font-family: var(--font-display);
}
.font-salad span:nth-child(2n) {
  font-family: var(--font-ui);
  color: var(--hot-pink);
}
.font-salad span:nth-child(3n) {
  font-family: var(--font-mono);
  color: var(--electric-cyan);
  background: var(--space-navy);
  padding: 0 2px;
}
.font-salad span:nth-child(5n) {
  color: var(--gold);
  text-shadow: 1px 1px 0 var(--hot-pink);
}

.share-status {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: bold;
  color: var(--space-navy);
  min-height: 1.2em;
  margin: 4px 0 0;
}

/* Flashing guestbook button */
.guestbook-btn {
  display: inline-block;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: bold;
  text-decoration: none;
  padding: 5px;
  border: 3px outset var(--hot-pink);
  text-align: center;
}

.guestbook-btn img {
  display: block;
}
.guestbook-btn:visited { color: var(--ink); }
.guestbook-btn:hover { background: var(--electric-cyan); }

/* Portrait photo (about.html) */
.portrait {
  display: block;
  width: 320px;
  max-width: 100%;
  height: auto;
  margin: 16px auto 0;
}

figure:has(.portrait) figcaption {
  text-align: center;
}

/* Guestbook (guestbook.html) */
.guestbook-form {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-ui);
  font-size: 0.85rem;
  margin-bottom: 6px;
}

.guestbook-form label {
  font-weight: bold;
}

.guestbook-form input[type="text"],
.guestbook-form textarea {
  padding: 6px;
  border: 2px inset var(--space-navy);
  font-family: var(--font-ui);
  resize: vertical;
}

.guestbook-form button {
  background: var(--hot-pink);
  color: var(--cream);
  border: 3px outset var(--gold);
  font-family: var(--font-display);
  font-size: 0.95rem;
  padding: 8px;
  cursor: pointer;
  align-self: flex-start;
}

.guestbook-form button:hover { background: var(--electric-cyan); color: var(--ink); }
.guestbook-form button:active { border-style: inset; }

.guestbook-form__status {
  font-size: 0.8rem;
  font-weight: bold;
  min-height: 1.2em;
}

.guestbook-entries {
  list-style: none;
  margin: 0;
  padding: 0;
}

.guestbook-entries li {
  border-bottom: 1px dotted var(--space-navy);
  padding: 10px 0;
}

.guestbook-entries li:last-child {
  border-bottom: 0;
}

/* Film tabs (movies.html): Director / Creative work shown as two
   separate, switchable groups — reads like two little sub-pages. */
.film-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 0 0 20px;
}

.film-tab {
  font-family: var(--font-ui);
  font-weight: bold;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--space-navy);
  background: var(--cream);
  border: 3px solid var(--space-navy);
  border-radius: 2px;
  padding: 8px 18px;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--space-navy);
}

.film-tab[aria-selected="true"] {
  background: var(--hot-pink);
  color: var(--cream);
  border-color: var(--space-navy);
  transform: translate(3px, 3px);
  box-shadow: none;
}

/* Click-to-play video poster: a chosen thumbnail with the film's title
   and client overlaid, used in place of an always-loaded iframe until
   someone actually clicks play. Works as a <button> (real video-url set)
   or a plain <div> (nothing to play yet, purely illustrative). */
.video-poster {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  background-color: #000;
  background-size: cover;
  background-position: center;
  overflow: hidden;
}

button.video-poster {
  cursor: pointer;
}

.video-poster--placeholder {
  background-image: repeating-linear-gradient(45deg, #111, #111 10px, #1a1a2e 10px, #1a1a2e 20px);
}

.video-poster__play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: var(--cream);
  opacity: 0.8;
  font-size: 1.6rem;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
  transition: transform 0.15s ease;
}

button.video-poster:hover .video-poster__play,
button.video-poster:focus-visible .video-poster__play {
  transform: translate(-50%, -50%) scale(1.15);
}

.video-poster__overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 10px 12px 8px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
}

.video-poster__title {
  display: block;
  color: var(--cream);
  font-family: var(--font-display);
  font-size: 0.9rem;
  line-height: 1.3;
}

.video-poster__client {
  display: block;
  color: var(--cream);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  opacity: 0.8;
}

@media (prefers-reduced-motion: reduce) {
  button.video-poster:hover .video-poster__play,
  button.video-poster:focus-visible .video-poster__play {
    transform: translate(-50%, -50%);
  }
}

/* Awardography list (about.html): long, so run it in two columns on
   anything wider than a phone. */
.awardography-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}

.awardography-list {
  font-size: 0.85rem;
  padding-left: 1.1em;
}

.awardography-list li {
  margin-bottom: 4px;
}

@media (max-width: 600px) {
  .awardography-columns {
    grid-template-columns: 1fr;
  }
}

/* ---------- Custom "GIF-style" SVG animations ---------- */

.spin-globe {
  animation: spin-globe 8s linear infinite;
  vertical-align: middle;
}

@keyframes spin-globe {
  100% { transform: rotate(360deg); }
}

.flicker-flame {
  transform-origin: 50% 100%;
  animation: flicker-flame 0.6s ease-in-out infinite alternate;
}

@keyframes flicker-flame {
  0%   { transform: scaleY(1) scaleX(1) rotate(-2deg); }
  50%  { transform: scaleY(1.08) scaleX(0.95) rotate(1deg); }
  100% { transform: scaleY(0.96) scaleX(1.04) rotate(-1deg); }
}

.wave-flag {
  transform-origin: 0% 50%;
  animation: wave-flag 1.4s ease-in-out infinite;
}

@keyframes wave-flag {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-12deg); }
}

@media (prefers-reduced-motion: reduce) {
  .spin-globe, .flicker-flame, .wave-flag {
    animation: none !important;
  }
}

/* ---------- Music toggle ---------- */
.music-toggle {
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--space-navy);
  color: var(--gold);
  border: 2px solid var(--gold);
  border-radius: 999px;
  padding: 0;
  cursor: pointer;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, 0.35);
}

.music-toggle:hover {
  color: var(--cream);
  border-color: var(--hot-pink);
}

.music-toggle::after {
  content: "";
  position: absolute;
  left: 6px;
  right: 6px;
  top: 50%;
  height: 2px;
  background: #ff3b3b;
  transform: rotate(-45deg);
  border-radius: 2px;
  pointer-events: none;
}

.music-toggle.is-playing::after {
  display: none;
}

.music-toggle__icon {
  font-size: 1.2rem;
}

.music-toggle__label {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.music-toggle.is-playing {
  color: var(--lcd-green);
  border-color: var(--lcd-green);
}

.music-toggle.is-playing .music-toggle__icon {
  animation: music-note-bounce 0.5s ease-in-out infinite alternate;
}

@keyframes music-note-bounce {
  0%   { transform: translateY(0) rotate(0deg); }
  100% { transform: translateY(-3px) rotate(-8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .music-toggle.is-playing .music-toggle__icon {
    animation: none;
  }
}

@media (max-width: 600px) {
  .music-toggle {
    right: 10px;
    bottom: 10px;
    width: 40px;
    height: 40px;
  }
}