/* ============================================================================
   4 U Songs v2 — ORCHID shared foundation (DESIGN_V2)
   Tokens + cross-page primitives lifted verbatim from v2-mockups/funnel-flow.html.
   Page-specific view CSS (chat, lyrics, paywall, checkout, listening) stays inline
   in each v2 page. Load order per page: <link> Google Fonts, then this file.
   ============================================================================ */

/* ---------- ORCHID TOKENS (locked palette A) ---------- */
:root{
  --g1:#c4b5fd; --g2:#34d399; --g3:#a78bfa;
  --stage:#101018; --page:#0b0e14;
  --glow1:rgba(167,139,250,.30); --glow2:rgba(52,211,153,.22);
  --glass:rgba(255,255,255,.05); --glass-2:rgba(255,255,255,.08);
  --hair:rgba(255,255,255,.10); --hair-2:rgba(255,255,255,.20);
  --txt:#f2f2f7; --dim:#9a9aa8; --dim-2:#6c6c7a;
  --disp:"Sora",sans-serif; --ui:"Montserrat",system-ui,sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
/* browser autofill paints inputs WHITE and breaks dark mode - repaint it dark, keep our text color */
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus{
  -webkit-box-shadow:0 0 0 1000px #14141f inset;box-shadow:0 0 0 1000px #14141f inset;
  -webkit-text-fill-color:#f2f2f7;caret-color:#f2f2f7;
  transition:background-color 9999s ease-out}
:root{color-scheme:dark}   /* without this the UA canvas default is WHITE - the strip above the header */
/* backstop: the body background is background-attachment:fixed, which iOS clips to the visual
   viewport instead of painting the whole canvas, leaving the safe-area strip unpainted */
html{scroll-behavior:smooth;background:var(--page)}
body{overflow-x:hidden;font-family:var(--ui);color:var(--txt);min-height:100vh;min-height:100dvh;
  background:radial-gradient(1000px 600px at 80% -8%,var(--glow1),transparent 60%),
             radial-gradient(800px 600px at 5% 15%,var(--glow2),transparent 58%),
             linear-gradient(180deg,var(--page),#0a0d13);
  background-attachment:fixed;-webkit-font-smoothing:antialiased}
img{max-width:100%}
.disp{font-family:var(--disp)}
.grad-t{background:linear-gradient(110deg,var(--g1) 15%,var(--g2) 60%,var(--g3));-webkit-background-clip:text;background-clip:text;color:transparent}

@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- PHONE FRAME (shared by app views) ---------- */
.stagewrap{display:flex;align-items:center;justify-content:center;padding:26px 16px;min-height:100vh;min-height:100dvh}
.phone{position:relative;width:min(400px,calc(100vw - 34px));
  height:min(820px,calc(100vh - 120px));height:min(820px,calc(100dvh - 120px));min-height:640px;border-radius:44px;
  /* overflow:clip (hidden = legacy fallback): overhanging bg layers otherwise make the frame silently
     scrollable (focus/scroll-into-view), shoving the whole UI up */
  background:var(--stage);border:1px solid rgba(255,255,255,.14);overflow:hidden;overflow:clip;
  box-shadow:0 40px 120px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.05)}
.phone::before{content:"";position:absolute;top:12px;left:50%;transform:translateX(-50%);width:110px;height:26px;
  border-radius:99px;background:#000;z-index:40}
.amb{position:absolute;inset:0;pointer-events:none;z-index:0}
.amb::before{content:"";position:absolute;width:120%;height:60%;left:-10%;top:-14%;
  background:radial-gradient(60% 60% at 60% 40%,var(--glow1),transparent 70%);filter:blur(28px)}
.amb::after{content:"";position:absolute;width:120%;height:55%;left:-10%;bottom:-12%;
  background:radial-gradient(55% 60% at 40% 60%,var(--glow2),transparent 70%);filter:blur(30px)}

/* progress bar: smooth fill, NO step numbers */
.pbar{position:absolute;top:57px;left:0;right:0;height:3px;border-radius:0;background:rgba(255,255,255,.10);z-index:40;overflow:hidden}
.pbar i{display:block;height:100%;width:0;border-radius:0;background:linear-gradient(90deg,var(--g1),var(--g2));
  box-shadow:0 0 12px var(--glow1);transition:width .6s cubic-bezier(.22,1,.36,1)}
/* ---------- STICKY TRANSLUCENT FUNNEL HEADER ----------
   z-index 41 clears the desktop fake-notch (.phone::before, z40); create.html neutralizes that
   notch entirely since this bar now owns the top edge. */
.vhead{position:absolute;top:0;left:0;right:0;z-index:41;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 11px) 14px 11px;
  background:rgba(11,14,20,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2);
  border-bottom:1px solid rgba(255,255,255,.07)}
.vt{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:16px;color:var(--txt);letter-spacing:.005em;white-space:nowrap}
.vt i{font-style:normal;color:#34d399}
.vt b{font-family:var(--ui);font-weight:500;font-size:13px;color:var(--dim);margin-left:7px}
.vsp{min-width:44px}  /* balances the 44px chevron hitbox so the title stays centered */
.vhead .bk{cursor:pointer;color:var(--txt);display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-11px 0}
.vhead .bk svg{width:22px;height:22px}
/* progress rides the header's bottom edge - self-anchoring, so it can't drift if the bar's height changes */
.vhead .pbar{position:absolute;top:auto;bottom:-1px;left:0;right:0}

.phead{position:absolute;top:64px;left:0;right:0;display:flex;justify-content:space-between;align-items:center;
  padding:0 22px;z-index:30;font-size:13px;color:var(--dim)}
.phead .bk{cursor:pointer;color:var(--txt);display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;margin:-12px 0 -12px -12px}
.phead .bk svg{width:22px;height:22px}
.phead .sk{cursor:pointer}

/* ---------- UNIFIED SONG BACKGROUND (neutral pre-preview; JS sets the real cover after) ----------
   scale() not negative inset: an overhanging child makes the overflow:hidden phone silently scrollable */
.songbg{position:absolute;inset:0;transform:scale(1.09);background:#0e0e16 center/cover;
  filter:blur(26px) brightness(.45) saturate(1.1);z-index:0}
.songbg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,16,24,.3),rgba(16,16,24,.88) 72%)}

/* ---------- VINYL ---------- */
.vinyl{position:relative;width:min(210px,56vw);border-radius:50%;
  box-shadow:0 26px 70px rgba(0,0,0,.7),0 0 34px var(--glow1);animation:spin 9s linear infinite}

/* ---------- PRIMARY CTA ---------- */
.rcta{width:100%;border:0;cursor:pointer;font-family:var(--ui);font-weight:700;font-size:15.5px;color:#0b0e14;
  padding:16px;border-radius:999px;background:linear-gradient(90deg,var(--g1),var(--g2));box-shadow:0 12px 36px var(--glow1)}
.rcta:disabled{opacity:.55;cursor:default}

/* ---------- BORDER BEAM (Orchid) — ring only, nothing inside the fill ---------- */
@property --bb-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.beam{position:relative;border-radius:999px}
.beam::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;pointer-events:none;
  padding:1.5px;background:conic-gradient(from var(--bb-angle),transparent 0 68%,rgba(196,181,253,.55) 82%,rgba(52,211,153,.6) 92%,transparent 99%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:bbspin 6.5s linear infinite;
  filter:drop-shadow(0 0 5px rgba(167,139,250,.3))}
@keyframes bbspin{to{--bb-angle:360deg}}
.beam-soft::before{animation-duration:9.5s;opacity:.6}
body.no-bb .beam::before{animation:none;background:linear-gradient(120deg,rgba(196,181,253,.35),rgba(52,211,153,.35))}
.bwrap{flex:1;display:flex}
.bwrap input{width:100%}

/* touch scroll containment inside the phone */
.chat,.paywrap,.lyrics,.lyxcard,.k3card,.scroll{overscroll-behavior:contain}

/* ---------- MOBILE: the page IS the phone (no phone-in-phone frame) ---------- */
@media (max-width:520px){
  .stagewrap{padding:0;align-items:stretch}
  .phone{width:100%;flex:1;height:auto;min-height:100vh;min-height:100dvh;border-radius:0;border:0;box-shadow:none}
  /* fake notch becomes a top scrim: scrolled content fades under the floating chrome instead of colliding */
  .phone::before{display:block;top:0;left:0;right:0;width:auto;height:calc(env(safe-area-inset-top,0px) + 64px);
    transform:none;border-radius:0;background:linear-gradient(180deg,rgba(11,14,20,.96) 40%,transparent);z-index:25;pointer-events:none}
  .pbar{top:calc(env(safe-area-inset-top,0px) + 57px)}
}

/* accessibility + battery: honor reduced-motion */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}
}