/* ==========================================================
   LOAX HOME SCREEN - BASE LAYOUT
   Extracted from index.html so the page stays clean and cacheable.
   ========================================================== */


/* ---- Extracted index style block 1 ---- */
:root{
    --purple:#b16cff;
    --gold:#ffd35d;
    --blue:#53a8ff;
    --green:#8fff75;
    --bg:#03030a;
}
*,
*::before,
*::after {
    cursor: url("../../images/dinosaur.ico") 8 8, auto;
}

a,
button,
.enter,
.portal,
.portal * {
    cursor: pointer !important;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden}
body{
    font-family:"Segoe UI",Arial,sans-serif;
    color:#fff;
    background:
        radial-gradient(circle at 22% 34%,rgba(92,30,180,.25),transparent 34%),
        radial-gradient(circle at 78% 64%,rgba(0,130,120,.13),transparent 34%),
        radial-gradient(circle at 50% 50%,rgba(120,55,255,.10),transparent 46%),
        var(--bg);
}
a{color:inherit;text-decoration:none}

/* One canvas replaces hundreds of animated DOM stars/rocks. Much faster. */
#spaceCanvas{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    z-index:1;
    pointer-events:none;
}
.space-glow{
    position:fixed;
    inset:-12%;
    z-index:0;
    pointer-events:none;
    background:
        radial-gradient(circle at 18% 30%,rgba(125,55,255,.22),transparent 31%),
        radial-gradient(circle at 82% 68%,rgba(0,170,130,.11),transparent 34%),
        radial-gradient(circle at 50% 84%,rgba(80,30,180,.13),transparent 38%);
}
.spotlight{
    position:fixed;
    left:50%;top:50%;
    width:520px;height:520px;
    transform:translate(-50%,-50%);
    border-radius:50%;
    z-index:2;
    pointer-events:none;
    opacity:0;
    transition:opacity .25s ease,left .25s ease,top .25s ease,background .25s ease;
    background:radial-gradient(circle,var(--purple-glow,rgba(177,108,255,.20)),transparent 62%);
}
.central-platform {
    position: absolute;
    left: 50%;
    bottom: -8%;
    transform: translateX(-50%);
    width: 1400px;
    z-index: 1;
}
.topline{
    position:fixed;
    top:26px;left:34px;right:34px;
    z-index:30;
    display:flex;
    justify-content:space-between;
    font-size:11px;
    letter-spacing:3px;
    color:rgba(255,255,255,.42);
    text-transform:uppercase;
}
.corner-frame{
    position:fixed;
    inset:22px;
    z-index:35;
    pointer-events:none;
    border:1px solid rgba(145,80,255,.12);
}

.scene{
    position:relative;
    width:100vw;height:100vh;
    z-index:5;
}
.connection-svg{
    position:absolute;
    inset:0;
    width:100%;height:100%;
    z-index:4;
    pointer-events:none;
    overflow:visible;
}
.connection-svg .route{
    fill:none;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.connection-svg .route-glow{
    stroke:rgba(177,108,255,.28);
    stroke-width:7;
    filter:drop-shadow(0 0 10px rgba(177,108,255,.65));
    opacity:.55;
}
.connection-svg .route-core{
    stroke:rgba(198,130,255,.86);
    stroke-width:2;
    stroke-dasharray:3 18;
    stroke-dashoffset:0;
    filter:
        drop-shadow(0 0 5px rgba(210,160,255,.9))
        drop-shadow(0 0 14px rgba(177,108,255,.55));
    animation:routeEnergyFlow 2.6s linear infinite;
}
.route-spark{
    fill:#e5c1ff;
    filter:
        drop-shadow(0 0 7px rgba(255,255,255,.95))
        drop-shadow(0 0 18px rgba(177,108,255,.9));
    opacity:.9;
}
.route-spark--academy{fill:#ffd35d;}
.route-spark--keycore{fill:#53a8ff;}
.route-spark--island{fill:#8fff75;}
@keyframes routeEnergyFlow{to{stroke-dashoffset:-84}}

/* Huge bottom hub, spanning the page width. */
.hub-base{
    position:absolute;
    left:50%;
    top:85%;
    width:100vw;
    max-width:none;
    transform:translate(-50%,-50%);
	opacity: .6;
    z-index:7;
    pointer-events:none;
    animation:slowFloat 12s ease-in-out infinite;
}
.hub-base img{
    width:100%;
    display:block;
    filter:drop-shadow(0 0 28px rgba(160,80,255,.58));
}

/* Optional centre overlay. Add images/hub-center.png when ready. */
.hub-center{
    position:absolute;
    left:50%;
    top:51%;
    width:min(36vw,620px);
    transform:translate(-50%,-50%);
    z-index:9;
    pointer-events:none;
    animation:slowFloat 11s ease-in-out infinite reverse;
}
.hub-center img{
    width:100%;
    display:block;
    filter:drop-shadow(0 0 26px rgba(180,85,255,.62));
}
.hub-center img[src=""]{display:none}

.logo{
    position:absolute;
    left:45%;
    top:17%;
    transform:translate(-50%,-50%);
    z-index:13;
}

.logo-wrap{
    position:relative;
    width:min(650px,38vw);
    aspect-ratio:1;
}
.logo img{
    width:100%;
    display:block;
    filter:drop-shadow(0 0 24px rgba(180,80,255,.82));
}
@keyframes logoPulse{
    0%,100%{transform:translate(-50%,-50%) scale(1)}
    50%{transform:translate(-50%,-50%) scale(1.025)}
}
@keyframes slowFloat{
    0%,100%{translate:0 0}
    50%{translate:0 -5px}
}

.portal{
    position:absolute;
    z-index:11;
    width:min(34vw,500px);
    cursor:pointer;
    pointer-events:auto;
    transition:transform .22s ease,filter .22s ease;
    will-change:transform;
}
.portal img{width:100%;display:block;transform:translateZ(0)}
.portal:hover{transform:scale(1.018)}
.portal > *{pointer-events:none}
@keyframes islandFloat{
    0%,100%{translate:0 0}
    50%{translate:0 -5px}
}
.portal--academy{left:13.5%;top:4%;animation-delay:0s}
.portal--it{right:16%;top:4%;animation-delay:-2s}
.portal--keycore{left:12.8%;bottom:10%;animation-delay:-4s}
.portal--island{right:16%;bottom:9%;animation-delay:-6s}

.portal--it img{filter:drop-shadow(0 0 22px rgba(177,108,255,.80))}
.portal--keycore img{filter:drop-shadow(0 0 22px rgba(83,168,255,.78))}

.module-label{
    position:absolute;
    z-index:18;
    width:305px;
    display:grid;
    grid-template-columns:54px 1fr;
    column-gap:18px;
    align-items:start;
    color:var(--accent);
    text-shadow:0 0 12px var(--accent-soft);
}
.module-label h2{
    font-size:19px;
    letter-spacing:7px;
    text-transform:uppercase;
    margin:6px 0 18px;
    line-height:1.05;
}
.module-label p{
    grid-column:2;
    font-size:12px;
    line-height:1.7;
    color:rgba(230,226,240,.78);
    text-shadow:none;
}
.module-label > a{
    grid-column:2;
    justify-self:start;
    margin-top:17px;
    display:inline-block;
}
.module-label .enter{
    display:inline-block;
    margin-top:0;
    padding:9px 22px;
    border:1px solid var(--accent);
    color:var(--accent);
    font-size:11px;
    letter-spacing:2px;
    background:rgba(0,0,0,.20);
    box-shadow:0 0 16px var(--accent-faint),inset 0 0 12px var(--accent-faint);
    transition:
        color .22s ease,
        background-color .22s ease,
        border-color .22s ease,
        box-shadow .22s ease,
        transform .22s ease;
}
.module-label .enter:hover{
    color:#070712;
    background:var(--accent);
    border-color:var(--accent);
    box-shadow:
        0 0 18px var(--accent-soft),
        0 0 42px var(--accent-faint),
        inset 0 0 14px rgba(255,255,255,.24);
    transform:translateY(-1px);
}
.module-icon{
    position:relative;
    width:48px;height:48px;
    grid-row:1 / span 3;
    filter:drop-shadow(0 0 7px var(--accent));
}
.module-icon svg{width:100%;height:100%;display:block}
.module-icon polygon,.module-icon path,.module-icon rect,.module-icon circle,.module-icon line{
    fill:none;
    stroke:var(--accent);
    stroke-width:4;
    stroke-linecap:round;
    stroke-linejoin:round;
}
.module-icon .inner{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    justify-content:center;
}
.module-icon .inner svg{width:26px;height:26px}

.module-label--academy{
    --accent:var(--gold);--accent-soft:rgba(255,211,93,.55);--accent-faint:rgba(255,211,93,.22);
    left:3%;top:23%;
}
.module-label--it{
    --accent:var(--purple);--accent-soft:rgba(177,108,255,.55);--accent-faint:rgba(177,108,255,.22);
    right:3%;top:23%;
}
.module-label--keycore{
    --accent:var(--blue);--accent-soft:rgba(83,168,255,.55);--accent-faint:rgba(83,168,255,.22);
    left:3%;bottom:29%;
}
.module-label--island{
    --accent:var(--green);--accent-soft:rgba(143,255,117,.55);--accent-faint:rgba(143,255,117,.22);
    right:3%;bottom:29%;
}

.intro{
    position:absolute;
    left:50%;
    bottom:5.8%;
    transform:translateX(-50%);
    z-index:10;
    width:min(560px,42vw);
    padding:24px 34px;
    text-align:center;
    background:linear-gradient(135deg,rgba(16,10,34,.58),rgba(5,4,15,.36));
    border:1px solid rgba(176,103,255,.32);
    box-shadow:0 0 26px rgba(120,55,255,.18);
}
.intro h1{font-size:17px;letter-spacing:5px;color:#c996ff;margin-bottom:14px}
.intro p{font-size:12px;line-height:1.7;color:rgba(235,230,245,.78)}

.vignette{
    position:fixed;
    inset:0;
    z-index:40;
    pointer-events:none;
    box-shadow:inset 0 0 120px rgba(0,0,0,.88),inset 0 0 240px rgba(0,0,0,.58);
}
.scanline{
    position:fixed;
    inset:0;
    z-index:41;
    pointer-events:none;
    background:linear-gradient(to bottom,transparent,rgba(255,255,255,.02),transparent);
    background-size:100% 5px;
    opacity:.28;
}

@media(max-width:1200px){
    .portal{width:min(36vw,540px)}
    .portal--academy{left:12%;top:7%}.portal--it{right:7%;top:7%}.portal--keycore{left:10%;bottom:13%}.portal--island{right:8%;bottom:12%}
    .module-label--academy{left:2%;top:28%}.module-label--it{right:2%;top:28%}.module-label--keycore{left:2%;bottom:25%}.module-label--island{right:2%;bottom:25%}
    .module-label{width:270px}
    .logo{width:min(27vw,380px)}
}
@media(max-width:1000px){
    html,body{height:auto;overflow-y:auto}
    body{min-height:100vh}
    .topline,.corner-frame,.connection-svg,.hub-base,.hub-center,.logo{display:none}
    .scene{height:auto;min-height:100vh;display:grid;gap:14px;padding:70px 22px 55px}
    .portal,.module-label,.intro{position:relative;inset:auto;left:auto;right:auto;top:auto;bottom:auto;transform:none;width:100%;max-width:520px;margin:0 auto}
    .module-label{margin-top:-36px;margin-bottom:22px}
    .intro{width:100%;order:99}
}
@media(prefers-reduced-motion:reduce){
    *,*::before,*::after{animation:none!important;transition:none!important}
}
.logo {
    position: absolute;
}

#logoSubline {
    position: absolute;
    left: 50%;
    top: 61%;
    transform: translateX(-50%);
    font-size: clamp(16px, 2vw, 34px);
    letter-spacing: .22em;
    font-weight: 700;
    color: #b16cff;
    text-shadow:
        0 0 10px currentColor,
        0 0 26px currentColor;
    transition: color .25s ease, opacity .2s ease, letter-spacing .25s ease;
    white-space: nowrap;
}
.logo {
    position: relative;
}

.logo-colour {
    position: absolute;
    inset: 0;
    mix-blend-mode: screen;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease;
}.hub-beam{
    position:absolute;
    left:50%;
    top:51%;
    transform:translateX(-50%);
    width:220px;
    z-index:10;
    pointer-events:none;
}

.hub-beam img{
    display:block;
    width:100%;
    filter:
        drop-shadow(0 0 25px rgba(177,108,255,.8))
        drop-shadow(0 0 60px rgba(177,108,255,.5));
}
.label-it,
.label-island {
    right: 1.5%;
    width: 260px;
}

.label-it {
    top: 25%;
}

.label-island {
    bottom: 28%;
}
.logo-energy-beam {
    position: absolute;
    left: 50%;
    top: 44%;
    width: 28px;
    height: 70px;
    transform: translateX(-50%);
    z-index: 12;
    pointer-events: none;

    background:
        radial-gradient(circle at 50% 0%, rgba(255,255,255,.9), transparent 18%),
        linear-gradient(
            to top,
            rgba(177,108,255,0),
            rgba(177,108,255,.25) 20%,
            rgba(230,190,255,.75) 55%,
            rgba(177,108,255,.35) 80%,
            rgba(177,108,255,0)
        );

    filter:
        blur(6px)
        drop-shadow(0 0 18px rgba(177,108,255,.9))
        drop-shadow(0 0 42px rgba(177,108,255,.55));

    opacity: .85;
    animation: logoBeamPulse 2.8s ease-in-out infinite;
}

.logo-energy-beam::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: 2px;
    height: 100%;
    transform: translateX(-50%);
    background: linear-gradient(
        to top,
        transparent,
        rgba(255,255,255,.7),
        rgba(210,160,255,.95),
        transparent
    );
    box-shadow:
        0 0 10px rgba(255,255,255,.85),
        0 0 24px rgba(177,108,255,.9);
}

@keyframes logoBeamPulse {
    0%, 100% {
        opacity: .55;
        transform: translateX(-50%) scaleY(.94);
    }
    50% {
        opacity: 1;
        transform: translateX(-50%) scaleY(1.05);
    }
}


/* ==========================================================
   FINAL RESPONSIVE POSITIONING / SCALE TUNING
   ========================================================== */
.scene{
    min-width: 320px;
}

.portal{
    width: clamp(416px, 29vw, 470px);
}

.logo-wrap{
    width: clamp(220px, 18vw, 390px);
}

.module-label{
    width: clamp(230px, 17vw, 305px);
}

.module-label h2{
    font-size: clamp(16px, 1.15vw, 19px);
    letter-spacing: clamp(4px, .42vw, 7px);
}

.module-label p{
    font-size: clamp(11px, .72vw, 12px);
}

.module-label .enter{
    padding: clamp(8px, .6vw, 9px) clamp(18px, 1.25vw, 22px);
}

.module-label--it,
.module-label--island{
    right: 2.2%;
    width: clamp(230px, 16vw, 280px);
}

.module-label--it{ top: 24%; }
.module-label--island{ bottom: 27%; }

@media (max-width: 1500px) and (orientation: landscape){
    .portal{ width: clamp(416px, 27vw, 410px); }
    .portal--academy{ left: 15%; top: 5.5%; }
    .portal--it{ right: 13%; top: 6.5%; }
    .portal--keycore{ left: 14%; bottom: 10.5%; }
    .portal--island{ right: 12%; bottom: 11%; }

    .logo-wrap{ width: clamp(210px, 17vw, 315px); }
    .logo{ top: 29%; }

    .module-label{ width: 260px; }
    .module-label--academy{ left: 3%; top: 25%; }
    .module-label--it{ right: 3%; top: 25%; }
    .module-label--keycore{ left: 3%; bottom: 28%; }
    .module-label--island{ right: 3%; bottom: 28%; }

    .intro{
        width: min(520px, 44vw);
        padding: 22px 30px 24px;
        bottom: 5.2%;
    }

    .intro h1{ font-size: 16px; letter-spacing: 7px; }
    .intro p{ font-size: 12px; line-height: 1.65; }
}

@media (max-width: 1180px) and (orientation: landscape){
    .portal{ width: clamp(416px, 25vw, 330px); }
    .portal--academy{ left: 17%; top: 7%; }
    .portal--it{ right: 13%; top: 7%; }
    .portal--keycore{ left: 15%; bottom: 14%; }
    .portal--island{ right: 11%; bottom: 14%; }

    .logo-wrap{ width: clamp(190px, 16vw, 250px); }
    .logo{ top: 30%; }

    .module-label{ width: 230px; grid-template-columns: 44px 1fr; column-gap: 14px; }
    .module-icon{ width: 40px; height: 40px; }
    .module-label h2{ margin-bottom: 12px; }
    .module-label p{ line-height: 1.55; }
    .module-label > a{ margin-top: 12px; }
    .module-label .enter{ margin-top: 0; }

    .intro{
        width: min(480px, 44vw);
        padding: 18px 26px 20px;
        bottom: 5.5%;
    }
}

@media (min-width: 1001px) and (max-width: 1150px) and (orientation: portrait){
    html,body{
        height:auto;
        min-height:100%;
        overflow-x:hidden;
        overflow-y:auto;
    }

    .scene{
        height: 1220px;
        min-height: 100vh;
        overflow:hidden;
    }

    .portal{ width: clamp(416px, 36vw, 370px); }
    .portal--academy{ left: 25%; top: 8%; }
    .portal--it{ right: 10%; top: 9%; }
    .portal--keycore{ left: 13%; bottom: 24%; }
    .portal--island{ right: 8%; bottom: 23%; }

    .logo{
        display:block;
        top: 28%;
        left: 50%;
    }

    .logo-wrap{ width: clamp(260px, 34vw, 380px); }

    .logo-energy-beam{
        top: 41%;
        height: 115px;
    }

    .hub-base{
        top: 83%;
        width: 138vw;
    }

    .hub-beam{
        top: 54%;
        width: 180px;
    }

    .module-label{
        width: 245px;
        grid-template-columns: 42px 1fr;
        column-gap: 12px;
    }

    .module-icon{ width: 38px; height: 38px; }
    .module-label h2{ font-size: 16px; letter-spacing: 5px; margin-bottom: 10px; }
    .module-label p{ font-size: 11px; line-height: 1.55; }
    .module-label > a{ margin-top: 11px; }
    .module-label .enter{ margin-top: 0; padding: 8px 18px; }

    .module-label--academy{ left: 3%; top: 28%; }
    .module-label--it{ right: 3%; top: 28%; }
    .module-label--keycore{ left: 3%; bottom: 26%; }
    .module-label--island{ right: 3%; bottom: 26%; }

    .intro{
        width: min(560px, 62vw);
        bottom: 6%;
        padding: 22px 30px 24px;
    }

    .intro h1{ font-size: 16px; letter-spacing: 7px; }
    .intro p{ font-size: 12px; line-height: 1.7; }

    .connection-svg{
        height: 1220px;
    }
}

@media (max-width:1000px){
    .logo-energy-beam,
    .hub-beam{
        display:none;
    }
}


/* ---- Extracted index style block 2 ---- */
/* Final scale polish: loaded after component CSS so it wins. */
@media (min-width:1001px){
    .logo{
        left:50%;
        top:29%;
        transform:translate(-50%,-50%);
    }

    .logo-wrap{
        width:clamp(190px, 14vw, 310px) !important;
    }

    .logo-energy-beam{
        top:43%;
        height:110px;
    }
}

@media (min-width:1001px) and (max-width:1400px) and (orientation:landscape){
    .logo-wrap{
        width:clamp(175px, 13vw, 240px) !important;
    }

    .logo{
        top:29.5%;
    }

    .logo-energy-beam{
        top:42.5%;
        height:125px;
    }
}

@media (min-width:1001px) and (max-width:1150px) and (orientation:portrait){
    .logo-wrap{
        width:clamp(230px, 28vw, 320px) !important;
    }

    .logo{
        display:block;
        top:27%;
        left:50%;
    }

    .logo-energy-beam{
        top:39.5%;
        height:150px;
    }
}

@media (min-width:1501px){
    .logo-wrap{
        width:clamp(245px, 15vw, 340px) !important;
    }

    .logo-energy-beam{
        height:120px;
    }
}


/* ==========================================================
   academy.css
   ========================================================== */
:root {
    --academy-portal-gold: #ffd35d;
}

/* Academy portal styles. Scoped only to academy-portal selectors. */

.portal.academy-portal {
    overflow: visible;
    isolation: isolate;
}

.portal.academy-portal:hover {
    transform: scale(1.018);
}

.academy-portal {
    --academy-portal-accent: 255, 211, 93;
    --academy-portal-shadow: rgba(var(--academy-portal-accent), .78);
    --academy-portal-soft: rgba(var(--academy-portal-accent), .32);
    --academy-portal-faint: rgba(var(--academy-portal-accent), .14);

    --academy-portal-emblem-left: 51%;
    --academy-portal-emblem-top: -14.5%;
    --academy-portal-emblem-width: 18%;

    --academy-portal-energy-left: 51%;
    --academy-portal-energy-top: 8.5%;
    --academy-portal-energy-height: 10%;
}

.academy-portal--academy {
    --academy-portal-accent: 255, 211, 93;
}

.portal.academy-portal .academy-portal__stage{
    animation:academyPortalOuterFloat 13s ease-in-out infinite;
    will-change:auto;
}

@keyframes academyPortalOuterFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-7px);}
}

.academy-portal__stage {
    position: relative;
    width: 100%;
    aspect-ratio: 1.18 / 1;
    overflow: visible;
    pointer-events: none;
}

.academy-portal__island {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    transform: translate(-50%, -50%);
    z-index: 7;
    animation: academyPortalIslandFloat 7.2s ease-in-out infinite;
    filter: drop-shadow(0 28px 38px rgba(0, 0, 0, .72));
    will-change:auto;
}

.portal.academy-portal .academy-portal__platform {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    pointer-events: none;
    filter:
        drop-shadow(0 0 20px var(--academy-portal-shadow))
        brightness(1.02)
        saturate(1.04);
    animation: academyPortalIslandGlow 4.8s ease-in-out infinite;
}

.academy-portal__aura {
    position: absolute;
    left: 50%;
    top: 53%;
    width: 86%;
    aspect-ratio: 1 / .56;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background:
        radial-gradient(circle, rgba(var(--academy-portal-accent), .28), transparent 58%),
        radial-gradient(circle, rgba(123, 88, 31, .18), transparent 72%);
    filter: blur(11px);
    animation: academyPortalAuraPulse 5.4s ease-in-out infinite;
    z-index: 1;
}

.academy-portal__under-glow {
    position: absolute;
    left: 50%;
    bottom: 14%;
    width: 52%;
    aspect-ratio: 1 / .3;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--academy-portal-accent), .38), rgba(var(--academy-portal-accent), .12) 43%, transparent 72%);
    filter: blur(9px);
    animation: academyPortalUnderGlow 4.6s ease-in-out infinite;
    z-index: 1;
}

.academy-portal__ring {
    position: absolute;
    left: 50%;
    top: 57%;
    border-radius: 50%;
    border: 1px solid rgba(var(--academy-portal-accent), .16);
    box-shadow: 0 0 28px rgba(var(--academy-portal-accent), .08);
    transform: translate(-50%, -50%) rotateX(63deg) rotateZ(-12deg);
    z-index: 2;
    pointer-events: none;
}

.academy-portal__ring--one {
    width: 82%;
    aspect-ratio: 1 / .58;
    animation: academyPortalSpinRing 24s linear infinite;
}

.academy-portal__ring--two {
    width: 96%;
    aspect-ratio: 1 / .62;
    opacity: .5;
    animation: academyPortalSpinRing 38s linear infinite reverse;
}

.academy-portal__ring--three {
    width: 68%;
    aspect-ratio: 1 / .52;
    opacity: .35;
    animation: academyPortalSpinRing 18s linear infinite;
}

.academy-portal__rock {
    position: absolute;
    border-radius: 43% 57% 55% 45%;
    background:
        radial-gradient(circle at 33% 24%, rgba(255, 216, 126, .38), transparent 25%),
        linear-gradient(145deg, #4e3b28, #18120e 58%, #050505);
    box-shadow:
        inset -8px -10px 18px rgba(0, 0, 0, .72),
        0 0 18px rgba(var(--academy-portal-accent), .2);
    animation: academyPortalRockFloat 5s ease-in-out infinite;
    z-index: 4;
}

.academy-portal__rock--1 { width: 6.2%; aspect-ratio: 1; left: 5%;  top: 43%; animation-delay: -.4s; }
.academy-portal__rock--2 { width: 7.8%; aspect-ratio: 1; right: 2%; top: 36%; animation-delay: -1.4s; }
.academy-portal__rock--3 { width: 4.8%; aspect-ratio: 1; left: 22%; bottom: 18%; animation-delay: -2.5s; }
.academy-portal__rock--4 { width: 5.8%; aspect-ratio: 1; right: 20%; bottom: 15%; animation-delay: -3.1s; }
.academy-portal__rock--5 { width: 4.1%; aspect-ratio: 1; right: -2%; bottom: 40%; animation-delay: -1.9s; }

.academy-portal__emblem {
    position: absolute;
    left: var(--academy-portal-emblem-left);
    top: var(--academy-portal-emblem-top);
    width: var(--academy-portal-emblem-width);
    transform: translateX(-50%);
    z-index: 13;
    opacity: .96;
    pointer-events: none;
    filter:
        drop-shadow(0 0 7px rgba(var(--academy-portal-accent), .95))
        drop-shadow(0 0 22px rgba(235, 164, 38, .55));
    animation: academyPortalEmblemPulse 5.6s ease-in-out infinite;
}

.portal.academy-portal .academy-portal__emblem img {
    display: block;
    width: 100%;
    height: auto;
    filter: none;
}

.academy-portal__emblem-halo {
    position: absolute;
    left: var(--academy-portal-emblem-left);
    top: -11%;
    width: 22%;
    aspect-ratio: 1;
    transform: translateX(-50%);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(var(--academy-portal-accent), .36), rgba(255, 175, 48, .12) 42%, transparent 72%);
    filter: blur(8px);
    z-index: 11;
    animation: academyPortalEmblemHalo 4.2s ease-in-out infinite;
    pointer-events: none;
}

.academy-portal__energy-column {
    position: absolute;
    left: var(--academy-portal-energy-left);
    top: var(--academy-portal-energy-top);
    width: 4.2%;
    height: var(--academy-portal-energy-height);
    transform: translateX(-50%);
    z-index: 11;
    pointer-events: none;
    background:
        radial-gradient(ellipse at center, rgba(255, 241, 183, .72), rgba(255, 196, 70, .32) 38%, transparent 72%),
        linear-gradient(
            to top,
            transparent,
            rgba(255, 186, 48, .22) 15%,
            rgba(255, 222, 123, .62) 48%,
            rgba(255, 246, 197, .78) 72%,
            transparent
        );
    filter:
        blur(6px)
        drop-shadow(0 0 14px rgba(var(--academy-portal-accent), .55))
        drop-shadow(0 0 22px rgba(255, 164, 30, .25));
    opacity: .62;
    mask-image: linear-gradient(to top, transparent, #000 16%, #000 84%, transparent);
    animation: academyPortalEnergyColumnPulse 4.8s ease-in-out infinite;
}

.academy-portal__energy-core {
    position: absolute;
    left: var(--academy-portal-energy-left);
    top: 10%;
    width: 1px;
    height: 11%;
    transform: translateX(-50%);
    z-index: 12;
    pointer-events: none;
    background: linear-gradient(to top, transparent, rgba(255, 242, 190, .9), transparent);
    box-shadow:
        0 0 8px rgba(255, 233, 156, .8),
        0 0 22px rgba(255, 196, 70, .45);
    opacity: .58;
    animation: academyPortalEnergyCorePulse 3.6s ease-in-out infinite;
}

.academy-portal__energy-stream {
    position: absolute;
    left: var(--academy-portal-energy-left);
    top: 7%;
    width: 10%;
    height: 19%;
    transform: translateX(-50%);
    z-index: 13;
    pointer-events: none;
}

.academy-portal__energy-dot {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 216, 104, .95);
    box-shadow:
        0 0 8px rgba(255, 230, 150, .92),
        0 0 18px rgba(255, 174, 36, .62);
    animation: academyPortalEnergyRise 3.4s linear infinite;
}

.academy-portal__energy-dot:nth-child(1) { margin-left: -2px; animation-delay: -.2s; --drift: 5px; }
.academy-portal__energy-dot:nth-child(2) { margin-left: 8px; animation-delay: -.8s; --drift: -8px; }
.academy-portal__energy-dot:nth-child(3) { margin-left: -10px; animation-delay: -1.4s; --drift: 10px; }
.academy-portal__energy-dot:nth-child(4) { margin-left: 4px; animation-delay: -2.1s; --drift: -4px; }
.academy-portal__energy-dot:nth-child(5) { margin-left: -6px; animation-delay: -2.8s; --drift: 7px; }

.academy-portal__light {
    position: absolute;
    width: 1.6%;
    min-width: 5px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 210, 96, .95);
    box-shadow:
        0 0 8px rgba(255, 218, 111, .95),
        0 0 22px rgba(255, 176, 47, .72),
        0 0 42px rgba(255, 176, 47, .42);
    z-index: 9;
    pointer-events: none;
    animation: academyPortalLightPulse 3.2s ease-in-out infinite;
}

.academy-portal__light--1 { left: 41%; top: 34%; animation-delay: -.1s; }
.academy-portal__light--2 { right: 34%; top: 33%; animation-delay: -.9s; }
.academy-portal__light--3 { left: 32%; top: 48%; animation-delay: -1.7s; }
.academy-portal__light--4 { right: 42%; bottom: 27%; animation-delay: -2.2s; }
.academy-portal__light--5 { right: 27%; bottom: 38%; animation-delay: -1.1s; }

.academy-portal__particles {
    position: absolute;
    inset: 10% 4% 2%;
    z-index: 10;
    pointer-events: none;
}

.academy-portal__particle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 209, 108, .9);
    box-shadow: 0 0 12px rgba(255, 183, 59, .95);
    animation: academyPortalParticleDrift 6s ease-in-out infinite;
}

.academy-portal__particle:nth-child(1) { left: 30%; top: 60%; animation-delay: -.3s; }
.academy-portal__particle:nth-child(2) { left: 58%; top: 62%; animation-delay: -1.5s; }
.academy-portal__particle:nth-child(3) { left: 49%; top: 75%; animation-delay: -2.6s; }
.academy-portal__particle:nth-child(4) { left: 72%; top: 49%; animation-delay: -3.4s; }
.academy-portal__particle:nth-child(5) { left: 25%; top: 68%; animation-delay: -4.1s; }
.academy-portal__particle:nth-child(6) { left: 43%; top: 45%; animation-delay: -5.2s; }

@keyframes academyPortalIslandFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(-.3deg); }
    50% { transform: translate(-50%, -50%) translateY(-4%) rotate(.42deg); }
}

@keyframes academyPortalIslandGlow {
    0%, 100% { filter: drop-shadow(0 0 20px var(--academy-portal-shadow)) brightness(1.02) saturate(1.04); }
    50% { filter: drop-shadow(0 0 28px var(--academy-portal-shadow)) brightness(1.08) saturate(1.08); }
}

@keyframes academyPortalAuraPulse {
    0%, 100% { opacity: .56; transform: translate(-50%, -50%) scale(.96); }
    50% { opacity: .96; transform: translate(-50%, -50%) scale(1.07); }
}

@keyframes academyPortalUnderGlow {
    0%, 100% { opacity: .5; transform: translateX(-50%) scale(.95); }
    50% { opacity: .9; transform: translateX(-50%) scale(1.08); }
}

@keyframes academyPortalSpinRing {
    to { transform: translate(-50%, -50%) rotateX(63deg) rotateZ(348deg); }
}

@keyframes academyPortalRockFloat {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-14%) rotate(8deg); }
}

@keyframes academyPortalEmblemPulse {
    0%, 100% {
        opacity: .88;
        filter:
            drop-shadow(0 0 6px rgba(var(--academy-portal-accent), .72))
            drop-shadow(0 0 18px rgba(235, 164, 38, .4));
    }
    50% {
        opacity: 1;
        filter:
            drop-shadow(0 0 10px rgba(255, 222, 116, 1))
            drop-shadow(0 0 22px rgba(235, 164, 38, .78));
    }
}

@keyframes academyPortalEmblemHalo {
    0%, 100% { opacity: .46; transform: translateX(-50%) scale(.94); }
    50% { opacity: .82; transform: translateX(-50%) scale(1.08); }
}

@keyframes academyPortalEnergyColumnPulse {
    0%, 100% { opacity: .34; transform: translateX(-50%) scaleY(.92); }
    50% { opacity: .72; transform: translateX(-50%) scaleY(1.08); }
}

@keyframes academyPortalEnergyCorePulse {
    0%, 100% { opacity: .32; transform: translateX(-50%) scaleY(.9); }
    50% { opacity: .8; transform: translateX(-50%) scaleY(1.12); }
}

@keyframes academyPortalEnergyRise {
    0% { opacity: 0; transform: translate3d(0, 0, 0) scale(.55); }
    18% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--drift, 8px), -125px, 0) scale(1.05); }
}

@keyframes academyPortalLightPulse {
    0%, 100% { opacity: .52; transform: scale(.78); }
    50% { opacity: 1; transform: scale(1.24); }
}

@keyframes academyPortalParticleDrift {
    0% { opacity: 0; transform: translate3d(0, 20px, 0) scale(.45); }
    22% { opacity: 1; }
    100% { opacity: 0; transform: translate3d(16px, -66px, 0) scale(1.2); }
}

@media (max-width: 1200px) {
    .academy-portal {
        --academy-portal-emblem-top: -13%;
        --academy-portal-emblem-width: 19%;
    }
}

@media (max-width: 1000px) {
    .portal.academy-portal {
        max-width: 520px;
    }

    .academy-portal {
        --academy-portal-emblem-top: -12%;
        --academy-portal-emblem-width: 18%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .academy-portal *,
    .academy-portal *::before,
    .academy-portal *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}


/* ==========================================================
   island.css
   ========================================================== */
:root{
    --island-portal-cyan:#00ffdc;
}

/* Island portal styles. Scoped only to island-portal selectors. */

.portal.island-portal{
    overflow:visible;
    isolation:isolate;
    pointer-events:auto;
    cursor:pointer;
}

.portal.island-portal:hover{
    transform:scale(1.018);
}

.island-portal{
    --island-portal-accent:0,255,220;
    --island-portal-shadow:rgba(var(--island-portal-accent),.78);
    --island-portal-soft:rgba(var(--island-portal-accent),.32);
    --island-portal-faint:rgba(var(--island-portal-accent),.14);
}

.portal.island-portal .island-portal__stage{
    animation:islandPortalOuterFloat 14s ease-in-out infinite;
    will-change:auto;
}

.island-portal__stage{
    position:relative;
    width:100%;
    aspect-ratio:1.18 / 1;
    overflow:visible;
    pointer-events:none;
}

.island-portal__island{
    position:absolute;
    left:50%;
    top:50%;
    width:100%;
    transform:translate(-50%,-50%);
    z-index:7;
    animation:islandPortalFloat 7.6s ease-in-out infinite;
    filter:drop-shadow(0 28px 38px rgba(0,0,0,.72));
    will-change:auto;
}

.portal.island-portal .island-portal__platform{
    display:block;
    width:100%;
    height:auto;
    user-select:none;
    pointer-events:none;
    filter:
        drop-shadow(0 0 20px rgba(0,255,220,.68))
        brightness(1.03)
        saturate(1.08);
    animation:islandPortalGlow 4.8s ease-in-out infinite;
    transition:transform .35s ease;
}

.portal.island-portal:hover .island-portal__platform{
    transform:translateY(-4px) scale(1.02);
}

.island-portal__aura{
    position:absolute;
    left:50%;
    top:53%;
    width:86%;
    aspect-ratio:1 / .56;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:
        radial-gradient(circle,rgba(0,255,220,.30),transparent 58%),
        radial-gradient(circle,rgba(0,128,180,.15),transparent 72%);
    filter:blur(11px);
    animation:islandPortalAuraPulse 5.4s ease-in-out infinite;
    z-index:1;
}

.island-portal__under-glow{
    position:absolute;
    left:50%;
    bottom:14%;
    width:52%;
    aspect-ratio:1 / .3;
    transform:translateX(-50%);
    border-radius:50%;
    background:radial-gradient(circle,rgba(0,255,220,.42),rgba(0,255,220,.14) 43%,transparent 72%);
    filter:blur(9px);
    animation:islandPortalUnderGlow 4.6s ease-in-out infinite;
    z-index:1;
}

.island-portal__ring{
    position:absolute;
    left:50%;
    top:57%;
    border-radius:50%;
    border:1px solid rgba(0,255,220,.26);
    box-shadow:0 0 28px rgba(0,255,220,.18);
    transform:translate(-50%,-50%) rotateX(63deg) rotateZ(-12deg);
    z-index:2;
    pointer-events:none;
}

.island-portal__ring--one{
    width:82%;
    aspect-ratio:1 / .58;
    animation:islandPortalSpinRing 24s linear infinite;
}

.island-portal__ring--two{
    width:96%;
    aspect-ratio:1 / .62;
    opacity:.5;
    animation:islandPortalSpinRing 38s linear infinite reverse;
}

.island-portal__rock{
    position:absolute;
    border-radius:43% 57% 55% 45%;
    background:
        radial-gradient(circle at 33% 24%,rgba(0,255,220,.24),transparent 25%),
        linear-gradient(145deg,#25424a,#111820 58%,#050607);
    box-shadow:
        inset -8px -10px 18px rgba(0,0,0,.72),
        0 0 18px rgba(0,255,220,.24);
    animation:islandPortalRockFloat 5s ease-in-out infinite;
    z-index:4;
}

.island-portal__rock--1{width:6.2%;aspect-ratio:1;left:5%;top:43%;animation-delay:-.4s;}
.island-portal__rock--2{width:7.8%;aspect-ratio:1;right:2%;top:36%;animation-delay:-1.4s;}
.island-portal__rock--3{width:4.8%;aspect-ratio:1;left:22%;bottom:18%;animation-delay:-2.5s;}

.island-portal__light{
    position:absolute;
    width:1.6%;
    min-width:5px;
    aspect-ratio:1;
    border-radius:50%;
    background:rgba(0,255,220,.95);
    box-shadow:
        0 0 8px rgba(0,255,220,.95),
        0 0 22px rgba(0,255,220,.72),
        0 0 42px rgba(0,255,220,.42);
    z-index:9;
    pointer-events:none;
    animation:islandPortalLightPulse 3.2s ease-in-out infinite;
}

.island-portal__light--1{left:41%;top:34%;animation-delay:-.1s;}
.island-portal__light--2{right:34%;top:33%;animation-delay:-.9s;}
.island-portal__light--3{left:32%;top:48%;animation-delay:-1.7s;}
.island-portal__light--4{right:42%;bottom:27%;animation-delay:-2.2s;}

.island-portal__particles{
    position:absolute;
    inset:10% 4% 2%;
    z-index:10;
    pointer-events:none;
}

.island-portal__particle{
    position:absolute;
    width:3px;
    height:3px;
    border-radius:50%;
    background:rgba(0,255,220,.9);
    box-shadow:0 0 12px rgba(0,255,220,.95);
    animation:islandPortalParticleDrift 6s ease-in-out infinite;
}

.island-portal__particle:nth-child(1){left:30%;top:60%;animation-delay:-.3s;}
.island-portal__particle:nth-child(2){left:58%;top:62%;animation-delay:-1.5s;}
.island-portal__particle:nth-child(3){left:49%;top:75%;animation-delay:-2.6s;}
.island-portal__particle:nth-child(4){left:72%;top:49%;animation-delay:-3.4s;}

@keyframes islandPortalOuterFloat{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(-8px);}
}

@keyframes islandPortalFloat{
    0%,100%{transform:translate(-50%,-50%) translateY(0) rotate(-.3deg);}
    50%{transform:translate(-50%,-50%) translateY(-4%) rotate(.42deg);}
}

@keyframes islandPortalGlow{
    0%,100%{filter:drop-shadow(0 0 20px rgba(0,255,220,.62)) brightness(1.03) saturate(1.08);}
    50%{filter:drop-shadow(0 0 24px rgba(0,255,220,.9)) brightness(1.08) saturate(1.16);}
}

@keyframes islandPortalAuraPulse{
    0%,100%{opacity:.56;transform:translate(-50%,-50%) scale(.96);}
    50%{opacity:.96;transform:translate(-50%,-50%) scale(1.07);}
}

@keyframes islandPortalUnderGlow{
    0%,100%{opacity:.5;transform:translateX(-50%) scale(.95);}
    50%{opacity:.9;transform:translateX(-50%) scale(1.08);}
}

@keyframes islandPortalSpinRing{
    to{transform:translate(-50%,-50%) rotateX(63deg) rotateZ(348deg);}
}

@keyframes islandPortalRockFloat{
    0%,100%{transform:translateY(0) rotate(0deg);}
    50%{transform:translateY(-14%) rotate(8deg);}
}

@keyframes islandPortalLightPulse{
    0%,100%{opacity:.52;transform:scale(.78);}
    50%{opacity:1;transform:scale(1.24);}
}

@keyframes islandPortalParticleDrift{
    0%{opacity:0;transform:translate3d(0,20px,0) scale(.45);}
    22%{opacity:1;}
    100%{opacity:0;transform:translate3d(16px,-66px,0) scale(1.2);}
}

@media(max-width:1000px){
    .portal.island-portal{max-width:520px;}
}

@media(prefers-reduced-motion:reduce){
    .island-portal *,
    .island-portal *::before,
    .island-portal *::after{
        animation-duration:.001ms !important;
        animation-iteration-count:1 !important;
        scroll-behavior:auto !important;
    }
}


/* ==========================================================
   keycore.css
   ========================================================== */
/* ==========================================
   KEYCORE PORTAL
   Own selectors only: .keycore-portal
========================================== */

.portal.keycore-portal{
    overflow:visible;
    isolation:isolate;
    pointer-events:auto;
    cursor:pointer;
    animation:keycorePortalFloat 8s ease-in-out infinite;
}

.portal.keycore-portal:hover{
    transform:scale(1.018);
}

.keycore-portal{
    --keycore-portal-accent:0,245,255;
}

.keycore-portal__aura{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:radial-gradient(circle,rgba(var(--keycore-portal-accent),.18),transparent 65%);
    filter:blur(14px);
    z-index:1;
    pointer-events:none;
}

.keycore-portal__platform-wrap{
    position:relative;
    z-index:5;
    pointer-events:none;
}

.keycore-portal__platform{
    width:100%;
    display:block;
    user-select:none;
    pointer-events:none;
    animation:keycoreGlow 5s ease-in-out infinite;
}

.keycore-portal__orbit{
    position:absolute;
    left:50%;
    top:55%;
    width:90%;
    aspect-ratio:1/.42;
    border:1px solid rgba(0,245,255,.25);
    border-radius:50%;
    transform:translate(-50%,-50%) rotateX(65deg);
    animation:keycoreOrbit 20s linear infinite;
    pointer-events:none;
}

.keycore-portal__orbit--outer{
    width:105%;
    opacity:.4;
    animation-duration:35s;
    animation-direction:reverse;
}

.keycore-portal__stream{
    position:absolute;
    width:2px;
    background:linear-gradient(to bottom,transparent,rgba(0,245,255,.9),transparent);
    opacity:.6;
    animation:keycoreStream 4s ease-in-out infinite;
    pointer-events:none;
}

.keycore-portal__stream--1{left:42%;top:18%;height:45%;}
.keycore-portal__stream--2{left:50%;top:14%;height:55%;animation-delay:-1.2s;}
.keycore-portal__stream--3{left:58%;top:20%;height:42%;animation-delay:-2.4s;}

.keycore-portal__node{
    position:absolute;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#00f5ff;
    box-shadow:0 0 10px #00f5ff,0 0 25px #53a8ff;
    animation:keycoreNode 3s ease-in-out infinite;
    pointer-events:none;
}

.keycore-portal__node--1{left:28%;top:55%;}
.keycore-portal__node--2{right:28%;top:48%;}
.keycore-portal__node--3{left:52%;bottom:18%;}

.keycore-portal__bits{pointer-events:none;}

.keycore-portal__bits span{
    position:absolute;
    color:#9df0ff;
    font-size:12px;
    font-weight:700;
    text-shadow:0 0 8px #00f5ff;
    animation:keycoreBits 6s linear infinite;
    pointer-events:none;
}

.keycore-portal__bits span:nth-child(1){left:18%;top:70%;}
.keycore-portal__bits span:nth-child(2){left:26%;top:55%;}
.keycore-portal__bits span:nth-child(3){left:40%;top:72%;}
.keycore-portal__bits span:nth-child(4){left:52%;top:48%;}
.keycore-portal__bits span:nth-child(5){left:68%;top:66%;}
.keycore-portal__bits span:nth-child(6){left:80%;top:58%;}
.keycore-portal__bits span:nth-child(7){left:34%;top:42%;}
.keycore-portal__bits span:nth-child(8){left:62%;top:38%;}
.keycore-portal__bits span:nth-child(9){left:76%;top:46%;}
.keycore-portal__bits span:nth-child(10){left:50%;top:80%;}

@keyframes keycorePortalFloat{
    0%,100%{translate:0 0}
    50%{translate:0 -8px}
}

@keyframes keycoreGlow{
    0%,100%{filter:drop-shadow(0 0 15px rgba(83,168,255,.5)) drop-shadow(0 0 24px rgba(0,245,255,.2));}
    50%{filter:drop-shadow(0 0 22px rgba(83,168,255,.9)) drop-shadow(0 0 38px rgba(0,245,255,.4));}
}

@keyframes keycoreOrbit{
    to{transform:translate(-50%,-50%) rotateX(65deg) rotateZ(360deg);}
}

@keyframes keycoreBits{
    0%{opacity:0;transform:translateY(20px);}
    20%{opacity:1;}
    100%{opacity:0;transform:translateY(-80px);}
}

@keyframes keycoreStream{
    0%,100%{opacity:0;}
    40%{opacity:.8;}
}

@keyframes keycoreNode{
    0%,100%{transform:scale(.8);}
    50%{transform:scale(1.4);}
}

@media(max-width:1000px){
    .keycore-portal{max-width:520px;}
}

@media(prefers-reduced-motion:reduce){
    .keycore-portal,
    .keycore-portal *,
    .keycore-portal *::before,
    .keycore-portal *::after{
        animation:none!important;
        transition:none!important;
    }
}


/* ==========================================================
   it-solutions.css
   ========================================================== */
/* ==========================================
   IT SOLUTIONS PORTAL
   Own selectors only: .it-solutions-portal
========================================== */

.it-solutions-portal{
    overflow:visible;
    isolation:isolate;
    pointer-events:auto;
    cursor:pointer;
    animation:itSolutionsPortalFloat 8s ease-in-out infinite;
}

.it-solutions-portal:hover{
    transform:scale(1.018);
}

.it-solutions-portal__aura{
    position:absolute;
    left:50%;
    top:58%;
    width:86%;
    aspect-ratio:1/.48;
    transform:translate(-50%,-50%);
    border-radius:50%;
    background:
        radial-gradient(circle,rgba(177,108,255,.24),transparent 58%),
        radial-gradient(circle,rgba(223,124,255,.12),transparent 72%);
    filter:blur(8px);
    z-index:1;
    pointer-events:none;
    animation:itSolutionsPortalAura 5.8s ease-in-out infinite;
}

.it-solutions-portal__platform-wrap{
    position:relative;
    width:100%;
    z-index:5;
    pointer-events:none;
}

.it-solutions-portal__platform{
    display:block;
    width:100%;
    height:auto;
    user-select:none;
    pointer-events:none;
    animation:itSolutionsPortalGlow 4.8s ease-in-out infinite;
}

.it-solutions-portal__data-line{
    position:absolute;
    height:1px;
    background:linear-gradient(90deg,transparent,rgba(223,124,255,.78),transparent);
    box-shadow:0 0 12px rgba(223,124,255,.68);
    opacity:0;
    z-index:7;
    animation:itSolutionsPortalLine 4.8s ease-in-out infinite;
}

.it-solutions-portal__data-line--1{
    left:24%;
    top:44%;
    width:30%;
    transform:rotate(-12deg);
    animation-delay:-.6s;
}

.it-solutions-portal__data-line--2{
    right:22%;
    top:47%;
    width:28%;
    transform:rotate(14deg);
    animation-delay:-1.9s;
}

.it-solutions-portal__data-line--3{
    left:36%;
    top:66%;
    width:30%;
    transform:rotate(4deg);
    animation-delay:-3.2s;
}

.it-solutions-portal__node{
    position:absolute;
    width:1.45%;
    min-width:6px;
    aspect-ratio:1;
    border-radius:50%;
    background:#df7cff;
    box-shadow:
        0 0 8px rgba(223,124,255,.95),
        0 0 22px rgba(177,108,255,.72);
    z-index:9;
    pointer-events:none;
    animation:itSolutionsPortalNode 3.2s ease-in-out infinite;
}

.it-solutions-portal__node--1{left:30%;top:58%;animation-delay:-.2s}
.it-solutions-portal__node--2{right:31%;top:52%;animation-delay:-1.1s}
.it-solutions-portal__node--3{left:52%;bottom:21%;animation-delay:-2s}
.it-solutions-portal__node--4{right:20%;bottom:35%;animation-delay:-2.8s}

.it-solutions-portal__icons{
    position:absolute;
    inset:0;
    z-index:10;
    pointer-events:none;
}

.it-solutions-portal__icon{
    position:absolute;
    width:7%;
    max-width:38px;
    min-width:24px;
    aspect-ratio:1;
    display:grid;
    place-items:center;
    border:1px solid rgba(223,124,255,.34);
    border-radius:12px;
    background:rgba(36,9,54,.22);
    box-shadow:
        0 0 12px rgba(177,108,255,.34),
        inset 0 0 12px rgba(223,124,255,.12);
    opacity:0;
    animation:itSolutionsPortalIcon 6.3s ease-in-out infinite;
}

.it-solutions-portal__icon svg{
    width:58%;
    height:58%;
    fill:none;
    stroke:rgba(238,196,255,.96);
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
    filter:drop-shadow(0 0 8px rgba(223,124,255,.85));
}

.it-solutions-portal__icon--shield{left:23%;top:47%;animation-delay:-.2s}
.it-solutions-portal__icon--cloud{left:35%;top:32%;animation-delay:-1.4s}
.it-solutions-portal__icon--wifi{right:29%;top:37%;animation-delay:-2.1s}
.it-solutions-portal__icon--tool{right:19%;top:54%;animation-delay:-3s}

@keyframes itSolutionsPortalFloat{
    0%,100%{translate:0 0}
    50%{translate:0 -7px}
}

@keyframes itSolutionsPortalGlow{
    0%,100%{
        filter:
            drop-shadow(0 0 18px rgba(177,108,255,.55))
            drop-shadow(0 0 28px rgba(223,124,255,.22))
            brightness(1.02)
            saturate(1.06);
    }
    50%{
        filter:
            drop-shadow(0 0 22px rgba(177,108,255,.85))
            drop-shadow(0 0 38px rgba(223,124,255,.38))
            brightness(1.08)
            saturate(1.14);
    }
}

@keyframes itSolutionsPortalAura{
    0%,100%{opacity:.48;transform:translate(-50%,-50%) scale(.96)}
    50%{opacity:.92;transform:translate(-50%,-50%) scale(1.07)}
}

@keyframes itSolutionsPortalLine{
    0%,100%{opacity:0;scale:.72 1}
    35%{opacity:.82}
    65%{opacity:.42}
}

@keyframes itSolutionsPortalNode{
    0%,100%{opacity:.35;scale:.72}
    50%{opacity:1;scale:1.3}
}

@keyframes itSolutionsPortalIcon{
    0%{opacity:0;transform:translate3d(0,18px,0) scale(.82)}
    20%{opacity:.9}
    55%{opacity:.75}
    100%{opacity:0;transform:translate3d(14px,-58px,0) scale(1.05)}
}

@media(max-width:1000px){
    .it-solutions-portal{
        max-width:520px;
    }
}

@media(prefers-reduced-motion:reduce){
    .it-solutions-portal,
    .it-solutions-portal *,
    .it-solutions-portal *::before,
    .it-solutions-portal *::after{
        animation-duration:.001ms!important;
        animation-iteration-count:1!important;
        scroll-behavior:auto!important;
    }
}


/* ==========================================================
   main-logo.css
   ========================================================== */
/* ==========================================================
   MAIN LOGO
   ========================================================== */

:root{
    --logo-colour:#b16cff;
    --logo-colour-light:#f1ddff;
    --logo-glow-soft:rgba(177,108,255,.45);
    --logo-glow-hard:rgba(177,108,255,.90);
}

.logo{
    position:absolute;
    left:50%;
    top:30%;
    transform:translate(-50%,-50%);
    z-index:13;
    text-decoration:none;
}

.logo-wrap{
    position:relative;
    width:min(520px,16vw);
    aspect-ratio:1;
}

/* ==========================================================
   MASKED LOGO LAYERS
   ========================================================== */

.logo-mask,
.logo-glow-1,
.logo-glow-2,
.logo-glow-3{
    position:absolute;
    inset:0;

    -webkit-mask:url("../../images/loax-white-logo.png") center/contain no-repeat;
    mask:url("../../images/loax-white-logo.png") center/contain no-repeat;

    pointer-events:none;
}

.logo-mask{
    z-index:4;
    transition: filter .25s ease, background .25s ease;

    background:
    linear-gradient(
        135deg,
        var(--logo-colour-light) 0%,
        var(--logo-colour) 28%,
        #ffffff 48%,
        var(--logo-colour) 72%,
        var(--logo-colour-light) 100%
    );
}

/* Tight edge glow */

.logo-glow-1{
    z-index:3;
    background:var(--logo-colour);
    opacity:.95;
    filter:blur(2px);
    transform:scale(1.003);
}

/* Mid glow */

.logo-glow-2{
    z-index:2;
    background:var(--logo-colour);
    opacity:.62;
    filter:blur(8px);
    transform:scale(1.012);
}

/* Large atmospheric glow */

.logo-glow-3{
    z-index:1;
    background:var(--logo-colour);
    opacity:.34;
    filter:blur(10px);
    transform:scale(1.03);
}

/* ==========================================================
   SUBTITLE
   ========================================================== */

#logoSubline{
    position:absolute;
    left:50%;
    bottom:20.5%;
    transform:translateX(-50%);

    z-index:6;

    font-size:clamp(15px,0.15vw,24px);
    font-weight:800;
    letter-spacing:.28em;

    white-space:nowrap;

    color:var(--logo-colour);

    text-shadow:
        0 0 8px var(--logo-glow-hard),
        0 0 24px var(--logo-glow-hard),
        0 0 44px var(--logo-glow-soft);

    transition:
        color .25s ease,
        text-shadow .25s ease,
        opacity .25s ease;
}

/* ==========================================================
   OPTIONAL HOVER EFFECT
   ========================================================== */

.logo:hover .logo-mask{
    filter:brightness(1.08);
}

/* ==========================================================
   RESPONSIVE
   ========================================================== */

@media(max-width:1200px){

    .logo-wrap{
        width:min(430px,36vw);
    }

    #logoSubline{
        font-size:clamp(14px,1.4vw,20px);
    }
}

@media(max-width:1000px){

    .logo{
        display:none;
    }
}


/* ==========================================================
   performance-optimisations.css
   ========================================================== */
/* ==========================================================
   LOAX PERFORMANCE OPTIMISATIONS
   Keeps the style, reduces continuous paint/repaint load.
   Loaded last so it safely overrides the visual CSS above.
   ========================================================== */

:root{
    --loax-glow-cap: .82;
}

/* Stop keeping every portal permanently promoted to GPU layers. */
.portal,
.portal img,
.academy-portal__island,
.island-portal__island{
    will-change:auto !important;
    backface-visibility:hidden;
}

.portal:hover,
.logo:hover{
    will-change:transform;
}

/* Blurs and animated filters are the main lag source. Keep glow, cut the repaint cost. */
.academy-portal__aura,
.island-portal__aura,
.it-solutions-portal__aura,
.keycore-portal__aura{
    filter:blur(10px) !important;
    opacity:.72;
}

.academy-portal__under-glow,
.island-portal__under-glow{
    filter:blur(8px) !important;
}

.logo-glow-2{filter:blur(5px) !important; opacity:.52 !important;}
.logo-glow-3{filter:blur(10px) !important; opacity:.24 !important;}
.logo-energy-beam{filter:blur(4px) drop-shadow(0 0 18px rgba(177,108,255,.55)) !important;}

/* Use static glow on platform images instead of constantly animating filter strength. */
.academy-portal__platform,
.island-portal__platform,
.it-solutions-portal__platform,
.keycore-portal__platform{
    animation:none !important;
}

.portal.academy-portal .academy-portal__platform{
    filter:drop-shadow(0 0 20px rgba(255,211,93,.58)) brightness(1.03) saturate(1.06) !important;
}
.portal.island-portal .island-portal__platform{
    filter:drop-shadow(0 0 20px rgba(0,255,220,.54)) brightness(1.03) saturate(1.06) !important;
}
.it-solutions-portal__platform{
    filter:drop-shadow(0 0 20px rgba(177,108,255,.56)) brightness(1.03) saturate(1.06) !important;
}
.keycore-portal__platform{
    filter:drop-shadow(0 0 20px rgba(83,168,255,.58)) brightness(1.03) saturate(1.06) !important;
}

/* Keep one or two signature animations, remove tiny decorative animations nobody misses. */
.academy-portal__rock,
.island-portal__rock{
    animation:none !important;
}

.academy-portal__light:nth-of-type(n+4),
.academy-portal__particle:nth-child(n+4),
.island-portal__particle:nth-child(n+3),
.keycore-portal__bits span:nth-child(n+6){
    display:none !important;
}

/* Smooth animated objects by sticking to transform/opacity, not filter/box-shadow changes. */
.academy-portal__light,
.island-portal__light,
.it-solutions-portal__node,
.keycore-portal__node{
    box-shadow:0 0 10px currentColor !important;
}

.connection-svg .route-glow{
    filter:none !important;
    opacity:.42;
}
.route-spark{
    filter:none !important;
}

/* Auto-applied by JS on weaker devices / battery-saver type setups. */
body.performance-mode .scanline,
body.performance-mode .academy-portal__energy-stream,
body.performance-mode .academy-portal__energy-column,
body.performance-mode .academy-portal__energy-core,
body.performance-mode .academy-portal__emblem-halo,
body.performance-mode .academy-portal__particles,
body.performance-mode .island-portal__particles,
body.performance-mode .keycore-portal__bits,
body.performance-mode .it-solutions-portal__icons,
body.performance-mode .it-solutions-portal__data-line,
body.performance-mode .keycore-portal__stream,
body.performance-mode .route-spark{
    display:none !important;
}

body.performance-mode .academy-portal__ring--two,
body.performance-mode .academy-portal__ring--three,
body.performance-mode .island-portal__ring--two,
body.performance-mode .keycore-portal__orbit--outer{
    display:none !important;
}

body.performance-mode .vignette{
    box-shadow:inset 0 0 90px rgba(0,0,0,.78) !important;
}

body.performance-mode .portal,
body.performance-mode .academy-portal__island,
body.performance-mode .island-portal__island,
body.performance-mode .it-solutions-portal,
body.performance-mode .keycore-portal{
    animation-duration:13s !important;
}

@media(max-width:1000px){
    #spaceCanvas,
    .space-glow,
    .spotlight,
    .vignette,
    .scanline{
        display:none !important;
    }

    .portal,
    .academy-portal__island,
    .island-portal__island,
    .it-solutions-portal,
    .keycore-portal{
        animation:none !important;
    }
}

@media(prefers-reduced-motion:reduce){
    #spaceCanvas,
    .spotlight,
    .scanline,
    .connection-svg .route-core,
    .route-spark{
        display:none !important;
    }
}


/* ==========================================================
   ACCESSIBILITY / SEMANTIC CONTENT
   ========================================================== */
.skip-link{
    position:absolute;
    left:16px;
    top:-60px;
    z-index:999;
    padding:10px 14px;
    border:1px solid rgba(177,108,255,.55);
    border-radius:999px;
    background:#070712;
    color:#fff;
    transition:top .2s ease;
}
.skip-link:focus{top:16px;}
.portal:focus-visible,
.module-label a:focus-visible,
.logo:focus-visible{
    outline:2px solid currentColor;
    outline-offset:6px;
}
.brand-proof{
    position:absolute;
    left:50%;
    bottom:1.35%;
    width:min(720px,70vw);
    transform:translateX(-50%);
    z-index:12;
    text-align:center;
    font-size:11px;
    line-height:1.65;
    color:rgba(235,230,245,.58);
}
.brand-proof strong{color:rgba(255,255,255,.82);font-weight:700;}
@media(max-width:1000px){
    .brand-proof{
        position:relative;
        inset:auto;
        transform:none;
        width:100%;
        max-width:620px;
        margin:0 auto 18px;
        order:100;
        color:rgba(235,230,245,.76);
    }
}