/* ==========================================================================
   Aurora DAW — Grok Imagine stills + night-studio language
   --------------------------------------------------------------------------
   Isolated overlay. Does not edit login/deliver-code JS, Stripe checkout,
   or restore /audio players. Real product captures stay the hero shot.
   Imagine stills are atmosphere and tactile hardware only — no fake plugin
   racks, no preset counts, no competitor DAW chrome.
   ========================================================================== */

:root{
  --imagine-veil: linear-gradient(180deg, rgba(5,7,12,.42) 0%, rgba(5,7,12,.78) 100%);
  --imagine-desk: linear-gradient(180deg, rgba(20,28,41,.55), rgba(5,7,12,.88));
}

/* ===== homepage atmosphere: Imagine hero still under the existing wash ===== */
body:has(#top) .amb{
  background:
    radial-gradient(80% 52% at 16% -10%, rgba(125,226,255,.18), transparent 60%),
    radial-gradient(56% 40% at 94% 2%, rgba(199,125,255,.10), transparent 58%),
    linear-gradient(180deg, rgba(5,7,12,.38) 0%, rgba(5,7,12,.78) 55%, rgba(5,7,12,.92) 100%),
    image-set(
      url("assets/imagine/hero-atmosphere-960.webp") 1x,
      url("assets/imagine/hero-atmosphere-1600.webp") 1.4x,
      url("assets/imagine/hero-atmosphere-2560.webp") 2x
    );
  background-size: auto, auto, auto, cover;
  background-position: center top;
  background-repeat: no-repeat;
}
body:has(#top) .amb::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(125,226,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,226,255,.020) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 18%, #000 0%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 18%, #000 0%, transparent 78%);
  opacity:.45;
  pointer-events:none;
}

/* ===== empty listen stub: product path, never a transport ===== */
body:has(#top) #listen.player-sec{
  position:relative;
  overflow:hidden;
  padding-block:clamp(36px, 5vw, 72px);
}
body:has(#top) #listen.player-sec .shell{
  display:grid;
  gap:clamp(20px, 3vw, 36px);
  align-items:center;
}
@media (min-width:900px){
  body:has(#top) #listen.player-sec .shell{
    grid-template-columns: minmax(0,1.15fr) minmax(240px,.85fr);
  }
}
body:has(#top) #listen.player-sec .sec-head{
  margin-bottom:0;
}
body:has(#top) #listen .imagine-still{
  margin:0;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(125,226,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 24px 56px -28px rgba(0,0,0,.8),
    0 0 60px -32px rgba(125,226,255,.28);
  background:#090d15;
}
body:has(#top) #listen .imagine-still img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  object-position:center 42%;
  display:block;
}
body:has(#top) #listen .imagine-still figcaption{
  padding:10px 14px 12px;
  font-size:.78rem;
  color:var(--t4, #8a857b);
  line-height:1.45;
  background:rgba(5,7,12,.72);
}

/* ===== night-studio stills strip ===== */
body:has(#top) #night-studio{
  padding-block:clamp(28px, 4vw, 56px);
}
body:has(#top) #night-studio .imagine-grid{
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3, minmax(0,1fr));
}
@media (max-width:980px){
  body:has(#top) #night-studio .imagine-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  body:has(#top) #night-studio .imagine-grid figure:last-child{ grid-column:1 / -1 }
}
@media (max-width:700px){
  body:has(#top) #night-studio .imagine-grid{ grid-template-columns:minmax(0,1fr) }
  body:has(#top) #night-studio .imagine-grid figure:last-child{ grid-column:auto }
}
body:has(#top) #night-studio figure{
  margin:0;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(57,69,94,.85);
  background:#090d15;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px -28px rgba(0,0,0,.75);
}
body:has(#top) #night-studio img{
  width:100%;
  height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  display:block;
}
body:has(#top) #night-studio figure:nth-child(1) img{ object-position:center 28% }
body:has(#top) #night-studio figure:nth-child(2) img{ object-position:center 55% }
body:has(#top) #night-studio figure:nth-child(3) img{ object-position:center 62% }
body:has(#top) #night-studio figcaption{
  padding:10px 12px 12px;
  font-size:.75rem;
  color:var(--t4, #8a857b);
  line-height:1.45;
}
@media (prefers-reduced-motion:no-preference){
  body:has(#top) #night-studio figure,
  body:has(#top) #listen .imagine-still{
    transition:border-color 180ms cubic-bezier(.22,1,.36,1), box-shadow 240ms cubic-bezier(.22,1,.36,1);
  }
  body:has(#top) #night-studio figure:hover,
  body:has(#top) #listen .imagine-still:hover{
    border-color:rgba(125,226,255,.32);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.08),
      0 22px 48px -26px rgba(0,0,0,.8),
      0 0 48px -28px rgba(125,226,255,.34);
  }
}

/* ===== proof / film / studio chrome ===== */
body:has(#top) .proof{
  position:relative;
  background:
    linear-gradient(180deg, rgba(5,7,12,.72), rgba(5,7,12,.88)),
    url("assets/imagine/aurora-curtain-2400.webp") center / cover no-repeat;
}
body:has(#top) #film .film,
body:has(#top) #studio .frame,
body:has(#top) #tour .scard,
body:has(#top) .shotframe{
  border-color:rgba(125,226,255,.16);
}

/* ===== pricing: one $20 jewel on a night desk ===== */
body:has(#top) #pricing{
  position:relative;
}
body:has(#top) #pricing::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:
    radial-gradient(60% 50% at 50% 20%, rgba(125,226,255,.10), transparent 62%),
    url("assets/imagine/studio-hardware-1920.webp") center 18% / cover no-repeat;
  opacity:.22;
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 78%, transparent);
}
body:has(#top) #pricing .shell{ position:relative; z-index:1 }
body:has(#top) #pricing .plan.best{
  backdrop-filter: blur(10px) saturate(1.2);
}

/* ===== login / success vault: CSS only — do not touch login JS ===== */
body:has(#login-h) .mesh,
body:has(#code-h) .mesh{
  background:
    radial-gradient(ellipse 70% 50% at 12% -8%, rgba(125,226,255,.16), transparent 55%),
    radial-gradient(ellipse 50% 40% at 95% 8%, rgba(199,125,255,.10), transparent 50%),
    linear-gradient(180deg, rgba(5,7,12,.42), rgba(5,7,12,.86)),
    image-set(
      url("assets/imagine/login-vault-800.webp") 1x,
      url("assets/imagine/login-vault-1600.webp") 2x
    ) center / cover no-repeat;
}
body:has(#login-h) .mesh::after,
body:has(#code-h) .mesh::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(125,226,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,226,255,.022) 1px, transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%);
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%, #000 0%, transparent 75%);
  pointer-events:none;
}
body:has(#login-h) .card,
body:has(#code-h) .card{
  backdrop-filter: blur(16px) saturate(1.25);
}

/* ===== mobile: keep leadership CTA, drop atmosphere weight ===== */
@media (max-width:620px){
  body:has(#top) .amb{
    background-size: auto, auto, auto, 220% auto;
    background-position: center 8%;
    opacity:.94;
  }
  body:has(#top) #listen.player-sec .shell{
    grid-template-columns:minmax(0,1fr);
  }
  body:has(#top) #listen .imagine-still,
  body:has(#top) #night-studio figure{
    border-radius:14px;
  }
  body:has(#top) #listen .imagine-still figcaption,
  body:has(#top) #night-studio figcaption{
    font-size:.72rem;
    padding:10px 12px 12px;
  }
  body:has(#top) #pricing::before{ opacity:.12 }
  body:has(#login-h) .mesh,
  body:has(#code-h) .mesh{
    background-position: center top;
  }
}

@media (prefers-reduced-motion:reduce){
  body:has(#top) #listen .imagine-still,
  body:has(#top) #night-studio figure,
  body:has(#login-h) .card,
  body:has(#code-h) .card{
    box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
    transition:none;
  }
}