/* =========================================
   CONSTRUCTION INTRO
   Two hammer hits -> cracks -> wall fragments fall down.
   The intro is intentionally self-contained and does not
   wait for videos, fonts or the rest of the page.
========================================= */

html.construction-intro-pending,
html.construction-intro-playing {
    overflow:hidden;
}

html.construction-intro-pending body,
html.construction-intro-playing body {
    overflow:hidden;
}

html.construction-intro-seen .construction-intro {
    display:none !important;
}

.construction-intro {
    position:fixed;
    inset:0;
    z-index:50000;
    overflow:hidden;
    background:#080808;
    pointer-events:auto;
    user-select:none;
    -webkit-user-select:none;
    touch-action:none;
    transition:background-color .08s linear;
}

.construction-intro__wall,
.construction-intro__shard,
.construction-intro__cracks {
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
}

.construction-intro__wall {
    z-index:1;
}

.construction-intro__shard {
    display:block;
    background:
        radial-gradient(
            circle at 54% 42%,
            rgba(211,171,94,.08),
            transparent 18%
        ),
        linear-gradient(
            145deg,
            #10100f 0%,
            #080808 48%,
            #040404 100%
        );
    box-shadow:
        inset 0 0 100px rgba(255,255,255,.018),
        inset 0 0 0 1px rgba(255,255,255,.018);
    will-change:transform;
}

.construction-intro__shard--1 {
    clip-path:polygon(0 0,50% 0,54% 42%,0 28%);
    --intro-drift:-8vw;
    --intro-rotate:-7deg;
    --intro-delay:0ms;
    --intro-duration:930ms;
}

.construction-intro__shard--2 {
    clip-path:polygon(50% 0,100% 0,100% 30%,54% 42%);
    --intro-drift:7vw;
    --intro-rotate:8deg;
    --intro-delay:45ms;
    --intro-duration:1020ms;
}

.construction-intro__shard--3 {
    clip-path:polygon(100% 30%,100% 72%,54% 42%);
    --intro-drift:11vw;
    --intro-rotate:11deg;
    --intro-delay:90ms;
    --intro-duration:900ms;
}

.construction-intro__shard--4 {
    clip-path:polygon(100% 72%,100% 100%,52% 100%,54% 42%);
    --intro-drift:6vw;
    --intro-rotate:5deg;
    --intro-delay:20ms;
    --intro-duration:830ms;
}

.construction-intro__shard--5 {
    clip-path:polygon(52% 100%,0 100%,0 72%,54% 42%);
    --intro-drift:-5vw;
    --intro-rotate:-5deg;
    --intro-delay:70ms;
    --intro-duration:880ms;
}

.construction-intro__shard--6 {
    clip-path:polygon(0 72%,0 28%,54% 42%);
    --intro-drift:-10vw;
    --intro-rotate:-10deg;
    --intro-delay:115ms;
    --intro-duration:970ms;
}

.construction-intro__cracks {
    z-index:3;
    overflow:visible;
    pointer-events:none;
    filter:
        drop-shadow(0 0 4px rgba(255,255,255,.3))
        drop-shadow(0 0 10px rgba(205,164,88,.16));
}

.construction-intro__crack path {
    fill:none;
    stroke:#d8d4ca;
    stroke-width:2.2;
    stroke-linecap:round;
    stroke-linejoin:round;
    vector-effect:non-scaling-stroke;
    stroke-dasharray:650;
    stroke-dashoffset:650;
    opacity:0;
}

.construction-intro.has-crack-one
.construction-intro__crack--one path {
    animation:intro-crack-draw 180ms ease-out forwards;
}

.construction-intro.has-crack-two
.construction-intro__crack--two path {
    animation:intro-crack-draw 230ms ease-out forwards;
}

.construction-intro__impact {
    position:absolute;
    left:54%;
    top:42%;
    z-index:4;
    width:14px;
    height:14px;
    border:1px solid rgba(222,183,104,.85);
    border-radius:50%;
    opacity:0;
    transform:translate(-50%,-50%) scale(.2);
    box-shadow:
        0 0 18px rgba(222,183,104,.45),
        0 0 46px rgba(255,255,255,.13);
    pointer-events:none;
}

.construction-intro__impact.is-pulsing {
    animation:intro-impact 260ms ease-out;
}

.construction-intro__hammer {
    position:absolute;
    left:54%;
    top:42%;
    z-index:5;
    width:clamp(98px,11vw,165px);
    height:auto;
    overflow:visible;
    opacity:0;
    transform:
        translate(-50%,-50%)
        translate(115px,-190px)
        rotate(39deg);
    transform-origin:50% 88%;
    filter:
        drop-shadow(0 18px 22px rgba(0,0,0,.72))
        drop-shadow(0 0 1px rgba(255,255,255,.22));
    will-change:transform,opacity;
    pointer-events:none;
}

.construction-intro.is-breaking {
    background-color:transparent;
    pointer-events:none;
}

.construction-intro.is-breaking
.construction-intro__shard {
    animation:
        intro-shard-fall
        var(--intro-duration)
        cubic-bezier(.38,.08,.78,.52)
        var(--intro-delay)
        forwards;
}

.construction-intro.is-breaking
.construction-intro__cracks {
    animation:intro-cracks-fall 720ms ease-in forwards;
}

@keyframes intro-crack-draw {
    0% {
        stroke-dashoffset:650;
        opacity:0;
    }
    8% {
        opacity:1;
    }
    100% {
        stroke-dashoffset:0;
        opacity:.95;
    }
}

@keyframes intro-impact {
    0% {
        opacity:0;
        transform:translate(-50%,-50%) scale(.15);
    }
    25% {
        opacity:1;
    }
    100% {
        opacity:0;
        transform:translate(-50%,-50%) scale(8);
    }
}

@keyframes intro-shard-fall {
    0% {
        transform:translate3d(0,0,0) rotate(0);
    }
    18% {
        transform:
            translate3d(
                calc(var(--intro-drift) * .18),
                3vh,
                0
            )
            rotate(calc(var(--intro-rotate) * .18));
    }
    100% {
        transform:
            translate3d(
                var(--intro-drift),
                122vh,
                0
            )
            rotate(var(--intro-rotate));
    }
}

@keyframes intro-cracks-fall {
    to {
        opacity:0;
        transform:translateY(14vh);
    }
}

@media(max-width:640px) {
    .construction-intro__hammer {
        width:112px;
    }

    .construction-intro__crack path {
        stroke-width:1.7;
    }

    .construction-intro__shard--1 {
        --intro-drift:-11vw;
    }

    .construction-intro__shard--2,
    .construction-intro__shard--3 {
        --intro-drift:10vw;
    }
}

@media(prefers-reduced-motion:reduce) {
    .construction-intro {
        display:none !important;
    }
}