:root { --motion-ease: cubic-bezier(.22,.68,.25,1); }
html { scrollbar-gutter: stable; }

/* Only opacity and a small transform move the window. The blurred backdrop is
   composited as a layer, avoiding a full-screen blur recalculation each frame. */
.dialog.motion-surface[open] {
  opacity: 0;
  transform: translate3d(0,14px,0) scale(.985);
  transition: opacity .32s var(--motion-ease), transform .32s var(--motion-ease);
}
.dialog.motion-surface.is-visible[open] { opacity: 1; transform: none; }
.dialog.motion-surface::backdrop {
  opacity: 0;
  -webkit-backdrop-filter: blur(6px);
  transition: opacity .32s ease;
}
.dialog.motion-surface.is-visible::backdrop { opacity: 1; }
.language-picker.motion-surface .language-options {
  opacity: 0; transform: translateY(-6px);
  transition: opacity .32s var(--motion-ease), transform .32s var(--motion-ease);
}
.language-picker.motion-surface.is-visible .language-options { opacity: 1; transform: none; }
.radio-faq .faq-panel {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .32s var(--motion-ease), opacity .32s var(--motion-ease);
}
.radio-faq .is-visible .faq-panel { grid-template-rows: 1fr; opacity: 1; }
.faq-content { min-height: 0; overflow: hidden; }
.faq-content p { font-size: 14px; line-height: 1.75; color: var(--muted); padding-top: 12px; }

/* Content stays readable without JS; there is no hidden scroll-reveal state. */
@keyframes soft-arrive { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@keyframes soft-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes old-cover-out { to { opacity: 0; } }
:root:not([data-motion=off]) .hero-copy { animation: soft-arrive .6s var(--motion-ease) both; }
:root:not([data-motion=off]) .hero-art { animation: soft-fade .65s ease both; }
:root:not([data-motion=off]) .motion-arrived { animation: soft-arrive .6s var(--motion-ease) backwards; }
:root:not([data-motion=off]) :is(.player,.contact-fab) { animation: soft-fade .45s ease; }
:root:not([data-motion=off]) :is(.track-card,.result-row,.request-result.success,.order-form:not([hidden]),.player-error:not([hidden])) { animation: soft-arrive .4s var(--motion-ease) backwards; }
.track-card:nth-child(2) { animation-delay: .04s; }.track-card:nth-child(3) { animation-delay: .08s; }.track-card:nth-child(4) { animation-delay: .12s; }
.cover-frame { position: relative; }
.cover-previous { position: absolute; inset: 6px; width: calc(100% - 12px); height: calc(100% - 12px); object-fit: cover; border-radius: 10px; pointer-events: none; animation: old-cover-out .65s ease forwards; }
.ambient-previous { pointer-events: none; animation: old-cover-out .8s ease forwards; }
.toast { transition: opacity .3s ease, transform .3s var(--motion-ease); }

/* Installed before the theme changes, and removed after the transition. */
.theme-transition :is(body,.site-header,.player,.floating-now,.cover-frame,.theme-toggle,.dialog,.language-options,.language-picker>summary,.search-field,.partner-tile,.track-art,input,textarea,.music-search-service,.track-search-toggle) {
  transition: background-color .4s ease, color .4s ease, border-color .4s ease, box-shadow .4s ease;
}
.theme-transition :is(p,strong,span,h1,h2,h3,a,.icon,.request-card,.ticker) { transition: color .4s ease, border-color .4s ease; }
.theme-transition :is(.ambient,.hero-watermark,.record,.brand-drift>span) { transition: opacity .4s ease; }

/* Gradients cannot interpolate directly. Crossfade their light/dark layers. */
.ambient-wash, [data-theme=dark] .ambient-wash { background: none; }
.request-card, [data-theme=dark] .request-card, .ticker, [data-theme=dark] .ticker { background: none; isolation: isolate; }
:is(.ambient-wash,.request-card,.ticker)::before, :is(.ambient-wash,.request-card,.ticker)::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; transition: opacity .4s ease;
}
:is(.request-card,.ticker)::before, :is(.request-card,.ticker)::after { z-index: -1; }
:is(.ambient-wash,.request-card,.ticker)::after { opacity: 0; }
[data-theme=dark] :is(.ambient-wash,.request-card,.ticker)::before { opacity: 0; }
[data-theme=dark] :is(.ambient-wash,.request-card,.ticker)::after { opacity: 1; }
.ambient-wash::before { background: linear-gradient(90deg,#fff 7%,#ffffffa6 38%,#ffffff2e 68%,#ffffff50),linear-gradient(0deg,#fff 0%,#ffffff00 30%,#ffffff55 65%,#fff 100%); }
.ambient-wash::after { background: linear-gradient(90deg,#15141b 7%,#15141bc2 38%,#15141b55 68%,#15141b85),linear-gradient(0deg,#15141b 0%,#15141b00 30%,#15141b66 65%,#15141b 100%); }
.request-card::before { background: linear-gradient(120deg,#fff6f6,#fff8f3); }
.request-card::after { background: linear-gradient(120deg,#2d222d,#26212c); }
.ticker::before { background: linear-gradient(90deg,#fff7f4,#fff4f5 55%,#fff9ec); }
.ticker::after { background: linear-gradient(90deg,#241b26,#2c1c29 55%,#29221f); }

@media(max-width:1050px) {
  .navigation, .navigation.open { display: flex; }
  .navigation {
    visibility: hidden; opacity: 0; transform: translateY(-6px); pointer-events: none;
    transition: opacity .28s var(--motion-ease), transform .28s var(--motion-ease), visibility 0s .28s;
  }
  .navigation.open { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
  [data-theme=dark] .navigation { background: #211d29; }
}
@media(max-width:767px) {
  .dialog.motion-surface[open] { transform: translate3d(0,10px,0); }
  .dialog.motion-surface.is-visible[open] { transform: none; }
  .cover-previous { inset: 5px; width: calc(100% - 10px); height: calc(100% - 10px); border-radius: 15px; }
}
@media(max-width:639px) {
  .ambient-wash::before { background: linear-gradient(180deg,#fff 0%,#ffffff99 20%,#ffffff33 55%,#fff 100%); }
  .ambient-wash::after { background: linear-gradient(180deg,#15141b 0%,#15141bb8 20%,#15141b55 55%,#15141b 100%); }
}
:root[data-motion=off] :is(.motion-surface,.language-options,.faq-panel,.navigation,.cover-previous,.toast) { transition: none !important; animation: none !important; }
:root[data-motion=off] .dialog::backdrop { transition: none; }
:root[data-motion=off] :is(.ambient-wash,.request-card,.ticker)::before, :root[data-motion=off] :is(.ambient-wash,.request-card,.ticker)::after { transition: none; }
:root[data-motion=off] :is(.cover-previous,.ambient-previous) { opacity: 0; }
:root[data-motion=off] .theme-transition, :root[data-motion=off].theme-transition * { transition: none !important; }
@media(prefers-reduced-motion:reduce) {
  :is(.hero-copy,.hero-art,.music-section,.listening-guide,.site-footer,.player,.contact-fab,.track-card,.result-row,.request-result.success,.order-form,.player-error,.cover-previous) { animation: none !important; }
  .dialog::backdrop { transition: none !important; }
  .cover-previous,.ambient-previous { opacity: 0; animation: none !important; }
}