/* ═══════════════════════════════════════════════════════════
   SAYMAWN — Responsive Styles
   All @media queries for desktop, tablet, mobile
   ═══════════════════════════════════════════════════════════ */

/* ── Header (mobile) ─────────────────────────────────────── */
@media (max-width: 768px) {
  .site-nav { display: none; }
  .site-header__burger { display: flex; }
  .site-header { padding: 0 20px; }
}

/* ── Hero (mobile) ───────────────────────────────────────── */
@media (max-width: 768px) {
  .hero__title { font-size: clamp(3rem, 14vw, 5rem); }
  .hero__portrait-wrap { width: clamp(130px, 35vw, 200px); height: clamp(130px, 35vw, 200px); }
  .hero__release { flex-wrap: wrap; justify-content: center; border-radius: var(--radius-lg); }
  .hero__release-info { text-align: center; }
  .hero__aura { width: clamp(280px, 90vw, 400px); height: clamp(180px, 60vw, 250px); filter: blur(40px); }
  .hero__subtitle { font-size: 0.75rem; letter-spacing: 0.1em; }
  .hero__waveform { height: 30px; margin: var(--space-md) auto var(--space-lg); }
  .hero__actions { gap: var(--space-sm); }
}

/* ── Release (tablet) ────────────────────────────────────── */
@media (max-width: 1024px) {
  .release__inner { grid-template-columns: 1fr; text-align: center; gap: var(--space-2xl); }
  .release__visual { order: -1; }
  .release__artwork-wrap { max-width: 400px; margin: 0 auto; }
  .release__streaming { justify-content: center; }
  .release__label { padding-left: 0; }
  .release__label::before { display: none; }
}

/* ── Release (mobile) ────────────────────────────────────── */
@media (max-width: 768px) {
  .release__artwork-wrap { max-width: 320px; }
  .release__info { padding: 0; }
}

@media (max-width: 480px) {
  .release__artwork-wrap { max-width: 280px; }
  .release__streaming { justify-content: center; }
  .release__eq { height: 40px; padding: 0 16px 10px; }
}

/* ── Tracklist (mobile) ──────────────────────────────────── */
@media (max-width: 600px) {
  .tl__item { grid-template-columns: 28px 40px 1fr auto; }
  .tl__art { width: 40px; height: 40px; }
}

@media (max-width: 768px) {
  .tl__item { padding: var(--space-sm) var(--space-md); }
}

/* ── About (tablet) ──────────────────────────────────────── */
@media (max-width: 1024px) {
  .about__profile { grid-template-columns: 1fr; text-align: center; }
  .about__portrait { margin-bottom: var(--space-xl); }
  .about__portrait-frame img { max-width: 300px; }
}

/* ── About (mobile) ──────────────────────────────────────── */
@media (max-width: 768px) {
  .about__portrait-frame img { max-width: 300px; }
  .about__quote { border-left: none; border-top: 3px solid var(--purple-light); border-radius: 0 0 var(--radius-md) var(--radius-md); }
}

@media (max-width: 480px) {
  .about__portrait-frame img { max-width: 260px; }
  .about__text p { font-size: var(--font-size-sm); line-height: 1.7; }
}

/* ── Footer (tablet) ────────────────────────────────────── */
@media (max-width: 1024px) {
  .site-footer__inner { flex-direction: column; gap: var(--space-md); text-align: center; }
  .site-footer__social { justify-content: center; }
  .site-footer__nav { justify-content: center; flex-wrap: wrap; }
  .site-footer__bottom { text-align: center; }
}

/* ── Global mobile ───────────────────────────────────────── */
@media (max-width: 480px) {
  :root { --space-xl: 1.25rem; --space-section: 2.5rem; }
  .hero { min-height: 100vh; min-height: 100svh; padding: calc(var(--header-h) + var(--space-md)) var(--space-md) var(--space-lg); }
  .social__grid { gap: var(--space-sm); }
}

/* ── Music Video Section (tablet) ─────────────────────────── */
@media (max-width: 1024px) {
  .video-section__layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
}

/* ── Music Video Section (mobile) ─────────────────────────── */
@media (max-width: 480px) {
  .video-section__play-btn { width: 56px; height: 56px; }
  .video-section__play-btn svg { width: 32px; height: 32px; }
  .video-section__gallery-grid { gap: 8px; }
  .video-modal { padding: var(--space-sm); }
  .video-modal__container { border-radius: var(--radius-sm); }
  .lightbox { padding: var(--space-sm); }
  .lightbox__container { max-width: 95vw; }
  .lightbox__content img { max-height: 80vh; }
  .lightbox__close { top: 8px; right: 8px; width: 36px; height: 36px; }
}

/* ═══════════════════════════════════════════════════════════
   MOBILE PERFORMANCE — Reduce/Disable Cosmic Effects
   ═══════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .bg-layer--stars-drift,
  .bg-layer--stars-blink,
  .bg-layer--stars-blink-slow,
  .bg-layer--stars-bright,
  .bg-layer--stars-parallax-1,
  .bg-layer--stars-parallax-2,
  .bg-orb,
  .bg-layer--galaxy,
  .bg-layer--wave,
  .site-header__nebula,
  .site-header__stars { animation: none !important; }
  .hero__orb,
  .hero__orb-core,
  .hero__orb-ring,
  .hero__orb-glow,
  .hero__stardust span,
  .hero__portrait,
  .hero__portrait-glow { animation: none !important; }
  .site-nav__dropdown { transition: none !important; }
  .mobile-nav__sublist { transition: none !important; }
  .mz-bg__stars,
  .mz-bg__stars--deep,
  .mz-bg__stars--mid,
  .mz-bg__stars--near,
  .mz-bg__nebula,
  .mz-bg__milkyway,
  .mz-bg__cluster,
  .mz-bg__galaxy,
  .mz-bg__dust,
  .mz-hero__moon,
  .mz-hero__moon-surface,
  .mz-hero__uranus,
  .mz-hero__uranus-surface,
  .mz-hero__uranus-ring,
  .mz-hero__galaxy,
  .mz-hero__orbit,
  .mz-hero__distant-star,
  .mz-cd__glow,
  .mz-cd__disc,
  .mz-hero__scroll { animation: none !important; }
  .tw-bg__grain,
  .tw-bg__leak,
  .tw-memory,
  .tw-hero__artwork-light,
  .tw-hero__scroll { animation: none !important; }
  .bg-layer--stars-blink,
  .bg-layer--stars-blink-slow { opacity: 0.4; }
}

@media (max-width: 768px) {
  /* ── Mobile GPU performance: reduce heavy effects ── */
  .bg-layer--galaxy { animation: none; }
  .bg-layer--orbs { filter: blur(80px); opacity: 0.15; }
  .bg-layer--wave { display: none; }
  .player-bar { backdrop-filter: blur(20px) saturate(1.2); -webkit-backdrop-filter: blur(20px) saturate(1.2); }
  .site-header { backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); }

  .bg-layer--stars-static::after {
    background-image:
      radial-gradient(0.6px 0.6px at 10% 20%, rgba(255,255,255,0.14) 0%, transparent 100%),
      radial-gradient(0.6px 0.6px at 30% 50%, rgba(255,255,255,0.11) 0%, transparent 100%),
      radial-gradient(0.6px 0.6px at 50% 30%, rgba(255,255,255,0.16) 0%, transparent 100%),
      radial-gradient(0.6px 0.6px at 70% 60%, rgba(255,255,255,0.12) 0%, transparent 100%),
      radial-gradient(0.6px 0.6px at 90% 40%, rgba(255,255,255,0.14) 0%, transparent 100%),
      radial-gradient(0.6px 0.6px at 20% 80%, rgba(255,255,255,0.1) 0%, transparent 100%),
      radial-gradient(0.6px 0.6px at 60% 75%, rgba(255,255,255,0.13) 0%, transparent 100%),
      radial-gradient(0.6px 0.6px at 80% 15%, rgba(255,255,255,0.11) 0%, transparent 100%);
  }

  .bg-layer--stars-drift::after {
    background-image:
      radial-gradient(1px 1px at 15% 30%, rgba(255,255,255,0.22) 0%, transparent 100%),
      radial-gradient(1px 1px at 50% 60%, rgba(255,255,255,0.2) 0%, transparent 100%),
      radial-gradient(1px 1px at 80% 25%, rgba(255,255,255,0.24) 0%, transparent 100%);
    animation-duration: 80s;
  }

  .bg-layer--stars-blink::after,
  .bg-layer--stars-blink-slow::after {
    background-image:
      radial-gradient(1.2px 1.2px at 25% 40%, rgba(200,180,255,0.25) 0%, transparent 100%),
      radial-gradient(1.2px 1.2px at 70% 55%, rgba(255,190,220,0.22) 0%, transparent 100%);
  }

  .bg-layer--stars-bright { display: none; }
  .bg-layer--stars-parallax-1 { display: none; }
  .bg-layer--stars-parallax-2 { display: none; }
  .bg-layer--particles { display: none; }
  .bg-layer--connections { display: none; }

  .bg-orb--purple { width: 280px; height: 280px; }
  .bg-orb--pink { width: 220px; height: 220px; }
  .bg-orb--cyan { width: 200px; height: 200px; }
  .bg-orb { filter: blur(140px); animation-duration: 50s; }
}

/* ═══════════════════════════════════════════════════════════
   LOW-END MOBILE GPU — Reduce backdrop-filter for devices
   like Samsung A20 where backdrop-filter causes rendering
   flicker / page flash / GPU overload.
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) and (hover: none) and (pointer: coarse) {
  .site-header { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .site-header.scrolled { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .player-bar { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .mobile-nav { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
  .site-overlay { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
  .glass-card { backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
  .hero__aura { filter: blur(40px); }
  .hero__title::after { filter: blur(30px); }
  .release__artwork-glow { filter: blur(20px); }
  .bg-orb { filter: blur(100px); }
}

/* ═══════════════════════════════════════════════════════════
   MULTI-PAGE COMPONENT RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .album-detail { grid-template-columns: 250px 1fr; gap: var(--space-lg); }
  .song-page__layout { grid-template-columns: 250px 1fr; gap: var(--space-lg); }
}
@media (max-width: 768px) {
  .album-detail { grid-template-columns: 1fr; text-align: center; }
  .album-detail__cover { position: static; max-width: 300px; margin: 0 auto; }
  .song-page__layout { grid-template-columns: 1fr; text-align: center; }
  .song-page__cover { max-width: 300px; margin: 0 auto; }
  .song-page__meta { grid-template-columns: 1fr; }
  .song-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .music-filter { gap: 6px; }
  .music-filter__btn { padding: var(--space-xs) var(--space-md); font-size: var(--text-xs); }
}

/* ═══════════════════════════════════════════════════════════
   MANZOOMEH ALBUM PAGE RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mz-hero { padding: calc(var(--header-h) + var(--space-lg)) var(--space-md) var(--space-lg); min-height: auto; padding-top: calc(var(--header-h) + 60px); }
  .mz-hero__artwork-wrap.mz-cd { width: clamp(200px, 55vw, 280px); height: clamp(200px, 55vw, 280px); }
  .mz-hero__moon { top: 8%; right: 5%; width: 50px; height: 50px; }
  .mz-hero__moon-surface { animation: none; }
  .mz-hero__uranus { bottom: 12%; left: 3%; width: 40px; height: 40px; }
  .mz-hero__uranus-surface { animation: none; }
  .mz-hero__orbit { display: none; }
  .mz-hero__distant-star { display: none; }
  .mz-bg__milkyway { opacity: 0.3; }
  .mz-bg__cluster { transform: scale(0.6); }
  .mz-hero__desc { font-size: 0.8rem; }
  .mz-hero__scroll { display: none; }

  .mz-track__art { width: 40px; height: 40px; }

  /* 20 Salegi responsive */
  .tw-hero { padding: calc(var(--header-h) + var(--space-lg)) var(--space-md) var(--space-lg); min-height: auto; padding-top: calc(var(--header-h) + 60px); }
  .tw-hero__artwork-wrap { width: clamp(200px, 55vw, 280px); height: clamp(200px, 55vw, 280px); }
  .tw-hero__desc { font-size: 0.8rem; }
  .tw-hero__scroll { display: none; }
  .tw-memory { display: none; }

  /* Timeline → single column on mobile */
  .tw-timeline__line { left: 20px; }
  .tw-timeline__item { width: 100%; padding-left: 50px !important; padding-right: 0 !important; justify-content: flex-start !important; }
  .tw-timeline__item--right { margin-left: 0; }
  .tw-timeline__dot { left: 15px !important; right: auto !important; }
  .tw-timeline__card { max-width: 100%; }

  .tw-track__art { width: 38px; height: 38px; }
  .tw-track__name { font-size: 0.85rem; }
}

/* ═══════════════════════════════════════════════════════════
   OLD PLAYER BAR RESPONSIVE v3 — REMOVED
   Replaced by Cosmic Control Rail V2.
   See: assets/css/player-v2.css
   ═══════════════════════════════════════════════════════════ */

/* ── Manzoomeh Track Responsive ── */
@media (max-width: 480px) {
  .mz-track__dl { display: none; }
  .mz-track__actions { gap: 4px; }
}
@media (min-width: 481px) and (max-width: 640px) {
  .mz-track__actions { gap: 4px; }
}

/* ── Playlist Download Buttons Responsive ── */
@media (max-width: 640px) {
  .tw-track__dl { display: none; }
  .tw-track__actions { gap: 4px; }
  .song-card__dl { display: none; }
}