/* Scoped fortress scene. The section can move without carrying page layout rules. */
#hero.moat-hero{--mh-blue:#91bfdd;--mh-red:#ff776f;position:relative;isolation:isolate;overflow:hidden;width:100%;height:clamp(810px,64vw,1100px);min-height:810px;background:#050d19;color:#e8f1f8;border-bottom:1px solid #24364b;font-family:var(--font,'Public Sans',sans-serif)}
#hero .mh-stage{position:absolute;inset:0;background:radial-gradient(ellipse at 51% 63%,#142e49 0,#0b1a2b 35%,#050d19 72%)}
#hero canvas,#hero .mh-still{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
#hero .mh-still img{width:100%;height:100%;object-fit:cover}#hero[data-ready=true] .mh-still{display:none}
#hero .mh-vignette{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#050d1940 0,transparent 32%,transparent 75%,#050d19 100%),linear-gradient(90deg,#050d1944,transparent 20%,transparent 80%,#050d1944)}
#hero .mh-heading{position:absolute;z-index:2;top:35px;left:10%;width:80%;text-align:center;pointer-events:none}
#hero .mh-kicker{display:flex;align-items:center;justify-content:center;gap:10px;font:10px/1.5 var(--mono,monospace);letter-spacing:.2em;color:#93b6ce;margin:0 0 18px}
#hero .mh-kicker span{width:5px;height:5px;border-radius:50%;background:#b7d9f0;box-shadow:0 0 12px #91cffa}
#hero h1{font-family:var(--display,sans-serif);font-size:clamp(46px,4.8vw,76px);line-height:1.06;letter-spacing:-.055em;font-weight:400;margin:0 0 16px;text-wrap:balance;text-shadow:0 3px 28px #020914}
#hero h1 span{color:#9bbdd5}
#hero .mh-intro{font-size:13px;line-height:1.7;color:#a8bbcc;margin:0 0 18px}
#hero .mh-phone-break{display:none}
#hero .mh-actions{display:flex;justify-content:center;align-items:center;gap:18px;pointer-events:auto;width:fit-content;margin:auto}
#hero .mh-primary{display:flex;align-items:center;gap:28px;padding:13px 18px;background:#c3d9e8;color:#0b1b2a;border:1px solid #ebf7ff65;border-radius:3px;font-size:12px;font-weight:700;box-shadow:0 2px 20px #07122266}
#hero .mh-primary:hover{background:#e0eff8}#hero .mh-actions>span{font:10px var(--mono,monospace);color:#7f9ab0}
#hero .mh-coordinate{position:absolute;top:40px;left:32px;font:8px/1.9 var(--mono,monospace);letter-spacing:.1em;color:#6e8ca4;pointer-events:none}
#hero .mh-controls{position:absolute;right:32px;top:36px;z-index:5}
#hero .mh-controls button{border:1px solid #52708855;border-radius:30px;background:#09172699;color:#b5cbdc;padding:9px 13px;font:10px var(--mono,monospace);min-height:36px;min-width:79px}
#hero .mh-controls button span{margin-right:5px}
#hero .mh-map-label{position:absolute;font:10px/1.9 var(--mono,monospace);letter-spacing:.06em;color:#a9c4d7;pointer-events:none}
#hero .mh-map-label>span{color:#5c83a0;margin-right:8px}#hero .mh-map-label small{font:11px var(--font,sans-serif);color:#6c8ba2;letter-spacing:0;padding-left:27px}
#hero .mh-label-wallet{top:40%;left:73%;}#hero .mh-label-wallet:before{content:'';position:absolute;width:75px;height:1px;right:calc(100% + 12px);top:10px;background:linear-gradient(90deg,transparent,#65839b)}
#hero .mh-label-shore{top:69%;left:7%}
#hero .mh-bottom{position:absolute;bottom:26px;left:32px;right:32px;display:flex;justify-content:space-between;align-items:flex-end;gap:24px;z-index:3}
#hero .mh-source{max-width:390px;min-width:230px}#hero .mh-source p{display:flex;align-items:center;gap:9px;margin:0 0 7px;font:9px var(--mono,monospace);letter-spacing:.07em;color:#b6cddd}
#hero .mh-live-dot{width:5px;height:5px;background:#91bddd;border-radius:50%;box-shadow:0 0 9px #8ebde8}
#hero[data-data-state=offline] .mh-live-dot{background:#d7b57d;box-shadow:none}
#hero .mh-source button{display:block;border:0;background:transparent;color:#d8e7f3;padding:0;font:12px var(--mono,monospace);text-align:left;min-height:25px}
#hero .mh-source>span{display:block;color:#6f8da5;font:9px/1.6 var(--mono,monospace);margin-top:3px}
#hero .mh-guide{display:flex;align-items:center;gap:14px;margin-bottom:3px}#hero .mh-guide-mark{font-size:33px;color:#9dbbd1;line-height:1}#hero .mh-guide p{margin:0;font-size:11px;line-height:1.8;color:#b4cada}#hero .mh-guide p span{color:#6e8da5;font-size:10px}
#hero .mh-legend{display:grid;grid-template-columns:auto auto;gap:9px 16px;font:9px var(--mono,monospace);color:#9fb9cc;margin-bottom:3px}#hero .mh-legend i{display:inline-block;width:15px;height:2px;background:#87b8db;margin-right:6px;vertical-align:middle}#hero .mh-legend i.mh-red{background:#ed706c}#hero .mh-legend small{grid-column:1/-1;font:9px/1.5 var(--font,sans-serif);color:#69859c}
#hero .mh-inspect{position:absolute;z-index:8;right:4%;top:47%;width:294px;padding:17px 19px;background:linear-gradient(145deg,#13283cf7,#091522f7);border:1px solid #6584a366;border-top:2px solid var(--mh-blue);box-shadow:0 15px 50px #0008;border-radius:3px;backdrop-filter:blur(15px)}
#hero .mh-inspect[data-risk=true]{border-top-color:var(--mh-red)}#hero .mh-inspect-cap{display:flex;justify-content:space-between;align-items:center;margin-bottom:9px;color:#87aac3;font:9px var(--mono,monospace);letter-spacing:.09em}
#hero .mh-inspect-cap button{border:0;color:#9cb8ce;background:transparent;font-size:22px;line-height:1;width:28px;height:28px;margin:-9px -9px -7px 0}
#hero .mh-inspect>strong{display:block;font:400 20px var(--display,sans-serif);letter-spacing:-.035em;color:#e6f1f8}
#hero #moat-detail-spender{margin:5px 0 14px;color:#8dabc1;font:9px/1.7 var(--mono,monospace);overflow-wrap:anywhere}
#hero .mh-inspect dl{margin:0;display:grid;gap:7px;padding-block:11px;border-top:1px solid #809eb42e;border-bottom:1px solid #809eb42e}#hero .mh-inspect dl>div{display:flex;justify-content:space-between;gap:12px}#hero .mh-inspect dt{font-size:10px;color:#8faabd}#hero .mh-inspect dd{margin:0;font:10px var(--mono,monospace);color:#d9e8f2;text-align:right;overflow-wrap:anywhere;max-width:160px}
#hero .mh-detail-reason{font-size:10px;line-height:1.65;color:#9bb6cb;margin:12px 0}#hero .mh-preview-note{font-size:10px;line-height:1.65;color:#fac0b7;padding:9px 10px;background:#f17b6e0c;border-left:1px solid #e88779;margin:12px 0}
#hero .mh-detail-actions{display:flex;gap:8px}#hero .mh-detail-actions button{font-size:10px;line-height:1.5;color:#d4e5f0;background:#a1c6df10;border:1px solid #8cb2cb40;padding:9px 10px;min-height:36px;border-radius:2px}#hero .mh-detail-actions button:hover{background:#a1c6df25}
#hero .mh-sr,#hero .mh-bridge-access button{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
#hero .mh-bridge-access button:focus-visible{z-index:10;left:50%;bottom:112px;transform:translateX(-50%);width:auto;height:auto;max-width:90%;padding:12px 18px;clip-path:none;white-space:normal;background:#11283f;color:#e9f5ff;border:1px solid #93bbd6;font:12px var(--mono,monospace)}
#hero :focus-visible{outline:2px solid #c8e6fc;outline-offset:4px}#hero .mh-nojs{position:absolute;bottom:130px;width:100%;text-align:center;font-size:12px}
@media(min-width:1800px){#hero .mh-heading{top:48px}#hero .mh-label-wallet{top:48%}}
@media(max-width:1050px){#hero .mh-coordinate{display:none}#hero .mh-guide{display:none}#hero .mh-label-wallet{left:73%;font-size:8px}#hero .mh-label-wallet:before{width:30px}#hero .mh-label-shore{left:4%;font-size:8px}#hero .mh-map-label small{font-size:9px}#hero .mh-inspect{right:3%;width:260px}#hero .mh-heading{top:45px}}
@media(max-width:700px){#hero.moat-hero{height:920px;min-height:920px}#hero .mh-heading{top:57px;left:20px;width:calc(100% - 40px)}#hero h1{font-size:38px;line-height:1.08;letter-spacing:-.05em;margin-bottom:15px}#hero .mh-kicker{font-size:8px;letter-spacing:.12em;margin-bottom:17px}#hero .mh-intro{font-size:12px;margin-bottom:16px;line-height:1.6}#hero .mh-phone-break{display:block}#hero .mh-actions{gap:11px;flex-direction:column}#hero .mh-primary{padding:12px 18px;font-size:11px;gap:33px}#hero .mh-actions>span{font-size:9px}#hero .mh-controls{top:13px;right:17px}#hero .mh-controls button{font-size:9px;padding:7px 10px;min-height:31px}#hero .mh-bottom{bottom:21px;left:21px;right:21px;display:block}#hero .mh-source{max-width:none}#hero .mh-source p{font-size:8px}#hero .mh-source button{font-size:11px}#hero .mh-source>span{font-size:8px;line-height:1.7}#hero .mh-legend{margin-top:15px;padding-top:13px;border-top:1px solid #698ca333;display:flex;flex-wrap:wrap;gap:10px 18px;font-size:8px}#hero .mh-legend small{width:100%;font-size:8px}#hero .mh-label-wallet{top:39%;left:62%;font-size:8px}#hero .mh-label-wallet small{display:none}#hero .mh-label-wallet:before{width:23px}#hero .mh-label-shore{top:73%;left:21px;font-size:8px}#hero .mh-label-shore small{display:none}#hero .mh-inspect{position:absolute;top:auto;bottom:154px;left:21px;right:21px;width:auto;padding:14px 16px}#hero .mh-inspect dl{grid-template-columns:1fr 1fr;gap:15px}#hero .mh-inspect dl>div{display:block}#hero .mh-inspect dd{text-align:left;margin-top:4px;max-width:none}#hero .mh-detail-reason{margin:8px 0}#hero .mh-inspect>strong{font-size:18px}#hero #moat-detail-spender{margin-bottom:8px}#hero .mh-vignette{background:linear-gradient(180deg,#050d1910,transparent 35%,transparent 69%,#050d19 84%)}#hero .mh-bridge-access button:focus-visible{bottom:160px}}
@media(prefers-reduced-motion:reduce){#hero *,#hero *:before,#hero *:after{animation:none!important;transition:none!important}#hero .mh-controls button{opacity:.7}}

#hero .mh-still{transform:translateY(-8.5%)}
@media(max-width:700px){#hero .mh-still{transform:none}}

#hero .mh-stage{background-size:100% 100%}
#hero .mh-plates{position:absolute;inset:0;opacity:0;pointer-events:none;overflow:hidden}
#hero[data-ready=true] .mh-plates{opacity:1}
#hero .mh-plates img{position:absolute;max-width:none;will-change:transform}
#hero #moat-canvas{z-index:1}
#hero .mh-still{z-index:2}
#hero .mh-vignette{z-index:3}
/* Keep the live canvas from invalidating the static headline and atmosphere. */
#hero .mh-stage{z-index:0;contain:strict}
#hero #moat-canvas{transform:translateZ(0);will-change:transform;contain:strict}
#hero .mh-heading,#hero .mh-bottom,#hero .mh-vignette{transform:translateZ(0)}

#hero #moat-canvas{display:none}
#hero .mh-plates{overflow:visible}
#hero .mh-plates img[data-layer=environment]{z-index:0}
#hero .mh-plates img[data-layer=fortress]{z-index:3}
#hero .mh-live-scene{position:absolute;inset:0;width:100%;height:100%;z-index:2;overflow:visible;pointer-events:none;contain:layout style}
#hero .mh-bridge-label{font:10px 'Plex Mono',monospace}
#hero .mh-beam-title{font:9px 'Plex Mono',monospace}
#hero .mh-beam-sub{font:8px 'Plex Mono',monospace;fill:#9ab4c9}
#hero .mh-light-beam{position:absolute;left:0;top:0;width:600px;height:180px;transform-origin:0 50%;clip-path:polygon(0 50%,100% 0,100% 100%);background:linear-gradient(90deg,#d5f0ff95,#b0d8ff46 35%,#79b4e200);mix-blend-mode:screen;z-index:4;pointer-events:none;will-change:transform}
#hero .mh-lamp-glow{position:absolute;left:0;top:0;width:48px;height:48px;background:radial-gradient(ellipse,#e5f8ffb0 0,#9edbff44 22%,transparent 70%);mix-blend-mode:screen;z-index:5;pointer-events:none;will-change:transform}
#hero .mh-live-fog{position:absolute;left:0;top:0;width:55%;height:90px;background:radial-gradient(ellipse,#a7c4da0a,transparent 68%);z-index:5;pointer-events:none;will-change:transform}
#hero .mh-vignette{z-index:6}
@media(max-width:700px){#hero .mh-bridge-label{font-size:8px}}

@media(max-width:700px){#hero .mh-label-shore{display:none}}
@keyframes mh-beacon-light{0%,100%{opacity:.76}50%{opacity:1}}
#hero .mh-lamp-glow{animation:mh-beacon-light 4.3s ease-in-out infinite}
#hero:not([data-motion=running]) .mh-lamp-glow{animation-play-state:paused}

/* Small moving surfaces leave the full bridge drawing cached between interactions. */
#hero .mh-red-pulse,#hero .mh-current-layer{will-change:transform,opacity}
#hero .mh-red-pulse{animation:mh-red-rails 2.5s ease-in-out infinite}
@keyframes mh-red-rails{0%,100%{opacity:.6}50%{opacity:1}}
#hero:not([data-motion=running]) .mh-red-pulse{animation-play-state:paused}
#hero .mh-boat{position:absolute;left:0;top:0;width:68px;height:40px;z-index:2;overflow:visible;will-change:transform;pointer-events:none}
#hero .mh-approval-signal{position:absolute;left:0;top:0;width:4px;height:4px;border-radius:50%;z-index:2;opacity:.85;will-change:transform;pointer-events:none}
#hero .mh-water-pool{position:absolute;left:0;top:0;width:156px;height:58px;background:radial-gradient(ellipse,#a7dbff40,transparent 70%);z-index:1;will-change:transform;pointer-events:none}
#hero .mh-beam-readout{position:absolute;z-index:7;transform:translate(-50%,-13px);padding:6px 8px;background:#071320f0;border-radius:2px;text-align:center;white-space:nowrap;pointer-events:none}
#hero .mh-beam-readout span{display:block;font:9px 'Plex Mono',monospace}
#hero .mh-beam-readout small{display:block;margin-top:5px;color:#9ab4c9;font:8px 'Plex Mono',monospace}
