/* === home.css - 17.08.2025 === */
/* === Basic-Style) === */
:root{
--bg:#0c0f12;       /* Hintergrund */
--curtain:#0c0f12;  /* Vorhangfarbe */
--accent:#00ff88;   /* Terminal-Grün */
--txt:#00ff88;      /* Textfarbe */
}

html,body {
height:100%
}

body {
margin:0;
background:var(--bg);
color:var(--txt);
font-family: monospace;
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
text-align:center;
position:relative;
overflow:hidden; /* solange Vorhang aktiv ist */
}

/* === Optionaler statischer Punkt-Hintergrund (blendet später ein) === */
body::before, body::after{
content:"";
position:absolute; left:0; width:100%; height:20%; // Höhe gepunkteter Hintergrund
opacity:0; pointer-events:none; z-index:0;
transition: opacity 1.5s ease-in;
}

body::before {
top:0;
background:radial-gradient(var(--accent) 1px, transparent 1px),
           linear-gradient(to bottom, rgba(0,255,136,0.2), rgba(12,15,18,0));
background-size:12px 12px, 100% 100%;
}

body::after {
bottom:0;
background:radial-gradient(var(--accent) 1px, transparent 1px),
           linear-gradient(to top, rgba(0,255,136,0.2), rgba(12,15,18,0));
background-size:12px 12px, 100% 100%;
}

body.static-bg::before, body.static-bg::after {
opacity:0.25;
}

/* === Vorhang === */
#curtain {
position:fixed;
inset:0;
display:flex;
z-index:9999;
background:radial-gradient(120% 80% at 50% -10%, rgba(255,255,255,.06), transparent 60%);
transition:opacity .2s ease;
}

#curtain.open {
pointer-events:none;
}

#curtain .left, #curtain .right {
flex:1;
background:var(--curtain);
background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.03) 0 6px, transparent 6px 14px);
box-shadow: inset 0 0 60px rgba(0,0,0,.6);
transform: translateX(0);
transition: transform 1.6s ease-in-out;
}

#curtain.open .left {
transform:translateX(-100%);
}

#curtain.open .right {
transform:translateX(100%);
}

/* === Inhalt === */
main{
width:100%;
position:relative;
z-index:1;
opacity:0;
transition:opacity .8s ease-in 1.2s;
padding:48px 16px;
box-sizing:border-box;
display:flex;
align-items:center;
justify-content:center;
flex-direction:column;
}

h1 {
font-size:1.8em;
margin:0 0 .5em;
padding-bottom:20px;
}

h1 .cursor {
display:inline-block;
width:.6ch;
background:var(--accent);
margin-left:4px;
animation:blink 1s steps(1) infinite;
}

@keyframes blink {
50%{ opacity:0 }
}

p {
font-size:1.3em;
max-width:600px;
line-height:1.5em;
margin:0 0 2em
}

#sysinfo {
padding-top:50px;
font-size:.9em;
margin-top:1em;
opacity:.8
}

#sysinfo > div {
margin:.15rem 0
}

/* Button im Terminal-Look */
#startBtn{
margin-top:1em;
background:transparent;
border:2px solid var(--accent);
color:var(--accent);
font-family:monospace;
font-size:1.2em;
padding:0.5em 1.5em;
border-radius:6px;
cursor:pointer;
transition:all .25s ease;
position:relative;
z-index:2;
}

#startBtn:hover {
background:var(--accent);
color:var(--bg);
}

.hint {
font-weight:bold;
color:orange;
}

code {
font-weight:bold;
color:pink;
}

/* Bewegungsreduktion respektieren */
@media (prefers-reduced-motion:reduce) {
#curtain .left, #curtain .right {
transition:none;
}
main {
transition:none;
}
}