/* ============================================================
   scoy.ai — shared stylesheet
   Brand tokens, base resets, keyframes, range inputs, and the
   hover classes that re-express the prototype's (no-op) style-hover
   attributes as real CSS. Pages keep their inline layout styles for
   pixel fidelity; hover overrides use !important to win over inline.
   ============================================================ */

:root{
  --navy:#0B111E;
  --navy-2:#0F1624;
  --navy-3:#131B2C;
  --cream:#FEECDA;
  --cream-dim:#E7D8C4;
  --gold:#8B6D48;
  --gold-2:#B48A5A;
  --slate:#7886A1;
  --line:rgba(254,236,218,0.12);
  --line-2:rgba(254,236,218,0.22);
  --serif:"Instrument Serif","Instrument Serif Fallback",Georgia,serif;
  --sans:"Neue Haas Grotesk Display","PP Neue Montreal",ui-sans-serif,system-ui,-apple-system,sans-serif;
}

/* --- base reset (from prototype) --------------------------- */
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; background:#0B111E; }
body{ overflow-x:hidden; }
::selection{ background:rgba(180,138,90,0.32); color:#FEECDA; }
a{ color:inherit; }
img,svg{ display:block; max-width:100%; }
button{ font-family:inherit; }

/* Studio is a fixed full-screen surface — scope its no-scroll
   rule so it can never leak to the scrolling pages. */
body.studio{ overflow:hidden; }

/* --- keyframes (every page's animations, original names) --- */
@keyframes scoySpin{ to{ transform:rotate(360deg); } }
@keyframes scoyBreathe{ 0%,100%{ transform:scale(1); opacity:.82; } 50%{ transform:scale(1.16); opacity:1; } }
@keyframes scoyDot{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
@keyframes scoyGlow{ 0%{ opacity:.6; transform:scale(1); } 100%{ opacity:1; transform:scale(1.07); } }
@keyframes jgPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
@keyframes aoPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }
@keyframes aoSpin{ to{ transform:rotate(360deg); } }
@keyframes aoBreathe{ 0%,100%{ transform:scale(1); opacity:.8; } 50%{ transform:scale(1.12); opacity:1; } }
@keyframes aoDash{ to{ stroke-dashoffset:-100; } }
@keyframes btPulse{ 0%,100%{ opacity:1; } 50%{ opacity:.4; } }

/* --- range inputs (line-art controls) --------------------- */
input.scoy-range{ -webkit-appearance:none; appearance:none; width:100%; height:3px; border-radius:999px; background:rgba(254,236,218,0.18); outline:none; cursor:pointer; }
input.scoy-range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:14px; height:14px; border-radius:50%; background:#FEECDA; border:2px solid #B48A5A; cursor:pointer; transition:transform .15s; }
input.scoy-range::-webkit-slider-thumb:hover{ transform:scale(1.18); }
input.scoy-range::-moz-range-thumb{ width:12px; height:12px; border-radius:50%; background:#FEECDA; border:2px solid #B48A5A; cursor:pointer; }

/* --- studio dock scrollbar -------------------------------- */
.studio-scroll::-webkit-scrollbar{ width:8px; }
.studio-scroll::-webkit-scrollbar-thumb{ background:rgba(254,236,218,0.14); border-radius:999px; }

/* ============================================================
   Hover classes — re-express the prototype's design intent.
   Inline base styles win over plain stylesheet rules, so the
   hover overrides use !important. Transitions sit on the base
   class (inline rarely sets transition, so these apply).
   ============================================================ */

.sc-pill-primary{ transition:background .2s ease, color .2s ease; }
.sc-pill-primary:hover{ background:var(--gold-2) !important; }

.sc-pill-ghost{ transition:border-color .2s ease, background .2s ease, color .2s ease; }
.sc-pill-ghost:hover{ border-color:var(--cream) !important; background:rgba(254,236,218,0.05) !important; }

.sc-pill-ghost--gold{ transition:border-color .2s ease, color .2s ease; }
.sc-pill-ghost--gold:hover{ border-color:var(--gold-2) !important; color:var(--gold-2) !important; }

.sc-nav-link{ transition:opacity .2s ease; }
.sc-nav-link:hover{ opacity:.6 !important; }

.sc-backlink{ transition:color .2s ease; }
.sc-backlink:hover{ color:var(--gold-2) !important; }

.sc-project-card:hover{ border-color:var(--line-2) !important; background:var(--navy-3) !important; transform:translateY(-3px) !important; }

.sc-toolbar-btn{ transition:border-color .2s ease, color .2s ease; }
.sc-toolbar-btn:hover{ border-color:var(--gold-2) !important; color:var(--gold-2) !important; }

/* slate icon/text buttons that brighten to cream (Reset / Close) */
.sc-btn-slate{ transition:color .2s ease, border-color .2s ease; }
.sc-btn-slate:hover{ color:var(--cream) !important; }

.sc-footer-link{ transition:color .2s ease; }
.sc-footer-link:hover{ color:var(--cream) !important; }

/* JS-built chips (studio feature modes + studio presets). Base
   styles are inline from the JS builders; hover needs !important
   and :not(.is-active) so it never overrides the selected look. */
.sc-mode-chip{ transition:all .2s ease; }
.sc-mode-chip:not(.is-active):hover{ border-color:var(--gold-2) !important; color:var(--gold-2) !important; }
.sc-preset-chip{ transition:border-color .2s ease, color .2s ease; }
.sc-preset-chip:hover{ border-color:var(--gold-2) !important; color:var(--gold-2) !important; }

/* --- a11y --------------------------------------------------- */
:focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; }
a:focus-visible, button:focus-visible{ outline:2px solid var(--gold-2); outline-offset:3px; }

/* --- reduced motion (lifted from the live scoy-agency theme) - */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:0.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.001ms !important;
  }
  html{ scroll-behavior:auto; }
}