/* ─────────────────────────────────────────────────────────────
   Ospis AI — Tweaks: Vibe / Tempo / Texture
   Three expressive controls that reshape the page feel.
   ───────────────────────────────────────────────────────────── */

/* ─── VIBE: light (default) ──────────────────────────────── */
/* base palette already set in styles.css for vibe="light" */

/* ─── VIBE: twilight — paper-warm, golden-hour ───────────── */
html[data-vibe="twilight"] body{
  background:#F8EFDD;color:#2A1F12;
}
html[data-vibe="twilight"] .ambient .orb-1{background:radial-gradient(circle,#E8B66A 0%,transparent 70%);opacity:.55}
html[data-vibe="twilight"] .ambient .orb-2{background:radial-gradient(circle,#D4A14B 0%,transparent 70%);opacity:.4;mix-blend-mode:multiply}
html[data-vibe="twilight"] .ambient .orb-3{background:radial-gradient(circle,#FFE9B8 0%,transparent 70%);opacity:.6}
html[data-vibe="twilight"] .grid-bg{
  background-image:
    linear-gradient(rgba(80,50,20,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(80,50,20,.06) 1px,transparent 1px);
}
html[data-vibe="twilight"] .nav,
html[data-vibe="twilight"] .nav.scrolled{background:rgba(248,239,221,.85);border-bottom-color:rgba(80,50,20,.12)}
html[data-vibe="twilight"] .nav-wordmark{color:#2A1F12}
html[data-vibe="twilight"] .nav-links a{color:rgba(42,31,18,.7)}
html[data-vibe="twilight"] .nav-links a:hover{color:#2A1F12}
html[data-vibe="twilight"] .feature,
html[data-vibe="twilight"] .step{background:rgba(255,255,255,.7);border-color:rgba(80,50,20,.12)}
html[data-vibe="twilight"] .feature:hover,
html[data-vibe="twilight"] .step:hover{background:rgba(255,255,255,.92);border-color:rgba(176,121,32,.45)}
html[data-vibe="twilight"] .feature p,
html[data-vibe="twilight"] .step p{color:rgba(42,31,18,.72)}
html[data-vibe="twilight"] .section-sub,
html[data-vibe="twilight"] .hero-sub{color:rgba(42,31,18,.7)}
html[data-vibe="twilight"] .feature-mini,
html[data-vibe="twilight"] .feature-grid-mini{background:rgba(232,182,106,.12);border-color:rgba(80,50,20,.12)}
html[data-vibe="twilight"] .stack-card{background:rgba(255,255,255,.94);border-color:rgba(80,50,20,.12)}
html[data-vibe="twilight"] .stack-core{background:radial-gradient(circle at 30% 30%,#3A2614 0%,#1F140A 70%);color:#FFE9B8;border-color:rgba(212,161,75,.5)}
html[data-vibe="twilight"] .cta-card{
  background:radial-gradient(ellipse at 50% 0%,rgba(212,161,75,.25) 0%,transparent 60%),
    linear-gradient(180deg,#3A2614 0%,#1F140A 100%);
  color:#FFE9B8;border-color:rgba(212,161,75,.4);
}
html[data-vibe="twilight"] .float-card{background:rgba(255,255,255,.92);border-color:rgba(80,50,20,.12)}
html[data-vibe="twilight"] .footer{color:#2A1F12;border-top-color:rgba(80,50,20,.12)}
html[data-vibe="twilight"] .footer-cols a,
html[data-vibe="twilight"] .footer-blurb{color:rgba(42,31,18,.7)}
html[data-vibe="twilight"] .trust-row{color:#2A1F12}
html[data-vibe="twilight"] .hero-eyebrow,
html[data-vibe="twilight"] .btn-ghost{background:rgba(255,255,255,.7);border-color:rgba(80,50,20,.18);color:#2A1F12}

/* ─── VIBE: midnight — after-dark cockpit ────────────────── */
html[data-vibe="midnight"] body{
  background:#0A1A2E;color:#E8EEF6;
}
html[data-vibe="midnight"] .ambient .orb-1{background:radial-gradient(circle,#D4A14B 0%,transparent 70%);opacity:.35;mix-blend-mode:screen}
html[data-vibe="midnight"] .ambient .orb-2{background:radial-gradient(circle,#1B4374 0%,transparent 70%);opacity:.6;mix-blend-mode:screen}
html[data-vibe="midnight"] .ambient .orb-3{background:radial-gradient(circle,#F0D080 0%,transparent 70%);opacity:.22;mix-blend-mode:screen}
html[data-vibe="midnight"] .grid-bg{
  background-image:
    linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
}
html[data-vibe="midnight"] .nav,
html[data-vibe="midnight"] .nav.scrolled{background:rgba(10,26,46,.82);border-bottom-color:rgba(255,255,255,.1)}
html[data-vibe="midnight"] .nav-wordmark{color:#E8EEF6}
html[data-vibe="midnight"] .nav-wordmark em{color:#F0D080}
html[data-vibe="midnight"] .nav-links a{color:rgba(232,238,246,.65)}
html[data-vibe="midnight"] .nav-links a:hover{color:#E8EEF6}
html[data-vibe="midnight"] .hero-eyebrow{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);color:rgba(232,238,246,.7)}
html[data-vibe="midnight"] .hero-sub,
html[data-vibe="midnight"] .section-sub{color:rgba(232,238,246,.7)}
html[data-vibe="midnight"] .feature,
html[data-vibe="midnight"] .step{
  background:linear-gradient(180deg,rgba(20,50,88,.55) 0%,rgba(15,37,64,.55) 100%);
  border-color:rgba(255,255,255,.1);backdrop-filter:blur(8px);
}
html[data-vibe="midnight"] .feature:hover,
html[data-vibe="midnight"] .step:hover{
  background:linear-gradient(180deg,rgba(20,50,88,.7) 0%,rgba(15,37,64,.7) 100%);
  border-color:rgba(212,161,75,.4);
}
html[data-vibe="midnight"] .feature p,
html[data-vibe="midnight"] .step p{color:rgba(232,238,246,.7)}
html[data-vibe="midnight"] .feature-icon{
  background:linear-gradient(135deg,rgba(212,161,75,.2) 0%,rgba(212,161,75,.05) 100%);
  border-color:rgba(212,161,75,.3);color:#F0D080;
}
html[data-vibe="midnight"] .feature-mini,
html[data-vibe="midnight"] .feature-grid-mini{background:rgba(0,0,0,.25);border-color:rgba(255,255,255,.08)}
html[data-vibe="midnight"] .stack-card{
  background:linear-gradient(180deg,rgba(20,50,88,.85) 0%,rgba(15,37,64,.85) 100%);
  border-color:rgba(255,255,255,.1);
}
html[data-vibe="midnight"] .sc-name{color:rgba(232,238,246,.7)}
html[data-vibe="midnight"] .sc-x{color:#FCA5A5}
html[data-vibe="midnight"] .stack-core{
  background:radial-gradient(circle at 30% 30%,#1B4374 0%,#0A1A2E 70%);
  color:#E8EEF6;
}
html[data-vibe="midnight"] .float-card{
  background:linear-gradient(180deg,rgba(20,50,88,.92) 0%,rgba(15,37,64,.92) 100%);
  border-color:rgba(255,255,255,.14);color:#E8EEF6;
}
html[data-vibe="midnight"] .fc-name{color:rgba(232,238,246,.7)}
html[data-vibe="midnight"] .fc-msg-body{color:#E8EEF6}
html[data-vibe="midnight"] .fc-msg-name{color:#F0D080}
html[data-vibe="midnight"] .pill-ok{background:rgba(34,197,94,.15);color:#86EFAC}
html[data-vibe="midnight"] .pill-warn{background:rgba(245,158,11,.15);color:#FCD34D}
html[data-vibe="midnight"] .pill-bad{background:rgba(220,38,38,.15);color:#FCA5A5}
html[data-vibe="midnight"] .step-num{color:#F0D080;background:rgba(212,161,75,.1);border-color:rgba(212,161,75,.25)}
html[data-vibe="midnight"] .kicker{color:#F0D080;border-color:rgba(212,161,75,.3);background:rgba(212,161,75,.06)}
html[data-vibe="midnight"] .grad-text,
html[data-vibe="midnight"] .hero-stats strong,
html[data-vibe="midnight"] .feature-grid-mini strong{
  background:linear-gradient(120deg,#F0D080 0%,#D4A14B 60%,#FFFFFF 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
html[data-vibe="midnight"] .footer{color:#E8EEF6;border-top-color:rgba(255,255,255,.1)}
html[data-vibe="midnight"] .footer-cols a,
html[data-vibe="midnight"] .footer-blurb{color:rgba(232,238,246,.7)}
html[data-vibe="midnight"] .footer-tag{color:#F0D080}
html[data-vibe="midnight"] .footer-cols a:hover{color:#F0D080}
html[data-vibe="midnight"] .trust-row{color:#E8EEF6}
html[data-vibe="midnight"] .btn-ghost{background:rgba(255,255,255,.05);color:#E8EEF6;border-color:rgba(255,255,255,.18)}
html[data-vibe="midnight"] .btn-ghost:hover{background:rgba(255,255,255,.1)}
html[data-vibe="midnight"] .section-dark{background:linear-gradient(180deg,transparent 0%,rgba(0,0,0,.3) 50%,transparent 100%)}

/* ─── TEMPO: calm (default) — already in styles.css ─────── */

/* ─── TEMPO: spirited — punchier motion ──────────────────── */
html[data-tempo="spirited"] .feature{transition-duration:.25s}
html[data-tempo="spirited"] .feature:hover{transform:translateY(-10px) scale(1.015)}
html[data-tempo="spirited"] .step:hover{transform:translateY(-12px) rotateX(4deg) scale(1.02)}
html[data-tempo="spirited"] .stack-core{animation:floatBig 3.5s ease-in-out infinite}
html[data-tempo="spirited"] .eyebrow-dot{animation:pulse 1.2s ease-in-out infinite}
html[data-tempo="spirited"] .ambient .orb-1{animation:driftA 14s ease-in-out infinite}
html[data-tempo="spirited"] .ambient .orb-2{animation:driftB 18s ease-in-out infinite}
html[data-tempo="spirited"] .ambient .orb-3{animation:driftC 16s ease-in-out infinite}
html[data-tempo="spirited"] .btn-primary:hover{transform:translateY(-3px) scale(1.03)}
@keyframes floatBig{
  0%,100%{transform:translate(-50%,-50%) translateZ(120px) translateY(0) rotate(0deg)}
  50%{transform:translate(-50%,-50%) translateZ(120px) translateY(-16px) rotate(2deg)}
}
@keyframes driftA{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-40px,30px)}
}
@keyframes driftB{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(60px,-40px)}
}
@keyframes driftC{
  0%,100%{transform:translate(0,0)}
  50%{transform:translate(-30px,-50px)}
}

/* ─── TEXTURE: crisp (default) — already in styles.css ─── */

/* ─── TEXTURE: frosted — heavy glass everywhere ──────────── */
html[data-texture="frosted"] .feature,
html[data-texture="frosted"] .step,
html[data-texture="frosted"] .stack-card,
html[data-texture="frosted"] .float-card{
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  background:rgba(255,255,255,.45);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 20px 60px -20px rgba(20,50,90,.25);
}
html[data-vibe="midnight"][data-texture="frosted"] .feature,
html[data-vibe="midnight"][data-texture="frosted"] .step,
html[data-vibe="midnight"][data-texture="frosted"] .stack-card,
html[data-vibe="midnight"][data-texture="frosted"] .float-card{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.1),
    0 20px 60px -20px rgba(0,0,0,.5);
}
html[data-vibe="twilight"][data-texture="frosted"] .feature,
html[data-vibe="twilight"][data-texture="frosted"] .step,
html[data-vibe="twilight"][data-texture="frosted"] .stack-card,
html[data-vibe="twilight"][data-texture="frosted"] .float-card{
  background:rgba(255,255,255,.55);
  border:1px solid rgba(255,255,255,.7);
}
html[data-texture="frosted"] .feature-icon{
  background:rgba(255,255,255,.4);
  border:1px solid rgba(255,255,255,.7);
  backdrop-filter:blur(8px);
}
html[data-vibe="midnight"][data-texture="frosted"] .feature-icon{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.18);
}
html[data-texture="frosted"] .nav,
html[data-texture="frosted"] .nav.scrolled{
  backdrop-filter:blur(28px) saturate(200%);
  -webkit-backdrop-filter:blur(28px) saturate(200%);
}

/* ─── TEXTURE: editorial — serif-led, paper, ruled ───────── */
html[data-texture="editorial"] body{
  font-family:'Fraunces',Georgia,serif;
}
html[data-texture="editorial"] .nav-wordmark,
html[data-texture="editorial"] .nav-links a,
html[data-texture="editorial"] .footer-cols a,
html[data-texture="editorial"] .footer-cols h4{
  font-family:'Inter',sans-serif;
}
html[data-texture="editorial"] .hero-title,
html[data-texture="editorial"] .section-title,
html[data-texture="editorial"] .cta-title,
html[data-texture="editorial"] .feature h3,
html[data-texture="editorial"] .step h3,
html[data-texture="editorial"] .pc-name{
  font-family:'Fraunces',Georgia,serif;font-weight:300;
  letter-spacing:-.025em;
}
html[data-texture="editorial"] .hero-title{font-style:italic;font-weight:400}
html[data-texture="editorial"] .feature,
html[data-texture="editorial"] .step{
  border-radius:6px;
  background:rgba(255,250,242,.85);
  border:1px solid rgba(80,50,20,.18);
  box-shadow:none;
  position:relative;
}
html[data-texture="editorial"] .feature::before,
html[data-texture="editorial"] .step::before{
  content:'';position:absolute;top:0;left:32px;right:32px;height:1px;
  background:rgba(80,50,20,.25);
}
html[data-texture="editorial"] .feature:hover,
html[data-texture="editorial"] .step:hover{
  border-color:rgba(176,121,32,.55);
  background:rgba(255,250,242,1);
  transform:translateY(-3px);
}
html[data-vibe="midnight"][data-texture="editorial"] .feature,
html[data-vibe="midnight"][data-texture="editorial"] .step{
  background:rgba(15,37,64,.4);border-color:rgba(212,161,75,.25);
}
html[data-vibe="midnight"][data-texture="editorial"] .feature::before,
html[data-vibe="midnight"][data-texture="editorial"] .step::before{
  background:rgba(212,161,75,.35);
}
html[data-texture="editorial"] .kicker{
  font-family:'Fraunces',serif;font-style:italic;font-weight:400;text-transform:none;
  letter-spacing:0;font-size:13px;border:none;background:transparent;padding:0;
  color:#8A5C18;border-bottom:1px solid rgba(176,121,32,.4);border-radius:0;
}
html[data-texture="editorial"] .feature-icon{
  border-radius:50%;
}
html[data-texture="editorial"] .step-num{
  font-family:'Fraunces',serif;font-style:italic;font-size:34px;font-weight:300;
  background:transparent;border:none;padding:0;letter-spacing:-.02em;
  color:#B07920;
}
html[data-texture="editorial"] .nav-cta,
html[data-texture="editorial"] .btn-primary{
  border-radius:4px;
}
html[data-texture="editorial"] .btn-ghost{
  border-radius:4px;border-style:solid;
}
html[data-texture="editorial"] .feature-mini,
html[data-texture="editorial"] .feature-grid-mini{
  background:rgba(80,50,20,.04);
  border:none;border-top:1px solid rgba(80,50,20,.18);
  border-radius:0;padding:18px 0 0;
}
html[data-vibe="midnight"][data-texture="editorial"] .feature-mini,
html[data-vibe="midnight"][data-texture="editorial"] .feature-grid-mini{
  border-top-color:rgba(212,161,75,.25);background:transparent;
}

/* responsive — keep tweaks panel reachable */
@media (max-width:600px){
  .otw-panel{width:calc(100vw - 32px);right:16px;bottom:16px}
}