/* =========================================
   ABOUT PAGE STYLES
   ========================================= */

/* VIDEO INTRO OVERLAY (From Service Page Logic) */
.about-intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 1.0s ease-out, visibility 1.0s;
}

.about-intro-overlay.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.about-intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.about-intro-skip {
    position: absolute;
    bottom: 30px;
    right: 40px;
    font-family: var(--font-display);
    font-size: 12px;
    color: var(--rift-text);
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0.7;
    cursor: pointer;
    z-index: 10000;
}

@media (max-width: 1100px) and (orientation: portrait) {

    /* Mobile now has its own video */
    .about-intro-overlay {
        display: flex;
    }

    .about-main {
        padding-top: 70px;
        /* Reduced from 100px */
    }

    .about-section {
        margin-bottom: 120px;
        /* Reduced from 150px */
    }
}

.rift-about {
    background-color: var(--rift-black, #050508);
    background-image: url('img/bg-tech-network.webp');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    color: var(--rift-text, #E0E0E0);
    overflow-x: hidden;
    font-family: var(--font-ui, 'Roboto', sans-serif);
    position: relative;
    /* Context for overlay */
}

/* Global Dark Overlay for readability */
.rift-about::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(5, 5, 8, 0.6);
    /* Adjusted opacity for global use */
    z-index: 0;
    pointer-events: none;
}

.about-main {
    padding-top: 70px;
    padding-bottom: 10px;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    /* Content above overlay */
}

/* DESKTOP ADJUSTMENTS (If any specific to spacing/layout remain) */
@media (min-width: 769px) {
    /* No background override needed here anymore */
}

.about-section {
    margin-bottom: 150px;
    padding: 0 20px;
    position: relative;
    /* Ensure z-index context */
    z-index: 1;
}

.about-section-header {
    text-align: center;
    margin-bottom: 80px;
}

/* REFINED ABOUT HEADER CARD - DUAL SYSTEM */
.about-header-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 20px;
    margin-bottom: 120px;
}

.about-section-title {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 3rem;
    color: #FFF;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin-bottom: 50px;
    text-shadow: 0 0 10px rgba(0, 245, 255, 0.4);
    text-align: center;
}

.about-dual-system {
    display: flex;
    gap: 40px;
    max-width: 1200px;
    width: 100%;
    justify-content: center;
    align-items: stretch;
    perspective: 2000px;
    /* Essential for 3D flip effect */
}

.about-data-card {
    flex: 1;
    background: rgba(10, 15, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    padding: 0;
    position: relative;
    clip-path: polygon(20px 0, 100% 0,
            100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            0 100%, 0 20px);
    opacity: 0;
    /* Transform managed by keyframes */
    display: flex;
    flex-direction: column;
    /* Glitch Animation: Combined with Opening via comma */
    /* Note: We need to handle the 'forwards' state of opening. 
       Best to modify the opening keyframes to INCLUDE intermittent glitches 
       OR apply glitch to an inner container. 
       However, applying to main element conflicting with 'transform' in openFromCenter is risky. 
       Let's apply glitch to a specific child or use 'filter' tricks or skew ONLY after animation.
       Actually, standard simple glitch involves skew/translate.
       Since 'openFromCenter' sets transform to 'translateX(0) rotateY(0) scale(1)',
       glitching transform will override it. 
       
       Solution: Wrap the card content or use a separate animation that starts AFTER opening.
       I will add a new class `.glitching-effect` via animation-delay?
       CSS animations with multiple names: animation: open..., glitch...
    */
    animation-name: openForwards, glitchIntermittent;
    /* placeholders */
}

/* We can't easily merge with the complex openFromCenter animation on the same element without conflict.
   I'll apply the glitch to `about-dual-system` or `card-content`?
   Let's apply it to `.about-data-card` BUT defined AFTER the opening completes.
   Actually, the user wants them to glitch.
   I will modify the element style to include the glitch animation running infinitely 
   but strictly affecting skew/translation slightly relative to current state.
   
   Better approach: Apply glitch to the `:hover` state OR continuously.
   Let's add a secondary animation that creates the glitch effect on `filter` and `clip-path` (safe properties).
*/

/* Re-defined card with pure properties, see below for animation implementation on hover/constant */
/* Re-defined card with pure properties + CRT EFFECTS */
.about-data-card {
    flex: 1;
    background: rgba(10, 15, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(4px);
    padding: 0;
    position: relative;
    clip-path: polygon(20px 0, 100% 0,
            100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            0 100%, 0 20px);
    opacity: 0;
    /* Handled by open animation */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    /* Contain CRT effects */
}

/* CRT SCANLINE OVERLAY - Base */
/* CRT SCANLINE OVERLAY - SUBTLE */
.about-data-card::before {
    content: " ";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 10;
    /* Top layer */
    background-size: 100% 4px;
    /* Crisp lines */
    pointer-events: none;
    animation: scanlineScroll 0.3s linear infinite;
    /* High frequency refresh */
    opacity: 0.3;
    /* drastically reduced intensity */
    mix-blend-mode: screen;
    /* Additive color */
}

/* Problem Card - RED SCANLINES */
.card-problem::before {
    background-image: linear-gradient(to bottom, rgba(255, 0, 0, 0.25) 50%, rgba(0, 0, 0, 0.2) 50%);
    box-shadow: inset 0 0 100px rgba(255, 0, 0, 0.15);
}

/* Solution Card - CYAN/BLUE SCANLINES */
.card-solution::before {
    background-image: linear-gradient(to bottom, rgba(0, 245, 255, 0.25) 50%, rgba(0, 0, 0, 0.2) 50%);
    box-shadow: inset 0 0 100px rgba(0, 245, 255, 0.15);
}

@keyframes scanlineScroll {
    0% {
        background-position: 0 0;
    }

    100% {
        background-position: 0 4px;
    }
}

/* Card 1: PROBLEM (Left) - Red */
.card-problem {
    border-color: rgba(255, 50, 50, 0.4);
    box-shadow: 0 0 20px rgba(255, 50, 50, 0.05);
    animation: openFromCenterLeft 1.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    /* Longer & Smooth */
    animation-delay: 0.1s;
    transform-origin: center right;
    /* Pivot from center gap */
}

/* Card 2: SOLUTION (Right) - Cyan */
.card-solution {
    border-color: rgba(0, 245, 255, 0.4);
    box-shadow: 0 0 20px rgba(0, 245, 255, 0.05);
    animation: openFromCenterRight 1.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
    animation-delay: 0.1s;
    transform-origin: center left;
    /* Pivot from center gap */
}

/* Animation: NUCLEAR Slide Out */
@keyframes openFromCenterLeft {
    0% {
        opacity: 0;
        transform: translateX(100%) rotateY(-60deg) scale(0.5);
        /* Extreme overlap */
        filter: blur(10px) brightness(2);
        box-shadow: 0 0 100px rgba(255, 32, 78, 0.8), inset 0 0 50px rgba(255, 32, 78, 0.5);
        /* Massive Glow */
        border-color: #FFF;
    }

    50% {
        opacity: 1;
        filter: blur(0) brightness(1.5);
        box-shadow: 0 0 60px rgba(255, 32, 78, 0.6);
    }

    70% {
        transform: translateX(-10%) rotateY(10deg) scale(1.05);
        /* Overshoot */
        border-color: rgba(255, 50, 50, 0.8);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0) scale(1);
        filter: blur(0) brightness(1);
        box-shadow: 0 0 30px rgba(255, 50, 50, 0.1);
        border-color: rgba(255, 50, 50, 0.4);
    }
}

@keyframes openFromCenterRight {
    0% {
        opacity: 0;
        transform: translateX(-100%) rotateY(60deg) scale(0.5);
        /* Extreme overlap */
        filter: blur(10px) brightness(2);
        box-shadow: 0 0 100px rgba(0, 245, 255, 0.8), inset 0 0 50px rgba(0, 245, 255, 0.5);
        /* Massive Glow */
        border-color: #FFF;
    }

    50% {
        opacity: 1;
        filter: blur(0) brightness(1.5);
        box-shadow: 0 0 60px rgba(0, 245, 255, 0.6);
    }

    70% {
        transform: translateX(10%) rotateY(-10deg) scale(1.05);
        /* Overshoot */
        border-color: rgba(0, 245, 255, 0.8);
    }

    100% {
        opacity: 1;
        transform: translateX(0) rotateY(0) scale(1);
        filter: blur(0) brightness(1);
        box-shadow: 0 0 30px rgba(0, 245, 255, 0.1);
        border-color: rgba(0, 245, 255, 0.4);
    }
}

/* Intermittent Glitch Effect applied to card content wrapper to avoid transform conflict */
.card-content {
    animation: textGlitch 4s infinite linear;
}

@keyframes textGlitch {

    0%,
    90% {
        opacity: 1;
        transform: translate(0, 0);
        filter: none;
    }

    91% {
        opacity: 0.8;
        transform: translate(-2px, 1px);
        filter: hue-rotate(90deg);
    }

    92% {
        opacity: 1;
        transform: translate(1px, -1px);
        filter: none;
    }

    93% {
        opacity: 0.9;
        transform: translate(-1px, 2px);
        filter: contrast(2);
    }

    94% {
        opacity: 1;
        transform: translate(0, 0);
    }

    98% {
        transform: scale(1.02);
        filter: brightness(1.5);
    }

    100% {
        transform: scale(1);
    }
}

/* --- TECH HEADER --- */
.card-tech-header {
    background: rgba(0, 0, 0, 0.6);
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.tech-label {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: #888;
}

.card-problem .tech-label {
    color: #FF6B6B;
}

.card-solution .tech-label {
    color: var(--rift-cyan);
}

.tech-dots {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #333;
    /* Center inactive */
    position: relative;
    box-shadow: -10px 0 0 #333, 10px 0 0 #333;
    /* Left/Right inactive */
}

/* Card Problem: RED Dots Animation */
.card-problem .tech-dots {
    animation: dotsRed 1.5s infinite steps(1);
    /* steps(1) for distinct jumps */
}

/* Card Solution: CYAN Dots Animation */
.card-solution .tech-dots {
    animation: dotsCyan 1.5s infinite steps(1);
    animation-delay: 0.2s;
    /* Offset */
}

@keyframes dotsRed {

    0%,
    100% {
        background: #333;
        box-shadow: -10px 0 0 #333, 10px 0 0 #333;
    }

    25% {
        background: #333;
        box-shadow: -10px 0 0 #FF204E, 10px 0 0 #333;
        /* Left ON */
    }

    50% {
        background: #FF204E;
        /* Center ON */
        box-shadow: -10px 0 0 #333, 10px 0 0 #333;
    }

    75% {
        background: #333;
        box-shadow: -10px 0 0 #333, 10px 0 0 #FF204E;
        /* Right ON */
    }
}

@keyframes dotsCyan {

    0%,
    100% {
        background: #333;
        box-shadow: -10px 0 0 #333, 10px 0 0 #333;
    }

    25% {
        background: #333;
        box-shadow: -10px 0 0 var(--rift-cyan), 10px 0 0 #333;
        /* Left ON */
    }

    50% {
        background: var(--rift-cyan);
        /* Center ON */
        box-shadow: -10px 0 0 #333, 10px 0 0 #333;
    }

    75% {
        background: #333;
        box-shadow: -10px 0 0 #333, 10px 0 0 var(--rift-cyan);
        /* Right ON */
    }
}

/* --- CARD CONTENT --- */
.card-content {
    padding: 30px;
    flex: 1;
    font-family: 'Roboto', sans-serif;
    color: #CCC;
    line-height: 1.6;
    font-size: 1rem;
}

.card-content p {
    margin-bottom: 15px;
}

.highlight-text {
    font-weight: bold;
    color: #FFF;
    border-left: 3px solid;
    padding-left: 15px;
    margin-top: 20px;
}

.card-problem .highlight-text {
    border-color: #FF204E;
    color: #FFD6D6;
}

.card-solution .highlight-text {
    border-color: var(--rift-cyan);
    color: #E0FCFF;
}

/* --- TECH FOOTER --- */
.card-tech-footer {
    padding: 10px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    font-family: 'IBM Plex Mono', monospace;
    font-size: 0.7rem;
    text-align: right;
    background: rgba(0, 0, 0, 0.3);
}

.status-offline {
    color: #FF204E;
}

.status-online {
    color: var(--rift-cyan);
}


@media (max-width: 1100px) and (orientation: portrait) {
    .about-section-title {
        font-size: 2rem;
    }

    .about-dual-system {
        flex-direction: column;
        gap: 20px;
    }

    .about-data-card {
        min-height: auto;
    }
}

.about-header-text p {
    margin-bottom: 20px;
}

/* Drop cap for first letter */
.about-header-text p:first-child::first-letter {
    font-family: var(--font-display);
    font-size: 3rem;
    float: left;
    line-height: 0.8;
    margin-right: 10px;
    color: var(--rift-cyan);
    text-shadow: 0 0 10px var(--rift-cyan);
}

@media (max-width: 1100px) and (orientation: portrait) {
    .about-header-card {
        padding: 30px 20px;
        clip-path: polygon(20px 0, 100% 0,
                100% calc(100% - 20px),
                calc(100% - 20px) 100%,
                0 100%, 0 20px);
    }

    .about-header-title {
        font-size: 1.8rem;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .about-header-text {
        column-count: 1;
        text-align: left;
    }
}

/* Replaces .about-section-header p */
.about-terminal-display {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1rem;
    /* Reduced ~20% */
    color: #FF204E;
    /* Rift Red */
    background: #000;
    display: inline-block;
    padding: 8px 16px;
    /* Reduced ~20% */
    border: 1px solid rgba(255, 32, 78, 0.3);
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(255, 32, 78, 0.2);
    min-width: 240px;
    /* Reduced ~20% */
    position: relative;
    cursor: pointer;
    text-transform: uppercase;
    transition: all 0.3s ease;
    margin: 0 auto;
}

.about-terminal-display:hover {
    box-shadow: 0 0 20px rgba(255, 32, 78, 0.6);
    text-shadow: 0 0 8px rgba(255, 32, 78, 0.8);
    border-color: #FF204E;
}

.terminal-cursor {
    display: inline-block;
    width: 8px;
    /* Reduced ~20% */
    background-color: #FF204E;
    animation: blinkCursor 1s infinite;
    vertical-align: bottom;
    /* Fix alignment */
    margin-left: 2px;
}

@keyframes blinkCursor {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

/* =========================================
   1. VISION / MISSION ORBIT (Reuse)
   ========================================= */
.about-orbit-container {
    perspective: 1000px;
    width: 100%;
    height: 450px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    /* Increased spacing to separate from Crew section */
    margin-bottom: 200px;
    /* Reduced from 250px for mobile in next block, but applying here as base if no override found, wait, better to override in mobile block */
    overflow: visible;
}

.about-orbit-cards {
    position: relative;
    width: 300px;
    height: 400px;
    transform-style: preserve-3d;
    transition: transform 0.5s ease-out;
}

.about-orbit-card {
    position: absolute;
    width: 300px;
    height: 400px;

    /* HUD Visuals */
    background: rgba(0, 245, 255, 0.05);
    /* Light transparent cyan */
    border: 2px solid var(--rift-cyan, #00F5FF);

    /* Shape: Cut corners (Top-Left, Bottom-Right) */
    clip-path: polygon(20px 0,
            100% 0,
            100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            0 100%,
            0 20px);
    border-radius: 0;

    /* Flat look, no heavy shadow initially */
    box-shadow: none;
    backdrop-filter: blur(2px);

    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.3s ease-out;
    left: 0;
    top: 0;
    overflow: hidden;
}

/* 1. HUD DECORATION: Top-Left Overlay */
.about-orbit-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 8px;
    background: var(--rift-cyan, #00F5FF);
    transform: skewX(-45deg);
    top: 5px;
    left: 10px;
    /* Positioned near the cut */
    pointer-events: none;
    transition: all 0.3s;
    opacity: 0.8;
}

/* 2. HUD DECORATION: Bottom-Right Tacche */
.about-orbit-card::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 6px;
    /* Create "tacche" look */
    background: repeating-linear-gradient(90deg,
            var(--rift-cyan, #00F5FF),
            var(--rift-cyan, #00F5FF) 10px,
            transparent 10px,
            transparent 15px);
    transform: skewX(-45deg);
    bottom: 5px;
    right: 10px;
    /* Near cut */
    pointer-events: none;
    opacity: 0.8;
}

/* HOVER: Active State */
.about-orbit-card:hover {
    background-color: rgba(0, 245, 255, 0.1);
    filter: drop-shadow(0 0 5px rgba(0, 245, 255, 0.4));
    border-color: var(--rift-cyan, #00F5FF);

    /* Scanline Animation via background */
    background-image: linear-gradient(to bottom,
            transparent 0%,
            rgba(0, 245, 255, 0.1) 50%,
            transparent 100%);
    background-size: 100% 200%;
    animation: hudScan 1.5s linear infinite;
}

.about-orbit-card:hover::before {
    background: var(--rift-red, #FF204E);
    /* Highlight branding */
    width: 50px;
}

@keyframes hudScan {
    0% {
        background-position: 0% 200%;
    }

    100% {
        background-position: 0% -100%;
    }
}

/* Typography Overrides for HUD */
.about-orbit-card h2 {
    font-family: var(--font-display);
    color: var(--rift-cyan, #00F5FF);
    font-size: 1.8rem;
    margin-top: 0;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: none;
    text-align: center;
    /* Headers centered */
}

/* Standardized Content Text */
.about-orbit-card p,
.about-orbit-card div,
.about-orbit-card li {
    font-family: var(--font-ui);
    font-size: 0.9rem;
    line-height: 1.5;
    color: #FFF;
    text-shadow: 0 0 3px rgba(0, 245, 255, 0.3);
    /* Cyan glow */
    text-align: left;
    margin: 0 0 10px 0;
}

.about-orbit-card ul {
    padding-left: 20px;
    margin: 0 0 15px 0;
    text-align: left;
}

.about-orbit-card strong {
    color: #FFF;
    display: block;
    margin-top: 10px;
    margin-bottom: 5px;
}

/* Subtle text glitch on hover */
.about-orbit-card:hover h2 {
    text-shadow: 2px 0 var(--rift-red, #FF204E), -2px 0 var(--rift-cyan, #00F5FF);
    transition: text-shadow 0.2s;
}

.about-orbit-more {
    background: transparent;
    border: 1px solid var(--rift-red, #FF204E);
    color: var(--rift-red);
    padding: 8px 16px;
    text-transform: uppercase;
    font-family: var(--font-display);
    cursor: pointer;
    transition: all 0.3s;
    margin-top: auto;
    /* Push to bottom */
    font-size: 0.8rem;
    align-self: center;
    /* Center button */
}

.about-orbit-more:hover,
.about-orbit-more:focus-visible {
    background: var(--rift-red);
    color: #000;
    outline: none;
}

.about-orbit-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    color: var(--rift-cyan);
    border: 1px solid var(--rift-cyan);
    font-size: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    outline: none;
}

.about-orbit-arrow:hover,
.about-orbit-arrow:focus-visible {
    background: var(--rift-cyan);
    color: #000;
    box-shadow: 0 0 20px var(--rift-cyan);
}

.rift-floating-contact:hover {
    transform: scale(1.1);
    box-shadow: 0 0 30px rgba(255, 32, 78, 0.8);
    background: var(--rift-red);
    color: var(--rift-black);
}

.rift-floating-contact--mobile {
    display: none;
}

.rift-floating-contact.is-hidden-by-footer {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: scale(0.8);
}

.about-orbit-arrow--prev {
    left: 10%;
}

.about-orbit-arrow--next {
    right: 10%;
}

/* Mobile Vision Override */
@media (max-width: 1100px) and (orientation: portrait) {
    .rift-floating-contact {
        bottom: 30px;
        width: 50px;
        height: 50px;
        right: 20px;
    }

    .rift-floating-contact--desktop {
        display: none;
    }

    .rift-floating-contact--mobile {
        display: flex;
    }

    .about-orbit-container {
        height: auto;
        display: block;
        perspective: none;
        margin-bottom: 150px !important;
        /* Reduced 20% (from 250px) */
    }

    .about-orbit-cards {
        width: 100%;
        height: auto;
        transform: none !important;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .about-orbit-card {
        position: relative;
        width: auto;
        height: auto;
        transform: none !important;
        opacity: 1 !important;
        margin: 0 20px;

        /* Mobile "Bad Signal" Filter */
        background-color: rgba(0, 10, 20, 0.8);
        background-image: repeating-linear-gradient(0deg,
                transparent,
                transparent 2px,
                rgba(0, 245, 255, 0.1) 2px,
                rgba(0, 245, 255, 0.1) 4px);
        box-shadow: inset 0 0 30px rgba(0, 245, 255, 0.15);
        border: 1px solid rgba(0, 245, 255, 0.4);
        backdrop-filter: blur(4px);
        background-size: 100% 20px;
        /* Force repeat size for smooth scrolling */
        animation: scanline-move 3s linear infinite;
    }

    @keyframes scanline-move {
        0% {
            background-position: 0 0;
        }

        100% {
            background-position: 0 20px;
        }

        /* Match background-size height for seamless loop */
    }

    .about-orbit-arrow {
        display: none;
    }
}

/* Vision Overlay */
.about-orbit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(5, 5, 8, 0.95);
    z-index: 10005;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.about-orbit-overlay:not([hidden]) {
    opacity: 1;
    pointer-events: auto;
}

.about-orbit-overlay-inner {
    width: 90%;
    max-width: 800px;

    /* HUD Visuals */
    background: rgba(0, 245, 255, 0.05);
    border: 2px solid var(--rift-cyan);

    /* Shape: Cut corners */
    clip-path: polygon(20px 0,
            100% 0,
            100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            0 100%,
            0 20px);
    box-shadow: none;
    backdrop-filter: blur(5px);

    padding: 40px;
    position: relative;
    max-height: 90vh;
    overflow-y: auto;
}

/* 1. HUD DECORATION: Top-Left Overlay */
.about-orbit-overlay-inner::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 15px;
    width: 40px;
    height: 8px;
    background: var(--rift-cyan);
    transform: skewX(-45deg);
    pointer-events: none;
    opacity: 0.8;
}

/* 2. HUD DECORATION: Bottom-Right Tacche */
.about-orbit-overlay-inner::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 15px;
    width: 40px;
    height: 6px;
    background: repeating-linear-gradient(90deg,
            var(--rift-cyan),
            var(--rift-cyan) 10px,
            transparent 10px,
            transparent 15px);
    transform: skewX(-45deg);
    pointer-events: none;
    opacity: 0.8;
}

.about-orbit-overlay-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--rift-red);
    font-size: 2rem;
    cursor: pointer;
}

.about-orbit-overlay-content h2 {
    font-family: var(--font-display);
    color: var(--rift-cyan);
    font-size: 2.5rem;
    margin-top: 0;
}

.about-orbit-overlay-content p {
    font-size: 1.1rem;
    line-height: 1.6;
}

/* =========================================
   2. CREW CARDS
   ========================================= */
.about-crew-carousel {
    display: flex;
    justify-content: center;
    /* Desktop default: centered */
    align-items: center;
    position: relative;
    /* Note: "carousel" logic handled via JS transform on cards, 
       so container can be flex aligned to center */
    min-height: 600px;
    perspective: 1200px;
    /* Needed for child 3d transforms */
    width: 100%;
    overflow: visible;
}

.crew-card {
    position: absolute;
    /* Desktop: Carousel items absolute */
    width: 340px;
    height: 520px;
    perspective: 1200px;
    /* Internal perspective if needed, but usually on container */
    cursor: pointer;
    transition: all 0.5s ease;
    /* For carousel movement */
}

.crew-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.3s ease;
    border-radius: 4px;
}

/* States */
.crew-card.is-flipped .crew-card-inner {
    transform: rotateY(180deg) translateZ(10px);
}

.crew-card.is-flipped .crew-card-face--front {
    pointer-events: none;
    z-index: 1;
}

.crew-card.is-flipped .crew-card-face--back {
    z-index: 10;
    pointer-events: auto;
}

.crew-card-face {
    position: absolute;
    inset: 0;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background: var(--rift-smog);
    border: 1px solid var(--rift-concrete);
    display: flex;
    flex-direction: column;
    /* overflow: hidden; -- Removed to fix Firefox/Safari 3D context breakage */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
}

/* Front Styling */
.crew-card-face--front {
    z-index: 2;
    border: 1px solid var(--rift-purple, #711C91);
    transform: translateZ(1px);
    /* Force layer on top in some browsers */
}


.crew-card-portrait {
    flex: 1;
    /* Occupies top part */
    position: relative;
    background: #000;
    overflow: hidden;
}

.crew-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.8;
    filter: grayscale(0.5) contrast(1.2);
    transition: filter 0.3s;
}


.crew-card:hover .crew-card-img {
    filter: grayscale(0) contrast(1.1);
}

.crew-card-img--gaby {
    transform: translateY(-5%) scale(1.06);
}



.crew-card-front-info {
    padding: 20px;
    background: linear-gradient(to bottom, transparent 0%, rgba(5, 5, 8, 0.9) 100%);
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    border-top: 2px solid var(--rift-purple);
    backdrop-filter: blur(5px);
}

.crew-card-front-info h3 {
    margin: 0;
    font-family: var(--font-display);
    font-size: 1.4rem;
    /* Reduced to fit long names */
    color: #fff;
    text-transform: uppercase;
    text-shadow: 0 0 5px var(--rift-purple);
    overflow-wrap: break-word;
    line-height: 1.2;
}

.crew-role {
    color: var(--rift-purple);
    font-family: var(--font-display);
    font-size: 0.9rem;
    margin: 5px 0 15px;
    letter-spacing: 1px;
}

.crew-tags {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.crew-tags li {
    font-size: 0.75rem;
    background: rgba(113, 28, 145, 0.2);
    border: 1px solid var(--rift-purple);
    padding: 4px 8px;
    color: var(--rift-text);
}

.crew-card-toggle {
    background: var(--rift-purple);
    color: #000;
    border: none;
    width: 100%;
    padding: 10px;
    font-family: var(--font-display);
    text-transform: uppercase;
    cursor: pointer;
    font-weight: bold;
    clip-path: polygon(0 0, 100% 0, 95% 100%, 5% 100%);
}

.crew-card-toggle:hover,
.crew-card-toggle:focus-visible {
    background: #fff;
    color: var(--rift-purple);
    outline: none;
}


/* Back Styling */
.crew-card-face--back {
    transform: rotateY(180deg);
    background: var(--rift-concrete);
    border: 1px solid var(--rift-rust, #F57D1F);
    padding: 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    touch-action: pan-y;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* Cleaned up individual overrides as they are now handled globally above */

.crew-card-back-header {
    border-bottom: 2px solid var(--rift-rust);
    margin-bottom: 15px;
    padding-bottom: 5px;
}

.crew-back-label {
    font-family: var(--font-display);
    color: var(--rift-rust);
    margin: 0;
    font-size: 1rem;
    text-transform: uppercase;
}

.crew-abilities-full {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
}

.crew-abilities-full li {
    font-size: 0.85rem;
    margin-bottom: 8px;
    position: relative;
    padding-left: 15px;
    color: #ddd;
    line-height: 1.4;
}

.crew-abilities-full li::before {
    content: "►";
    color: var(--rift-rust);
    position: absolute;
    left: 0;
    font-size: 0.7rem;
    top: 3px;
}

.crew-bio-section {
    margin: 15px 0;
    background: rgba(0, 0, 0, 0.2);
    padding: 10px;
    border-left: 2px solid var(--rift-beige);
}

.crew-bio-toggle {
    background: none;
    border: none;
    color: var(--rift-beige);
    text-decoration: underline;
    cursor: pointer;
    font-size: 0.8rem;
    text-align: left;
    padding: 0;
    display: block;
    margin-bottom: 5px;
}

.crew-bio {
    font-size: 0.8rem;
    font-style: italic;
    color: #ccc;
    margin: 0;
    line-height: 1.4;
}

.crew-services-link {
    display: block;
    background: transparent;
    border: 1px solid var(--rift-cyan);
    color: var(--rift-cyan);
    font-family: var(--font-display);
    padding: 10px;
    text-align: center;
    text-decoration: none;
    margin-bottom: 10px;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: all 0.3s;
}

.crew-services-link:hover {
    background: var(--rift-cyan);
    color: #000;
}

.crew-card-close {
    background: transparent;
    border: none;
    color: #777;
    width: 100%;
    padding: 5px;
    cursor: pointer;
    font-size: 0.8rem;
    text-transform: uppercase;
}

.crew-card-close:hover {
    color: #fff;
}


/* =========================================
   MOBILE CREW OVERRIDE
   ========================================= */
@media (max-width: 1100px) and (orientation: portrait) {
    .about-crew-carousel {
        display: flex;
        flex-direction: column;
        gap: 2rem;

        height: auto;
        min-height: auto;
        overflow-y: visible;
        perspective: none;
        transform-style: flat;
    }

    .crew-card {
        position: relative;
        /* Relative stack */
        left: auto !important;
        top: auto !important;
        transform: none !important;
        /* Reset desktop carousel transform */
        opacity: 1 !important;
        filter: none !important;
        /* Ensure no blur */
        scale: 1 !important;

        width: 85%;
        max-width: 400px;
        height: 70vh;
        /* Viewport based height to prevent overflow */
        max-height: 600px;
        margin: 0 auto;
        z-index: 1 !important;
    }

    /* Disable hover flip effects via transform */
    .crew-card:hover .crew-card-inner {
        transform: rotateY(0deg);
    }

    /* Only .is-flipped triggers flip */
    .crew-card.is-flipped .crew-card-inner {
        transform: rotateY(180deg);
    }

    .crew-carousel-arrow {
        display: none;
    }
}

/* =========================================
   CAROUSEL ARROWS
   ========================================= */
@media (min-width: 769px) {
    .crew-carousel-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.75);
        border: 2px solid #ff00ff;
        /* neon magenta */
        backdrop-filter: blur(8px);
        cursor: pointer;
        z-index: 200;
        /* Increased to be above cards (max z ~100) */
        transition: all 0.2s ease;
        outline: none;
    }

    .crew-carousel-arrow:hover,
    .crew-carousel-arrow:focus-visible {
        background: #ff00ff;
        color: #000;
        box-shadow: 0 0 20px #ff00ff;
    }

    .crew-carousel-arrow:hover {
        background: rgba(255, 0, 255, 0.15);
        box-shadow: 0 0 20px #ff00ff;
        transform: translateY(-50%) scale(1.1);
    }

    .crew-carousel-arrow--prev {
        left: 20px;
        /* Moved inside viewport */
    }

    .crew-carousel-arrow--next {
        right: 20px;
        /* Moved inside viewport */
    }

    .crew-carousel-arrow svg {
        width: 24px;
        height: 24px;
        fill: #ff00ff;
        stroke: #ff00ff;
        stroke-width: 1px;
    }
}

@media (max-width: 1100px) and (orientation: portrait) {
    .crew-carousel-arrow {
        display: none;
    }
}

/* =========================================
   7. ABOUT HEADER CARD (Horizontal HUD)
   ========================================= */
.about-header-section {
    margin-top: 30px;
    /* Reduced from 100px */
    margin-bottom: 64px;
    /* Reduced from 80px */
    padding: 0 20px;
    display: flex;
    justify-content: center;
}

.about-header-card {
    position: relative;
    width: 100%;
    max-width: 1200px;

    /* HUD Visuals (Matching Cards) */
    background: rgba(0, 245, 255, 0.05);
    border: 2px solid var(--rift-cyan);

    /* Shape: Cut corners */
    clip-path: polygon(20px 0,
            100% 0,
            100% calc(100% - 20px),
            calc(100% - 20px) 100%,
            0 100%,
            0 20px);

    padding: 60px 40px;
    text-align: center;
    backdrop-filter: blur(2px);
}

/* HUD DECORATION: Top-Left */
.about-header-card::before {
    content: '';
    position: absolute;
    top: 5px;
    left: 15px;
    width: 40px;
    height: 8px;
    background: var(--rift-cyan);
    transform: skewX(-45deg);
    pointer-events: none;
    opacity: 0.8;
}

/* HUD DECORATION: Bottom-Right */
.about-header-card::after {
    content: '';
    position: absolute;
    bottom: 5px;
    right: 15px;
    width: 40px;
    height: 6px;
    background: repeating-linear-gradient(90deg,
            var(--rift-cyan),
            var(--rift-cyan) 10px,
            transparent 10px,
            transparent 15px);
    transform: skewX(-45deg);
    pointer-events: none;
    opacity: 0.8;
}

.about-header-title {
    font-family: 'Orbitron', monospace;
    font-size: clamp(36px, 5vw, 60px);
    color: #fff;
    text-shadow: 2px 2px 0 #000;
    margin: 0 0 30px 0;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.about-header-text {
    font-family: 'Roboto', sans-serif;
    font-size: 1.1rem;
    color: #fff;
    text-shadow: 1px 1px 2px #000;
    line-height: 1.8;
    max-width: 900px;
    margin: 0 auto;
}

/* Hover Effect (Subtle) */
.about-header-card:hover {
    box-shadow: 0 0 20px rgba(0, 245, 255, 0.2);
    background: rgba(0, 245, 255, 0.08);
}

/* Mobile adjustments for Header Card */
@media (max-width: 1100px) and (orientation: portrait) {
    .about-header-card {
        padding: 40px 20px;
    }

    .about-header-text {
        text-align: left;
        font-size: 1rem;
    }
}

/* =========================================
   CTA SECTION
   ========================================= */
.about-cta {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 50px;
}

.cta-mission-btn {
    display: inline-block;
    padding: 15px 20px;
    border: 2px solid var(--rift-red, #FF204E);
    background: transparent;
    color: #fff;
    font-family: var(--font-display, 'Orbitron', sans-serif);
    text-transform: uppercase;
    font-size: 1.2rem;
    letter-spacing: 2px;
    text-decoration: none;
    transition: all 0.3s ease;
    /* Optional: Cut corners look */
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* =========================================
   FOOTER (Cyberpunk Kitsch Style)
   ========================================= */
.rift-footer {
    position: relative;
    background: #100a14;
    /* Dark purplish BG from image */
    padding: 60px 20px;
    border-top: 2px solid var(--rift-cyan);
    margin-top: 100px;
    font-family: var(--font-ui);
    overflow: hidden;
}

/* Background Glow */
.rift-footer::before {
    content: '';
    position: absolute;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 200px;
    background: radial-gradient(circle, rgba(255, 32, 78, 0.2) 0%, transparent 70%);
    /* Red/Pink glow */
    pointer-events: none;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

/* Top Bar Decorative */
.footer-top-bar {
    display: flex;
    align-items: center;
    margin-bottom: 40px;
    font-family: var(--font-display);
    color: var(--rift-cyan);
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.bar-segment {
    height: 4px;
    background: var(--rift-cyan);
}

.bar-cyan {
    width: 50px;
    margin-right: 10px;
}

.bar-gap {
    width: 10px;
    background: transparent;
}

.bar-title {
    background: transparent;
    white-space: nowrap;
    margin-left: auto;
    /* Push to right */
}

/* Grid Layout */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 30px;
}



/* Col 1: Links (Yellow Yellow Theme) */
.footer-col-links {
    border-left: 2px solid #FFE600;
    /* Yellow */
    padding-left: 20px;
    position: relative;
}

.footer-header-yellow {
    font-family: var(--font-display);
    color: #FFE600;
    /* Yellow */
    font-size: 1rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    background: rgba(255, 230, 0, 0.1);
    display: inline-block;
    padding: 2px 10px;
    border: 1px solid #FFE600;
}

.footer-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-nav-list li {
    margin-bottom: 10px;
}

.footer-nav-list a {
    color: #fff;
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.9rem;
    transition: all 0.2s;
    text-transform: uppercase;
}

.footer-nav-list a:hover {
    color: #FFE600;
    padding-left: 5px;
    text-shadow: 0 0 5px #FFE600;
}

/* Active Link (Yellow Box) */
.footer-link-active {
    background: #FFE600;
    color: #000 !important;
    /* Force black text on yellow */
    padding: 2px 10px;
    display: inline-block;
    font-weight: bold;
    box-shadow: 0 0 10px rgba(255, 230, 0, 0.5);
    clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}

/* Decorative Curve (The distinctive rounded shape) */
.footer-deco-curve {
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 100px;
    height: 40px;
    background: linear-gradient(to right, #FFE600 0%, transparent 100%);
    opacity: 0.2;
    clip-path: polygon(0 0, 20px 0, 20px 20px, 100% 20px, 100% 100%, 0 100%);
}

/* Col 2: Info (Cyan Box) */
.footer-col-info {
    border: 1px solid rgba(0, 245, 255, 0.3);
    background: rgba(0, 245, 255, 0.05);
    padding: 20px;
    transform: translateX(-25%);
    /* Adjusted to -25% */
}

/* Hide Floating Contact when Footer is visible */
.rift-floating-contact.is-hidden-by-footer {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.footer-header-cyan {
    font-family: var(--font-display);
    color: var(--rift-cyan);
    font-size: 0.8rem;
    margin-bottom: 20px;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid var(--rift-cyan);
    padding-bottom: 5px;
    display: inline-block;
}

.footer-col-info p {
    color: #ccc;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.footer-legal {
    font-size: 0.75rem;
    color: #777;
    margin-top: 20px;
}

/* Col 3: Social Buttons (Right Side Detail Look) */
.footer-col-social {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    /* Right align like the reference 'Details' */
}

.footer-col-social .footer-header-cyan {
    align-self: flex-end;
    /* Align header right */
    text-align: right;
}

.footer-social-btn {
    display: block;
    width: 100%;
    text-align: right;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid var(--rift-cyan);
    color: var(--rift-cyan);
    text-decoration: none;
    font-family: var(--font-display);
    font-size: 0.8rem;
    text-transform: uppercase;
    background: linear-gradient(90deg, transparent 50%, rgba(0, 245, 255, 0.1) 100%);
    transition: all 0.3s;
    /* Cut corner right */
    clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.footer-social-btn:hover {
    background: var(--rift-cyan);
    color: #000;
    padding-right: 20px;
}

/* =========================================
   8. CREW HEADER STYLE (Match Vision Header)
   ========================================= */
.about-section-header h2 {
    font-family: var(--font-display, 'Orbitron', sans-serif);
    font-size: 3rem;
    /* Matches 'COME NASCE THE RIFT' */
    color: #FFF;
    text-transform: uppercase;
    letter-spacing: 4px;

    margin-bottom: 20px;
    text-shadow: 0 0 10px rgba(0, 245, 255, 0.4);
    text-align: center;
}

/* =========================================
   FOOTER MOBILE OVERRIDES
   ========================================= */
@media (max-width: 1100px) and (orientation: portrait) {
    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-col-info {
        transform: translateX(10%);
        /* Shift right on mobile */
        width: 90%;
        /* Prevent overflow */
        margin: 0 auto;
        /* Centered relative to width */
    }
}

/* =========================================
   FOOTER EASTER EGG
   ========================================= */
.footer-easter-trigger {
    background: transparent;
    border: 1px solid rgba(113, 28, 145, 0.5);
    color: var(--rift-purple);
    padding: 8px 12px;
    margin-top: 15px;
    cursor: pointer;
    font-size: 20px;
    transition: all 0.3s ease;
    display: block;
    width: fit-content;
}

.footer-easter-trigger:hover {
    border-color: var(--rift-purple);
    box-shadow: 0 0 15px rgba(113, 28, 145, 0.6);
    transform: scale(1.1);
}

.footer-easter-icon {
    display: inline-block;
    animation: footerEasterPulse 2s ease-in-out infinite;
}

@keyframes footerEasterPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.2);
        opacity: 0.7;
    }
}

/* Popup */
.footer-easter-popup {
    position: fixed;
    inset: 0;
    background: #000;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
    animation: footerEasterFadeIn 0.3s ease;
}

.footer-easter-popup.is-open {
    display: flex;
}

.footer-easter-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: transparent;
    border: none;
    color: var(--rift-red);
    font-size: 3rem;
    cursor: pointer;
    z-index: 100000;
    transition: transform 0.3s ease;
    line-height: 1;
}

.footer-easter-close:hover {
    transform: scale(1.2);
    color: #fff;
}

@keyframes footerEasterFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.footer-easter-content {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loading Phase */
.footer-easter-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.footer-easter-loading.is-visible {
    opacity: 1;
}

.footer-easter-title {
    font-family: var(--font-display);
    font-size: clamp(32px, 5vw, 60px);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 4px;
    margin: 0;

    /* Cyberpunk Container */
    position: relative;
    display: inline-block;
    padding: 20px 40px;
    border: 2px solid var(--rift-cyan);
    background: rgba(0, 245, 255, 0.1);
    clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px),
            calc(100% - 20px) 100%, 0 100%, 0 20px);

    text-shadow:
        0 0 10px rgba(0, 245, 255, 0.8),
        2px 2px 0 var(--rift-magenta);

    box-shadow: 0 0 20px rgba(0, 245, 255, 0.2);
    backdrop-filter: blur(5px);

    animation: footerEasterGlitch 1s ease-in-out infinite alternate;
}

/* Decoration lines for the title box */
.footer-easter-title::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    width: 20px;
    height: 20px;
    border-top: 2px solid var(--rift-magenta);
    border-left: 2px solid var(--rift-magenta);
    z-index: 2;
}

.footer-easter-title::after {
    content: '';
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 20px;
    height: 20px;
    border-bottom: 2px solid var(--rift-magenta);
    border-right: 2px solid var(--rift-magenta);
    z-index: 2;
}

@keyframes footerEasterGlitch {

    0%,
    100% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-2px);
    }

    40% {
        transform: translateX(2px);
    }

    60% {
        transform: translateX(-2px);
    }

    80% {
        transform: translateX(2px);
    }
}

.footer-easter-dots {
    display: flex;
    gap: 15px;
}

.footer-dot {
    width: 20px;
    height: 20px;
    background: var(--rift-purple);
    border-radius: 50%;
    animation: footerDotBounce 1.2s ease-in-out infinite;
    box-shadow: 0 0 15px rgba(113, 28, 145, 0.8);
}

.footer-dot:nth-child(1) {
    animation-delay: 0s;
}

.footer-dot:nth-child(2) {
    animation-delay: 0.2s;
}

.footer-dot:nth-child(3) {
    animation-delay: 0.4s;
}

@keyframes footerDotBounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-20px);
    }
}

/* Image Phase */
.footer-easter-image {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.footer-easter-image.is-visible {
    opacity: 1;
}

.footer-easter-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    animation: footerEasterZoom 0.5s ease-out;
}

@keyframes footerEasterZoom {
    from {
        transform: scale(0.5);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Mobile Adjustments */
@media (max-width: 1100px) and (orientation: portrait) {
    .footer-easter-title {
        font-size: 36px;
        letter-spacing: 4px;
    }

    .footer-dot {
        width: 15px;
        height: 15px;
    }
}

/* Video Glitch/Distortion Effects */
.footer-easter-img {
    filter: contrast(1.2) saturate(1.3);
    position: relative;
}

/* Add scanlines overlay on video */
.footer-easter-image::before {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(0deg,
            rgba(0, 0, 0, 0.15),
            rgba(0, 0, 0, 0.15) 1px,
            transparent 1px,
            transparent 2px);
    pointer-events: none;
    z-index: 2;
    animation: scanlineMove 8s linear infinite;
}

/* Add chromatic aberration effect */
.footer-easter-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle, transparent 60%, rgba(255, 0, 0, 0.05) 100%),
        radial-gradient(circle, transparent 60%, rgba(0, 255, 0, 0.05) 100%),
        radial-gradient(circle, transparent 60%, rgba(0, 0, 255, 0.05) 100%);
    mix-blend-mode: screen;
    pointer-events: none;
    z-index: 2;
    animation: chromaticShift 0.3s infinite;
}

@keyframes scanlineMove {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(10px);
    }
}

@keyframes chromaticShift {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(1px, -1px);
    }

    50% {
        transform: translate(-1px, 1px);
    }

    75% {
        transform: translate(1px, 1px);
    }

    100% {
        transform: translate(0, 0);
    }
}

/* Random glitch effect on video */
@keyframes videoGlitch {

    0%,
    100% {
        transform: translate(0) scale(1);
        filter: contrast(1.2) saturate(1.3);
    }

    10% {
        transform: translate(-2px, 2px) scale(1.01);
        filter: contrast(1.4) saturate(1.5) hue-rotate(5deg);
    }

    20% {
        transform: translate(2px, -2px) scale(0.99);
        filter: contrast(1.1) saturate(1.2) hue-rotate(-5deg);
    }

    30% {
        transform: translate(-1px, -1px) scale(1);
        filter: contrast(1.3) saturate(1.4);
    }
}

.footer-easter-img.is-glitching {
    animation: videoGlitch 0.2s infinite;
}


/* Override landscape per about */
@media (max-height: 500px) and (orientation: landscape) {
  body.rift-about {
    height: auto !important;
    min-height: 100vh !important;
    width: 100% !important;
    position: static !important;
    transform: none !important;
    overflow-y: auto !important;  /* Scroll ok */
  }
  .rift-footer {
    padding: 20px 15px !important;  /* Compatto mobile */
    margin-top: 40px !important;
  }
}

/* Footer sempre compatto landscape */
@media (max-height: 500px) and (orientation: landscape) {
  .rift-footer {
    padding-bottom: 20px !important;  /* No spazio extra */
  }
  body.rift-about .footer-grid {
    gap: 15px !important;
    grid-template-columns: 1fr !important;  /* Stack mobile */
  }
}

/* NAV COMPACT LANDSCAPE ABOUT */
@media (max-width: 1100px) and (orientation: landscape),
       (max-height: 500px) and (orientation: landscape) {
  .feed-desktop-nav {
    gap: 8px !important;  /* Da 30px */
  }
  .nav-link {
    font-size: 11px !important;  /* Piccolo */
    padding: 4px 8px !important;  /* Compatto */
    letter-spacing: 0.5px !important;
    min-width: auto !important;
  }
  .nav-link.highlight {
    padding: 3px 6px !important;
    font-size: 10px !important;
  }
  
  .feed-header {
    padding: 8px 12px !important;  /* Più stretto */
  }
  
  .footer-col-info {
  
    transform: translateX(-1%);
}
}
/* =========================================
   LANDSCAPE MOBILE – DESKTOP COMPACT MODE
   ========================================= */

@media (max-width: 1100px) and (orientation: landscape) {

  /* Riduci tipografia globale */
  .about-section-title {
    font-size: 1.8rem;
  }

  .about-header-title {
    font-size: 28px;
  }

  .about-header-text {
    font-size: 0.9rem;
    line-height: 1.4;
  }

  /* Riduci padding grandi */
  .about-header-card {
    padding: 30px 20px;
  }

  .about-section {
    margin-bottom: 80px;
  }

  /* Dual system più compatto */
  .about-dual-system {
    gap: 20px;
    max-width: 900px;
  }

  .card-content {
    padding: 20px;
    font-size: 0.9rem;
  }

  /* Orbit più compatto */
  .about-orbit-container {
    height: 320px;
    margin-bottom: 100px;
  }

  .about-orbit-card {
    width: 240px;
    height: 320px;
    padding: 20px;
  }

  /* Crew più compatta */
  .crew-card {
    width: 260px;
    height: 420px;
  }

  .crew-card-front-info {
    padding: 12px;
  }

  /* Footer compatto */
  .rift-footer {
    padding: 30px 15px;
    margin-top: 50px;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 15px;
  }
}

/* =========================================
   LANDSCAPE MOBILE – TYPOGRAPHY SCALE DOWN
   ========================================= */

@media (max-width: 1100px) and (orientation: landscape) {

  html {
    font-size: 14px; /* Riduce tutta la scala rem */
  }

  /* Titoli principali */
  .about-section-title,
  .about-section-header h2 {
    font-size: 1.6rem;
    letter-spacing: 2px;
  }

  .about-header-title {
    font-size: 1.8rem;
  }

  /* Testi corpo */
  .about-header-text,
  .card-content,
  .about-orbit-card p,
  .about-orbit-card li {
    font-size: 0.85rem;
    line-height: 1.4;
  }

  /* Orbit titles */
  .about-orbit-card h2 {
    font-size: 1.2rem;
  }

  /* Crew */
  .crew-card-front-info h3 {
    font-size: 1rem;
  }

  .crew-role {
    font-size: 0.75rem;
  }

  .crew-abilities-full li {
    font-size: 0.75rem;
  }

  /* Footer */
  .footer-header-yellow,
  .footer-header-cyan {
    font-size: 0.7rem;
  }

  .footer-nav-list a,
  .footer-col-info p {
    font-size: 0.75rem;
  }

  .footer-legal {
    font-size: 0.65rem;
  }

  /* CTA */
  .cta-mission-btn {
    font-size: 0.9rem;
    padding: 10px 16px;
  }

}
/* =========================================
   ABOUT – NAVBAR COMPACT LANDSCAPE
   ========================================= */

@media (max-width: 1100px) and (orientation: landscape) {

  /* Header più basso */
  .feed-header {
    padding: 6px 20px !important;
  }

  /* Logo */
  .feed-logo-text {
    height: 22px !important;
  }

  .feed-logo-text img {
    height: 25px !important;
  }

  /* Nav container */
  .feed-desktop-nav {
    gap: 5px !important;
  }

  /* Link */
  .nav-link {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
  }

  .nav-link.highlight {
    padding: 4px 10px !important;
    font-size: 10px !important;
  }

}