/* iOS-style frosted glass, tuned for scroll performance */
:root {
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.025));
  --glass-bg-strong: linear-gradient(135deg, rgba(255, 255, 255, 0.11), rgba(255, 255, 255, 0.045));
  --glass-border: rgba(255, 255, 255, 0.145);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 rgba(0, 0, 0, 0.16);
  --glass-shadow: 0 22px 60px rgba(0, 0, 0, 0.22);
  --glass-blur: 18px;
  --glass-radius: 22px;
}

[data-theme="light"] {
  --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.38));
  --glass-bg-strong: linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(255, 255, 255, 0.58));
  --glass-border: rgba(36, 24, 56, 0.12);
  --glass-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9), inset 0 -1px 0 rgba(36, 24, 56, 0.05);
  --glass-shadow: 0 22px 60px rgba(55, 40, 82, 0.13);
}

/* Panels keep the glass look through translucent gradients and highlights.
   Only the fixed header, mobile menu and dialogs use real backdrop blur. */
.mobile-menu,
.filter-bar,
.price-card,
.process-step,
.principle-card,
.about-facts,
.sound-card,
.music-feature,
.contact-channel,
.contact-meta,
.brief-form,
.checkout-card,
.pay-email,
.service-row,
.faq-item,
.studio-card,
.manifesto,
.auth-card,
.app-card,
.profile-card,
.order-card,
.order-empty,
.admin-stat,
.admin-table-wrap,
.admin-stats,
.admin-toolbar,
.pay-gate,
.proof-link,
.detail-block,
.lightbox__panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow), var(--glass-highlight);
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header {
    background: linear-gradient(180deg, rgba(9, 6, 16, 0.5), rgba(9, 6, 16, 0.16));
    border-bottom: 1px solid rgba(255, 255, 255, 0.065);
  }

  .site-header.is-scrolled {
    background: linear-gradient(180deg, rgba(9, 6, 16, 0.92), rgba(9, 6, 16, 0.84));
    border-bottom-color: var(--glass-border);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  }

  [data-theme="light"] .site-header {
    background: linear-gradient(180deg, rgba(250, 247, 255, 0.64), rgba(250, 247, 255, 0.32));
    border-bottom-color: rgba(40, 25, 60, 0.08);
    box-shadow: 0 10px 26px rgba(55, 40, 82, 0.07);
  }

  [data-theme="light"] .site-header.is-scrolled {
    background: linear-gradient(180deg, rgba(250, 247, 255, 0.88), rgba(250, 247, 255, 0.7));
  }

  .mobile-menu {
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
  }

  .app-dialog,
  .order-dialog,
  .admin-detail-dialog {
    background: var(--glass-bg-strong);
    border: 1px solid var(--glass-border);
    border-radius: var(--glass-radius);
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.4), var(--glass-highlight);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    backdrop-filter: blur(16px) saturate(150%);
  }

  .app-dialog::backdrop,
  .order-dialog::backdrop {
    background: rgba(4, 2, 9, 0.72);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header,
  .mobile-menu,
  .filter-bar,
  .price-card,
  .process-step,
  .principle-card,
  .contact-channel,
  .brief-form,
  .checkout-card,
  .auth-card,
  .app-card,
  .profile-card,
  .order-card,
  .admin-stat,
  .admin-table-wrap,
  .pay-gate,
  .app-dialog {
    background: var(--bg-2);
    border: 1px solid var(--line);
  }
}

@media (max-width: 720px) {
  :root {
    --glass-radius: 18px;
    --glass-shadow: 0 14px 40px rgba(0, 0, 0, 0.2);
  }

  .site-header,
  .site-header.is-scrolled {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(9, 6, 16, 0.9);
  }

  [data-theme="light"] .site-header,
  [data-theme="light"] .site-header.is-scrolled {
    background: rgba(250, 247, 255, 0.94);
  }

  .mobile-menu {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(9, 6, 16, 0.97);
  }

  .app-dialog,
  .order-dialog,
  .admin-detail-dialog {
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
  }
}

@media (prefers-reduced-transparency: reduce) {
  .site-header,
  .mobile-menu,
  .app-dialog,
  .filter-bar,
  .price-card,
  .process-step,
  .principle-card,
  .contact-channel,
  .brief-form,
  .checkout-card,
  .auth-card,
  .app-card,
  .profile-card,
  .order-card,
  .admin-stat,
  .admin-table-wrap,
  .pay-gate {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--bg-2);
  }
}

/* Performance: stop continuous paint-heavy animations while keeping the static composition. */
.poster,
.marquee-track,
.status-dot,
.sound-bars i {
  animation: none !important;
}

.poster {
  transform: rotate(var(--rot, 0deg));
}

.marquee-track {
  transform: none;
}

.status-dot {
  box-shadow: 0 0 0 3px rgba(196, 167, 255, 0.12);
}

.sound-bars i:nth-child(1) { height: 34%; }
.sound-bars i:nth-child(2) { height: 68%; }
.sound-bars i:nth-child(3) { height: 46%; }
.sound-bars i:nth-child(4) { height: 86%; }
.sound-bars i:nth-child(5) { height: 54%; }