@font-face {
    font-family: 'ABC Gaisyr Mono';
    src: url('../fonts/ABC_Gaisyr_Mono/ABCGaisyrMono-Regular-Trial.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

*::-webkit-scrollbar {
    display: none;
}

* {
    box-sizing: border-box;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

html, body {
    margin: 0;
    padding: 0;

    --circle-radius: 24px;
    --font-size: 13px;
    --line-height: 18px;

    font-family: 'ABC Gaisyr Mono', 'Courier New', Courier, monospace;
    font-size: var(--font-size);
    line-height: var(--line-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

body {
    background-color: rgb(255, 255, 255);
    color: rgb(0, 0, 0);
    width: 100vw;
    height: 100dvh;
    /* transition entfernen oder für flüssiges Rendering deaktivieren */
}

/*
body.black {
    background-color: black;
    color: white;
}
*/

.scroll-wrapper, 
.image-wrapper,
.circle-wrapper,
.text-wrapper,
.close-btn-wrapper {
    width: 100vw;
    height: 100dvh;
    position: absolute;
}

/* Ebene 1: Bilder im Hintergrund */
.image-wrapper {
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;

    transition: 
        filter .5s ease-in-out,
        opacity .5s ease-in-out;
}

/* Ebene 2: Sichtbarer Circle (liegt OPTISCH UNTER dem Text) */
.circle-wrapper {
    z-index: 2;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Ebene 3: Scroll-Wrapper & Indikator-Text (OPTISCH ÜBER dem Circle & VOLL SCROLLBAR) */
.scroll-wrapper {
    z-index: 3;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    padding-top: 40dvh;
    padding-bottom: 40dvh;
    transition: opacity .5s ease-in-out;
    width: 100vw;
    height: 100dvh;
}

/* Ebene 4: Text-Wrapper */
.text-wrapper {
    z-index: 4;
    overflow: hidden;
    pointer-events: none;
    padding-left: 7px;
    padding-right: 7px;
    padding-top: 3px;
    padding-bottom: 3px;
}

/* Ebene 5: Unsichtbarer Klick-Overlay über dem Circle */
.circle-click-overlay {
    z-index: 5;
    width: 100vw;
    height: 100dvh;
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.circle-click-btn {
    width: calc(var(--circle-radius) + 16px);
    height: calc(var(--circle-radius) + 16px);
    border-radius: 50%;
    pointer-events: auto;
    cursor: pointer;
    background: transparent;
}

.work-wrapper {

}

.image-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100vw;
    height: 20dvh;
    scroll-snap-align: center;
}

/* Stufenlose Winkel-Animation der grünen Kontur */
@property --progress {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

.circle {
    width: var(--circle-radius);
    height: var(--circle-radius);
    background-color: rgba(230,230,230,0.5);
    border-radius: 100%;
    backdrop-filter: blur(5px);
    position: relative;
}

/* Äußerer Timer-Ring um den Circle */
.circle::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px + 0.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #fff calc(100% - 2px + 0.5px));
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* AKTIV: Grüner Ladekreis füllt sich in 15s */
.circle.slideshow-active::before {
    opacity: 1;
    background: conic-gradient(#00ff00 var(--progress, 0deg), transparent 0deg);
    animation: circleProgress 15s linear infinite;
}

/* PAUSIERT (Manuell): Geschlossener orangener Kreis */
.circle.paused::before {
    opacity: 1;
    background: #ff9900;
    animation: none;
}

/* GESCROLLT (Nicht manuell pausiert): Geschlossener grüner Kreis */
.circle.scroll-paused::before {
    opacity: 1;
    background: #00ff00;
    animation: none;
}

/* TEXT GEÖFFNET: Geschlossener roter Kreis */
body.text .circle::before {
    opacity: 1;
    background: #ff0000;
    animation: none;
}

@keyframes circleProgress {
    from {
        --progress: 0deg;
    }
    to {
        --progress: 360deg;
    }
}

.image-wrapper img {
    position: absolute;
    width: 75vw;
    height: 75dvh;
    object-fit: contain;
    opacity: 0;
    /*mix-blend-mode: multiply;*/
}

.image-wrapper img.active {
    opacity: 1;
}

.text-more-btn {
    all: unset;
    display: inline-block;
    cursor: pointer;
    pointer-events: auto;
    background-color: rgba(230,230,230,0.5);
    backdrop-filter: blur(3px);
    opacity: 0;
    transition: opacity .5s ease-in-out;
    border-radius: calc(0.5 * var(--line-height));
    height: 16px;

    padding-left: 5px;
    padding-right: 5px;
}

.text-more-btn span {
    display: inline-block;
    will-change: transform;
}

.text-more-btn.is-animating span:nth-child(1) { animation-delay: 0s; }
.text-more-btn.is-animating span:nth-child(2) { animation-delay: 0.15s; }
.text-more-btn.is-animating span:nth-child(3) { animation-delay: 0.3s; }

@keyframes bulletJump {
  0% {
    transform: translateY(0);
    animation-timing-function: ease-out;
  }
  10% {
    transform: translateY(calc(var(--font-size) * -0.5));
    animation-timing-function: ease-in;
  }
  20%, 100% {
    transform: translateY(0);
  }
}

.text-more-btn.is-animating span {
  animation: bulletJump 3s infinite;
}

/* Ebene 999: Close Button ganz oben */
.close-btn-wrapper {
    z-index: 999;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
}

body.text .scroll-wrapper {
    opacity: 0;
    pointer-events: none;
}

body.text .close-btn-wrapper {
    opacity: 1;
    pointer-events: auto;
}

body.text .circle-wrapper {
    z-index: 9999;
}

body.text .circle {
    background-color: transparent;
    backdrop-filter: blur(0px);
    pointer-events: none;
}

body.text .image-wrapper {
    opacity: .75;
    filter: blur(10px);
}

.close-btn {
    width: var(--circle-radius);
    height: var(--circle-radius);
    background-color: rgba(230,230,230,0.5);
    border-radius: 100%;
    backdrop-filter: blur(5px);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.close-btn span {
    transform: rotate(45deg);
}