
/* GHOSTREIGN V2.2 — INTERACTIVE EXPERIENCE LAYER */
:root{--signal-red:#d74455;--pale:#e9e2e0}
.motion-toggle{background:transparent;border:1px solid #ffffff26;color:#bfb6b9;display:flex;align-items:center;gap:8px;padding:9px 11px;font:9px var(--mono);letter-spacing:.12em;white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.motion-toggle:hover,.motion-toggle:focus-visible{color:#fff;border-color:#b72b41;background:#c02e3811}
.motion-indicator{width:6px;height:6px;background:#d94453;border-radius:50%;box-shadow:0 0 10px #ee4056}
.motion-toggle[aria-pressed="true"] .motion-indicator{background:#5e5c61;box-shadow:none}
.chapter-rail{position:fixed;right:24px;top:50%;transform:translateY(-50%);z-index:55;display:flex;flex-direction:column;gap:15px;align-items:end;filter:drop-shadow(0 1px 10px #000)}
.chapter-rail a{display:flex;align-items:center;flex-direction:row-reverse;gap:14px;min-height:16px;color:#b4a6a8}
.chapter-rail i{display:block;width:5px;height:5px;border:1px solid #9f9393;transform:rotate(45deg);transition:all .3s}
.chapter-rail span{opacity:0;pointer-events:none;transform:translateX(8px);transition:opacity .2s,transform .2s;font:9px var(--mono);letter-spacing:.16em;white-space:nowrap;background:#09090bd9;padding:6px 8px}
.chapter-rail a:hover span,.chapter-rail a:focus-visible span{opacity:1;transform:none}
.chapter-rail a.active i{width:8px;height:8px;border-color:#f05061;background:#bd2638;box-shadow:0 0 13px #d22a40}
.hero-sector{position:absolute;left:clamp(24px,5.4vw,100px);top:20%;z-index:6;display:flex;gap:12px;align-items:center;color:#a69a9e;font:9px/1.8 var(--mono);letter-spacing:.12em;opacity:.65}
.sector-line{height:38px;width:1px;background:#903c45}
.hero-sector strong{font:9px var(--mono);color:#d3c4c7;border:1px solid #75545b;margin-left:12px;padding:5px}
.transmission{padding-top:106px;padding-bottom:50px}
.transmission-heading{display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:40px}
.transmission-heading h3{font:600 clamp(32px,4.3vw,64px)/1.12 var(--serif);letter-spacing:-.035em;margin:15px 0 0}
.transmission-heading h3 em{color:#a7a0a4;font-style:normal}
.transmission-heading>p{max-width:300px;color:#a79da0;font:14px/1.75 var(--body);margin:0 0 7px}
.signal-console{border:1px solid #4d333b;display:grid;grid-template-columns:47% 53%;min-height:515px;background:linear-gradient(130deg,#0b0a0d,#0b080c 60%,#10080d);position:relative;isolation:isolate;overflow:hidden;box-shadow:0 35px 90px #0006}
.signal-console:before{content:"";pointer-events:none;position:absolute;z-index:3;inset:0;background:linear-gradient(90deg,#cf365a1e,transparent 19%,transparent 84%,#f64a6310);opacity:.6}
.signal-visual{position:relative;overflow:hidden;min-height:470px;background:radial-gradient(ellipse at 50% 49%,#4e253030 0%,#181217 35%,#0a090d 70%);border-right:1px solid #48313a;display:grid;place-items:center}
.signal-visual:before{content:"";position:absolute;inset:0;background:linear-gradient(#ffffff07 1px,transparent 1px),linear-gradient(90deg,#ffffff07 1px,transparent 1px);background-size:36px 36px;mask-image:radial-gradient(circle,#000,transparent 74%)}
.signal-scan-lines{position:absolute;inset:0;opacity:.35;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0px,transparent 4px,#ffffff08 5px)}
.signal-bearing{position:absolute;z-index:2;top:22px;left:23px;right:23px;display:flex;justify-content:space-between;font:9px var(--mono);color:#bca7ae}
.radar-grid{width:min(350px,77%);aspect-ratio:1;position:relative;border:1px solid #a13a506e;border-radius:50%;box-shadow:0 0 0 25px #cb3c5320,0 0 0 60px #ad3c4710,inset 0 0 80px #ad27331e;animation:radarBreath 6s ease-in-out infinite}
.radar-grid:before,.radar-grid:after{content:"";position:absolute;z-index:1;background:#89545d7a}
.radar-grid:before{left:50%;top:-17%;bottom:-17%;width:1px}
.radar-grid:after{top:50%;left:-17%;right:-17%;height:1px}
.radar-ring{border-radius:50%;border:1px solid #b1546651;position:absolute;inset:14%}
.radar-ring.ring-b{inset:29%}.radar-ring.ring-c{inset:43%}
.radar-sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 210deg,#ba3f5515 282deg,#e14d6925 338deg,transparent 360deg);animation:radarRotate 14s linear infinite}
.radar-object{position:absolute;z-index:4;inset:10%;display:grid;place-items:center;transition:opacity .6s,transform .8s;filter:drop-shadow(0 7px 15px #000)}
.radar-object svg{width:82%;height:auto;max-height:82%}
.radar-object:not(.radar-hunt){opacity:0;transform:translateY(18px) scale(.8)}
.signal-console[data-mode="modes"] .radar-hunt,.signal-console[data-mode="party"] .radar-hunt{opacity:0;transform:translateY(-18px) scale(.8)}
.signal-console[data-mode="modes"] .radar-modes,.signal-console[data-mode="party"] .radar-party{opacity:1;transform:none}
.signal-console[data-mode="party"] .radar-modes{opacity:0;transform:translateY(18px) scale(.8)}
.signal-console[data-mode="modes"] .signal-visual{background:radial-gradient(ellipse at 50% 50%,#60304044,#110b0c 65%)}
.signal-console[data-mode="party"] .signal-visual{background:radial-gradient(ellipse at 50% 50%,#442b5344,#0d0a15 65%)}
.radar-caption{position:absolute;bottom:21px;left:25px;right:25px;display:flex;gap:12px;justify-content:space-between;font:9px var(--mono);color:#b3a3aa;letter-spacing:.07em;white-space:nowrap}
.radar-caption span:first-child{color:#e6c4cc}
.signal-content{position:relative;display:flex;flex-direction:column;padding:27px clamp(24px,3vw,49px) 22px;min-width:0}
.signal-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;color:#bba3a9;font:10px var(--mono);letter-spacing:.13em}
.transmit-dot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-right:9px;background:#ec5269;box-shadow:0 0 10px #ca2b48;animation:radarDot 2.4s ease infinite}
.signal-sequence{color:#e1d8d8}
.signal-tablist{display:flex;gap:0;border-bottom:1px solid #69555a66;margin-top:33px;overflow-x:auto;scrollbar-width:thin}
.signal-tab{flex:1;min-width:0;background:none;color:#999196;border:0;border-bottom:2px solid transparent;text-align:left;padding:0 10px 17px 0;display:flex;gap:9px;align-items:baseline;font:10px var(--mono);letter-spacing:.06em;transition:color .2s,border-color .2s}
.signal-tab small{font:9px var(--mono);color:#cb4d60}
.signal-tab:hover{color:#f6ecef}
.signal-tab.active{color:#f2e8e9;border-color:#d33a50}
.signal-panel{padding:34px 0 25px;flex:1;animation:signalFade .35s ease}
.signal-panel-index{font:9px var(--mono);letter-spacing:.18em;color:#cd6e81}
.signal-panel h4{font:600 clamp(27px,3vw,43px)/1.25 var(--serif);letter-spacing:-.025em;margin:16px 0 15px}
.signal-panel h4 em{font-style:normal;color:#c64a5e}
.signal-panel>p{font:15px/1.75 var(--body);color:#b6a9ae;max-width:470px;margin:0 0 22px;min-height:55px}
.signal-chips{display:flex;flex-wrap:wrap;gap:7px}
.signal-chips span{border:1px solid #665058;color:#c5b8bd;padding:7px 9px;font:8px var(--mono);letter-spacing:.08em}
.signal-console-footer{display:flex;justify-content:space-between;gap:16px;padding-top:19px;border-top:1px solid #4c353c;color:#897d82;font:8px var(--mono);letter-spacing:.11em}
@keyframes radarRotate{to{transform:rotate(360deg)}}
@keyframes radarBreath{50%{box-shadow:0 0 0 25px #cb3c5310,0 0 0 60px #ad3c4708,inset 0 0 70px #d74f6a25}}
@keyframes radarDot{50%{opacity:.25;box-shadow:none}}
@keyframes signalFade{from{opacity:.2;transform:translateY(7px)}to{opacity:1;transform:none}}
.motion-off .particles,.motion-off .film-grain{opacity:0!important}
.motion-off .radar-grid,.motion-off .radar-sweep,.motion-off .transmit-dot{animation:none!important}
.motion-off .portal-wrap *,.motion-off .portal-wrap,.motion-off .hero-sector{animation:none!important;transition:none!important}
.motion-off .reveal{opacity:1;transform:none;transition:none!important}
.motion-off .signal-panel{animation:none}
.motion-off .radar-object{transition:none}
@media(max-width:1200px){.chapter-rail{right:12px}.chapter-rail span{display:none}.signal-console{grid-template-columns:42% 58%}.signal-content{padding:27px 25px 20px}}
@media(max-width:900px){.transmission-heading{display:block}.transmission-heading>p{max-width:490px;margin-top:16px}.signal-console{grid-template-columns:1fr}.signal-visual{min-height:340px;border-right:0;border-bottom:1px solid #48313a}.radar-grid{width:250px}.radar-caption{bottom:13px}.signal-panel>p{min-height:0}.chapter-rail{display:none}.hero-sector{display:none}}
@media(max-width:760px){.motion-toggle{padding:8px 7px;font-size:8px;gap:5px}.nav-actions{gap:4px}.signal-console{width:100%}.transmission{padding-top:75px;padding-bottom:20px}.transmission-heading h3{font-size:clamp(28px,7vw,45px)}.signal-content{padding:25px 20px 18px}.signal-tab{font-size:9px;gap:5px;line-height:1.3}.signal-tab small{font-size:8px}.signal-console-footer{font-size:7px}.signal-panel h4{font-size:30px}.signal-panel{padding-top:24px}}
@media(max-width:400px){.signal-visual{min-height:290px}.radar-grid{width:215px}.signal-tab{font-size:8px}.signal-console-footer span:last-child{display:none}.motion-toggle{padding:6px}}
@media(prefers-reduced-motion:reduce){.radar-grid,.radar-sweep,.transmit-dot{animation:none!important}.signal-panel{animation:none}}

.motion-off .mouse-light{opacity:0!important}
.motion-off .rift-transition,.motion-off .rift-core{animation:none!important}
