/* === 0Tick Ops Visual — cohesive palette + real 3D backdrop ================= */

@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@600;700&family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,600;0,9..40,700;1,9..40,400&display=swap");

:root {
  /* Harmonious cyber palette (blue → violet → mint) */
  --ops-bg-deep: #080a0f;
  --ops-bg: #0e1118;
  --ops-surface: #141a24;
  --ops-surface-up: #1a2230;
  --ops-blue: #5b8cff;
  --ops-blue-dim: #3d6fd9;
  --ops-violet: #9d7bff;
  --ops-mint: #3dd6c3;
  --ops-text: #e8ecf4;
  --ops-muted: #8b93a8;
  --ops-glass: rgba(14, 18, 26, 0.78);
  --ops-glass-border: rgba(91, 140, 255, 0.18);
  --ops-glow-blue: rgba(91, 140, 255, 0.28);
  --ops-glow-violet: rgba(157, 123, 255, 0.22);
  --ops-gradient: linear-gradient(
    128deg,
    var(--ops-blue) 0%,
    var(--ops-violet) 52%,
    var(--ops-mint) 100%
  );
  --ops-mx: 50%;
  --ops-my: 42%;

  /* Bridge into legacy app tokens */
  --color-accent: var(--ops-blue);
  --color-accent-dim: var(--ops-blue-dim);
  --color-accent-glow: var(--ops-glow-blue);
  --color-primary: var(--ops-blue);
  --color-primary-hover: #7aa3ff;
  --color-primary-muted: rgba(91, 140, 255, 0.14);
  --color-bg-deep: var(--ops-bg-deep);
  --color-bg: var(--ops-bg);
  --color-surface: var(--ops-surface);
  --color-surface-elevated: var(--ops-surface-up);
  --color-text: var(--ops-text);
  --color-text-secondary: var(--ops-muted);
}

body.ops-ui {
  font-family: "DM Sans", var(--font);
  color: var(--ops-text);
  background:
    radial-gradient(ellipse 90% 55% at 50% -8%, rgba(91, 140, 255, 0.09), transparent 50%),
    radial-gradient(ellipse 60% 40% at 100% 80%, rgba(157, 123, 255, 0.06), transparent 45%),
    linear-gradient(168deg, var(--ops-bg) 0%, var(--ops-bg-deep) 100%);
}

/* Three.js full-viewport backdrop */
.otac-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
}

.otac-aurora {
  pointer-events: none;
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  mix-blend-mode: screen;
}

.otac-aurora__blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(88px);
  opacity: 0.2;
  will-change: transform;
}

.otac-aurora__blob--a {
  width: min(50vw, 480px);
  height: min(50vw, 480px);
  top: -15%;
  left: calc(var(--ops-mx) - 22%);
  background: radial-gradient(circle, rgba(91, 140, 255, 0.7), transparent 68%);
  animation: otac-aurora-a 24s ease-in-out infinite alternate;
}

.otac-aurora__blob--b {
  width: min(44vw, 400px);
  height: min(44vw, 400px);
  bottom: -10%;
  right: calc(100% - var(--ops-mx) - 18%);
  background: radial-gradient(circle, rgba(157, 123, 255, 0.55), transparent 70%);
  animation: otac-aurora-b 28s ease-in-out infinite alternate;
}

.otac-aurora__blob--c {
  width: min(36vw, 320px);
  height: min(36vw, 320px);
  top: 42%;
  left: 58%;
  background: radial-gradient(circle, rgba(61, 214, 195, 0.4), transparent 72%);
  animation: otac-aurora-c 32s ease-in-out infinite alternate;
}

@keyframes otac-aurora-a {
  from { transform: translate3d(-5%, 0, 0) scale(1); }
  to { transform: translate3d(7%, 5%, 0) scale(1.06); }
}

@keyframes otac-aurora-b {
  from { transform: translate3d(5%, 0, 0) scale(1.04); }
  to { transform: translate3d(-8%, -4%, 0) scale(0.96); }
}

@keyframes otac-aurora-c {
  from { transform: translate3d(0, -3%, 0); }
  to { transform: translate3d(-5%, 6%, 0); }
}

body.ops-ui > .top,
body.ops-ui > main,
body.ops-ui > .footer {
  z-index: 2;
}

body.ops-ui .ops-grid {
  opacity: 0.04;
  background-size: 44px 44px;
  mask-image: radial-gradient(ellipse 85% 65% at 50% 30%, black 10%, transparent 75%);
}

/* Header */
body.ops-ui .top {
  background: rgba(8, 10, 15, 0.82);
  border-bottom: 1px solid var(--ops-glass-border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

body.ops-ui .logo__tick {
  background: var(--ops-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.ops-ui .nav a:not(.btn).is-active {
  background: var(--ops-gradient);
  border-color: transparent;
  color: #0a0c10;
  box-shadow: 0 0 20px var(--ops-glow-blue);
}

/* Hero */
.ops-hero.hero {
  position: relative;
  padding: clamp(2.75rem, 7vw, 4.5rem) 0 clamp(2.5rem, 5vw, 3.5rem);
}

.ops-hero.hero::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 55%;
  width: min(520px, 80vw);
  height: min(280px, 40vh);
  transform: translate(-50%, -50%);
  background: radial-gradient(ellipse, rgba(91, 140, 255, 0.15), transparent 70%);
  pointer-events: none;
  z-index: -1;
}

.ops-hero .ops-eyebrow {
  font-family: "Orbitron", var(--font);
  letter-spacing: 0.26em;
  font-size: 0.68rem;
  text-transform: uppercase;
  color: var(--ops-mint);
}

.ops-hero h1 {
  font-family: "Orbitron", var(--font);
  font-size: clamp(1.85rem, 4.5vw, 2.65rem);
  background: var(--ops-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 32px rgba(91, 140, 255, 0.25));
}

.ops-hero .hero__logo {
  animation: otac-hero-float 6s ease-in-out infinite;
  filter: drop-shadow(0 12px 40px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 48px rgba(91, 140, 255, 0.2));
}

@keyframes otac-hero-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(0, -10px, 0) rotate(0.6deg); }
}

.ops-section__title,
.panel-head h1,
.cfg-editor__panel-title {
  font-family: "Orbitron", var(--font);
  letter-spacing: 0.12em;
}

.ops-section__title {
  background: var(--ops-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.panel-head h1 {
  background: var(--ops-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Glass cards */
body.ops-ui .card {
  background: var(--ops-glass);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--ops-glass-border);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 16px 48px rgba(0, 0, 0, 0.4),
    0 0 32px rgba(91, 140, 255, 0.06);
  transform-style: preserve-3d;
  transition:
    transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.35s ease;
}

body.ops-ui .card::before {
  background: linear-gradient(
    140deg,
    rgba(91, 140, 255, 0.08) 0%,
    rgba(157, 123, 255, 0.05) 45%,
    transparent 60%
  );
}

body.ops-ui .card:hover {
  border-color: rgba(157, 123, 255, 0.35);
  box-shadow:
    0 0 0 1px rgba(91, 140, 255, 0.12) inset,
    0 24px 56px rgba(0, 0, 0, 0.5),
    0 0 40px var(--ops-glow-blue),
    0 0 64px var(--ops-glow-violet);
}

body.ops-ui .card--ops h3 {
  font-family: "Orbitron", var(--font);
  letter-spacing: 0.06em;
  color: var(--ops-text);
}

/* Panel shell */
body.ops-ui .panel-shell {
  background: var(--ops-glass);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--ops-glass-border);
  border-radius: 14px;
  box-shadow:
    0 20px 56px rgba(0, 0, 0, 0.45),
    0 0 48px rgba(91, 140, 255, 0.06);
}

body.ops-ui .panel-shell__aside {
  background: rgba(10, 12, 18, 0.88);
}

body.ops-ui .panel-shell__nav a:hover {
  border-color: rgba(91, 140, 255, 0.25);
  box-shadow: 0 0 12px rgba(91, 140, 255, 0.1);
}

/* Buttons */
body.ops-ui .btn--primary {
  background: var(--ops-gradient);
  color: #0a0c10;
  border: none;
  box-shadow: 0 0 24px var(--ops-glow-blue);
  position: relative;
  overflow: hidden;
}

body.ops-ui .btn--primary::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 70%
  );
  transform: translateX(-130%);
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

body.ops-ui .btn--primary:hover::after {
  transform: translateX(130%);
}

body.ops-ui .btn--ghost:hover {
  border-color: rgba(91, 140, 255, 0.4);
  color: var(--ops-blue);
  box-shadow: 0 0 20px rgba(91, 140, 255, 0.12);
}

/* Tables */
body.ops-ui .table-wrap {
  background: var(--ops-glass);
  backdrop-filter: blur(12px);
  border-color: var(--ops-glass-border);
  border-radius: 12px;
  content-visibility: auto;
  contain-intrinsic-size: auto 320px;
}

body.ops-ui .table th {
  color: var(--ops-muted);
}

body.ops-ui .badge {
  background: rgba(91, 140, 255, 0.18);
  color: var(--ops-blue);
  border: 1px solid rgba(91, 140, 255, 0.35);
  box-shadow: 0 0 12px rgba(91, 140, 255, 0.15);
}

body.ops-ui .ops-meter__fill {
  background: var(--ops-gradient);
  box-shadow: 0 0 14px var(--ops-glow-blue);
}

body.ops-ui .price {
  font-family: "Orbitron", var(--font);
  color: var(--ops-blue);
  text-shadow: 0 0 20px rgba(91, 140, 255, 0.3);
}

/* Config editor */
body.ops-ui .cfg-editor__tab.is-active {
  color: var(--ops-blue);
  box-shadow: inset 0 -2px 0 var(--ops-blue), 0 0 16px rgba(91, 140, 255, 0.12);
}

body.ops-ui .cfg-block[open] .cfg-block__summary {
  color: var(--ops-violet);
}

/* Dialog */
.otac-dialog__box {
  background: rgba(12, 16, 24, 0.94);
  backdrop-filter: blur(18px);
  border: 1px solid var(--ops-glass-border);
  box-shadow:
    0 28px 90px rgba(0, 0, 0, 0.65),
    0 0 56px rgba(91, 140, 255, 0.1);
}

/* Scroll reveal */
.ops-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(0.98);
  transition:
    opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.ops-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.ops-reveal--delay-1 { transition-delay: 0.1s; }
.ops-reveal--delay-2 { transition-delay: 0.18s; }
.ops-reveal--delay-3 { transition-delay: 0.26s; }

/* Nav link micro-animation */
body.ops-ui .nav a:not(.btn) {
  transition:
    color 0.25s ease,
    background 0.25s ease,
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

body.ops-ui .nav a:not(.btn):hover {
  transform: translateY(-1px);
}

/* Footer */
body.ops-ui .footer {
  z-index: 2;
  border-top: 1px solid var(--ops-glass-border);
  background: rgba(8, 10, 15, 0.8);
  backdrop-filter: blur(12px);
}

body.ops-ui--no-scene .otac-scene,
body.ops-ui--no-scene .otac-aurora {
  display: none !important;
}

/* AUTO CONFIG — align with site palette */
body.ops-ui--no-scene .acfg-head__title {
  background: var(--ops-gradient);
  -webkit-background-clip: text;
  background-clip: text;
}

body.ops-ui--no-scene .acfg-stage {
  border-color: rgba(91, 140, 255, 0.28);
  background: radial-gradient(ellipse at 50% 28%, #121a2e 0%, #080a10 72%);
  box-shadow:
    0 0 80px rgba(91, 140, 255, 0.12),
    0 0 100px rgba(157, 123, 255, 0.08);
}

@media (max-width: 768px) {
  .otac-aurora__blob--c {
    display: none;
  }

  body.ops-ui .card:hover {
    transform: translate3d(0, -4px, 0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .otac-scene,
  .otac-aurora {
    display: none !important;
  }

  .ops-reveal,
  .ops-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .ops-hero .hero__logo,
  .otac-aurora__blob {
    animation: none !important;
  }

  body.ops-ui .card:hover,
  body.ops-ui .nav a:not(.btn):hover {
    transform: none;
  }
}