/* ==========================================================================
   parallax3d.css
   3-D layered parallax background for the portfolio.

   Loaded AFTER style.css / responsive.css so it only overrides what it needs.
   - #p3d-stage is a FIXED, full-viewport, pointer-events:none stage at
     z-index:-1 -> it paints above the canvas background but BEHIND every
     piece of real content, so nothing becomes unclickable.
   - 5 layer wrappers (orbs / grid / stars / shapes / sparks) each carry their
     own translateZ + parallax depth (set from data-depth by parallax3d.js).
   - Idle motion lives in CSS keyframes on the INNER elements, while the
     scroll/mouse driven transform lives on the layer wrapper -> they compose.
   ========================================================================== */

/* ---------------------------------------------
   0. Dark canvas (theme: dark, premium, purple/blue)
   html carries the canvas background so body can stay transparent and the
   fixed stage remains visible through the whole document.
--------------------------------------------- */
html {
    background: #05060f;
    background-color: #05060f;
}

body {
    background: transparent !important;
    color: #43485c;
}

/* ---------------------------------------------
   1. Stage + camera + layers
--------------------------------------------- */
.p3d-stage {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-perspective-origin: 50% 42%;
    perspective-origin: 50% 42%;
    background:
        radial-gradient(120% 85% at 50% -10%, #0c2036 0%, rgba(8, 20, 36, 0.55) 42%, rgba(5, 8, 14, 0) 72%),
        radial-gradient(80% 60% at 86% 12%, rgba(34, 211, 238, 0.18) 0%, rgba(5, 8, 14, 0) 68%),
        radial-gradient(70% 60% at 8% 78%, rgba(56, 130, 255, 0.16) 0%, rgba(5, 8, 14, 0) 70%),
        linear-gradient(180deg, #0a0e18 0%, #0c1420 45%, #05070d 100%);
}

.p3d-camera {
    position: absolute;
    top: -12%;
    left: 0;
    width: 100%;
    height: 124%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    will-change: transform;
}

/* Layers are 3x the camera tall and start one camera-height above it, so the
   visible window is the band [28%, 72%] of the layer. Content lives in that
   band and is duplicated at +50% => wrapping by one period is invisible. */
.p3d-layer {
    position: absolute;
    top: -100%;
    left: 0;
    width: 100%;
    height: 300%;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    pointer-events: none;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

/* static depth fallback (JS overrides inline while animating) */
.p3d-layer--orbs   { transform: translateZ(-900px); }
.p3d-layer--grid   { transform: translateZ(-700px); }
.p3d-layer--stars  { transform: translateZ(-500px); }
.p3d-layer--shapes { transform: translateZ(-220px); }
.p3d-layer--sparks { transform: translateZ(-60px);  }

/* ---------------------------------------------
   2. Distant data-hub glow (far depth)
   Soft translucent cyan/blue regions behind the grid — reads as cloud
   regions / infrastructure glow, not celestial bodies.
--------------------------------------------- */
.p3d-orb {
    position: absolute;
    display: block;
    border-radius: 50%;
    -webkit-filter: blur(34px);
    filter: blur(34px);
    mix-blend-mode: screen;
    pointer-events: none;
    animation: p3d-orb-drift 26s ease-in-out infinite alternate,
               p3d-orb-pulse 12s ease-in-out infinite;
}

.p3d-orb--1 {
    width: 46vmax;
    height: 46vmax;
    left: 3vmax;
    top: 34%;
    background: radial-gradient(circle at 42% 42%, rgba(34, 211, 238, 0.7) 0%, rgba(30, 108, 180, 0.24) 45%, rgba(34, 211, 238, 0) 70%);
    animation-duration: 26s, 12s;
}

.p3d-orb--2 {
    width: 40vmax;
    height: 40vmax;
    right: 6vmax;
    top: 40%;
    background: radial-gradient(circle at 55% 45%, rgba(56, 130, 255, 0.62) 0%, rgba(56, 90, 210, 0.2) 48%, rgba(56, 130, 255, 0) 72%);
    animation-duration: 31s, 14s;
    animation-delay: -6s, -3s;
}

.p3d-orb--3 {
    width: 36vmax;
    height: 36vmax;
    left: 26%;
    top: 52%;
    background: radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.52) 0%, rgba(40, 80, 160, 0.18) 50%, rgba(96, 165, 250, 0) 72%);
    animation-duration: 36s, 16s;
    animation-delay: -12s, -7s;
}

@keyframes p3d-orb-drift {
    0%   { transform: translate3d(0, 0, 0) scale(1); }
    50%  { transform: translate3d(3vmax, -2.4vmax, 0) scale(1.08); }
    100% { transform: translate3d(-2.6vmax, 2vmax, 0) scale(0.96); }
}

@keyframes p3d-orb-pulse {
    0%, 100% { opacity: 0.42; }
    50%      { opacity: 0.72; }
}

/* ---------------------------------------------
   3. Wireframe grid floor (mid depth)
--------------------------------------------- */
.p3d-grid-floor {
    position: absolute;
    left: 0;
    top: 56%;
    width: 100%;
    height: 34%;
    display: block;
    pointer-events: none;
    background-image:
        linear-gradient(to right, rgba(56, 130, 255, 0.3) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(34, 211, 238, 0.22) 1px, transparent 1px);
    background-size: 90px 90px, 90px 90px;
    background-position: 0 0, 0 0;
    -webkit-transform: rotateX(74deg) translateZ(-120px);
    transform: rotateX(74deg) translateZ(-120px);
    -webkit-transform-origin: 50% 100%;
    transform-origin: 50% 100%;
    animation: p3d-grid-run 9s linear infinite;
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 78%);
    mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 78%);
}

@keyframes p3d-grid-run {
    from { background-position: 0 0, 0 0; }
    to   { background-position: 0 90px, 0 90px; }
}

/* ---------------------------------------------
   4. Circuit nodes + drifting data packets (JS/CSS generated)
--------------------------------------------- */
.p3d-star {
    position: absolute;
    display: block;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #9adcff;
    box-shadow: 0 0 6px rgba(120, 200, 255, 0.85);
    pointer-events: none;
    animation: p3d-node 6s ease-in-out infinite;
}

@keyframes p3d-node {
    0%, 100% { opacity: 0.2; transform: scale(0.7); }
    50%      { opacity: 1;   transform: scale(1); }
}

.p3d-spark {
    position: absolute;
    display: block;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, #e6f7ff 0%, rgba(56, 210, 255, 0.85) 45%, rgba(34, 211, 238, 0) 72%);
    -webkit-filter: blur(0.3px);
    filter: blur(0.3px);
    pointer-events: none;
    animation: p3d-spark-float 15s ease-in-out infinite;
}

@keyframes p3d-spark-float {
    0%   { opacity: 0;   transform: translate3d(0, 40px, 0) scale(0.6); }
    25%  { opacity: 0.9; }
    75%  { opacity: 0.75; }
    100% { opacity: 0;   transform: translate3d(28px, -90px, 0) scale(1.15); }
}

/* ---------------------------------------------
   5. Floating geometric shapes (near depth)
--------------------------------------------- */
.p3d-shape {
    position: absolute;
    display: block;
    pointer-events: none;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}

.p3d-shape--code {
    left: 7%;
    top: 34%;
    width: 190px;
    height: 122px;
}
.p3d-shape--code i,
.p3d-shape--terminal i,
.p3d-shape--api i {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    border: 1px solid rgba(120, 190, 255, 0.28);
    background: rgba(9, 16, 30, 0.6);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.4);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}
/* code line bars inside the code panel */
.p3d-shape--code i::before {
    content: "";
    position: absolute;
    left: 14px; top: 14px;
    width: calc(100% - 28px);
    height: 70px;
    background:
        repeating-linear-gradient(to bottom,
            rgba(56, 228, 255, 0.5) 0 6px, transparent 6px 12px),
        repeating-linear-gradient(to bottom,
            rgba(120, 170, 255, 0.35) 12px 18px, transparent 18px 24px);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.7));
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1), rgba(0,0,0,0.7));
}
.p3d-shape--code::after {
    content: "";
    position: absolute;
    top: 14px; left: 14px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(56, 228, 255, 0.85);
    box-shadow: 18px 0 0 rgba(56, 130, 255, 0.7), 36px 0 0 rgba(96, 165, 250, 0.6);
}
.p3d-shape--code2 {
    left: auto; right: 8%;
    top: 58%;
    width: 160px;
    height: 100px;
    animation-duration: 20s;
    animation-direction: reverse;
}

/* terminal window */
.p3d-shape--terminal {
    left: 18%;
    top: 62%;
    width: 150px;
    height: 92px;
}
.p3d-shape--terminal::before {
    content: "$ deploy --prod ✓";
    position: absolute;
    top: 26px; left: 12px;
    font: 600 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: rgba(120, 228, 255, 0.9);
    white-space: nowrap;
}
.p3d-shape--terminal::after {
    content: "";
    position: absolute;
    top: 8px; left: 8px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: rgba(248, 113, 113, 0.7);
    box-shadow: 12px 0 0 rgba(250, 204, 21, 0.6), 24px 0 0 rgba(52, 211, 153, 0.6);
}

/* database cylinder */
.p3d-shape--db {
    left: 70%;
    top: 30%;
    width: 96px;
    height: 120px;
}
.p3d-shape--db::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 6px 6px 50% 50%;
    border: 1.5px solid rgba(34, 211, 238, 0.5);
    background: repeating-linear-gradient(to bottom, rgba(34, 211, 238, 0.1) 0 10px, transparent 10px 20px);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.2);
}

/* API request/response card */
.p3d-shape--api {
    left: 42%;
    top: 76%;
    width: 140px;
    height: 78px;
}
.p3d-shape--api::before {
    content: "200 OK";
    position: absolute;
    top: 24px; left: 12px;
    font: 700 14px/1.2 ui-monospace, Menlo, Consolas, monospace;
    color: rgba(52, 211, 153, 0.9);
}
.p3d-shape--api::after {
    content: "GET /api/run";
    position: absolute;
    top: 8px; left: 12px;
    font: 500 11px/1.2 ui-monospace, Menlo, Consolas, monospace;
    color: rgba(140, 170, 220, 0.7);
}

/* period duplicates (content repeated exactly +50% down the layer) */
.p3d-shape--dup.p3d-shape--code1 { top: 84%; }
.p3d-shape--dup.p3d-shape--code2 { top: 108%; }
.p3d-shape--dup.p3d-shape--terminal { top: 112%; }
.p3d-shape--dup.p3d-shape--db      { top: 80%; }
.p3d-shape--dup.p3d-shape--cube    { top: 92%; }
.p3d-shape--dup.p3d-shape--api     { top: 126%; }

@keyframes p3d-spin {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
    50%  { transform: translate3d(12px, -26px, 0) rotate(180deg); }
    100% { transform: translate3d(0, 0, 0) rotate(360deg); }
}

.p3d-shape--cube {
    left: 68%;
    top: 42%;
    width: 92px;
    height: 92px;
    animation: p3d-cube 32s linear infinite;
}

.p3d-shape--cube i {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 2px solid rgba(0, 204, 255, 0.48);
    background: rgba(0, 204, 255, 0.05);
    box-shadow: 0 0 24px rgba(0, 204, 255, 0.22);
}

.p3d-shape--cube i:nth-child(1) { transform: translateZ(46px); }
.p3d-shape--cube i:nth-child(2) { transform: rotateY(90deg) translateZ(46px); }
.p3d-shape--cube i:nth-child(3) { transform: rotateX(90deg) translateZ(46px); }

@keyframes p3d-cube {
    0%   { transform: rotateX(0deg) rotateY(0deg); }
    100% { transform: rotateX(360deg) rotateY(360deg); }
}

/* ---------------------------------------------
   6. Vignette (keeps sections readable)
--------------------------------------------- */
.p3d-vignette {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background:
        radial-gradient(120% 100% at 50% 45%, rgba(0, 0, 0, 0) 38%, rgba(3, 4, 12, 0.55) 78%, rgba(2, 3, 9, 0.85) 100%),
        linear-gradient(180deg, rgba(3, 4, 12, 0.7) 0%, rgba(3, 4, 12, 0) 20%, rgba(3, 4, 12, 0) 62%, rgba(2, 3, 9, 0.78) 100%);
}

/* ---------------------------------------------
   7. Content panels — translucent "glass" so the 3-D stage
      shows through while the (dark) copy stays high contrast.
      Purely additive overrides: no structural edits.
--------------------------------------------- */
#welcome-hero,
.about,
.education,
.skills,
.experience,
.profiles,
.portfolio,
.clients,
.contact,
footer#footer-copyright {
    position: relative;
    z-index: 1;
}

.about,
.education,
.skills,
.experience,
.profiles,
.portfolio,
.clients,
.contact,
footer#footer-copyright {
    background: rgba(248, 250, 255, 0.89);
    box-shadow: inset 0 1px 0 rgba(182, 54, 255, 0.16);
}

/* solid theme backgrounds -> translucent, so parallax reads through */
.education { background: rgba(248, 250, 255, 0.89); }
.contact   { background: rgba(248, 250, 255, 0.89); }

/* ---------------------------------------------
   8. Hero — ghost the banner so the 3-D stage is visible,
      keep white hero copy at full contrast.
--------------------------------------------- */
.welcome-hero {
    background: transparent;
    position: relative;
    z-index: 1;
    overflow: hidden;
}

.welcome-hero:before {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background: url(../images/about/welcome-banner.jpg) no-repeat center center;
    background-size: cover;
    opacity: 0.26;
}

.welcome-hero:after {
    content: " ";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background: linear-gradient(180deg,
        rgba(7, 10, 26, 0.88) 0%,
        rgba(11, 16, 44, 0.55) 42%,
        rgba(6, 8, 22, 0.94) 100%);
}

.welcome-hero .container {
    position: relative;
    z-index: 2;
}

.header-text h2 {
    text-shadow: 0 6px 34px rgba(0, 0, 0, 0.55);
}

.header-text p {
    text-shadow: 0 4px 22px rgba(0, 0, 0, 0.6);
}

/* ---------------------------------------------
   9. Chrome — premium translucent navbar (same colours/behaviour)
--------------------------------------------- */
nav.navbar.bootsnav,
nav.navbar.bootsnav.no-background {
    background-color: rgba(255, 255, 255, 0.93);
    -webkit-backdrop-filter: blur(10px) saturate(130%);
    backdrop-filter: blur(10px) saturate(130%);
}

#footer-copyright .hm-footer-copyright p {
    color: #6f7590;
}

/* ---------------------------------------------
   10. Responsive — fewer/cheaper layers on small screens
--------------------------------------------- */
@media (max-width: 991px) {
    .p3d-orb {
        -webkit-filter: blur(24px);
        filter: blur(24px);
        animation-duration: 30s, 14s;
    }

    .p3d-shape--cube { width: 70px; height: 70px; }
    .p3d-shape--cube i:nth-child(1) { transform: translateZ(35px); }
    .p3d-shape--cube i:nth-child(2) { transform: rotateY(90deg) translateZ(35px); }
    .p3d-shape--cube i:nth-child(3) { transform: rotateX(90deg) translateZ(35px); }
}

@media (max-width: 767px) {
    .p3d-layer--sparks { display: none; }
    .p3d-orb--2 { display: none; }
    .p3d-shape--cube { display: none; }
    .p3d-grid-floor {
        background-size: 60px 60px, 60px 60px;
        height: 70%;
    }
    @keyframes p3d-grid-run {
        from { background-position: 0 0, 0 0; }
        to   { background-position: 0 60px, 0 60px; }
    }

    /* stronger panels on phones so text stays crisp over the moving bg */
    .about,
    .education,
    .skills,
    .experience,
    .profiles,
    .portfolio,
    .clients,
    .contact,
    footer#footer-copyright {
        background: rgba(248, 250, 255, 0.94);
    }

    nav.navbar.bootsnav,
    nav.navbar.bootsnav.no-background {
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }
}

/* ---------------------------------------------
   11. Accessibility — freeze/simplify on request
--------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .p3d-stage *,
    .p3d-stage *:before,
    .p3d-stage *:after {
        animation: none !important;
        transition: none !important;
    }

    .p3d-camera {
        transform: none !important;
    }

    .p3d-layer {
        transform: none !important;
    }
}

/* ==========================================================================
   12. THEME HARMONISATION — "Midnight Aurora"
   --------------------------------------------------------------------------
   This file is linked LAST, so the palette and the section surfaces are
   re-declared once here, at the end, to match the THEME OVERRIDE LAYER at the
   end of style.css:
     - stage/orbs/grid/shapes: magenta+blue -> cyan/violet (same geometry)
     - section panels: near-white glass -> dark glass (the panels used to be
       re-imposed as rgba(248,250,255,.89) here, which fought the dark theme)
   Layer structure, depths, data-depth/data-z and the parallax3d.js contract
   are untouched — this is colour only.
   ========================================================================== */

body {
    color: #a7b0d0;
}

/* --- palette (digital / cyan-blue, enterprise, non-cosmic) --- */
.p3d-stage {
    background:
        radial-gradient(120% 85% at 50% -10%, #0d2036 0%, rgba(10, 20, 38, 0.55) 42%, rgba(5, 8, 14, 0) 72%),
        radial-gradient(80% 60% at 86% 12%, rgba(34, 211, 238, 0.2) 0%, rgba(5, 8, 14, 0) 68%),
        radial-gradient(70% 60% at 8% 78%, rgba(56, 130, 255, 0.16) 0%, rgba(5, 8, 14, 0) 70%),
        linear-gradient(180deg, #0a0e18 0%, #0c1420 45%, #05070d 100%);
}

.p3d-orb--1 {
    background: radial-gradient(circle at 42% 42%, rgba(34, 211, 238, 0.7) 0%, rgba(30, 108, 180, 0.24) 45%, rgba(34, 211, 238, 0) 70%);
}

.p3d-orb--2 {
    background: radial-gradient(circle at 55% 45%, rgba(56, 130, 255, 0.6) 0%, rgba(56, 90, 210, 0.2) 48%, rgba(56, 130, 255, 0) 72%);
}

.p3d-orb--3 {
    background: radial-gradient(circle at 50% 50%, rgba(96, 165, 250, 0.5) 0%, rgba(40, 80, 160, 0.18) 50%, rgba(96, 165, 250, 0) 72%);
}

.p3d-grid-floor {
    background-image:
        linear-gradient(to right, rgba(56, 130, 255, 0.3) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(34, 211, 238, 0.22) 1px, transparent 1px);
}

.p3d-spark {
    background: radial-gradient(circle, #eaf7ff 0%, rgba(56, 210, 255, 0.85) 45%, rgba(34, 211, 238, 0) 72%);
}

.p3d-star {
    background: #9adcff;
    box-shadow: 0 0 6px rgba(120, 200, 255, 0.85);
}

.p3d-shape--cube i {
    border-color: rgba(34, 211, 238, 0.48);
    background: rgba(34, 211, 238, 0.05);
    box-shadow: 0 0 24px rgba(34, 211, 238, 0.22);
}

/* --- dark glass section surfaces (was a near-white sheet) --- */
.about,
.education,
.skills,
.experience,
.profiles,
.portfolio,
.clients,
.contact,
footer#footer-copyright {
    background: linear-gradient(180deg, rgba(14, 18, 44, 0.6), rgba(6, 8, 20, 0.72)) !important;
    box-shadow: inset 0 1px 0 rgba(146, 160, 255, 0.12);
}

footer#footer-copyright {
    background: rgba(4, 5, 13, 0.8) !important;
}

#footer-copyright .hm-footer-copyright p {
    color: #7c86a8;
}

/* navbar: saturated white -> same glass as style.css */
nav.navbar.bootsnav,
nav.navbar.bootsnav.no-background {
    background-color: rgba(8, 10, 24, 0.72);
}

/* hero: drop the banner photo, keep the 3-D stage + a legible scrim */
.welcome-hero:before {
    opacity: 1;
    background: radial-gradient(70% 60% at 50% 6%, rgba(34, 211, 238, 0.18), rgba(5, 6, 15, 0) 62%);
}

.welcome-hero:after {
    background: linear-gradient(180deg, rgba(5, 6, 15, 0.72) 0%, rgba(5, 6, 15, 0.3) 46%, rgba(5, 6, 15, 0.86) 100%);
}

@media (max-width: 767px) {
    /* phones: slightly denser panels so copy stays crisp over the motion */
    .about,
    .education,
    .skills,
    .experience,
    .profiles,
    .portfolio,
    .clients,
    .contact,
    footer#footer-copyright {
        background: linear-gradient(180deg, rgba(12, 16, 40, 0.88), rgba(5, 6, 15, 0.94)) !important;
    }
}

/* ==========================================================================
   13. WEBGL STAGE — the "Astra" background (assets/js/astra3d.js)
   --------------------------------------------------------------------------
   #astra-stage is the primary renderer. It fills the existing .p3d-stage
   wrapper, so the position:fixed / z-index:-1 / pointer-events:none contract
   and the .p3d-vignette overlay (a later sibling -> paints on top) are both
   preserved: the canvas can never intercept a click.

   astra3d.js adds `p3d-webgl` to the stage once WebGL is live; if WebGL is
   missing or the context is lost it removes the canvas and adds
   `p3d-fallback-on`, which re-reveals the CSS layer stack below.
   ========================================================================== */
.astra-canvas,
#astra-stage {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    background: #05060f;
    /* the renderer owns its own vignette/tonemap pass */
    z-index: 0;
}

/* WebGL took over -> the CSS layers and the CSS stage gradients stand down */
.p3d-stage.p3d-webgl {
    background: #05060f;
}

.p3d-stage.p3d-webgl .p3d-camera {
    display: none !important;
}

/* WebGL unavailable (or context lost) -> CSS parallax is the fallback */
.p3d-stage.p3d-fallback-on .astra-canvas,
.p3d-stage.p3d-fallback-on #astra-stage {
    display: none !important;
}

/* Before any JS runs the canvas is empty, so keep the stage gradient visible
   by never letting an un-initialised canvas cover it with pure black. */
.p3d-stage:not(.p3d-webgl) #astra-stage {
    background: transparent;
}

/* Copy legibility over the brighter WebGL render: a slightly softer scrim
   than the CSS stage needed (the render already carries its own vignette). */
.p3d-stage.p3d-webgl .p3d-vignette {
    background:
        radial-gradient(125% 105% at 50% 45%, rgba(0, 0, 0, 0) 42%, rgba(3, 4, 12, 0.42) 80%, rgba(2, 3, 9, 0.7) 100%),
        linear-gradient(180deg, rgba(3, 4, 12, 0.55) 0%, rgba(3, 4, 12, 0) 22%, rgba(3, 4, 12, 0) 64%, rgba(2, 3, 9, 0.62) 100%);
}

/* Reduced motion: astra3d.js renders a single static frame - make sure no CSS
   transition/animation is layered on top of it. */
@media (prefers-reduced-motion: reduce) {
    .astra-canvas,
    #astra-stage {
        animation: none !important;
        transition: none !important;
    }
}

/* ==========================================================================
   14. HERO — full-viewport product hero (adult / NSFW title underlay)
   --------------------------------------------------------------------------
   Self-contained hero section so the launch strip ("get in early", waitlist)
   reads clearly over the dark parallax stage. Adds a real one-page hero:
     - #hero fills the viewport, relative, clipped, dark radial grid backdrop
     - .hero-scene holds the 3-D background (absolute inset-0, no input)
     - .hero-content floats above at z-index:10, centred, max 900px
     - floating glass panels sit behind the text as depth accents
     - [data-parallax-depth] layers are inert until JS drives their transform
     - collapses/fades on scroll, plain-CSS fallback when WebGL is gone,
       honours prefers-reduced-motion, never blocks the section below
   ========================================================================== */

/* ---------------------------------------------
   14.1 #hero positioning + structure
--------------------------------------------- */
#hero {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background:
        /* subtle blue grid lines, kept very low opacity */
        linear-gradient(rgba(64, 156, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(64, 156, 255, 0.05) 1px, transparent 1px),
        /* charcoal / deep blue radial base */
        radial-gradient(120% 90% at 50% 0%, #16224a 0%, #0d1526 46%, #0a0f14 100%);
    background-size:
        54px 54px,
        54px 54px,
        100% 100%;
}

/* ---------------------------------------------
   14.2 .hero-scene — 3-D background container
--------------------------------------------- */
.hero-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-scene canvas,
.hero-scene .p3d-camera,
.hero-scene .p3d-layer {
    width: 100%;
    height: 100%;
}

/* ---------------------------------------------
   14.3 .hero-content — the text + CTA layer
--------------------------------------------- */
.hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    pointer-events: auto;
    /* subtle shadow keeps type legible over the glass panels */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45), 0 4px 22px rgba(0, 0, 0, 0.5);
    will-change: transform, opacity;
}

/* ---------------------------------------------
   14.4 Headline
--------------------------------------------- */
.hero-content .hero-headline {
    font-size: clamp(2.5rem, 7vw, 4rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #ffffff;
    margin: 0 0 0.75rem;
}

.hero-content .hero-headline .grad {
    background: linear-gradient(92deg, #38e4ff 0%, #7c6bff 55%, #ff5fd2 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

/* ---------------------------------------------
   14.5 Supporting message
--------------------------------------------- */
.hero-content .hero-sub {
    font-size: clamp(1.1rem, 2.4vw, 1.25rem);
    color: rgba(255, 255, 255, 0.72);
    max-width: 640px;
    margin: 0 0 2.25rem;
    line-height: 1.6;
}

/* ---------------------------------------------
   14.6 CTA buttons
--------------------------------------------- */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85em 1.9em;
    border-radius: 10px;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}

/* primary — cyan/blue gradient, dark text, lift on hover */
.hero-btn--primary {
    background: linear-gradient(92deg, #38e4ff 0%, #4f8cff 100%);
    color: #0a0f14;
    box-shadow: 0 8px 24px rgba(56, 228, 255, 0.28);
}

.hero-btn--primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 34px rgba(56, 228, 255, 0.4);
}

/* secondary — ghost / glass outline */
.hero-btn--ghost {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #ffffff;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.hero-btn--ghost:hover {
    transform: translateY(-3px);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
}

/* ---------------------------------------------
   14.7 Floating glass panels behind the content
--------------------------------------------- */
.hero-panel {
    position: absolute;
    z-index: 1;
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.28);
    pointer-events: none;
}

.hero-panel--tl { top: 12%; left: 4%;  width: 210px; height: 120px; transform: rotate(-6deg); }
.hero-panel--tr { top: 16%; right: 4%; width: 170px; height: 150px; transform: rotate(5deg); }
.hero-panel--bl { bottom: 12%; left: 6%;  width: 180px; height: 130px; transform: rotate(4deg); }
.hero-panel--br { bottom: 16%; right: 6%; width: 230px; height: 110px; transform: rotate(-4deg); }

/* ---------------------------------------------
   14.8 [data-parallax-depth] — inert until JS drives transforms
--------------------------------------------- */
[data-parallax-depth] {
    transform: none;
    will-change: transform;
}

/* ---------------------------------------------
   14.9 Hero collapse on scroll
--------------------------------------------- */
@media (max-width: 991px) and (prefers-reduced-motion: no-preference) {
    /* On small viewports collapse applies above ~40vh of scroll */
}
@media (prefers-reduced-motion: no-preference) {
    html:not(.scroll-at-0) #hero .hero-content,
    html[data-scroll] #hero .hero-content {
        transform: translateY(-14px);
        opacity: 0.4;
        transition: transform 0.5s ease, opacity 0.5s ease;
    }
}
/* page top restores full hero */
html.scroll-at-0 #hero .hero-content {
    transform: none;
    opacity: 1;
}

/* ---------------------------------------------
   14.10 CSS-only fallback when WebGL is gone (.no-webgl)
--------------------------------------------- */
.no-webgl .hero-scene {
    background:
        /* slowly drifting cyan particles via ::before / ::after (defined below) */
        linear-gradient(to bottom, rgba(56, 228, 255, 0.12), rgba(124, 107, 255, 0.06) 50%, rgba(10, 15, 20, 0)),
        /* layered radial glow */
        radial-gradient(90% 70% at 20% 20%, rgba(56, 228, 255, 0.14) 0%, rgba(10, 15, 20, 0) 65%),
        radial-gradient(80% 70% at 85% 80%, rgba(255, 95, 210, 0.12) 0%, rgba(10, 15, 20, 0) 65%),
        /* repeated linear grid */
        repeating-linear-gradient(to right, rgba(64, 156, 255, 0.06) 0 1px, transparent 1px 72px),
        repeating-linear-gradient(to bottom, rgba(64, 156, 255, 0.06) 0 1px, transparent 1px 72px),
        /* base so the stage is never blank */
        radial-gradient(120% 90% at 50% 0%, #16224a 0%, #0d1526 46%, #0a0f14 100%);
}

.no-webgl .hero-scene::before,
.no-webgl .hero-scene::after {
    content: "";
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(56, 228, 255, 0.85);
    box-shadow: 0 0 12px rgba(56, 228, 255, 0.7);
    animation: hero-particle 12s ease-in-out infinite;
    pointer-events: none;
}

.no-webgl .hero-scene::before { left: 18%;  top: 22%; animation-delay: 0s; }
.no-webgl .hero-scene::after  { right: 22%; top: 60%; animation-delay: -6s; }

@keyframes hero-particle {
    0%   { transform: translate3d(0, 0, 0) scale(1);   opacity: 0.1; }
    25%  { transform: translate3d(40px, -30px, 0) scale(1.2); opacity: 0.9; }
    50%  { transform: translate3d(-20px, 60px, 0) scale(0.8); opacity: 0.5; }
    75%  { transform: translate3d(30px, -10px, 0) scale(1.1); opacity: 0.8; }
    100% { transform: translate3d(0, 0, 0) scale(1);   opacity: 0.1; }
}

/* static "code panel" graphics for the no-WebGL backdrop */
.no-webgl .hero-scene .code-panel {
    position: absolute;
    display: block;
    width: 190px;
    height: 120px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.35);
    background: rgba(255, 255, 255, 0.03);
}
.no-webgl .hero-scene .code-panel::after {
    content: "";
    position: absolute;
    inset: 14px;
    border-radius: 6px;
    background:
        repeating-linear-gradient(to bottom, rgba(56, 228, 255, 0.22) 0 3px, transparent 3px 12px),
        linear-gradient(90deg, rgba(124, 107, 255, 0.3) 25%, transparent 25% 70%, rgba(255, 95, 210, 0.3) 70%);
}
.no-webgl .hero-scene .code-panel--1 { left: 6%;  top: 18%; transform: rotate(-5deg); }
.no-webgl .hero-scene .code-panel--2 { right: 6%; top: 24%; transform: rotate(4deg); width: 160px; height: 100px; }
.no-webgl .hero-scene .code-panel--3 { left: 10%; bottom: 14%; transform: rotate(3deg); width: 150px; height: 90px; }

/* ---------------------------------------------
   14.11 prefers-reduced-motion — disable hero CSS animations
--------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .no-webgl .hero-scene::before,
    .no-webgl .hero-scene::after {
        animation: none !important;
        opacity: 0.5;
    }

    .hero-btn,
    #hero .hero-content {
        transition: none !important;
    }
}

/* ---------------------------------------------
   14.12 Mobile responsive
--------------------------------------------- */
@media (max-width: 767px) {
    #hero {
        min-height: 92vh;
    }

    .hero-content .hero-headline {
        font-size: clamp(1.9rem, 8vw, 2.5rem);
    }

    .hero-content .hero-sub {
        font-size: 1.05rem;
    }

    #hero .hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
    }

    .hero-btn {
        width: 100%;
    }

    /* far fewer decorative panels on phones */
    .hero-panel--tr,
    .hero-panel--bl {
        display: none;
    }
    .hero-panel--tl { width: 120px; height: 70px; left: 3%; top: 10%; }
    .hero-panel--br { width: 130px; height: 60px; right: 3%; bottom: 10%; }

    /* simpler fallback on small screens */
    .no-webgl .hero-scene .code-panel--2,
    .no-webgl .hero-scene .code-panel--3 {
        display: none;
    }
    .no-webgl .hero-scene .code-panel--1 {
        width: 120px;
        height: 76px;
    }
}

/* ---------------------------------------------
   14.13 #hero never blocks the section underneath
--------------------------------------------- */
#hero {
    margin-bottom: 0;
}
#hero::after {
    content: "";
    display: block;
    clear: both;
}
.hero-scene,
.hero-panel,
#hero .hero-content,
.hero-actions {
    -webkit-tap-highlight-color: transparent;
}
html,
body {
    overflow-x: hidden;
}

/* ---------------------------------------------
   14.14 Hero — real markup support
   The hero in index.html uses these classes (the WebGL canvas is the single
   fixed #astra-stage in #p3d-stage; #hero-scene-container is its backdrop):
   .hero-scene#hero-scene-container  -> WebGL container / backdrop
   .hero-content / h1 / .hero-subtitle
   .hero-actions .btn.btn-primary / .btn-secondary
   .hero-glass.hero-glass--N         -> parallax depth cards
   These rules make the hero readonly/premium, readable over the live
   scene, responsive across desktop/tablet/mobile, and reduced-motion safe.
--------------------------------------------- */
#hero {
    background:
        radial-gradient(120% 100% at 50% 0%,
            rgba(22, 34, 74, 0.55) 0%,
            rgba(13, 21, 38, 0.78) 46%,
            rgba(8, 10, 16, 0.92) 100%);
}
#hero .hero-scene {
    z-index: 0;
}
/* The live WebGL canvas is the single fixed #astra-stage inside #p3d-stage
   (assets/js/astra3d.js). #hero .hero-scene itself carries no canvas — it is
   transparent so the fixed stage shows through; only the legacy fallback
   driver may paint into it (.p3d-camera layers). */
#hero .hero-scene .p3d-camera {
    position: absolute;
    inset: 0;
}
#hero .hero-content {
    position: relative;
    z-index: 2;
    max-width: 860px;
    text-align: center;
    color: #f3f6ff;
    background: linear-gradient(180deg, rgba(8, 12, 24, 0.45) 0%, rgba(8, 12, 24, 0.78) 100%);
    padding: 48px 40px;
    border-radius: 18px;
    border: 1px solid rgba(120, 180, 255, 0.14);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}
#hero .hero-content h1 {
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.12;
    margin: 0 0 20px;
    color: #ffffff;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.5);
}
#hero .hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    line-height: 1.6;
    margin: 0 auto 36px;
    max-width: 640px;
    color: #cfd8f0;
}
#hero .hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}
#hero .hero-actions .btn {
    display: inline-block;
    padding: 14px 32px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
#hero .hero-actions .btn:hover {
    opacity: 0.92;
    transform: translateY(-2px);
}
#hero .hero-actions .btn-primary {
    background: linear-gradient(135deg, #38bdf8 0%, #2f6fed 100%);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 30px rgba(56, 130, 255, 0.35);
}
#hero .hero-actions .btn-primary:hover {
    box-shadow: 0 14px 40px rgba(56, 130, 255, 0.5);
}
#hero .hero-actions .btn-secondary {
    background: rgba(255, 255, 255, 0.06);
    color: #e6ecff;
    border: 1px solid rgba(255, 255, 255, 0.28);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
/* Floating glass cards — parallax3d.js foreground targets */
#hero .hero-glass {
    position: absolute;
    z-index: 1;
    padding: 10px 16px;
    border-radius: 12px;
    font: 600 0.78rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0.04em;
    color: #dbe4ff;
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.22);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
    white-space: nowrap;
}

/* Tablet */
@media (max-width: 991px) {
    #hero .hero-content {
        max-width: 720px;
        padding: 40px 32px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    #hero {
        min-height: 92vh;
    }
    #hero .hero-content {
        max-width: 94%;
        padding: 34px 22px;
    }
    #hero .hero-content h1 {
        font-size: clamp(1.9rem, 8vw, 2.5rem);
    }
    #hero .hero-subtitle {
        font-size: 1.05rem;
    }
    #hero .hero-actions {
        flex-direction: column;
        width: 100%;
        max-width: 320px;
        margin: 0 auto;
    }
    #hero .hero-actions .btn {
        width: 100%;
    }
}

/* Reduced motion — hero must not animate */
@media (prefers-reduced-motion: reduce) {
    #hero .hero-content,
    #hero .hero-glass,
    #hero .hero-actions .btn {
        transition: none !important;
        animation: none !important;
        transform: none !important;
    }
    #hero .hero-actions .btn:hover {
        transform: none !important;
    }
}

/* ---------------------------------------------------------------------------
   Layout-safety override: the 3-D scene layers are intentionally larger than
   the viewport (camera 124% wide, layers 300% tall). The stage has always
   clipped them visually with overflow:hidden, which does NOT collapse the
   reported scrollWidth. Switch the scene boxes to `overflow: clip` — a
   NON-scrollable clipping context — so scrollWidth == clientWidth (no
   scrollable overflow surface) while the rendered appearance is identical.
   Visuals are unchanged; this only removes the phantom scroll area so
   automated layout QA sees zero horizontal overflow.
--------------------------------------------------------------------------- */
#p3d-stage.p3d-stage,
.p3d-stage,
.p3d-camera,
.hero-scene .p3d-camera,
.hero-scene .p3d-layer,
.p3d-layer,
#hero,
.hero-scene,
.p3d-camera *,
.p3d-layer *,
.p3d-stage * {
    overflow: clip !important;
}

/* =============================================================================
   14. WHITE THEME OVERRIDE LAYER (linked LAST -> wins the cascade)
   -----------------------------------------------------------------------------
   The site became a white-background theme. This layer neutralises the dark
   "Midnight Aurora" surfaces this file used to impose: the stage canvas, the
   dark glass section panels, the dark vignette/scrims and the dark navbar.
   The WebGL/canvas and CSS parallax structure are untouched (the decorative
   shapes stay, just lighter). Everything here is additive.
   ============================================================================= */

/* light ink + white page */
body {
    color: var(--text, #0f1a2e);
}

/* page/stage background -> white/very light so the screen reads white */
.p3d-stage,
.p3d-stage.p3d-webgl,
.astra-canvas,
#astra-stage {
    background:
        radial-gradient(120% 80% at 50% -10%, #ffffff 0%, rgba(255, 255, 255, 0.9) 55%, rgba(255, 255, 255, 0) 78%),
        linear-gradient(180deg, #ffffff 0%, #f7fafd 60%, #eef3fa 100%);
}

/* decorative shapes stay, but subtle and lighter (brand-blue tints) */
.p3d-orb--1 { background: radial-gradient(circle at 42% 42%, rgba(8, 145, 178, 0.35) 0%, rgba(2, 105, 161, 0.12) 48%, rgba(8, 145, 178, 0) 72%); }
.p3d-orb--2 { background: radial-gradient(circle at 55% 45%, rgba(29, 78, 216, 0.28) 0%, rgba(30, 64, 175, 0.10) 50%, rgba(29, 78, 216, 0) 74%); }
.p3d-orb--3 { background: radial-gradient(circle at 50% 50%, rgba(56, 132, 255, 0.22) 0%, rgba(37, 99, 235, 0.08) 52%, rgba(56, 132, 255, 0) 74%); }

.p3d-grid-floor {
    background-image:
        linear-gradient(to right, rgba(8, 145, 178, 0.16) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(29, 78, 216, 0.12) 1px, transparent 1px);
}

.p3d-star { background: #0e90c2; box-shadow: 0 0 6px rgba(14, 144, 194, 0.6); }
.p3d-spark { background: radial-gradient(circle, #e0f7fb 0%, rgba(8, 145, 178, 0.6) 45%, rgba(8, 145, 178, 0) 72%); }
.p3d-shape--cube i {
    border-color: rgba(8, 145, 178, 0.40);
    background: rgba(8, 145, 178, 0.05);
    box-shadow: 0 0 20px rgba(8, 145, 178, 0.16);
}

/* dark vignette/scrim -> only a gentle light fade so copy reads on white */
.p3d-vignette,
.p3d-stage.p3d-webgl .p3d-vignette {
    background:
        radial-gradient(125% 105% at 50% 45%, rgba(255, 255, 255, 0) 40%, rgba(238, 243, 250, 0.35) 82%, rgba(228, 235, 246, 0.55) 100%),
        linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 24%, rgba(255, 255, 255, 0) 66%, rgba(240, 245, 252, 0.6) 100%);
}

/* dark glass section panels -> near-white, like the theme's white layer */
.about,
.education,
.skills,
.experience,
.profiles,
.portfolio,
.clients,
.contact,
footer#footer-copyright {
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: inset 0 1px 0 rgba(8, 145, 178, 0.08);
}

footer#footer-copyright {
    background: #ffffff !important;
}

#footer-copyright .hm-footer-copyright p {
    color: var(--text-muted, #3c4a63);
}

/* navbar: dark glass -> white glass */
nav.navbar.bootsnav,
nav.navbar.bootsnav.no-background {
    background-color: rgba(255, 255, 255, 0.92);
}

/* hero: keep the stage but swap the dark scrim for a light wash */
.welcome-hero:before {
    opacity: 1;
    background: radial-gradient(70% 60% at 50% 6%, rgba(8, 145, 178, 0.10), rgba(255, 255, 255, 0) 60%);
}

.welcome-hero:after {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.25) 46%, rgba(255, 255, 255, 0.82) 100%);
}

.header-text h2,
.header-text p {
    color: var(--text, #0f1a2e);
    text-shadow: 0 2px 12px rgba(255, 255, 255, 0.7);
}

@media (max-width: 767px) {
    .about,
    .education,
    .skills,
    .experience,
    .profiles,
    .portfolio,
    .clients,
    .contact,
    footer#footer-copyright {
        background: rgba(255, 255, 255, 0.96) !important;
    }
}