/* Digital Rain look: cinematic layer (assets/rain-fx.js). Everything is scoped to html[data-skin="matrix"]. */
#rxRain,#rxBoot,.rx-vig,.rx-hud,.rx-cursor,.rx-tear{display:none}
html[data-skin="matrix"] #rain{display:none!important}
html[data-skin="matrix"] #rxRain{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:1}
/* home keeps its 3D scenes in front; the rain falls faintly behind them */
html[data-skin="matrix"][data-page="home"] #rxRain{opacity:.32;-webkit-mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.55) 70%,rgba(0,0,0,.3));mask-image:linear-gradient(180deg,#000,rgba(0,0,0,.55) 70%,rgba(0,0,0,.3))}

/* let the rain show in the side gutters while the reading column stays dark and calm */
@media (min-width:900px){
  html[data-skin="matrix"] .section,html[data-skin="matrix"] .contact{background:linear-gradient(90deg,rgba(1,4,2,.28),rgba(1,4,2,.86) max(9vw,calc(50% - 560px)),rgba(1,4,2,.86) min(91vw,calc(50% + 560px)),rgba(1,4,2,.28))}
  html[data-skin="matrix"] .section.alt{background:linear-gradient(90deg,rgba(2,9,4,.34),rgba(2,9,4,.92) max(9vw,calc(50% - 560px)),rgba(2,9,4,.92) min(91vw,calc(50% + 560px)),rgba(2,9,4,.34))}
}

/* phosphor screen: edge vignette and a faint, irregular flicker on the scan lines */
html[data-skin="matrix"] .rx-vig{display:block;position:fixed;inset:0;z-index:59;pointer-events:none;background:radial-gradient(ellipse 125% 95% at 50% 45%,transparent 62%,rgba(0,6,2,.5) 100%)}
html[data-skin="matrix"] .scan{animation:rxFlick 9s steps(1) infinite}
@keyframes rxFlick{0%,100%{opacity:1}41%{opacity:.7}41.6%{opacity:1}77%{opacity:.82}77.5%{opacity:1}}

/* blinking block cursor */
html[data-skin="matrix"] .rx-cursor{display:inline-block;width:.52em;height:.82em;margin-left:.14em;background:#00ff66;box-shadow:0 0 14px rgba(0,255,102,.85);vertical-align:-.06em;animation:rxBlink 1.1s steps(1) infinite}
@keyframes rxBlink{0%,55%{opacity:1}56%,100%{opacity:0}}

/* boot transmission */
html[data-skin="matrix"] #rxBoot{display:block;position:fixed;inset:0;z-index:300;background:#000;cursor:pointer}
html[data-skin="matrix"] #rxBoot.wipe{background:transparent}
#rxBoot canvas{position:absolute;inset:0;width:100%;height:100%}
#rxBoot .rx-tun{opacity:.85;filter:saturate(1.1)}
/* the lines float in 3D: each new one lands sharp at the front, older ones sink back and blur */
#rxBoot .rx-lines{position:absolute;left:max(20px,9vw);right:20px;top:30%;perspective:900px;perspective-origin:20% 50%;font:clamp(16px,2.2vw,25px)/1.7 "Share Tech Mono","IBM Plex Mono",monospace;color:#00ff66}
#rxBoot .rx-ln{white-space:pre-wrap;text-shadow:0 0 10px rgba(0,255,102,.75),0 0 2px #00ff66;transform-origin:0 50%;transition:transform .7s cubic-bezier(.2,.7,.2,1),filter .7s,opacity .7s}
#rxBoot .rx-ln.back{transform:translateZ(calc(var(--d,1) * -70px)) rotateY(4deg);filter:blur(calc(var(--d,1) * .9px));opacity:calc(1 - var(--d,1) * .17)}
#rxBoot .rx-ln .rx-cursor{display:inline-block}
#rxBoot .rx-ln>span:first-child{display:inline-block;max-width:100%;transform-origin:0 50%;animation:rxLn .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes rxLn{0%{opacity:0;filter:blur(12px);transform:translateZ(160px) scale(1.04);letter-spacing:.35em}55%{opacity:1;filter:blur(2px)}100%{opacity:1;filter:none;transform:none;letter-spacing:0}}
#rxBoot .rx-lines.final .rx-ln.back{filter:blur(5px);opacity:.18;transform:translateZ(-260px) rotateY(6deg)}
#rxBoot .rx-ln.big{margin-top:.6em;font-size:clamp(30px,5.4vw,72px);line-height:1.08;color:#eafff0;text-shadow:0 0 18px rgba(0,255,102,.85),0 0 42px rgba(0,255,102,.45)}
#rxBoot .rx-ln.big>span:first-child{animation-duration:1.1s}
/* at the end the camera surges forward and the title rushes past into the screen */
#rxBoot.warp .rx-lines{transition:transform .55s cubic-bezier(.6,0,.9,.4),opacity .55s,filter .55s;transform:scale(1.9);opacity:0;filter:blur(10px)}
#rxBoot .rx-skip{position:absolute;right:calc(18px + env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));min-height:44px;padding:0 16px;font:14px "Share Tech Mono",monospace;letter-spacing:.08em;color:#8dffb4;background:rgba(0,0,0,.6);border:1px solid #1f6b40;border-radius:2px;cursor:pointer}
#rxBoot.wipe .rx-lines,#rxBoot.wipe .rx-skip{opacity:0;transition:opacity .2s}
/* waking up: the page behind the rain starts blurred and pulls into focus */
html[data-skin="matrix"] #rxBoot.wipe{-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4)}
html[data-skin="matrix"] #rxBoot.wipe.focus{-webkit-backdrop-filter:blur(0) saturate(1);backdrop-filter:blur(0) saturate(1);transition:backdrop-filter .9s cubic-bezier(.3,.6,.2,1),-webkit-backdrop-filter .9s cubic-bezier(.3,.6,.2,1)}

/* titles sharpen out of a blur while they decode */
html[data-skin="matrix"] .rx-mat{animation:rxMat var(--rxd,950ms) cubic-bezier(.3,.7,.2,1) both}
@keyframes rxMat{0%{filter:blur(9px);opacity:.35}60%{filter:blur(1.5px);opacity:.9}100%{filter:none;opacity:1}}

/* ripple: a ring that bends what is behind it */
.rx-ripple{display:none}
html[data-skin="matrix"] .rx-ripple{display:block;position:fixed;z-index:61;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;pointer-events:none;border:1px solid rgba(0,255,102,.55);box-shadow:0 0 18px rgba(0,255,102,.35),inset 0 0 18px rgba(0,255,102,.25);-webkit-backdrop-filter:blur(3px) brightness(1.25);backdrop-filter:blur(3px) brightness(1.25);-webkit-mask-image:radial-gradient(circle,transparent 58%,#000 66%,#000 86%,transparent 100%);mask-image:radial-gradient(circle,transparent 58%,#000 66%,#000 86%,transparent 100%);animation:rxRip 1.05s cubic-bezier(.2,.6,.3,1) forwards}
@keyframes rxRip{0%{transform:scale(.3);opacity:1}100%{transform:scale(22);opacity:0}}

/* the portrait: a light green cast instead of a full green wash, and it rains in as green code that clears into the photo */
html[data-skin="matrix"] .hub-core{--ph-f:saturate(.8) contrast(1.05);--ph-o:linear-gradient(180deg,rgba(0,255,102,.16),rgba(0,140,60,.12));--ph-b:soft-light}
.rx-face{display:none}
html[data-skin="matrix"] .rx-face{display:block;position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);border-radius:var(--hub-r,50%);z-index:1;opacity:0;filter:saturate(.8) contrast(1.05);transition:opacity .35s;pointer-events:none}
html[data-skin="matrix"] .hub-core.rx-pix .rx-face{opacity:1;transition:none}
html[data-skin="matrix"] .rx-face{transition:opacity .6s}
html[data-skin="matrix"] .hub-core{cursor:pointer}

/* live-feed console: a slim vertical readout in the left gutter of wide screens */
html[data-skin="matrix"]:not([data-page="home"]) .rx-hud{display:flex;position:fixed;left:calc(22px + env(safe-area-inset-left,0px));bottom:28px;z-index:58;gap:14px;align-items:center;writing-mode:vertical-rl;transform:rotate(180deg);font:12px/1 "Share Tech Mono",monospace;letter-spacing:.14em;color:#8dffb4;pointer-events:none;text-shadow:0 0 8px rgba(0,255,102,.55)}
.rx-hud i{width:7px;height:7px;border-radius:50%;background:#00ff66;box-shadow:0 0 8px #00ff66;animation:blink 1.6s steps(1) infinite}
.rx-hud b{font-weight:400;color:#d8ffe4}
@media (max-width:1279px){html[data-skin="matrix"] .rx-hud{display:none!important}}

/* deja vu: the rain repeats a moment and the signal tears */
html[data-skin="matrix"].rx-glitch .rx-tear{display:block;position:fixed;inset:0;z-index:61;pointer-events:none}
.rx-tear i{position:absolute;left:0;right:0;height:10px;top:var(--t1,30%);background:repeating-linear-gradient(90deg,rgba(0,255,102,.32) 0 3px,transparent 3px 7px);box-shadow:0 0 18px rgba(0,255,102,.35);animation:rxTear .4s steps(4) both}
.rx-tear i+i{top:var(--t2,60%);height:4px;animation-delay:.06s}
@keyframes rxTear{0%{transform:translateX(-30px);opacity:1}25%{transform:translateX(22px)}50%{transform:translateX(-12px);opacity:.8}75%{transform:translateX(6px);opacity:.5}100%{transform:none;opacity:0}}
/* reality slips for a moment: the whole screen softens and shifts tint */
.rx-slip{display:none}
html[data-skin="matrix"].rx-glitch .rx-slip{display:block;position:fixed;inset:0;z-index:60;pointer-events:none;-webkit-backdrop-filter:blur(2.5px) brightness(1.2) hue-rotate(-12deg);backdrop-filter:blur(2.5px) brightness(1.2) hue-rotate(-12deg);animation:rxSlip .42s steps(3) both}
@keyframes rxSlip{0%{opacity:1;transform:translateX(-5px)}40%{opacity:.6;transform:translateX(4px)}70%{opacity:.9;transform:none}100%{opacity:0}}
html[data-skin="matrix"].rx-glitch #rxRain{animation:rxJit .36s steps(3) both}
html[data-skin="matrix"].rx-glitch .scan{animation:rxFlash .36s steps(2) both}
@keyframes rxJit{0%{transform:translateX(-6px)}33%{transform:translateX(5px)}66%{transform:translateX(-2px)}100%{transform:none}}
@keyframes rxFlash{0%{opacity:2}50%{opacity:.4}100%{opacity:1}}

@media (prefers-reduced-motion:reduce){
  html[data-skin="matrix"] .scan,html[data-skin="matrix"] .rx-cursor,.rx-hud i{animation:none}
  html[data-skin="matrix"] .rx-tear,#rxBoot,html[data-skin="matrix"] .rx-slip,html[data-skin="matrix"] .rx-ripple{display:none!important}
}
@media print{#rxRain,#rxBoot,.rx-vig,.rx-hud,.rx-tear,.rx-slip,.rx-ripple{display:none!important}}