/* Cool English — celebrate.css */
.cool-celebrate-overlay { font-family: inherit; }

.cool-celebrate-stamp {
    position: absolute; left: 50%; top: 40%;
    transform: translate(-50%, -50%) scale(0.5);
    font-size: 64px; font-weight: 900;
    letter-spacing: -1px;
    text-shadow: 0 4px 20px rgba(0,0,0,0.15);
    animation: coolStamp .6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes coolStamp {
    0% { transform: translate(-50%,-50%) scale(0.3) rotate(-10deg); opacity: 0; }
    60% { transform: translate(-50%,-50%) scale(1.15) rotate(3deg); opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(1) rotate(0deg); opacity: 1; }
}

/* 1) Confetti */
.cool-conf-piece { border-radius: 2px; }
@keyframes coolConfFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(105vh) rotate(720deg); opacity: 0.3; }
}

/* 2) Star */
.cool-star-wrap {
    position: absolute; left: 50%; top: 50%;
    width: 300px; height: 300px;
    transform: translate(-50%, -50%);
}
.cool-star {
    position: absolute; left: 50%; top: 50%;
    transform: translate(-50%, -50%) scale(0);
    animation: coolStarPop .55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    filter: drop-shadow(0 6px 12px rgba(245,158,11,.4));
}
@keyframes coolStarPop {
    0% { transform: translate(-50%,-50%) scale(0) rotate(-180deg); }
    100% { transform: translate(-50%,-50%) scale(1) rotate(0deg); }
}
.cool-star-ray {
    position: absolute; left: 50%; top: 50%;
    width: 6px; height: 40px;
    transform-origin: center 90px;
    opacity: 0;
    animation: coolRayFly 1.1s ease-out .3s forwards;
    border-radius: 3px;
}
@keyframes coolRayFly {
    0% { opacity: 0; transform-origin: center 90px; }
    50% { opacity: 1; }
    100% { opacity: 0; }
}

/* 3) Trophy */
.cool-trophy-wrap {
    position: absolute; left: 50%; top: 55%;
    transform: translate(-50%, 50vh);
    text-align: center;
    animation: coolTrophyRise .7s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes coolTrophyRise {
    0% { transform: translate(-50%, 50vh); }
    100% { transform: translate(-50%, -50%); }
}
.cool-trophy-badge {
    display: inline-block; padding: 8px 20px;
    background: #1f3a5f; color: #fff;
    border-radius: 20px; font-size: 18px; font-weight: 700;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
.cool-trophy-svg {
    filter: drop-shadow(0 8px 16px rgba(180,83,9,.4));
    animation: coolTrophyWobble 1.4s ease-in-out .7s infinite;
}
@keyframes coolTrophyWobble {
    0%,100% { transform: rotate(-3deg); }
    50%     { transform: rotate(3deg); }
}

/* 4) Firework */
.cool-fw-burst {
    position: absolute;
    width: 4px; height: 4px;
    transform: translate(-50%, -50%);
}
.cool-fw-spark {
    position: absolute; left: 0; top: 0;
    width: 6px; height: 6px; border-radius: 50%;
    animation: coolFwSpark .9s ease-out forwards;
}
@keyframes coolFwSpark {
    0%   { transform: translate(0, 0) scale(1); opacity: 1; }
    100% { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; }
}

/* 5) Ribbon */
.cool-ribbon {
    position: absolute; top: -20px;
    width: 40vw; height: 20px;
    opacity: 0;
    animation: coolRibbon 1.4s ease-in forwards;
}
.cool-ribbon-left {
    left: -10vw;
    transform-origin: right center;
}
.cool-ribbon-right {
    right: -10vw;
    transform-origin: left center;
}
@keyframes coolRibbon {
    0% { opacity: 0; top: -20px; }
    30% { opacity: 1; top: 40vh; }
    100% { opacity: 0; top: 100vh; }
}
.cool-ribbon-fleck {
    position: absolute; top: -20px;
    width: 8px; height: 14px;
    animation-name: coolFleckFall;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    border-radius: 2px;
}
@keyframes coolFleckFall {
    0% { top: -20px; transform: rotate(0); opacity: 1; }
    100% { top: 105vh; transform: rotate(720deg); opacity: 0.4; }
}

@media (prefers-reduced-motion: reduce) {
    .cool-conf-piece, .cool-star, .cool-star-ray, .cool-trophy-wrap,
    .cool-fw-spark, .cool-ribbon, .cool-ribbon-fleck, .cool-celebrate-stamp {
        animation-duration: 0.01s !important;
        animation-iteration-count: 1 !important;
    }
}