/* maljosim.com -- Y2K chrome metallic simulation */
/* Palette: #0A0A12 void, #14142B twilight, #C0C0C0 silver, #7B68EE violet, #00CED1 teal, #FF6EC7 fuchsia, #E8E8F0 ghost, #6B6B8D phantom, #2A2A4A steel, #1A1A3E cobalt, #0D0D2B abyss */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
    --void:#0A0A12;
    --twilight:#14142B;
    --silver:#C0C0C0;
    --violet:#7B68EE;
    --teal:#00CED1;
    --fuchsia:#FF6EC7;
    --ghost:#E8E8F0;
    --phantom:#6B6B8D;
    --steel:#2A2A4A;
    --cobalt:#1A1A3E;
    --abyss:#0D0D2B;
    --ease-mech:cubic-bezier(0.25,0.46,0.45,0.94);
}

html{font-size:16px;scroll-behavior:smooth}

body{
    background:var(--void);
    color:var(--ghost);
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.5vw,1.25rem);
    line-height:1.7;
    overflow-x:hidden;
    position:relative;
}

/* Scan lines */
.scan-lines{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9999;
    background:repeating-linear-gradient(
        to bottom,
        transparent,
        transparent 2px,
        rgba(255,255,255,0.03) 2px,
        rgba(255,255,255,0.03) 3px
    );
}

/* Wireframe grid */
.wireframe-grid{
    position:fixed;
    bottom:0;left:0;right:0;
    height:50vh;
    background:
        repeating-linear-gradient(90deg,var(--steel) 0px,var(--steel) 0.5px,transparent 0.5px,transparent 60px),
        repeating-linear-gradient(0deg,var(--steel) 0px,var(--steel) 0.5px,transparent 0.5px,transparent 60px);
    opacity:0.15;
    transform:perspective(800px) rotateX(55deg);
    transform-origin:bottom center;
    pointer-events:none;
    z-index:0;
}

/* Particles */
.particles{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
}

.particle{
    position:absolute;
    width:2px;height:2px;
    border-radius:50%;
    background:var(--violet);
    opacity:0.15;
    animation:particleRise var(--dur) linear var(--delay) infinite;
}

@keyframes particleRise{
    0%{transform:translateY(0);opacity:0}
    10%{opacity:0.15}
    90%{opacity:0.15}
    100%{transform:translateY(-100vh);opacity:0}
}

/* Chrome pill nav */
.chrome-pill{
    position:fixed;
    top:1.5rem;right:1.5rem;
    height:48px;
    padding:0 1.5rem;
    background:linear-gradient(135deg,var(--twilight),var(--steel));
    border:1px solid rgba(192,192,192,0.2);
    border-radius:24px;
    display:flex;
    align-items:center;
    z-index:100;
    backdrop-filter:blur(10px);
    transition:border-color 0.6s var(--ease-mech);
}

.pill-text{
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:0.7rem;
    letter-spacing:0.15em;
    color:var(--silver);
}

/* Panels */
.panel{
    min-height:120vh;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    padding:clamp(2rem,6vw,6rem);
    z-index:2;
}

/* Panel I: Initialization */
.panel-init{
    min-height:100vh;
    background:var(--void);
}

.chrome-sphere{
    width:40vmin;height:40vmin;
    border-radius:50%;
    position:relative;
    background:radial-gradient(circle at 35% 30%,#444,#1a1a1a 40%,#000 70%);
    box-shadow:
        inset -20px -20px 40px rgba(0,0,0,0.8),
        inset 15px 15px 30px rgba(192,192,192,0.2),
        0 0 60px rgba(123,104,238,0.15),
        0 0 120px rgba(0,206,209,0.08);
    animation:sphereShift 8s ease-in-out infinite;
    opacity:0;
    transform:scale(0);
    transition:opacity 2s var(--ease-mech),transform 2s var(--ease-mech);
}

.chrome-sphere.visible{
    opacity:1;
    transform:scale(1);
}

.sphere-small{
    width:20vmin;height:20vmin;
}

@keyframes sphereShift{
    0%,100%{background:radial-gradient(circle at 35% 30%,#444,#1a1a1a 40%,#000 70%)}
    33%{background:radial-gradient(circle at 55% 25%,#7B68EE33,#1a1a1a 40%,#000 70%)}
    66%{background:radial-gradient(circle at 40% 50%,#00CED133,#1a1a1a 40%,#000 70%)}
}

.sphere-highlight{
    position:absolute;
    border-radius:50%;
    pointer-events:none;
}

.sphere-h1{
    width:60%;height:30%;
    top:15%;left:20%;
    background:radial-gradient(ellipse,rgba(123,104,238,0.3),transparent);
    filter:blur(8px);
}

.sphere-h2{
    width:40%;height:20%;
    top:50%;left:10%;
    background:radial-gradient(ellipse,rgba(0,206,209,0.2),transparent);
    filter:blur(6px);
}

.sphere-h3{
    width:30%;height:15%;
    top:30%;right:10%;
    background:radial-gradient(ellipse,rgba(255,110,199,0.15),transparent);
    filter:blur(5px);
}

.sphere-core{
    position:absolute;
    inset:0;
    border-radius:50%;
    background:radial-gradient(circle at 30% 25%,rgba(255,255,255,0.15),transparent 50%);
}

.domain-reveal{
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:clamp(3rem,8vw,7rem);
    letter-spacing:-0.03em;
    text-transform:uppercase;
    color:var(--ghost);
    margin-top:2rem;
    clip-path:inset(45% 0 45% 0);
    opacity:0;
    transition:clip-path 1.5s var(--ease-mech),opacity 1s var(--ease-mech);
}

.domain-reveal.visible{
    clip-path:inset(0 0 0 0);
    opacity:1;
}

.init-readout{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    letter-spacing:0.08em;
    color:var(--silver);
    opacity:0;
    margin-top:1rem;
    transition:opacity 0.8s var(--ease-mech);
}

.init-readout.visible{opacity:0.7}

/* Liquid dividers */
.liquid-divider{
    position:relative;
    height:60px;
    z-index:2;
    overflow:hidden;
}

.liquid-svg{
    width:100%;
    height:60px;
    display:block;
}

/* Content panels */
.content-panel{
    background:rgba(20,20,43,0.6);
    border:1px solid rgba(192,192,192,0.1);
    border-radius:24px;
    padding:clamp(2rem,4vw,4rem);
    backdrop-filter:blur(20px) saturate(1.6);
    position:relative;
    max-width:900px;
    width:100%;
    opacity:0;
    transform:translateY(40px);
    transition:opacity 0.8s var(--ease-mech),transform 0.8s var(--ease-mech);
}

.content-panel.revealed{
    opacity:1;
    transform:translateY(0);
}

.panel-border-glow{
    position:absolute;
    inset:-1px;
    border-radius:24px;
    border:1px solid transparent;
    border-image:linear-gradient(135deg,transparent,var(--silver),transparent) 1;
    pointer-events:none;
}

/* Section titles */
.section-title{
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:clamp(1.8rem,4vw,3.5rem);
    letter-spacing:-0.03em;
    text-transform:uppercase;
    color:var(--ghost);
    margin-bottom:1.5rem;
}

.body-text{
    font-family:'DM Sans',sans-serif;
    font-weight:400;
    font-size:clamp(1rem,1.5vw,1.25rem);
    line-height:1.7;
    color:var(--ghost);
    margin-bottom:1rem;
}

.body-text mark{
    background:linear-gradient(transparent 60%,rgba(0,206,209,0.3) 60%);
    color:inherit;
}

/* Eye icon */
.eye-icon{
    position:absolute;
    top:2rem;right:2rem;
    width:24px;height:24px;
    animation:eyePulse 3s ease-in-out infinite;
}

@keyframes eyePulse{
    0%,100%{transform:scale(1)}
    50%{transform:scale(1.1)}
}

/* Panel II: Reflection */
.panel-reflect{
    padding-left:clamp(2rem,12vw,12rem);
}

.reflect-card{
    transform:translateY(40px) rotate(-2deg);
}

.reflect-card.revealed{
    transform:translateY(0) rotate(-2deg);
}

/* Panel III: Analysis */
.panel-analysis{
    padding-right:clamp(2rem,12vw,12rem);
}

.analysis-split{
    display:grid;
    grid-template-columns:45fr 55fr;
    gap:3rem;
    align-items:start;
}

.viz-bar-group{
    display:flex;
    flex-direction:column;
    gap:1.5rem;
    margin:1.5rem 0;
}

.viz-bar{
    display:flex;
    align-items:center;
    gap:1rem;
}

.bar-fill{
    width:0%;
    height:8px;
    background:var(--bar-color,var(--violet));
    border-radius:4px;
    flex:1;
    max-width:200px;
    transition:width 1.5s var(--ease-mech);
}

.bar-fill.animated{
    width:calc(var(--target) * 1%);
}

.bar-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.7rem;
    letter-spacing:0.08em;
    color:var(--phantom);
    width:90px;
}

.bar-val{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.75rem;
    color:var(--silver);
    width:30px;
    text-align:right;
}

.radial-progress{
    margin-top:2rem;
    display:flex;
    justify-content:center;
}

.radial-ring{
    width:120px;height:120px;
    border-radius:50%;
    background:conic-gradient(var(--ring-color,var(--teal)) 0%,var(--steel) 0%);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    position:relative;
    transition:background 1.5s var(--ease-mech);
}

.radial-ring::after{
    content:'';
    position:absolute;
    inset:8px;
    border-radius:50%;
    background:var(--twilight);
}

.radial-val{
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:1.5rem;
    color:var(--ghost);
    position:relative;
    z-index:2;
}

.radial-label{
    font-family:'IBM Plex Mono',monospace;
    font-size:0.55rem;
    letter-spacing:0.08em;
    color:var(--phantom);
    position:relative;
    z-index:2;
}

/* Panel IV: Projection */
.panel-projection{
    min-height:100vh;
    padding:4rem 2rem;
}

.projection-title{
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s var(--ease-mech),transform 0.8s var(--ease-mech);
    margin-bottom:2rem;
}

.projection-title.revealed{
    opacity:1;
    transform:translateY(0);
}

.horizontal-scroll{
    display:flex;
    gap:2rem;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:2rem 0;
    width:100%;
    max-width:100vw;
    -webkit-overflow-scrolling:touch;
}

.horizontal-scroll::-webkit-scrollbar{
    height:4px;
}

.horizontal-scroll::-webkit-scrollbar-track{
    background:var(--steel);
}

.horizontal-scroll::-webkit-scrollbar-thumb{
    background:var(--violet);
    border-radius:2px;
}

.hcard{
    min-width:80vw;
    max-width:80vw;
    scroll-snap-align:start;
    border-radius:24px;
    padding:clamp(2rem,4vw,4rem);
    backdrop-filter:blur(20px) saturate(1.6);
    border:1px solid rgba(192,192,192,0.1);
    position:relative;
    opacity:0;
    transform:translateY(30px);
    transition:opacity 0.8s var(--ease-mech),transform 0.8s var(--ease-mech);
    flex-shrink:0;
}

.hcard.revealed{
    opacity:1;
    transform:translateY(0);
}

.hcard-1{background:linear-gradient(135deg,rgba(123,104,238,0.15),rgba(0,206,209,0.1))}
.hcard-2{background:linear-gradient(135deg,rgba(0,206,209,0.15),rgba(255,110,199,0.1))}
.hcard-3{background:linear-gradient(135deg,rgba(255,110,199,0.15),rgba(123,104,238,0.1))}

.hcard-title{
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:clamp(1.5rem,3vw,2.5rem);
    letter-spacing:-0.02em;
    text-transform:uppercase;
    color:var(--ghost);
    margin-bottom:1rem;
}

.hcard-text{
    font-family:'DM Sans',sans-serif;
    font-size:clamp(1rem,1.5vw,1.25rem);
    line-height:1.7;
    color:var(--ghost);
    max-width:600px;
}

/* Panel V: Termination */
.panel-term{
    min-height:100vh;
    background:linear-gradient(to bottom,var(--void),var(--abyss));
}

.panel-term .scan-lines-intensify{
    opacity:0.08;
}

.term-title{
    font-family:'Outfit',sans-serif;
    font-weight:700;
    font-size:clamp(2rem,5vw,4rem);
    text-transform:uppercase;
    color:var(--ghost);
    margin-top:2rem;
    text-align:center;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 1s var(--ease-mech),transform 1s var(--ease-mech);
}

.term-title.revealed{
    opacity:1;
    transform:translateY(0);
}

.term-readout{
    font-family:'IBM Plex Mono',monospace;
    font-size:clamp(0.7rem,1vw,0.85rem);
    letter-spacing:0.08em;
    color:var(--phantom);
    margin-top:1rem;
    text-align:center;
    opacity:0;
    transition:opacity 1s var(--ease-mech) 0.5s;
}

.panel-term.in-view .term-readout{
    opacity:1;
}

/* Responsive */
@media(max-width:768px){
    .analysis-split{grid-template-columns:1fr}
    .panel-reflect{padding-left:2rem}
    .panel-analysis{padding-right:2rem}
    .reflect-card,.reflect-card.revealed{transform:rotate(0)}
    .hcard{min-width:90vw;max-width:90vw}
    .wireframe-grid{display:none}
    .chrome-pill{top:1rem;right:1rem;height:36px;padding:0 1rem}
    .pill-text{font-size:0.6rem}
}

@media(prefers-reduced-motion:reduce){
    .chrome-sphere{opacity:1;transform:scale(1);transition:none;animation:none}
    .domain-reveal{clip-path:inset(0);opacity:1;transition:none}
    .init-readout{opacity:0.7;transition:none}
    .content-panel,.hcard,.projection-title,.term-title{opacity:1;transform:none;transition:none}
    .bar-fill{transition:none}
    .particle{animation:none;opacity:0}
    .eye-icon{animation:none}
    .term-readout{opacity:1;transition:none}
}