/*
 * JARVIS GPU SAFE v1
 * Heavy decorative background layers stay visible,
 * but no longer repaint continuously.
 */

.background-layer .digital-wallpaper::before,
.background-layer .aurora,
.background-layer .light-beams,
.background-layer .data-streams,
.background-layer .mesh-grid,
.background-layer .scanlines {
    animation: none !important;
}

/* Keep the visual look, reduce giant blur cost a bit. */
.background-layer .aurora {
    filter: blur(48px) !important;
}

.background-layer .light-beams {
    filter: blur(10px) !important;
}

@media (max-width: 980px), (pointer: coarse) {
    .background-layer .aurora {
        filter: blur(36px) !important;
        opacity: .22 !important;
    }

    .background-layer .light-beams {
        filter: blur(6px) !important;
        opacity: .20 !important;
    }
}

/* =========================================================
   JARVIS SAFE GLASS v2
   Keep the glass look without real-time backdrop blur.
   Animations are NOT disabled here.
   ========================================================= */

.nav-shell,
.mobile-panel,
.hero-badges span,
.eyebrow,
.stat-card,
.glass-card,
.terminal-card,
.floating-mini,
.marquee-band,
.screen-caption,
.hero-float-card,
.direction-media span,
.service-group-media span,
.process-visual-card span,
.site-footer {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* Header glass */
.nav-shell {
    background:
      linear-gradient(135deg,
        rgba(5, 18, 36, .96),
        rgba(2, 8, 20, .93)) !important;
}

.mobile-panel {
    background: rgba(2, 8, 20, .97) !important;
}

/* Small glass pills */
.hero-badges span,
.eyebrow {
    background:
      linear-gradient(135deg,
        rgba(8, 35, 53, .92),
        rgba(4, 18, 34, .90)) !important;
}

/* Main cards */
.stat-card,
.glass-card {
    background:
      linear-gradient(160deg,
        rgba(8, 22, 48, .96),
        rgba(4, 10, 24, .94)) !important;
}

/* Floating glass */
.terminal-card,
.floating-mini,
.screen-caption,
.hero-float-card {
    background:
      linear-gradient(145deg,
        rgba(5, 18, 37, .96),
        rgba(2, 8, 20, .94)) !important;
}

/* Running strip stays animated */
.marquee-band {
    background: rgba(2, 8, 20, .95) !important;
}

/* Image labels */
.direction-media span,
.service-group-media span,
.process-visual-card span {
    background: rgba(2, 8, 20, .94) !important;
}

/* Footer */
.site-footer {
    background:
      linear-gradient(145deg,
        rgba(7, 18, 34, .95),
        rgba(3, 9, 20, .94)) !important;
}

/* =========================================================
   JARVIS PERFORMANCE V3
   Pause animations only when sections are outside viewport.
   Visible animations remain untouched.
   ========================================================= */

.jarvis-offscreen,
.jarvis-offscreen *,
.jarvis-offscreen::before,
.jarvis-offscreen::after,
.jarvis-offscreen *::before,
.jarvis-offscreen *::after {
    animation-play-state: paused !important;
}

/* Hint browser which animated elements should stay compositor-friendly */


/* =========================================================
   JARVIS CRISP MOTION
   Keep movement, do not transform text in 3D/rotation.
   ========================================================= */

.hero-screen-frame {
    transform-style: flat;
}


.screen-image,
.hero-float-card img {
    image-rendering: auto;
}


/* JARVIS FLOAT TEXT CRISP */
.hero-float-1,
.hero-float-2,
.hero-float-3 {
    transform: none;
}

/* =========================================================
   JARVIS FLOAT CARDS — compositor smooth
   ONLY the 3 hero floating cards.
   No rotation. Text stays flat.
   ========================================================= */

.hero-float-card {
    will-change: transform;
}

.hero-float-1 {
    animation: jarvisFloatSmoothA 6s ease-in-out infinite !important;
}

.hero-float-2 {
    animation: jarvisFloatSmoothB 7s ease-in-out infinite !important;
}

.hero-float-3 {
    animation: jarvisFloatSmoothC 8s ease-in-out infinite !important;
}

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

@keyframes jarvisFloatSmoothB {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(16px); }
}

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

/* =========================================================
   JARVIS HERO SMOOTH V1
   ONLY hero showcase motion
   ========================================================= */

/* BIG CENTRAL SCREEN */
.hero-screen-frame {
    transform-style: flat !important;
    will-change: transform;
    backface-visibility: hidden;
    animation: jarvisHeroScreen60 8s ease-in-out infinite !important;
}

/* THREE FLOATING CARDS */
.hero-float-card {
    will-change: transform;
    backface-visibility: hidden;
}

.hero-float-1 {
    animation: jarvisHeroFloatA60 6s ease-in-out infinite !important;
}

.hero-float-2 {
    animation: jarvisHeroFloatB60 7s ease-in-out infinite !important;
}

.hero-float-3 {
    animation: jarvisHeroFloatC60 8s ease-in-out infinite !important;
}

/* ROTATING ORBITS — remove expensive realtime filter */
.hero-orbit-line {
    filter: none !important;
    will-change: transform;
    backface-visibility: hidden;
    box-shadow: 0 0 18px rgba(84,234,255,.18);
}

.line-one {
    animation: jarvisOrbitCW60 28s linear infinite !important;
}

.line-two {
    animation: jarvisOrbitCCW60 18s linear infinite !important;
}

/* SCANNING LINE */
.hero-scan-glow {
    will-change: transform, opacity;
    backface-visibility: hidden;
    animation: jarvisScan60 4.6s ease-in-out infinite !important;
}

/* compositor-only keyframes */

@keyframes jarvisHeroScreen60 {
    0%,100% {
        transform: translate3d(0,0,0);
    }
    50% {
        transform: translate3d(0,-10px,0);
    }
}

@keyframes jarvisHeroFloatA60 {
    0%,100% {
        transform: translate3d(0,0,0);
    }
    50% {
        transform: translate3d(0,-14px,0);
    }
}

@keyframes jarvisHeroFloatB60 {
    0%,100% {
        transform: translate3d(0,0,0);
    }
    50% {
        transform: translate3d(0,16px,0);
    }
}

@keyframes jarvisHeroFloatC60 {
    0%,100% {
        transform: translate3d(0,0,0);
    }
    50% {
        transform: translate3d(0,-14px,0);
    }
}

@keyframes jarvisOrbitCW60 {
    from {
        transform: translate3d(0,0,0) rotate(0deg);
    }
    to {
        transform: translate3d(0,0,0) rotate(360deg);
    }
}

@keyframes jarvisOrbitCCW60 {
    from {
        transform: translate3d(0,0,0) rotate(0deg);
    }
    to {
        transform: translate3d(0,0,0) rotate(-360deg);
    }
}

@keyframes jarvisScan60 {
    0%,100% {
        opacity: .15;
        transform: translate3d(0,0,0);
    }

    48%,52% {
        opacity: .86;
        transform: translate3d(0,330px,0);
    }
}

/* =========================================================
   JARVIS SECRET HINT
   Tiny teaser in Earth section only.
   ========================================================= */

.jarvis-secret-hint {
    position: absolute;
    left: 28px;
    bottom: 26px;
    z-index: 20;

    width: 44px;
    height: 44px;

    padding: 0;
    border: 1px solid rgba(255, 214, 58, .52);
    border-radius: 999px;

    background:
        linear-gradient(145deg,
            rgba(42, 32, 4, .94),
            rgba(10, 13, 19, .96));

    color: #ffd83d;

    display: flex;
    align-items: center;

    overflow: hidden;
    cursor: pointer;

    box-shadow:
        0 0 0 1px rgba(255, 216, 61, .05),
        0 0 22px rgba(255, 205, 35, .12);

    transition:
        width .34s cubic-bezier(.2,.8,.2,1),
        border-color .25s ease,
        background .25s ease;

    -webkit-tap-highlight-color: transparent;
}

.jarvis-secret-hint__icon {
    position: relative;

    flex: 0 0 42px;
    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    font-size: 23px;
    line-height: 1;
    font-weight: 600;

    color: #ffe45e;

    animation: jarvisSecretPulse 1.9s ease-in-out infinite;
}

.jarvis-secret-hint__text {
    opacity: 0;
    transform: translateX(-5px);

    padding-right: 18px;

    white-space: nowrap;

    color: #ffe66d;
    letter-spacing: .16em;
    font-size: 11px;
    font-weight: 600;

    transition:
        opacity .22s ease,
        transform .32s ease;
}

.jarvis-secret-hint:hover,
.jarvis-secret-hint:focus-visible,
.jarvis-secret-hint.is-open {
    width: 132px;
    border-color: rgba(255, 224, 84, .88);

    background:
        linear-gradient(145deg,
            rgba(55, 40, 3, .97),
            rgba(11, 14, 21, .97));
}

.jarvis-secret-hint:hover .jarvis-secret-hint__text,
.jarvis-secret-hint:focus-visible .jarvis-secret-hint__text,
.jarvis-secret-hint.is-open .jarvis-secret-hint__text {
    opacity: 1;
    transform: translateX(0);
}

.jarvis-secret-hint:focus-visible {
    outline: 1px solid rgba(255, 230, 105, .85);
    outline-offset: 4px;
}

@keyframes jarvisSecretPulse {
    0%, 100% {
        opacity: .72;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.12);
    }
}

@media (max-width: 680px) {
    .jarvis-secret-hint {
        left: 18px;
        bottom: 18px;
    }
}

/* =========================================================
   JARVIS SECRET HINT — STRONG PULSE
   ========================================================= */

.jarvis-secret-hint {
    animation: jarvisSecretHaloStrong 1.45s ease-in-out infinite;
}

.jarvis-secret-hint__icon {
    color: #ffe45e !important;
    animation: jarvisSecretPulseStrong 1.45s ease-in-out infinite !important;
}

@keyframes jarvisSecretHaloStrong {
    0%, 100% {
        border-color: rgba(255, 210, 40, .46);
        box-shadow:
            0 0 0 0 rgba(255, 210, 40, 0),
            0 0 12px rgba(255, 200, 20, .12);
    }

    50% {
        border-color: rgba(255, 230, 80, 1);
        box-shadow:
            0 0 0 7px rgba(255, 210, 40, .10),
            0 0 28px rgba(255, 195, 20, .55),
            0 0 52px rgba(255, 175, 0, .18);
    }
}

@keyframes jarvisSecretPulseStrong {
    0%, 100% {
        opacity: .72;
        transform: scale(1);
        text-shadow:
            0 0 4px rgba(255, 220, 50, .35);
    }

    50% {
        opacity: 1;
        transform: scale(1.24);
        text-shadow:
            0 0 7px #ffe45e,
            0 0 16px rgba(255, 205, 30, .95),
            0 0 28px rgba(255, 175, 0, .65);
    }
}


/* =========================================================
   JARVIS SECRET TERMINAL V2
   ========================================================= */

.jarvis-secret-terminal {
    position: absolute;
    left: 28px;
    bottom: 82px;
    z-index: 19;

    width: min(520px, calc(100% - 56px));

    padding: 16px;

    border: 1px solid rgba(255, 219, 67, .42);
    border-radius: 22px;

    background:
        radial-gradient(circle at 8% 0%,
            rgba(255, 205, 32, .10),
            transparent 210px),
        linear-gradient(145deg,
            rgba(16, 17, 18, .98),
            rgba(5, 8, 14, .98));

    box-shadow:
        0 24px 70px rgba(0,0,0,.55),
        0 0 34px rgba(255, 194, 21, .12),
        inset 0 1px rgba(255,255,255,.05);

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transform-origin: left bottom;
    transform: translateY(10px) scale(.94);

    transition:
        opacity .24s ease,
        transform .34s cubic-bezier(.2,.8,.2,1),
        visibility .24s;

    overflow: hidden;
}

.jarvis-secret-terminal.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.jarvis-secret-terminal__head {
    display: flex;
    align-items: center;
    gap: 9px;

    padding-bottom: 12px;
    margin-bottom: 12px;

    border-bottom: 1px solid rgba(255, 219, 67, .16);

    color: #ffe46a;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: .15em;
}

.jarvis-secret-terminal__dot {
    width: 7px;
    height: 7px;
    flex: 0 0 7px;

    border-radius: 999px;
    background: #ffe45e;

    box-shadow:
        0 0 8px #ffe45e,
        0 0 16px rgba(255, 197, 24, .8);
}

.jarvis-secret-terminal__status {
    margin-left: auto;
    color: rgba(255, 230, 120, .54);
}

.jarvis-secret-terminal__binary {
    max-height: 135px;
    overflow: hidden;

    margin: 0;
    padding: 12px 13px;

    border: 1px solid rgba(255, 214, 58, .12);
    border-radius: 14px;

    background: rgba(255, 211, 53, .025);

    color: rgba(255, 222, 90, .58);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size: 9px;
    line-height: 1.55;
    letter-spacing: .04em;

    white-space: pre-wrap;
    word-break: break-all;
}

.jarvis-secret-terminal__decode {
    margin-top: 14px;

    opacity: 0;
    transform: translateY(6px);

    transition:
        opacity .35s ease .28s,
        transform .35s ease .28s;
}

.jarvis-secret-terminal.is-open
.jarvis-secret-terminal__decode {
    opacity: 1;
    transform: translateY(0);
}

.jarvis-secret-terminal__decode span {
    display: block;

    margin-bottom: 7px;

    color: #ffd83d;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .18em;
}

.jarvis-secret-terminal__decode p {
    margin: 0;

    color: #f4f0d3;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
}

.jarvis-secret-terminal__decode strong {
    color: #ffe15b;
    font-weight: 600;
}

@media (max-width: 680px) {
    .jarvis-secret-terminal {
        left: 18px;
        bottom: 72px;
        width: calc(100% - 36px);
        padding: 13px;
    }

    .jarvis-secret-terminal__binary {
        max-height: 110px;
        font-size: 8px;
    }

    .jarvis-secret-terminal__decode p {
        font-size: 13px;
    }
}


/* SECRET BINARY — show entire encoded message */
.jarvis-secret-terminal__binary {
    max-height: 190px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    user-select: text !important;
}
