/* CPT popup — the close button. Figma "Pop-Up" node 33-9 places it inside the card, 16px from the
   top and from the reading-end corner, as a 44px disc over the picture.

   Everything is scoped under #popup.cil-popup-modal, a marker class frontend-trigger.js adds only
   when the CPT popup opens, so the shared video lightbox keeps its original close button.

   The reveal is the one approved earlier, re-aimed. It used to rise from behind the dialog box; the
   card now carries the rounded clip (frontend-card.css makes .popupContent the card), so the button
   can start above the card's top edge where that clip hides it, and drop into place with the same
   curve and the same light spin. Same trick, mirrored — nothing is hidden behind the box because
   the box's own edge does the hiding. */

#popup.cil-popup-modal #popupInner { position: relative; z-index: 0; }

#popup.cil-popup-modal .popupClose {
    position: absolute;
    top: 16px;
    /* The theme positions this button physically, so both sides are released first — a logical
       inset declared before them would simply be overwritten by `left: auto`, which is how the
       button ended up on the wrong side of the card. Order matters: release, then place.
       Logical, so it sits opposite the text's start: left of a Hebrew card, right of an English
       one. Safe here in a way it is not for a centred element — there is no translate to cancel. */
    left: auto;
    right: auto;
    inset-inline-end: 16px;
    z-index: 2;                 /* above the picture */
    /* The button centres its own contents rather than delegating to the anchor: the theme's
       `.popupClose a` width/height beat `inset: 0`, leaving a 35px anchor inside the circle and the
       glyph half a pixel off centre on both axes. */
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    margin: 0;
    background: var(--cil-white);
    border: 0;
    border-radius: 50%;
    color: var(--cil-black);
    /* No ring and no drop shadow: the design draws a plain white disc, and the picture behind it
       already gives the separation a shadow would. */
    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;
}
#popup.cil-popup-modal .popupClose:hover { background: var(--cil-white); }

/* With no picture the button has the card's own ground under it, and the design draws it bare —
   a disc would be a white circle on white. The hover fill goes with it: there is no longer a
   contained shape for the bubbles to fill.
   Asked of the page on show, not of the popup: one page may carry a picture while the next does
   not, and keying this to "any page is imageless" left the button bare over a photograph. The
   second selector covers a popup whose slider never initialised, where there is no current page. */
#popup.cil-popup-modal:has(.slick-current .cil-popup-card__slide.is-imageless) .popupClose,
#popup.cil-popup-modal:not(:has(.slick-current)):has(.cil-popup-card__slide.is-imageless) .popupClose {
    background: none;
    -webkit-mask-image: none;
            mask-image: none;
}
#popup.cil-popup-modal:has(.slick-current .cil-popup-card__slide.is-imageless) .popupClose > span,
#popup.cil-popup-modal:not(:has(.slick-current)):has(.cil-popup-card__slide.is-imageless) .popupClose > span {
    display: none;
}
#popup.cil-popup-modal:has(.slick-current .cil-popup-card__slide.is-imageless) .popupClose:hover,
#popup.cil-popup-modal:not(:has(.slick-current)):has(.cil-popup-card__slide.is-imageless) .popupClose:hover {
    color: var(--cil-black-regular-7);
}

/* The anchor fills the circle so the whole button is clickable. Sized with 100%/100% rather than
   absolute inset — the theme declares an explicit 35px width/height on this element. */
#popup.cil-popup-modal .popupClose 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;
}
#popup.cil-popup-modal .popupClose svg { display: block; width: 20px; height: 20px; }

/* Bubble Coloring hover — the page's CTA animation, black fill rising into the circle. */
#popup.cil-popup-modal .popupClose > 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;
}
#popup.cil-popup-modal .popupClose > span:nth-of-type(1) { left:  0%; transition-delay: 0.20s; }
#popup.cil-popup-modal .popupClose > span:nth-of-type(2) { left: 25%; transition-delay: 0.05s; }
#popup.cil-popup-modal .popupClose > span:nth-of-type(3) { left: 50%; transition-delay: 0.05s; }
#popup.cil-popup-modal .popupClose > span:nth-of-type(4) { left: 75%; transition-delay: 0.20s; }
#popup.cil-popup-modal .popupClose:hover > span { transform: translateY(-50%) scale(1.6); }
#popup.cil-popup-modal .popupClose:hover { color: var(--cil-white); }
/* No fill on focus, unlike the landing modal. trapFocus() moves focus onto this link the instant
   the popup opens, and the browser counts that programmatic focus as :focus-visible — mirroring the
   landing rule would leave the button permanently filled. Keyboard users get the outline below. */

/* Entry — drops in from above the card's top edge, where the card's own rounded clip hides it,
   with the project's signature decelerate curve and a light spin. Re-runs on every open, because
   the marker class is re-added each time. */
@media (prefers-reduced-motion: no-preference) {
    #popup.cil-popup-modal.active .popupClose {
        animation: cil-popup-close-drop 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
        animation-delay: 0.15s;   /* let the dialog settle first */
        will-change: transform;
    }
}
@keyframes cil-popup-close-drop {
    from { transform: translateY(-72px) rotate(-120deg); }
    to   { transform: translateY(0)     rotate(0deg); }
}

#popup.cil-popup-modal .popupClose a:focus-visible {
    outline: 3px solid var(--cil-yellow);
    outline-offset: 2px;
    border-radius: 50%;
}