/* The anchor menu's register button (course/parts/anchors.php, Figma 05.1): shown only while the bar
   is pinned and the hero's own button registers. Wider than the design's 138px (216), toward "עוד" -- the
   bar's one call to act (Oren, 2026-10-01).

   It opens and closes as the header's search field does (header-component/assets/
   site-header-search.css; Oren, 2026-10-01: combine the two), then a soft light passes over it --
   the "glint" round's -- the first time on a page:
     pop     0-24%   a 40px circle of its blue springs up from half size, a touch past full, settles;
     hold    24-34%  a breath as the circle;
     open    34-100% it grows its real width toward "עוד", quickly at first and easing into place;
                     the words fade in over the last third, as it reaches its width;
     glint           once open, a narrow, faint light passes over it the way the words read.
   Closing, as the bar lets go: the words fade first, it folds back into the circle, and the circle
   shrinks away. Its open width is measured by anchors.js (--cd-reg-w), so the opening ends on it. */

.cil-course .cil-course-nav__register {
    display: none;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    height: 40px;
    min-width: 216px;
    margin: 0;
    margin-inline-end: 20px;
    padding: 0 32px;
    border: 0;
    border-radius: 20px;
    background: var(--cil-blue);
    font: inherit;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--cil-black);
    white-space: nowrap;
    transition: background-color 0.2s ease;
}
.cil-course .cil-course-nav__register:hover { background: var(--cil-blue-light-7); color: var(--cil-black); }
.cil-course .cil-course-nav__register:active { background: var(--cil-blue-regular-7); color: var(--cil-black); }
.cil-course .cil-course-nav__register:focus-visible { outline: 2px solid var(--cil-blue-dark-1); outline-offset: 2px; }
.cil-course .cil-course-nav__register:disabled { opacity: 0.6; cursor: default; }
/* Registering failed, the hero scrolled away (anchors.js): one line under the pinned bar, on the bar's own ground. */
.cil-course-nav__registerError { display: none; }
.cil-course-nav.is-stuck .cil-course-nav__registerError:not([hidden]) {
    display: block;
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    margin: 0;
    padding: 8px var(--cd-gutter, 16px);
    border-bottom: 1px solid var(--cil-black-light-4);
    background: var(--cd-page-ground, var(--cil-white));
    font-size: 14px;
    line-height: 1.4;
    text-align: center;
    color: var(--cil-red-regular-7);
}
.cil-course-nav__registerShort { display: none; }
.cil-course-nav__registerWords { display: inline-block; }

/* ---- opening ---- */
.cil-course-nav.is-stuck .cil-course-nav__register:not([hidden]) {
    display: inline-flex;
    animation: cil-course-reg-open 0.85s linear backwards;
}
@keyframes cil-course-reg-open {
    0%  { width: var(--cd-reg-dot, 40px); min-width: 0; padding-inline: 0; border-radius: calc(var(--cd-reg-dot, 40px) / 2); transform: scale(0.5); opacity: 0;
          animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1); }
    12% { opacity: 1; }
    24% { width: var(--cd-reg-dot, 40px); min-width: 0; padding-inline: 0; border-radius: calc(var(--cd-reg-dot, 40px) / 2); transform: scale(1);
          animation-timing-function: linear; }
    34% { width: var(--cd-reg-dot, 40px); min-width: 0; padding-inline: 0; border-radius: calc(var(--cd-reg-dot, 40px) / 2); transform: scale(1);
          animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
    100% { width: var(--cd-reg-w, 216px); min-width: 0; }
}
.cil-course-nav.is-stuck .cil-course-nav__register:not([hidden]) .cil-course-nav__registerWords {
    animation: cil-course-reg-words 0.85s linear backwards;
}
@keyframes cil-course-reg-words {
    0%, 62% { opacity: 0; animation-timing-function: ease-out; }
    100%    { opacity: 1; }
}

/* ---- the glint, once open, the first time on a page (anchors.js marks .has-shown after it) ---- */
.cil-course-nav__register::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    width: 40%;
    background: linear-gradient(90deg, color-mix(in srgb, var(--cil-white) 0%, transparent), color-mix(in srgb, var(--cil-white) 34%, transparent) 50%, color-mix(in srgb, var(--cil-white) 0%, transparent));
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
    will-change: transform, opacity;
}
.cil-course-nav.is-stuck .cil-course-nav__register:not([hidden]):not(.has-shown)::after {
    animation: cil-course-reg-glint 1.9s cubic-bezier(0.37, 0, 0.63, 1) 0.8s both;
}
.cil-course-nav[dir="rtl"].is-stuck .cil-course-nav__register:not([hidden]):not(.has-shown)::after { animation-direction: reverse; }
@keyframes cil-course-reg-glint { 0% { opacity: 0; transform: translateX(-100%); } 15%, 85% { opacity: 1; } 100% { opacity: 0; transform: translateX(350%); } }

/* ---- closing: held on screen by anchors.js (.is-leaving) while it folds away ---- */
.cil-course-nav:not(.is-stuck) .cil-course-nav__register.is-leaving:not([hidden]) {
    display: inline-flex;
    animation: cil-course-reg-close 0.62s cubic-bezier(0.55, 0, 0.45, 1) forwards;
}
@keyframes cil-course-reg-close {
    0%   { width: var(--cd-reg-w, 216px); min-width: 0; }
    60%  { width: var(--cd-reg-dot, 40px); min-width: 0; padding-inline: 0; border-radius: calc(var(--cd-reg-dot, 40px) / 2); transform: scale(1); opacity: 1;
           animation-timing-function: cubic-bezier(0.55, 0, 1, 0.45); }
    100% { width: var(--cd-reg-dot, 40px); min-width: 0; padding-inline: 0; border-radius: calc(var(--cd-reg-dot, 40px) / 2); transform: scale(0.5); opacity: 0; }
}
.cil-course-nav:not(.is-stuck) .cil-course-nav__register.is-leaving:not([hidden]) .cil-course-nav__registerWords {
    animation: cil-course-reg-words-out 0.62s ease-out forwards;
}
@keyframes cil-course-reg-words-out { 20%, 100% { opacity: 0; } }

/* ---- the phone's: "הרשמה", as short as the share pill beside it (Figma 05.1 mobile) ---- */
@media (max-width: 1023px) {
    .cil-course .cil-course-nav__register { --cd-reg-dot: 32px; height: 32px; min-width: 0; margin-inline-end: 4px; padding: 0 16px; border-radius: 18px; font-size: 14px; }
    .cil-course-nav__registerLong { display: none; }
    .cil-course-nav__registerShort { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
    .cil-course-nav.is-stuck .cil-course-nav__register:not([hidden]),
    .cil-course-nav.is-stuck .cil-course-nav__register:not([hidden]) .cil-course-nav__registerWords,
    .cil-course-nav.is-stuck .cil-course-nav__register:not([hidden])::after { animation: none !important; }
    .cil-course-nav:not(.is-stuck) .cil-course-nav__register.is-leaving { display: none; }
}