/* mores.quest - Anti-design aesthetic */
/* Colors: #ff6b35 #ffb347 #7b9e6b #0d0b0f #fff4cc #2d1b2e #a8513a #1a1118 #e8dcc8 #f7f0e3 */
/* Fonts: Faster One, Space Grotesk, IBM Plex Mono, Inter */

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

:root{
--orange:#ff6b35;
--amber:#ffb347;
--moss:#7b9e6b;
--black:#0d0b0f;
--pale-yellow:#fff4cc;
--plum:#2d1b2e;
--rust:#a8513a;
--darkest:#1a1118;
--parchment:#e8dcc8;
--cream:#f7f0e3;
--base:13px;
}

html{
font-size:var(--base);
scroll-behavior:auto;
overflow-x:hidden;
}

body{
background:var(--darkest);
color:var(--cream);
font-family:'Space Grotesk',sans-serif;
font-weight:400;
line-height:1.6;
overflow-x:hidden;
cursor:crosshair;
}

/* Grain overlay */
#grain-overlay{
position:fixed;
top:0;left:0;width:100%;height:100%;
pointer-events:none;
z-index:1000;
opacity:0.06;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-repeat:repeat;
background-size:256px 256px;
}

/* Flame container */
#flame-container{
position:fixed;
bottom:20px;
left:50%;
transform:translateX(-50%);
z-index:999;
pointer-events:none;
opacity:0.8;
transition:opacity 0.5s;
}

#flame-glow-circle{
position:absolute;
bottom:-20px;
left:50%;
transform:translateX(-50%);
width:120px;
height:120px;
background:radial-gradient(circle,rgba(255,107,53,0.15) 0%,transparent 70%);
border-radius:50%;
animation:glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse{
0%,100%{opacity:0.6;transform:translateX(-50%) scale(1)}
50%{opacity:1;transform:translateX(-50%) scale(1.2)}
}

/* Split screen */
#split-screen{
display:flex;
position:relative;
min-height:100vh;
width:100%;
}

.panel{
position:relative;
overflow:hidden;
}

#norm-panel{
width:55%;
background:var(--darkest);
border-right:none;
}

#breach-panel{
width:45%;
background:var(--plum);
}

.panel-inner{
padding:0;
}

/* Panel divider */
#panel-divider{
position:fixed;
top:0;
left:55%;
width:2px;
height:100vh;
background:var(--orange);
z-index:100;
box-shadow:0 0 15px rgba(255,107,53,0.5),0 0 30px rgba(255,107,53,0.2);
transition:left 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* Scroll progress */
#scroll-progress{
position:fixed;
top:0;
left:0;
height:3px;
width:0%;
background:linear-gradient(90deg,var(--orange),var(--amber),var(--orange));
z-index:1001;
transition:width 0.1s linear;
}

/* Chapter indicator */
#chapter-indicator{
position:fixed;
top:50%;
left:55%;
transform:translate(-50%,-50%);
z-index:101;
display:flex;
flex-direction:column;
align-items:center;
pointer-events:none;
opacity:0;
transition:opacity 0.5s;
}

#chapter-indicator.visible{
opacity:1;
}

#chapter-number{
font-family:'Faster One',cursive;
font-size:3rem;
color:var(--orange);
text-shadow:0 0 20px rgba(255,107,53,0.5);
}

#chapter-name{
font-family:'IBM Plex Mono',monospace;
font-size:0.75rem;
color:var(--cream);
letter-spacing:0.3em;
text-transform:uppercase;
opacity:0.6;
}

/* CHAPTERS */
.chapter{
min-height:150vh;
padding:8rem 3rem;
position:relative;
}

.chapter-label{
font-family:'IBM Plex Mono',monospace;
font-size:0.7rem;
color:var(--amber);
letter-spacing:0.4em;
text-transform:uppercase;
margin-bottom:2rem;
opacity:0.5;
}

/* NORM PANEL STYLES */
.heading-norm{
font-family:'Faster One',cursive;
font-size:clamp(3rem,6vw,7rem);
color:var(--cream);
letter-spacing:-0.04em;
transform:rotate(var(--rot,0deg));
margin-bottom:3rem;
line-height:0.9;
transition:color 0.5s,transform 0.5s;
}

.norm-text-block{
max-width:85%;
margin-bottom:2.5rem;
padding-left:1rem;
border-left:2px solid rgba(232,220,200,0.1);
transition:transform 0.6s ease,opacity 0.6s ease,border-color 0.5s;
}

.norm-text-block.offset-right{
margin-left:15%;
padding-left:1.5rem;
border-left-color:rgba(168,81,58,0.3);
}

.body-text{
font-family:'Space Grotesk',sans-serif;
font-size:1.1rem;
line-height:1.7;
color:var(--parchment);
font-weight:300;
}

.annotation-block{
margin:2rem 0;
padding:0.5rem 0;
}

.annotation{
font-family:'IBM Plex Mono',monospace;
font-size:0.7rem;
color:var(--moss);
letter-spacing:0.1em;
opacity:0.6;
font-style:italic;
}

/* Degrading styles for later chapters */
.degrading{
border-left-color:rgba(255,107,53,0.4) !important;
}

.degrading .body-text{
font-weight:400;
letter-spacing:0.02em;
}

/* BREACH PANEL STYLES */
#breach-panel .chapter{
padding:8rem 2.5rem;
display:flex;
flex-direction:column;
justify-content:center;
}

.breach-title-block{
margin-bottom:4rem;
}

.heading-breach{
font-family:'Faster One',cursive;
font-size:clamp(4rem,8vw,10rem);
color:var(--orange);
letter-spacing:-0.04em;
transform:rotate(var(--rot,0deg));
line-height:0.85;
text-shadow:0 0 40px rgba(255,107,53,0.3);
}

.subtitle-breach{
font-family:'IBM Plex Mono',monospace;
font-size:1rem;
color:var(--amber);
margin-top:1rem;
letter-spacing:0.2em;
opacity:0.7;
}

.breach-fragment{
display:flex;
flex-wrap:wrap;
gap:0.5rem;
align-items:baseline;
margin:3rem 0;
}

.breach-fragment.scattered{
gap:1.5rem;
align-items:center;
}

.fragment-text{
font-family:'Faster One',cursive;
font-size:clamp(2rem,4vw,4rem);
color:var(--cream);
letter-spacing:-0.03em;
line-height:1;
display:inline-block;
}

.fragment-text.small{
font-family:'Space Grotesk',sans-serif;
font-size:1.2rem;
color:var(--amber);
font-weight:300;
text-transform:lowercase;
}

.fragment-text.massive{
font-size:clamp(5rem,12vw,12rem);
color:var(--orange);
text-shadow:0 0 60px rgba(255,107,53,0.4);
}

.fragment-text.rotated{
transform:rotate(7deg);
}

.fragment-text.rotated-neg{
transform:rotate(-5deg);
}

.fragment-text.glowing{
animation:textGlow 2s ease-in-out infinite;
}

@keyframes textGlow{
0%,100%{text-shadow:0 0 60px rgba(255,107,53,0.4)}
50%{text-shadow:0 0 100px rgba(255,107,53,0.8),0 0 150px rgba(255,179,71,0.3)}
}

.breach-body{
max-width:90%;
margin:2rem 0;
}

.breach-body p{
font-family:'Space Grotesk',sans-serif;
font-size:1.15rem;
line-height:1.7;
color:var(--pale-yellow);
font-weight:400;
}

.breach-body.dissolving p{
letter-spacing:0.05em;
word-spacing:0.2em;
}

.strike-through-text{
margin:3rem 0;
position:relative;
}

.strike-through-text span{
font-family:'Faster One',cursive;
font-size:clamp(1.5rem,3vw,2.5rem);
color:var(--rust);
text-decoration:line-through;
text-decoration-color:var(--orange);
text-decoration-thickness:3px;
letter-spacing:0.05em;
}

/* Glitch text effect */
.glitch-text{
font-family:'Faster One',cursive;
font-size:clamp(1.8rem,3.5vw,3rem);
color:var(--cream);
position:relative;
margin:3rem 0;
letter-spacing:0.05em;
}

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

.glitch-text::before{
color:var(--orange);
animation:glitch1 3s infinite linear alternate-reverse;
clip-path:polygon(0 0,100% 0,100% 33%,0 33%);
}

.glitch-text::after{
color:var(--moss);
animation:glitch2 2s infinite linear alternate-reverse;
clip-path:polygon(0 67%,100% 67%,100% 100%,0 100%);
}

@keyframes glitch1{
0%{transform:translate(0)}
20%{transform:translate(-3px,2px)}
40%{transform:translate(3px,-1px)}
60%{transform:translate(-1px,3px)}
80%{transform:translate(2px,-2px)}
100%{transform:translate(0)}
}

@keyframes glitch2{
0%{transform:translate(0)}
25%{transform:translate(2px,-3px)}
50%{transform:translate(-2px,1px)}
75%{transform:translate(3px,2px)}
100%{transform:translate(0)}
}

.final-word{
margin:4rem 0;
text-align:center;
}

.flame-row{
display:flex;
justify-content:center;
gap:2rem;
margin-top:4rem;
opacity:0.8;
}

.inline-flame{
filter:drop-shadow(0 0 10px rgba(255,107,53,0.3));
}

/* Scroll-driven animations */
.chapter{
opacity:0;
transform:translateY(40px);
transition:opacity 0.8s ease,transform 0.8s ease;
}

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

/* Norm panel degradation classes applied by JS */
.norm-degraded-1 .heading-norm{
color:var(--parchment);
}

.norm-degraded-2 .heading-norm{
color:var(--amber);
text-shadow:0 0 10px rgba(255,179,71,0.2);
}

.norm-degraded-2 .norm-text-block{
border-left-color:rgba(255,107,53,0.3);
}

.norm-degraded-3 .heading-norm{
color:var(--orange);
text-shadow:0 0 20px rgba(255,107,53,0.3);
}

.norm-degraded-3 .norm-text-block{
transform:skewX(-1deg);
border-left-color:rgba(255,107,53,0.5);
}

.norm-degraded-3 .body-text{
letter-spacing:0.03em;
word-spacing:0.15em;
}

/* Panel width transitions driven by scroll */
#norm-panel.shrinking{
width:45%;
transition:width 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}

#breach-panel.growing{
width:55%;
transition:width 0.8s cubic-bezier(0.25,0.46,0.45,0.94);
}

#norm-panel.merging,
#breach-panel.merging{
width:50%;
transition:width 1.2s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* Responsive */
@media(max-width:768px){
#split-screen{
flex-direction:column;
}
#norm-panel,#breach-panel{
width:100% !important;
}
#panel-divider{
display:none;
}
.chapter{
padding:4rem 1.5rem;
min-height:120vh;
}
.heading-norm,.heading-breach{
font-size:clamp(2.5rem,10vw,5rem);
}
.fragment-text.massive{
font-size:clamp(3rem,15vw,8rem);
}
#chapter-indicator{
left:50%;
}
}

/* Selection color */
::selection{
background:var(--orange);
color:var(--darkest);
}

/* Scrollbar */
::-webkit-scrollbar{
width:6px;
}

::-webkit-scrollbar-track{
background:var(--darkest);
}

::-webkit-scrollbar-thumb{
background:var(--plum);
border-radius:3px;
}

::-webkit-scrollbar-thumb:hover{
background:var(--rust);
}