/* Live Code Stream — front-end styles (scoped to .cstream-root) */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;700&family=Orbitron:wght@500;700&family=Caveat:wght@600&display=swap');

.cstream-root{
  --cs-bg-deep:#02060f; --cs-bg-mid:#061327;
  --cs-blue:#2f7bff; --cs-cyan:#56e1ff; --cs-code:#9fd0ff;
  --cs-grid:rgba(70,140,255,0.07);
  position:relative; overflow:hidden; width:100%;
  font-family:'JetBrains Mono',monospace; isolation:isolate;
  background:
    radial-gradient(ellipse 120% 90% at 50% -10%, rgba(47,123,255,0.22), transparent 60%),
    radial-gradient(ellipse 80% 80% at 80% 110%, rgba(86,225,255,0.10), transparent 60%),
    linear-gradient(160deg, var(--cs-bg-deep) 0%, var(--cs-bg-mid) 55%, #03091a 100%);
}
.cstream-fullscreen{
  position:fixed; inset:0; width:100vw; height:100vh; z-index:0;
}
.cstream-inline{ border-radius:14px; box-shadow:0 10px 40px rgba(0,0,0,0.45); }

.cstream-root *{ box-sizing:border-box; }

.cstream-grid{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background-image:linear-gradient(var(--cs-grid) 1px,transparent 1px),linear-gradient(90deg,var(--cs-grid) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 40%,transparent 100%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 50%,#000 40%,transparent 100%);
  animation:cstreamGrid 40s linear infinite; }
@keyframes cstreamGrid{from{background-position:0 0,0 0;}to{background-position:48px 96px,48px 96px;}}

.cstream-vignette{ position:absolute; inset:0; z-index:6; pointer-events:none;
  background:radial-gradient(ellipse 75% 75% at 50% 50%,transparent 55%,rgba(0,0,0,0.55) 100%); }

.cstream-layer{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.cstream-matrix{ z-index:2; opacity:.28; }
.cstream-circuit{ z-index:2; opacity:.5; }
.cstream-math{ z-index:3; }

.cstream-stage{ position:absolute; inset:0; z-index:5; pointer-events:none; }

/* ---- code snippets ---- */
.cstream-snippet{ position:absolute; white-space:pre; font-size:13px; font-weight:500; color:var(--cs-code);
  text-shadow:0 0 6px rgba(86,163,255,.45),0 0 16px rgba(47,123,255,.25); letter-spacing:.2px; opacity:0;
  will-change:transform,opacity,filter,clip-path; padding-left:10px; border-left:2px solid rgba(86,225,255,.35);
  max-width:46%; overflow:hidden; text-overflow:ellipsis; }
.cstream-snippet .kw{color:#7fb4ff;}.cstream-snippet .str{color:#67e8b0;}.cstream-snippet .num{color:#ffd479;}
.cstream-snippet .com{color:#5f7aa0;font-style:italic;}.cstream-snippet .fn{color:#56e1ff;}

@keyframes csZoom{0%{opacity:0;transform:translate(-50%,-50%) scale(.55);filter:blur(7px);}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0);}
  80%{opacity:1;transform:translate(-50%,-50%) scale(1.02);filter:blur(0);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.25);filter:blur(6px);}}
@keyframes csType{0%{opacity:0;clip-path:inset(0 100% 0 0);transform:translate(-50%,-50%);}
  8%{opacity:1;}45%{clip-path:inset(0 0 0 0);}82%{opacity:1;clip-path:inset(0 0 0 0);}
  100%{opacity:0;clip-path:inset(0 0 0 0);transform:translate(-50%,-50%);}}
.cstream-typing::after{content:'';position:absolute;right:-2px;top:10%;height:80%;width:2px;
  background:var(--cs-cyan);box-shadow:0 0 8px var(--cs-cyan);animation:csCaret .5s steps(1) infinite;}
@keyframes csCaret{50%{opacity:0;}}
@keyframes csGlitch{0%{opacity:0;transform:translate(calc(-50% - 40px),-50%) skewX(18deg);filter:blur(4px);}
  12%{opacity:1;transform:translate(calc(-50% + 6px),-50%) skewX(-6deg);filter:blur(0);}
  20%{transform:translate(-50%,-50%) skewX(0);}82%{opacity:1;transform:translate(-50%,-50%);}
  100%{opacity:0;transform:translate(calc(-50% + 30px),-50%) skewX(-10deg);filter:blur(3px);}}
@keyframes csDrift{0%{opacity:0;transform:translate(-50%,calc(-50% + 26px)) scale(.9);filter:blur(5px);}
  22%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0);}
  78%{opacity:1;transform:translate(-50%,calc(-50% - 10px)) scale(1);filter:blur(0);}
  100%{opacity:0;transform:translate(-50%,calc(-50% - 40px)) scale(1);filter:blur(5px);}}
@keyframes csFlip{0%{opacity:0;transform:translate(-50%,-50%) perspective(600px) rotateX(85deg);filter:blur(4px);}
  25%{opacity:1;transform:translate(-50%,-50%) perspective(600px) rotateX(0);filter:blur(0);}
  80%{opacity:1;transform:translate(-50%,-50%) perspective(600px) rotateX(0);}
  100%{opacity:0;transform:translate(-50%,-50%) perspective(600px) rotateX(-80deg);filter:blur(4px);}}
.cs-a-zoom{animation:csZoom var(--life) ease-in-out forwards;}
.cs-a-type{animation:csType var(--life) ease-in-out forwards;}
.cs-a-glitch{animation:csGlitch var(--life) cubic-bezier(.2,.8,.2,1) forwards;}
.cs-a-drift{animation:csDrift var(--life) ease-in-out forwards;}
.cs-a-flip{animation:csFlip var(--life) ease-out forwards;}

/* ---- program cards ---- */
.cstream-card{ position:absolute; opacity:0; will-change:transform,opacity,filter; transform:translate(-50%,-50%); }
.cstream-card img{ display:block; width:100%; height:auto; }
@keyframes csCardZoom{0%{opacity:0;transform:translate(-50%,-50%) scale(.6);filter:blur(8px);}
  16%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0);}
  80%{opacity:1;transform:translate(-50%,-50%) scale(1.015);filter:blur(0);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.18);filter:blur(7px);}}
@keyframes csCardDrift{0%{opacity:0;transform:translate(-50%,calc(-50% + 34px)) scale(.92);filter:blur(6px);}
  20%{opacity:1;transform:translate(-50%,-50%) scale(1);filter:blur(0);}
  78%{opacity:1;transform:translate(-50%,calc(-50% - 12px));filter:blur(0);}
  100%{opacity:0;transform:translate(-50%,calc(-50% - 48px));filter:blur(6px);}}
@keyframes csCardFlip{0%{opacity:0;transform:translate(-50%,-50%) perspective(900px) rotateY(80deg) scale(.9);filter:blur(5px);}
  22%{opacity:1;transform:translate(-50%,-50%) perspective(900px) rotateY(0) scale(1);filter:blur(0);}
  80%{opacity:1;transform:translate(-50%,-50%) perspective(900px) rotateY(0);}
  100%{opacity:0;transform:translate(-50%,-50%) perspective(900px) rotateY(-70deg) scale(.95);filter:blur(5px);}}
@keyframes csCardGlitch{0%{opacity:0;transform:translate(calc(-50% - 50px),-50%) skewX(14deg) scale(.95);filter:blur(5px);}
  10%{opacity:1;transform:translate(calc(-50% + 8px),-50%) skewX(-5deg);filter:blur(0);}
  18%{transform:translate(-50%,-50%) skewX(0);}80%{opacity:1;transform:translate(-50%,-50%);}
  100%{opacity:0;transform:translate(calc(-50% + 36px),-50%) skewX(-8deg);filter:blur(4px);}}
.cs-c-zoom{animation:csCardZoom var(--life) ease-in-out forwards;}
.cs-c-drift{animation:csCardDrift var(--life) ease-in-out forwards;}
.cs-c-flip{animation:csCardFlip var(--life) ease-out forwards;}
.cs-c-glitch{animation:csCardGlitch var(--life) cubic-bezier(.2,.8,.2,1) forwards;}

.cstream-win{background:rgba(8,18,38,.92);border:1px solid rgba(86,225,255,.45);border-radius:8px;
  box-shadow:0 0 0 1px rgba(47,123,255,.25),0 14px 40px rgba(0,0,0,.6),0 0 32px rgba(47,123,255,.35);overflow:hidden;}
.cstream-win .bar{display:flex;align-items:center;gap:7px;padding:7px 10px;
  background:linear-gradient(180deg,rgba(20,40,75,.95),rgba(10,22,45,.95));border-bottom:1px solid rgba(86,225,255,.25);}
.cstream-win .bar i{width:9px;height:9px;border-radius:50%;display:inline-block;}
.cstream-win .bar .r{background:#ff5f57;}.cstream-win .bar .y{background:#febc2e;}.cstream-win .bar .g{background:#28c840;}
.cstream-win .bar .t{margin-left:8px;font-size:11px;letter-spacing:1px;color:#9fd0ff;text-transform:lowercase;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}
.cstream-win .scan{position:relative;}
.cstream-win .scan::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(86,225,255,.04) 0 2px,transparent 2px 4px);mix-blend-mode:screen;}
.cstream-pol{background:#0c1a30;padding:10px 10px 34px;border-radius:3px;
  box-shadow:0 16px 40px rgba(0,0,0,.65),0 0 26px rgba(47,123,255,.25);border:1px solid rgba(120,180,255,.18);}
.cstream-pol img{border-radius:2px;}
.cstream-pol .cap{position:absolute;left:0;right:0;bottom:8px;text-align:center;
  font-family:'Caveat',cursive;font-size:19px;color:#bcd9ff;letter-spacing:.5px;}
.cstream-glow{border-radius:6px;overflow:hidden;
  box-shadow:0 0 0 1px rgba(86,225,255,.5),0 0 28px rgba(47,123,255,.5),0 12px 36px rgba(0,0,0,.55);}
.cstream-glow .cap{position:absolute;left:8px;bottom:8px;font-size:11px;letter-spacing:1px;color:#cfe6ff;
  background:rgba(4,10,24,.7);padding:3px 8px;border-radius:4px;border:1px solid rgba(86,225,255,.3);}
.cstream-glow .gloss{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,255,255,.10),transparent 40%);}

/* ---- HUD ---- */
.cstream-hud{position:absolute;z-index:7;pointer-events:none;color:rgba(159,208,255,.55);
  font-size:11px;letter-spacing:3px;text-transform:uppercase;}
.cstream-tl{top:18px;left:22px;font-family:'Orbitron',sans-serif;}
.cstream-tr{top:18px;right:22px;}
.cstream-bl{bottom:16px;left:22px;}
.cstream-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--cs-cyan);
  box-shadow:0 0 10px var(--cs-cyan);margin-right:8px;animation:csPulse 1.8s ease-in-out infinite;vertical-align:middle;}
@keyframes csPulse{0%,100%{opacity:.4;}50%{opacity:1;}}

/* ---- full-page BACKGROUND mode ---- */
.cstream-background{
  position:fixed; inset:0; width:100vw; height:100vh;
  z-index:0;            /* sits behind page content */
  pointer-events:none;  /* clicks pass through to the page */
}
/* Lift normal page content above the fixed background. */
body:has(.cstream-background) #page,
body:has(.cstream-background) .site,
body:has(.cstream-background) .wp-site-blocks,
body:has(.cstream-background) #content,
body:has(.cstream-background) main{
  position:relative; z-index:1;
}
/* Intensity levels (dim/faint add a darkening veil + lower opacity). */
.cstream-background.cstream-intensity-full{ opacity:1; }
.cstream-background.cstream-intensity-dim{ opacity:.85; }
.cstream-background.cstream-intensity-dim .cstream-vignette{
  background:radial-gradient(ellipse 90% 90% at 50% 50%,rgba(2,8,22,.35),rgba(0,0,0,.6) 100%);
}
.cstream-background.cstream-intensity-faint{ opacity:.5; }
.cstream-background.cstream-intensity-faint .cstream-vignette{
  background:radial-gradient(ellipse 95% 95% at 50% 50%,rgba(2,8,22,.55),rgba(0,0,0,.75) 100%);
}