/* Selected original effects and animations imported from the user-supplied NIGHT INDEX v4.6.11.
   Their motion curves and temporal behavior are preserved; the palette and placement are adapted by style.css. */
.intro-panel{position:absolute;padding:22px 18px;border:1px solid #a2c1c22c;background:linear-gradient(155deg,#cfeced0c,#09121912 65%);backdrop-filter:blur(.8px);overflow:hidden;box-shadow:0 8px 30px #01060a28;animation:panelPulse 4.6s steps(2,end) infinite;--panel-alpha:.5;opacity:var(--panel-alpha)}
.intro-panel::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 21px,#bbd1d208 22px);pointer-events:none;}
.intro-panel .p-top{display:flex;justify-content:space-between;gap:14px;padding-bottom:12px;border-bottom:1px solid #bbdce42a;font:10px Consolas,monospace;letter-spacing:.18em;color:#c8e7e8a8;white-space:nowrap}
.intro-panel .p-body{margin-top:18px;display:grid;gap:7px;color:#a8c3c8a8;font:10px/1.45 Consolas,monospace;letter-spacing:.07em;padding-bottom:120px;animation:folioScroll 18s linear infinite}
.intro-panel .p-body div{overflow:hidden;text-overflow:clip;white-space:nowrap}
.intro-panel .p-body div:nth-child(3n+1){color:#e3eeee72}
.intro-panel .p-stamp{position:absolute;right:12px;bottom:12px;color:#83c7d357;font:9px Consolas,monospace;letter-spacing:.17em}
.intro-signal-tear{position:absolute;left:-4%;right:-4%;top:var(--tear-top,38%);height:var(--tear-height,13px);z-index:16;opacity:var(--fault,0);pointer-events:none;transform:translate3d(var(--tear-shift,0px),0,0);background:linear-gradient(90deg,transparent,#9fe2eb35 18%,#c3f1f524 52%,transparent 88%);box-shadow:0 1px #b3e4f226,-3px 0 #051017aa;filter:blur(.8px)}
.intro-static-field{position:absolute;inset:0;z-index:13;pointer-events:none;opacity:calc(.035 + var(--intro-flicker,0)*.25);background:repeating-linear-gradient(0deg,#ffffff00 0px,#b1e5ed14 1px,#ffffff00 4px,transparent 7px),radial-gradient(ellipse 55% 40% at 58% var(--beam-y,56%),#99ddec26,transparent 85%);mix-blend-mode:screen}
.intro-lockfield{position:absolute;left:50%;top:49%;width:min(52vw,660px);aspect-ratio:1;transform:translate(-50%,-50%) scale(calc(.22 + var(--lock,0)*1.25)) rotate(calc(var(--lock,0)*88deg));transform-origin:center center;z-index:4;pointer-events:none;opacity:calc(var(--lock,0)*.92)}
.intro-lockfield::before,.intro-lockfield::after{content:"";position:absolute;inset:0;border:1px solid #8ed8e133;border-radius:50%;box-shadow:0 0 0 34px #79d4df08,0 0 0 104px #79d4df05}
.intro-lockfield::after{content:"";position:absolute;inset:0;border:1px solid #8ed8e133;border-radius:50%;box-shadow:0 0 0 34px #79d4df08,0 0 0 104px #79d4df05}
.intro-focus{position:absolute;z-index:9;left:50%;top:50%;width:146px;height:76px;transform:translate(calc(-50% + var(--focus-x,0px)),calc(-50% + var(--focus-y,0px))) scale(var(--focus-scale,1));border:1px solid rgba(144,214,229,.65);background:rgba(33,86,100,.07);box-shadow:0 0 23px #9de5ec1a,0 0 0 1px #a8e6ee18 inset;will-change:transform;pointer-events:none;}
.intro-focus::after{content:"";position:absolute;inset:-5px;border:1px solid transparent;border-left-color:#8bcfdf55;border-bottom-color:#8bcfdf33;transform:translate(3px,-2px);opacity:.45}
@keyframes bodyGrain{0%{transform:translate(0,0)}25%{transform:translate(1.2%,-1.3%)}50%{transform:translate(-1.4%,1.6%)}75%{transform:translate(1.1%,1.1%)}100%{transform:translate(-1.3%,-.8%)}}
@keyframes panelPulse{0%,100%{opacity:var(--panel-alpha);filter:brightness(1)}22%{opacity:calc(var(--panel-alpha) * .96);filter:brightness(1.02)}23%{opacity:calc(var(--panel-alpha) * .55);filter:brightness(.9)}24%{opacity:calc(var(--panel-alpha) * .94);filter:brightness(1.08)}60%{opacity:calc(var(--panel-alpha) * .84)}61%{opacity:calc(var(--panel-alpha) * .98)}62%{opacity:calc(var(--panel-alpha) * .72)}}
@keyframes folioScroll{0%{transform:translateY(0)}100%{transform:translateY(-96px)}}
@keyframes nodeCycle{0%,100%{opacity:0;filter:blur(2px)}15%,64%{opacity:var(--opacity,.42);filter:blur(0)}72%{opacity:calc(var(--opacity,.42)*.25)}80%,95%{opacity:0;filter:blur(1px)}}
@keyframes surveilSpin{from{transform:translate(-50%,-50%) rotate(0)}to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes surveilSpinReverse{from{transform:translate(-50%,-50%) rotate(360deg)}to{transform:translate(-50%,-50%) rotate(0)}}
@keyframes ambientBreath{0%,100%{opacity:.46}45%{opacity:1}75%{opacity:.64}}
@keyframes ambientDrift{to{transform:translate3d(56px,-86px,0)}}
@keyframes ambientGlide{0%,10%{transform:translateX(-100%);opacity:0}35%{opacity:.65}70%,100%{transform:translateX(260%);opacity:0}}
@keyframes ambientLine{0%,100%{opacity:.15;transform:translateY(-18px)}50%{opacity:.52;transform:translateY(18px)}}
@keyframes liveRail{from{transform:translateX(-150%)}to{transform:translateX(800%)}}
@keyframes introGrain{0%{transform:translate(0)}25%{transform:translate(1.8%,-1.2%)}50%{transform:translate(-1.7%,2.1%)}75%{transform:translate(1.5%,1.4%)}100%{transform:translate(-2%,-1%)}}