/* ── Intro Cinematic Overlay ── */
.intro-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: #000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: 'Consolas', 'Courier New', monospace;
    color: #33ff33;
    overflow: hidden;
}

/* ── Scene Container ── */
.intro-scene {
    width: 100%;
    max-width: 900px;
    height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.intro-scene.active {
    opacity: 1;
}
.intro-scene svg {
    width: 100%;
    height: 100%;
}

/* ── Narration Text Bar ── */
.intro-text {
    position: absolute;
    bottom: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    max-width: 800px;
    text-align: center;
    font-size: 18px;
    line-height: 1.6;
    color: #ccffcc;
    text-shadow: 0 0 8px rgba(51, 255, 51, 0.4);
    min-height: 2em;
}
.intro-text .cursor {
    display: inline-block;
    width: 2px;
    height: 1.1em;
    background: #33ff33;
    vertical-align: text-bottom;
    margin-left: 2px;
    animation: intro-cursor-blink 0.7s step-end infinite;
}

/* ── Skip Button ── */
.intro-skip {
    position: absolute;
    bottom: 20px;
    right: 30px;
    font-size: 13px;
    color: #557755;
    cursor: pointer;
    transition: opacity 0.4s ease, color 0.2s;
    user-select: none;
    z-index: 1;
}
.intro-skip:hover {
    color: #88cc88;
}
.intro-skip.faded {
    opacity: 0;
    pointer-events: none;
}

/* ── Scene-specific SVG Animations ── */

/* Packet flow along a path */
@keyframes packet-flow {
    0% { transform: translateX(0); opacity: 1; }
    90% { opacity: 1; }
    100% { transform: translateX(280px); opacity: 0; }
}
.packet-flow {
    animation: packet-flow 2s linear infinite;
}
.packet-flow-delay1 { animation-delay: 0.5s; }
.packet-flow-delay2 { animation-delay: 1.0s; }
.packet-flow-delay3 { animation-delay: 1.5s; }

/* Packet fork to shadow node */
@keyframes packet-fork {
    0% { transform: translate(0, 0); opacity: 0; }
    20% { opacity: 1; }
    100% { transform: translate(40px, 100px); opacity: 0; }
}
.packet-fork {
    animation: packet-fork 2s ease-in infinite;
    animation-delay: 3s;
}

/* Eye pulse */
@keyframes eye-pulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 1; }
}
.eye-pulse {
    animation: eye-pulse 2s ease-in-out infinite;
    transform-origin: center;
}

/* Data stream flowing into building */
@keyframes data-stream-in {
    0% { stroke-dashoffset: 200; opacity: 0.3; }
    50% { opacity: 0.8; }
    100% { stroke-dashoffset: 0; opacity: 0.3; }
}
.data-stream {
    stroke-dasharray: 200;
    animation: data-stream-in 2.5s linear infinite;
}
.data-stream-d1 { animation-delay: 0.3s; }
.data-stream-d2 { animation-delay: 0.8s; }
.data-stream-d3 { animation-delay: 1.3s; }
.data-stream-d4 { animation-delay: 1.8s; }

/* User flicker (being scanned) */
@keyframes user-flicker {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}
.user-flicker {
    animation: user-flicker 1.5s ease-in-out infinite;
}
.user-flicker-d1 { animation-delay: 0.2s; }
.user-flicker-d2 { animation-delay: 0.6s; }
.user-flicker-d3 { animation-delay: 1.0s; }
.user-flicker-d4 { animation-delay: 1.4s; }

/* Terminal cursor blink */
@keyframes intro-cursor-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}
.cursor-blink {
    animation: intro-cursor-blink 0.7s step-end infinite;
}

/* Ghost watermark fade */
@keyframes ghost-watermark {
    0%, 100% { opacity: 0.03; }
    50% { opacity: 0.08; }
}
.ghost-watermark {
    animation: ghost-watermark 3s ease-in-out infinite;
}

/* Node light up */
@keyframes node-light {
    0% { opacity: 0.15; }
    100% { opacity: 1; }
}

/* Access granted flash */
@keyframes access-granted {
    0% { opacity: 0; }
    30% { opacity: 1; }
    100% { opacity: 1; filter: drop-shadow(0 0 6px #33ff33); }
}
.access-granted {
    animation: access-granted 0.6s ease-out forwards;
}

/* Scene fade */
@keyframes scene-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Progress bar fill */
@keyframes progress-fill {
    from { width: 0; }
    to { width: 100%; }
}

/* Nexus label fade */
@keyframes label-fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}
.label-fade {
    animation: label-fade-in 1.5s ease forwards;
    animation-delay: 2s;
    opacity: 0;
}

/* Email notification pulse */
@keyframes email-pulse {
    0%, 100% { filter: drop-shadow(0 0 4px #33ff33); }
    50% { filter: drop-shadow(0 0 12px #33ff33) drop-shadow(0 0 20px rgba(51, 255, 51, 0.4)); }
}
.email-pulse {
    animation: email-pulse 1.5s ease-in-out infinite;
}

/* Final cursor morph */
@keyframes cursor-morph-out {
    0% { opacity: 1; }
    70% { opacity: 1; }
    100% { opacity: 0; }
}