/* Contact form — confirmation modal (.cf-modal).
   The dialog the form opens after sending, replacing the legacy #popup shell. The close button
   is the CPT popup modal's close button, ported 1:1 (inc/popup-admin/assets/frontend-modal.css),
   including its rise-from-behind entry and Bubble Coloring hover. Colours are brand tokens. */

.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: rgba(50, 51, 51, 0.55);
    opacity: 0;
    transition: opacity 0.3s ease;
}
.cf-modal.is-open .cf-modal__backdrop { opacity: 1; }

/* The box rises in on the project's signature decelerate curve. */
.cf-modal__box {
    position: relative;
    opacity: 0;
    transform: translateY(26px) scale(0.96);
    transition: opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}
.cf-modal.is-open .cf-modal__box { opacity: 1; transform: none; }

/* The white surface paints ABOVE the close button so its entry can rise from behind. */
.cf-modal__surface {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    min-width: 320px;
    max-width: min(420px, calc(100vw - 40px));
    background: var(--cil-white);
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(50, 51, 51, 0.2);
    padding: 38px 36px 34px;
    text-align: center;
    overflow: hidden;   /* the wash and confetti stay inside the rounded card */
}
/* Soft state-coloured wash behind the mark, so the card itself carries the result colour. */
.cf-modal__surface::before {
    content: "";
    position: absolute;
    inset: 0 0 auto;
    height: 150px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.5s ease 0.2s;
}
.cf-modal.is-success .cf-modal__surface::before {
    background: radial-gradient(ellipse 70% 100% at 50% 0%, var(--cil-green-light-3), transparent 75%);
}
.cf-modal.is-error .cf-modal__surface::before {
    background: radial-gradient(ellipse 70% 100% at 50% 0%, var(--cil-red-light-2), transparent 75%);
}
.cf-modal.is-open .cf-modal__surface::before { opacity: 1; }
.cf-modal__title {
    margin: 18px 0 0;
    color: var(--cil-black);
    font-family: 'Assistant-Bold', Arial, sans-serif;
    font-size: 24px;
    line-height: 30px;
}

/* ----- Result mark: ring + stroke drawn in, success green / error red ----- */
.cf-modal__celebrate {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto;
}
/* Halo pops in behind the ring with a small overshoot. */
.cf-modal__halo {
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    transform: scale(0.4);
    opacity: 0;
}
.cf-modal.is-success .cf-modal__halo { background: var(--cil-green-light-4); }
.cf-modal.is-error   .cf-modal__halo { background: var(--cil-red-light-3); }
.cf-modal.is-open .cf-modal__halo {
    animation: cf-modal-halo-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}
@keyframes cf-modal-halo-pop {
    0%   { transform: scale(0.4); opacity: 0; }
    70%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Brand-circle confetti — the site's circle motif, launched from behind the mark as the
   check lands. Success only; an error does not celebrate. */
.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+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; }
.cf-modal__dot:nth-of-type(8n+1) { background: var(--cil-red-light-2); }
/* Launch vectors — an uneven ring so the burst reads organic, not 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-success.is-open .cf-modal__dot {
    animation: cf-modal-confetti 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.cf-modal.is-success.is-open .cf-modal__dot:nth-of-type(even) { animation-delay: 0.55s; }
.cf-modal.is-success.is-open .cf-modal__dot:nth-of-type(odd)  { animation-delay: 0.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; }
}

/* Success sizes up a step — the celebratory state earns a little more room than the error. */
.cf-modal.is-success .cf-modal__surface {
    min-width: 384px;
    max-width: min(480px, calc(100vw - 40px));
    padding: 46px 44px 40px;
}
.cf-modal.is-success .cf-modal__surface::before { height: 180px; }
.cf-modal.is-success .cf-modal__celebrate,
.cf-modal.is-success .cf-modal__mark { width: 80px; height: 80px; }
.cf-modal.is-success .cf-modal__halo { inset: -18px; }
.cf-modal.is-success .cf-modal__title { font-size: 26px; line-height: 32px; }

/* The drawn mark lands with a little bounce; an error shakes its head instead. */
.cf-modal__mark { position: relative; display: block; width: 64px; height: 64px; }
.cf-modal.is-success.is-open .cf-modal__mark {
    animation: cf-modal-mark-bounce 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.6s;
}
@keyframes cf-modal-mark-bounce {
    0% { transform: scale(1); } 40% { transform: scale(1.12); } 100% { transform: scale(1); }
}
.cf-modal.is-error.is-open .cf-modal__mark {
    animation: cf-modal-mark-shake 0.45s ease-in-out 0.7s;
}
@keyframes cf-modal-mark-shake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    45% { transform: translateX(4px); }
    70% { transform: translateX(-3px); }
}
.cf-modal__mark circle,
.cf-modal__mark path {
    fill: none;
    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-success .cf-modal__mark circle,
.cf-modal.is-success .cf-modal__markCheck { stroke: var(--cil-green); }
.cf-modal.is-error   .cf-modal__mark circle,
.cf-modal.is-error   .cf-modal__markCross { stroke: var(--cil-red); }
.cf-modal.is-success .cf-modal__markCross,
.cf-modal.is-error   .cf-modal__markCheck { display: none; }
.cf-modal.is-open .cf-modal__mark circle {
    animation: cf-modal-draw 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}
.cf-modal.is-open .cf-modal__mark path {
    animation: cf-modal-draw 0.45s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}
@keyframes cf-modal-draw { to { stroke-dashoffset: 0; } }

/* ----- Close button — 1:1 the CPT popup modal's ----- */
.cf-modal__close {
    position: absolute;
    top: -46px;
    /* Physical left/right only: logical inset-inline-* remaps to `left` in RTL
       and cancels the centering. */
    left: 50%;
    right: auto;
    /* --cil-close-nudge snaps the circle onto whole device pixels — the surface centre can fall
       on a half pixel, and a 36px circle drawn across it stops reading as round. Measured and
       set by contact-form.js on open. */
    transform: translateX(calc(-50% + var(--cil-close-nudge, 0px)));
    z-index: 0;                 /* behind the surface */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    margin: 0;
    background: var(--cil-white);
    /* Ring drawn as an inset shadow, not a border — a real border clipped by
       `overflow: hidden` on a small circle produces visible stepping at the edge. */
    border: 0;
    border-radius: 50%;
    color: var(--cil-black);
    box-shadow: inset 0 0 0 1px var(--cil-black-light-4), 0 2px 8px rgba(50, 51, 51, 0.15);
    overflow: hidden;
    isolation: isolate;
    /* Keeps the rounded clip smoothly antialiased while the button rotates. */
    -webkit-mask-image: radial-gradient(circle, #fff 100%, #000 100%);
            mask-image: radial-gradient(circle, #fff 100%, #000 100%);
    transition: color 0.6s ease 0.15s, box-shadow 0.6s ease 0.15s;
}
.cf-modal__close a {
    position: relative;
    z-index: 1;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    color: inherit;
    line-height: 0;
    text-decoration: none;
}
.cf-modal__close svg { display: block; width: 14px; height: 14px; }

/* Bubble Coloring hover — black fill rising into the circle. */
.cf-modal__close > span {
    position: absolute;
    bottom: -50%;
    width: 25%;
    height: 100%;
    background: var(--cil-black);
    border-radius: 50%;
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: -1;
    pointer-events: none;
    transform: translateY(150%);
    will-change: transform;
}
.cf-modal__close > span:nth-of-type(1) { left:  0%; transition-delay: 0.20s; }
.cf-modal__close > span:nth-of-type(2) { left: 25%; transition-delay: 0.05s; }
.cf-modal__close > span:nth-of-type(3) { left: 50%; transition-delay: 0.05s; }
.cf-modal__close > span:nth-of-type(4) { left: 75%; transition-delay: 0.20s; }
.cf-modal__close:hover > span { transform: translateY(-50%) scale(1.6); }
.cf-modal__close:hover {
    color: var(--cil-white);
    /* Ring fades to black on the same delay so the whole circle reads solid. */
    box-shadow: inset 0 0 0 1px var(--cil-black), 0 2px 8px rgba(50, 51, 51, 0.15);
}
.cf-modal__close a:focus-visible {
    outline: 3px solid var(--cil-yellow);
    outline-offset: 2px;
    border-radius: 50%;
}

/* Entry — starts hidden BEHIND the surface and slides straight up with a light spin. */
@media (prefers-reduced-motion: no-preference) {
    .cf-modal.is-open .cf-modal__close {
        animation: cf-modal-close-rise 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: 0.15s;   /* let the dialog settle first */
        will-change: transform;
    }
}
@keyframes cf-modal-close-rise {
    from { transform: translate(calc(-50% + var(--cil-close-nudge, 0px)), 90px) rotate(-120deg); }
    to   { transform: translate(calc(-50% + var(--cil-close-nudge, 0px)), 0)    rotate(0deg); }
}

@media (prefers-reduced-motion: reduce) {
    .cf-modal__backdrop,
    .cf-modal__box,
    .cf-modal__close,
    .cf-modal__close > span,
    .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; }
}