/*
==============================================================
REVAMED MANSION
PHIRO BASELINE 004

Presentation authority.

Goals:
- stronger atmosphere
- stronger depth
- character presentation
- environmental motion
- interaction feedback
- puzzle-result presentation
==============================================================
*/


/* ==========================================================
   GLOBAL ATMOSPHERE
========================================================== */

body {
    background:
        radial-gradient(
            circle at 50% -10%,
            #241a2a 0,
            #0c0a11 42%,
            #050509 82%
        );
}


.game-screen {
    isolation: isolate;
}


.scene {
    transform: translateZ(0);
    background-color: #09080d;
}


.scene::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 18;

    pointer-events: none;

    opacity: .20;

    mix-blend-mode: soft-light;

    background:
        repeating-linear-gradient(
            0deg,
            transparent 0 3px,
            rgba(255,255,255,.016) 3px 4px
        ),
        radial-gradient(
            circle at 50% 8%,
            rgba(255,205,111,.13),
            transparent 38%
        );
}


.scene::after {
    z-index: 19;

    background:
        radial-gradient(
            ellipse at 50% 45%,
            transparent 20%,
            rgba(0,0,0,.20) 54%,
            rgba(0,0,0,.68) 100%
        );
}


/* ==========================================================
   ROOM FADE
========================================================== */

.room-transition {
    position: fixed;
    inset: 0;

    z-index: 9990;

    pointer-events: none;

    opacity: 0;

    background: #050408;
}


.room-transition.active {
    animation:
        phiroRoomTransition
        .72s ease-in-out;
}


@keyframes phiroRoomTransition {

    0% {
        opacity: 0;
    }

    40% {
        opacity: .94;
    }

    60% {
        opacity: .94;
    }

    100% {
        opacity: 0;
    }

}


/* ==========================================================
   LIGHTNING
========================================================== */

.lightning-flash {
    position: fixed;
    inset: 0;

    z-index: 9980;

    pointer-events: none;

    opacity: 0;

    background:
        rgba(190,214,238,.34);

    mix-blend-mode: screen;
}


.lightning-flash.flash {
    animation:
        phiroLightning
        .28s linear;
}


@keyframes phiroLightning {

    0% {
        opacity: 0;
    }

    7% {
        opacity: .72;
    }

    15% {
        opacity: .05;
    }

    24% {
        opacity: .40;
    }

    100% {
        opacity: 0;
    }

}


/* ==========================================================
   FILM / PIXEL TEXTURE
========================================================== */

.film-grain {
    position: fixed;
    inset: 0;

    z-index: 9000;

    pointer-events: none;

    opacity: .055;

    background-image:
        repeating-radial-gradient(
            circle at 0 0,
            transparent 0,
            rgba(255,255,255,.05) 1px,
            transparent 2px
        );

    background-size:
        5px 5px;
}


/* ==========================================================
   ROOM DEPTH
========================================================== */

.scene-wall,
.study-wall {
    box-shadow:
        inset 0 30px 80px rgba(0,0,0,.32);
}


.ceiling-beam {
    box-shadow:
        0 9px 18px rgba(0,0,0,.45);
}


.window,
.study-window {
    box-shadow:
        inset 0 0 30px #020407,
        0 0 28px rgba(100,136,174,.10);
}


/* ==========================================================
   FOYER MATERIAL PASS
========================================================== */

.scene-foyer .scene-wall {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(255,255,255,.012) 0 2px,
            transparent 2px 86px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(127,93,67,.035) 0 1px,
            transparent 1px 32px
        ),
        linear-gradient(
            #302532,
            #20191f
        );
}


.foyer-rug {
    filter:
        drop-shadow(
            0 12px 14px
            rgba(0,0,0,.56)
        );
}


/* ==========================================================
   CHANDELIER
========================================================== */

.chandelier-art span {
    box-shadow:
        0 0 8px rgba(255,199,91,.82),
        0 0 24px rgba(238,172,62,.37),
        0 0 55px rgba(238,172,62,.10);
}


.scene-foyer .chandelier-art {
    filter:
        drop-shadow(
            0 12px 22px
            rgba(229,174,74,.15)
        );
}


/* ==========================================================
   EAST DOOR
========================================================== */

.east-door-art {
    transform-origin: right center;

    transition:
        transform
        .70s
        cubic-bezier(.22,.75,.25,1),

        filter
        .4s ease,

        box-shadow
        .4s ease;
}


.east-door-art.unlocked {
    transform:
        perspective(850px)
        rotateY(-42deg);

    filter:
        brightness(1.13);

    box-shadow:
        inset 28px 0 45px
        rgba(106,172,156,.18),

        -18px 7px 25px
        rgba(0,0,0,.45);
}


/* ==========================================================
   STUDY MATERIAL PASS
========================================================== */

.scene-study {
    background:
        linear-gradient(
            #101319 0 12%,
            #1b1c21 12% 73%,
            #100d11 73%
        );
}


.study-wall {
    background:
        repeating-linear-gradient(
            90deg,
            rgba(175,136,81,.022) 0 3px,
            transparent 3px 94px
        ),
        repeating-linear-gradient(
            0deg,
            rgba(255,255,255,.012) 0 1px,
            transparent 1px 40px
        ),
        linear-gradient(
            #27262a,
            #19181d
        );
}


/* ==========================================================
   FIREPLACE LIGHT
========================================================== */

.fireplace {
    box-shadow:
        0 0 30px rgba(222,106,43,.16),
        inset 0 0 20px rgba(228,112,42,.07);
}


.firebox {
    box-shadow:
        0 0 20px rgba(224,101,34,.22),
        0 0 55px rgba(221,93,27,.08);
}


.fireplace::after {
    content: "";

    position: absolute;

    left: -70%;
    top: -50%;

    width: 240%;
    height: 210%;

    pointer-events: none;

    opacity: .17;

    background:
        radial-gradient(
            circle,
            rgba(241,142,62,.60),
            transparent 64%
        );

    animation:
        phiroFireGlow
        1.4s ease-in-out
        infinite alternate;
}


@keyframes phiroFireGlow {

    from {
        opacity: .11;
        transform: scale(.94);
    }

    to {
        opacity: .21;
        transform: scale(1.04);
    }

}


/* ==========================================================
   CLOCK
========================================================== */

.grandfather-clock {
    filter:
        drop-shadow(
            8px 12px 10px
            rgba(0,0,0,.45)
        );
}


.grandfather-clock.clock-solved {
    animation:
        phiroClockWake
        .7s ease-out;
}


@keyframes phiroClockWake {

    0% {
        transform: translateX(0);
    }

    20% {
        transform: translateX(-3px);
    }

    40% {
        transform: translateX(3px);
    }

    60% {
        transform: translateX(-2px);
    }

    100% {
        transform: translateX(0);
    }

}


/* ==========================================================
   SECRET PANEL
========================================================== */

.study-secret-panel {
    transform-origin: left center;
}


.study-secret-panel:not([hidden]) {
    animation:
        phiroSecretReveal
        .9s
        cubic-bezier(.18,.72,.2,1)
        both;
}


@keyframes phiroSecretReveal {

    from {
        opacity: 0;

        transform:
            perspective(600px)
            rotateY(80deg)
            translateX(25px);

        filter:
            brightness(.5);
    }

    to {
        opacity: 1;

        transform:
            perspective(600px)
            rotateY(0)
            translateX(0);

        filter:
            brightness(1);
    }

}


.secret-symbol {
    text-shadow:
        0 0 8px rgba(105,214,191,.60),
        0 0 30px rgba(105,214,191,.28);
}


/* ==========================================================
   CHARACTER UPGRADE
========================================================== */

.player {
    transition:
        left
        .54s
        cubic-bezier(.2,.75,.25,1);
}


.player-head {
    border:
        1px solid
        rgba(47,28,23,.65);

    background:
        radial-gradient(
            circle at 35% 32%,
            #dab095 0 16%,
            #bb8d75 17% 75%,
            #8a5e51 76%
        );
}


.player-head::before {
    content: "";

    position: absolute;

    left: -8%;
    top: -10%;

    width: 116%;
    height: 47%;

    border-radius:
        65% 55% 30% 30%;

    background:
        #332522;
}


.player-head::after {
    content: "";

    position: absolute;

    right: 18%;
    top: 46%;

    width: 12%;
    height: 9%;

    border-radius: 50%;

    background:
        #1d1716;
}


.player-body {
    overflow: visible;

    border:
        1px solid
        rgba(13,27,25,.55);

    background:
        linear-gradient(
            90deg,
            #253e3a,
            #59827b 42%,
            #29433f
        );
}


.player-body::before,
.player-body::after {
    content: "";

    position: absolute;

    bottom: -30%;

    width: 27%;
    height: 39%;

    background:
        #20252b;
}


.player-body::before {
    left: 17%;
}


.player-body::after {
    right: 17%;
}


.player.facing-left {
    transform: scaleX(-1);
}


.player.facing-right {
    transform: scaleX(1);
}


.player.is-walking {
    animation:
        phiroWalkBob
        .18s ease-in-out
        3 alternate;
}


@keyframes phiroWalkBob {

    from {
        margin-bottom: 0;
    }

    to {
        margin-bottom: 5px;
    }

}


/* ==========================================================
   HOTSPOT FEEDBACK
========================================================== */

.hotspot {
    transition:
        background-color .14s ease,
        border-color .14s ease,
        box-shadow .14s ease;
}


.hotspot:hover,
.hotspot:focus-visible {
    border:
        1px solid
        rgba(238,190,98,.82);

    background:
        rgba(218,164,71,.09);

    box-shadow:
        inset 0 0 25px
        rgba(218,164,71,.08);

    outline: none;
}


/* ==========================================================
   CLICK RIPPLE
========================================================== */

.interaction-ripple {
    position: fixed;

    left: 0;
    top: 0;

    width: 40px;
    height: 40px;

    z-index: 9970;

    pointer-events: none;

    border:
        2px solid
        rgba(244,197,107,.85);

    border-radius: 50%;

    opacity: 0;

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


.interaction-ripple.show {
    animation:
        phiroRipple
        .5s ease-out;
}


@keyframes phiroRipple {

    from {
        opacity: .9;

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

    to {
        opacity: 0;

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

}


/* ==========================================================
   UI POLISH
========================================================== */

.game-header {
    text-shadow:
        0 2px 8px
        rgba(0,0,0,.65);
}


.command-console {
    filter:
        drop-shadow(
            0 14px 22px
            rgba(0,0,0,.28)
        );
}


.verb-bar,
.status-panel,
.inventory-panel {
    background:
        linear-gradient(
            180deg,
            rgba(23,20,29,.98),
            rgba(14,13,18,.98)
        );
}


.verb {
    transition:
        transform .12s ease,
        border-color .12s ease,
        background-color .12s ease;
}


.verb:hover {
    transform:
        translateY(-1px);
}


.inventory-item {
    transition:
        transform .12s ease,
        box-shadow .12s ease;
}


.inventory-item:hover {
    transform:
        translateY(-1px);

    box-shadow:
        0 4px 12px
        rgba(0,0,0,.32);
}


/* ==========================================================
   PHONE
========================================================== */

@media (max-width: 620px) {

    .verb {
        min-height: 48px;
    }

    .inventory-item {
        min-height: 46px;
    }

    .hover-label {
        min-height: 22px;
        font-size: .64rem;
    }

    .player {
        width: 5%;
        min-width: 15px;
    }

}


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

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

    .room-transition,
    .lightning-flash,
    .interaction-ripple,
    .player,
    .study-secret-panel,
    .east-door-art {

        animation: none !important;
        transition: none !important;
    }

}

/* ==========================================================
   PHIRO-004-STUDY-INTERACTION-GEOMETRY
   Real-pointer repair.
   Door / Fireplace zones must not overlap.
========================================================== */

.study-door-back {
    left: 1%;
    bottom: 21%;
    width: 10%;
    height: 44%;
}

.study-back-hotspot {
    left: 0%;
    bottom: 20%;
    width: 11%;
    height: 46%;
    z-index: 34;
}

.study-window {
    left: 14%;
    top: 18%;
    width: 13%;
    height: 33%;
}

.fireplace {
    left: 13%;
    bottom: 18%;
    width: 14%;
    height: 29%;
}

.fireplace-hotspot {
    left: 12%;
    bottom: 16%;
    width: 16%;
    height: 33%;
    z-index: 30;
}

.globe {
    left: 29%;
    top: 29%;
    width: 8%;
    height: 26%;
}

.globe-hotspot {
    left: 28%;
    top: 27%;
    width: 10%;
    height: 30%;
}

.study-desk {
    left: 37%;
    bottom: 22%;
    width: 21%;
    height: 24%;
}

.study-desk-hotspot {
    left: 36%;
    bottom: 19%;
    width: 22%;
    height: 29%;
}