/* ===== Horus light add-on (static styles; nothing animates continuously except two tiny CSS loops on the gate) ===== */
@font-face{font-family:HorusNastaliq;src:url(../fonts/nastaliq.woff) format("woff");font-display:swap}
#intro{display:none!important}
/* gate */
#cx{background:radial-gradient(120% 90% at 50% 38%,#0b0a0d 0%,#050406 42%,#000 78%)!important;cursor:pointer}
#cxe{display:none!important}
#cxb{position:absolute!important;width:1px;height:1px;padding:0!important;border:0!important;opacity:0;pointer-events:none;overflow:hidden}
#cxt{display:flex;flex-direction:column;align-items:center;letter-spacing:0!important;margin:0!important;font-size:inherit!important;color:inherit!important}
#cxt .hx-wm{font:400 clamp(64px,10vw,124px)/1.9 HorusNastaliq,Vaz,Tahoma,serif;padding:0 .2em;
 background:linear-gradient(176deg,#fffaf0 0%,#f4dca4 38%,#c99a3a 60%,#fff1c8 72%,#b68630 100%);-webkit-background-clip:text;background-clip:text;color:transparent;
 text-shadow:none;filter:drop-shadow(0 2px 0 rgba(70,46,8,.9)) drop-shadow(0 12px 18px rgba(0,0,0,.85))}
#cxt .hx-key{display:block;margin-top:-.6em;padding:9px 30px;border-radius:14px;
 background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.22);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -8px 16px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.6)}
#cxt .hx-key i{font:300 12px/1 "Segoe UI",system-ui,sans-serif;font-style:normal;letter-spacing:.55em;color:#e9dcc0;margin-inline-start:.55em;direction:ltr;display:block}
#cxh{display:flex;align-items:center;gap:10px;margin-top:14px;font-size:15px!important;color:#e2d4b2!important;letter-spacing:0!important}
#cxh .hx-cur{width:46px;height:46px;overflow:visible}
#cxh .ptr{fill:#f7f1e3;stroke:#1a140a;stroke-width:1.2;transform-origin:17px 15px;animation:lxTap 2s ease-in-out infinite}
#cxh .rp{fill:none;stroke:#e8c46e;stroke-width:1.6;opacity:0;transform-origin:17px 15px;animation:lxRip 2s ease-out infinite}
#cxh .r2{animation-delay:.18s;stroke:#19e6d0}
@keyframes lxTap{0%,30%,100%{transform:translate(3px,3px) scale(1)}40%{transform:translate(0,0) scale(.86)}52%{transform:translate(0,0) scale(1)}}
@keyframes lxRip{0%,38%{opacity:0;transform:scale(.4)}42%{opacity:1}100%{opacity:0;transform:scale(3.4)}}
#cxs{z-index:6}
/* tunnel titles: ivory with a dark halo, readable on any colour */
html body #tn .tn-h{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:#fff3d6!important;-webkit-text-fill-color:#fff3d6!important;filter:none!important;
 text-shadow:0 1px 0 #6b4a12,0 2px 4px rgba(0,0,0,.95),0 0 22px rgba(0,0,0,.85)!important}
/* icon navigation */
.lx-nav a.l{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;padding:0!important;border-radius:12px;transition:background .2s,transform .2s}
.lx-nav a.l svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.lx-nav a.l:hover{background:rgba(232,201,113,.12);transform:translateY(-2px)}
.lx-nav a.l .tip{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%,-4px);white-space:nowrap;font-size:12px;padding:4px 9px;border-radius:8px;background:#0b0d12;border:1px solid rgba(232,201,113,.25);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:5}
.lx-nav a.l:hover .tip,.lx-nav a.l:focus-visible .tip{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){#cxh .ptr,#cxh .rp{animation:none}}
/* tunnel: floating icons and the old pixel pyramid removed; holographic pyramid layer */
#tn .tn-fxl{display:none!important}
#tn-cv + canvas:not(.lx-pyr){display:none!important}
.lx-pyr{--p:0;position:absolute;left:50%;bottom:0;width:min(78vw,calc(64vh*1.13));aspect-ratio:1202/1060;pointer-events:none;transform:translateX(-50%);
 opacity:clamp(0,calc(var(--p)*14),1);perspective:900px}
.lx-blk{direction:ltr;position:absolute;inset:0;display:grid;grid-template-columns:repeat(12,1fr);grid-template-rows:repeat(10,1fr);
 -webkit-mask-image:radial-gradient(closest-side at 50% 52%,#000 62%,transparent 100%);mask-image:radial-gradient(closest-side at 50% 52%,#000 62%,transparent 100%)}
.lx-blk .lb{--k:clamp(0,calc((var(--p) - var(--d))/.2),1);--e:calc(var(--k)*var(--k)*(3 - 2*var(--k)));--q:calc(1 - var(--e));
 display:block;background:url(../img/pyramid.webp) no-repeat;background-size:1200% 1000%;
 background-position:calc(var(--c)*100%/11) calc(var(--r)*100%/9);
 transform:translate3d(calc(var(--x)*var(--q)),calc(var(--y)*var(--q)),calc(var(--z)*var(--q))) rotateX(calc(var(--rx)*var(--q))) rotateY(calc(var(--ry)*var(--q))) rotateZ(calc(var(--rz)*var(--q))) scale(calc(.4 + .6*var(--e)));
 opacity:calc(var(--e)*1.4);outline:1px solid rgba(80,180,255,calc(var(--q)*.9));outline-offset:-1px;
 box-shadow:0 0 calc(var(--q)*18px) rgba(64,176,255,calc(var(--q)*.8))}
.lx-flash{position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
 background:radial-gradient(closest-side at 50% 45%,rgba(120,200,255,.55),rgba(242,193,78,.18) 45%,transparent 70%);
 opacity:calc(clamp(0,calc((var(--p) - .8)/.06),1) * clamp(0,calc((.95 - var(--p))/.09),1))}
@media (prefers-reduced-motion:reduce){.lx-blk .lb{transform:none;opacity:calc(var(--p)*3)}}
/* glass key: slow float, a light sweep across the glass, and a tilt that answers the pointer */
#cxt .hx-key{position:relative;overflow:hidden;animation:lxFloat 6s ease-in-out infinite;transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
#cxt .hx-key::after{content:"";position:absolute;top:-40%;bottom:-40%;width:38%;left:-50%;transform:skewX(-20deg);
 background:linear-gradient(90deg,transparent,rgba(255,255,255,.38),transparent);animation:lxSheen 5.5s cubic-bezier(.6,0,.2,1) infinite}
#cx:hover #cxt .hx-key{border-color:rgba(232,196,110,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -8px 16px rgba(0,0,0,.35),0 14px 30px rgba(0,0,0,.65),0 0 24px rgba(232,196,110,.18)}
@keyframes lxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@keyframes lxSheen{0%,55%{left:-50%}85%,100%{left:130%}}
@media (prefers-reduced-motion:reduce){#cxt .hx-key,#cxt .hx-key::after{animation:none}}

/* blue + gold kit */
#cx{background:radial-gradient(120% 90% at 50% 38%,#0a1630 0%,#050b1c 42%,#01040c 78%)!important}
#cxt .hx-key{border-color:rgba(88,190,255,.35)}
#cxh .r2{stroke:#4fb6ff}
html body #tn .tn-h{text-shadow:0 1px 0 #6b4a12,0 2px 4px rgba(0,0,0,.95),0 0 22px rgba(2,8,24,.9),0 0 40px rgba(47,168,255,.25)!important}
.lx-nav a.l:hover{background:rgba(64,176,255,.14)}
.lx-nav a.l .tip{background:#06102a;border-color:rgba(88,190,255,.35)}