/* aboutme.css - Scroll Driven Dashboard System Layout Variables */
:root {
    --bg-dark: #07070a;
    --amber-soft: #f4d068;
    --card-surface: rgba(18, 17, 22, 0.88);
    --text-warm: #e6e4dd;
    --text-dim: #94918a;
    --border-warm: #222126;
    --neon-fuchsia: #ff00ff;
    --neon-green: #a3ff00;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; /* Enables smooth animated scroll actions natively */ }
html, body { width: 100%; background-color: var(--bg-dark); color: var(--text-warm); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; -webkit-font-smoothing: antialiased; }

/* CRT RECEPTOR SIMULATION MATRIX OVERLAY */
.crt-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.15) 50%);
    background-size: 100% 4px; z-index: 9999; pointer-events: none;
}

/* BACKGROUND INDUSTRIAL WALLPAPER STORAGE FRAME */
.cozy-wallpaper-frame { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; z-index: 1; overflow: hidden; pointer-events: none; }
#ambient-gif-canvas {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-image: url('https://media3.giphy.com/media/v1.Y2lkPTc5MGI3NjExbWl4c2ljM3A1amw1OG5scDN4NW1zNGt0OWdtcHRlMzRlNHBxaGpkZyZlcD12MV9pbnRlcm5hbF9naWZfYnlfaWQmY3Q9Zw/x5HlLDaLMZNVS/giphy.gif');
    background-size: cover; background-position: center;
    opacity: 0.70; z-index: 2; transition: opacity 0.5s ease;
}
.cozy-wallpaper-frame iframe {
    position: absolute; top: 50%; left: 50%; width: 100vw; height: 56.25vw; min-height: 100vh; min-width: 177.77vh;
    transform: translate(-50%, -50%) scale(1.15); opacity: 0; z-index: 1; filter: saturate(0.85); transition: opacity 0.6s ease;
}
body.ambient-ignited #ambient-gif-canvas { opacity: 0 !important; }
body.ambient-ignited .cozy-wallpaper-frame iframe { opacity: 0.38 !important; }

/* MAIN SCROLL SCENARIO CONTAINER */
.maximalist-scroll-container {
    position: relative; z-index: 5; width: 100%; max-width: 800px; margin: 0 auto; padding-bottom: 100px;
}

/* INTRODUCTION VIEWPORT BLOCK ELEMENT */
.intro-viewport-block {
    min-height: 95vh; display: flex; flex-direction: column; justify-content: center; gap: 32px;
    background: rgba(11, 10, 14, 0.9); padding: 48px; border-radius: 16px; margin-top: 40px; border: 1px solid var(--border-warm);
}
.room-header { display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--border-warm); padding-bottom: 16px; }
.cozy-back { font-size: 13px; color: var(--text-dim); text-decoration: none; font-family: monospace; }
.cozy-back:hover { color: var(--amber-soft); }
.room-title { font-size: 32px; font-weight: 700; font-family: Georgia, serif; }
.room-subtitle { font-size: 14px; color: var(--text-dim); }
.desk-intro-manifesto { font-size: 16px; line-height: 1.75; color: var(--text-warm); font-family: Georgia, serif; font-style: italic; }
.scroll-down-hint { font-size: 11px; font-family: monospace; color: var(--amber-soft); margin-top: 24px; letter-spacing: 0.5px; }

/* THE IMMORTAL STICKY CRT TV INTERACTIVE DECK HOUSING */
.sticky-hardware-shroud {
    position: sticky; top: 20px; z-index: 200; width: 100%;
    margin: 40px 0; padding: 16px; background: rgba(8, 7, 12, 0.94);
    border: 1px dashed var(--border-warm); border-radius: 12px; backdrop-filter: blur(8px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.retro-tv-housing { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.tv-bezel-frame { flex: 1; height: 64px; background: #141318; border: 1px solid #33323a; border-radius: 6px; padding: 8px; display: flex; align-items: center; }
.tv-screen-glitch-layer { width: 100%; font-family: monospace; font-size: 11px; color: #666570; text-align: center; overflow: hidden; white-space: nowrap; }

body.ambient-ignited .tv-screen-glitch-layer {
    color: var(--neon-green); text-shadow: 0 0 6px var(--neon-green); animation: pulse-text 1.5s infinite;
}
@keyframes pulse-text { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } }

.tv-hardware-controls { display: flex; gap: 12px; }
.tv-btn {
    background: transparent; border: 1px solid var(--border-warm); color: var(--text-dim);
    font-family: monospace; font-size: 11px; padding: 8px 16px; cursor: pointer; border-radius: 4px; transition: all 0.2s;
}
.tv-btn:not(:disabled):hover { border-color: var(--amber-soft); color: var(--amber-soft); }
#tv-power-btn.tv-on { border-color: var(--neon-fuchsia); color: var(--neon-fuchsia); box-shadow: 0 0 8px rgba(255,0,255,0.2); }

/* SCROLL DRIVEN REVEAL MATRIX GRIDS */
.scroll-cards-grid { display: flex; flex-direction: column; gap: 40px; margin-top: 40px; }

/* THE REVEAL NODE CARDS: Shifted down and transparent by default */
.reveal-card {
    background: var(--card-surface); border: 1px solid var(--border-warm); border-radius: 12px; padding: 32px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    
    /* Hardware accelerated reveal animation transformation hooks */
    opacity: 0; transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Triggered dynamically via the custom Intersection Observer API script below */
.reveal-card.pop-active {
    opacity: 1; transform: translateY(0);
    border-color: #32313a;
}

.card-meta-tag { font-size: 13px; font-weight: 600; font-family: monospace; color: var(--amber-soft); margin-bottom: 14px; }
.reveal-card p { font-size: 14px; line-height: 1.65; color: #b5b2aa; }
.cozy-redirect-btn { display: inline-block; border: 1px solid var(--border-warm); color: var(--text-warm); border-radius: 6px; padding: 8px 16px; font-size: 11px; font-weight: 500; text-align: center; text-decoration: none; margin-top: 16px; background: #19181f; }

/* BOTTOM FLUSH RETURN SYSTEM BUTTON */
.bottom-flush-footer { margin-top: 60px; display: flex; justify-content: center; }
.back-to-top-trigger {
    background: transparent; border: 1px dashed var(--border-warm); color: var(--text-dim);
    font-family: monospace; font-size: 12px; padding: 12px 24px; cursor: pointer; border-radius: 6px; transition: all 0.2s;
}
.back-to-top-trigger:hover { border-color: var(--amber-soft); color: var(--amber-soft); background: rgba(244,208,104,0.02); }

@media (max-width: 768px) {
    .maximalist-scroll-container { padding: 0 16px; }
    .retro-tv-housing { flex-direction: column; gap: 12px; }
    .tv-hardware-controls { width: 100%; }
    .tv-btn { flex: 1; text-align: center; }
}