/* ─────────────────────────────────────────────────────────────
   INSIDE THE PRACTICE V3 — BASE
   Variables · Reset · Typography · Keyframes
   ───────────────────────────────────────────────────────────── */

/* ─── RESET ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ─── DESIGN TOKENS ─────────────────────────────────────── */
:root {
  --navy:          #022B56;
  --navy-deep:     #01182e;
  --navy-glass:    rgba(2, 43, 86, 0.35);
  --gold:          #E3AC17;
  --gold-hover:    #f0bb27;
  --gold-muted:    rgba(227, 172, 23, 0.55);
  --gold-dim:      rgba(227, 172, 23, 0.12);
  --gold-border:   rgba(227, 172, 23, 0.28);
  --gold-border-h: rgba(227, 172, 23, 0.50);
  --bg:            #0a0f1e;
  --bg-2:          #080c18;
  --text:          #f8fafc;
  --text-muted:    #94a3b8;
  --text-faint:    rgba(248, 250, 252, 0.32);
  --text-navy:     #022B56;

  --font-display: 'Playfair Display', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;

  --nav-h:    64px;
  --z-nav:    100;
  --z-player: 150;
  --z-pause:  200;
  --z-toast:  300;

  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─── BASE ───────────────────────────────────────────────── */
html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: hidden;
}

body.itp-scroll-locked {
  overflow: hidden;
  width: 100%;
}

a    { color: inherit; text-decoration: none; }
button { border: none; cursor: pointer; font-family: inherit; background: none; }
img, video { display: block; max-width: 100%; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ─── KEYFRAMES (hardware-accelerated, transform + opacity only) ─── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes orb-drift-1 {
  0%,  100% { transform: translate(0,    0)    scale(1);    }
  33%        { transform: translate(48px, -64px) scale(1.07); }
  66%        { transform: translate(-32px, 28px) scale(0.96); }
}

@keyframes orb-drift-2 {
  0%,  100% { transform: translate(0,    0)    scale(1);    }
  42%        { transform: translate(-54px, 44px) scale(1.05); }
  72%        { transform: translate(38px, -22px) scale(0.97); }
}

@keyframes orb-drift-3 {
  0%,  100% { transform: translate(0,   0)    scale(1);    }
  55%        { transform: translate(22px, 52px) scale(1.04); }
}

@keyframes shimmer-sweep {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}

@keyframes lock-breathe {
  0%, 100% { opacity: 0.40; }
  50%       { opacity: 0.72; }
}

@keyframes unlock-flash {
  0%   { box-shadow: 0 0 0   0   rgba(227,172,23,0); }
  50%  { box-shadow: 0 0 28px 6px rgba(227,172,23,0.22); }
  100% { box-shadow: 0 0 0   0   rgba(227,172,23,0); }
}