@import url("aurora-imagine-visuals.css");

/* ==========================================================================
   Aurora DAW - isolated cinematic-studio polish
   --------------------------------------------------------------------------
   Overlay only. Does not edit claimed HTML, login/license functions,
   deliver-code, Stripe config, or license.json bind.

   Homepage scopes on #top (hero), not #listen, so listen-strip removal
   cannot turn the overlay off. Login still scopes on #login-h.

   Constraints this file must keep:
     - one accent (ice #7de2ff)
     - aurora fill in the four signature seats only
     - $20 / month only (no second plan)
     - leadership / nav bar stays visible
     - no loopback host literals
     - no Mac traffic-light chrome on a Windows product
     - no /audio/*.mp3 players restored
     - no fake plugin / preset counts
   ========================================================================== */

body:has(#top),
body:has(#login-h){
  --polish-glow: 0 0 40px -12px rgba(125,226,255,.55);
  --polish-rim: inset 0 1px 0 rgba(255,255,255,.07);
  --polish-desk: linear-gradient(180deg, rgba(20,28,41,.92), rgba(5,7,12,.96));
}

/* ===== homepage ambience: static studio lighting, no loop ===== */
body:has(#top) .amb{
  background:
    radial-gradient(80% 52% at 16% -10%, rgba(125,226,255,.16), transparent 60%),
    radial-gradient(56% 40% at 94% 2%, rgba(199,125,255,.10), transparent 58%),
    radial-gradient(70% 36% at 50% 108%, rgba(232,213,163,.05), transparent 62%),
    radial-gradient(40% 28% at 72% 42%, rgba(92,242,176,.04), transparent 70%);
}
body:has(#top) .amb::after{
  content:"";
  position:absolute; inset:0;
  background-image:
    linear-gradient(rgba(125,226,255,.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(125,226,255,.028) 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:.55;
  pointer-events:none;
}

/* leadership / nav bar - never hide; read as a console header */
body:has(#top) .nav{
  height:var(--nav-h);
  background:rgba(5,7,12,.42);
}
body:has(#top) .nav.on{
  background:rgba(5,7,12,.88);
  backdrop-filter:blur(22px) saturate(1.55);
  border-bottom-color:rgba(125,226,255,.16);
  box-shadow:0 12px 40px -28px rgba(0,0,0,.8);
}
body:has(#top) .nav-cta{
  letter-spacing:.04em;
  box-shadow:0 0 0 1px rgba(125,226,255,.12), 0 8px 22px -14px rgba(125,226,255,.7);
}
body:has(#top) .gem{
  box-shadow:0 0 22px rgba(125,226,255,.42), inset 0 1px 0 rgba(255,255,255,.35);
}

/* ===== hero: the sentence, then the window it produces ===== */
body:has(#top) .hero{
  min-height:min(78svh, 920px);
}
body:has(#top) h1{
  letter-spacing:-.018em;
  text-shadow:0 10px 40px rgba(0,0,0,.35);
}
body:has(#top) .g{
  filter:drop-shadow(0 0 18px rgba(125,226,255,.22));
}
body:has(#top) .hero-lead{
  max-width:48ch;
  color:var(--t2);
}
body:has(#top) .hero-lock{
  padding:10px 12px;
  border-radius:var(--r-sm);
  border:1px solid rgba(125,226,255,.12);
  background:rgba(125,226,255,.04);
  max-width:52ch;
}
body:has(#top) .badge{
  border-color:rgba(125,226,255,.18);
  background:linear-gradient(180deg, rgba(20,28,41,.9), rgba(9,13,21,.9));
}
body:has(#top) .hero-ctas .btn-acc{
  box-shadow:0 10px 28px -12px rgba(125,226,255,.75);
}
body:has(#top) .hero-facts{
  border-top-color:rgba(125,226,255,.12);
}

/* generate-prompt well */
body:has(#top) .say{
  border-color:rgba(125,226,255,.16);
  background:
    linear-gradient(180deg, rgba(125,226,255,.05), transparent 40%),
    var(--well);
  box-shadow:var(--inset-well), 0 0 0 1px rgba(125,226,255,.05);
}
body:has(#top) .say-t{
  font-family:var(--f-mono);
  font-size:.92rem;
  letter-spacing:.01em;
}
body:has(#top) .say-arrow{
  color:var(--t3);
}

/* product capture: lit console, not a floating-laptop mock ===== */
body:has(#top) .shotframe,
body:has(#top) .frame,
body:has(#top) .film{
  border-color:rgba(57,69,94,.85);
  box-shadow:
    var(--polish-rim),
    0 0 0 1px rgba(125,226,255,.08),
    0 24px 64px -28px rgba(0,0,0,.82),
    0 0 80px -36px rgba(125,226,255,.28);
  transform:none;
}
body:has(#top) .shotbar,
body:has(#top) .frame-bar,
body:has(#top) .film-bar{
  height:36px;
  background:linear-gradient(180deg, #1a2231, #0e131d);
  border-bottom-color:#1a2231;
}
/* Hide leftover Mac traffic lights. The capture already has Aurora chrome. */
body:has(#top) .sf-dots{ display:none; }

/* ===== leftover listen stub: product path, not a mixing desk =====
   #listen may remain as an empty player-sec after public mp3s come down.
   Do not restyle it as a transport. Do not restore /audio players. */
body:has(#top) .player-sec:not(:has(.player)){
  padding-block:clamp(28px, 4vw, 52px);
}
body:has(#top) .player-sec:not(:has(.player)) .sec-head{
  margin-bottom:0;
  gap:var(--sp3);
}
body:has(#top) .player-sec:not(:has(.player)) .sec-head h2{
  letter-spacing:-.015em;
}
body:has(#top) .player-sec:not(:has(.player)) .lead{
  max-width:62ch;
}

/* Inert if the listen owner has already removed these nodes. */
body:has(#top) .featrail[hidden],
body:has(#top) .player[hidden]{ display:none; }

/* ===== proof strip: one console meter row ===== */
body:has(#top) .proof{
  border-block-color:rgba(125,226,255,.12);
  background:rgba(5,7,12,.62);
}
body:has(#top) .stat{
  background:
    linear-gradient(180deg, rgba(125,226,255,.035), transparent 42%),
    var(--s0);
}
body:has(#top) .stat b.acc{
  color:var(--acc);
}

/* ===== how / features / studio cards: one desk, not leftover tiles ===== */
body:has(#top) .card,
body:has(#top) .step,
body:has(#top) .skill-card,
body:has(#top) .mode,
body:has(#top) .gw-note{
  position:relative;
  overflow:hidden;
  background:
    linear-gradient(180deg, rgba(125,226,255,.04), transparent 36%),
    var(--s2);
  border-color:rgba(57,69,94,.85);
  box-shadow:var(--polish-rim);
}
body:has(#top) .card::before,
body:has(#top) .step::before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, transparent, rgba(125,226,255,.35), transparent);
  pointer-events:none;
}
body:has(#top) .card:hover,
body:has(#top) .step:hover,
body:has(#top) .skill-card:hover{
  transform:translateY(-2px);
  border-color:var(--bd-strong);
  box-shadow:0 16px 36px -24px rgba(0,0,0,.7);
}
body:has(#top) .mode.rec{
  border-color:rgba(125,226,255,.38);
  background:
    radial-gradient(80% 60% at 50% -10%, rgba(125,226,255,.10), transparent 55%),
    linear-gradient(180deg, rgba(125,226,255,.06), var(--s2) 48%);
  box-shadow:var(--polish-rim), 0 0 0 1px rgba(125,226,255,.08);
}

/* studio tabs = console chips */
body:has(#top) .tab[aria-selected="true"],
body:has(#top) .sdot[aria-current="true"]{
  box-shadow:0 0 0 1px rgba(125,226,255,.22);
}
body:has(#top) .cap-note{
  max-width:72ch;
}

/* tour stack: same console rim as stills */
body:has(#top) .scard{
  border-color:rgba(57,69,94,.85);
  box-shadow:
    var(--polish-rim),
    0 0 0 1px rgba(125,226,255,.06),
    var(--e4);
}
body:has(#top) .sc-bar{
  background:linear-gradient(180deg, rgba(5,7,12,.88), transparent);
}

/* genre worlds: gallery, not a leftover mosaic */
body:has(#top) .gw-hero{
  border-color:rgba(57,69,94,.85);
  box-shadow:
    var(--polish-rim),
    0 0 0 1px rgba(125,226,255,.08),
    var(--e4);
}
body:has(#top) .gw-card.on{
  box-shadow:0 0 0 1px rgba(125,226,255,.28), 0 12px 28px -16px rgba(0,0,0,.7);
}
body:has(#top) .gw-fam.on{
  box-shadow:0 0 0 1px rgba(125,226,255,.18);
}

/* ===== buy: one $20 jewel, never a second plan ===== */
body:has(#top) #pricing .plan.best{
  border-color:rgba(125,226,255,.38);
  background:
    radial-gradient(80% 60% at 50% -10%, rgba(125,226,255,.12), transparent 55%),
    linear-gradient(180deg, rgba(125,226,255,.07), var(--s1) 48%);
  box-shadow:
    var(--polish-rim),
    0 0 0 1px rgba(125,226,255,.1),
    0 36px 80px -36px rgba(125,226,255,.38);
}
body:has(#top) #pricing .price b{
  background:var(--aurora-text);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:drop-shadow(0 8px 18px rgba(125,226,255,.2));
}
body:has(#top) #pricing .btn-aurora{
  box-shadow:0 14px 36px -16px rgba(125,226,255,.7);
}
body:has(#top) #buy-life{ display:none !important }

/* ===== login vault ===== */
body:has(#login-h){
  --s0:#05070c; --s1:#090d15; --s2:#0e131d; --s3:#141c29;
  --t1:#f4f1ea; --t2:#b9b5ac; --t3:#a49f95; --t4:#8a857b;
  --acc:#7de2ff; --acc-ink:#06080d;
  --bd:#1a2231;
  --aurora:linear-gradient(100deg,#5cf2b0 0%,#7de2ff 46%,#c77dff 100%);
  --f-disp:Constantia,Georgia,serif;
}
body:has(#login-h) .mesh{
  background:
    radial-gradient(ellipse 70% 50% at 12% -8%, rgba(125,226,255,.18), transparent 55%),
    radial-gradient(ellipse 50% 40% at 95% 8%, rgba(199,125,255,.11), transparent 50%),
    radial-gradient(ellipse 60% 30% at 50% 110%, rgba(232,213,163,.05), transparent 60%);
}
body:has(#login-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) nav{
  height:64px;
  background:rgba(5,7,12,.78);
  backdrop-filter:blur(20px) saturate(1.45);
  border-bottom-color:rgba(125,226,255,.14);
}
body:has(#login-h) .gem{
  width:22px; height:22px; border-radius:7px;
  background:var(--aurora);
  box-shadow:0 0 18px rgba(125,226,255,.4);
}
body:has(#login-h) .gem::after{ display:none }
body:has(#login-h) .card{
  max-width:560px;
  background:
    radial-gradient(90% 60% at 50% -8%, rgba(125,226,255,.1), transparent 50%),
    linear-gradient(180deg, rgba(20,28,41,.92), rgba(9,13,21,.96));
  border:1px solid rgba(125,226,255,.18);
  border-radius:22px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 30px 70px -32px rgba(0,0,0,.75),
    0 0 60px -28px rgba(125,226,255,.28);
}
body:has(#login-h) .kicker{
  font-family:"Cascadia Mono",Consolas,monospace;
  letter-spacing:.22em;
}
body:has(#login-h) h1{
  font-family:var(--f-disp);
  letter-spacing:-.016em;
}
body:has(#login-h) h1 em{
  background:linear-gradient(110deg,#fff 0%,#5eead4 32%,#a5f3fc 52%,#c4b5fd 72%,#e8d5a3 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
body:has(#login-h) input[type=text]{
  border-radius:12px;
  border-color:#1a2231;
  background:#04060a;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7);
}
body:has(#login-h) .btn{
  background:var(--aurora);
  color:var(--acc-ink);
  box-shadow:0 12px 32px -14px rgba(125,226,255,.7);
}
body:has(#login-h) nav a[href="/#pricing"]{
  height:36px; padding:0 14px; border-radius:999px;
  display:inline-flex; align-items:center;
  border:1px solid rgba(125,226,255,.42);
  background:rgba(125,226,255,.1);
  color:var(--acc);
  font-size:.82rem; font-weight:600;
}

/* ===== motion: hover and one-shot only ===== */
@media (prefers-reduced-motion:no-preference){
  body:has(#top) .card,
  body:has(#top) .step,
  body:has(#top) .skill-card,
  body:has(#top) .shotframe,
  body:has(#top) .frame,
  body:has(#top) .plan.best,
  body:has(#login-h) .card{
    transition:transform 240ms cubic-bezier(.22,1,.36,1), border-color 180ms, box-shadow 240ms, background 180ms;
  }
  body:has(#top) .hero-shot .shotframe{
    animation:aurora-shot-settle 900ms cubic-bezier(.22,1,.36,1) both;
  }
  @keyframes aurora-shot-settle{
    from{ opacity:0; transform:translateY(14px) }
    to{ opacity:1; transform:translateY(0) }
  }
  body:has(#login-h) .card{
    animation:aurora-shot-settle 800ms cubic-bezier(.22,1,.36,1) both;
  }
}

/* ===== mobile ===== */
@media (max-width:900px){
  body:has(#top) .shotframe,
  body:has(#top) .frame,
  body:has(#top) .film{
    transform:none;
  }
}
@media (max-width:620px){
  body:has(#top) .hero{
    min-height:0;
    padding-bottom:28px;
  }
  body:has(#top) .nav-cta{ min-width:0; padding:0 12px }
  body:has(#top) #pricing .plans{
    grid-template-columns:minmax(0,1fr) !important;
  }
  body:has(#login-h) main{ padding:28px 16px 40px }
  body:has(#login-h) .card{ padding:24px 18px }
}

@media (prefers-reduced-motion:reduce){
  body:has(#top) .hero-shot .shotframe,
  body:has(#login-h) .card{
    animation:none;
    transform:none;
  }
  body:has(#top) .g{ filter:none }
  body:has(#top) #pricing .price b{ filter:none }
}