/* The celebration a sent message opens (templates/sent-modal.php) -- the old contact form's confirmation
   modal (css/contact-modal.css, removed 2026-10-08), brought back as it was: the card rising in, the
   green wash, the ring and the check drawn in with a bounce, the halo, the brand-circle confetti; the
   close button is the popup's, inside the card. Success only: a
   message that did not go is told by the form itself, everything typed kept. */

.cf-modal { position: fixed; inset: 0; z-index: 100010; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cf-modal[hidden] { display: none; }
.cf-modal__backdrop { position: absolute; inset: 0; background: color-mix(in srgb, var(--cil-black) 55%, transparent); opacity: 0; transition: opacity .3s ease; }
.cf-modal.is-open .cf-modal__backdrop { opacity: 1; }
/* The card rises in on the project's decelerate curve. */
.cf-modal__box { position: relative; opacity: 0; transform: translateY(26px) scale(.96); transition: opacity .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1); }
.cf-modal.is-open .cf-modal__box { opacity: 1; transform: none; }
/* The card's rounded clip hides the close button until it has dropped in. */
.cf-modal__surface {
    position: relative; z-index: 1; box-sizing: border-box; min-width: 384px; max-width: min(480px, calc(100vw - 40px));
    padding: 46px 44px 40px; overflow: hidden; border-radius: 10px; background: var(--cil-white);
    box-shadow: 0 5px 20px color-mix(in srgb, var(--cil-black) 20%, transparent); text-align: center;
}
.cf-modal__surface::before {
    content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 180px; pointer-events: none; opacity: 0;
    background: radial-gradient(ellipse 70% 100% at 50% 0%, var(--cil-green-light-3), transparent 75%); transition: opacity .5s ease .2s;
}
.cf-modal.is-open .cf-modal__surface::before { opacity: 1; }
.cf-modal .cf-modal__title { position: relative; margin: 18px 0 0; color: var(--cil-black); font-size: 26px; font-weight: 700; line-height: 1.2; }
.cf-modal .cf-modal__text { position: relative; margin: 8px 0 0; color: var(--cil-black-regular-7); font-size: 16px; line-height: 1.3; }

/* ---- The mark: a ring and a check drawn in, a halo popping behind ---- */
.cf-modal__celebrate { position: relative; width: 80px; height: 80px; margin: 0 auto; }
.cf-modal__halo { position: absolute; inset: -18px; border-radius: 50%; background: var(--cil-green-light-4); transform: scale(.4); opacity: 0; }
.cf-modal.is-open .cf-modal__halo { animation: cf-modal-halo-pop .55s cubic-bezier(.22, 1, .36, 1) .15s forwards; }
@keyframes cf-modal-halo-pop { 0% { transform: scale(.4); opacity: 0; } 70% { transform: scale(1.08); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.cf-modal__mark { position: relative; display: block; width: 80px; height: 80px; }
.cf-modal.is-open .cf-modal__mark { animation: cf-modal-mark-bounce .5s cubic-bezier(.22, 1, .36, 1) .6s; }
@keyframes cf-modal-mark-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
.cf-modal__mark circle, .cf-modal__mark path { fill: none; stroke: var(--cil-green); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.cf-modal__mark circle { stroke-dasharray: 163.4; stroke-dashoffset: 163.4; }
.cf-modal__mark path { stroke-dasharray: 48; stroke-dashoffset: 48; }
.cf-modal.is-open .cf-modal__mark circle { animation: cf-modal-draw .6s cubic-bezier(.22, 1, .36, 1) .2s forwards; }
.cf-modal.is-open .cf-modal__mark path { animation: cf-modal-draw .45s cubic-bezier(.22, 1, .36, 1) .55s forwards; }
@keyframes cf-modal-draw { to { stroke-dashoffset: 0; } }

/* ---- Brand-circle confetti, launched from behind the mark as the check lands ---- */
.cf-modal__dot { position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; transform: scale(0); pointer-events: none; }
.cf-modal__dot:nth-of-type(8n+1) { background: var(--cil-red-light-2); }
.cf-modal__dot:nth-of-type(8n+2) { background: var(--cil-yellow); }
.cf-modal__dot:nth-of-type(8n+3) { background: var(--cil-green); }
.cf-modal__dot:nth-of-type(8n+4) { background: var(--cil-blue); }
.cf-modal__dot:nth-of-type(8n+5) { background: var(--cil-red); width: 7px; height: 7px; }
.cf-modal__dot:nth-of-type(8n+6) { background: var(--cil-green-light-2); width: 7px; height: 7px; }
.cf-modal__dot:nth-of-type(8n+7) { background: var(--cil-blue-light-2); }
.cf-modal__dot:nth-of-type(8n+8) { background: var(--cil-yellow-dark-1); width: 7px; height: 7px; }
/* An uneven ring, so the burst reads organic rather than mechanical. */
.cf-modal__dot:nth-of-type(2)  { --dx: -67px; --dy: -39px; }
.cf-modal__dot:nth-of-type(3)  { --dx:  69px; --dy: -30px; }
.cf-modal__dot:nth-of-type(4)  { --dx: -51px; --dy:  34px; }
.cf-modal__dot:nth-of-type(5)  { --dx:  55px; --dy:  41px; }
.cf-modal__dot:nth-of-type(6)  { --dx: -23px; --dy: -64px; }
.cf-modal__dot:nth-of-type(7)  { --dx:  28px; --dy: -69px; }
.cf-modal__dot:nth-of-type(8)  { --dx: -74px; --dy:  -2px; }
.cf-modal__dot:nth-of-type(9)  { --dx:  76px; --dy:   7px; }
.cf-modal__dot:nth-of-type(10) { --dx: -41px; --dy: -74px; }
.cf-modal__dot:nth-of-type(11) { --dx:  46px; --dy:  67px; }
.cf-modal.is-open .cf-modal__dot { animation: cf-modal-confetti .9s cubic-bezier(.22, 1, .36, 1) forwards; }
.cf-modal.is-open .cf-modal__dot:nth-of-type(even) { animation-delay: .55s; }
.cf-modal.is-open .cf-modal__dot:nth-of-type(odd)  { animation-delay: .65s; }
@keyframes cf-modal-confetti {
    0% { transform: translate(0, 0) scale(0); opacity: 1; }
    60% { opacity: 1; }
    100% { transform: translate(var(--dx, 0px), var(--dy, 0px)) scale(1); opacity: 0; }
}

/* ---- The close button: the popup's (popup/assets/frontend-modal.css), inside the card ----
   16px from the top and the reading-end corner. It drops in from above the card's top edge, where the
   card's own rounded clip hides it, with the light spin; on hover a black iris opens from its centre
   and the cross turns white a moment after. Oren, 2026-10-08: "do the same we did for the popup". */
.cf-modal__close {
    position: absolute; top: 16px; left: auto; right: auto; inset-inline-end: 16px; z-index: 2;
    box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    overflow: hidden; isolation: isolate; border-radius: 50%; color: var(--cil-black);
    /* Keeps the rounded clip smoothly antialiased while the button turns. */
    -webkit-mask-image: radial-gradient(circle, #fff 100%, #000 100%); mask-image: radial-gradient(circle, #fff 100%, #000 100%);
    /* Quick on the way back, so the cross is dark before the closing iris uncovers the white. */
    transition: color .1s ease;
}
.cf-modal .cf-modal__close button {
    position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    margin: 0; padding: 0; border: 0; background: none; color: inherit; line-height: 0; cursor: pointer;
}
.cf-modal .cf-modal__close button:is(:hover, :focus, :active) { background: none; color: inherit; }
.cf-modal__close svg { display: block; width: 16px; height: 16px; }
.cf-modal__iris {
    position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; border-radius: 50%; background: var(--cil-black);
    pointer-events: none; transform: scale(0);
    /* Closing starts slow, so the cross is dark again before the fill under it has gone. */
    transition: transform .35s cubic-bezier(.55, 0, .8, .2);
}
.cf-modal__close:hover .cf-modal__iris { transform: scale(1); transition: transform .45s cubic-bezier(.22, 1, .36, 1); }
.cf-modal__close:hover { color: var(--cil-white); transition-delay: .08s; }
.cf-modal .cf-modal__close button:focus-visible { outline: 3px solid var(--cil-yellow); outline-offset: -3px; border-radius: 50%; }
@media (prefers-reduced-motion: no-preference) {
    .cf-modal.is-open .cf-modal__close { animation: cf-modal-close-drop .65s cubic-bezier(.22, 1, .36, 1) .15s both; }
}
@keyframes cf-modal-close-drop {
    from { transform: translateY(-72px) rotate(-120deg); }
    to   { transform: translateY(0) rotate(0deg); }
}

@media (max-width: 480px) {
    .cf-modal__surface { min-width: 0; width: 100%; padding: 40px 24px 32px; }
}
@media (prefers-reduced-motion: reduce) {
    .cf-modal__backdrop, .cf-modal__box, .cf-modal__close, .cf-modal__iris, .cf-modal__surface::before,
    .cf-modal.is-open .cf-modal__halo, .cf-modal.is-open .cf-modal__mark, .cf-modal.is-open .cf-modal__dot { transition: none; animation: none; }
    .cf-modal.is-open .cf-modal__box { opacity: 1; transform: none; }
    .cf-modal.is-open .cf-modal__surface::before { opacity: 1; }
    .cf-modal.is-open .cf-modal__halo { transform: scale(1); opacity: 1; }
    .cf-modal.is-open .cf-modal__dot { display: none; }
    .cf-modal.is-open .cf-modal__mark circle, .cf-modal.is-open .cf-modal__mark path { animation: none; stroke-dashoffset: 0; }
}