/*
 Theme Name:  GeneratePress Child
 Theme URI:   https://generatepress.com
 Description: Default GeneratePress child theme
 Author:      Rocky Beach Studio
 Author URI:  https://www.rockybeachstudio.de
 Template:    generatepress
 Version:     0.1
*/

body {
background:#000;
font-size:18px;
line-height:1.56;
font-weight:300;
text-decoration:none;
-webkit-text-size-adjust:none;
}

* {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
box-sizing:border-box;
-webkit-text-size-adjust:none;
}

a, b, span, div, ul, li, td, th, form, fieldset, input, select, textarea, p, h1, h2, h3, h4 {
font-family:Arial,Helvetica,sans-serif;
outline:none;
border:0;
}

h1, h2, h3 {
font-family:Arial,Helvetica,sans-serif;
}

.inside-article, .wp-block-column {
text-align:center;
}

h1 {
display:inline-block;
border-bottom:1px solid #4d4d4d;
}

.entry-title {
text-align:center;
}

p {
text-align:left;
}

a {
text-decoration:none;
transition:color .25s;
}

a:not(:hover):not(:focus) {
color:inherit;
}

.clearfix {
*zoom:1;
}

       .clearfix:before, .clearfix:after {
       content:' ';
       display:table;
       }

       .clearfix:after {
       clear:both;
       }


.site-content {
display:block;
}


:root {
    --glass-bg: rgba(255, 255, 255, 0.1);
    --glass-border: rgba(255, 255, 255, 0.2);
    --accent: #ffe81f; /* Star Wars Gelb */
}

:root {
    --accent: #ffe81f; --blaze: #ff6700; --glass: rgba(255,255,255,0.05);
}

body { background: #000; color: #fff; margin: 0; }


.status-marker {
    height: calc(100vh - 32px - 42px);
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: 1.5rem;
    color: #111;
    font-weight: 900;
}

#timeline-container { position: relative; padding: 100px 0; max-width: 1200px; margin: 0 auto; }

/* Die Linie */
.glass-conduit {
    position: absolute; left: 50%; top: 0; bottom: 0; width: 2px;
    background: #111; transform: translateX(-50%);
}

.comet-fill {
    position: absolute; left: 50%; top: 0;
    width: 2px; height: 0%; transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, var(--blaze) 85%, #fff);
    box-shadow: 0 0 20px var(--blaze);
    /*transition: height 0.1s linear;*/
}

.comet-spark {
    position: absolute;
    left: 50%;
    top: 0;
    width: 42px; height: 42px;
    transform: translate(-50%, -100%);
    pointer-events: none;
    filter: drop-shadow(0 0 15px #fff);
    z-index:100;
}

/* Items */
.timeline-item {
    display: flex; width: 100%; margin-bottom: 30vh; position: relative;
    opacity: 0; transform: translateY(50px); transition: all 0.8s ease-out;
}

/* Grundzustand: Item ist im Viewport, aber der Komet ist noch nicht da */
.timeline-item.is-visible {
    opacity: 0.5; /* Initial 50% */
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.8s ease-out;
}

/* Aktivierter Zustand: Der Komet hat das Item erreicht */
.timeline-item.is-activated {
    opacity: 1;
}

@media (min-width: 768px) {
       .timeline-item.left { justify-content: flex-start; padding-left: 5%; }
       .timeline-item.right { justify-content: flex-end; padding-right: 5%; }
       /* Abwechselnde Ausrichtung Bild/Text */
       .left .timeline-card { flex-direction: row-reverse; text-align: right; }
       .right .timeline-card { flex-direction: row; text-align: left; }
}

.timeline-content-wrapper { width: 40%; }

.timeline-card {
    /*background: var(--glass); backdrop-filter: blur(10px); */
    background:rgba(20, 20, 20, 0.9);
    border: 1px solid rgba(255,255,255,0.1);
    padding: 20px; border-radius: 15px; display: flex; align-items: center; gap: 20px; cursor: pointer;
}

.node-wrapper { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.glass-sphere { width: 14px; height: 14px; background: #000; border: 2px solid #333; border-radius: 50%; transition: 0.5s; }
.timeline-item.is-activated .glass-sphere { background: #fff; transform: scale(1.7); border-color: var(--blaze); box-shadow: 0 0 25px var(--blaze); }

/* Overlay (Fixiert) */
#timeline-overlay { position: fixed; inset: 0; z-index: 999; display: flex; align-items: center; justify-content: center; }
#timeline-overlay.hidden { display: none; }
.overlay-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.9); }
.overlay-content { position: relative; background: #111; width: 90%; max-width: 800px; padding: 40px; border-radius: 20px; max-height: 80vh; overflow-y: auto; border: 1px solid var(--accent); }

@media (max-width: 767.9px) {
    .glass-conduit, 
    .comet-fill {
        left: 30px;
        transform: translateX(0); /* Kein Zentrieren mehr */
    }

    #cometSpark {
        left: 10px;
        transform: translateX(0); /* Kein Zentrieren mehr */
    }

    .node-wrapper {
        left: 30px;
        transform: translate(-50%, -50%);
    }

    .timeline-item {
        justify-content: flex-start;
        padding-left: 60px;
        padding-right: 20px;
    }

    .timeline-content-wrapper {
        width: 100%;
    }

    .timeline-card {
        flex-direction: row; /* Immer Bild links, Text rechts oder umgekehrt */
        text-align: left;
    }

    .status-marker {
        font-size: 12vw;
        letter-spacing: 0.5rem;
    }
}


/* Gyroskop */
.timeline-card {
    --tilt-x: 0deg;
    --tilt-y: 0deg;
    /* Erzeugt den 3D-Raum für die Karte */
    perspective: 1000px; 
    transition: transform 0.1s ease-out; /* Glättet die Sensor-Daten */
}

/* Der Effekt greift nur bei der aktiven Karte am stärksten */
.timeline-item.is-activated .timeline-card {
    transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
    /* Der elektrische Rand verschiebt sich leicht mit der Neigung */
    box-shadow: 
        calc(var(--tilt-y) * -1) calc(var(--tilt-x) * 1) 20px rgba(255, 232, 31, 0.15),
        inset 0 0 15px rgba(255, 255, 255, 0.05);
}



/* 3D-Raum
#timeline-container {
    perspective: 1500px;
}

.timeline-item {
    transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.6s ease;
}

.timeline-item.left .timeline-card {
    transform: rotateY(15deg);
    transform-origin: right center;
}

.timeline-item.right .timeline-card {
    transform: rotateY(-15deg);
    transform-origin: left center;
}

.timeline-item.is-activated .timeline-card {
    transform: rotateY(0deg) scale(1.02);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px rgba(255, 232, 31, 0.1);
}

.timeline-card::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(
        125deg, 
        rgba(255,255,255,0.1) 0%, 
        transparent 50%, 
        rgba(0,0,0,0.2) 100%
    );
    border-radius: inherit;
    z-index: 5;
}

.timeline-item.left .timeline-card::after {
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.05));
}

.timeline-item.right .timeline-card::after {
    background: linear-gradient(to left, transparent, rgba(255,255,255,0.05));
}

@media (max-width: 767.9px) {
.timeline-item.left .timeline-card {
transform-origin:left center
}
}

*/