/* ===================================
   LLITTL.com — Styles
   Candy-bright terminal + handwritten opulence
   =================================== */

/* ---- Reset & Base ---- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --abyss: #0a0a0f;
    --deep-indigo: #1a1a2e;
    --candy-yellow: #ffe66d;
    --terminal-white: #f8f8f2;
    --violet-fizz: #c77dff;
    --electric-mint: #00f5d4;
    --neon-fuchsia: #ff2d6f;
}

html {
    scroll-behavior: smooth;
}

body {
    background: var(--abyss);
    color: var(--terminal-white);
    font-family: 'Caveat', cursive;
    font-size: 18px;
    line-height: 1.8;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* ---- Scanline Overlay (CRT texture) ---- */
#scanline-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1000;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0px,
        transparent 2px,
        rgba(0, 0, 0, 0.03) 2px,
        rgba(0, 0, 0, 0.03) 4px
    );
}

/* ---- Left Glitch Pixel Line ---- */
#glitch-line {
    position: fixed;
    top: 0;
    left: 0;
    width: 3px;
    height: 100%;
    z-index: 999;
    background: linear-gradient(
        to bottom,
        var(--neon-fuchsia),
        var(--violet-fizz),
        var(--electric-mint),
        var(--neon-fuchsia),
        var(--candy-yellow),
        var(--violet-fizz)
    );
    background-size: 3px 600%;
    animation: glitchLinePulse 6s ease-in-out infinite;
    opacity: 0.6;
}

@keyframes glitchLinePulse {
    0%, 100% { opacity: 0.4; background-position: 0 0%; }
    25% { opacity: 0.8; }
    50% { opacity: 0.3; background-position: 0 100%; }
    75% { opacity: 0.7; }
}

/* ---- Gradient Mesh Background ---- */
#gradient-mesh {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    filter: blur(80px);
    opacity: 0.25;
    background:
        radial-gradient(ellipse at 20% 30%, var(--neon-fuchsia), transparent 60%),
        radial-gradient(ellipse at 80% 70%, var(--violet-fizz), transparent 60%),
        radial-gradient(ellipse at 50% 50%, var(--deep-indigo), transparent 80%);
    animation: meshShift 20s ease-in-out infinite alternate;
}

@keyframes meshShift {
    0% {
        background:
            radial-gradient(ellipse at 20% 30%, var(--neon-fuchsia), transparent 60%),
            radial-gradient(ellipse at 80% 70%, var(--violet-fizz), transparent 60%),
            radial-gradient(ellipse at 50% 50%, var(--deep-indigo), transparent 80%);
    }
    50% {
        background:
            radial-gradient(ellipse at 70% 20%, var(--violet-fizz), transparent 60%),
            radial-gradient(ellipse at 30% 80%, var(--neon-fuchsia), transparent 60%),
            radial-gradient(ellipse at 60% 40%, var(--deep-indigo), transparent 80%);
    }
    100% {
        background:
            radial-gradient(ellipse at 40% 60%, var(--neon-fuchsia), transparent 60%),
            radial-gradient(ellipse at 60% 20%, var(--electric-mint), transparent 60%),
            radial-gradient(ellipse at 50% 50%, var(--deep-indigo), transparent 80%);
    }
}

/* ---- Particle Canvas ---- */
#particle-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

/* ---- Main Scroll Container ---- */
#scroll-container {
    position: relative;
    z-index: 2;
    scroll-snap-type: y mandatory;
    overflow-y: auto;
    height: 100vh;
    scroll-behavior: smooth;
}

/* ---- Scene (each 100vh section) ---- */
.scene {
    min-height: 100vh;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: start;
    position: relative;
    transition: filter 600ms ease, opacity 600ms ease;
}

.scene.blur-out {
    filter: blur(8px);
    opacity: 0.3;
}

.scene.blur-in {
    filter: blur(12px);
    opacity: 0;
    animation: focusIn 800ms ease 200ms forwards;
}

@keyframes focusIn {
    to {
        filter: blur(0);
        opacity: 1;
    }
}

.scene-content {
    max-width: 640px;
    width: 90%;
    text-align: center;
    padding: 2rem 1rem;
    position: relative;
    z-index: 5;
}

/* ---- Typography ---- */
.display-title {
    font-family: 'Caveat', cursive;
    font-size: clamp(72px, 10vw, 160px);
    font-weight: 700;
    color: var(--terminal-white);
    letter-spacing: 0.05em;
    margin-bottom: 0.2em;
    position: relative;
}

.subtitle-caveat {
    font-family: 'Caveat', cursive;
    font-size: clamp(24px, 4vw, 40px);
    color: var(--electric-mint);
    margin-bottom: 1.5em;
    opacity: 0.9;
}

.section-title {
    font-size: clamp(48px, 8vw, 96px);
    margin-bottom: 0.6em;
    color: var(--terminal-white);
}

.satisfy-title {
    font-family: 'Satisfy', cursive;
}

.body-text {
    font-family: 'Caveat', cursive;
    font-size: 22px;
    line-height: 1.8;
    color: var(--terminal-white);
    margin-bottom: 1.2em;
    opacity: 0.9;
}

.mono-whisper {
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    color: var(--electric-mint);
    letter-spacing: 0.05em;
}

.mono-line {
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    color: var(--electric-mint);
    line-height: 2.2;
    text-align: left;
}

/* ---- Cursor Divider ---- */
.cursor-divider {
    font-family: 'Space Mono', monospace;
    font-size: 48px;
    color: var(--candy-yellow);
    animation: cursorBlink 1s step-end infinite;
    margin: 0.5em 0;
}

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

/* ---- Glitch Text Effect ---- */
.glitch-text {
    position: relative;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

.glitch-text::before {
    color: var(--neon-fuchsia);
    z-index: -1;
}

.glitch-text::after {
    color: var(--electric-mint);
    z-index: -1;
}

.glitch-text.glitching::before {
    animation: glitchBefore 200ms steps(2) forwards;
    opacity: 0.8;
}

.glitch-text.glitching::after {
    animation: glitchAfter 200ms steps(2) forwards;
    opacity: 0.8;
}

@keyframes glitchBefore {
    0% { clip-path: inset(40% 0 20% 0); transform: translate(2px, 0); }
    25% { clip-path: inset(10% 0 60% 0); transform: translate(-2px, 0); }
    50% { clip-path: inset(70% 0 5% 0); transform: translate(2px, 0); }
    75% { clip-path: inset(20% 0 40% 0); transform: translate(-1px, 0); }
    100% { clip-path: inset(50% 0 30% 0); transform: translate(0, 0); opacity: 0; }
}

@keyframes glitchAfter {
    0% { clip-path: inset(60% 0 10% 0); transform: translate(-2px, 0); }
    25% { clip-path: inset(30% 0 40% 0); transform: translate(2px, 0); }
    50% { clip-path: inset(5% 0 70% 0); transform: translate(-2px, 0); }
    75% { clip-path: inset(50% 0 20% 0); transform: translate(1px, 0); }
    100% { clip-path: inset(20% 0 50% 0); transform: translate(0, 0); opacity: 0; }
}

/* ---- Typewriter Effect ---- */
.typewriter {
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid var(--neon-fuchsia);
    display: inline-block;
    max-width: 100%;
}

.typewriter.typed {
    border-right-color: transparent;
}

.typewriter.typing {
    animation: caretPulse 0.6s step-end infinite;
}

@keyframes caretPulse {
    0%, 50% { border-right-color: var(--neon-fuchsia); }
    51%, 100% { border-right-color: transparent; }
}

.typewriter-block {
    text-align: left;
    margin: 1.5em auto;
    padding: 1.5em;
    background: rgba(26, 26, 46, 0.6);
    border: 1px solid rgba(199, 125, 255, 0.2);
    border-radius: 4px;
}

.typewriter-block .mono-line {
    display: block;
    white-space: nowrap;
    overflow: hidden;
}

/* ---- Terminal Prompt Navigation ---- */
#terminal-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 60px;
    background: var(--abyss);
    border-top: 1px solid var(--neon-fuchsia);
    z-index: 500;
    display: flex;
    align-items: center;
    padding: 0 20px;
    gap: 12px;
}

.prompt-symbol {
    font-family: 'Space Mono', monospace;
    font-size: 16px;
    color: var(--neon-fuchsia);
    animation: cursorBlink 1s step-end infinite;
    flex-shrink: 0;
}

#terminal-input {
    font-family: 'Space Mono', monospace;
    font-size: 14px;
    color: var(--electric-mint);
    background: transparent;
    border: none;
    outline: none;
    flex: 0 0 180px;
    max-width: 180px;
    caret-color: var(--candy-yellow);
}

#terminal-input::placeholder {
    color: rgba(0, 245, 212, 0.3);
    font-style: italic;
}

#suggested-commands {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    overflow-x: auto;
    flex: 1;
}

.cmd-btn {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--electric-mint);
    opacity: 0.4;
    background: transparent;
    border: 1px solid rgba(0, 245, 212, 0.15);
    padding: 4px 12px;
    border-radius: 2px;
    cursor: pointer;
    white-space: nowrap;
    transition: opacity 0.3s ease, color 0.3s ease, border-color 0.3s ease, background 0.3s ease;
    flex-shrink: 0;
}

.cmd-btn:hover {
    opacity: 1;
    color: var(--candy-yellow);
    border-color: var(--candy-yellow);
    background: rgba(255, 230, 109, 0.08);
}

.cmd-btn.active {
    opacity: 1;
    color: var(--neon-fuchsia);
    border-color: var(--neon-fuchsia);
}

/* ---- Crown Icon ---- */
.crown-icon {
    width: 60px;
    margin: 1.5em auto;
    opacity: 0.7;
}

.crown-svg {
    width: 100%;
    height: auto;
}

.crown-bottom {
    margin-top: 2em;
}

/* ---- Gallery Grid ---- */
.gallery-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin: 2em 0;
}

.gallery-item {
    position: relative;
    aspect-ratio: 4 / 3;
    border-radius: 4px;
    overflow: hidden;
}

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

.gallery-placeholder[data-color="fuchsia"] {
    background: linear-gradient(135deg, rgba(255, 45, 111, 0.3), rgba(10, 10, 15, 0.8));
    border: 1px solid rgba(255, 45, 111, 0.3);
}

.gallery-placeholder[data-color="mint"] {
    background: linear-gradient(135deg, rgba(0, 245, 212, 0.3), rgba(10, 10, 15, 0.8));
    border: 1px solid rgba(0, 245, 212, 0.3);
}

.gallery-placeholder[data-color="violet"] {
    background: linear-gradient(135deg, rgba(199, 125, 255, 0.3), rgba(10, 10, 15, 0.8));
    border: 1px solid rgba(199, 125, 255, 0.3);
}

.gallery-placeholder[data-color="yellow"] {
    background: linear-gradient(135deg, rgba(255, 230, 109, 0.3), rgba(10, 10, 15, 0.8));
    border: 1px solid rgba(255, 230, 109, 0.3);
}

.gallery-label {
    font-family: 'Space Mono', monospace;
    font-size: 12px;
    color: var(--terminal-white);
    opacity: 0.7;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* ---- Glitch Image (RGB split on gallery items) ---- */
.glitch-image {
    position: relative;
}

.glitch-image::before,
.glitch-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: 0;
    transition: opacity 0.3s;
}

.glitch-image::before {
    background: rgba(255, 45, 111, 0.15);
    transform: translate(3px, 0);
}

.glitch-image::after {
    background: rgba(0, 245, 212, 0.15);
    transform: translate(-3px, 0);
}

.glitch-image:hover::before,
.glitch-image:hover::after {
    opacity: 1;
}

/* ---- Scanline Tear Animation ---- */
@keyframes scanlineTear {
    0% { transform: translateY(-100%); }
    100% { transform: translateY(100vh); }
}

.scene::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(
        to right,
        transparent 0%,
        rgba(199, 125, 255, 0.3) 20%,
        rgba(255, 45, 111, 0.2) 50%,
        rgba(0, 245, 212, 0.3) 80%,
        transparent 100%
    );
    animation: scanlineTear 8s linear infinite;
    pointer-events: none;
    z-index: 10;
}

/* ---- Contact Address ---- */
.contact-address {
    font-size: 16px;
    color: var(--neon-fuchsia);
    margin-top: 1.5em;
    letter-spacing: 0.1em;
    transition: color 0.3s ease, text-shadow 0.3s ease;
}

.contact-address:hover {
    color: var(--candy-yellow);
    text-shadow: 0 0 20px rgba(255, 230, 109, 0.5);
}

/* ---- Responsive ---- */
@media (max-width: 600px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    #terminal-input {
        flex: 0 0 100px;
        max-width: 100px;
    }

    .cmd-btn {
        font-size: 11px;
        padding: 3px 8px;
    }

    .body-text {
        font-size: 18px;
    }

    .typewriter-block {
        padding: 1em;
    }

    .mono-line {
        font-size: 12px;
    }
}

/* ---- Scene padding for bottom bar ---- */
.scene {
    padding-bottom: 60px;
}