/* The celebration when a course is done (course/parts/celebrate.php, Figma 01.15).
 *
 * The dialog is the whole window, transparent: the scrim is its backdrop, the confetti falls in a
 * layer inside it, and the card sits over that -- so the confetti is above the dimmed page and below
 * the card, as the design layers them. The page does not move underneath.
 */

.cil-course-celebrate {
    position: fixed;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    margin: 0;
    padding: 16px;
    border: 0;
    background: transparent;
    overflow: hidden;
}
.cil-course-celebrate[open] { display: grid; place-items: center; }
.cil-course-celebrate::backdrop { background: color-mix(in srgb, var(--cil-black-dark-4) 72%, transparent); }

.cil-course-celebrate__rain { position: absolute; inset: 0; pointer-events: none; }

.cil-course-celebrate__card {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: min(480px, 100%);
    padding: 40px 44px 32px;
    overflow: hidden;   /* hides the close button until it drops in */
    border-radius: 16px;
    background: var(--cil-white);
    text-align: center;
}
.cil-course-celebrate__card:focus { outline: none; }
/* The contact form's success wash: a soft green glow from the top of the card. */
.cil-course-celebrate__card::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 180px;
    background: radial-gradient(ellipse 70% 100% at 50% 0%, var(--cil-green-light-3), transparent 75%);
    pointer-events: none;
}
.cil-course-celebrate__card > * { position: relative; }
.cil-course .cil-course-celebrate__close { position: absolute; }
.cil-course .cil-course-celebrate__close {
    position: absolute;
    top: 12px;
    inset-inline-end: 12px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--cil-white);
}
.cil-course .cil-course-celebrate__close:hover { background: var(--cil-black-light-1); }
.cil-course .cil-course-celebrate__title { margin: 0; font-size: 32px; font-weight: 700; line-height: 1.2; color: var(--cil-black-dark-4); }
.cil-course .cil-course-celebrate__sub { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.2; color: var(--cil-black-dark-4); }
.cil-course .cil-course-celebrate__text { margin: 0; max-width: 392px; font-size: 16px; line-height: 1.2; color: var(--cil-black-regular-7); }
.cil-course .cil-course-celebrate__go { width: 200px; min-width: 0; height: 44px; min-height: 0; margin-top: 10px; padding: 0 16px; text-decoration: none; }

/* The burst above the title: nine pieces where the design puts them. */
.cil-course-celebrate__burst { position: relative; flex: none; width: 160px; height: 52px; }
.cil-course-confetti { position: absolute; display: block; }
.cil-course-celebrate__burst .cil-course-confetti { left: var(--x); top: var(--y); transform: rotate(var(--turn)); }
.cil-course-confetti.is-bar { width: 10px; height: 16px; border-radius: 3px; }
.cil-course-confetti.is-dot { width: 9px; height: 9px; border-radius: 50%; }
.cil-course-confetti.is-blue   { background: var(--cil-blue); }
.cil-course-confetti.is-red    { background: var(--cil-red); }
.cil-course-confetti.is-yellow { background: var(--cil-yellow); }
.cil-course-confetti.is-green  { background: var(--cil-green); }
.cil-course-confetti.is-grey   { background: var(--cil-black-regular-3); }

/* The contact form's success confetti (contact-page/front/assets/sent-modal.css, .cf-modal__dot), launched from the
   middle of the burst: its colours, its sizes, its uneven ring of launch vectors -- the ones
   that fell downward turned sideways, since here the title sits right under the burst. */
/* Their own box, so counting them does not count the pieces beside them. */
.cil-course-celebrate__dots { position: absolute; inset: 0; pointer-events: none; }
.cil-course-celebrate__dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    opacity: 0;
    pointer-events: none;
}
.cil-course-celebrate__dot:nth-of-type(8n+2) { background: var(--cil-yellow); }
.cil-course-celebrate__dot:nth-of-type(8n+3) { background: var(--cil-green); }
.cil-course-celebrate__dot:nth-of-type(8n+4) { background: var(--cil-blue); }
.cil-course-celebrate__dot:nth-of-type(8n+5) { background: var(--cil-red); width: 7px; height: 7px; }
.cil-course-celebrate__dot:nth-of-type(8n+6) { background: var(--cil-green-light-2); width: 7px; height: 7px; }
.cil-course-celebrate__dot:nth-of-type(8n+7) { background: var(--cil-blue-light-2); }
.cil-course-celebrate__dot:nth-of-type(8n+8) { background: var(--cil-yellow-dark-1); width: 7px; height: 7px; }
.cil-course-celebrate__dot:nth-of-type(8n+1) { background: var(--cil-red-light-2); }
.cil-course-celebrate__dot:nth-of-type(1)  { --dx: -67px; --dy: -39px; }
.cil-course-celebrate__dot:nth-of-type(2)  { --dx:  69px; --dy: -30px; }
.cil-course-celebrate__dot:nth-of-type(3)  { --dx: -84px; --dy:  20px; }
.cil-course-celebrate__dot:nth-of-type(4)  { --dx:  80px; --dy:  24px; }
.cil-course-celebrate__dot:nth-of-type(5)  { --dx: -23px; --dy: -64px; }
.cil-course-celebrate__dot:nth-of-type(6)  { --dx:  28px; --dy: -69px; }
.cil-course-celebrate__dot:nth-of-type(7)  { --dx: -94px; --dy:  -2px; }
.cil-course-celebrate__dot:nth-of-type(8)  { --dx:  96px; --dy:   7px; }
.cil-course-celebrate__dot:nth-of-type(9)  { --dx: -41px; --dy: -74px; }
.cil-course-celebrate__dot:nth-of-type(10) { --dx: 118px; --dy: -20px; }

/* The falling confetti, placed and timed piece by piece by celebrate.js. */
.cil-course-celebrate__rain .cil-course-confetti { top: -24px; left: var(--x); opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
    .cil-course-celebrate[open]::backdrop { animation: cil-course-celebrate-fade 0.35s ease-out both; }
    .cil-course-celebrate[open] .cil-course-celebrate__card { animation: cil-course-celebrate-pop 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
    /* The close button drops in from above the card's edge, as the site's other in-card closes do. */
    .cil-course-celebrate[open] .cil-course-celebrate__close { animation: cil-course-celebrate-drop 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; }
    .cil-course-celebrate[open] .cil-course-celebrate__card::before { animation: cil-course-celebrate-fade 0.5s ease 0.2s both; }
    /* The design's pieces are thrown from the middle to where they rest, and the contact form's
       circles fly past them and fade -- on its curve and its two alternating beats. */
    .cil-course-celebrate[open] .cil-course-celebrate__burst .cil-course-confetti {
        animation: cil-course-celebrate-burst 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
    }
    .cil-course-celebrate[open] .cil-course-celebrate__burst .cil-course-confetti:nth-child(even) { animation-delay: 0.4s; }
    .cil-course-celebrate[open] .cil-course-celebrate__dot {
        animation: cil-course-celebrate-dot 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
    }
    .cil-course-celebrate[open] .cil-course-celebrate__dot:nth-of-type(even) { animation-delay: 0.4s; }
    .cil-course-celebrate__rain .cil-course-confetti {
        animation: cil-course-celebrate-fall var(--fall) cubic-bezier(0.3, 0.1, 0.6, 1) var(--delay) forwards;
    }
}
@media (prefers-reduced-motion: reduce) {
    .cil-course-celebrate__rain { display: none; }
}

@keyframes cil-course-celebrate-fade { from { opacity: 0; } }
@keyframes cil-course-celebrate-pop  { from { opacity: 0; transform: translateY(16px) scale(0.94); } }
@keyframes cil-course-celebrate-drop { from { transform: translateY(-72px) rotate(-120deg); } }
@keyframes cil-course-celebrate-burst {
    from { opacity: 1; transform: translate(calc(80px - var(--x)), calc(26px - var(--y))) scale(0) rotate(var(--turn)); }
    to   { opacity: 1; transform: translate(0, 0) scale(1) rotate(var(--turn)); }
}
@keyframes cil-course-celebrate-dot {
    0%   { opacity: 1; transform: translate(0, 0) scale(0); }
    60%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1); }
}
@keyframes cil-course-celebrate-fall {
    0%   { opacity: 1; transform: translate(0, 0) rotate(0deg); }
    85%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--drift), 110vh) rotate(var(--spin)); }
}

@media (max-width: 767px) {
    .cil-course-celebrate__card { padding: 40px 20px 24px; }
    .cil-course .cil-course-celebrate__title { font-size: 28px; }
}