@import url('https://fonts.googleapis.com/css2?family=Mrs+Saint+Delafield&display=swap');

.hotel-container {
    .hotel-content {
        .hotel-office {
            background-image: url('../../../images/hotel/floor1/office/office2.jpg');
            background-repeat: no-repeat;
            background-size: cover;
            background-position: top center;
            background-attachment: fixed;
            min-height: calc(100vh - 40px);
            position: relative;

            .office-content {
                position: relative;
                min-height: calc(100vh - 40px);
                z-index: 10;
                overflow: hidden;
            }

            .frame {
                position: absolute;
                top: 80px;
                left: 50%;
                transform: translateX(-50%);
            }

            .office-blocks {
                margin: 0 auto;
                width: 100%;
                min-height: 450px;
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                z-index: 99;
            }

            .desk-block {
                cursor: pointer;
                position: absolute;
                bottom: -120px;
                left: 50%;
                transform: translateX(-50%);
                width: 100%;
                max-width: 800px;
                z-index: 99;

                img {
                    width: 100%;
                    z-index: 99;
                }
            }

            .typewriter-block {
                position: absolute;
                bottom: 150px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 90;
                max-width: 400px;
                width: 100%;
                cursor: pointer;

                img{
                    width: 100%;
                }
            }

            .junk-block {
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                z-index: 8;
                width: 100%;
                min-width: 1000px;

                img{
                    width: 100%;
                }
            }

            .journal-block {
                position: absolute;
                bottom: 150px;
                left: 50%;
                transform: translateX(-50%);
                z-index: 9;
                max-width: 150px;
                cursor: pointer;

                img{
                    width: 100%;
                }
            }

            .door-block {
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                z-index: 9;
                max-width: 350px;
                cursor: pointer;

                img{
                    width: 100%;
                }
            }

            #writing-block {
                position: absolute;
                bottom: 0;
                left:0;
                width: 100%;
                height: 100%;
                opacity: 0.7;
                z-index: 8;
                font-family: "Mrs Saint Delafield", cursive;
                font-size: 75px;
                letter-spacing: 9px;
                padding: 20px;
                color: black;

                .text {
                    display: inline-block;
                    position:relative;
                    -webkit-user-select:none;
                    user-select:none;
                    will-change: transform;

                    &::before,
                    &::after {
                        content: attr(data-text);
                        position: absolute;
                        inset: 0;
                        pointer-events: none;
                        overflow: hidden;
                        clip-path: inset(0 0 0 0);
                    }
                    &::before{
                        color: #ff004c;
                        z-index: 1;
                        transform: translate(var(--tx1, 2px), var(--ty1, -2px));
                        opacity: 0.85;
                        mix-blend-mode: screen;
                        filter: drop-shadow(0 0 6px rgba(255, 0, 76, 0.15));
                        /* par défaut pas de découpe */
                        clip-path: inset(var(--g1, 0%) 0 var(--g1b, 0%) 0);
                    }

                    &::after {
                        color: #00f0ff;
                        z-index: 2;
                        transform: translate(var(--tx2, -2px), var(--ty2, 2px));
                        opacity: 0.85;
                        mix-blend-mode: screen;
                        filter: drop-shadow(0 0 6px rgba(0, 240, 255, 0.12));
                        clip-path: inset(var(--g2, 0%) 0 var(--g2b, 0%) 0);
                    }

                    .writing-text {
                        position: relative;
                        z-index: 3;
                        display: inline-block;
                        transform: translateZ(0);
                        text-shadow: 0 0 8px rgba(255, 255, 255, 0.06),
                        0 0 18px rgba(255, 255, 255, 0.02);
                    }

                    &.glitch-active {
                        transform: translateX(var(--shake-x, 0px)) skewX(var(--skew, 0deg));
                    }
                }
            }
        }
    }
}

textarea.writer-text {
    width: 100%;
    height: 400px;
    font-family: "Mrs Saint Delafield", cursive;
    font-size: 32px;
}

@media (max-width: 1024px) {
    .hotel-container {
        .hotel-content {
            .hotel-office {

                .typewriter-block {
                    bottom: 40%;
                }
                .journal-block {
                    bottom: 20px;
                    transform: rotate(-10deg);
                    max-width: 60px;
                    left: 15px;
                }

                #writing-block {
                    font-size: 48px;
                    letter-spacing: 6px;
                }
            }
        }
    }
}