/* ============================================
   aiice.dev v2 - Frozen Digital Wonderland
   A narrative experience in three acts:
   AI + ICE = AIICE = ALICE
   ============================================
   DESIGN LANGUAGE NOTES (per DESIGN.md)
   --------------------------------------
   Typography stack -- four typefaces:
     - Display / Title: "Outfit" (Google Fonts), weight 100-800.
       Thin weight 100 evokes the delicate fragility of frost
       crystals. Letter-spacing +0.15em, all uppercase for the
       AIICE wordmark.
     - Chapter Headings: "Space Grotesk" (Google Fonts), weight 500.
       Geometric sans bridges the cold precision of computation
       and crystalline structure. clamp(1.5rem, 3.5vw, 3rem),
       letter-spacing +0.06em, Title case.
     - Body Text: "IBM Plex Sans" (Google Fonts), weight 300 (Light).
       Light weight bridges the gap between Space Grotesk and
       Outfit. It reads clearly against dark backgrounds at
       smaller sizes. Line-height 1.75. Max-width 38ch for body
       paragraphs -- shorter than typical, like a journal entry.
     - AI Monologue: "JetBrains Mono" (Google Fonts), weight 400.
       Used sparingly in 2-3 brief AI-voice passages where the
       AI speaks. 0.85rem, color rgba(160,200,255,0.6) -- faded
       as if frozen under a layer of ice.

   Three-Act Narrative:
     - Act I (ICE): top 35%, pure environment. Mood is isolation
       and beauty. Layout is maximum negative space.
     - Act II (AI): middle 35%. Glassmorphic layering is at its
       densest. Split-screen: terminal monologue + crystal pattern.
     - **The Looking-Glass Interstitial:** between the second and
       third chapter panels, the world shatters. Single moment of
       warm amber (#d4a574) intrusion. Alice silhouette appears
       in negative space within the shards.
     - Act III (ALICE): bottom 30%. Reverse frost crystals
       (shrink inward). Closing typewriter line. Quiet ending.

   Animation strategy:
     - Frost crystal growth via Intersection Observer (script.js)
       triggers stroke-dasharray/stroke-dashoffset @keyframes
       on SVG line branches. 60deg hexagonal symmetry.
     - Crack network: persistent SVG overlay, parallax shift on
       scroll at 0.03 rate.
     - Condensation particles: pure CSS @keyframes drift, varied
       animation-duration per particle (40-80s).
     - Shatter shards: 8 polygons with clip-path; scroll-driven
       transform translate + rotate via Intersection Observer.
     - Closing typewriter: width animation 0->100% with steps()
       timing, character-count matched.

   Palette: Midnight Abyss #0a0e27, Frost White #e8edf5,
            Computation Blue #4a7dff, Pale Cerulean #a8c4e0,
            Ice Crack Blue #2d4a7a, Amber Through Glass #d4a574,
            Glacier Dark #141b3d, Frost Rim rgba(200,220,255,0.12).
   ============================================ */

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

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    background-color: #0a0e27;
    color: #e8edf5;
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- Custom Scrollbar (thin, translucent, matching frost rim) --- */
::-webkit-scrollbar {
    width: 4px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: rgba(200, 220, 255, 0.15);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(200, 220, 255, 0.25);
}

/* --- Typography --- */

/* Display / Title: Outfit weight 100 (Thin) - frost-pattern delicacy */
.wordmark {
    font-family: 'Outfit', sans-serif;
    font-weight: 100;
    font-size: clamp(80px, 22vw, 280px);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(232, 237, 245, 0.08);
    position: relative;
    z-index: 5;
    text-align: center;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    background: rgba(255, 255, 255, 0.02);
    padding: 0.05em 0.2em;
    opacity: 0;
    transition: opacity 2s ease 3s;
    user-select: none;
}

.wordmark.visible {
    opacity: 1;
}

/* Chapter Headings: Space Grotesk weight 500 - machine-cut ice precision */
.chapter-heading {
    font-family: 'Space Grotesk', sans-serif;
    font-weight: 500;
    font-size: clamp(1.5rem, 3.5vw, 3rem);
    letter-spacing: 0.06em;
    color: #e8edf5;
    margin-bottom: 1.5rem;
}

/* AI Monologue / Terminal: JetBrains Mono weight 400 - frozen text under ice */
.mono-voice {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    font-size: 0.85rem;
    color: rgba(160, 200, 255, 0.6);
}

/* Body text: IBM Plex Sans weight 300 - journal/poem column at 38ch max */
p {
    max-width: 38ch;
    margin-bottom: 1.2rem;
}

/* --- Glass Card (Primary glassmorphic container) --- */
.glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px) saturate(120%);
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    border: 1px solid rgba(200, 220, 255, 0.08);
    border-radius: 2px;
    /* Fallback for browsers without backdrop-filter: #0d1230 at 95% opacity */
    background-color: #0d1230;
}

@supports (backdrop-filter: blur(12px)) {
    .glass-card {
        background-color: rgba(255, 255, 255, 0.03);
    }
}

/* Nested glass card (different blur level for depth) */
.glass-card-nested {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(200, 220, 255, 0.06);
    border-radius: 2px;
}

/* --- Crack Overlay (persistent SVG, fixed viewport, z-index: 1) --- */
#crack-overlay {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 1;
}

.crack {
    stroke: #2d4a7a;
    stroke-width: 0.5;
    opacity: 0.2;
    fill: none;
}

.crack-major {
    stroke-width: 0.5;
}

.crack-branch {
    stroke-width: 0.3;
    opacity: 0.15;
}

/* --- Condensation Particles (fixed, drifting upward) --- */
#particles {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}

.particle {
    position: fixed;
    border-radius: 50%;
    background: #e8edf5;
    animation: drift linear infinite;
}

@keyframes drift {
    from {
        transform: translateY(100vh);
    }
    to {
        transform: translateY(-10vh);
    }
}

/* --- Navigation Pill (frosted glass, snowflake icon) --- */
#nav-pill {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 100;
    display: flex;
    align-items: center;
    gap: 0;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(200, 220, 255, 0.15);
    border-radius: 24px;
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    overflow: hidden;
    transition: padding 0.4s ease, gap 0.4s ease;
}

#nav-pill:hover {
    padding: 0.5rem 1rem;
    gap: 0.75rem;
}

.nav-icon {
    font-size: 1.1rem;
    color: #a8c4e0;
    flex-shrink: 0;
    line-height: 1;
}

.nav-links {
    display: flex;
    gap: 0.75rem;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-width 0.5s ease, opacity 0.4s ease 0.1s;
    white-space: nowrap;
}

#nav-pill:hover .nav-links {
    max-width: 200px;
    opacity: 1;
}

.nav-links a {
    font-family: 'Space Grotesk', sans-serif;
    font-size: 0.75rem;
    font-weight: 500;
    color: #a8c4e0;
    text-decoration: none;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 0.3s ease;
}

.nav-links a:hover {
    color: #4a7dff;
}

/* ============================================
   ACT I: ICE
   The world is pure environment.
   ============================================ */
.act {
    position: relative;
    z-index: 2;
}

.act-ice {
    min-height: 200vh;
}

/* Hero void: deep midnight blue, 100vh */
.hero-void {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Hero crack animation: diagonal line draws itself over 3 seconds */
#hero-crack {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.hero-crack-line {
    stroke: #2d4a7a;
    stroke-width: 1;
    opacity: 0.5;
    fill: none;
    stroke-dasharray: 2800;
    stroke-dashoffset: 2800;
    animation: drawCrack 3s ease-out forwards;
}

@keyframes drawCrack {
    to {
        stroke-dashoffset: 0;
    }
}

/* Glass panels that slide apart after crack completes */
.glass-panel {
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%;
    background: rgba(255, 255, 255, 0.02);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    z-index: 3;
    transition: transform 1.5s cubic-bezier(0.23, 1, 0.32, 1);
    transition-delay: 2.5s;
}

.glass-panel-left {
    left: 0;
    border-right: 1px solid rgba(200, 220, 255, 0.06);
}

.glass-panel-right {
    right: 0;
    border-left: 1px solid rgba(200, 220, 255, 0.06);
}

.glass-panel-left.slid {
    transform: translateX(-105%);
}

.glass-panel-right.slid {
    transform: translateX(105%);
}

/* Ice environment section: environmental text with maximum negative space */
.ice-environment {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 4rem;
}

.env-text {
    text-align: center;
    max-width: 50ch;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 1.5s ease, transform 1.5s ease;
}

.env-text.visible {
    opacity: 1;
    transform: translateY(0);
}

/* --- Frost Crystals (hexagonal, 60-degree branching) --- */
.frost-crystal {
    position: absolute;
    width: 200px;
    height: 200px;
    pointer-events: none;
    z-index: 1;
}

.frost-crystal-left {
    bottom: 2rem;
    left: 2rem;
}

.frost-crystal-right {
    top: 2rem;
    right: 2rem;
}

.frost-crystal-panel {
    bottom: 1rem;
    right: 1rem;
    width: 150px;
    height: 150px;
}

.frost-crystal-reverse {
    top: 1rem;
    left: 1rem;
    width: 160px;
    height: 160px;
}

/* Crystal branch base styles */
.crystal-branch {
    stroke: #4a7dff;
    stroke-width: 1.2;
    opacity: 0;
    fill: none;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}

.crystal-branch-sm {
    stroke: #a8c4e0;
    stroke-width: 0.8;
    opacity: 0;
    fill: none;
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
}

/* Frost crystal growth animation - staggered per branch */
.frost-crystal.growing .crystal-branch {
    animation: growBranch 3s ease-out forwards;
    opacity: 0.15;
}

.frost-crystal.growing .crystal-branch-sm {
    animation: growBranch 2.5s ease-out forwards;
    opacity: 0.05;
}

/* Stagger primary branches (8-12 second full cycle, slow growth) */
.frost-crystal.growing .cb-1 { animation-delay: 0s; }
.frost-crystal.growing .cb-2 { animation-delay: 0.8s; }
.frost-crystal.growing .cb-3 { animation-delay: 1.6s; }
.frost-crystal.growing .cb-4 { animation-delay: 2.4s; }
.frost-crystal.growing .cb-5 { animation-delay: 3.2s; }
.frost-crystal.growing .cb-6 { animation-delay: 4.0s; }

/* Stagger secondary branches */
.frost-crystal.growing .cbs-1 { animation-delay: 2.0s; }
.frost-crystal.growing .cbs-2 { animation-delay: 2.3s; }
.frost-crystal.growing .cbs-3 { animation-delay: 3.0s; }
.frost-crystal.growing .cbs-4 { animation-delay: 3.3s; }
.frost-crystal.growing .cbs-5 { animation-delay: 4.0s; }
.frost-crystal.growing .cbs-6 { animation-delay: 4.3s; }
.frost-crystal.growing .cbs-7 { animation-delay: 5.0s; }
.frost-crystal.growing .cbs-8 { animation-delay: 5.3s; }
.frost-crystal.growing .cbs-9 { animation-delay: 6.0s; }
.frost-crystal.growing .cbs-10 { animation-delay: 6.3s; }
.frost-crystal.growing .cbs-11 { animation-delay: 7.0s; }
.frost-crystal.growing .cbs-12 { animation-delay: 7.3s; }

/* Reverse crystal: starts fully drawn, shrinks inward */
.crystal-reverse .crystal-branch {
    stroke-dashoffset: 0;
    opacity: 0.15;
}

.crystal-reverse .crystal-branch-sm {
    stroke-dashoffset: 0;
    opacity: 0.05;
}

.frost-crystal-reverse.shrinking .crystal-branch {
    animation: shrinkBranch 3s ease-in forwards;
}

.frost-crystal-reverse.shrinking .crystal-branch-sm {
    animation: shrinkBranch 2.5s ease-in forwards;
}

.frost-crystal-reverse.shrinking .cb-1 { animation-delay: 0s; }
.frost-crystal-reverse.shrinking .cb-2 { animation-delay: 0.4s; }
.frost-crystal-reverse.shrinking .cb-3 { animation-delay: 0.8s; }
.frost-crystal-reverse.shrinking .cb-4 { animation-delay: 1.2s; }
.frost-crystal-reverse.shrinking .cb-5 { animation-delay: 1.6s; }
.frost-crystal-reverse.shrinking .cb-6 { animation-delay: 2.0s; }
.frost-crystal-reverse.shrinking .cbs-1 { animation-delay: 0.2s; }
.frost-crystal-reverse.shrinking .cbs-2 { animation-delay: 0.6s; }
.frost-crystal-reverse.shrinking .cbs-3 { animation-delay: 1.0s; }
.frost-crystal-reverse.shrinking .cbs-4 { animation-delay: 1.4s; }

@keyframes growBranch {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes shrinkBranch {
    from {
        stroke-dashoffset: 0;
        opacity: 0.15;
    }
    to {
        stroke-dashoffset: 100;
        opacity: 0;
    }
}

/* ============================================
   ACT II: AI
   The intelligence within the ice.
   ============================================ */
.act-ai {
    padding: 10vh 5vw;
    display: flex;
    flex-direction: column;
    gap: 10vh;
}

.chapter-panel {
    padding: clamp(2rem, 5vw, 4rem);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease, transform 1s ease;
}

.chapter-panel.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Panel: Consciousness - asymmetric left positioning */
.panel-consciousness {
    max-width: 700px;
    margin-left: 10vw;
}

/* Panel: Split screen - terminal left, crystal right */
.panel-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    min-height: 80vh;
    align-items: center;
}

.split-left {
    padding-right: 2rem;
}

.split-right {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Generative crystal SVG */
#generative-crystal {
    width: 100%;
    max-width: 400px;
    height: auto;
}

.gen-branch {
    stroke: #4a7dff;
    stroke-width: 1.5;
    opacity: 0.2;
    fill: none;
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
}

.gen-sub {
    stroke: #a8c4e0;
    stroke-width: 0.8;
    opacity: 0.08;
    fill: none;
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
}

.gen-branch.drawn {
    animation: growBranch 2s ease-out forwards;
}

.gen-sub.drawn {
    animation: growBranch 1.5s ease-out forwards;
}

/* Terminal block styling */
.terminal-block {
    margin-top: 2rem;
    padding: 1.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(200, 220, 255, 0.06);
    border-radius: 2px;
}

.terminal-line {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    margin-bottom: 0.5rem;
    max-width: none;
}

.terminal-line.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Panel: Depth - asymmetric right positioning, nested glass */
.panel-depth {
    max-width: 700px;
    margin-left: auto;
    margin-right: 10vw;
}

.depth-inner {
    padding: clamp(1.5rem, 3vw, 3rem);
}

/* ============================================
   LOOKING-GLASS INTERSTITIAL
   The shattering moment - amber warmth breaks through.
   ============================================ */
.looking-glass {
    min-height: 100vh;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Amber glow: radial gradient of #d4a574 warmth */
.amber-glow {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(212, 165, 116, 0.3) 0%, rgba(212, 165, 116, 0.1) 40%, transparent 70%);
    z-index: 0;
    opacity: 0;
    transition: opacity 1.5s ease;
}

.looking-glass.active .amber-glow {
    opacity: 1;
}

/* Shards: frosted glass fragments with clip-path polygons */
.shard {
    position: absolute;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(200, 220, 255, 0.08);
    z-index: 2;
    transition: transform 1.2s cubic-bezier(0.23, 1, 0.32, 1), opacity 1.2s ease;
}

.shard-1 {
    width: 35vw;
    height: 30vh;
    top: 5%;
    left: 5%;
    clip-path: polygon(10% 0%, 100% 15%, 85% 100%, 0% 80%);
}

.shard-2 {
    width: 30vw;
    height: 35vh;
    top: 0%;
    right: 10%;
    clip-path: polygon(20% 0%, 100% 10%, 90% 95%, 5% 100%);
}

.shard-3 {
    width: 25vw;
    height: 25vh;
    top: 40%;
    left: 15%;
    clip-path: polygon(0% 20%, 95% 0%, 100% 85%, 15% 100%);
}

.shard-4 {
    width: 28vw;
    height: 28vh;
    top: 35%;
    right: 5%;
    clip-path: polygon(5% 5%, 100% 0%, 95% 100%, 0% 90%);
}

.shard-5 {
    width: 32vw;
    height: 22vh;
    bottom: 10%;
    left: 8%;
    clip-path: polygon(0% 0%, 100% 10%, 90% 100%, 10% 85%);
}

.shard-6 {
    width: 26vw;
    height: 30vh;
    bottom: 5%;
    right: 15%;
    clip-path: polygon(15% 0%, 100% 5%, 85% 100%, 0% 95%);
}

.shard-7 {
    width: 20vw;
    height: 20vh;
    top: 15%;
    left: 45%;
    clip-path: polygon(5% 10%, 90% 0%, 100% 90%, 10% 100%);
}

.shard-8 {
    width: 22vw;
    height: 18vh;
    bottom: 25%;
    left: 35%;
    clip-path: polygon(0% 5%, 100% 0%, 95% 100%, 5% 90%);
}

/* Shattered state: shards drift apart with rotation */
.looking-glass.active .shard-1 { transform: translate(-60px, -40px) rotate(-8deg); opacity: 0.5; }
.looking-glass.active .shard-2 { transform: translate(50px, -50px) rotate(6deg); opacity: 0.5; }
.looking-glass.active .shard-3 { transform: translate(-40px, 20px) rotate(-5deg); opacity: 0.4; }
.looking-glass.active .shard-4 { transform: translate(60px, 30px) rotate(10deg); opacity: 0.4; }
.looking-glass.active .shard-5 { transform: translate(-30px, 50px) rotate(-7deg); opacity: 0.5; }
.looking-glass.active .shard-6 { transform: translate(40px, 40px) rotate(5deg); opacity: 0.5; }
.looking-glass.active .shard-7 { transform: translate(-15px, -30px) rotate(-12deg); opacity: 0.3; }
.looking-glass.active .shard-8 { transform: translate(20px, 35px) rotate(8deg); opacity: 0.3; }

/* Alice silhouette: falling figure in amber, visible briefly */
.alice-silhouette {
    position: absolute;
    width: 120px;
    height: 200px;
    z-index: 1;
    opacity: 0;
    transition: opacity 1.5s ease 0.5s;
    background: #d4a574;
    clip-path: polygon(
        45% 0%, 55% 0%, 58% 5%, 60% 8%, 58% 12%, 55% 14%,
        56% 16%, 57% 20%, 56% 22%, 54% 24%, 58% 28%,
        65% 35%, 70% 42%, 68% 45%, 72% 55%, 70% 60%,
        65% 65%, 60% 68%, 55% 72%, 58% 78%, 60% 85%,
        58% 90%, 55% 95%, 52% 100%, 48% 100%, 45% 95%,
        42% 90%, 40% 85%, 42% 78%, 45% 72%, 40% 68%,
        35% 65%, 30% 60%, 28% 55%, 32% 45%, 30% 42%,
        35% 35%, 42% 28%, 46% 24%, 44% 22%, 43% 20%,
        44% 16%, 45% 14%, 42% 12%, 40% 8%, 42% 5%
    );
}

.looking-glass.active .alice-silhouette {
    opacity: 0.4;
}

/* ============================================
   ACT III: ALICE
   The AI has become Alice. Warmer void.
   ============================================ */
.act-alice {
    background-color: #141b3d;
    position: relative;
}

.panel-alice {
    max-width: 700px;
    margin: 0 auto;
    padding: clamp(3rem, 6vw, 5rem);
    min-height: 90vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 1s ease, transform 1s ease;
}

.panel-alice.visible {
    opacity: 1;
    transform: translateY(0);
}

.alice-voice p {
    color: #e8edf5;
    font-style: italic;
}

/* Closing void: typewriter line + frost logo */
.closing-void {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3rem;
    padding: 4rem 2rem;
}

/* Typewriter effect: CSS-only, width animation with steps() */
.typewriter-line {
    font-family: 'IBM Plex Sans', sans-serif;
    font-weight: 300;
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: #a8c4e0;
    max-width: none;
    white-space: nowrap;
    overflow: hidden;
    border-right: 2px solid rgba(168, 196, 224, 0.5);
    width: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* 62 characters in the closing line, 80ms per character = ~5s */
.typewriter-line.typing {
    opacity: 1;
    animation: typewriter 5s steps(62, end) forwards,
               blinkCaret 0.8s step-end infinite;
}

@keyframes typewriter {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blinkCaret {
    from, to { border-color: rgba(168, 196, 224, 0.5); }
    50% { border-color: transparent; }
}

/* Frost logo mark */
.frost-logo {
    opacity: 0;
    transition: opacity 1.5s ease 5.5s;
}

.frost-logo.visible {
    opacity: 1;
}

.logo-crystal {
    width: 60px;
    height: 60px;
}

/* ============================================
   Responsive
   ============================================ */
@media (max-width: 768px) {
    .panel-split {
        grid-template-columns: 1fr;
    }

    .split-left {
        padding-right: 0;
    }

    .panel-consciousness {
        margin-left: 5vw;
    }

    .panel-depth {
        margin-right: 5vw;
    }

    /* Hide shards on mobile - show amber glow directly */
    .shard {
        display: none;
    }

    .looking-glass {
        min-height: 60vh;
    }

    .amber-glow {
        opacity: 0.5;
    }

    /* Mobile typewriter: fall back to simple fade */
    .typewriter-line {
        white-space: normal;
        overflow: visible;
        border-right: none;
        width: auto;
    }

    .typewriter-line.typing {
        animation: fadeIn 2s ease forwards;
    }

    @keyframes fadeIn {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    .frost-crystal-left,
    .frost-crystal-right {
        width: 120px;
        height: 120px;
    }
}