/*
 * Contact page (.page-head--contact, .contact-sec, .form-card--live). Loaded on the Contact page only; js/contact.js adds the reveal, the form progress line
 * and the pointer light. Header: two slow glows and a faint grid, three floating message symbols with waves round the chat one, title and lead rise in,
 * a gold line draws under the title, quick links (the e-mail address, a jump to the form). Left: the contact cards and the notes stay in view while the long
 * form is filled in (sticky on wide screens). Form: a flowing gold and blue line on top, a thin progress line that fills as the required fields are
 * completed, a light that follows the pointer, fields that come in one after the other, a glowing focus, a nudge on an error and a pop for the answer.
 * Nothing here changes how the form works. Only transform / opacity / background-position move; all of it stops under prefers-reduced-motion; without the
 * script nothing is hidden. RTL: logical properties; the directions of flows and slides are mirrored through --dir.
 */
:root { --dir: 1; }
[dir="rtl"] { --dir: -1; }

/* ------------------------------------------------------------------ header */
.page-head--contact { isolation: isolate; overflow: hidden; }
.page-head--contact > .container { position: relative; z-index: 1; }
.ct-decor { position: absolute; inset-block: 0; inset-inline: 0; margin-inline: auto; max-inline-size: calc(var(--max) + var(--gutter) * 2); z-index: 0; pointer-events: none; }
.ct-orb { position: absolute; border-radius: 50%; filter: blur(64px); translate: calc(var(--mx, 0) * 26px) calc(var(--my, 0) * 18px); }
.ct-orb--1 { inline-size: 460px; block-size: 460px; inset-block-start: -210px; inset-inline-end: -40px; background: rgba(22, 119, 255, .42); animation: ct-float 15s ease-in-out infinite alternate; }
.ct-orb--2 { inline-size: 320px; block-size: 320px; inset-block-end: -190px; inset-inline-start: 22%; background: rgba(201, 163, 73, .3); animation: ct-float 19s ease-in-out infinite alternate-reverse; translate: calc(var(--mx, 0) * -22px) calc(var(--my, 0) * -14px); }
@keyframes ct-float { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(calc(46px * var(--dir)), 28px, 0) scale(1.16); } }
.ct-grid { position: absolute; inset: 0; opacity: .5; background-image: linear-gradient(rgba(143, 194, 255, .09) 1px, transparent 1px), linear-gradient(90deg, rgba(143, 194, 255, .09) 1px, transparent 1px); background-size: 44px 44px; -webkit-mask-image: radial-gradient(520px 260px at 82% 30%, #000, transparent 75%); mask-image: radial-gradient(520px 260px at 82% 30%, #000, transparent 75%); animation: ct-grid 14s linear infinite; }
[dir="rtl"] .ct-grid { -webkit-mask-image: radial-gradient(520px 260px at 18% 30%, #000, transparent 75%); mask-image: radial-gradient(520px 260px at 18% 30%, #000, transparent 75%); }
@keyframes ct-grid { to { background-position: 44px 44px, 44px 44px; } }
.ct-chip { position: absolute; display: none; place-items: center; border-radius: 22px; color: var(--gold); background: linear-gradient(150deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .04)); border: 1px solid rgba(201, 163, 73, .55); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7), 0 0 28px -6px rgba(201, 163, 73, .4); animation: ct-bob 5s ease-in-out infinite alternate; }
.ct-chip .ico { inline-size: 55%; block-size: 55%; }
.ct-chip--chat { inline-size: 92px; block-size: 92px; inset-block-start: 26%; inset-inline-end: 96px; color: var(--sky); border-color: rgba(143, 194, 255, .6); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .7), 0 0 34px -4px rgba(143, 194, 255, .5); }
.ct-chip--chat::before, .ct-chip--chat::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid rgba(143, 194, 255, .55); animation: ct-wave 3.2s ease-out infinite; }
.ct-chip--chat::after { animation-delay: 1.6s; }
@keyframes ct-wave { 0% { transform: scale(1); opacity: .8; } 75%, 100% { transform: scale(1.85); opacity: 0; } }
.ct-chip--mail { inline-size: 62px; block-size: 62px; inset-block-start: 12%; inset-inline-end: 250px; animation-delay: -2s; }
.ct-chip--phone { inline-size: 56px; block-size: 56px; inset-block-start: 58%; inset-inline-end: 230px; animation-delay: -3.4s; }
@keyframes ct-bob { from { translate: 0 -9px; } to { translate: 0 11px; } }
@media (min-width: 1060px) { .ct-chip { display: grid; } }

.page-head--contact h1 { position: relative; padding-block-end: .28em; }
.page-head--contact h1::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: 0; inline-size: 84px; block-size: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--gold), var(--sky)); transform-origin: left center; }
[dir="rtl"] .page-head--contact h1::after { transform-origin: right center; }
.ct-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 1.6rem; }
.ct-pills a { display: inline-flex; align-items: center; gap: .5em; min-block-size: 40px; max-inline-size: 100%; padding: .45em 1em .45em .8em; border-radius: 99px; font-size: .92rem; font-weight: 600; text-decoration: none; color: var(--on-dark); background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .2); transition: transform .25s cubic-bezier(.2, .7, .2, 1), background .25s ease, border-color .25s ease; }
.ct-pills a span { min-inline-size: 0; overflow-wrap: anywhere; }
.ct-pills .ico { flex: none; inline-size: 18px; block-size: 18px; color: var(--gold); transition: transform .3s cubic-bezier(.2, .7, .2, 1); }
[dir="rtl"] .ct-pills li:last-child .ico { transform: scaleX(-1); }
@media (hover: hover) {
  .ct-pills a:hover { transform: translateY(-3px); background: rgba(201, 163, 73, .18); border-color: rgba(201, 163, 73, .7); color: #fff; }
  .ct-pills a:hover .ico { transform: translateX(calc(3px * var(--dir))) scale(1.15); }
}

/* ------------------------------------------------------------------ body */
.contact-sec { position: relative; isolation: isolate; overflow: clip; } /* clip, not hidden: hidden would turn the section into a scroll container and break the sticky side column */
.contact-sec::before, .contact-sec::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; filter: blur(80px); }
.contact-sec::before { inline-size: 420px; block-size: 420px; inset-block-start: -120px; inset-inline-start: -140px; background: rgba(201, 163, 73, .14); animation: ct-float 20s ease-in-out infinite alternate; }
.contact-sec::after { inline-size: 460px; block-size: 460px; inset-block-end: -160px; inset-inline-end: -120px; background: rgba(22, 119, 255, .12); animation: ct-float 24s ease-in-out infinite alternate-reverse; }
@media (min-width: 960px) { .contact-side { position: sticky; inset-block-start: calc(var(--header-h, 72px) + 24px); } }

.contact-cards li { --mx: 50%; --my: 50%; --rx: 0deg; --ry: 0deg; position: relative; isolation: isolate; overflow: hidden; transform: perspective(800px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .3s ease, border-color .3s ease, opacity .6s ease, translate .7s cubic-bezier(.2, .7, .2, 1); box-shadow: 0 10px 26px -20px rgba(11, 29, 58, .45); }
.contact-cards li::before { content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; inline-size: 4px; background: linear-gradient(180deg, var(--gold), var(--blue)); }
.contact-cards li::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background: radial-gradient(240px circle at var(--mx) var(--my), rgba(201, 163, 73, .2), transparent 70%); transition: opacity .3s ease; }
.contact-cards .ico { position: relative; box-sizing: border-box; transition: transform .3s cubic-bezier(.2, .7, .2, 1); animation: ct-bob 4.6s ease-in-out infinite alternate; }
.contact-cards li:nth-child(2) .ico { animation-delay: -1.5s; } .contact-cards li:nth-child(3) .ico { animation-delay: -3s; }
.contact-cards a { overflow-wrap: anywhere; }
.contact-side .support-text, .contact-side .fine { transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
@media (hover: hover) {
  .contact-cards li:hover { border-color: rgba(201, 163, 73, .7); box-shadow: 0 22px 40px -22px rgba(11, 29, 58, .5), 0 0 30px -10px rgba(201, 163, 73, .45); }
  .contact-cards li:hover::after { opacity: 1; }
  .contact-cards li:hover .ico { transform: scale(1.08) rotate(-5deg); }
}

/* ------------------------------------------------------------------ the form card */
.form-card--live { --mx: 50%; --my: 50%; position: relative; isolation: isolate; overflow: hidden; }
.form-card--live::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: 4px; background: linear-gradient(90deg, var(--gold), var(--sky), var(--gold), var(--blue)); background-size: 300% 100%; animation: ct-line 8s linear infinite; }
[dir="rtl"] .form-card--live::before { animation-direction: reverse; }
@keyframes ct-line { to { background-position: -300% 0; } }
.form-card--live::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background: radial-gradient(420px circle at var(--mx) var(--my), rgba(22, 119, 255, .08), transparent 70%); transition: opacity .4s ease; }
.form-card--live:hover::after { opacity: 1; }
.fc-progress { position: absolute; inset-inline: 0; inset-block-start: 4px; block-size: 3px; opacity: 0; background: rgba(11, 29, 58, .07); transition: opacity .3s ease; }
.fc-progress::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--gold), var(--blue)); transform-origin: left center; transform: scaleX(var(--p, 0)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
[dir="rtl"] .fc-progress::after { transform-origin: right center; }
.form-card--live.is-on .fc-progress { opacity: 1; }
.form-card--live .field label { transition: color .25s ease; }
.form-card--live .field:focus-within label { color: var(--blue-700); }
.form-card--live .field input:not([type="checkbox"]), .form-card--live .field select, .form-card--live .field textarea { transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease; }
.form-card--live .field input:not([type="checkbox"]):focus, .form-card--live .field select:focus, .form-card--live .field textarea:focus { box-shadow: 0 0 0 4px rgba(22, 119, 255, .14), 0 10px 24px -14px rgba(22, 119, 255, .6); }
@media (hover: hover) { .form-card--live .field input:not([type="checkbox"]):hover:not(:focus), .form-card--live .field select:hover:not(:focus), .form-card--live .field textarea:hover:not(:focus) { border-color: var(--blue-600); } }
.form-card--live .form-foot .btn { position: relative; overflow: hidden; isolation: isolate; transition: transform .25s cubic-bezier(.2, .7, .2, 1), box-shadow .25s ease, background .2s ease; }
.form-card--live .form-foot .btn::after { content: ""; position: absolute; inset-block: 0; inset-inline-start: -60%; inline-size: 40%; z-index: -1; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent); }
@media (hover: hover) {
  .form-card--live .form-foot .btn:not(:disabled):hover { transform: translateY(-3px); box-shadow: 0 16px 30px -10px rgba(15, 98, 217, .6); }
  .form-card--live .form-foot .btn:not(:disabled):hover::after { inset-inline-start: 130%; transition: inset-inline-start .7s ease; }
}
.form-card--live .form-status .msg { animation: ct-pop .5s cubic-bezier(.2, .8, .3, 1.2) both; }

@media (prefers-reduced-motion: no-preference) {
  .page-head--contact .crumbs, .page-head--contact h1, .page-head--contact .lead { animation: ct-rise .8s cubic-bezier(.2, .7, .2, 1) both; }
  .page-head--contact h1 { animation-delay: .1s; } .page-head--contact .lead { animation-delay: .25s; }
  .page-head--contact h1::after { animation: ct-draw 1s cubic-bezier(.2, .7, .2, 1) .5s both; }
  .ct-pills li { animation: ct-pop .6s cubic-bezier(.2, .8, .3, 1.2) both; }
  .ct-pills li:nth-child(1) { animation-delay: .5s; } .ct-pills li:nth-child(2) { animation-delay: .65s; }
  .ct-chip { animation: ct-pop .7s cubic-bezier(.2, .8, .3, 1.2) .6s both, ct-bob 5s ease-in-out 1.3s infinite alternate; }
  .ct-chip--mail { animation-delay: .75s, 1.45s; } .ct-chip--phone { animation-delay: .9s, 1.6s; }
  /* on scroll: js/contact.js sets .ct-wait on what is still below the fold and removes it as it comes into view */
  .ct-wait { opacity: 0; transform: translateY(26px); }
  .contact-cards li.ct-wait { opacity: 0; translate: calc(-40px * var(--dir)) 0; transform: perspective(800px); }
  .contact-side > .ct-wait, .form-card--live .ct-wait { transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  .form-card--live .field, .form-card--live .form-foot { transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); }
  /* a field that has just been flagged nudges sideways once */
  .form-card--live .field.is-invalid { animation: ct-nudge .45s ease 1; }
}
@keyframes ct-rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes ct-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ct-pop { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes ct-nudge { 0%, 100% { transform: none; } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) {
  .ct-orb, .ct-grid, .ct-chip, .ct-chip::before, .ct-chip::after, .contact-sec::before, .contact-sec::after, .contact-cards .ico, .form-card--live::before, .form-card--live .form-status .msg { animation: none; }
  .ct-pills a, .ct-pills .ico, .contact-cards li, .contact-cards .ico, .fc-progress::after, .form-card--live .form-foot .btn, .form-card--live .field input, .form-card--live .field select, .form-card--live .field textarea { transition: none; }
}