/* FLUX — kinetic electronics styles. Dark, neon, alive. */

:root { color-scheme: dark; }
html { scroll-behavior: smooth; background: oklch(0.16 0.022 280); }
body {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.font-display { letter-spacing: -0.01em; }
.eyebrow { text-transform: uppercase; letter-spacing: 0.22em; font-size: 11px; font-weight: 700; }

/* ---- gradient text shimmer ---- */
.grad-text {
  background: linear-gradient(100deg, oklch(0.62 0.25 295), oklch(0.80 0.15 200), oklch(0.66 0.27 350), oklch(0.62 0.25 295));
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmer 4s linear infinite;
}
.grad-bg { background: linear-gradient(100deg, oklch(0.62 0.25 295), oklch(0.66 0.27 350)); }

/* ---- scroll reveal: ALWAYS visible (robust); .seen replays a subtle entrance ---- */
[data-rise] { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  [data-rise].seen { animation: riseIn .7s cubic-bezier(.2,.7,.3,1) both; }
  @keyframes riseIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
}

/* ---- image placeholders ---- */
.ph {
  position: relative; background-color: oklch(0.22 0.024 282);
  background-image: repeating-linear-gradient(45deg, oklch(0.25 0.026 282) 0 1px, transparent 1px 12px);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
  color: oklch(0.6 0.03 282); font-size:11px; letter-spacing:.08em; text-transform:uppercase;
}

.no-scrollbar { -ms-overflow-style:none; scrollbar-width:none; }
.no-scrollbar::-webkit-scrollbar { display:none; }
::-webkit-scrollbar { width:12px; height:12px; }
::-webkit-scrollbar-track { background: oklch(0.16 0.022 280); }
::-webkit-scrollbar-thumb { background: oklch(0.31 0.03 284); border:3px solid oklch(0.16 0.022 280); border-radius:999px; }
::-webkit-scrollbar-thumb:hover { background: oklch(0.62 0.25 295); }

*:focus-visible { outline: 2px solid oklch(0.62 0.25 295); outline-offset: 2px; }

.marquee-mask { -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }

/* ---- glass card ---- */
.glass { background: oklch(0.205 0.026 282 / 0.7); backdrop-filter: blur(14px); border: 1px solid oklch(0.31 0.03 284); }

/* ---- tilt card glow ---- */
.tilt { transition: transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .3s; transform-style: preserve-3d; will-change: transform; }
.tilt:hover { box-shadow: 0 0 50px -10px oklch(0.62 0.25 295 / 0.4); border-color: oklch(0.62 0.25 295 / 0.6); }

/* ---- magnetic / glow button ---- */
.btn-glow { position: relative; overflow: hidden; }
.btn-glow::after { content:""; position:absolute; inset:0; background: radial-gradient(120px circle at var(--mx,50%) var(--my,50%), oklch(1 0 0 / 0.25), transparent 60%); opacity:0; transition:opacity .3s; }
.btn-glow:hover::after { opacity:1; }

/* star rating */
.stars { display:inline-block; position:relative; font-family:"Manrope",sans-serif; color: oklch(0.34 0.03 284); white-space:nowrap; letter-spacing:1px; }
.stars::before { content:"\2605\2605\2605\2605\2605"; }
.stars > span { position:absolute; inset:0; width:var(--pct,100%); overflow:hidden; color: oklch(0.86 0.16 95); }
.stars > span::before { content:"\2605\2605\2605\2605\2605"; }

@keyframes badgepop { 0%{transform:scale(1)} 40%{transform:scale(1.4)} 100%{transform:scale(1)} }
.badge-pop { animation: badgepop .35s ease; }

input[type="range"]{ accent-color: oklch(0.62 0.25 295); }
#toast { transition: transform .35s cubic-bezier(.2,.7,.3,1), opacity .35s; }

/* shared inputs (dark) */
.v-input,.ck-input,.ct-input,.ord-input { width:100%; height:52px; padding:0 16px; background: oklch(0.205 0.026 282); border:1px solid oklch(0.31 0.03 284); color: oklch(0.97 0.012 285); font-size:15px; border-radius:12px; transition:border-color .15s, box-shadow .15s; }
.v-input::placeholder,.ck-input::placeholder,.ct-input::placeholder,.ord-input::placeholder { color: oklch(0.56 0.03 282); }
.v-input:focus,.ck-input:focus,.ct-input:focus,.ord-input:focus { outline:none; border-color: oklch(0.62 0.25 295); box-shadow:0 0 0 3px oklch(0.62 0.25 295 / 0.2); }
.v-input.invalid,.ck-input.invalid,.ct-input.invalid,.ord-input.invalid { border-color: oklch(0.66 0.25 8); }
.v-err,.ck-err,.ct-err,.ord-err { color: oklch(0.66 0.25 8); font-size:13px; margin-top:6px; }
textarea.v-input,textarea.ct-input { height:auto; padding:14px 16px; min-height:150px; resize:vertical; }
option { color:#15131f; background:#fff; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .animate-marquee,.animate-floaty,.animate-meshA,.animate-meshB,.animate-shimmer,.animate-pulsedot,.animate-spinslow,.grad-text { animation: none !important; }
  [data-rise]{ opacity:1 !important; transform:none !important; }
}