/*
REVAMED MANSION — THE DUCK INCIDENT
Original family Easter egg. Scoped to #duck-incident-root.
*/

#duck-incident-root {
    position: absolute;
    inset: 0;
    z-index: 108;
    pointer-events: none;
    overflow: hidden;
}

#duck-incident-root .duck-incident-trigger {
    position: absolute;
    left: 54%;
    bottom: 14%;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(225, 181, 77, .78);
    border-radius: 999px;
    background: rgba(10, 9, 15, .82);
    color: #f5d65e;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
    pointer-events: auto;
    z-index: 8;
    display: grid;
    place-items: center;
    box-shadow: 0 0 0 3px rgba(5, 5, 8, .4);
}

#duck-incident-root .duck-incident-trigger:focus-visible,
#duck-incident-root .duck-incident-actions button:focus-visible {
    outline: 3px solid #f4d37a;
    outline-offset: 3px;
}

#duck-incident-root .duck-incident-trigger:disabled {
    cursor: default;
    opacity: .52;
}

#duck-incident-root .duck-incident-trigger.has-been-seen::after {
    content: "↻";
    position: absolute;
    right: -3px;
    top: -5px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: #17141e;
    color: #f0d47d;
    font-size: .72rem;
    border: 1px solid rgba(240, 212, 125, .55);
}

#duck-incident-root .duck-incident-stage {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

#duck-incident-root .duck-incident-stage[aria-hidden="true"] {
    visibility: hidden;
}

#duck-incident-root .duck-incident-caption {
    position: absolute;
    left: 50%;
    top: 7%;
    translate: -50% 0;
    width: min(82%, 600px);
    min-height: 42px;
    padding: 9px 14px;
    border: 1px solid rgba(230, 191, 102, .78);
    border-radius: 10px;
    background: rgba(8, 8, 13, .9);
    color: #f7efe1;
    font-family: Georgia, "Times New Roman", serif;
    font-size: clamp(.82rem, 2.1vw, 1.08rem);
    font-weight: 700;
    line-height: 1.28;
    text-align: center;
    letter-spacing: .015em;
    z-index: 9;
}

#duck-incident-root .velvet-actor {
    position: absolute;
    left: 72%;
    bottom: 9%;
    width: clamp(92px, 15%, 164px);
    transform-origin: 50% 90%;
    opacity: 0;
    z-index: 5;
    will-change: transform, left, bottom, opacity;
}

#duck-incident-root .velvet-actor svg {
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
}

#duck-incident-root .velvet-hair {
    fill: #32113e;
    stroke: #120817;
    stroke-width: 5;
}

#duck-incident-root .velvet-face,
#duck-incident-root .velvet-neck {
    fill: #a51e68;
    stroke: #4f1038;
    stroke-width: 4;
}

#duck-incident-root .velvet-dress {
    fill: #842d70;
    stroke: #3f1639;
    stroke-width: 5;
}

#duck-incident-root .velvet-eyes ellipse {
    fill: #f0dc86;
    stroke: #4e381b;
    stroke-width: 3;
}

#duck-incident-root .velvet-eyes circle {
    fill: #24140e;
}

#duck-incident-root .velvet-brow {
    fill: none;
    stroke: #1c0a16;
    stroke-width: 9;
    stroke-linecap: round;
}

#duck-incident-root .velvet-mouth {
    fill: #5e142e;
    stroke: #3b0b22;
    stroke-width: 4;
}

#duck-incident-root .velvet-tooth {
    fill: none;
    stroke: #f4e8c6;
    stroke-width: 6;
    stroke-linejoin: round;
}

#duck-incident-root .velvet-hair-fringe {
    fill: #2b0b35;
}

#duck-incident-root .velvet-arm path:first-child,
#duck-incident-root .velvet-arm path:last-child {
    fill: #a51e68;
    stroke: #4f1038;
    stroke-width: 4;
}

#duck-incident-root .velvet-leg {
    fill: none;
    stroke: #7b1d59;
    stroke-width: 15;
    stroke-linecap: round;
}

#duck-incident-root .velvet-arm,
#duck-incident-root .velvet-leg {
    transform-box: fill-box;
    transform-origin: center top;
}

#duck-incident-root .duck-prop {
    position: absolute;
    left: 53%;
    bottom: 13%;
    font-size: clamp(1.8rem, 5vw, 3rem);
    transform-origin: 50% 90%;
    opacity: 0;
    z-index: 6;
}

#duck-incident-root .duck-incident-actions {
    position: absolute;
    right: 3%;
    bottom: 3%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
    z-index: 10;
    pointer-events: auto;
}

#duck-incident-root .duck-incident-actions button {
    min-height: 44px;
    padding: 8px 12px;
    border: 1px solid rgba(223, 169, 71, .66);
    border-radius: 8px;
    background: rgba(9, 8, 13, .92);
    color: #f1eadf;
    font: inherit;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}

#duck-incident-root[data-phase="entrance"] .velvet-actor,
#duck-incident-root[data-phase="strut"] .velvet-actor,
#duck-incident-root[data-phase="duck"] .velvet-actor,
#duck-incident-root[data-phase="slip"] .velvet-actor,
#duck-incident-root[data-phase="tumble"] .velvet-actor,
#duck-incident-root[data-phase="crash"] .velvet-actor,
#duck-incident-root[data-phase="duck-roll"] .velvet-actor,
#duck-incident-root[data-phase="reduced"] .velvet-actor {
    opacity: 1;
}

#duck-incident-root[data-phase="entrance"] .velvet-actor {
    transform: translateX(26%) scale(.96);
}

#duck-incident-root[data-phase="strut"] .velvet-actor {
    animation: duck-incident-strut 1.55s cubic-bezier(.2,.75,.23,1) forwards;
}

#duck-incident-root[data-phase="strut"] .velvet-arm-left {
    animation: duck-arm-left .34s ease-in-out infinite alternate;
}

#duck-incident-root[data-phase="strut"] .velvet-arm-right {
    animation: duck-arm-right .34s ease-in-out infinite alternate;
}

#duck-incident-root[data-phase="duck"] .velvet-actor {
    left: 55%;
    transform: rotate(-3deg) translateY(0);
}

#duck-incident-root[data-phase="duck"] .duck-prop,
#duck-incident-root[data-phase="slip"] .duck-prop,
#duck-incident-root[data-phase="tumble"] .duck-prop,
#duck-incident-root[data-phase="crash"] .duck-prop,
#duck-incident-root[data-phase="duck-roll"] .duck-prop {
    opacity: 1;
}

#duck-incident-root[data-phase="duck"] .duck-prop {
    animation: duck-squeak-squash .3s ease-out 1;
}

#duck-incident-root[data-phase="slip"] .velvet-actor {
    left: 55%;
    animation: duck-incident-slip .42s cubic-bezier(.33,.02,.75,1.5) forwards;
}

#duck-incident-root[data-phase="slip"] .velvet-arm-left,
#duck-incident-root[data-phase="slip"] .velvet-arm-right {
    animation: duck-arm-panic .12s ease-in-out infinite alternate;
}

#duck-incident-root[data-phase="tumble"] .velvet-actor {
    animation: duck-incident-tumble 1.34s steps(5, end) forwards;
}

#duck-incident-root[data-phase="crash"] .velvet-actor,
#duck-incident-root[data-phase="duck-roll"] .velvet-actor {
    left: 28%;
    bottom: 2%;
    transform: rotate(-78deg) scale(.88);
}

#duck-incident-root[data-phase="crash"] .velvet-shadow,
#duck-incident-root[data-phase="duck-roll"] .velvet-shadow {
    opacity: .85;
}

#duck-incident-root[data-phase="crash"] {
    animation: duck-scene-impact .28s linear 1;
}

#duck-incident-root[data-phase="duck-roll"] .duck-prop {
    animation: duck-roll .62s ease-out forwards;
}

#duck-incident-root[data-phase="reduced"] .velvet-actor {
    left: 47%;
    bottom: 4%;
    transform: rotate(-13deg) scale(.92);
}

#duck-incident-root[data-phase="reduced"] .duck-prop {
    opacity: 1;
}

@keyframes duck-incident-strut {
    0% { left: 76%; transform: translateY(0) rotate(1deg); }
    18% { transform: translateY(-8px) rotate(-2deg); }
    36% { transform: translateY(0) rotate(2deg); }
    54% { transform: translateY(-8px) rotate(-2deg); }
    72% { transform: translateY(0) rotate(2deg); }
    100% { left: 55%; transform: translateY(0) rotate(-2deg); }
}

@keyframes duck-arm-left {
    from { transform: rotate(10deg); }
    to { transform: rotate(-9deg); }
}

@keyframes duck-arm-right {
    from { transform: rotate(-10deg); }
    to { transform: rotate(9deg); }
}

@keyframes duck-arm-panic {
    from { transform: rotate(-38deg); }
    to { transform: rotate(42deg); }
}

@keyframes duck-incident-slip {
    0% { transform: rotate(-2deg) translate(0,0); }
    35% { transform: rotate(14deg) translate(-4px,-5px); }
    100% { transform: rotate(-28deg) translate(-25px,14px); }
}

@keyframes duck-incident-tumble {
    0% { left: 55%; bottom: 9%; transform: rotate(-28deg) scale(1); }
    20% { left: 49%; bottom: 7%; transform: rotate(-103deg) scale(.98); }
    40% { left: 44%; bottom: 5%; transform: rotate(-178deg) scale(.96); }
    60% { left: 39%; bottom: 3%; transform: rotate(-254deg) scale(.94); }
    80% { left: 33%; bottom: 2%; transform: rotate(-325deg) scale(.9); }
    100% { left: 28%; bottom: 2%; transform: rotate(-438deg) scale(.88); }
}

@keyframes duck-squeak-squash {
    0% { transform: scale(1); }
    42% { transform: scale(1.25,.68) rotate(-7deg); }
    100% { transform: scale(1) rotate(0); }
}

@keyframes duck-roll {
    from { left: 53%; transform: rotate(0deg); }
    to { left: 38%; transform: rotate(-55deg); }
}

@keyframes duck-scene-impact {
    0%,100% { transform: translate(0,0); }
    25% { transform: translate(-3px,2px); }
    50% { transform: translate(3px,-2px); }
    75% { transform: translate(-2px,1px); }
}

@media (max-width: 720px), (pointer: coarse) {
    #duck-incident-root .duck-incident-trigger {
        left: 56%;
        bottom: 12%;
    }

    #duck-incident-root .duck-incident-caption {
        top: 4%;
        width: 88%;
        font-size: .82rem;
    }

    #duck-incident-root .velvet-actor {
        width: clamp(76px, 22%, 112px);
    }

    #duck-incident-root .duck-prop {
        left: 55%;
        bottom: 11%;
    }

    #duck-incident-root .duck-incident-actions {
        left: 3%;
        right: 3%;
        bottom: 2%;
        justify-content: center;
    }

    #duck-incident-root .duck-incident-actions button {
        flex: 1 1 130px;
        max-width: 190px;
    }
}

@media (prefers-reduced-motion: reduce) {
    #duck-incident-root *,
    #duck-incident-root *::before,
    #duck-incident-root *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}