/* ───────── Pre-registration section: entrance, drifting circles, mouse light, pulsing call button,
   form progress, validation, and the animated thank-you. Loaded after home.css.
   To undo all of it: remove the two includes in home.html. ───────── */

.hm-enrol { --ease: cubic-bezier(.2, .7, .2, 1); position: relative; isolation: isolate; overflow: hidden; }

/* ── decoration behind the content: the hero's circles, again ── */
.hm-enrol-rings, .hm-enrol-orbit, .hm-enrol-halo, .hm-enrol-dot, .hm-enrol-spot { position: absolute; z-index: -1; pointer-events: none; }
.hm-enrol-rings { inset: -140px 0; background: url("../images/ellipses.svg") 62% 50% / 1500px auto no-repeat; opacity: .8; }
.hm-enrol-orbit { right: -7%; top: 6%; width: min(46vw, 640px); aspect-ratio: 1; border: 3px solid var(--yellow); border-radius: 50%; rotate: -18deg; opacity: .9; }
.hm-enrol-halo { right: -2%; top: 1%; width: min(52vw, 720px); aspect-ratio: 1; border: 1.5px solid rgba(255, 255, 255, .3); border-radius: 50%; rotate: -18deg; }
.hm-enrol-dot { right: 21%; top: 3%; width: 26px; height: 26px; border-radius: 50%; background: var(--yellow); box-shadow: 0 10px 22px -6px rgba(0, 0, 0, .5); }
[data-parallax] { will-change: translate; }

/* on a phone the circles stay in the top-right corner so they never cross the text */
@media (max-width: 991.98px) {
    .hm-enrol-orbit { right: -110px; top: -90px; width: 260px; }
    .hm-enrol-halo { right: -135px; top: -110px; width: 300px; }
    .hm-enrol-dot { right: 125px; top: 27px; width: 20px; height: 20px; }
}

/* ── a soft light that follows the mouse (enrol.js; mouse only) ── */
.hm-enrol-spot { inset: 0; background: radial-gradient(420px circle at var(--mx, 70%) var(--my, 30%), rgba(255, 255, 255, .11), transparent 62%); opacity: 0; transition: opacity .5s ease; }
.hm-enrol.is-hover .hm-enrol-spot { opacity: 1; }

/* ── entrance: the title's words rise one by one, then the text, the buttons, and the card from the right ── */
.hm-word { display: inline-block; transition: opacity .8s ease calc(var(--w, 0) * .07s), translate .8s var(--ease) calc(var(--w, 0) * .07s); }
.hm-enrol-text, .hm-enrol-actions { transition: opacity .8s ease .55s, translate .8s var(--ease) .55s; }
.hm-formcard { transition: opacity .9s ease .35s, translate .9s var(--ease) .35s, box-shadow .3s; }
.hm-enrol.is-armed:not(.is-in) .hm-word { opacity: 0; translate: 0 .6em; }
.hm-enrol.is-armed:not(.is-in) .hm-enrol-text, .hm-enrol.is-armed:not(.is-in) .hm-enrol-actions { opacity: 0; translate: 0 24px; }
.hm-enrol.is-armed:not(.is-in) .hm-formcard { opacity: 0; translate: 60px 0; }

/* ── the call button breathes now and then ── */
.hm-enrol-actions .gs-btn-y { animation: hm-ring 3.4s ease-out 1.5s infinite; }
.hm-enrol-actions .gs-btn-y:hover, .hm-enrol-actions .gs-btn-y:focus-visible { animation-play-state: paused; }
@keyframes hm-ring { 0% { box-shadow: 0 0 0 0 rgba(255, 255, 255, .45); } 55%, 100% { box-shadow: 0 0 0 18px rgba(255, 255, 255, 0); } }

/* ── the form card ── */
.hm-formcard { position: relative; overflow: hidden; }
.hm-progress { position: absolute; top: 0; left: 0; right: 0; height: 5px; background: rgba(11, 28, 51, .08); }
.hm-progress i { display: block; height: 100%; width: calc(var(--p, 0) * 100%); border-radius: 0 4px 4px 0; background: linear-gradient(90deg, var(--navy-2), var(--yellow)); transition: width .5s var(--ease); }
.hm-formcard .gs-btn-navy, form[data-quiet] .gs-btn-navy { transition: background-color .3s ease, color .3s ease, transform .15s; }
.hm-formcard.is-ready .gs-btn-navy, form[data-quiet].is-ready .gs-btn-navy { background: var(--yellow); color: var(--ink); animation: hm-pop-btn .5s var(--ease); }
@keyframes hm-pop-btn { 40% { transform: scale(1.04); } }
.hm-formcard .gs-btn[disabled], form[data-quiet] .gs-btn[disabled] { opacity: .75; cursor: progress; }

/* a field: check when valid, message when not */
.gs-form-row { align-items: start; }
.gs-form label { position: relative; }
.hm-ok { position: absolute; right: 14px; bottom: 17px; display: none; width: 20px; height: 20px; color: #1a9b53; pointer-events: none; }
.hm-ok svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
label.is-area .hm-ok { bottom: auto; top: 2.2rem; }
label.is-valid .hm-ok { display: block; animation: hm-tick .35s var(--ease); }
@keyframes hm-tick { from { opacity: 0; scale: .4; } }
label.is-valid input, label.is-valid textarea { padding-right: 2.6rem; }
.hm-err { min-height: 0; font-size: .86rem; font-weight: 600; line-height: 1.35; color: #b42318; }
.hm-err:empty { display: none; }
.gs-form input[aria-invalid="true"], .gs-form textarea[aria-invalid="true"] { border-color: #d64545; background: #fff6f6; }
label.hm-shake { animation: hm-shake .42s ease; }
@keyframes hm-shake { 20% { translate: -7px 0; } 40% { translate: 6px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
.hm-formerror { padding: .8rem 1rem; border-radius: 12px; background: #fff0ee; color: #8a1c10; font-size: .92rem; font-weight: 600; }

/* ── after sending: the form gives way to a drawn check mark ── */
.hm-formcard.is-sent > :not(.hm-thanks):not(.hm-progress) { display: none; }
.hm-thanks { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; min-height: 100%; padding: 1.5rem .5rem; text-align: center; outline: 0; animation: hm-in-up .6s var(--ease) both; }
.hm-thanks h3 { font-size: 1.9rem; }
.hm-thanks p { max-width: 22rem; color: var(--muted); }
.hm-thanks .gs-btn { margin-top: .6rem; }
.hm-check { width: 92px; height: 92px; fill: none; stroke: #1a9b53; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.hm-check circle { stroke-dasharray: 151; stroke-dashoffset: 151; animation: hm-draw .7s ease-out .1s forwards; }
.hm-check path { stroke-dasharray: 40; stroke-dashoffset: 40; animation: hm-draw .4s ease-out .65s forwards; }
@keyframes hm-draw { to { stroke-dashoffset: 0; } }
@keyframes hm-in-up { from { opacity: 0; translate: 0 18px; } }

@media (prefers-reduced-motion: reduce) {
    .hm-word, .hm-enrol-text, .hm-enrol-actions, .hm-formcard, .hm-enrol-spot, .hm-progress i { transition: none; }
    .hm-enrol-actions .gs-btn-y, label.hm-shake, label.is-valid .hm-ok, .hm-formcard.is-ready .gs-btn-navy, .hm-thanks { animation: none; }
    .hm-check circle, .hm-check path { animation: none; stroke-dashoffset: 0; }
}