/* ==========================================
   FEATURE: HOUSING / FAMILY
========================================== */

[data-housing-effect]{
    cursor:pointer;
}

[data-housing-effect]:focus-visible{
    outline:2px solid var(--color-primary);
    outline-offset:5px;
}

.housing-screen-effect{
    position:absolute;
    inset:0;
    display:grid;
    place-items:center;
    overflow:hidden;
}

/* House */

.house-appearance{
    background:radial-gradient(circle, rgba(255,106,0,.2), transparent 38%);
}

.house-model{
    position:relative;
    width:min(360px, 65vw);
    height:280px;
    filter:drop-shadow(0 35px 45px rgba(0,0,0,.7));
    animation:houseAppear 2.2s cubic-bezier(.16,.85,.25,1) forwards;
}

.house-model__roof{
    position:absolute;
    inset:0 0 auto;
    height:145px;
    background:linear-gradient(150deg, #242424, #090909);
    clip-path:polygon(50% 0, 100% 80%, 0 80%);
}

.house-model__body{
    position:absolute;
    left:12%;
    right:12%;
    bottom:0;
    height:170px;
    border:4px solid rgba(255,161,75,.65);
    border-radius:12px;
    background:linear-gradient(145deg, #bd4d08, #4c1904);
    box-shadow:inset 0 0 35px rgba(0,0,0,.45), 0 0 50px rgba(255,106,0,.3);
}

.house-model__body i{
    position:absolute;
    top:35px;
    width:58px;
    height:48px;
    border:6px solid #1a1a1a;
    background:#ffd28a;
    box-shadow:0 0 22px rgba(255,203,118,.8);
}

.house-model__body i:first-child{ left:28px; }
.house-model__body i:nth-child(2){ right:28px; }

.house-model__body b{
    position:absolute;
    left:50%;
    bottom:0;
    width:62px;
    height:92px;
    border-radius:12px 12px 0 0;
    background:#111;
    transform:translateX(-50%);
}

@keyframes houseAppear{
    0%{ opacity:0; transform:translateY(180px) scale(.35); }
    35%{ opacity:1; transform:translateY(-20px) scale(1.08); }
    70%{ opacity:1; transform:translateY(0) scale(1); }
    100%{ opacity:0; transform:translateY(-35px) scale(.96); }
}

/* Apartment keys */

.key-flight span{
    position:absolute;
    left:-90px;
    top:var(--start-y);
    font-size:clamp(2.3rem, 5vw, 4rem);
    filter:drop-shadow(0 12px 18px rgba(0,0,0,.55));
    opacity:0;
    animation:keyFly 2s var(--delay) cubic-bezier(.2,.7,.3,1) forwards;
}

@keyframes keyFly{
    0%{ opacity:0; transform:translate3d(0,0,0) rotate(-45deg) scale(.5); }
    15%, 75%{ opacity:1; }
    100%{ opacity:0; transform:translate3d(calc(100vw + 160px),var(--curve),0) rotate(700deg) scale(1.1); }
}

/* Family */

.family-scene{
    background:radial-gradient(circle, rgba(255,106,0,.18), transparent 42%);
}

.family-scene__group{
    display:flex;
    align-items:flex-end;
    justify-content:center;
    gap:clamp(2px, 2vw, 18px);
    animation:familyArrive 2.2s ease forwards;
}

.family-scene__group span{
    font-size:clamp(4.5rem, 11vw, 8rem);
    filter:drop-shadow(0 25px 25px rgba(0,0,0,.65));
}

.family-scene > i{
    position:absolute;
    left:50%;
    top:50%;
    font-style:normal;
    font-size:clamp(2.2rem, 5vw, 3.6rem);
    opacity:0;
    animation:familyProp 1.8s var(--delay) ease-out forwards;
}

@keyframes familyArrive{
    0%{ opacity:0; transform:translateY(120px) scale(.65); }
    30%, 75%{ opacity:1; transform:translateY(0) scale(1); }
    100%{ opacity:0; transform:translateY(-25px) scale(.96); }
}

@keyframes familyProp{
    0%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--angle)) translateX(30px) scale(.4); }
    25%, 70%{ opacity:1; }
    100%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--angle)) translateX(min(35vw, 350px)) rotate(420deg) scale(1); }
}

/* Bunker */

.bunker-scene{
    background:radial-gradient(circle, rgba(110,120,95,.22), rgba(0,0,0,.15) 38%, transparent 62%);
}

.bunker-door{
    position:relative;
    width:min(330px, 68vw);
    height:min(330px, 68vw);
    border:22px solid #292c27;
    border-radius:50%;
    background:repeating-conic-gradient(#343832 0 12deg, #242721 12deg 24deg);
    box-shadow:0 30px 65px rgba(0,0,0,.75), inset 0 0 0 18px #111, inset 0 0 55px #000;
    animation:bunkerReveal 2.2s ease forwards;
}

.bunker-door span{
    position:absolute;
    inset:50% auto auto 50%;
    width:45%;
    height:18px;
    border-radius:10px;
    background:#0c0c0c;
    transform:translate(-50%,-50%) rotate(35deg);
    box-shadow:0 0 0 8px #53584f;
}

.bunker-door b{
    position:absolute;
    left:50%;
    top:50%;
    width:60px;
    height:60px;
    border:12px solid #555b51;
    border-radius:50%;
    transform:translate(-50%,-50%);
}

.bunker-scene > i{
    position:absolute;
    left:50%;
    top:50%;
    font-style:normal;
    font-size:3.3rem;
    opacity:0;
    animation:bunkerGear 1.35s var(--delay) cubic-bezier(.15,.8,.3,1) forwards;
}

@keyframes bunkerReveal{
    0%{ opacity:0; transform:scale(.25) rotate(-100deg); }
    32%, 76%{ opacity:1; transform:scale(1) rotate(0); }
    100%{ opacity:0; transform:scale(.9) rotate(12deg); }
}

@keyframes bunkerGear{
    0%{ opacity:0; transform:translate(-50%,-50%) scale(.3); }
    30%, 72%{ opacity:1; }
    100%{ opacity:0; transform:translate(calc(-50% + var(--gear-x)),-240px) rotate(360deg) scale(1.1); }
}

@media (prefers-reduced-motion: reduce){
    .house-model,
    .key-flight span,
    .family-scene__group,
    .family-scene > i,
    .bunker-door,
    .bunker-scene > i{
        animation-duration:.01ms;
        animation-iteration-count:1;
    }
}