/* =========================
   GRUNDEINSTELLUNGEN
========================= */

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
}

body {
    overflow: hidden;

    font-family: Arial, Helvetica, sans-serif;

    background: #140f18;

    perspective: 1000px;
}


/* =========================
   ZIMMER-SZENE
========================= */

.scene {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
}


/*
   Diese Ebene wird durch dein JavaScript
   leicht mit der Maus bewegt.
*/

.room {
    position: relative;

    width: 100vw;
    height: 100vh;

    transform: translate3d(0, 0, 0) scale(1.12);
    transition: transform 0.15s ease-out;
    will-change: transform;
}


/* Das eigentliche Zimmerbild */

.room-background {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    display: block;
    user-select: none;
    pointer-events: none;
}


/* =========================
   ANIMIERTES FILM-RAUSCHEN
========================= */

#grain {
    position: fixed;

    inset: -60%;

    z-index: 9999;

    pointer-events: none;

    background-image: url("images/noise.png");
    background-repeat: repeat;
    background-size: 450px 450px;

    opacity: 0.09;

    mix-blend-mode: soft-light;

    animation: grain 0.35s steps(8) infinite;

    will-change: transform;
}

@keyframes grain {
    0% {
        transform: translate(0, 0);
    }

    10% {
        transform: translate(-4%, -5%);
    }

    20% {
        transform: translate(5%, 3%);
    }

    30% {
        transform: translate(-3%, 5%);
    }

    40% {
        transform: translate(4%, -4%);
    }

    50% {
        transform: translate(-5%, 2%);
    }

    60% {
        transform: translate(5%, -3%);
    }

    70% {
        transform: translate(-2%, 5%);
    }

    80% {
        transform: translate(3%, 2%);
    }

    90% {
        transform: translate(-4%, -3%);
    }

    100% {
        transform: translate(0, 0);
    }
}


/* =========================
   ANKLICKBARE OBJEKTE
========================= */

.hotspot {
    position: absolute;

    z-index: 20;

    display: block;

    color: white;
    text-align: center;
    text-decoration: none;
    font-weight: bold;

    cursor: pointer;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.hotspot img {
    width: 100%;
    height: auto;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(4px 7px 5px rgba(0, 0, 0, 0.35));
}

.hotspot span {
    position: absolute;

    left: 50%;
    bottom: -35px;

    padding: 6px 11px;

    background: rgba(20, 15, 24, 0.82);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 6px;

    color: white;
    white-space: nowrap;

    opacity: 0;

    transform:
        translateX(-50%)
        translateY(5px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.hotspot:hover {
    filter: brightness(1.12);
}

.hotspot:hover span {
    opacity: 1;

    transform:
        translateX(-50%)
        translateY(0);
}


/* =========================
   BEISPIEL-POSITIONEN
   Später an dein Zimmer anpassen
========================= */

.vinyl-link {
    width: 15%;

    top: 25%;
    left: 50%;
}

.vinyl-link:hover {
    transform:
        scale(1.08)
        rotate(4deg);
}

.tv-link {
    width: 15%;

    top: 40%;
    left: 27%;
}

.tv-link:hover {
    transform: scale(1.06);
}


/* =========================
   ALTER INHALT
   Kann vorerst erhalten bleiben
========================= */

.desktop {
    position: relative;

    width: min(1200px, 94%);
    min-height: 850px;

    margin: 30px auto;
    padding: 40px;

    overflow: hidden;

    background:
        linear-gradient(
            rgba(255, 255, 255, 0.18),
            rgba(255, 255, 255, 0.18)
        );

    border: 8px solid rgba(255, 255, 255, 0.85);
}

h1 {
    margin: 0;
}

.title {
    font-size: 90px;
    font-weight: 900;

    color: #ffde59;

    text-transform: uppercase;

    text-shadow:
        4px 4px #5a189a,
        8px 8px #240046;
}

.intro {
    text-align: center;
    font-weight: bold;
}


/* Alte anklickbare Bilder */

.item {
    position: absolute;

    display: block;

    color: #152d73;
    text-align: center;
    text-decoration: none;
    font-weight: bold;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.item img {
    width: 100%;

    display: block;

    object-fit: contain;

    filter:
        drop-shadow(5px 8px 6px rgba(0, 0, 0, 0.35));
}

.item span {
    display: inline-block;

    margin-top: 8px;
    padding: 5px 10px;

    background: rgba(255, 255, 255, 0.8);
}

.item:hover {
    transform:
        scale(1.08)
        rotate(-2deg);

    filter: brightness(1.1);
}


/* =========================
   HANDY
========================= */

@media (max-width: 750px) {
    .room {
        width: 115vw;
        height: 115vh;

        transform:
            translate(-50%, -50%)
            scale(1.08);
    }

    #grain {
        opacity: 0.06;
        background-size: 300px 300px;
    }

    .desktop {
        min-height: auto;
        padding: 25px;
    }

    .item,
    .note {
        position: static;

        width: min(320px, 90%);

        margin: 30px auto;

        transform: none;
    }

    .item:hover {
        transform: scale(1.05);
    }
}


/* Weniger Bewegung für Personen,
   die Animationen deaktiviert haben */

@media (prefers-reduced-motion: reduce) {
    .room {
        transition: none;
    }

    #grain {
        animation: none;
    }
}
/* ==================================
   ATMOSPHÄRISCHE ANIME-/LOFI-EFFEKTE
================================== */


/* Alle Effekte blockieren keine Klicks */

#grain,
#dust,
.mist,
.window-glow,
.sun-rays {
    pointer-events: none;
}


/* =========================
   FILM GRAIN
========================= */

#grain {
    position: fixed;
    inset: -60%;

    z-index: 1000;

    background-image: url("images/noise.png");
    background-repeat: repeat;
    background-size: 420px 420px;

    opacity: 0.07;
    mix-blend-mode: soft-light;

    animation:
        grainMovement 0.25s steps(6) infinite,
        grainFlicker 3s ease-in-out infinite;

    will-change: transform, opacity;
}

@keyframes grainMovement {
    0% {
        transform: translate(0, 0);
    }

    20% {
        transform: translate(-4%, 3%);
    }

    40% {
        transform: translate(3%, -4%);
    }

    60% {
        transform: translate(-3%, -2%);
    }

    80% {
        transform: translate(4%, 4%);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes grainFlicker {
    0%,
    100% {
        opacity: 0.055;
    }

    50% {
        opacity: 0.085;
    }
}


/* =========================
   FEINER NEBEL
========================= */

.mist {
    position: fixed;
    inset: 0;

    z-index: 15;

    background:
        radial-gradient(
            ellipse at 50% 72%,
            rgba(255, 220, 190, 0.12),
            transparent 58%
        ),
        linear-gradient(
            110deg,
            transparent 20%,
            rgba(255, 235, 218, 0.07) 48%,
            transparent 75%
        );

    opacity: 0.65;

    filter: blur(18px);

    animation: mistMove 12s ease-in-out infinite alternate;
}

@keyframes mistMove {
    from {
        transform: translateX(-1.5%) translateY(0);
        opacity: 0.45;
    }

    to {
        transform: translateX(1.5%) translateY(-1%);
        opacity: 0.7;
    }
}


/* =========================
   WARMES FENSTER-GLOW
========================= */

.window-glow {
    position: fixed;

    left: 29%;
    top: 13%;

    width: 48%;
    height: 51%;

    z-index: 12;

    border-radius: 22%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 190, 115, 0.25),
            rgba(255, 142, 79, 0.08) 50%,
            transparent 72%
        );

    filter: blur(28px);

    mix-blend-mode: screen;

    animation: windowGlow 5s ease-in-out infinite alternate;
}

@keyframes windowGlow {
    from {
        opacity: 0.48;
        transform: scale(0.98);
    }

    to {
        opacity: 0.78;
        transform: scale(1.03);
    }
}


/* =========================
   SONNENSTRAHLEN
========================= */

.sun-rays {
    position: fixed;

    left: 18%;
    top: 19%;

    width: 63%;
    height: 80%;

    z-index: 13;

    transform:
        rotate(-11deg)
        skewX(-8deg);

    transform-origin: top center;

    background:
        linear-gradient(
            105deg,
            transparent 10%,
            rgba(255, 207, 145, 0.03) 24%,
            rgba(255, 207, 145, 0.15) 34%,
            transparent 43%,
            rgba(255, 220, 175, 0.11) 54%,
            transparent 66%
        );

    filter: blur(10px);

    mix-blend-mode: screen;

    opacity: 0.65;

    animation: raysMove 8s ease-in-out infinite alternate;
}

@keyframes raysMove {
    from {
        opacity: 0.42;

        transform:
            rotate(-12deg)
            skewX(-8deg)
            translateX(-1%);
    }

    to {
        opacity: 0.72;

        transform:
            rotate(-10deg)
            skewX(-6deg)
            translateX(1%);
    }
}


/* =========================
   STAUBPARTIKEL
========================= */

#dust {
    position: fixed;
    inset: 0;

    z-index: 20;

    overflow: hidden;
}

.dust-particle {
    position: absolute;

    width: var(--size);
    height: var(--size);

    border-radius: 50%;

    background: rgba(255, 224, 181, var(--opacity));

    box-shadow:
        0 0 5px rgba(255, 215, 160, 0.65);

    animation:
        dustFloat var(--duration) linear infinite;

    animation-delay: var(--delay);

    will-change: transform, opacity;
}

@keyframes dustFloat {
    0% {
        transform:
            translate3d(0, 30px, 0)
            scale(0.7);

        opacity: 0;
    }

    15% {
        opacity: 1;
    }

    70% {
        opacity: 0.75;
    }

    100% {
        transform:
            translate3d(var(--drift), -115vh, 0)
            scale(1.15);

        opacity: 0;
    }
}


/* =========================
   HANDY / PERFORMANCE
========================= */

@media (max-width: 750px) {
    #grain {
        opacity: 0.045;
        background-size: 300px 300px;
    }

    .mist {
        opacity: 0.35;
    }

    .sun-rays {
        opacity: 0.4;
    }

    .window-glow {
        opacity: 0.5;
    }
}


/* Animationen reduzieren, falls gewünscht */

@media (prefers-reduced-motion: reduce) {
    #grain,
    .mist,
    .window-glow,
    .sun-rays,
    .dust-particle {
        animation: none;
    }
}
/* Möbel und interaktive Objekte */

.furniture,
.object {
    position: absolute;
    z-index: 10;
}

.furniture {
    pointer-events: auto;
    cursor: pointer;

    transition:
        transform 0.25s ease,
        filter 0.25s ease;
}

.furniture:hover {
    transform: translateY(-8px) scale(1.05);

    filter:
        brightness(1.08)
        drop-shadow(0 12px 12px rgba(0, 0, 0, 0.35));
}

.furniture img,
.object img {
    display: block;
    width: 100%;
    height: auto;
}

.object {
    display: block;
    cursor: pointer;
    text-decoration: none;

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

.object:hover {
    transform:
        translate(-50%, -50%)
        translateY(-8px)
        scale(1.05);

    filter:
        brightness(1.08)
        drop-shadow(0 0 10px rgba(255, 220, 150, 0.55));
}

.object span {
    position: absolute;

    left: 50%;
    bottom: -35px;

    padding: 6px 10px;

    color: white;
    background: rgba(20, 15, 24, 0.85);
    border-radius: 6px;

    opacity: 0;
    pointer-events: none;
    white-space: nowrap;

    transform: translateX(-50%) translateY(5px);

    transition:
        opacity 0.2s ease,
        transform 0.2s ease;
}

.object:hover span {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}
.bed {
    width: 35%;
    left: 3%;
    bottom: 2%;
}

.sofa {
    width: 28%;
    right: 3%;
    bottom: 4%;
}

.table {
    width: 14%;
    left: 55%;
    bottom: 8%;
}

.vinyl {
    position: absolute;

    width: 15%;

    left: 50%;
    top: 52.5%;

    transform: translate(-50%, -50%);
}

/* =========================
   ZA WARUDO INTRO
========================= */

#intro {
    position: fixed;
    inset: 0;

    z-index: 999999;

    display: flex;
    justify-content: center;
    align-items: center;

    overflow: hidden;

    background: #050307;

    transition: opacity 0.25s ease;
}

#zaWarudoButton {
    position: relative;
    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: center;

    padding: 0;

    border: 0;
    background: transparent;

    cursor: pointer;
}

#introImage {
    position: fixed;
    inset: 0;

    width: 100vw;
    height: 100vh;

    object-fit: cover;
    object-position: center;

    display: block;

    animation: none;
    transform: none;

    user-select: none;
}

#introTitle {
    display: block;

    width: min(480px, 65vw);
    height: auto;

    margin-top: 24px;

    object-fit: contain;

    user-select: none;

    filter:
        drop-shadow(0 0 8px rgba(255, 255, 255, 0.8))
        drop-shadow(0 0 18px rgba(157, 78, 221, 0.7));

    transition:
        transform 0.2s ease,
        filter 0.2s ease;
}

#zaWarudoButton:hover #introTitle {
    transform: scale(1.05);

    filter:
        brightness(1.15)
        drop-shadow(0 0 12px rgba(255, 255, 255, 0.95))
        drop-shadow(0 0 25px rgba(157, 78, 221, 0.9));
}

/* =========================
   TIME-STOP-ZUSTAND
========================= */

#intro.time-stop {
    animation:
        introShake 0.08s steps(2) 8,
        timeStopColors 0.9s steps(3) forwards;
}

#intro.time-stop #introImage {
    animation: timeStopImage 1.15s cubic-bezier(.2, .8, .2, 1) forwards;
}

#intro.time-stop #introTitle {
    opacity: 0;
    transform: scale(1.3);
}

@keyframes introShake {
    0% {
        transform: translate(0, 0);
    }

    25% {
        transform: translate(-7px, 4px);
    }

    50% {
        transform: translate(6px, -4px);
    }

    75% {
        transform: translate(-4px, -3px);
    }

    100% {
        transform: translate(0, 0);
    }
}

@keyframes timeStopColors {
    0% {
        filter:
            contrast(1)
            saturate(1)
            invert(0);
    }

    25% {
        filter:
            contrast(2.2)
            saturate(0)
            invert(1);
    }

    55% {
        filter:
            contrast(1.8)
            saturate(2.5)
            hue-rotate(240deg);
    }

    100% {
        filter:
            contrast(1.4)
            saturate(0.65)
            hue-rotate(270deg);
    }
}

@keyframes timeStopImage {
    0% {
        transform: scale(1);
    }

    18% {
        transform: scale(1.14);
    }

    35% {
        transform: scale(0.98);
    }

    100% {
        transform: scale(1.7);
        opacity: 0;
    }
}


/* =========================
   WEISSER BLITZ
========================= */

.time-stop-flash {
    position: absolute;
    inset: 0;

    z-index: 20;

    pointer-events: none;

    background: white;

    opacity: 0;
}

#intro.time-stop .time-stop-flash {
    animation: timeStopFlash 1.05s steps(1) forwards;
}

@keyframes timeStopFlash {
    0% {
        opacity: 0;
    }

    8% {
        opacity: 1;
    }

    13% {
        opacity: 0;
    }

    31% {
        opacity: 0.85;
        background: #b517ff;
    }

    37% {
        opacity: 0;
    }

    76% {
        opacity: 0.45;
        background: white;
    }

    82% {
        opacity: 0;
    }
}


/* =========================
   COMIC-/SPEED-LINES
========================= */

.speed-lines {
    position: absolute;
    inset: -30%;

    z-index: 12;

    pointer-events: none;

    opacity: 0;

    background:
        repeating-conic-gradient(
            from 0deg at center,
            transparent 0deg 4deg,
            rgba(255, 255, 255, 0.38) 5deg 6deg,
            transparent 7deg 13deg
        );

    transform: scale(0.4);
    mix-blend-mode: screen;
}

#intro.time-stop .speed-lines {
    animation: speedLines 0.9s ease-out forwards;
}

@keyframes speedLines {
    0% {
        opacity: 0;
        transform: scale(0.35) rotate(0deg);
    }

    20% {
        opacity: 0.9;
    }

    100% {
        opacity: 0;
        transform: scale(2.5) rotate(8deg);
    }
}


/* =========================
   INTRO WIRD ENTFERNT
========================= */

#intro.finished {
    opacity: 0;
    pointer-events: none;
}
#intro.charging #introImage {
    filter:
        brightness(0.9)
        contrast(1.1)
        drop-shadow(0 0 18px rgba(157, 78, 221, 0.65));
}

#intro.charging #introTitle {
    transform: scale(1.04);

    filter:
        brightness(1.2)
        drop-shadow(0 0 18px rgba(255, 255, 255, 0.9))
        drop-shadow(0 0 35px rgba(157, 78, 221, 0.9));
}

#introQuote{

    width:min(800px,80vw);

    margin-top:25px;
    margin-bottom:35px;

    color:white;

    text-align:center;

    font-size:22px;
    font-style:italic;

    letter-spacing:1px;
    line-height:1.5;

    opacity:.85;

    text-shadow:
        0 0 8px rgba(255,255,255,.4);

}