.tree-scene {
    position: relative;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    isolation: isolate;
}

.ornament {
    position: absolute;
    z-index: 1999;
    top: var(--y);
    left: var(--x);
    width: var(--size);
    min-width: 0;
    height: calc(var(--size) + var(--cord));
    padding: 0;
    border: 0;
    color: white;
    cursor: pointer;
    transform: translateX(-50%);
    background: transparent;
    outline: none;
}

.hanger {
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    flex-direction: column;
    transform-origin: 50% 0;
    animation: swing 5.8s var(--delay) ease-in-out infinite alternate;
    will-change: transform;
    animation-duration: 2.1s;
}

.cord {
    position: relative;
    z-index: 1;
    display: block;
    width: clamp(2px, 0.22vw, 4px);
    height: var(--cord);
    flex: 0 0 var(--cord);
    background: linear-gradient(90deg, #2b1d10, #c39a51 45%, #402714);
    box-shadow: 1px 0 3px rgb(8 12 4 / 58%);
}

.cord::before {
    content: "";
    position: absolute;
    top: -4px;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    transform: translateX(-50%);
    background: #2b1d0d;
    box-shadow: 0 0 0 2px #b38a43;
}

.bulb {
    position: relative;
    z-index: 2;
    display: block;
    width: var(--size);
    aspect-ratio: 1;
    margin-top: -7%;
    transition: transform 250ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.bulb::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 21% 17% 10%;
    border-radius: 50%;
    opacity: 0.62;
    filter: blur(18px);
    background: #ffc72f;
    animation: aura 2.8s var(--delay) ease-in-out infinite;
}

.bulb img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    filter:
        drop-shadow(0 0 2px #4f9a4f) drop-shadow(0 0 5px rgb(65 137 63 / 88%)) drop-shadow(0 0 4px #fff4b3) drop-shadow(0 0 13px rgb(255 196 47 / 85%)) drop-shadow(0 8px 10px rgb(17 23 8 / 45%));
    animation: glow 2.8s var(--delay) ease-in-out infinite;
}

/* .ornament:hover .hanger,
.ornament:focus-visible .hanger {
    animation-duration: 2.1s;
}

.ornament:hover .bulb,
.ornament:focus-visible .bulb {
    transform: scale(1.1);
}

.ornament:focus-visible .bulb {
    border-radius: 50%;
    outline: 4px solid rgb(255 246 183 / 90%);
    outline-offset: -16px;
}

.ornament.is-bursting .bulb {
    animation: pop 560ms cubic-bezier(0.2, 0.85, 0.25, 1);
} */



/* .ornament:hover .icon-label,
.ornament:focus-visible .icon-label {
    opacity: 1;
    transform: translate(-50%, 0);
} */

.story-card {
    position: absolute;
    z-index: 18;
    left: 50%;
    bottom: clamp(12px, 3vh, 28px);
    display: flex;
    align-items: center;
    gap: 16px;
    min-width: min(90vw, 510px);
    padding: 12px 22px;
    border: 2px solid rgb(92 63 30 / 42%);
    border-radius: 18px;
    color: #302414;
    transform: translateX(-50%);
    background: rgb(255 248 222 / 92%);
    box-shadow: 0 8px 26px rgb(10 24 8 / 34%);
    backdrop-filter: blur(8px);
}

.tree-mark {
    display: grid;
    width: 52px;
    aspect-ratio: 1;
    place-items: center;
    border: 2px solid #406638;
    border-radius: 50%;
    color: #315a32;
    font-size: 34px;
}

.story-card p {
    margin: 0;
    font-size: clamp(13px, 1.3vw, 18px);
    font-weight: 720;
    line-height: 1.35;
}

.firefly {
    position: absolute;
    z-index: 5;
    width: var(--dot);
    aspect-ratio: 1;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
    background: #fff7ad;
    box-shadow: 0 0 7px 2px #ffdd52, 0 0 18px 5px rgb(255 195 46 / 52%);
    animation: firefly var(--time) var(--delay) ease-in-out infinite;
}

.idea-message {
    position: absolute;
    z-index: 25;
    top: 50%;
    left: 50%;
    max-width: min(80vw, 420px);
    margin: 0;
    padding: 12px 18px;
    border: 1px solid rgb(255 225 133 / 70%);
    border-radius: 14px;
    color: #fff9d8;
    font-weight: 800;
    text-align: center;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -34%) scale(0.94);
    background: rgb(38 34 15 / 82%);
    box-shadow: 0 9px 30px rgb(8 16 6 / 38%), 0 0 26px rgb(255 196 55 / 20%);
    backdrop-filter: blur(10px);
    transition: opacity 220ms ease, transform 220ms ease;
}

.idea-message.is-visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.spark {
    position: absolute;
    z-index: 30;
    width: 7px;
    aspect-ratio: 1;
    border-radius: 50%;
    pointer-events: none;
    background: #fff9c9;
    box-shadow: 0 0 8px #ffd449;
    animation: sparkle-burst 900ms ease-out forwards;
}

@media (min-width: 992px) {
    .data-msg {
        bottom: 35%;
    }
}

@keyframes swing {
    from {
        transform: rotate(calc(0deg - var(--swing)));
    }

    to {
        transform: rotate(var(--swing));
    }
}

@keyframes glow {

    0%,
    100% {
        filter: drop-shadow(0 0 2px #4f9a4f) drop-shadow(0 0 5px rgb(65 137 63 / 78%)) drop-shadow(0 0 3px #fff3aa) drop-shadow(0 0 10px rgb(255 193 42 / 72%)) drop-shadow(0 8px 10px rgb(17 23 8 / 45%));
    }

    50% {
        filter: brightness(1.12) drop-shadow(0 0 3px #5cad57) drop-shadow(0 0 7px rgb(71 148 67 / 92%)) drop-shadow(0 0 6px #fff8ca) drop-shadow(0 0 21px rgb(255 205 73 / 100%)) drop-shadow(0 8px 10px rgb(17 23 8 / 42%));
    }
}

@keyframes aura {

    0%,
    100% {
        opacity: 0.38;
        transform: scale(0.9);
    }

    50% {
        opacity: 0.82;
        transform: scale(1.14);
    }
}

@keyframes pop {

    0%,
    100% {
        transform: scale(1);
    }

    34% {
        transform: scale(1.2) rotate(-3deg);
    }

    64% {
        transform: scale(0.96) rotate(2deg);
    }
}

@keyframes firefly {

    0%,
    100% {
        opacity: 0;
        transform: translate(0, 0) scale(0.4);
    }

    22% {
        opacity: 0.9;
    }

    55% {
        opacity: 0.5;
        transform: translate(var(--dx), var(--dy)) scale(1);
    }

    78% {
        opacity: 0.95;
    }
}

@keyframes sparkle-burst {
    0% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        opacity: 0;
        transform: translate(calc(-50% + var(--sx)), calc(-50% + var(--sy))) scale(0.1);
    }
}

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

    .hanger,
    .bulb img,
    .bulb::after,
    .firefly {
        animation-duration: 12s;
    }
}