/* undo.systems - Nostalgic-retro cyberpunk systems architecture */
/* Colors: #1a1a2e (deep base), #4a90d9 (primary blue), #f5f0e8 (warm off-white), #e8b84b (accent gold), #6c757d (muted gray) */
/* Fonts: Inter (sans), Playfair Display (serif-revival) */

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

:root{
--deep-base:#1a1a2e;
--primary-blue:#4a90d9;
--warm-white:#f5f0e8;
--accent-gold:#e8b84b;
--muted-gray:#6c757d;
--glow-gold:rgba(232,184,75,0.4);
--glow-blue:rgba(74,144,217,0.3);
}

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

body{
font-family:'Playfair Display',Georgia,'Times New Roman',serif;
background-color:var(--deep-base);
color:var(--warm-white);
overflow-x:hidden;
line-height:1.7;
}

/* Paper texture overlay */
.paper-texture{
position:fixed;
top:0;left:0;width:100%;height:100%;
pointer-events:none;
z-index:1;
opacity:0.04;
background-image:
  repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(245,240,232,0.03) 2px,rgba(245,240,232,0.03) 4px),
  repeating-linear-gradient(90deg,transparent,transparent 2px,rgba(245,240,232,0.02) 2px,rgba(245,240,232,0.02) 4px);
}

.scanlines{
position:fixed;
top:0;left:0;width:100%;height:100%;
pointer-events:none;
z-index:2;
opacity:0.015;
background:repeating-linear-gradient(0deg,transparent,transparent 1px,rgba(0,0,0,0.3) 1px,rgba(0,0,0,0.3) 2px);
}

/* HERO */
#hero{
min-height:100vh;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
position:relative;
z-index:3;
padding:2rem;
}

.hero-container{
text-align:center;
position:relative;
}

.crystalline-grid{
position:absolute;
top:50%;left:50%;
transform:translate(-50%,-50%);
width:500px;height:500px;
pointer-events:none;
opacity:0.15;
}

.crystal-shape{
position:absolute;
animation:crystalFloat 8s ease-in-out infinite;
}
.crystal-1{width:180px;height:180px;top:-20px;left:50%;transform:translateX(-50%)}
.crystal-2{width:100px;height:100px;bottom:40px;left:20px;animation-delay:-3s}
.crystal-3{width:130px;height:130px;bottom:20px;right:20px;animation-delay:-5s}

@keyframes crystalFloat{
0%,100%{transform:translateY(0) rotate(0deg)}
50%{transform:translateY(-15px) rotate(3deg)}
}
.crystal-1{animation-name:crystalFloat1}
@keyframes crystalFloat1{
0%,100%{transform:translateX(-50%) translateY(0) rotate(0deg)}
50%{transform:translateX(-50%) translateY(-15px) rotate(3deg)}
}

.hero-content{position:relative;z-index:2}

.system-label{
font-family:'Inter',system-ui,sans-serif;
font-size:0.75rem;
font-weight:500;
letter-spacing:0.3em;
color:var(--accent-gold);
margin-bottom:2rem;
text-transform:uppercase;
opacity:0;
animation:fadeInUp 0.8s ease forwards;
}

.hero-title{
font-size:clamp(3rem,8vw,7rem);
font-weight:700;
line-height:1.1;
margin-bottom:1.5rem;
opacity:0;
animation:fadeInUp 0.8s ease 0.2s forwards;
}

.title-line{color:var(--warm-white)}
.title-dot{
color:var(--accent-gold);
text-shadow:0 0 20px var(--glow-gold),0 0 40px var(--glow-gold);
display:inline-block;
animation:dotPulse 2s ease-in-out infinite;
}

@keyframes dotPulse{
0%,100%{text-shadow:0 0 20px var(--glow-gold),0 0 40px var(--glow-gold)}
50%{text-shadow:0 0 30px var(--glow-gold),0 0 60px var(--glow-gold),0 0 80px rgba(232,184,75,0.2)}
}

.hero-tagline{
font-family:'Inter',system-ui,sans-serif;
font-size:1.1rem;
font-weight:300;
color:var(--muted-gray);
letter-spacing:0.05em;
margin-bottom:2.5rem;
opacity:0;
animation:fadeInUp 0.8s ease 0.4s forwards;
}

@keyframes fadeInUp{
from{opacity:0;transform:translateY(20px)}
to{opacity:1;transform:translateY(0)}
}

.hero-divider,.footer-divider{
display:flex;
align-items:center;
justify-content:center;
gap:1rem;
opacity:0;
animation:fadeInUp 0.8s ease 0.6s forwards;
}
.divider-line{
width:60px;height:1px;
background:linear-gradient(90deg,transparent,var(--accent-gold),transparent);
}
.divider-diamond{
width:8px;height:8px;
background:var(--accent-gold);
transform:rotate(45deg);
box-shadow:0 0 10px var(--glow-gold);
}

.scroll-indicator{
position:absolute;
bottom:2rem;
display:flex;
flex-direction:column;
align-items:center;
gap:0.5rem;
opacity:0;
animation:fadeInUp 0.8s ease 1s forwards;
}
.scroll-text{
font-family:'Inter',system-ui,sans-serif;
font-size:0.65rem;
letter-spacing:0.3em;
color:var(--muted-gray);
}
.scroll-arrow{
color:var(--accent-gold);
font-size:1.2rem;
animation:scrollBounce 2s ease-in-out infinite;
}
@keyframes scrollBounce{
0%,100%{transform:translateY(0)}
50%{transform:translateY(8px)}
}

/* SECTIONS */
.section{
position:relative;
z-index:3;
padding:6rem 2rem;
}
.section-container{
max-width:900px;
margin:0 auto;
}
.section-header{
text-align:center;
margin-bottom:4rem;
}
.section-number{
font-family:'Inter',system-ui,sans-serif;
font-size:0.7rem;
font-weight:600;
letter-spacing:0.3em;
color:var(--accent-gold);
display:block;
margin-bottom:1rem;
}
.section-title{
font-size:clamp(2rem,5vw,3.5rem);
font-weight:600;
margin-bottom:1rem;
color:var(--warm-white);
}
.section-subtitle{
font-family:'Inter',system-ui,sans-serif;
font-size:1rem;
font-weight:300;
color:var(--muted-gray);
}

/* BORDER ANIMATE */
.border-animate{
position:relative;
border:1px solid rgba(232,184,75,0.15);
transition:border-color 0.4s ease;
}
.border-animate::before,
.border-animate::after{
content:'';
position:absolute;
background:var(--accent-gold);
transition:all 0.6s ease;
}
.border-animate::before{
top:-1px;left:-1px;
width:0;height:1px;
}
.border-animate::after{
bottom:-1px;right:-1px;
width:0;height:1px;
}
.border-animate.visible::before,
.border-animate:hover::before{
width:calc(100% + 2px);
}
.border-animate.visible::after,
.border-animate:hover::after{
width:calc(100% + 2px);
}

/* PANELS */
.system-panels{
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:2rem;
}
.panel{
padding:2.5rem 2rem;
background:rgba(26,26,46,0.8);
backdrop-filter:blur(10px);
transition:transform 0.3s ease,box-shadow 0.3s ease;
}
.panel:hover{
transform:translateY(-4px);
box-shadow:0 8px 30px rgba(232,184,75,0.1);
}
.panel-icon{
width:60px;height:60px;
margin-bottom:1.5rem;
}
.panel-icon svg{width:100%;height:100%}
.panel-title{
font-size:1.5rem;
font-weight:600;
margin-bottom:0.75rem;
color:var(--warm-white);
}
.panel-desc{
font-family:'Inter',system-ui,sans-serif;
font-size:0.9rem;
font-weight:300;
color:var(--muted-gray);
line-height:1.7;
margin-bottom:1.5rem;
}
.panel-status{
display:flex;
align-items:center;
gap:0.5rem;
font-family:'Inter',system-ui,sans-serif;
font-size:0.7rem;
letter-spacing:0.15em;
color:var(--muted-gray);
}
.status-dot{
width:6px;height:6px;
border-radius:50%;
}
.status-dot.active{
background:var(--accent-gold);
box-shadow:0 0 8px var(--glow-gold);
animation:statusPulse 2s ease-in-out infinite;
}
.status-dot.standby{
background:var(--primary-blue);
box-shadow:0 0 8px var(--glow-blue);
}
.status-dot.queued{
background:var(--muted-gray);
animation:statusPulse 3s ease-in-out infinite;
}
@keyframes statusPulse{
0%,100%{opacity:1}
50%{opacity:0.4}
}

/* ARCHITECTURE */
.architecture-grid{
display:flex;
flex-direction:column;
gap:2.5rem;
}
.arch-block{
padding:2.5rem;
background:rgba(26,26,46,0.6);
}
.arch-number{
font-size:2rem;
font-weight:700;
color:var(--accent-gold);
margin-bottom:1rem;
text-shadow:0 0 15px var(--glow-gold);
}
.arch-title{
font-size:1.4rem;
font-weight:600;
margin-bottom:0.75rem;
color:var(--warm-white);
}
.arch-desc{
font-family:'Inter',system-ui,sans-serif;
font-size:0.9rem;
font-weight:300;
color:var(--muted-gray);
line-height:1.7;
margin-bottom:1.5rem;
}
.arch-diagram{
position:relative;
height:60px;
margin-top:1rem;
}
.diagram-line{
position:absolute;
top:50%;left:5%;
width:90%;height:1px;
background:linear-gradient(90deg,var(--accent-gold),var(--primary-blue),var(--accent-gold));
opacity:0.4;
}
.diagram-node{
position:absolute;
top:50%;
width:10px;height:10px;
border-radius:50%;
transform:translateY(-50%);
background:var(--accent-gold);
box-shadow:0 0 10px var(--glow-gold);
}
.node-1{left:5%}
.node-2{left:26.25%;background:var(--primary-blue);box-shadow:0 0 10px var(--glow-blue)}
.node-3{left:47.5%}
.node-4{left:68.75%;background:var(--primary-blue);box-shadow:0 0 10px var(--glow-blue)}
.node-5{left:90%}

.state-crystal-svg{
width:100%;
height:100%;
}
#dagDiagram{height:80px}

.engine-arrows{
display:flex;
align-items:center;
justify-content:center;
gap:1.5rem;
height:100%;
font-family:'Inter',system-ui,sans-serif;
}
.arrow-forward{
font-size:2rem;
color:var(--accent-gold);
text-shadow:0 0 10px var(--glow-gold);
}
.arrow-reverse{
font-size:2rem;
color:var(--primary-blue);
text-shadow:0 0 10px var(--glow-blue);
}
.arrow-label{
font-size:0.85rem;
color:var(--muted-gray);
font-style:italic;
}

/* TERMINAL */
.terminal-window{
background:rgba(10,10,20,0.9);
border-radius:6px;
overflow:hidden;
}
.terminal-bar{
display:flex;
align-items:center;
gap:6px;
padding:12px 16px;
background:rgba(26,26,46,0.8);
border-bottom:1px solid rgba(232,184,75,0.1);
}
.terminal-dot{
width:10px;height:10px;
border-radius:50%;
}
.dot-red{background:#ff5f57}
.dot-yellow{background:#ffbd2e}
.dot-green{background:#28ca41}
.terminal-title{
font-family:'Inter',system-ui,sans-serif;
font-size:0.7rem;
color:var(--muted-gray);
letter-spacing:0.1em;
margin-left:10px;
}
.terminal-body{
padding:1.5rem;
font-family:'Inter',monospace;
font-size:0.8rem;
line-height:2;
min-height:300px;
}
.terminal-line{
opacity:0;
transform:translateX(-10px);
transition:opacity 0.4s ease,transform 0.4s ease;
}
.terminal-line.shown{
opacity:1;
transform:translateX(0);
}
.line-timestamp{color:var(--muted-gray)}
.line-level{
padding:1px 6px;
border-radius:2px;
font-size:0.7rem;
font-weight:600;
margin:0 6px;
}
.level-info{color:var(--primary-blue);border:1px solid rgba(74,144,217,0.3)}
.level-ok{color:#28ca41;border:1px solid rgba(40,202,65,0.3)}
.level-warn{color:var(--accent-gold);border:1px solid rgba(232,184,75,0.3)}
.line-msg{color:var(--warm-white)}
.terminal-cursor{
display:inline-block;
color:var(--accent-gold);
animation:cursorBlink 1s step-end infinite;
font-weight:700;
}
@keyframes cursorBlink{
0%,100%{opacity:1}
50%{opacity:0}
}

/* MANIFESTO */
.manifesto-quote{
padding:2.5rem 3rem;
margin-bottom:3rem;
background:rgba(26,26,46,0.4);
border-left:3px solid var(--accent-gold);
font-size:1.2rem;
font-style:italic;
line-height:1.9;
color:var(--warm-white);
}
.manifesto-principles{
display:flex;
flex-direction:column;
gap:2rem;
}
.principle{
display:flex;
gap:1.5rem;
align-items:flex-start;
}
.principle-marker{
width:12px;height:12px;
min-width:12px;
background:var(--accent-gold);
transform:rotate(45deg);
margin-top:0.5rem;
box-shadow:0 0 10px var(--glow-gold);
}
.principle-content h4{
font-size:1.1rem;
font-weight:600;
color:var(--warm-white);
margin-bottom:0.5rem;
}
.principle-content p{
font-family:'Inter',system-ui,sans-serif;
font-size:0.9rem;
font-weight:300;
color:var(--muted-gray);
line-height:1.7;
}

/* FOOTER */
#footer{
position:relative;
z-index:3;
padding:4rem 2rem;
text-align:center;
border-top:1px solid rgba(232,184,75,0.1);
}
.footer-container{
max-width:900px;
margin:0 auto;
}
.footer-brand{
margin-bottom:1.5rem;
}
.footer-logo{
font-size:1.3rem;
font-weight:700;
color:var(--warm-white);
display:block;
margin-bottom:0.5rem;
}
.footer-version{
font-family:'Inter',system-ui,sans-serif;
font-size:0.7rem;
color:var(--muted-gray);
letter-spacing:0.15em;
}
.footer-divider{margin-bottom:1.5rem}
.footer-status{
display:flex;
align-items:center;
justify-content:center;
gap:0.5rem;
margin-bottom:1rem;
}
.status-indicator{
width:6px;height:6px;
border-radius:50%;
background:#28ca41;
box-shadow:0 0 8px rgba(40,202,65,0.5);
animation:statusPulse 2s ease-in-out infinite;
}
.footer-status-text{
font-family:'Inter',system-ui,sans-serif;
font-size:0.7rem;
letter-spacing:0.2em;
color:var(--muted-gray);
}
.footer-copy{
font-family:'Inter',system-ui,sans-serif;
font-size:0.75rem;
color:var(--muted-gray);
opacity:0.6;
}

/* REVEAL ANIMATIONS */
.section{
opacity:0;
transform:translateY(30px);
transition:opacity 0.8s ease,transform 0.8s ease;
}
.section.revealed{
opacity:1;
transform:translateY(0);
}

/* RESPONSIVE */
@media(max-width:768px){
.system-panels{grid-template-columns:1fr}
.manifesto-quote{padding:1.5rem}
.section{padding:4rem 1.5rem}
.arch-block{padding:1.5rem}
.terminal-body{padding:1rem;font-size:0.7rem}
.terminal-line .line-timestamp{display:none}
}

@media(max-width:480px){
.hero-title{font-size:2.5rem}
.hero-tagline{font-size:0.9rem}
.manifesto-quote{font-size:1rem;padding:1.2rem}
}