@charset "utf-8";

/* Project: Moongate Studio
   File: /public/css/mg-armillary.css
   Notes: Shared ITER 064 armillary effect presentation.
*/

/* <editor-fold defaultstate="collapsed" desc="Hero Canvas"> */

body.mg-armillary-mockup {
    margin:0;
    background:#000;
}
body.mg-armillary-mockup .mg-hero {
    min-height:100vh;
    overflow:hidden;
    background:#02070a url('../images/hero-bg-001.png') center center/cover no-repeat;
    position:relative;
}
body.mg-armillary-mockup .mg-hero::before {
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,18,22,.48);
    z-index:0;
    pointer-events:none;
}
body.mg-armillary-mockup .mg-hero>* {
    position:relative;
    z-index:1;
}
body.mg-armillary-mockup .mg-hero-layout {
    padding-top:96px;
}
.mg-hero-visual {
    position:relative;
    width:min(100%,620px);
    aspect-ratio:1.08/1;
    justify-self:end;
    overflow:visible;
}
#armillary-canvas {
    position:absolute;
    inset:-8% -8% -8% -8%;
    width:116%;
    height:116%;
    display:block;
    z-index:2;
    pointer-events:none;
}
#deep-field {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    pointer-events:none;
    opacity:.38;
    mix-blend-mode:screen;
}

/* </editor-fold> */

/* <editor-fold defaultstate="collapsed" desc="Route HUD"> */

#route-hud-layer {
    position:absolute;
    inset:-8%;
    z-index:4;
    pointer-events:none;
    overflow:visible
}
.route-hud {
    --hud-w:158px;
    position:absolute;
    width:var(--hud-w);
    color:#a8e8ec;
    font:600 9px/1.25 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    letter-spacing:.08em;
    text-shadow:0 0 8px rgba(0,224,235,.28);
    opacity:0
}
.route-hud::before {
    content:"";
    position:absolute;
    background:rgba(73,224,233,.62);
    box-shadow:0 0 7px rgba(0,224,235,.18);
    transition:transform .16s linear
}
.route-hud[data-side="right"] {
    transform:translate(40px,-15px)
}
.route-hud[data-side="right"]::before {
    left:-36px;
    top:14px;
    width:32px;
    height:1px;
    transform-origin:0 50%;
    transform:scaleX(var(--leader,0))
}
.route-hud[data-side="left"] {
    transform:translate(calc(-100% - 40px),-15px);
    text-align:right
}
.route-hud[data-side="left"]::before {
    right:-36px;
    top:14px;
    width:32px;
    height:1px;
    transform-origin:100% 50%;
    transform:scaleX(var(--leader,0))
}
.route-hud[data-side="down"] {
    transform:translate(-50%,38px);
    text-align:center
}
.route-hud[data-side="down"]::before {
    left:50%;
    top:-34px;
    width:1px;
    height:30px;
    transform-origin:50% 100%;
    transform:scaleY(var(--leader,0))
}
.route-hud[data-side="up"] {
    transform:translate(-50%,calc(-100% - 38px));
    text-align:center
}
.route-hud[data-side="up"]::before {
    left:50%;
    bottom:-34px;
    width:1px;
    height:30px;
    transform-origin:50% 0;
    transform:scaleY(var(--leader,0))
}
.route-hud-head {
    display:flex;
    justify-content:space-between;
    gap:8px;
    padding-bottom:4px;
    border-bottom:1px solid rgba(73,224,233,.34);
    color:#d1fbfd;
    font-weight:800;
    font-size:9px
}
.route-hud[data-side="left"] .route-hud-head {
    flex-direction:row-reverse
}
.route-hud[data-side="up"] .route-hud-head,.route-hud[data-side="down"] .route-hud-head {
    justify-content:center
}
.route-hud-row {
    display:grid;
    grid-template-columns:auto 1fr;
    gap:10px;
    padding-top:3px;
    opacity:0;
    transform:translateY(2px);
    transition:opacity .08s linear,transform .08s linear
}
.route-hud[data-side="left"] .route-hud-row {
    grid-template-columns:1fr auto
}
.route-hud[data-side="left"] .route-hud-row .k {
    order:2
}
.route-hud .k {
    color:rgba(143,199,204,.62)
}
.route-hud .v {
    color:rgba(184,240,243,.88)
}
.route-hud-row.on {
    opacity:1;
    transform:none
}
.route-hud.acquire {
    opacity:1
}
.route-hud.flash .route-hud-head {
    color:#fff;
    text-shadow:0 0 10px rgba(87,244,255,.8)
}

/* </editor-fold> */

/* <editor-fold defaultstate="collapsed" desc="Orbital Map"> */

.mg-orbital-map {
    position:absolute;
    left:50%;
    bottom:-5%;
    width:124%;
    height:47%;
    transform:translateX(-50%);
    z-index:1;
    pointer-events:none;
    overflow:visible;
    opacity:.84;
    filter:drop-shadow(0 0 9px rgba(0,220,230,.10))
}
.mg-orbital-map .major {
    fill:none;
    stroke:rgba(83,224,232,.36);
    stroke-width:1
}
.mg-orbital-map .minor {
    fill:none;
    stroke:rgba(83,224,232,.16);
    stroke-width:.7
}
.mg-orbital-map .axis {
    stroke:rgba(83,224,232,.17);
    stroke-width:.65
}
.mg-orbital-map .tick {
    stroke:rgba(121,237,243,.31);
    stroke-width:.8
}
.mg-orbital-map .node {
    fill:#59e8ef;
    opacity:.50
}
.mg-orbital-map .ghost {
    fill:none;
    stroke:rgba(83,224,232,.09);
    stroke-width:.65;
    stroke-dasharray:3 6
}
.mg-orbital-map .label {
    fill:rgba(126,220,226,.40);
    font:600 5px/1 system-ui,sans-serif;
    letter-spacing:.16em
}
.canvas-light .mg-orbital-map {
    opacity:.66;
    filter:none
}
.canvas-light .mg-orbital-map .major {
    stroke:rgba(0,78,86,.38)
}
.canvas-light .mg-orbital-map .minor,.canvas-light .mg-orbital-map .axis,.canvas-light .mg-orbital-map .ghost {
    stroke:rgba(0,78,86,.22)
}
.canvas-light .mg-orbital-map .tick {
    stroke:rgba(0,78,86,.34)
}
.canvas-light .mg-orbital-map .node {
    fill:#006a73
}
.canvas-light .mg-orbital-map .label {
    fill:rgba(0,74,82,.48)
}

/* </editor-fold> */

/* <editor-fold defaultstate="collapsed" desc="Tuning Controls"> */

.mg-canvas-tools {
    position:absolute;
    right:6px;
    top:6px;
    z-index:6;
    display:flex;
    align-items:center;
    gap:7px
}
.mg-iter {
    padding:7px 9px;
    border:1px solid rgba(0,245,255,.16);
    border-radius:999px;
    background:rgba(2,12,15,.72);
    color:#6f9da2;
    font:700 10px/1 system-ui,sans-serif;
    letter-spacing:.08em
}
.mg-tune-btn {
    border:1px solid rgba(0,245,255,.22);
    border-radius:999px;
    background:rgba(2,12,15,.78);
    color:#a9cfd2;
    padding:7px 10px;
    font:700 10px/1 system-ui,sans-serif;
    letter-spacing:.08em;
    cursor:pointer
}
.mg-tune-panel {
    position:absolute;
    right:6px;
    top:43px;
    z-index:7;
    width:230px;
    padding:12px;
    border:1px solid rgba(0,245,255,.20);
    border-radius:12px;
    background:rgba(2,12,15,.92);
    backdrop-filter:blur(12px);
    font:600 11px/1.2 system-ui,sans-serif;
    color:#a9cfd2;
    display:none
}
.mg-tune-panel.open {
    display:block
}
.mg-tune-grid {
    display:grid;
    grid-template-columns:1fr 66px;
    gap:7px 9px;
    align-items:center
}
.mg-tune-grid input {
    width:58px;
    background:#071317;
    color:#c9f3f5;
    border:1px solid rgba(0,245,255,.18);
    border-radius:6px;
    padding:5px
}
.mg-tune-panel button {
    margin-top:10px;
    width:100%;
    padding:7px;
    border:1px solid rgba(0,245,255,.22);
    border-radius:7px;
    background:#0b2025;
    color:#bdeef1;
    font-weight:700;
    cursor:pointer
}
.mg-burst-debug {
    margin-top:10px;
    padding:8px;
    border:1px solid rgba(0,245,255,.13);
    border-radius:7px;
    background:rgba(0,0,0,.22);
    color:#6f9da2;
    font:600 9px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    letter-spacing:.04em;
    min-height:28px
}
.mg-burst-debug strong {
    color:#9ed9dd;
    font-weight:700
}
.mg-canvas-toggle {
    display:flex;
    align-items:center;
    gap:7px;
    padding:7px 9px;
    border:1px solid rgba(0,245,255,.22);
    border-radius:999px;
    background:rgba(2,12,15,.78);
    backdrop-filter:blur(10px);
    color:#a9cfd2;
    font:600 11px/1 system-ui,sans-serif;
    letter-spacing:.04em;
    cursor:pointer;
    user-select:none
}
.mg-canvas-toggle input {
    appearance:none;
    width:28px;
    height:16px;
    margin:0;
    border-radius:999px;
    background:#24383d;
    position:relative;
    cursor:pointer
}
.mg-canvas-toggle input::after {
    content:"";
    position:absolute;
    width:12px;
    height:12px;
    left:2px;
    top:2px;
    border-radius:50%;
    background:#d8eeee;
    transition:transform .18s ease
}
.mg-canvas-toggle input:checked {
    background:#49dce5
}
.mg-canvas-toggle input:checked::after {
    transform:translateX(12px)
}

/* </editor-fold> */

/* <editor-fold defaultstate="collapsed" desc="Canvas States"> */

.mg-hero-visual::before {
    content:"";
    position:absolute;
    inset:15% 10%;
    background:radial-gradient(circle,rgba(0,220,230,.12),rgba(0,95,110,.05) 35%,transparent 72%);
    filter:blur(28px);
    z-index:1;
    pointer-events:none;
}
.mg-hero-visual.canvas-light::before {
    inset:-2%;
    background:rgba(145,154,157,.96);
    filter:none;
    border-radius:10px;
}
.mg-hero-visual::after {
    content:"";
    position:absolute;
    left:12%;
    right:8%;
    bottom:8%;
    height:22%;
    background:radial-gradient(ellipse at center,rgba(0,220,230,.12),transparent 70%);
    filter:blur(18px);
    z-index:1;
    pointer-events:none;
}

/* </editor-fold> */

/* <editor-fold defaultstate="collapsed" desc="Responsive Overrides"> */

@media(max-width:1100px) {
    body.mg-armillary-mockup .mg-hero-visual {
        justify-self:center;
        width:min(100%,680px);
        aspect-ratio:1.12/1;
    }
    body.mg-armillary-mockup .mg-hero-layout {
        gap:12px;
    }
    body.mg-armillary-mockup .mg-hero-bottom {
        margin-top:4px;
    }
}
@media(max-width:768px) {
    body.mg-armillary-mockup .mg-hero-layout {
        gap:6px;
        padding-top:86px
    }
    body.mg-armillary-mockup .mg-hero-copy h1 {
        margin-bottom:14px
    }
    body.mg-armillary-mockup .mg-hero-divider {
        margin:12px 0 12px
    }
    body.mg-armillary-mockup .mg-subheader {
        margin-bottom:0
    }
    body.mg-armillary-mockup .mg-hero-visual {
        width:100%;
        aspect-ratio:1.08/1;
        margin-top:-4px;
        margin-bottom:-14px
    }
    #armillary-canvas {
        inset:-4% -4%;
        width:108%;
        height:108%
    }
    body.mg-armillary-mockup .mg-featured {
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px
    }
    body.mg-armillary-mockup .mg-featured-card {
        padding:16px 14px 18px
    }
    body.mg-armillary-mockup .mg-featured-card p {
        font-size:13px
    }
    body.mg-armillary-mockup .mg-hero-actions {
        margin-left:auto
    }
    body.mg-armillary-mockup .mg-hero-bottom {
        margin-top:0
    }
}

/* </editor-fold> */