@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800;900&display=swap');

:root {
    --bg: #060608;
    --surface: rgba(255, 255, 255, 0.02);
    --surface-hover: rgba(255, 255, 255, 0.05);
    --border: rgba(255, 255, 255, 0.1);
    --text: #f1f5f9;
    --text-dim: #94a3b8;

    /* Bespoke Cyberpunk Palette */
    --accent: #00f0ff;      /* Neon Cyan */
    --accent-alt: #ff003c;  /* Neon Magenta/Red */
    --gradient-1: linear-gradient(90deg, #00f0ff, #0077ff);
    --gradient-2: linear-gradient(90deg, #ff003c, #ff007f);
}

/* Noise overlay for texture */
.noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.05;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* ── GLOBAL ─────────────────────────── */

.reveal-viewport {
    background: var(--bg) !important;
}

.reveal {
    font-family: 'Outfit', system-ui, sans-serif;
    font-size: 24px; /* Scaled down to prevent overflow on 720p height */
    color: var(--text);
}

.reveal .slides {
    text-align: left;
}

.reveal .slides section {
    padding: 0 40px;
    box-sizing: border-box;
    height: 100%;
}

/* ── TYPOGRAPHY ─────────────────────── */

.reveal h1,
.reveal h2,
.reveal h3,
.reveal h4 {
    font-family: 'Outfit', sans-serif;
    text-transform: none;
    letter-spacing: -0.04em;
    line-height: 1.1;
    color: #fff;
    margin: 0;
}

.reveal h1 { font-size: 2.8em; font-weight: 900; margin-bottom: 12px; }
.reveal h2 { font-size: 1.8em; font-weight: 800; margin-bottom: 24px; }
.reveal h3 { font-size: 1.3em; font-weight: 700; color: var(--accent); margin-bottom: 12px; }
.reveal h4 { font-size: 1.05em; font-weight: 700; margin-bottom: 8px; letter-spacing: -0.01em; }

.gradient-text {
    background: var(--gradient-1);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gradient-text-2 {
    background: var(--gradient-2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.reveal p { 
    font-size: 0.85em; 
    line-height: 1.5; 
    color: var(--text-dim);
    margin-bottom: 16px;
}

.reveal ul, .reveal ol { margin-left: 1.2em; }
.reveal li { 
    margin-bottom: 10px; 
    font-size: 0.85em; 
    line-height: 1.4; 
    color: var(--text-dim);
}
.reveal li strong { color: var(--text); }

/* ── TITLE SLIDE ────────────────────── */

.slide-title {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
    align-items: flex-start !important; /* Left aligned for brutalist feel */
    text-align: left !important;
    position: relative;
    height: 100%;
}

/* Sharp geometric accent */
.slide-title::before {
    content: '';
    position: absolute;
    top: 50%;
    right: -10%;
    transform: translateY(-50%);
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(0, 240, 255, 0.1), transparent 60%);
    pointer-events: none;
}

.slide-meta {
    display: flex;
    gap: 40px;
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
    width: 100%;
}

.meta-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.75em;
    color: var(--text-dim);
}

.meta-item strong {
    color: var(--accent);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-size: 0.7em;
}

/* ── CONTENT SLIDES ─────────────────── */

.slide-content {
    display: flex !important;
    flex-direction: column;
    justify-content: center !important;
    height: 100%;
}

.section-badge {
    display: inline-block;
    padding: 4px 12px;
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 0; /* Sharp edges */
    font-size: 0.55em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 20px;
    align-self: flex-start;
}

/* === GRID LAYOUTS === */
.col-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    width: 100%;
}

.col-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}

/* === SHARP MINIMAL CARDS (Not generic rounded glass) === */
.card {
    background: transparent;
    border-left: 2px solid var(--border); /* Brutalist left border */
    padding: 0 0 0 20px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.card:hover { 
    border-left-color: var(--accent);
}

.card h4 {
    color: #fff !important;
    margin: 0 0 8px 0;
}

.card p, .card li {
    font-size: 0.75em;
    margin: 0;
}
.card ul { margin-top: 8px; margin-left: 1.2em; }
.card li { margin-bottom: 6px; }

/* === METRIC CALLOUTS === */
.metric-callout {
    font-size: 3em;
    font-weight: 900;
    color: var(--text);
    letter-spacing: -0.04em;
    line-height: 1;
}
.metric-callout span {
    font-size: 0.4em;
    color: var(--accent);
    vertical-align: top;
    margin-left: 4px;
}

/* === PHASE INDICATOR === */
.phase-indicator {
    display: flex;
    justify-content: flex-start;
    gap: 0;
    margin-bottom: 30px;
    width: 100%;
    border-bottom: 1px solid var(--border);
}
.phase-badge {
    padding: 10px 20px;
    font-size: 0.65em;
    font-weight: 600;
    color: var(--text-dim);
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.phase-badge.active {
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
}

/* === TABLE STYLING === */
.reveal table {
    font-size: 0.7em;
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}
.reveal table th {
    color: var(--text);
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.reveal table td {
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    color: var(--text-dim);
}

/* === MATH FORMULA BLOCKS === */
.math-block {
    background: transparent;
    padding: 16px;
    text-align: left;
    margin: 10px 0;
    border-left: 2px solid var(--accent-alt);
}

/* References slide */
.references-slide li {
    font-size: 0.7em !important;
    margin-bottom: 10px;
}

/* Grid for Agenda */
.agenda-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
    width: 100%;
}

.agenda-item {
    background: transparent;
    border-bottom: 1px solid var(--border);
    padding: 12px 0;
    font-size: 0.85em;
    display: flex;
    align-items: center;
    gap: 16px;
}

.agenda-item:hover {
    border-bottom-color: var(--accent);
}

.agenda-num {
    color: var(--accent);
    font-weight: 900;
    font-size: 1.1em;
}


/* === HIGH-END METHODOLOGY UI COMPONENTS === */

/* Status Pills & Indicators */
.status-pill {
    font-size: 0.6em;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 2px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.status-pill.active {
    background: rgba(0, 240, 255, 0.15);
    color: var(--accent);
    border: 1px solid var(--accent);
}
.status-pill.alert {
    background: rgba(255, 0, 60, 0.15);
    color: var(--accent-alt);
    border: 1px solid var(--accent-alt);
}

.live-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 8px var(--accent);
    margin-right: 6px;
}
.present .live-dot {
    animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(1.3); }
}

/* System Monitor Panel (Slide 8) */
.system-monitor {
    background: rgba(255, 255, 255, 0.015);
    border: 1px solid var(--border);
    border-top: 2px solid var(--accent);
    padding: 20px;
    font-size: 0.8em;
}
.monitor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    color: #fff;
}
.monitor-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,0.03);
    color: var(--text-dim);
}

/* Terminal Window (Slide 10) */
.terminal-window {
    background: #000;
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 0.7em;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.terminal-header {
    background: rgba(255, 255, 255, 0.05);
    padding: 8px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid var(--border);
}
.terminal-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.dot-red { background: #ff5f56; }
.dot-yellow { background: #ffbd2e; }
.dot-green { background: #27c93f; }

.terminal-title {
    margin-left: 12px;
    color: var(--text-dim);
    font-size: 0.85em;
}
.terminal-body {
    padding: 16px;
    color: #e2e8f0;
    line-height: 1.6;
}
.term-line { margin-bottom: 6px; }
.term-prompt { color: var(--accent); }
.term-cmd { color: #fff; }
.term-val { color: #a3e635; }
.term-warn { color: var(--accent-alt); font-weight: bold; }

/* Security Pipeline Visualizer (Slide 11) */
.pipeline-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    width: 100%;
    margin-top: 20px;
}
.pipeline-card {
    background: transparent;
    border: 1px solid var(--border);
    border-top: 3px solid var(--accent);
    padding: 16px;
    position: relative;
}

/* === GOD-TIER METHODOLOGY SVG ANIMATIONS (ULTRA-SMOOTH) === */
.svg-deck-container {
    width: 100%;
    background: rgba(10, 10, 15, 0.6);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 16px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    box-shadow: inset 0 0 40px rgba(0,0,0,0.9);
}

/* Glowing Nodes & Filters */
.glow-cyan { filter: drop-shadow(0 0 10px rgba(0,240,255,0.6)); }
.glow-red { filter: drop-shadow(0 0 12px rgba(255,0,60,0.7)); }
.glow-purple { filter: drop-shadow(0 0 12px rgba(168,85,247,0.7)); }

/* === SEQUENTIAL INTUITIVE METHODOLOGY SVG ANIMATIONS === */

/* Slide 8: 2-Phase Sequential Traffic Diverter */
/* Legitimate Traffic (Green Box) Phase: 0s - 3.5s */
.present .green-pkt {
    animation: moveGreenPkt 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Malicious Traffic (Red Box) Phase: 4s - 7.5s */
.present .red-pkt {
    animation: moveRedPkt 8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Gateway Mode Flashes */
.present .gateway-box {
    animation: gatewayStatus 8s ease-in-out infinite;
}

/* Diverted Red Path Beam */
.present .divert-path {
    animation: pathDivert 8s ease-in-out infinite;
}

/* Production Node Response */
.present .prod-response {
    animation: prodPulse 8s ease-in-out infinite;
}

/* Shadow Honeypot Trap Response */
.present .honeypot-response {
    animation: honeypotPulse 8s ease-in-out infinite;
}

/* Keyframe Definitions for Slide 8 */
@keyframes moveGreenPkt {
    0% { transform: translate(0, 0); opacity: 0; }
    5% { opacity: 1; }
    20% { transform: translate(140px, 0); opacity: 1; } /* Hits Gateway */
    35% { transform: translate(320px, -40px); opacity: 1; } /* Reaches Prod Cluster */
    42%, 100% { transform: translate(320px, -40px); opacity: 0; }
}

@keyframes moveRedPkt {
    0%, 45% { transform: translate(0, 0); opacity: 0; }
    50% { opacity: 1; }
    65% { transform: translate(140px, 0); opacity: 1; } /* Hits Gateway */
    80% { transform: translate(270px, 65px); opacity: 1; } /* Lands cleanly at entrance of Honeypot */
    92%, 100% { transform: translate(270px, 65px); opacity: 0; }
}

@keyframes gatewayStatus {
    0%, 40% { stroke: #a3e635; filter: drop-shadow(0 0 8px #a3e635); } /* Green Mode */
    45%, 90% { stroke: var(--accent-alt); filter: drop-shadow(0 0 12px var(--accent-alt)); } /* Red Alert Mode */
    95%, 100% { stroke: #a3e635; filter: drop-shadow(0 0 8px #a3e635); }
}

@keyframes pathDivert {
    0%, 45% { stroke: var(--border); stroke-width: 1.5px; opacity: 0.2; }
    50%, 90% { stroke: var(--accent-alt); stroke-width: 3px; opacity: 1; filter: drop-shadow(0 0 8px var(--accent-alt)); }
    95%, 100% { stroke: var(--border); stroke-width: 1.5px; opacity: 0.2; }
}

@keyframes prodPulse {
    0%, 25% { stroke: var(--border); fill: rgba(255,255,255,0.01); }
    30%, 40% { stroke: #a3e635; fill: rgba(163,230,53,0.1); filter: drop-shadow(0 0 10px #a3e635); }
    45%, 100% { stroke: var(--border); fill: rgba(255,255,255,0.01); }
}

@keyframes honeypotPulse {
    0%, 70% { stroke: #a855f7; fill: rgba(168,85,247,0.02); }
    75%, 90% { stroke: var(--accent-alt); fill: rgba(255,0,60,0.15); filter: drop-shadow(0 0 14px var(--accent-alt)); }
    95%, 100% { stroke: #a855f7; fill: rgba(168,85,247,0.02); }
}


/* Slide 11: 3-Pod Infection & Evacuation Sequential Animations */

/* Pod 1 Infection State */
.present .pod1-box {
    animation: pod1Infect 9s ease-in-out infinite;
}
.present .pod1-txt-normal { animation: pod1TxtNorm 9s ease-in-out infinite; }
.present .pod1-txt-hacked { animation: pod1TxtHack 9s ease-in-out infinite; }

/* Pod 2 & Pod 3 Evacuation (Slide over after infection) */
.present .evac-pods {
    animation: evacSlide 9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Honeypot Trap Shield (Locks after evacuation) */
.present .trap-shield {
    animation: trapLock 9s ease-in-out infinite;
}

/* Keyframes for Slide 11 */
@keyframes pod1Infect {
    0%, 25% { stroke: #a3e635; fill: #060608; filter: none; }
    30%, 85% { stroke: var(--accent-alt); fill: rgba(255,0,60,0.2); filter: drop-shadow(0 0 10px var(--accent-alt)); }
    95%, 100% { stroke: #a3e635; fill: #060608; filter: none; }
}

@keyframes pod1TxtNorm {
    0%, 25% { opacity: 1; }
    30%, 100% { opacity: 0; }
}

@keyframes pod1TxtHack {
    0%, 25% { opacity: 0; }
    30%, 85% { opacity: 1; }
    95%, 100% { opacity: 0; }
}

@keyframes evacSlide {
    0%, 40% { transform: translate(0, 0); opacity: 1; } /* Delay until after infection */
    52%, 80% { transform: translate(405px, 0); opacity: 1; } /* Evacuated to Backup Node 02 */
    92%, 100% { transform: translate(0, 0); opacity: 1; }
}

@keyframes trapLock {
    0%, 60% { stroke: var(--border); fill: transparent; opacity: 0.1; }
    68%, 85% { stroke: var(--accent-alt); fill: rgba(255,0,60,0.12); opacity: 1; filter: drop-shadow(0 0 16px var(--accent-alt)); }
    95%, 100% { stroke: var(--border); fill: transparent; opacity: 0.1; }
}

/* Slide 10: 2-Phase Sequential String Scanner & Suspicion Gauge */

/* Phase 1: Good Command Text (0s - 3.5s) */
.present .scan-good-txt {
    animation: seqGoodTxt 8s ease-in-out infinite;
}

/* Phase 2: Bad Command Text (4s - 7.5s) */
.present .scan-bad-txt {
    animation: seqBadTxt 8s ease-in-out infinite;
}

/* Laser Scanner Movement & Color */
.present .laser-line-seq {
    animation: seqLaserSweep 8s ease-in-out infinite;
}

/* Gauge Arc Fill & Color */
.present .gauge-arc-seq {
    animation: seqGaugeFill 8s ease-in-out infinite;
}

/* Score Number Toggle */
.present .score-val-good { animation: seqGoodScore 8s ease-in-out infinite; }
.present .score-val-bad { animation: seqBadScore 8s ease-in-out infinite; }

/* Status Box State */
.present .status-box-seq {
    animation: seqStatusBox 8s ease-in-out infinite;
}
.present .status-txt-good { animation: seqGoodScore 8s ease-in-out infinite; }
.present .status-txt-bad { animation: seqBadScore 8s ease-in-out infinite; }

/* Keyframes for Slide 10 */
@keyframes seqGoodTxt {
    0%, 40% { opacity: 1; }
    45%, 100% { opacity: 0; }
}

@keyframes seqBadTxt {
    0%, 40% { opacity: 0; }
    45%, 90% { opacity: 1; }
    95%, 100% { opacity: 0; }
}

@keyframes seqLaserSweep {
    0% { transform: translateX(0px); opacity: 0; stroke: #a3e635; }
    5% { opacity: 1; stroke: #a3e635; }
    30% { transform: translateX(240px); opacity: 1; stroke: #a3e635; filter: drop-shadow(0 0 10px #a3e635); }
    38%, 45% { transform: translateX(240px); opacity: 0; }
    50% { transform: translateX(0px); opacity: 1; stroke: var(--accent-alt); }
    80% { transform: translateX(240px); opacity: 1; stroke: var(--accent-alt); filter: drop-shadow(0 0 12px var(--accent-alt)); }
    90%, 100% { transform: translateX(240px); opacity: 0; }
}

@keyframes seqGaugeFill {
    0%, 45% { stroke-dashoffset: 238; stroke: #a3e635; filter: drop-shadow(0 0 6px #a3e635); }
    55%, 90% { stroke-dashoffset: 68; stroke: var(--accent-alt); filter: drop-shadow(0 0 12px var(--accent-alt)); }
    95%, 100% { stroke-dashoffset: 238; stroke: #a3e635; }
}

@keyframes seqGoodScore {
    0%, 40% { opacity: 1; }
    45%, 100% { opacity: 0; }
}

@keyframes seqBadScore {
    0%, 40% { opacity: 0; }
    45%, 90% { opacity: 1; }
    95%, 100% { opacity: 0; }
}

@keyframes seqStatusBox {
    0%, 40% { stroke: #a3e635; fill: rgba(163,230,53,0.08); }
    45%, 90% { stroke: var(--accent-alt); fill: rgba(255,0,60,0.12); filter: drop-shadow(0 0 10px var(--accent-alt)); }
    95%, 100% { stroke: #a3e635; fill: rgba(163,230,53,0.08); }
}

.pipeline-step {
    font-size: 0.65em;
    font-weight: 900;
    color: var(--accent);
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    display: block;
}

/* Custom Smooth Easing for Slide Transitions */
.reveal .slides section {
    transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1) !important;
}

/* === TYPEWRITER CAPTION TICKER STYLES === */
.anim-caption-bar {
    width: 100%;
    background: #000;
    border: 1px solid var(--border);
    padding: 6px 10px;
    font-family: 'Fira Code', 'Courier New', monospace;
    font-size: 0.62em; /* Scaled down slightly to prevent box overflow */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    margin-top: 8px;
    border-radius: 4px;
    position: relative;
    overflow: hidden;
    height: 32px;
}

.type-cursor {
    display: inline-block;
    width: 6px;
    height: 12px;
    background: var(--accent);
    margin-left: 4px;
    vertical-align: middle;
}
.present .type-cursor {
    animation: blinkCursor 0.6s infinite;
}

@keyframes blinkCursor {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* Slide 8 Live Step-by-Step Typing Captions */
.present .cap8-p1 {
    animation: typeCap8P1 8s steps(45, end) infinite;
    position: absolute;
    left: 10px;
    top: 7px;
    white-space: nowrap;
    overflow: hidden;
}
.present .cap8-p2 {
    animation: typeCap8P2 8s steps(50, end) infinite;
    position: absolute;
    left: 10px;
    top: 7px;
    white-space: nowrap;
    overflow: hidden;
}

@keyframes typeCap8P1 {
    0% { width: 0; opacity: 1; color: #a3e635; }
    22%, 40% { width: 95%; opacity: 1; color: #a3e635; }
    43%, 100% { width: 0; opacity: 0; }
}
@keyframes typeCap8P2 {
    0%, 45% { width: 0; opacity: 0; }
    48% { width: 0; opacity: 1; color: var(--accent-alt); }
    72%, 90% { width: 95%; opacity: 1; color: var(--accent-alt); }
    95%, 100% { width: 0; opacity: 0; }
}

/* Slide 10 Live Step-by-Step Typing Captions */
.present .cap10-p1 {
    animation: typeCap10P1 8s steps(45, end) infinite;
    position: absolute;
    left: 10px;
    top: 7px;
    white-space: nowrap;
    overflow: hidden;
}
.present .cap10-p2 {
    animation: typeCap10P2 8s steps(50, end) infinite;
    position: absolute;
    left: 10px;
    top: 7px;
    white-space: nowrap;
    overflow: hidden;
}

@keyframes typeCap10P1 {
    0% { width: 0; opacity: 1; color: #a3e635; }
    22%, 40% { width: 95%; opacity: 1; color: #a3e635; }
    43%, 100% { width: 0; opacity: 0; }
}
@keyframes typeCap10P2 {
    0%, 45% { width: 0; opacity: 0; }
    48% { width: 0; opacity: 1; color: var(--accent-alt); }
    72%, 90% { width: 95%; opacity: 1; color: var(--accent-alt); }
    95%, 100% { width: 0; opacity: 0; }
}

/* Slide 11 Live Step-by-Step Typing Captions */
.present .cap11-p1 {
    animation: typeCap11P1 9s steps(45, end) infinite;
    position: absolute;
    left: 10px;
    top: 7px;
    white-space: nowrap;
    overflow: hidden;
}
.present .cap11-p2 {
    animation: typeCap11P2 9s steps(45, end) infinite;
    position: absolute;
    left: 10px;
    top: 7px;
    white-space: nowrap;
    overflow: hidden;
}
.present .cap11-p3 {
    animation: typeCap11P3 9s steps(50, end) infinite;
    position: absolute;
    left: 10px;
    top: 7px;
    white-space: nowrap;
    overflow: hidden;
}
.present .cap11-p4 {
    animation: typeCap11P4 9s steps(50, end) infinite;
    position: absolute;
    left: 10px;
    top: 7px;
    white-space: nowrap;
    overflow: hidden;
}

@keyframes typeCap11P1 {
    0% { width: 0; opacity: 1; color: var(--accent); }
    18%, 24% { width: 95%; opacity: 1; color: var(--accent); }
    26%, 100% { width: 0; opacity: 0; }
}
@keyframes typeCap11P2 {
    0%, 26% { width: 0; opacity: 0; }
    28% { width: 0; opacity: 1; color: var(--accent-alt); }
    40%, 46% { width: 95%; opacity: 1; color: var(--accent-alt); }
    48%, 100% { width: 0; opacity: 0; }
}
@keyframes typeCap11P3 {
    0%, 48% { width: 0; opacity: 0; }
    50% { width: 0; opacity: 1; color: #a3e635; }
    68%, 74% { width: 95%; opacity: 1; color: #a3e635; }
    76%, 100% { width: 0; opacity: 0; }
}
@keyframes typeCap11P4 {
    0%, 76% { width: 0; opacity: 0; }
    78% { width: 0; opacity: 1; color: var(--accent-alt); }
    88%, 93% { width: 95%; opacity: 1; color: var(--accent-alt); }
    96%, 100% { width: 0; opacity: 0; }
}