/* =====================================================
   RESET
===================================================== */

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

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background: #08040d;
    color: white;

    font-family:
        Georgia,
        "Times New Roman",
        serif;
}


/* =====================================================
   MAIN
===================================================== */

.dream {
    position: relative;

    width: 100vw;
    height: 100vh;

    overflow: hidden;

    background: #100719;
}


/* =====================================================
   SCENES
===================================================== */

.scene {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;

    opacity: 0;
    visibility: hidden;

    pointer-events: none;

    transform: scale(1.025);

    transition:
        opacity 1.25s cubic-bezier(.22, .61, .36, 1),
        transform 1.6s cubic-bezier(.22, .61, .36, 1),
        visibility 0s linear 1.6s;
}

.scene.active {
    opacity: 1;

    visibility: visible;

    pointer-events: auto;

    transform: scale(1);

    transition:
        opacity 1.25s cubic-bezier(.22, .61, .36, 1),
        transform 1.6s cubic-bezier(.22, .61, .36, 1),
        visibility 0s linear 0s;
}


/* =====================================================
   SCENE CONTENT REVEAL
===================================================== */

.scene-copy {
    opacity: 0;

    transform:
        translate3d(-24px, -50%, 0);

    transition:
        opacity 1s ease .35s,
        transform 1.25s cubic-bezier(.22, .61, .36, 1) .35s;
}

.scene.active .scene-copy {
    opacity: 1;

    transform:
        translate3d(0, -50%, 0);
}


/* =====================================================
   SCENE 01
===================================================== */

.scene-01 {
    z-index: 10;

    background: #100719;
}


/* =====================================================
   ROOM IMAGE
===================================================== */

.room-image {
    position: absolute;

    inset: -2%;

    width: 104%;
    height: 104%;

    background-image:
        url("assets/room.webp");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    z-index: 0;

    transform: scale(1.025);

    animation:
        roomZoom
        22s
        ease-in-out
        infinite
        alternate;
}


@keyframes roomZoom {

    0% {
        transform:
            scale(1.025)
            translate3d(0, 0, 0);
    }

    100% {
        transform:
            scale(1.065)
            translate3d(-.35%, .15%, 0);
    }

}


/* =====================================================
   WINDOW LIGHT
===================================================== */

.window-light {
    position: absolute;

    width: 65vw;
    height: 65vw;

    max-width: 1000px;
    max-height: 1000px;

    right: -15%;
    top: -8%;

    background:
        radial-gradient(
            ellipse,
            rgba(255, 103, 193, .23),
            rgba(157, 72, 211, .11) 35%,
            transparent 70%
        );

    mix-blend-mode: screen;

    pointer-events: none;

    z-index: 2;

    animation:
        lightPulse
        8s
        ease-in-out
        infinite;
}


@keyframes lightPulse {

    0%,
    100% {
        opacity: .68;
    }

    50% {
        opacity: 1;
    }
}


/* =====================================================
   DUST
===================================================== */

.dust {
    position: absolute;

    inset: 0;

    overflow: hidden;

    pointer-events: none;

    z-index: 4;
}

.dust span {
    position: absolute;

    width: 3px;
    height: 3px;

    border-radius: 50%;

    background:
        rgba(255, 240, 210, .55);

    animation:
        dustFloat
        linear
        infinite;
}

.dust span:nth-child(1) {
    left: 12%;
    top: 72%;
    animation-duration: 14s;
}

.dust span:nth-child(2) {
    left: 25%;
    top: 60%;
    animation-duration: 18s;
}

.dust span:nth-child(3) {
    left: 38%;
    top: 80%;
    animation-duration: 16s;
}

.dust span:nth-child(4) {
    left: 51%;
    top: 68%;
    animation-duration: 20s;
}

.dust span:nth-child(5) {
    left: 64%;
    top: 75%;
    animation-duration: 15s;
}

.dust span:nth-child(6) {
    left: 76%;
    top: 55%;
    animation-duration: 19s;
}

.dust span:nth-child(7) {
    left: 86%;
    top: 82%;
    animation-duration: 17s;
}

.dust span:nth-child(8) {
    left: 18%;
    top: 45%;
    animation-duration: 21s;
}

.dust span:nth-child(9) {
    left: 46%;
    top: 38%;
    animation-duration: 13s;
}

.dust span:nth-child(10) {
    left: 72%;
    top: 42%;
    animation-duration: 22s;
}


@keyframes dustFloat {

    0% {
        transform:
            translate3d(0, 30px, 0);

        opacity: 0;
    }

    20% {
        opacity: .7;
    }

    50% {
        transform:
            translate3d(35px, -80px, 0);

        opacity: .45;
    }

    80% {
        opacity: .2;
    }

    100% {
        transform:
            translate3d(-20px, -160px, 0);

        opacity: 0;
    }
}


/* =====================================================
   WALL MEMORIES
===================================================== */

.wall-memories {
    position: absolute;

    left: 2%;
    top: 3%;

    width: 45%;
    height: 70%;

    pointer-events: none;

    z-index: 3;
}


.wall-memory {
    position: absolute;

    overflow: hidden;

    opacity: .48;

    filter:
        blur(.15px)
        saturate(.78)
        brightness(1.08)
        contrast(1.02);

    mix-blend-mode: screen;

    border:
        1px solid
        rgba(255, 225, 205, .10);

    box-shadow:
        0 0 18px
        rgba(255, 190, 155, .08),

        0 8px 25px
        rgba(0, 0, 0, .22);

    transition:
        opacity .8s ease,
        filter .8s ease,
        transform 1s ease,
        box-shadow .8s ease;
}


.wall-memory::after {
    content: "";

    position: absolute;

    inset: -15%;

    pointer-events: none;

    background:
        radial-gradient(
            ellipse at center,
            rgba(255, 205, 170, .18),
            rgba(255, 170, 210, .06) 45%,
            transparent 72%
        );

    mix-blend-mode: screen;

    opacity: .75;

    z-index: 2;
}


.wall-memory img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(1.08)
        contrast(1.02)
        saturate(.82);

    transition:
        filter .8s ease,
        transform 1s ease;
}


/* =====================================================
   INDIVIDUAL PHOTO LIGHT
===================================================== */

.wall-memory-1 {
    filter:
        blur(.15px)
        saturate(.78)
        brightness(1.10)
        contrast(1.02);
}


.wall-memory-2 {
    filter:
        blur(.15px)
        saturate(.80)
        brightness(1.12)
        contrast(1.02);
}


.wall-memory-3 {
    filter:
        blur(.15px)
        saturate(.84)
        brightness(1.06)
        contrast(1.03);
}


.wall-memory-4 {
    filter:
        blur(.15px)
        saturate(.80)
        brightness(1.10)
        contrast(1.02);
}


/* =====================================================
   PHOTO POSITIONS
===================================================== */

.wall-memory-1 {
    left: 4%;
    top: 5%;

    width: 150px;
    height: 125px;

    transform:
        rotate(-8deg);
}


.wall-memory-2 {
    left: 32%;
    top: 4%;

    width: 135px;
    height: 115px;

    transform:
        rotate(7deg);
}


.wall-memory-3 {
    left: 10%;
    top: 42%;

    width: 165px;
    height: 130px;

    transform:
        rotate(-5deg);
}


.wall-memory-4 {
    left: 39%;
    top: 42%;

    width: 145px;
    height: 120px;

    transform:
        rotate(8deg);
}


/* =====================================================
   PAINTING GLOW
===================================================== */

.painting-glow {
    position: absolute;

    width: 350px;
    height: 300px;

    right: 8%;
    bottom: 17%;

    background:
        radial-gradient(
            ellipse,
            rgba(255, 107, 193, .18),
            transparent 70%
        );

    filter:
        blur(20px);

    pointer-events: none;

    z-index: 2;
}


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

.grain {
    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 9;

    opacity: .08;

    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.4'/%3E%3C/svg%3E");

    mix-blend-mode: overlay;
}


/* =====================================================
   ROOM VIGNETTE
===================================================== */

.vignette {
    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 10;

    background:
        linear-gradient(
            90deg,
            rgba(0, 0, 0, .72) 0%,
            rgba(0, 0, 0, .35) 35%,
            rgba(0, 0, 0, .08) 70%,
            rgba(0, 0, 0, .25) 100%
        ),

        radial-gradient(
            ellipse at center,
            transparent 45%,
            rgba(4, 1, 9, .3) 75%,
            rgba(2, 1, 6, .8) 100%
        );
}


/* =====================================================
   TEXT
===================================================== */

.scene-copy {
    position: absolute;

    left: 7vw;
    top: 50%;

    width: 390px;

    z-index: 20;

    color:
        rgba(255, 245, 232, .94);

    text-shadow:
        0 5px 35px
        rgba(0, 0, 0, .75);
}


.scene-number {
    margin-bottom: 24px;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: .38em;

    color:
        rgba(255, 220, 190, .58);
}


.scene-copy h1 {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(42px, 4.5vw, 70px);

    font-weight: 400;

    line-height: .91;

    letter-spacing:
        -.04em;
}


.scene-copy h1 i {
    color:
        #e59ae9;

    font-style: italic;
}


.scene-copy p {
    max-width: 290px;

    margin-top: 28px;

    font-family:
        Arial,
        sans-serif;

    font-size: 11px;

    line-height: 1.9;

    letter-spacing: .07em;

    color:
        rgba(255, 240, 225, .56);
}


.scene-line {
    width: 70px;
    height: 1px;

    margin-top: 28px;

    background:
        rgba(255, 225, 200, .42);
}


/* =====================================================
   BUTTONS
===================================================== */

.scene-hint {
    display: block;

    margin-top: 20px;

    padding: 0;

    border: 0;

    background: transparent;

    font-family:
        Arial,
        sans-serif;

    font-size: 8px;

    letter-spacing: .28em;

    color:
        rgba(255, 240, 225, .48);

    cursor: pointer;

    pointer-events: auto;

    transition:
        color .5s ease;
}


.scene-hint span {
    display: inline-block;

    margin-left: 10px;

    font-size: 14px;

    transition:
        transform .5s ease;
}


.scene-hint:hover {
    color:
        rgba(255, 240, 225, .9);
}


.enter-button:hover span,
.continue-button:hover span {
    transform:
        translateY(5px);
}


.return-button:hover span {
    transform:
        translateY(-5px);
}


/* =====================================================
   SOUND
===================================================== */

.sound-status {
    position: absolute;

    right: 35px;
    top: 35px;

    z-index: 50;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 0;

    border: 0;

    background: transparent;

    font-family:
        Arial,
        sans-serif;

    font-size: 9px;

    letter-spacing: 4px;

    color:
        rgba(255, 255, 255, .55);

    cursor: pointer;

    transition:
        color .5s ease;
}


.sound-dot {
    width: 6px;
    height: 6px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, .3);

    transition:
        all .5s ease;
}


.sound-status:hover {
    color:
        rgba(255, 255, 255, .85);
}


.sound-status.playing {
    color:
        rgba(255, 220, 245, .9);
}


.sound-status.playing .sound-dot {
    background:
        #ff8fdb;

    box-shadow:
        0 0 15px #ff8fdb;
}


/* =====================================================
   SCENE 02
===================================================== */

.scene-02 {
    z-index: 20;

    background:
        #100914;
}


.memory-background {
    position: absolute;

    inset: 0;

    background:
        radial-gradient(
            ellipse at 70% 30%,
            rgba(190, 90, 190, .12),
            transparent 50%
        ),

        linear-gradient(
            135deg,
            #100914,
            #08050c
        );

    z-index: 0;
}


.memory-light {
    position: absolute;

    width: 70vw;
    height: 70vw;

    left: -15%;
    top: -20%;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(220, 130, 220, .11),
            transparent 68%
        );

    animation:
        memoryLight
        12s
        ease-in-out
        infinite
        alternate;

    pointer-events: none;

    z-index: 1;
}


@keyframes memoryLight {

    0% {
        transform:
            translate3d(0, 0, 0)
            scale(1);
    }

    100% {
        transform:
            translate3d(80px, 40px, 0)
            scale(1.15);
    }
}


.memory-vignette {
    position: absolute;

    inset: 0;

    z-index: 15;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(5, 2, 10, .58),
            transparent 55%,
            rgba(5, 2, 10, .45)
        ),

        radial-gradient(
            ellipse at center,
            transparent 42%,
            rgba(0, 0, 0, .65) 100%
        );
}


/* =====================================================
   MEMORY WORLD
===================================================== */

.memory-world {
    position: absolute;

    inset: 0;

    z-index: 5;

    transition:
        transform .2s ease-out;
}


/* =====================================================
   MEMORY PHOTOS
===================================================== */

.memory-large {
    position: absolute;

    overflow: hidden;

    border:
        1px solid
        rgba(255, 230, 245, .12);

    background:
        #120b15;

    box-shadow:
        0 30px 70px
        rgba(0, 0, 0, .65);

    transition:
        filter .8s ease,
        box-shadow .8s ease;
}


.memory-large img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    filter:
        brightness(.90)
        contrast(1.03)
        saturate(.82);

    transition:
        filter .8s ease,
        transform 1.2s ease;
}


.memory-large:hover {
    box-shadow:
        0 35px 90px
        rgba(0, 0, 0, .78);
}


.memory-large:hover img {
    filter:
        brightness(1)
        contrast(1.04)
        saturate(.95);

    transform:
        scale(1.025);
}


/* =====================================================
   MEMORY PHOTO 1
===================================================== */

.memory-large-1 {
    left: 8%;
    top: 11%;

    width: 250px;
    height: 190px;

    transform:
        rotate(-7deg);

    animation:
        memoryFloat1
        9s
        ease-in-out
        infinite
        alternate;
}


@keyframes memoryFloat1 {

    from {
        margin-top: 0;
    }

    to {
        margin-top: -12px;
    }
}


/* =====================================================
   MEMORY PHOTO 2
===================================================== */

.memory-large-2 {
    left: 29%;
    top: 9%;

    width: 220px;
    height: 180px;

    transform:
        rotate(6deg);

    animation:
        memoryFloat2
        11s
        ease-in-out
        infinite
        alternate;
}


@keyframes memoryFloat2 {

    from {
        margin-top: 0;
    }

    to {
        margin-top: 14px;
    }
}


/* =====================================================
   MEMORY PHOTO 3
===================================================== */

.memory-large-3 {
    left: 15%;
    top: 42%;

    width: 300px;
    height: 230px;

    z-index: 8;

    transform:
        rotate(-4deg);

    box-shadow:
        0 35px 80px
        rgba(0, 0, 0, .72),

        0 0 45px
        rgba(225, 130, 220, .10);

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


@keyframes memoryFloat3 {

    from {
        margin-top: 0;
    }

    to {
        margin-top: -15px;
    }
}


/* =====================================================
   MEMORY PHOTO 4
===================================================== */

.memory-large-4 {
    left: 39%;
    top: 48%;

    width: 230px;
    height: 180px;

    transform:
        rotate(8deg);

    animation:
        memoryFloat4
        10s
        ease-in-out
        infinite
        alternate;
}


@keyframes memoryFloat4 {

    from {
        margin-top: 0;
    }

    to {
        margin-top: 12px;
    }
}


/* =====================================================
   SCENE 02 TEXT
===================================================== */

.scene02-copy {
    left: auto;

    right: 8vw;

    width: 330px;
}


/* =====================================================
   SCENE 03 — GARDEN
===================================================== */

.scene-03 {
    z-index: 30;

    background:
        #120914;
}


.garden-image {
    position: absolute;

    inset: -2%;

    width: 104%;
    height: 104%;

    background-image:
        url("assets/garden.jpg");

    background-size: cover;

    background-position: center center;

    background-repeat: no-repeat;

    z-index: 0;

    transform:
        scale(1.04);

    animation:
        gardenZoom
        24s
        ease-in-out
        infinite
        alternate;

    filter:
        saturate(.94)
        brightness(.90);
}


@keyframes gardenZoom {

    0% {
        transform:
            scale(1.04)
            translate3d(0, 0, 0);
    }

    100% {
        transform:
            scale(1.09)
            translate3d(-.5%, -.3%, 0);
    }
}


/* =====================================================
   GARDEN LIGHT
===================================================== */

.garden-light {
    position: absolute;

    width: 75vw;
    height: 75vw;

    right: -15%;
    top: -20%;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse,
            rgba(255, 177, 206, .23),
            rgba(180, 100, 200, .09) 35%,
            transparent 70%
        );

    mix-blend-mode:
        screen;

    pointer-events: none;

    z-index: 2;

    animation:
        gardenLight
        10s
        ease-in-out
        infinite
        alternate;
}


@keyframes gardenLight {

    0% {
        opacity: .60;

        transform:
            scale(1);
    }

    100% {
        opacity: .95;

        transform:
            scale(1.12);
    }
}


/* =====================================================
   GARDEN ATMOSPHERE
===================================================== */

.garden-atmosphere {
    position: absolute;

    inset: 0;

    z-index: 3;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            rgba(110, 65, 145, .08),
            transparent 45%,
            rgba(45, 12, 60, .20)
        );

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


@keyframes gardenAtmosphere {

    from {
        opacity: .45;
    }

    to {
        opacity: .85;
    }
}


/* =====================================================
   GARDEN VIGNETTE
===================================================== */

.garden-vignette {
    position: absolute;

    inset: 0;

    pointer-events: none;

    z-index: 5;

    background:
        linear-gradient(
            90deg,
            rgba(5, 2, 10, .72) 0%,
            rgba(5, 2, 10, .35) 32%,
            rgba(5, 2, 10, .08) 70%,
            rgba(5, 2, 10, .30) 100%
        ),

        radial-gradient(
            ellipse at center,
            transparent 40%,
            rgba(2, 1, 6, .65) 100%
        );
}


/* =====================================================
   SCENE 03 TEXT
===================================================== */

.scene03-copy {
    width: 390px;

    z-index: 20;
}


.scene03-copy h1 {
    font-size:
        clamp(42px, 5vw, 76px);
}


/* =====================================================
   MEDIUM SCREENS
===================================================== */

@media (max-width: 1100px) and (min-width: 801px) {

    .scene-copy {
        left: 5vw;

        width: 340px;
    }


    .scene-copy h1 {
        font-size:
            clamp(38px, 4vw, 58px);
    }


    .scene02-copy {
        left: auto;

        right: 5vw;

        width: 300px;
    }
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 800px) {

    .scene-copy {
        left: 25px;
        right: 25px;

        width: auto;

        top: auto;
        bottom: 55px;

        transform:
            translate3d(-18px, 0, 0);
    }


    .scene.active .scene-copy {
        transform:
            translate3d(0, 0, 0);
    }


    .scene-copy h1 {
        font-size: 42px;

        line-height: .92;
    }


    .scene-copy p {
        max-width: 270px;

        font-size: 10px;
    }


    .wall-memories {
        width: 75%;
    }


    .wall-memory-1 {
        width: 100px;
        height: 80px;
    }


    .wall-memory-2 {
        width: 95px;
        height: 78px;
    }


    .wall-memory-3 {
        width: 110px;
        height: 90px;
    }


    .wall-memory-4 {
        width: 100px;
        height: 82px;
    }


    .scene02-copy {
        left: auto;
        right: 25px;

        bottom: 35px;

        width: 260px;
    }


    .scene02-copy h1 {
        font-size: 36px;
    }


    .memory-large-1 {
        left: 4%;
        top: 8%;

        width: 150px;
        height: 115px;
    }


    .memory-large-2 {
        left: 42%;
        top: 7%;

        width: 140px;
        height: 110px;
    }


    .memory-large-3 {
        left: 8%;
        top: 36%;

        width: 190px;
        height: 150px;
    }


    .memory-large-4 {
        left: 48%;
        top: 48%;

        width: 155px;
        height: 120px;
    }


    .scene03-copy {
        left: 25px;
        right: 25px;

        bottom: 55px;

        width: auto;
    }


    .scene03-copy h1 {
        font-size: 42px;
    }


    .sound-status {
        right: 20px;
        top: 20px;
    }
}


/* =====================================================
   SMALL HEIGHT
===================================================== */

@media (max-height: 650px) and (min-width: 801px) {

    .scene-copy {
        top: 48%;
    }


    .scene-copy h1 {
        font-size:
            clamp(34px, 4vw, 58px);
    }


    .scene-copy p {
        margin-top: 18px;
    }


    .scene-line {
        margin-top: 18px;
    }


    .scene-hint {
        margin-top: 14px;
    }
}


/* =====================================================
   REDUCED MOTION
===================================================== */

@media (prefers-reduced-motion: reduce) {

    .scene,
    .scene-copy,
    .room-image,
    .memory-light,
    .garden-image,
    .garden-light,
    .garden-atmosphere,
    .memory-large,
    .dust span {
        animation: none !important;

        transition: none !important;
    }
}