/* ================================================================
   css/shared.css — option.legal design system
   Single source of truth for all subpages.
   index.html stays self-contained (do NOT link this file there).
   ================================================================ */

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

/* ══ 2. DESIGN TOKENS (:root custom properties) ════════════════ */
/* Source: index.html lines 38-51 — verbatim */
:root {
  --navy:   #062234;
  --blue:   #53ACE0;
  --lblue:  #ABDEF8;
  --fog:    #E6E6E5;
  --white:  #ffffff;
  --text:   rgba(255,255,255,0.90);
  --muted:  rgba(255,255,255,0.50);
  --dim:    rgba(255,255,255,0.28);
  --glass:  rgba(255,255,255,0.055);
  --border: rgba(255,255,255,0.09);
  --radius: 16px;
  --t:      0.38s cubic-bezier(0.22,1,0.36,1);
}

/* ══ 3. BASE (html, body, h1-h4, p, a) ════════════════════════ */
/* Source: index.html lines 53-81 */
html { scroll-behavior: smooth; }
body {
  font-family: 'Manrope', sans-serif;
  font-size: 16px;
  line-height: 1.65;
  color: var(--text);
  background: var(--navy);
  overflow-x: hidden;
}

/* ══ TYPOGRAPHY ════════════════════════════════════════════════ */
h1,h2,h3,h4 { font-family: 'Space Grotesk', sans-serif; line-height: 1.14; font-weight: 600; }
h1 { font-size: clamp(2.2rem,4.2vw,4rem); font-weight: 700; letter-spacing: -.03em; }
h2 { font-size: clamp(1.8rem,3vw,2.6rem); letter-spacing: -.02em; }
h3 { font-size: 1.15rem; }
p  { color: var(--muted); }
a  { color: inherit; text-decoration: none; }

/* ══ 4. LAYOUT ══════════════════════════════════════════════════ */
/* Source: index.html lines 82-83 */
.container { max-width: 1200px; margin: 0 auto; padding: 0 48px; }
.section    { padding: 108px 0; }

/* ══ 5. BUTTONS ═════════════════════════════════════════════════ */
/* Source: index.html lines 86-97 */
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 13px 26px; border-radius: 9px; font-family: 'Space Grotesk', sans-serif; font-size: .875rem; font-weight: 600; border: none; cursor: pointer; transition: all var(--t); }
.btn--primary { background: var(--blue); color: var(--navy); position: relative; overflow: hidden; }
.btn--primary::after { content: ''; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.26) 50%, transparent 62%); transform: translateX(-140%); transition: transform .52s ease; pointer-events: none; }
.btn--primary:hover { background: var(--lblue); transform: translateY(-2px); box-shadow: 0 10px 36px rgba(83,172,224,.28); }
.btn--primary:hover::after { transform: translateX(140%); }
.btn--outline { border: 1px solid var(--border); color: var(--muted); background: transparent; }
.btn--outline:hover { border-color: var(--blue); color: var(--white); background: rgba(83,172,224,.06); transform: translateY(-2px); }
.btn--ghost { background: transparent; color: var(--white); border: 1px solid var(--border); }
.btn--ghost:hover { border-color: rgba(255,255,255,.28); background: var(--glass); }
.btn--sm { padding: 9px 18px; font-size: .8125rem; }
.tlink { display: inline-flex; align-items: center; gap: 7px; font-size: .875rem; font-weight: 500; color: var(--muted); transition: color var(--t), gap var(--t); }
.tlink:hover { color: var(--white); gap: 11px; }

/* ══ 6. LABELS ══════════════════════════════════════════════════ */
/* Source: index.html line 100 */
.sec-label { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--blue); margin-bottom: 14px; }

/* ══ 7. SECTION CARDS (glass-morphism) ══════════════════════════ */
/* Source: index.html lines 102-125 */
/* Override .section to rounded glass card layout */
.section {
  padding: 16px 24px;
}
.section > .container {
  background: rgba(255,255,255,.055);
  border: 1px solid var(--border);
  border-radius: 24px;
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  padding: 64px 56px;
  max-width: 1200px;
  margin: 0 auto;
}
/* Ticker — bare divider variant */
.ticker-wrap { padding: 0 24px; }
.ticker {
  background: none !important;
  border: none !important;
  border-top: 1px solid var(--border) !important;
  border-bottom: 1px solid var(--border) !important;
  border-radius: 0 !important;
  backdrop-filter: none !important;
}

/* ══ 8. SHADER-BG IFRAME ═════════════════════════════════════════ */
/* Source: index.html lines 56-57 */
#sg-bg {
  position: fixed; inset: 0; width: 100%; height: 100%;
  border: none; z-index: -1; pointer-events: none;
  opacity: 0; animation: bgFadeIn 1.6s ease 0.6s forwards;
}
@keyframes bgFadeIn { to { opacity: 1; } }

/* ══ 9. GRAIN OVERLAY ═══════════════════════════════════════════ */
/* Source: index.html lines 499-509 */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ══ 10. CONSTELLATION BURGER ═══════════════════════════════════ */
/* Source: index.html lines 127-176 */
@keyframes burgerPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(83,172,224,0); }
  50% { box-shadow: 0 0 12px 2px rgba(83,172,224,.25); }
}
.burger-fixed {
  position: fixed; top: 20px; right: 24px; z-index: 200;
  width: 44px; height: 44px;
  background: transparent; border: none;
  display: none;
  border-radius: 50%;
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: background var(--t), border-color var(--t), transform .3s ease;
  animation: burgerPulse 3s ease-in-out infinite;
}
.burger-fixed:hover { transform: scale(1.12); }
.burger-fixed.open { animation: none; }
/* Constellation dots inside burger — 3 orbits + breathe */
@keyframes burgerOrbit {
  0%   { transform: rotate(0deg)   translateX(var(--r)) rotate(0deg)   scale(var(--s1)); }
  50%  { transform: rotate(180deg) translateX(var(--r)) rotate(-180deg) scale(var(--s2)); }
  100% { transform: rotate(360deg) translateX(var(--r)) rotate(-360deg) scale(var(--s1)); }
}
.burger-fixed span {
  display: block; width: 2.5px; height: 2.5px;
  background: var(--blue); border-radius: 50%;
  position: absolute; top: 20px; left: 20px;
  animation: burgerOrbit var(--dur) linear infinite;
}
/* Outer ring — 6 dots, slow */
.burger-fixed span:nth-child(1)  { --r: 12px; --s1: 1; --s2: 0.5; --dur: 12s; animation-delay: 0s; }
.burger-fixed span:nth-child(2)  { --r: 12px; --s1: 0.7; --s2: 1; --dur: 12s; animation-delay: -2s; }
.burger-fixed span:nth-child(3)  { --r: 12px; --s1: 1; --s2: 0.6; --dur: 12s; animation-delay: -4s; }
.burger-fixed span:nth-child(4)  { --r: 12px; --s1: 0.8; --s2: 1.1; --dur: 12s; animation-delay: -6s; }
.burger-fixed span:nth-child(5)  { --r: 12px; --s1: 1; --s2: 0.5; --dur: 12s; animation-delay: -8s; }
.burger-fixed span:nth-child(6)  { --r: 12px; --s1: 0.6; --s2: 1; --dur: 12s; animation-delay: -10s; }
/* Middle ring — 4 dots, counter-rotate */
.burger-fixed span:nth-child(7)  { --r: 7px; --s1: 0.8; --s2: 1.2; --dur: 9s; animation-direction: reverse; animation-delay: 0s; width: 2px; height: 2px; }
.burger-fixed span:nth-child(8)  { --r: 7px; --s1: 1; --s2: 0.6; --dur: 9s; animation-direction: reverse; animation-delay: -2.25s; width: 2px; height: 2px; }
.burger-fixed span:nth-child(9)  { --r: 7px; --s1: 0.7; --s2: 1; --dur: 9s; animation-direction: reverse; animation-delay: -4.5s; width: 2px; height: 2px; }
.burger-fixed span:nth-child(10) { --r: 7px; --s1: 1; --s2: 0.5; --dur: 9s; animation-direction: reverse; animation-delay: -6.75s; width: 2px; height: 2px; }
/* Core — 2 dots, very slow */
.burger-fixed span:nth-child(11) { --r: 3px; --s1: 1.2; --s2: 0.4; --dur: 15s; animation-delay: 0s; width: 2px; height: 2px; opacity: .6; }
.burger-fixed span:nth-child(12) { --r: 3px; --s1: 0.5; --s2: 1.2; --dur: 15s; animation-delay: -7.5s; width: 2px; height: 2px; opacity: .6; }
/* X state when open */
.burger-fixed.open span { transition: all var(--t); animation: none; }
.burger-fixed.open span:nth-child(1) { top: 20px; left: 14px; width: 16px; height: 1.5px; border-radius: 1px; transform: rotate(45deg); background: var(--white); }
.burger-fixed.open span:nth-child(2) { top: 20px; left: 14px; width: 16px; height: 1.5px; border-radius: 1px; transform: rotate(-45deg); background: var(--white); }
.burger-fixed.open span:nth-child(n+3) { opacity: 0; }

/* ══ 11. MOB-NAV (fullscreen overlay) ═══════════════════════════ */
/* Source: index.html lines 178-215 */
.mob-nav {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(4,18,30,.96);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .4s cubic-bezier(.22,1,.36,1);
}
.mob-nav.open { opacity: 1; pointer-events: all; }
.mob-nav__links { display: flex; flex-direction: column; gap: 18px; }
.mob-nav a {
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.35); transition: color var(--t); white-space: nowrap;
  padding: 3px 0; display: block;
  opacity: 0; transform: translateX(-12px);
  transition: color var(--t), opacity .4s ease, transform .4s ease;
}
.mob-nav.open a {
  opacity: 1; transform: none;
}
.mob-nav.open a:nth-child(1) { transition-delay: .08s; }
.mob-nav.open a:nth-child(2) { transition-delay: .12s; }
.mob-nav.open a:nth-child(3) { transition-delay: .16s; }
.mob-nav.open a:nth-child(4) { transition-delay: .20s; }
.mob-nav.open a:nth-child(5) { transition-delay: .24s; }
.mob-nav.open a:nth-child(6) { transition-delay: .28s; }
.mob-nav.open a:nth-child(7) { transition-delay: .32s; }
.mob-nav.open a:nth-child(8) { transition-delay: .36s; }
.mob-nav a:hover { color: var(--white); }
.mob-nav .btn { margin-top: 12px; font-size: .7rem; padding: 10px 18px; letter-spacing: .08em; }

/* ══ 12. REVEAL ANIMATION ═══════════════════════════════════════ */
/* Source: index.html lines 460-464 */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-d1 { transition-delay: .1s; }
.reveal-d2 { transition-delay: .2s; }
.reveal-d3 { transition-delay: .3s; }

/* ══ 13. RESPONSIVE BREAKPOINTS ═════════════════════════════════ */
/* Source: index.html lines 511-534 */
/* Shared components only — page-specific breakpoints go in page <style> blocks */
@media (max-width: 768px) {
  .side-nav { display: none; }
  .burger-fixed { display: flex; }
}
@media (max-width: 960px) {
  .container { padding: 0 24px; }
  .section > .container { padding: 40px 28px; }
}