/* =========================================================================
   DanceOnMusic.com — premium.css
   A purely ADDITIVE enhancement layer that sits on top of style.css.
   It extends the existing "lit stage" identity (velvet dark + spotlight gold
   + magenta gel, Fraunces / Inter / Space Mono) with glassmorphism, gradient
   borders, spotlight-glow interactions, floating ambience, scroll-reveal and
   a light/dark theme — WITHOUT changing any existing markup contract.
   Nothing here removes or overrides core layout; it only elevates finish.
   ========================================================================= */

/* ---- extra design tokens (layered on the ones in style.css) ------------- */
:root{
  --glass-bg: rgba(23,15,34,0.55);
  --glass-brd: rgba(240,168,60,0.22);
  --glass-blur: 18px;
  --accent: var(--spot-gold);          /* user-selectable accent (JS overrides) */
  --accent-2: var(--spot-amber);
  --grad-accent: linear-gradient(135deg, var(--accent), var(--accent-2));
  --ring: 0 0 0 3px rgba(240,168,60,0.35);
  --lift: 0 18px 40px rgba(0,0,0,0.28);
  --ease-out: cubic-bezier(0.22,1,0.36,1);
  --ease-spring: cubic-bezier(0.34,1.56,0.64,1);   /* slight overshoot */
  --dur: .45s;
}

/* Light theme: repaint the "paper" sections brighter and lift the ink.
   The dark stage sections keep their identity; only paper zones shift. */
html[data-theme="light"]{
  --paper:#fbf8f2;
  --paper-2:#f1ece0;
  --ink:#1a1524;
  --ink-soft:#5a5368;
}
/* Explicit dark theme hook (default already dark-on-paper; kept for parity) */
html[data-theme="dark"]{
  --paper:#120d1b;
  --paper-2:#0d0916;
  --ink:#ece7f5;
  --ink-soft:#b3a9c4;
}
html[data-theme="dark"] body{background:var(--paper);}
html[data-theme="dark"] .feature-card,
html[data-theme="dark"] .teaser-card,
html[data-theme="dark"] .blog-card{
  background:rgba(255,255,255,0.03);
  border-color:rgba(255,255,255,0.08);
  color:var(--ink);
}
html[data-theme="dark"] .feature-card h3,
html[data-theme="dark"] .teaser-card h3,
html[data-theme="dark"] .blog-card h3{color:var(--ink);}
html[data-theme="dark"] .content-wrap h3{color:var(--ink);}
html[data-theme="dark"] .form-field input,
html[data-theme="dark"] .form-field textarea{
  background:rgba(255,255,255,0.04); color:var(--ink);
  border-color:rgba(255,255,255,0.12);
}

/* ---- global finish ------------------------------------------------------- */
::selection{background:rgba(240,168,60,0.32); color:#fff;}
html{scroll-padding-top:84px;}          /* sticky-nav-aware anchor scroll */

/* Custom slim scrollbar that matches the stage palette */
*{scrollbar-width:thin; scrollbar-color:rgba(240,168,60,0.45) transparent;}
*::-webkit-scrollbar{width:10px; height:10px;}
*::-webkit-scrollbar-thumb{
  background:linear-gradient(var(--accent),var(--accent-2));
  border-radius:20px; border:2px solid transparent; background-clip:content-box;
}
*::-webkit-scrollbar-track{background:transparent;}

/* A thin gradient scroll-progress bar pinned under the nav */
.scroll-progress{
  position:fixed; top:0; left:0; height:3px; width:0%; z-index:60;
  background:var(--grad-accent);
  box-shadow:0 0 12px rgba(240,168,60,0.7);
  transition:width .1s linear; pointer-events:none;
}

/* ---- nav: frosted glass + animated brand glow --------------------------- */
.site-nav{
  transition:background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease;
}
.site-nav.scrolled{
  background:rgba(11,8,16,0.72);
  box-shadow:0 8px 30px rgba(0,0,0,0.35);
  backdrop-filter:blur(20px) saturate(140%);
  -webkit-backdrop-filter:blur(20px) saturate(140%);
}
.brand .brand-mark{transition:transform .5s var(--ease-spring), filter .4s ease;}
.brand:hover .brand-mark{transform:rotate(-12deg) scale(1.08); filter:drop-shadow(0 0 14px rgba(240,168,60,.9));}
/* animated underline that grows from the left on hover */
.nav-links a{position:relative;}
.nav-links a::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:100%;
  background:var(--grad-accent); border-radius:2px;
  transform:scaleX(0); transform-origin:left; transition:transform .35s var(--ease-out);
}
.nav-links a:hover::after, .nav-links a.active::after{transform:scaleX(1);}

/* ---- reusable ripple (attached by premium.js on .btn / control buttons) -- */
.rippleable{position:relative; overflow:hidden;}
.ripple{
  position:absolute; border-radius:50%; transform:scale(0);
  background:rgba(255,255,255,0.45); pointer-events:none;
  animation:ripple .6s var(--ease-out) forwards; mix-blend-mode:screen;
}
@keyframes ripple{to{transform:scale(2.6); opacity:0;}}

/* ---- buttons: springy press + sheen ------------------------------------- */
.btn, .play-btn, .mode-btn, .gender-btn, .diff-btn{
  transition:transform .28s var(--ease-spring), box-shadow .3s ease, background .3s ease, border-color .3s ease, color .3s ease !important;
}
.btn:active, .play-btn:not(:disabled):active,
.mode-btn:active, .gender-btn:active, .diff-btn:active{transform:scale(.94) !important;}
.btn-gold{position:relative; overflow:hidden;}
.btn-gold::before{
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.55),transparent);
  transform:skewX(-20deg); transition:left .6s var(--ease-out);
}
.btn-gold:hover::before{left:140%;}

/* control-panel selector buttons: gradient border ring when active */
.mode-btn.active, .gender-btn.active, .diff-btn.active{
  position:relative;
}
.mode-btn.active::after, .gender-btn.active::after, .diff-btn.active::after{
  content:""; position:absolute; inset:-2px; border-radius:40px; padding:2px;
  background:var(--grad-accent);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:.9; pointer-events:none;
}

/* ---- stage shell: gradient border + soft float -------------------------- */
.stage-shell{
  position:relative;
  transition:box-shadow .6s ease, transform .6s var(--ease-out);
}
.stage-shell::before{
  content:""; position:absolute; inset:0; border-radius:28px; padding:1.5px;
  background:linear-gradient(135deg, rgba(240,168,60,.6), rgba(217,79,140,.4), rgba(240,168,60,.2));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none; opacity:.7;
}
/* a slow breathing glow so the stage feels "live" even at rest */
.stage-container{position:relative;}
.stage-container::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:4;
  background:radial-gradient(120% 80% at 50% -10%, rgba(240,168,60,0.10), transparent 55%);
  mix-blend-mode:screen;
}

/* frosted overlay chips already exist; add a hairline gradient edge */
.step-display{border-top:1px solid rgba(255,255,255,0.06);}

/* ---- premium card interactions (feature / teaser / blog) ---------------- */
.feature-card, .teaser-card, .blog-card{
  position:relative;
  transition:transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) ease !important;
  will-change:transform;
}
.feature-card::before, .teaser-card::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px;
  background:linear-gradient(135deg, var(--accent), transparent 60%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  opacity:0; transition:opacity var(--dur) ease; pointer-events:none;
}
.feature-card:hover, .teaser-card:hover, .blog-card:hover{
  transform:translateY(-8px) scale(1.012);
  box-shadow:0 26px 50px rgba(32,26,43,.16);
}
.feature-card:hover::before, .teaser-card:hover::before{opacity:1;}
.feature-icon{transition:transform .5s var(--ease-spring), box-shadow .4s ease;}
.feature-card:hover .feature-icon{transform:rotate(-8deg) scale(1.12); box-shadow:0 8px 20px rgba(240,168,60,.5);}
.blog-card:hover .thumb{filter:brightness(1.15) saturate(1.2);}
.blog-card .thumb{transition:filter .5s ease;}

/* ---- scroll reveal (JS toggles .in-view) -------------------------------- */
[data-reveal]{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease-out), transform .7s var(--ease-out);
  will-change:opacity, transform;
}
[data-reveal].in-view{opacity:1; transform:none;}
[data-reveal-delay="1"]{transition-delay:.08s;}
[data-reveal-delay="2"]{transition-delay:.16s;}
[data-reveal-delay="3"]{transition-delay:.24s;}

/* ---- homepage hero ambience (canvas particles + parallax + gradient) ---- */
#heroFx{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.9;
}
header{position:relative;}
header > .container{position:relative; z-index:2;}
/* animated aurora wash behind the hero copy */
.hero-aurora{
  position:absolute; inset:-10% -10% auto -10%; height:120%; z-index:1;
  pointer-events:none; filter:blur(60px); opacity:.5;
  background:
    radial-gradient(40% 60% at 20% 30%, rgba(240,168,60,.35), transparent 60%),
    radial-gradient(45% 55% at 80% 20%, rgba(217,79,140,.32), transparent 60%),
    radial-gradient(50% 50% at 50% 80%, rgba(122,90,160,.30), transparent 60%);
  background-size:200% 200%;
  animation:auroraDrift 18s ease-in-out infinite alternate;
}
@keyframes auroraDrift{
  0%{background-position:0% 0%;}
  100%{background-position:100% 100%;}
}
/* subtle parallax hooks set by JS via --px / --py */
.parallax{transform:translate3d(calc(var(--px,0)*1px), calc(var(--py,0)*1px), 0);}

/* ---- live stat counters strip ------------------------------------------- */
.stat-strip{
  display:grid; grid-template-columns:repeat(4,1fr); gap:18px;
  max-width:900px; margin:0 auto; padding:0 24px;
}
.stat-card{
  background:var(--glass-bg); backdrop-filter:blur(var(--glass-blur));
  -webkit-backdrop-filter:blur(var(--glass-blur));
  border:1px solid var(--glass-brd); border-radius:18px;
  padding:22px 16px; text-align:center;
  transition:transform .4s var(--ease-out), box-shadow .4s ease;
}
.stat-card:hover{transform:translateY(-6px); box-shadow:0 0 30px rgba(240,168,60,.18);}
.stat-num{
  font-family:'Fraunces',serif; font-size:clamp(1.6rem,3.4vw,2.4rem);
  font-weight:600; color:var(--accent);
  text-shadow:0 0 22px rgba(240,168,60,.35);
  line-height:1; display:block;
}
.stat-label{
  font-family:'Space Mono',monospace; font-size:.7rem; letter-spacing:.1em;
  text-transform:uppercase; color:#a89bb5; margin-top:8px; display:block;
}
@media (max-width:640px){ .stat-strip{grid-template-columns:1fr 1fr;} }

/* ---- floating settings dock + panel ------------------------------------- */
.fab{
  position:fixed; right:20px; bottom:20px; z-index:120;
  width:54px; height:54px; border-radius:50%; border:none; cursor:pointer;
  background:var(--grad-accent); color:#1a1108;
  box-shadow:0 10px 30px rgba(240,168,60,.5);
  display:flex; align-items:center; justify-content:center;
  font-size:1.35rem; transition:transform .4s var(--ease-spring), box-shadow .3s ease;
}
.fab:hover{transform:rotate(45deg) scale(1.08); box-shadow:0 14px 40px rgba(240,168,60,.7);}
.fab svg{width:24px; height:24px; display:block;}

.settings-panel{
  position:fixed; right:20px; bottom:86px; z-index:121; width:min(320px,calc(100vw - 40px));
  background:rgba(17,11,24,0.82); backdrop-filter:blur(22px) saturate(140%);
  -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid var(--glass-brd); border-radius:22px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
  padding:22px; color:#e9ddf3;
  transform:translateY(16px) scale(.96); opacity:0; pointer-events:none;
  transition:transform .4s var(--ease-spring), opacity .3s ease;
}
.settings-panel.open{transform:none; opacity:1; pointer-events:auto;}
.settings-panel h4{
  font-family:'Space Mono',monospace; font-size:.78rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent); margin:0 0 6px;
}
.settings-panel .set-row{margin:16px 0;}
.settings-panel .set-row > span{
  display:block; font-size:.82rem; color:#b8a0c8; margin-bottom:8px;
  font-family:'Space Mono',monospace; letter-spacing:.05em;
}
.seg{display:flex; gap:8px;}
.seg button{
  flex:1; padding:9px 0; border-radius:12px; cursor:pointer; font-weight:600;
  font-size:.82rem; color:#ddd; background:rgba(255,255,255,0.05);
  border:1.5px solid rgba(255,255,255,0.12); transition:all .25s ease;
}
.seg button[aria-pressed="true"]{
  background:var(--grad-accent); color:#1a1108; border-color:transparent;
  box-shadow:0 0 18px rgba(240,168,60,.45);
}
.swatches{display:flex; gap:12px; flex-wrap:wrap;}
.swatch{
  width:30px; height:30px; border-radius:50%; cursor:pointer; border:2px solid transparent;
  transition:transform .3s var(--ease-spring), box-shadow .25s ease;
}
.swatch:hover{transform:scale(1.15);}
.swatch[aria-pressed="true"]{border-color:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.25);}
.settings-hint{font-size:.72rem; color:#8a7a9a; margin:14px 0 0; line-height:1.5;}

/* ---- keyboard shortcut cheatsheet --------------------------------------- */
.shortcut-modal{
  position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center;
  background:rgba(6,4,10,0.6); backdrop-filter:blur(6px);
  opacity:0; pointer-events:none; transition:opacity .3s ease;
}
.shortcut-modal.open{opacity:1; pointer-events:auto;}
.shortcut-card{
  background:rgba(17,11,24,0.92); border:1px solid var(--glass-brd);
  border-radius:22px; padding:28px 30px; width:min(420px,calc(100vw - 40px));
  box-shadow:0 30px 70px rgba(0,0,0,.6); color:#e9ddf3;
  transform:scale(.94); transition:transform .4s var(--ease-spring);
}
.shortcut-modal.open .shortcut-card{transform:none;}
.shortcut-card h3{color:var(--accent); font-size:1.2rem; margin:0 0 16px;}
.shortcut-card dl{display:grid; grid-template-columns:auto 1fr; gap:10px 18px; margin:0;}
.shortcut-card kbd{
  font-family:'Space Mono',monospace; font-size:.78rem;
  background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.16);
  border-radius:7px; padding:3px 9px; color:#fbe9c8; white-space:nowrap;
}
.shortcut-card dd{margin:0; color:#c9bcd6; font-size:.9rem; align-self:center;}

/* ---- toast notifications ------------------------------------------------ */
.toast-wrap{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:210; display:flex; flex-direction:column; gap:10px; align-items:center;}
.toast{
  background:rgba(17,11,24,0.9); backdrop-filter:blur(14px);
  border:1px solid var(--glass-brd); border-left:3px solid var(--accent);
  border-radius:14px; padding:12px 20px; color:#f0e6f8; font-size:.9rem;
  box-shadow:0 14px 34px rgba(0,0,0,.4);
  opacity:0; transform:translateY(12px); transition:opacity .35s ease, transform .35s var(--ease-out);
}
.toast.show{opacity:1; transform:none;}

/* ---- form inputs: focus glow ------------------------------------------- */
.form-field input, .form-field textarea, .style-select{
  transition:border-color .3s ease, box-shadow .3s ease, background .3s ease !important;
}
.form-field input:focus, .form-field textarea:focus{
  outline:none !important; border-color:var(--accent) !important;
  box-shadow:0 0 0 4px rgba(240,168,60,.18) !important;
}

/* ---- accessibility: strong visible focus ring everywhere ---------------- */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible{
  outline:none !important; box-shadow:var(--ring) !important; border-radius:8px;
}
.skip-link{
  position:absolute; left:12px; top:-60px; z-index:300;
  background:var(--grad-accent); color:#1a1108; padding:10px 18px;
  border-radius:0 0 12px 12px; font-weight:700; text-decoration:none;
  transition:top .3s var(--ease-out);
}
.skip-link:focus{top:0;}

/* ---- high-contrast opt-in (JS toggles html[data-contrast="high"]) ------- */
html[data-contrast="high"]{
  --ink:#000; --ink-soft:#111;
}
html[data-contrast="high"] .nav-links a{color:#fff;}
html[data-contrast="high"] p{color:#111;}
html[data-contrast="high"] .btn-gold{outline:2px solid #000;}

/* ---- mobile polish: bigger touch targets, safe-area ---------------------- */
@media (max-width:760px){
  .mode-btn, .gender-btn, .diff-btn{min-height:44px;}
  .play-btn{min-height:48px; width:100%;}
  .file-label{min-height:44px; display:inline-flex; align-items:center;}
  .fab{right:16px; bottom:calc(16px + env(safe-area-inset-bottom));}
  .settings-panel{right:16px; bottom:82px;}
}

/* ---- respect reduced motion (belt & suspenders on top of style.css) ----- */
@media (prefers-reduced-motion: reduce){
  .hero-aurora{animation:none;}
  [data-reveal]{opacity:1 !important; transform:none !important;}
  .btn-gold::before{display:none;}
  *{animation-duration:.001ms !important; transition-duration:.001ms !important;}
}

/* ---- print: hide chrome ------------------------------------------------- */
@media print{
  .fab,.settings-panel,.scroll-progress,.toast-wrap,.shortcut-modal,#heroFx,.hero-aurora{display:none !important;}
}