/* miris.dev -- warm cyberpunk game workshop */

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

:root{
    --ember:#BF5B21;
    --solder:#D4882E;
    --midnight:#0D0F1A;
    --cream:#F2E0C8;
    --circuit:#2D7D8A;
    --flux:#A0634B;
    --fog:#1A1520;
    --neon:#E87B4A;
}

body{
    background:var(--midnight);
    color:var(--cream);
    font-family:'Source Code Pro',monospace;
    font-weight:400;
    font-size:1rem;
    line-height:1.8;
    overflow-x:hidden;
    position:relative;
}

/* Noise texture */
.noise-layer{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:9999;
    opacity:0.035;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-size:200px 200px;
    animation:noise-breathe 12s ease-in-out infinite;
}

@keyframes noise-breathe{
    0%,100%{opacity:0.02}
    50%{opacity:0.05}
}

/* Organic blobs */
.blob-field{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:1;
    overflow:hidden;
}

.blob{
    position:absolute;
    border-radius:30% 70% 60% 40% / 50% 60% 40% 50%;
    animation-timing-function:linear;
    animation-iteration-count:infinite;
}

.blob-1{
    width:300px;height:300px;
    background:rgba(191,91,33,0.05);
    top:10%;left:-5%;
    animation:blob-drift-1 45s infinite,blob-morph 20s ease-in-out infinite;
}

.blob-2{
    width:200px;height:200px;
    background:rgba(45,125,138,0.04);
    top:50%;right:-3%;
    animation:blob-drift-2 55s infinite,blob-morph 25s ease-in-out infinite reverse;
}

.blob-3{
    width:250px;height:250px;
    background:rgba(191,91,33,0.04);
    bottom:20%;left:30%;
    animation:blob-drift-3 40s infinite,blob-morph 18s ease-in-out infinite;
}

.blob-4{
    width:180px;height:180px;
    background:rgba(232,123,74,0.03);
    top:30%;right:20%;
    animation:blob-drift-1 60s infinite reverse,blob-morph 22s ease-in-out infinite;
}

.blob-5{
    width:220px;height:220px;
    background:rgba(45,125,138,0.03);
    bottom:10%;right:10%;
    animation:blob-drift-2 50s infinite,blob-morph 30s ease-in-out infinite reverse;
}

@keyframes blob-drift-1{
    0%{transform:translate(0,0)}
    25%{transform:translate(80px,-40px)}
    50%{transform:translate(40px,60px)}
    75%{transform:translate(-30px,20px)}
    100%{transform:translate(0,0)}
}

@keyframes blob-drift-2{
    0%{transform:translate(0,0)}
    25%{transform:translate(-60px,50px)}
    50%{transform:translate(-30px,-40px)}
    75%{transform:translate(40px,-20px)}
    100%{transform:translate(0,0)}
}

@keyframes blob-drift-3{
    0%{transform:translate(0,0)}
    33%{transform:translate(50px,30px)}
    66%{transform:translate(-40px,-50px)}
    100%{transform:translate(0,0)}
}

@keyframes blob-morph{
    0%,100%{border-radius:30% 70% 60% 40% / 50% 60% 40% 50%}
    25%{border-radius:60% 40% 30% 70% / 40% 50% 60% 50%}
    50%{border-radius:40% 60% 70% 30% / 60% 40% 50% 50%}
    75%{border-radius:70% 30% 40% 60% / 50% 50% 40% 60%}
}

/* Circuit traces */
.circuit-traces{
    position:fixed;
    left:2rem;
    top:0;
    width:60px;
    height:100%;
    z-index:2;
    pointer-events:none;
}

.circuit-path{
    stroke-dasharray:2500;
    stroke-dashoffset:2500;
    transition:stroke-dashoffset 3s ease;
}

body.loaded .circuit-path{
    stroke-dashoffset:0;
}

/* Navigation */
.nav-circle{
    position:fixed;
    top:1.5rem;
    right:1.5rem;
    width:40px;
    height:40px;
    border-radius:50%;
    border:1px solid rgba(191,91,33,0.3);
    background:rgba(13,15,26,0.8);
    cursor:pointer;
    z-index:200;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:border-color 0.4s ease,box-shadow 0.4s ease;
    animation:nav-pulse 4s ease-in-out infinite;
}

.nav-circle:hover{
    border-color:var(--ember);
    box-shadow:0 0 20px rgba(191,91,33,0.2);
    animation:none;
}

@keyframes nav-pulse{
    0%,100%{box-shadow:0 0 0 rgba(191,91,33,0)}
    50%{box-shadow:0 0 12px rgba(191,91,33,0.1)}
}

.radial-nav{
    position:fixed;
    top:0;
    right:-250px;
    width:230px;
    height:100vh;
    background:rgba(26,21,32,0.95);
    z-index:190;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:1.5rem;
    padding:2rem;
    transition:right 0.4s cubic-bezier(0.16,1,0.3,1);
    backdrop-filter:blur(8px);
}

.radial-nav.open{
    right:0;
}

.radial-link{
    font-family:'Source Code Pro',monospace;
    font-weight:300;
    font-size:0.875rem;
    letter-spacing:0.02em;
    color:var(--cream);
    text-decoration:none;
    padding:0.5rem 0;
    border-bottom:1px solid rgba(45,125,138,0.15);
    transition:color 0.3s ease;
}

.radial-link:hover{
    color:var(--solder);
}

/* Scenes */
.scene{
    position:relative;
    z-index:5;
}

.content-channel{
    max-width:680px;
    margin:0 auto;
    padding:0 2rem;
}

/* Scene 1: The Sign */
.scene-sign{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
}

.sign-content{
    text-align:center;
    position:relative;
}

.sign-title{
    font-family:'Playfair Display',serif;
    font-weight:900;
    font-size:clamp(5rem,14vw,16rem);
    letter-spacing:-0.03em;
    line-height:1;
    background:radial-gradient(ellipse at 40% 50%,var(--ember),var(--solder),var(--neon));
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
    opacity:0;
    transition:opacity 1.5s ease 0.5s;
}

body.loaded .sign-title{
    opacity:1;
}

.sign-subtitle{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(1.2rem,2.5vw,2rem);
    color:var(--flux);
    opacity:0;
    transition:opacity 1.5s ease 2s;
    margin-top:1rem;
}

body.loaded .sign-subtitle{
    opacity:1;
}

/* Scan lines */
.scan-line{
    height:16vh;
    position:relative;
    display:flex;
    align-items:center;
}

.scan-line::after{
    content:'';
    display:block;
    width:100%;
    height:1px;
    background:var(--circuit);
    opacity:0.15;
}

/* Section headings with typewriter */
.section-heading{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(2rem,5vw,4rem);
    color:var(--cream);
    margin-bottom:2rem;
    position:relative;
    overflow:hidden;
}

.section-heading .tw-cursor{
    display:inline-block;
    width:2px;
    height:1em;
    background:var(--solder);
    margin-left:4px;
    animation:blink 0.8s step-end infinite;
    vertical-align:text-bottom;
}

@keyframes blink{
    0%,100%{opacity:1}
    50%{opacity:0}
}

/* Body text */
.body-text{
    margin-bottom:2rem;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.body-text.revealed{
    opacity:1;
    transform:translateY(0);
}

/* Pull quote */
.pull-quote{
    margin:3rem 0;
    padding:2rem 0;
    border-top:1px solid rgba(45,125,138,0.2);
    border-bottom:1px solid rgba(45,125,138,0.2);
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.pull-quote.revealed{
    opacity:1;
    transform:translateY(0);
}

.pull-quote p{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--cream);
    line-height:1.5;
}

/* Scene 2: Workbench */
.scene-workbench{
    padding:8vh 0;
    background:linear-gradient(to bottom,var(--midnight),var(--fog));
}

/* Scene 3: Showcase */
.scene-showcase{
    padding:8vh 0;
    background:var(--fog);
}

.project-entry{
    padding:4vh 0;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 0.8s ease,transform 0.8s ease;
}

.project-entry.revealed{
    opacity:1;
    transform:translateY(0);
}

.project-name{
    font-family:'Playfair Display',serif;
    font-weight:700;
    font-size:clamp(2.5rem,6vw,5rem);
    color:var(--cream);
    letter-spacing:-0.02em;
    line-height:1.1;
    margin-bottom:1rem;
    transition:text-shadow 0.4s ease;
}

.project-entry:hover .project-name{
    text-shadow:0 0 40px rgba(191,91,33,0.3);
}

.project-desc{
    font-weight:300;
    font-size:0.875rem;
    color:rgba(242,224,200,0.7);
    max-width:50ch;
}

.project-divider{
    height:12vh;
    position:relative;
}

.project-divider::after{
    content:'';
    position:absolute;
    top:50%;
    left:0;
    right:0;
    height:1px;
    background:var(--circuit);
    opacity:0.1;
}

/* Scene 4: Exit */
.scene-exit{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:linear-gradient(to bottom,var(--fog),var(--midnight));
}

.exit-content{
    text-align:center;
    opacity:0;
    transform:translateY(20px);
    transition:opacity 3s ease,transform 3s ease;
}

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

.exit-invitation{
    font-family:'Cormorant Garamond',serif;
    font-weight:300;
    font-style:italic;
    font-size:clamp(1.5rem,3vw,2.5rem);
    color:var(--cream);
    margin-bottom:3rem;
}

.pilot-light{
    width:4px;
    height:4px;
    border-radius:50%;
    background:var(--ember);
    margin:0 auto;
    box-shadow:0 0 12px rgba(191,91,33,0.5);
    animation:pilot-glow 3s ease-in-out infinite;
}

@keyframes pilot-glow{
    0%,100%{box-shadow:0 0 12px rgba(191,91,33,0.5)}
    50%{box-shadow:0 0 20px rgba(191,91,33,0.8)}
}

/* Responsive */
@media(max-width:768px){
    .circuit-traces{display:none}
    .blob{transform:scale(0.6)}
    .radial-nav{width:100%;right:-100%}
}

@media(prefers-reduced-motion:reduce){
    .noise-layer{animation:none;opacity:0.03}
    .blob{animation:none !important}
    .nav-circle{animation:none}
    .pilot-light{animation:none}
    .sign-title,.sign-subtitle,.body-text,.pull-quote,.project-entry,.exit-content{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
    .circuit-path{stroke-dashoffset:0;transition:none}
    .section-heading .tw-cursor{display:none}
}