/* ==========================================================================
   CONTACT — visual layer. contact.html only, loaded after the page styles.
   Same content and form; this only restyles it and adds the entrance and
   focus motion. Colours are the site's blue/violet plus the four mark colours.
   ========================================================================== */
.contact-section { --ct-ease: cubic-bezier(.22, 1, .36, 1); --ct-blue: #2f6bed; --ct-violet: #6a31ee;
  position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(48px, 7vh, 96px) clamp(64px, 9vh, 120px) !important; }
/* Backdrop: faint dot grid fading out, two soft brand glows. */
.contact-section::before { content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.5px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(70% 70% at 25% 35%, #000, transparent 75%); mask-image: radial-gradient(70% 70% at 25% 35%, #000, transparent 75%); }
.contact-section::after { content: ''; position: absolute; z-index: -1; pointer-events: none; width: 60vw; height: 60vw; right: -18vw; top: -22vw; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(106 49 238 / 12%), rgb(47 107 237 / 7%) 50%, transparent 75%); animation: ct-drift 18s ease-in-out infinite alternate; }
@keyframes ct-drift { to { transform: translate3d(-3vw, 2vw, 0) scale(1.06); } }
.contact-grid { align-items: start; gap: clamp(32px, 4.5vw, 80px) !important; }

/* --- Intro ---------------------------------------------------------------- */
.contact-kicker { display: inline-flex !important; align-items: center; gap: 14px; color: var(--ct-blue) !important; letter-spacing: .2em !important; }
.contact-kicker::after { content: ''; width: 44px !important; height: 2px !important; border-radius: 2px; background: linear-gradient(90deg, #007cfe 0 25%, #5cb615 25% 50%, #ff8a00 50% 75%, #6a31ee 75%) !important; }
.contact-intro h1 { font-size: clamp(40px, 4.2vw, 68px) !important; line-height: 1.02 !important; letter-spacing: -.045em !important; }
.contact-intro h1 span { display: block; background: linear-gradient(90deg, var(--ct-blue) 0%, #4d5ff0 55%, var(--ct-violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; padding-bottom: .06em; }
.contact-intro .lede { max-width: 52ch; color: var(--ink-2); }

/* --- Ways to reach us -------------------------------------------------------- */
.contact-ways { gap: 12px !important; }
.contact-way { position: relative; overflow: hidden; border-radius: 16px !important; border: 1px solid var(--line) !important; background: var(--surface) !important;
  box-shadow: 0 1px 2px rgb(16 24 40 / 4%) !important; transition: transform 320ms var(--ct-ease), box-shadow 320ms ease, border-color 260ms ease !important; }
/* Accent bar that grows from the left edge on hover. */
.contact-way::before { content: ''; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; border-radius: 0 3px 3px 0; background: var(--ct-accent, var(--ct-blue)); transform: scaleY(0); transition: transform 320ms var(--ct-ease); }
.contact-way:hover, .contact-way:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--ct-accent, var(--ct-blue)) 35%, var(--line)) !important; box-shadow: 0 16px 34px -22px rgb(30 50 110 / 45%) !important; }
.contact-way:hover::before, .contact-way:focus-visible::before { transform: scaleY(1); }
.contact-way-icon { border-radius: 13px !important; transition: transform 360ms var(--ct-ease), background-color 260ms ease, color 260ms ease; }
.contact-way:hover .contact-way-icon { transform: rotate(-6deg) scale(1.06); }
.contact-expert .contact-way { --ct-accent: #6a31ee; }
a.contact-way:has(.people) { --ct-accent: #3f9a10; }
a.contact-way:has(.customer) { --ct-accent: #6a31ee; }
a.contact-way:has(.security) { --ct-accent: #ff8a00; }
.contact-way-arrow { transition: transform 320ms var(--ct-ease) !important; }
.contact-way:hover .contact-way-arrow { transform: translateX(4px) !important; }

/* --- Form card ---------------------------------------------------------------- */
.contact-form-card { position: relative; overflow: hidden; border-radius: 24px !important; border: 1px solid var(--line) !important;
  background: color-mix(in srgb, var(--surface) 92%, transparent) !important; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 2px rgb(16 24 40 / 5%), 0 40px 80px -46px rgb(30 50 110 / 45%) !important; padding: clamp(26px, 2.6vw, 40px) !important; }
/* Four-colour hairline across the top, drawn in on load. */
.contact-form-card::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px; transform-origin: left;
  background: linear-gradient(90deg, #007cfe 0 25%, #5cb615 25% 50%, #ff8a00 50% 75%, #6a31ee 75%); animation: ct-rule 1200ms var(--ct-ease) 500ms backwards; }
@keyframes ct-rule { from { transform: scaleX(0); } }
.contact-form-card .card-title { font-size: clamp(24px, 1.9vw, 30px) !important; letter-spacing: -.03em; }

/* Fields */
.contact-form-card .f-field label { transition: color 200ms ease; }
.contact-form-card .f-field:focus-within > label { color: var(--ct-blue); }
.contact-form-card .f-field :is(input, select, textarea), .contact-form-card .f-phone { border-radius: 12px !important; border: 1px solid var(--line-2) !important;
  background-color: color-mix(in srgb, var(--surface-2) 45%, var(--surface)) !important;
  transition: border-color 200ms ease, box-shadow 260ms var(--ct-ease), background-color 200ms ease !important; }
.contact-form-card .f-phone :is(input, select) { border: 0 !important; background-color: transparent !important; box-shadow: none !important; }
.contact-form-card .f-field :is(input, select, textarea):hover, .contact-form-card .f-phone:hover { border-color: color-mix(in srgb, var(--ct-blue) 40%, var(--line-2)) !important; }
.contact-form-card .f-field :is(input, select, textarea):focus, .contact-form-card .f-phone:focus-within { outline: none !important; border-color: var(--ct-blue) !important;
  background-color: var(--surface) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--ct-blue) 14%, transparent) !important; }
.contact-form-card .f-phone :is(input, select):focus { box-shadow: none !important; }
.contact-form-card .f-field :is(input, select, textarea)[aria-invalid='true'] { border-color: var(--bad) !important; box-shadow: 0 0 0 4px color-mix(in srgb, var(--bad) 12%, transparent) !important; animation: ct-shake 320ms ease; }
@keyframes ct-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

/* Submit — Quorel green, with a "mail sending" sequence driven by contact-send.js.
   Idle: a slow light sweep; the paper plane sits beside the label.
   Hover: lift, deeper green, the plane tilts and hops forward.
   Click (valid form): the label folds into an envelope → the envelope turns
   into a paper plane that takes off with a dashed trail and loops while the
   request runs → on success a tick and "Sent" land; on error a short shake. */
.contact-submit { position: relative; overflow: hidden; isolation: isolate; min-width: 210px; justify-content: center; gap: 12px; border: 0 !important; border-radius: 13px !important; color: #fff !important;
  background: linear-gradient(135deg, #4cc22a 0%, #1fa15a 55%, #0f8a6a 100%) !important; background-size: 170% 100% !important; background-position: 0% 50% !important;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 14px 30px -14px rgb(31 161 90 / 75%) !important;
  transition: background-position 600ms ease, transform 240ms var(--ct-ease), box-shadow 300ms ease !important; }
.contact-submit::before { content: ''; position: absolute; z-index: 0; inset: 0; background: linear-gradient(105deg, transparent 35%, rgb(255 255 255 / 38%) 50%, transparent 65%); transform: translateX(-130%); animation: ct-sheen 5s ease-in-out 2.5s infinite; }
@keyframes ct-sheen { 0% { transform: translateX(-130%); } 22%, 100% { transform: translateX(130%); } }
.contact-submit > span { position: relative; z-index: 1; }
.contact-submit:hover { background-position: 100% 50% !important; transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%), 0 20px 36px -14px rgb(15 138 106 / 80%) !important; }
.contact-submit:active { transform: scale(.97); transition-duration: 90ms !important; }
.contact-submit:disabled { cursor: progress; opacity: 1 !important; }

.cs-label { transition: transform 380ms var(--ct-ease), opacity 260ms ease; }
.cs-plane { display: inline-grid; place-items: center; width: 22px; height: 22px; transition: transform 380ms var(--ct-ease); }
.cs-plane svg { width: 20px; height: 20px; }
.contact-submit:hover .cs-plane { transform: translate(3px, -2px) rotate(-10deg); }
.cs-trail { position: absolute; right: 70%; top: 60%; width: 0; height: 2px; border-radius: 2px; background: repeating-linear-gradient(90deg, rgb(255 255 255 / 85%) 0 6px, transparent 6px 11px); opacity: 0; }
.cs-env, .cs-sent { position: absolute !important; inset: 0; display: flex; align-items: center; justify-content: center; gap: 8px; pointer-events: none; opacity: 0; }
.cs-env svg { width: 26px; height: 26px; }
.cs-sent { font-weight: 700; transform: translateY(70%); }
.cs-sent svg { width: 20px; height: 20px; stroke-dasharray: 24; stroke-dashoffset: 24; }

/* 1. Folding into an envelope */
.contact-submit.is-folding .cs-label, .contact-submit.is-sending .cs-label { transform: translateY(-140%); opacity: 0; }
.contact-submit.is-folding .cs-plane { transform: scale(0); }
.contact-submit.is-folding .cs-env { animation: cs-env 420ms var(--ct-ease) forwards; }
.contact-submit.is-folding .cs-flap { animation: cs-flap 380ms ease 80ms forwards; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes cs-env { 0% { opacity: 0; transform: scale(.4) translateY(10px); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: scale(1); } }
@keyframes cs-flap { to { transform: scaleY(-1); } }

/* 2. Take-off and loop while sending */
.contact-submit.is-sending .cs-plane { position: absolute !important; left: 50%; top: 50%; margin: -11px 0 0 -11px; animation: cs-fly 1.1s cubic-bezier(.5, 0, .3, 1) infinite; }
.contact-submit.is-sending .cs-trail { animation: cs-trail 1.1s ease-out infinite; }
@keyframes cs-fly { 0% { transform: translate(-6px, 6px) rotate(0) scale(1); opacity: 1; } 55% { transform: translate(70px, -26px) rotate(-14deg) scale(.8); opacity: 1; } 56% { opacity: 0; } 57% { transform: translate(-90px, 20px) scale(.6); opacity: 0; } 70% { opacity: 1; } 100% { transform: translate(-6px, 6px) scale(1); opacity: 1; } }
@keyframes cs-trail { 0% { width: 0; opacity: 0; } 30% { opacity: 1; } 55% { width: 70px; opacity: .9; } 70%, 100% { width: 70px; opacity: 0; } }

/* 3. Sent */
.contact-submit.is-sent { background-position: 100% 50% !important; }
.contact-submit.is-sent .cs-label { transform: translateY(-140%); opacity: 0; transition: none; }
.contact-submit.is-sent .cs-plane { transform: translate(120px, -40px) rotate(-20deg); opacity: 0; transition: transform 500ms ease-in, opacity 300ms ease; }
.contact-submit.is-sent .cs-sent { animation: cs-sent 520ms cubic-bezier(.34, 1.56, .64, 1) forwards; }
.contact-submit.is-sent .cs-sent svg { animation: cs-tick 420ms ease 220ms forwards; }
.contact-submit.is-sent::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgb(76 194 42 / 55%); animation: cs-ring 900ms ease-out forwards; }
@keyframes cs-sent { to { opacity: 1; transform: none; } }
@keyframes cs-tick { to { stroke-dashoffset: 0; } }
@keyframes cs-ring { to { box-shadow: 0 0 0 14px rgb(76 194 42 / 0%); } }

/* 4. Failed */
.contact-submit.is-failed { animation: ct-shake 360ms ease; }
.contact-submit:disabled { filter: none; }


/* --- Entrance -------------------------------------------------------------------- */
.contact-intro > *, .contact-ways > *, .contact-form-card, .contact-form-card .f-field, .contact-form-card .f-actions { animation: ct-up 760ms var(--ct-ease) backwards; }
.contact-intro > :nth-child(2) { animation-delay: 80ms; } .contact-intro > :nth-child(3) { animation-delay: 160ms; } .contact-intro > :nth-child(4) { animation-delay: 220ms; }
.contact-ways > :nth-child(1) { animation-delay: 300ms; } .contact-ways > :nth-child(2) { animation-delay: 370ms; } .contact-ways > :nth-child(3) { animation-delay: 440ms; } .contact-ways > :nth-child(4) { animation-delay: 510ms; }
.contact-form-card { animation-name: ct-card; animation-delay: 160ms; animation-duration: 900ms; }
.contact-form-card .f-field:nth-child(1) { animation-delay: 380ms; } .contact-form-card .f-field:nth-child(2) { animation-delay: 430ms; }
.contact-form-card .f-field:nth-child(3) { animation-delay: 480ms; } .contact-form-card .f-field:nth-child(4) { animation-delay: 530ms; }
.contact-form-card .f-field:nth-child(5) { animation-delay: 580ms; } .contact-form-card .f-field:nth-child(6) { animation-delay: 630ms; }
.contact-form-card .f-field:nth-child(7) { animation-delay: 680ms; } .contact-form-card .f-actions { animation-delay: 740ms; }
@keyframes ct-up { from { opacity: 0; transform: translateY(18px); } }
@keyframes ct-card { from { opacity: 0; transform: translateY(30px) scale(.98); } }

@media (prefers-reduced-motion: reduce) {
  .contact-section *, .contact-section *::after, .contact-section::after, .contact-form-card::before, .contact-submit::before { animation: none !important; }
  .contact-way:hover, .contact-submit:hover, .contact-way:hover .contact-way-icon { transform: none !important; }
}