/* =====================================================================
   Adjacent Everything — shared stylesheet
   Themes (matrix · matrix-soft · blue · purple · ae · aurora · frost · vapor)
   Light / dark mode. Dynamic effects. Nav + footer + base.
   ===================================================================== */

/* ----------- THEMES (dark mode is the default for each) ----------- */
:root, html[data-theme="matrix"] {
  --bg-0:#050805; --bg-1:#0a120a; --bg-2:#0e1a0e;
  --panel:rgba(10,22,12,.72); --panel-edge:rgba(0,255,120,.22);
  --ink-1:#d8ffd8; --ink-2:#9af09a; --ink-3:#5b9d65;
  --accent:#00ff7a; --accent-soft:#1aff95; --accent-deep:#00b35a;
  --accent-blue:#4fb6ff; --accent-white:#ffffff;
  --glow:0 0 18px rgba(0,255,122,.55),0 0 56px rgba(0,255,122,.18);
  --rim:rgba(0,255,122,.55);
  --life:#ff3554; --life-soft:#ff6b7e;
  --soul:#4fb6ff; --phoenix:#ff7a2f; --pontus:#000;
  --rain-color:rgba(0,255,122,.85); --rain-fade:rgba(5,8,5,.10);
}
html[data-theme="matrix-soft"] {
  --bg-0:#07100b; --bg-1:#0d1812; --bg-2:#14241a;
  --panel:rgba(18,36,26,.72); --panel-edge:rgba(120,240,180,.30);
  --ink-1:#e6fff0; --ink-2:#b6f0c8; --ink-3:#7fb893;
  --accent:#6effb5; --accent-soft:#b0ffd2; --accent-deep:#2fbb78;
  --accent-blue:#4fb6ff; --accent-white:#ffffff;
  --glow:0 0 16px rgba(110,255,181,.55),0 0 48px rgba(110,255,181,.18);
  --rim:rgba(110,255,181,.55);
  --life:#ff3554; --life-soft:#ff6b7e;
  --soul:#4fb6ff; --phoenix:#ff7a2f; --pontus:#000;
  --rain-color:rgba(110,255,181,.75); --rain-fade:rgba(7,16,11,.10);
}
html[data-theme="blue"] {
  --bg-0:#05080f; --bg-1:#0a1224; --bg-2:#0f1c33;
  --panel:rgba(10,22,44,.72); --panel-edge:rgba(79,182,255,.30);
  --ink-1:#e6f3ff; --ink-2:#a9d3ff; --ink-3:#6f95c7;
  --accent:#4fb6ff; --accent-soft:#8fd0ff; --accent-deep:#1f7bd4;
  --accent-blue:#4fb6ff; --accent-white:#ffffff;
  --glow:0 0 18px rgba(79,182,255,.55),0 0 56px rgba(79,182,255,.20);
  --rim:rgba(79,182,255,.55);
  --life:#ff3554; --life-soft:#ff6b7e;
  --soul:#4fb6ff; --phoenix:#ff7a2f; --pontus:#000;
  --rain-color:rgba(79,182,255,.85); --rain-fade:rgba(5,8,15,.10);
}
html[data-theme="purple"] {
  --bg-0:#08050f; --bg-1:#130a22; --bg-2:#1d1135;
  --panel:rgba(22,12,44,.72); --panel-edge:rgba(186,122,255,.30);
  --ink-1:#f3e9ff; --ink-2:#d6b9ff; --ink-3:#9a82bd;
  --accent:#c08bff; --accent-soft:#dab0ff; --accent-deep:#7b3edc;
  --accent-blue:#6ea8ff; --accent-white:#ffffff;
  --glow:0 0 18px rgba(192,139,255,.55),0 0 56px rgba(192,139,255,.20);
  --rim:rgba(192,139,255,.55);
  --life:#ff3554; --life-soft:#ff6b7e;
  --soul:#4fb6ff; --phoenix:#ff7a2f; --pontus:#000;
  --rain-color:rgba(192,139,255,.85); --rain-fade:rgba(8,5,15,.10);
}
html[data-theme="ae"] {
  --bg-0:#0c0a1c; --bg-1:#161232; --bg-2:#221a4a;
  --panel:rgba(28,22,60,.66); --panel-edge:rgba(150,130,255,.32);
  --ink-1:#f0e7ff; --ink-2:#c5b6ff; --ink-3:#948aca;
  --accent:#9d82ff; --accent-soft:#c1b0ff; --accent-deep:#6a4ff0;
  --accent-blue:#6ea8ff; --accent-white:#ffffff;
  --glow:0 0 18px rgba(157,130,255,.55),0 0 56px rgba(110,168,255,.20);
  --rim:rgba(157,130,255,.55);
  --life:#ff3554; --life-soft:#ff6b7e;
  --soul:#4fb6ff; --phoenix:#ff7a2f; --pontus:#000;
  --rain-color:rgba(180,150,255,.85); --rain-fade:rgba(12,10,28,.10);
}
html[data-theme="aurora"] {
  --bg-0:#0a0d22; --bg-1:#14193e; --bg-2:#1f2658;
  --panel:rgba(28,33,80,.58); --panel-edge:rgba(180,150,255,.32);
  --ink-1:#ffffff; --ink-2:#d2c4ff; --ink-3:#8d92c8;
  --accent:#b285ff; --accent-soft:#d8c4ff; --accent-deep:#7c44ee;
  --accent-blue:#6eb3ff; --accent-white:#ffffff;
  --glow:0 0 18px rgba(178,133,255,.55),0 0 56px rgba(110,179,255,.22);
  --rim:rgba(178,133,255,.55);
  --life:#ff3554; --life-soft:#ff6b7e;
  --soul:#4fb6ff; --phoenix:#ff7a2f; --pontus:#000;
  --rain-color:rgba(178,133,255,.82); --rain-fade:rgba(10,13,34,.10);
}
html[data-theme="frost"] {
  --bg-0:#070f1d; --bg-1:#0d1c32; --bg-2:#162a46;
  --panel:rgba(22,42,70,.58); --panel-edge:rgba(140,200,255,.32);
  --ink-1:#f6fbff; --ink-2:#b8d8f2; --ink-3:#6f8eac;
  --accent:#80c8ff; --accent-soft:#c0e4ff; --accent-deep:#3a8cde;
  --accent-blue:#80c8ff; --accent-white:#ffffff;
  --glow:0 0 18px rgba(128,200,255,.55),0 0 56px rgba(192,176,255,.20);
  --rim:rgba(128,200,255,.55);
  --life:#ff3554; --life-soft:#ff6b7e;
  --soul:#80c8ff; --phoenix:#ff7a2f; --pontus:#000;
  --rain-color:rgba(140,210,255,.82); --rain-fade:rgba(7,15,29,.10);
}
html[data-theme="vapor"] {
  --bg-0:#0b0420; --bg-1:#1a083c; --bg-2:#2c0e58;
  --panel:rgba(40,14,84,.58); --panel-edge:rgba(255,130,230,.32);
  --ink-1:#ffffff; --ink-2:#f4c8ff; --ink-3:#a06ab8;
  --accent:#ff7ee8; --accent-soft:#ffb6f6; --accent-deep:#cf3fbf;
  --accent-blue:#7b7eff; --accent-white:#ffffff;
  --glow:0 0 18px rgba(255,126,232,.55),0 0 56px rgba(123,126,255,.24);
  --rim:rgba(255,126,232,.55);
  --life:#ff3554; --life-soft:#ff6b7e;
  --soul:#7b7eff; --phoenix:#ff7a2f; --pontus:#000;
  --rain-color:rgba(255,140,236,.82); --rain-fade:rgba(11,4,32,.10);
}

/* ----------- LIGHT MODE — overrides bg/ink across every theme ----------- */
html[data-mode="light"] {
  --bg-0:#f6f7fc; --bg-1:#ebeef6; --bg-2:#dde2ed;
  --panel:rgba(255,255,255,.72); --panel-edge:rgba(50,50,100,.14);
  --ink-1:#0e1124; --ink-2:#3a3f5e; --ink-3:#6a708c;
  --rain-fade:rgba(246,247,252,.18);
  --glow:0 0 14px color-mix(in srgb, var(--accent) 35%, transparent);
}
html[data-mode="light"] #rain { display:none; }
html[data-mode="light"] .bg-veil {
  background:
    radial-gradient(60vw 60vh at 12% 8%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    radial-gradient(70vw 60vh at 90% 100%, color-mix(in srgb, var(--accent-blue, var(--soul)) 8%, transparent), transparent 60%),
    linear-gradient(180deg, #ffffff, var(--bg-1) 50%, #ffffff);
}
html[data-mode="light"] .crt-lines { mix-blend-mode: multiply; opacity: .06; }
html[data-mode="light"] .ambulance-bar { border-color: rgba(0,0,0,.1); }

/* ----------- BASE ----------- */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:ui-sans-serif,-apple-system,"Inter","Helvetica Neue",system-ui,sans-serif;
  color:var(--ink-1); background:var(--bg-0); line-height:1.55;
  overflow-x:hidden; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.mono{font-family:"JetBrains Mono","SF Mono",ui-monospace,Menlo,monospace;letter-spacing:.01em}
a{color:var(--accent);text-decoration:none}
a:hover{text-shadow:var(--glow)}
img{max-width:100%;display:block}
::selection{background:var(--accent);color:var(--bg-0)}

#rain{position:fixed;inset:0;z-index:-1;width:100vw;height:100vh;opacity:.42;mix-blend-mode:screen;pointer-events:none}
.bg-veil{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60vw 60vh at 12% 8%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 60%),
    radial-gradient(70vw 60vh at 90% 100%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-0), var(--bg-1) 50%, var(--bg-0));
}

/* ----------- NAV ----------- */
.nav{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:18px;padding:12px 22px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--bg-0) 92%, transparent), transparent);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid var(--panel-edge);}
.brand{display:flex;align-items:center;gap:12px;font-weight:600;letter-spacing:.04em}
.brand .dot{width:10px;height:10px;border-radius:50%;background:var(--accent);box-shadow:var(--glow);animation:heartbeat 1.8s ease-in-out infinite}
.brand .name{color:var(--ink-1)}
.brand .sub{color:var(--ink-3);font-size:12px;margin-left:4px}
.nav .spacer{flex:1}
.nav a.link{font-size:13px;color:var(--ink-2);padding:6px 10px;border-radius:8px}
.nav a.link:hover{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--ink-1);text-shadow:none}
.nav a.link.up{color:var(--accent)}

.theme-switch{display:flex;gap:6px;padding:4px;background:var(--panel);border:1px solid var(--panel-edge);border-radius:999px}
.theme-switch button{border:0;background:transparent;cursor:pointer;width:22px;height:22px;border-radius:999px;outline:1px solid transparent;transition:outline-color .15s, transform .15s}
.theme-switch button[aria-pressed="true"]{outline-color:var(--ink-1);transform:scale(1.08)}
.sw-matrix     {background:linear-gradient(135deg,#00ff7a,#003a1c)}
.sw-matrix-soft{background:linear-gradient(135deg,#b6ffd6,#2fbb78)}
.sw-blue       {background:linear-gradient(135deg,#a9d3ff,#1f7bd4)}
.sw-purple     {background:linear-gradient(135deg,#dab0ff,#7b3edc)}
.sw-ae         {background:linear-gradient(135deg,#c1b0ff 0%,#6ea8ff 60%,#ff3554 100%)}
.sw-aurora     {background:linear-gradient(135deg,#ffffff 0%,#b285ff 40%,#6eb3ff 70%,#ff3554 100%)}
.sw-frost      {background:linear-gradient(135deg,#ffffff 0%,#80c8ff 60%,#3a8cde 100%)}
.sw-vapor      {background:linear-gradient(135deg,#ffffff 0%,#ff7ee8 50%,#7b7eff 100%)}

.mode-toggle{display:inline-flex;align-items:center;gap:6px;width:52px;height:28px;padding:3px;border-radius:999px;background:var(--panel);border:1px solid var(--panel-edge);cursor:pointer;position:relative}
.mode-toggle .thumb{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:linear-gradient(180deg, var(--accent-soft), var(--accent));box-shadow:var(--glow);transition:transform .25s ease, background .25s}
html[data-mode="light"] .mode-toggle .thumb{transform:translateX(24px);background:linear-gradient(180deg,#fff,var(--accent-soft))}
.mode-toggle .ico{position:absolute;top:6px;font-size:12px;color:var(--ink-2);pointer-events:none}
.mode-toggle .ico.moon{left:9px}
.mode-toggle .ico.sun{right:9px}

/* ----------- LAYOUT ----------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 22px}
section{padding:88px 0;position:relative}
.eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-2)}
.eyebrow .tick{width:18px;height:1px;background:var(--accent)}
h1,h2,h3{font-weight:600;letter-spacing:-0.01em;line-height:1.08;margin:0}
h1{font-size:clamp(40px,6.4vw,88px)}
h2{font-size:clamp(28px,3.6vw,48px);margin-bottom:12px}
h3{font-size:22px}
p{color:var(--ink-2);margin:14px 0}
.lead{font-size:clamp(17px,1.6vw,21px);color:var(--ink-1);max-width:64ch}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;border:1px solid var(--panel-edge);background:var(--panel);color:var(--ink-2);font-size:12px;letter-spacing:.08em}
.tiny-mono{font-family:"JetBrains Mono",ui-monospace,monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.divider{width:80px;height:1px;background:linear-gradient(90deg, transparent, var(--accent), transparent);margin:18px 0 22px}
.band{border-top:1px solid var(--panel-edge);border-bottom:1px solid var(--panel-edge);background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 4%, transparent), transparent)}

.btn{display:inline-flex;align-items:center;gap:10px;padding:12px 18px;border-radius:10px;font-weight:600;font-size:14px;letter-spacing:.04em;border:1px solid var(--rim);cursor:pointer;transition:transform .12s, box-shadow .2s, background .2s;color:var(--ink-1)}
.btn.primary{background:var(--accent);color:var(--bg-0);box-shadow:var(--glow)}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent}
.btn.ghost:hover{background:color-mix(in srgb, var(--accent) 14%, transparent)}
.btn .arrow{transition:transform .2s}.btn:hover .arrow{transform:translateX(4px)}

.cta-row{margin-top:32px;display:flex;gap:14px;flex-wrap:wrap}
.meta-pills{margin-top:28px;display:flex;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--ink-3)}

/* ----------- DYNAMIC EFFECTS ----------- */
@keyframes pulse-life {
  0%, 100% { box-shadow: 0 0 4px var(--life), 0 0 14px rgba(255,53,84,.45); transform: scale(1); }
  50%      { box-shadow: 0 0 12px var(--life), 0 0 36px rgba(255,53,84,.85); transform: scale(1.12); }
}
.red-wire{position:relative;height:2px;width:100%;background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--life) 70%, transparent), transparent);opacity:.8;overflow:hidden;border-radius:2px}
.red-wire::after{content:"";position:absolute;top:-3px;left:-14%;width:14%;height:8px;background:radial-gradient(ellipse at center, var(--life), transparent 70%);border-radius:50%;animation:wire-travel 4s linear infinite}
@keyframes wire-travel { 0%{left:-14%;opacity:0} 10%{opacity:1} 90%{opacity:1} 100%{left:100%;opacity:0} }

.wire-tag{display:inline-flex;align-items:center;gap:8px;padding:5px 12px;font-family:"JetBrains Mono",monospace;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--life-soft);border:1px solid color-mix(in srgb, var(--life) 60%, transparent);border-radius:999px;background:color-mix(in srgb, var(--life) 12%, transparent)}
.wire-tag::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--life);animation:pulse-life 1.4s ease-in-out infinite}

.ambulance-bar{position:relative;height:6px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.04);margin:18px 0;border:1px solid var(--panel-edge)}
.ambulance-bar::before,.ambulance-bar::after{content:"";position:absolute;top:0;bottom:0;width:50%;filter:blur(3px)}
.ambulance-bar::before{left:0;background:var(--life);animation:amb-red 1.1s steps(2, jump-none) infinite}
.ambulance-bar::after{right:0;background:var(--accent-blue);animation:amb-blue 1.1s steps(2, jump-none) infinite}
@keyframes amb-red{0%,49%{opacity:1}50%,100%{opacity:.15}}
@keyframes amb-blue{0%,49%{opacity:.15}50%,100%{opacity:1}}

.sparks{position:absolute;inset:0;overflow:hidden;pointer-events:none;opacity:.55;z-index:0}
.sparks span{position:absolute;bottom:-10px;width:2px;height:2px;background:var(--accent);border-radius:50%;box-shadow:0 0 8px var(--accent);animation:spark-rise linear infinite}
.sparks span.red{background:var(--life);box-shadow:0 0 10px var(--life)}
@keyframes spark-rise{0%{transform:translateY(0) translateX(0);opacity:0}10%{opacity:1}85%{opacity:1}100%{transform:translateY(-110vh) translateX(var(--drift,20px));opacity:0}}

.scan-line{position:absolute;inset:0;pointer-events:none;overflow:hidden;opacity:.4}
.scan-line::before{content:"";position:absolute;left:0;right:0;height:1px;background:linear-gradient(90deg, transparent, var(--accent), transparent);animation:scan 6s linear infinite}
@keyframes scan{0%{top:-10%}100%{top:110%}}

.crt-lines{position:absolute;inset:0;pointer-events:none;opacity:.12;background:repeating-linear-gradient(0deg, transparent 0 2px, rgba(255,255,255,.4) 2px 3px);mix-blend-mode:overlay}

.engine-pulse{position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 0 color-mix(in srgb, var(--life) 80%, transparent);animation:engine-beat 1.8s ease-out infinite}
@keyframes engine-beat{0%{box-shadow:0 0 0 0 color-mix(in srgb, var(--life) 80%, transparent)}70%{box-shadow:0 0 0 22px color-mix(in srgb, var(--life) 0%, transparent)}100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--life) 0%, transparent)}}

/* Generic spark animation (used for SVG sparks in scenes) */
.spark {
  animation: spark-fountain var(--dur, 1.3s) ease-out infinite;
  animation-delay: var(--del, 0s);
  opacity: 0;
  transform-origin: center; transform-box: fill-box;
}
@keyframes spark-fountain {
  0%   { transform: translate(0,0) scale(.4); opacity: 0; }
  6%   { opacity: 1; }
  60%  { opacity: 1; }
  100% { transform: translate(var(--dx, 0), var(--dy, -150px)) scale(.15); opacity: 0; }
}
.spark-flare { animation: flare 320ms ease-in-out infinite alternate; transform-origin: center; transform-box: fill-box; }
@keyframes flare { from{opacity:.55;transform:scale(1)} to{opacity:.95;transform:scale(1.12)} }

/* ----------- REVEAL ON SCROLL ----------- */
.reveal{opacity:0;transform:translateY(14px);transition:opacity .8s ease, transform .8s ease}
.reveal.in{opacity:1;transform:translateY(0)}

@keyframes heartbeat{0%,100%{transform:scale(1);opacity:1}20%{transform:scale(1.35);opacity:.85}40%{transform:scale(.95);opacity:1}60%{transform:scale(1.15);opacity:.9}}
@keyframes breath{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.08);opacity:1}}
@keyframes spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion: reduce){
  .reveal{opacity:1;transform:none;transition:none}
  .brand .dot{animation:none!important}
  .ambulance-bar::before,.ambulance-bar::after,.red-wire::after,.sparks span,.scan-line::before,.wire-tag::before,.engine-pulse,.spark,.spark-flare{animation:none!important}
  #rain{display:none}
}

/* ----------- COMMON COMPONENTS ----------- */

/* card grid */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:28px}
@media (max-width: 980px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width: 600px){.cards{grid-template-columns:1fr}}
.card{position:relative;background:var(--panel);border:1px solid var(--panel-edge);border-radius:16px;padding:24px;overflow:hidden}
.card h3{color:var(--ink-1);font-size:20px;margin-bottom:6px}
.card .kicker{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.card p{font-size:14px}

/* hero (basic) */
.hero{padding-top:56px;padding-bottom:64px}
.hero h1 .accent{color:var(--accent);text-shadow:var(--glow)}
.hero .tagline{margin-top:22px;font-size:clamp(18px,1.9vw,24px);color:var(--ink-1);max-width:36ch}

/* CTA grid */
.cta-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:24px}
@media (max-width: 960px){.cta-grid{grid-template-columns:1fr}}
.cta{position:relative;background:var(--panel);border:1px solid var(--panel-edge);border-radius:16px;padding:24px;overflow:hidden}
.cta.primary{background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 14%, transparent), var(--panel))}
.cta h3{color:var(--ink-1);margin-bottom:6px}
.cta p{font-size:14px}
.cta .btn{margin-top:14px}

/* footer */
footer{padding:56px 0 72px;border-top:1px solid var(--panel-edge);background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent) 4%, transparent))}
footer .fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}
@media (max-width: 860px){footer .fgrid{grid-template-columns:1fr 1fr}}
footer h4{color:var(--ink-1);font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px}
footer a.link{display:block;padding:4px 0;color:var(--ink-2);font-size:14px}
footer .legal{margin-top:36px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-3);letter-spacing:.08em}
footer .sigil{font-family:"JetBrains Mono",ui-monospace,monospace;color:var(--ink-2)}
footer .sigil .hash{color:var(--accent)}