/* ================================================================
   Site-wide motion: the animated background, the closing card, the
   footer, the hero shield and button presses. Loaded last, including
   on the application form.
   ================================================================ */

/* ---------- Background: soft light drifting over one flat colour ---------- */
:root:not([data-mode="light"]), :root:not([data-mode="light"]) body { background: #08090b; }
:root:not([data-mode="light"]) body { background: transparent !important; }
html, :root { background-color: #08090b; }
.bg-fx { display: block; }
.bg-fx .blob { position: absolute; border-radius: 50%; will-change: transform; }
.bg-fx .bg-grid, .bg-fx .beam, .bg-fx .bg-spot, .bg-fx canvas:not(.fx-net) { display: none; }
.fx-net { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.bg-fx .b1 {
  width: 68vmax; height: 68vmax; left: -22vmax; top: -26vmax;
  background: radial-gradient(closest-side, rgba(226,231,240,.17), transparent 72%);
  animation: fxDriftA 15s ease-in-out infinite alternate;
}
.bg-fx .b2 {
  width: 62vmax; height: 62vmax; right: -24vmax; top: 18vh; left: auto;
  background: radial-gradient(closest-side, rgba(120,150,215,.15), transparent 72%);
  animation: fxDriftB 19s ease-in-out infinite alternate;
}
.bg-fx .b3 {
  width: 72vmax; height: 72vmax; left: 12vw; bottom: -46vmax;
  background: radial-gradient(closest-side, rgba(190,198,212,.12), transparent 72%);
  animation: fxDriftC 24s ease-in-out infinite alternate;
}
.bg-fx::before, .bg-fx::after { content: ''; position: absolute; inset: auto; opacity: 1; border-radius: 50%; will-change: transform; }
.bg-fx::before {
  width: 54vmax; height: 54vmax; left: 34vw; top: -30vmax;
  background: radial-gradient(closest-side, rgba(96,130,210,.13), transparent 72%);
  animation: fxDriftD 17s ease-in-out infinite alternate;
}
.bg-fx::after {
  width: 48vmax; height: 48vmax; left: -18vmax; bottom: -14vmax;
  background: radial-gradient(closest-side, rgba(150,170,215,.11), transparent 72%);
  animation: fxDriftE 23s ease-in-out infinite alternate;
}
@keyframes fxDriftA { to { transform: translate3d(38vw, 34vh, 0) scale(1.22); } }
@keyframes fxDriftB { to { transform: translate3d(-44vw, 34vh, 0) scale(.84); } }
@keyframes fxDriftC { to { transform: translate3d(30vw, -42vh, 0) scale(1.18); } }
@keyframes fxDriftD { to { transform: translate3d(-34vw, 62vh, 0) scale(1.2); } }
@keyframes fxDriftE { to { transform: translate3d(58vw, -46vh, 0) scale(.86); } }

/* the old layers made hard seams and bands against this */
.hero-dots, .hero-aurora, .hero-spot, .hero-glow, .hero-floor { display: none !important; }
.section::before { display: none; }
.apply-body { background: transparent !important; }

::selection { background: rgba(255,255,255,.22); color: inherit; }

/* ---------- Closing card ---------- */
.cta-section { padding-top: 60px; }
.cta-card { isolation: isolate; overflow: hidden; }
:root:not([data-mode="light"]) .cta-card { background: #0e0f12; border: 1px solid rgba(255,255,255,.1); }
.cta-card > :not(.cta-fx) { position: relative; z-index: 2; }
.cta-card h2 { max-width: 880px; font-size: clamp(38px, 5.6vw, 80px); line-height: 1; }
.cta-card .section-lead { margin-top: 22px; max-width: 560px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.5; }
:root:not([data-mode="light"]) .cta-card .section-lead { color: #d5d8de; }
.cta-card .cta-actions { margin-top: 36px; }
/* a thin light travels around the edge */
.cta-card::before {
  content: ''; display: block; position: absolute; inset: 0; z-index: 3; width: auto; aspect-ratio: auto;
  border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--lm-a, 0deg), transparent 0deg, transparent 280deg, rgba(255,255,255,.9) 330deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: lmA 8s linear infinite;
}
.cta-fx { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.cta-glow { position: absolute; bottom: -62%; width: 72%; aspect-ratio: 1; border-radius: 50%; will-change: transform; }
.cta-glow.g1 { left: -6%; background: radial-gradient(closest-side, rgba(226,231,240,.3), transparent 72%); animation: ctaA 9s ease-in-out infinite alternate; }
.cta-glow.g2 { right: -8%; background: radial-gradient(closest-side, rgba(125,155,225,.3), transparent 72%); animation: ctaB 12s ease-in-out infinite alternate; }
@keyframes ctaA { to { transform: translate3d(42%, -14%, 0) scale(1.15); } }
@keyframes ctaB { to { transform: translate3d(-44%, -8%, 0) scale(.9); } }
/* shield outlines ripple outward from behind the words */
.cta-ring { position: absolute; left: 50%; top: 50%; width: min(46%, 420px); margin-left: calc(min(46%, 420px) / -2); aspect-ratio: 1; margin-top: calc(min(23%, 210px) * -1); color: #fff; opacity: 0; will-change: transform, opacity; animation: ctaRing 9s cubic-bezier(.2,.6,.3,1) infinite; }
.cta-ring svg { display: block; width: 100%; height: 100%; overflow: visible; }
.cta-ring path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.cta-ring.r2 { animation-delay: 3s; }
.cta-ring.r3 { animation-delay: 6s; }
@keyframes ctaRing { 0% { transform: scale(.55); opacity: 0; } 18% { opacity: .22; } 100% { transform: scale(2.7); opacity: 0; } }
.cta-spot { position: absolute; inset: 0; opacity: 0; transition: opacity .4s; background: radial-gradient(380px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.1), transparent 70%); }
.cta-card:hover .cta-spot { opacity: 1; }
html:not(#_):not(#_)[data-mode="light"] .cta-glow.g1, html:not(#_):not(#_)[data-mode="light"] .cta-glow.g2 { background: radial-gradient(closest-side, rgba(255,255,255,.3), transparent 72%); }
html:not(#_):not(#_)[data-mode="light"] .cta-card { background: #1d4ed8; border: 0; }

/* ---------- Footer ---------- */
:root:not([data-mode="light"]) .footer { background: #0a0b0d; }
.footer { isolation: isolate; padding-top: 56px; }
.footer::before {
  content: ''; position: absolute; left: 50%; top: -260px; z-index: -1; width: min(1100px, 100%); height: 520px; margin-left: calc(min(1100px, 100%) / -2);
  background: radial-gradient(closest-side, rgba(226,231,240,.09), transparent 72%);
  animation: footerGlow 7s ease-in-out infinite alternate;
}
@keyframes footerGlow { from { opacity: .55; transform: scale(.94); } to { opacity: 1; transform: scale(1.04); } }
.footer-glow { background: linear-gradient(90deg, transparent, rgba(255,255,255,.28) 22%, rgba(255,255,255,.28) 78%, transparent); box-shadow: none; overflow: hidden; }
.footer-glow::after { content: ''; position: absolute; inset: 0; width: 24%; background: linear-gradient(90deg, transparent, #fff, transparent); animation: footerLine 6s ease-in-out infinite; }
@keyframes footerLine { from { transform: translateX(-110%); } to { transform: translateX(530%); } }
html:not(#_):not(#_)[data-mode="light"] .footer::before { background: radial-gradient(closest-side, rgba(37,99,235,.1), transparent 72%); }

/* ---------- Hero shield: the chips no longer cover the logo ---------- */
.hero-art::before { content: ''; position: absolute; inset: 14%; border-radius: 50%; background: radial-gradient(closest-side, rgba(226,231,240,.13), transparent 72%); animation: footerGlow 6s ease-in-out infinite alternate; }
.hero-mark { width: 25%; }
.contours .ring { opacity: .1; }
@keyframes ringWave { 0%, 100% { opacity: .08; } 18% { opacity: .55; } 40% { opacity: .12; } }
.chip-a { top: 7%; left: -3%; right: auto; bottom: auto; }
.chip-b { top: auto; bottom: 25%; right: -5%; left: auto; }
.chip-c { top: auto; bottom: 5%; left: 3%; right: auto; }
@keyframes levitate { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, calc(var(--lift) * -1), 0); } }
.float-chip::after { display: none; }
@media (max-width: 900px) { .chip-a { left: 0; } .chip-b { right: 0; } .chip-c { left: 0; } }

/* ---------- Buttons: a press and a ripple ---------- */
.btn, .lang-btn, .mode-btn, .menu-btn, .jump a, .ck-btn, .case-go, .mini-btn, .chip {
  transition: transform .45s cubic-bezier(.34, 1.56, .64, 1), background .25s, color .25s, border-color .25s, box-shadow .25s;
}
.btn:active, .lang-btn:active, .mode-btn:active, .menu-btn:active, .jump a:active, .ck-btn:active, .case-go:active, .mini-btn:active, .chip:active {
  transform: scale(.95); transition-duration: .08s;
}
.fx-host { position: relative; overflow: hidden; }
.fx-ripple { position: absolute; z-index: 2; border-radius: 50%; background: currentColor; pointer-events: none; }
.mode-btn svg { transition: transform .6s cubic-bezier(.34, 1.56, .64, 1), opacity .3s; }
.mode-btn:active svg { transform: rotate(90deg) scale(.8); }

/* ---------- Light mode ---------- */
html:not(#_):not(#_)[data-mode="light"], html:not(#_):not(#_)[data-mode="light"]:has(body.home) { background: #f5f6f8; }
html:not(#_):not(#_)[data-mode="light"] body, html:not(#_):not(#_)[data-mode="light"] body.home { background: transparent !important; }
html:not(#_):not(#_)[data-mode="light"] .bg-fx { display: block; }
html:not(#_):not(#_)[data-mode="light"] .bg-fx .b1 { background: radial-gradient(closest-side, rgba(37,99,235,.26), transparent 72%); }
html:not(#_):not(#_)[data-mode="light"] .bg-fx .b2 { background: radial-gradient(closest-side, rgba(14,165,233,.22), transparent 72%); }
html:not(#_):not(#_)[data-mode="light"] .bg-fx .b3 { background: radial-gradient(closest-side, rgba(99,130,241,.22), transparent 72%); }
html:not(#_):not(#_)[data-mode="light"] .bg-fx::before { background: radial-gradient(closest-side, rgba(56,189,248,.2), transparent 72%); }
html:not(#_):not(#_)[data-mode="light"] .bg-fx::after { background: radial-gradient(closest-side, rgba(79,70,229,.15), transparent 72%); }
html:not(#_):not(#_)[data-mode="light"] .hero-art::before { background: radial-gradient(closest-side, rgba(37,99,235,.12), transparent 72%); }
html[data-mode="light"] ::selection { background: rgba(37,99,235,.22); }


/* ---------- Page tops: a deep blue panel with soft colour glows, unlike the rest of the page ---------- */
html:not(#_):not(#_):not(#_) .light-top {
  position: relative; isolation: isolate; color: #e6ecf8; border: 0;
  border-radius: 0 0 44px 44px;
  -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(160deg, #0a1a45 0%, #0d2a78 48%, #0a1638 100%);
  box-shadow: 0 30px 70px -44px rgba(8,20,60,.85);
}
html:not(#_):not(#_):not(#_) .light-top::after { display: none; }
.hero-fx { position: absolute; inset: 0; z-index: -1; overflow: hidden; border-radius: inherit; pointer-events: none; }
.hero-light { position: absolute; width: 60vmax; aspect-ratio: 1; border-radius: 50%; will-change: transform; }
.hero-light.l1 { left: -20vmax; top: -30vmax; background: radial-gradient(closest-side, rgba(56,132,255,.5), transparent 72%); animation: heroA 13s ease-in-out infinite alternate; }
.hero-light.l2 { right: -18vmax; bottom: -34vmax; background: radial-gradient(closest-side, rgba(34,211,238,.26), transparent 72%); animation: heroB 17s ease-in-out infinite alternate; }
@keyframes heroA { to { transform: translate3d(30vw, 18vh, 0) scale(1.15); } }
@keyframes heroB { to { transform: translate3d(-34vw, -20vh, 0) scale(.9); } }
.hero-light.l3 { right: 8%; top: -24vmax; width: 46vmax; background: radial-gradient(closest-side, rgba(129,110,255,.34), transparent 72%); animation: heroC 19s ease-in-out infinite alternate; }
@keyframes heroC { to { transform: translate3d(-18vw, 26vh, 0) scale(1.2); } }
.hero-fx-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(200,220,255,.3) 1px, transparent 1.4px); background-size: 26px 26px;
  -webkit-mask-image: linear-gradient(115deg, transparent 8%, #000 55%, transparent 96%);
          mask-image: linear-gradient(115deg, transparent 8%, #000 55%, transparent 96%);
}
html:not([data-mode="light"]) .hero-light.l3 { background: radial-gradient(closest-side, rgba(200,206,218,.13), transparent 72%); }
html:not([data-mode="light"]) .hero-fx-dots { background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.4px); }

html:not(#_):not(#_):not(#_) .light-top h1 { color: #fff; }
html:not(#_):not(#_):not(#_) .light-top .h1-accent {
  background: linear-gradient(90deg, #93c5fd, #fff 40%, #7dd3fc 60%, #93c5fd); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
html:not(#_):not(#_):not(#_) .light-top :is(.hero-lead, .section-lead, p) { color: #d3dcee; }
html:not(#_):not(#_):not(#_) .light-top :is(.crumb, .crumb a) { color: #aebbd6; }
html:not(#_):not(#_):not(#_) .light-top .hero-pill { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); box-shadow: none; color: #dbe5f7; }
html:not(#_):not(#_):not(#_) .light-top .pill-tag { background: #fff; color: #0a1a45; }
html:not(#_):not(#_):not(#_) .light-top .btn-dark { background: #fff; color: #0a1a45; border: 0; }
html:not(#_):not(#_):not(#_) .light-top .btn-ghost { background: rgba(255,255,255,.06); color: #fff; border: 1px solid rgba(255,255,255,.34); }
html:not(#_):not(#_):not(#_)[data-mode="light"] .light-top .jump a { background: rgba(255,255,255,.09); border: 1px solid rgba(255,255,255,.18); color: #fff; }
html:not(#_):not(#_):not(#_)[data-mode="light"] .light-top .jump a:hover { background: rgba(255,255,255,.18); color: #fff; }
html:not(#_):not(#_):not(#_) .light-top .hero-art::before { background: radial-gradient(closest-side, rgba(120,180,255,.3), transparent 72%); }
/* dark mode: the same panel in graphite and silver, no blue */
html:not(#_):not(#_):not(#_):not([data-mode="light"]) .light-top {
  background: linear-gradient(160deg, #1b1d22 0%, #121317 50%, #0c0d10 100%);
  box-shadow: 0 30px 70px -44px rgba(0,0,0,.9), inset 0 -1px 0 rgba(255,255,255,.08);
}
html:not([data-mode="light"]) .hero-light.l1 { background: radial-gradient(closest-side, rgba(226,231,240,.2), transparent 72%); }
html:not([data-mode="light"]) .hero-light.l2 { background: radial-gradient(closest-side, rgba(170,176,188,.14), transparent 72%); }
html:not(#_):not(#_):not(#_):not([data-mode="light"]) .light-top .h1-accent { background-image: linear-gradient(90deg, #9aa1ad, #fff 40%, #c9ced6 60%, #9aa1ad); }
html:not(#_):not(#_):not(#_):not([data-mode="light"]) .light-top :is(.hero-lead, .section-lead, p) { color: #c9cdd5; }
html:not(#_):not(#_):not(#_):not([data-mode="light"]) .light-top :is(.crumb, .crumb a) { color: #a2a8b3; }
html:not(#_):not(#_):not(#_):not([data-mode="light"]) .light-top .hero-pill { color: #dcdfe5; }
html:not(#_):not(#_):not(#_):not([data-mode="light"]) .light-top :is(.pill-tag, .btn-dark) { color: #0b0c0f; }
html:not(#_):not(#_):not(#_):not([data-mode="light"]) .light-top .hero-art::before { background: radial-gradient(closest-side, rgba(226,231,240,.16), transparent 72%); }
@media (max-width: 700px) {
  html:not(#_):not(#_):not(#_) .light-top { border-radius: 0 0 28px 28px; }
}

/* Moving loops hold still while the page scrolls, so scrolling stays smooth. */
html.is-scrolling .hero-light, 
html.is-scrolling .cta-glow, html.is-scrolling .cta-ring, html.is-scrolling .cta-card::before,
html.is-scrolling .footer::before, html.is-scrolling .footer-glow::after, html.is-scrolling .hero-art::before { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .hero-light.l1, .hero-light.l2, .hero-light.l3, .cta-glow.g1, .cta-glow.g2, .bg-fx .blob, .bg-fx::before, .bg-fx::after, .cta-glow, .cta-ring, .cta-card::before, .footer::before, .footer-glow::after, .hero-art::before { animation: none; }
  .btn:active, .lang-btn:active, .mode-btn:active, .menu-btn:active, .jump a:active, .ck-btn:active, .case-go:active, .mini-btn:active, .chip:active { transform: none; }
}

/* the footer melts out of the page instead of starting at a hard edge */
:root:not([data-mode="light"]) .footer { background: linear-gradient(180deg, transparent 0, #0a0b0d 220px); }