/* ═══════════════════════════════════════════════════════════════
   OraTek DX — Shared Ocean Theme
   Motivational water/saliva diagnostics aesthetic
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Poppins:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

/* ────────────────────────────────────────────────────────────────
   OVERRIDE LAYER — remaps CSS variables each page defined to dark
   palette. Uses html.ot-themed (added by theme.js) to outrank :root.
   ──────────────────────────────────────────────────────────────── */
html.ot-themed {
  color-scheme: dark;
  /* remap common page tokens to dark palette */
  --blue:    #3877D8;
  --cyan:    #55BFEC;
  --aqua:    #7EFFDD;
  --glow:    #A0F7FF;
  --orange:  #FF9851;
  --navy:    #0A1A33;
  --abyss:   #040B1A;
  --deep:    #081528;
  --bg:      transparent;
  --bg2:     transparent;
  --text:    #E8F4FB;
  --text2:   #A8C2D4;
  --muted:   #6B8599;
  --border:  rgba(126, 255, 221, 0.14);
  --white:   rgba(12, 28, 52, 0.55);
  --green:   #22C55E;
  --yellow:  #F59E0B;
  --red:     #EF4444;
  --purple:  #8B5CF6;
  --gold:    #F5B841;
  --silver:  #A8B8C8;
  --bronze:  #C07840;
}

html.ot-themed body {
  background: transparent !important;
  color: var(--text) !important;
  position: relative;
}

/* Disable any page's ::before background pattern (courts, etc.) */
html.ot-themed body::before {
  content: none !important;
  display: none !important;
}
html.ot-themed body::after { display: none !important; }

/* Nuke March Madness cruft site-wide */
html.ot-themed .bball-float,
html.ot-themed .mm-banner,
html.ot-themed .mm-stripe,
html.ot-themed .mm-badge,
html.ot-themed #mm-banner,
html.ot-themed #shot-clock,
html.ot-themed .court-bg,
html.ot-themed .court-lines,
html.ot-themed .court-overlay {
  display: none !important;
}

/* Themed sticky header — apply to plain <header> elements on tool pages */
html.ot-themed body > header,
html.ot-themed header.ot-header {
  background: rgba(4, 11, 26, 0.6) !important;
  backdrop-filter: blur(22px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(180%) !important;
  border-bottom: 1px solid rgba(126, 255, 221, 0.12) !important;
  box-shadow: 0 1px 24px rgba(85, 191, 236, 0.05) !important;
}

/* Logos/icons in header get a subtle glow */
html.ot-themed header img[src*="logo"] {
  filter: brightness(1.2) drop-shadow(0 0 14px rgba(126, 255, 221, 0.25));
}

/* Text inside themed header defaults to light */
html.ot-themed body > header *:not(.back-link):not(a[href*="index.html"]) {
  color: var(--text);
}
html.ot-themed body > header .logo,
html.ot-themed body > header .logo span {
  color: #fff !important;
}

/* Portal back-button pill — bring it on-theme (common inline pattern) */
html.ot-themed a[href*="index.html"][style*="border:1.5px solid #DDE6F0"] {
  background: rgba(85, 191, 236, 0.06) !important;
  border-color: rgba(126, 255, 221, 0.18) !important;
  color: var(--text) !important;
}
html.ot-themed a[href*="index.html"][style*="border:1.5px solid #DDE6F0"]:hover {
  border-color: var(--aqua) !important;
  color: var(--aqua) !important;
}

/* Any white-hex hardcoded bg flips to glass */
html.ot-themed [style*="background:#fff"],
html.ot-themed [style*="background: #fff"],
html.ot-themed [style*="background:#FFFFFF"],
html.ot-themed [style*="background: #FFFFFF"],
html.ot-themed [style*="background:white"],
html.ot-themed [style*="background: white"] {
  background: rgba(12, 28, 52, 0.55) !important;
  color: var(--text);
}

/* ═════════════════════════════════════════════════════════════════
   THEME LAYER — ocean, caustics, particles, vignette (z-index: 0-3)
   ═════════════════════════════════════════════════════════════════ */
.ocean {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(85,191,236,0.14) 0%, transparent 60%),
    radial-gradient(ellipse 100% 80% at 50% 100%, rgba(56,119,216,0.10) 0%, transparent 70%),
    linear-gradient(180deg,
      #071A34 0%,
      #05142A 25%,
      #030E22 55%,
      #020817 100%
    );
}
.ocean::before, .ocean::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.55;
  mix-blend-mode: screen;
  /* Static — no animation. Renderer can rasterize once and cache. */
}
/* Static gradient blobs — no animation. Sit in opposite corners as
   color washes that compose with the underlying linear gradient.
   Removed orb-drift animation per user request — kept the visuals,
   killed the motion. */
.ocean::before {
  width: 520px; height: 520px;
  background: radial-gradient(circle, rgba(85,191,236,0.45), transparent 70%);
  top: -10%; left: -8%;
}
.ocean::after {
  width: 680px; height: 680px;
  background: radial-gradient(circle, rgba(126,255,221,0.28), transparent 70%);
  bottom: -18%; right: -14%;
}

.caustics {
  position: fixed;
  inset: -5%;
  z-index: 0;
  pointer-events: none;
  opacity: 0.22;
  mix-blend-mode: screen;
}

#fluid-canvas {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.grain {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

.vignette {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.55) 100%);
}

/* Push in-flow page content above the background layers.
   Skip anything already positioned (fixed overlays, sticky headers,
   absolute modals) so we don't clobber their own stacking.
   Also skip the theme's own layers. */
html.ot-themed body > *:not(.ocean):not(svg.caustics):not(#fluid-canvas):not(.grain):not(.vignette):not(#ot-filters):not(.auth-gate):not([class*="modal"]):not(.tr-toast) {
  position: relative;
  z-index: 4;
}

/* ════════ OPTIONAL GLASS CARD (use .ot-glass) ════════ */
.ot-glass {
  background: linear-gradient(160deg, rgba(12,28,52,0.58), rgba(4,14,34,0.62));
  border: 1px solid rgba(126,255,221,0.14);
  border-radius: 18px;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}

/* ════════ PULSE DOT ════════ */
.ot-pulse-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--aqua);
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(126,255,221,0.6);
  animation: ot-pulse 2s infinite;
}
@keyframes ot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(126,255,221,0.6); }
  70%  { box-shadow: 0 0 0 10px rgba(126,255,221,0); }
  100% { box-shadow: 0 0 0 0 rgba(126,255,221,0); }
}

/* ════════ SCROLLBAR ════════ */
html.ot-themed ::-webkit-scrollbar { width: 10px; height: 10px; }
html.ot-themed ::-webkit-scrollbar-track { background: rgba(4,11,26,0.4); }
html.ot-themed ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(85,191,236,0.3), rgba(126,255,221,0.3));
  border-radius: 6px;
  border: 2px solid rgba(4,11,26,0.4);
}
html.ot-themed ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(85,191,236,0.5), rgba(126,255,221,0.5));
}
html.ot-themed ::selection { background: rgba(126,255,221,0.35); color: #fff; }

/* ════════ CLICK RIPPLE ════════ */
.ot-ripple {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  border: 1.5px solid var(--aqua, #7EFFDD);
  box-shadow: 0 0 20px rgba(126,255,221,0.4);
  animation: ot-rippleExpand 1s cubic-bezier(0.2, 0.9, 0.3, 1.1) forwards;
}
@keyframes ot-rippleExpand {
  from { width: 0; height: 0; opacity: 1; }
  to   { width: 90px; height: 90px; opacity: 0; margin-left: -45px; margin-top: -45px; }
}

/* ════════ REDUCE MOTION ════════ */
@media (prefers-reduced-motion: reduce) {
  .ocean::before, .ocean::after { animation: none !important; will-change: auto !important; }
  .caustics { display: none !important; }
  #fluid-canvas { display: none !important; }
  .grain { display: none !important; }
}

/* ════════ LITE MODE ════════
   Pages can opt out of the heavy ambient layers entirely by adding
   `ot-lite` to <body> or <html>. Used by app pages with their own
   complex UI (CRM, dashboard) where ambient drift just steals frames.
   theme.js also reads this and skips the canvas particle init. */
html.ot-lite #fluid-canvas,
html.ot-lite svg.caustics,
html.ot-lite .grain,
body.ot-lite #fluid-canvas,
body.ot-lite svg.caustics,
body.ot-lite .grain {
  display: none !important;
}
html.ot-lite .ocean::before,
html.ot-lite .ocean::after,
body.ot-lite .ocean::before,
body.ot-lite .ocean::after {
  animation: none !important;
  will-change: auto !important;
}
/* In lite mode the .ocean still renders its base gradient — no motion,
   no blur layers, just a flat liquid-glass backdrop. */