/* ============================================================
   AlliedTech Solutions — Custom Styles (light corporate theme)
   ============================================================ */

/* ---- Scroll-reveal (IntersectionObserver-driven, no library) ----
   Progressive enhancement: the hidden start-state only applies when JS is
   running (html.js). With no JS, or if reveal.js fails, all content stays
   fully visible — never a blank page. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 80ms);
  will-change: opacity, transform;
}
.js [data-reveal="left"]  { transform: translateX(-28px); }
.js [data-reveal="right"] { transform: translateX(28px); }
.js [data-reveal="fade"]  { transform: none; }
.js [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---- Signature: hairline rule + mono coordinate caption ---- */
.hairline { height: 1px; background: #E2E8F0; }
.rule-label {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #94A3B8;
}

/* ---- Blueprint grid (used inside dark ink bands) ---- */
.grid-blueprint {
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 56px 56px;
}
.grid-blueprint-ink {
  background-image:
    linear-gradient(rgba(11, 31, 58, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 31, 58, 0.04) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ---- Navbar: solid white on every page so the navy logo + dark links stay
   legible over both light and dark (bg-ink) hero sections. ---- */
#navbar {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid #E2E8F0;
}
#navbar.navbar-scrolled { box-shadow: 0 4px 16px rgba(11, 31, 58, 0.07); }
/* ---- Navbar + logo sizing (appropriate, responsive) ---- */
#navbar nav { height: 64px; }
#navbar .nav-logo { height: 40px; }
@media (min-width: 1024px) {
  #navbar nav { height: 80px; }
  #navbar .nav-logo { height: 52px; }
}

/* ---- Mobile menu ---- */
.mobile-menu-overlay {
  position: fixed; inset: 0;
  background: rgba(11, 31, 58, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  pointer-events: none;
}
.mobile-menu-overlay.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Mobile drawer — slides in from the right */
.mobile-menu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 320px;
  max-width: 85vw;
  background: #ffffff;
  border-left: 1px solid #E2E8F0;
  z-index: 9999;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.mobile-menu-drawer.menu-drawer-open {
  transform: translateX(0);
}

/* Hamburger → X animation */
[data-menu-toggle].is-open .bar:nth-child(1) { transform: translateY(9px) rotate(45deg); }
[data-menu-toggle].is-open .bar:nth-child(2) { opacity: 0; }
[data-menu-toggle].is-open .bar:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---- Marquee mask (client logos) ---- */
.marquee-container {
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

/* ---- Stat pulse dot ---- */
.dot-pulse {
  width: 8px; height: 8px; border-radius: 9999px; background: #1B66D6;
  box-shadow: 0 0 0 0 rgba(27, 102, 214, 0.5); animation: dotPulse 1.8s ease-out infinite;
}
@keyframes dotPulse {
  0% { box-shadow: 0 0 0 0 rgba(27, 102, 214, 0.5); }
  70% { box-shadow: 0 0 0 10px rgba(27, 102, 214, 0); }
  100% { box-shadow: 0 0 0 0 rgba(27, 102, 214, 0); }
}

/* ---- Animated underline on inline links ---- */
.link-underline { position: relative; display: inline-flex; align-items: center; gap: 0.4rem; }
.link-underline::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: right center;
  transition: transform 0.35s ease;
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left center; }

/* ---- Breadcrumb ---- */
.breadcrumb a { color: #64748B; transition: color 0.2s ease; }
.breadcrumb a:hover { color: #1B66D6; }
.breadcrumb span { color: #0B1F3A; }
.breadcrumb .text-white\/30 { color: #CBD5E1 !important; }

/* ---- FAQ accordion (used on several pages) ---- */
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.3s ease; opacity: 0; }
.faq-item.open .faq-content { opacity: 1; }
.faq-icon { transition: transform 0.3s ease; }
.faq-item.open .faq-icon { transform: rotate(45deg); }

/* ---- Scrollbar ---- */
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: #F4F7FB; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 5px; border: 2px solid #F4F7FB; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ============================================================
   COOKIE CONSENT BANNER (Consent Mode v2) — light theme
   ============================================================ */
.consent-banner {
  position: fixed; bottom: 1.5rem; left: 1.5rem; right: 1.5rem; z-index: 60;
  max-width: 440px; margin-left: auto; padding: 1.5rem;
  border-radius: 1rem; background: #FFFFFF; border: 1px solid #E2E8F0;
  box-shadow: 0 20px 60px rgba(11, 31, 58, 0.18);
}
.consent-toggle { position: relative; display: inline-block; width: 38px; height: 22px; }
.consent-toggle input { opacity: 0; width: 0; height: 0; position: absolute; }
.consent-toggle-slider {
  position: absolute; inset: 0; background: #E2E8F0; border: 1px solid #CBD5E1;
  border-radius: 9999px; transition: background 0.25s ease, border-color 0.25s ease; cursor: pointer;
}
.consent-toggle-slider::before {
  content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  background: #fff; border-radius: 9999px; transition: transform 0.25s ease;
  box-shadow: 0 1px 3px rgba(11, 31, 58, 0.25);
}
.consent-toggle input:checked + .consent-toggle-slider { background: #1B66D6; border-color: transparent; }
.consent-toggle input:checked + .consent-toggle-slider::before { transform: translateX(16px); }
.consent-toggle input:disabled + .consent-toggle-slider { opacity: 0.6; cursor: not-allowed; background: #BFD3F2; }
.consent-toggle input:focus-visible + .consent-toggle-slider { outline: 2px solid #1B66D6; outline-offset: 2px; }

@media (max-width: 640px) {
  .consent-banner { left: 1rem; right: 1rem; bottom: 1rem; max-width: none; margin-left: 0; padding: 1.25rem; }
}

/* ---- Reduced motion: honor user preference ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { transition: none !important; opacity: 1 !important; transform: none !important; }
  .animate-marquee, .animate-float { animation: none !important; }
  [data-parallax] { transform: none !important; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   ADVISOR PORTAL THEME LAYER  (scoped to .portal-root)
   Loads AFTER tailwind.css, so these override the legacy light
   component aliases (.card-dark etc.) for the portal ONLY — the
   public site is untouched. Dark is the default; html[data-theme="light"]
   flips a small set of CSS variables + remaps the hardcoded
   white/charcoal utilities the portal pages already use.
   ============================================================ */
.portal-root {
  --p-bg:#0e1116; --p-bg-2:#141921; --p-surface:#171c24; --p-surface-2:rgba(255,255,255,.05);
  --p-text:#ffffff; --p-muted:rgba(255,255,255,.62); --p-faint:rgba(255,255,255,.40);
  --p-border:rgba(255,255,255,.10); --p-border-strong:rgba(255,255,255,.18);
  --p-accent:#3B82F6; --p-accent-2:#1B66D6; --p-accent-ink:#ffffff; --p-accent-soft:rgba(59,130,246,.16);
  background:var(--p-bg); color:var(--p-text);
}
html[data-theme="light"] .portal-root {
  --p-bg:#eef2f7; --p-bg-2:#e6ecf3; --p-surface:#ffffff; --p-surface-2:#f4f7fb;
  --p-text:#0B1F3A; --p-muted:#475569; --p-faint:#64748B;
  --p-border:#e2e8f0; --p-border-strong:#cbd5e1;
  --p-accent:#1B66D6; --p-accent-2:#0E4FA8; --p-accent-ink:#ffffff; --p-accent-soft:rgba(27,102,214,.10);
}
/* Brand blue everywhere in the portal: remap the legacy teal utilities to the accent (both themes). */
.portal-root .text-teal { color:var(--p-accent) !important; }
.portal-root .border-teal\/20, .portal-root .border-teal\/30, .portal-root .border-teal\/40 { border-color:var(--p-accent) !important; }
.portal-root .bg-teal\/5, .portal-root .bg-teal\/10, .portal-root .bg-teal\/15, .portal-root .bg-teal\/20 { background-color:var(--p-accent-soft) !important; }

/* Shared component classes — re-themed inside the portal */
.portal-root .card-dark {
  background:var(--p-surface) !important; border:1px solid var(--p-border) !important;
  color:var(--p-text); box-shadow:none; border-radius:1rem;
}
.portal-root .form-input {
  width:100%; background:var(--p-surface-2); border:1px solid var(--p-border);
  border-radius:.75rem; padding:.65rem .9rem; color:var(--p-text); outline:none;
}
.portal-root .form-input::placeholder { color:var(--p-faint); }
.portal-root .form-input:focus { border-color:var(--p-accent); }
/* fixes the white-on-white native dropdown (Phase 3 also adds an autocomplete) */
.portal-root select.form-input option,
.portal-root select.form-input optgroup { background:var(--p-surface); color:var(--p-text); }
.portal-root .btn-gradient {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:var(--p-accent); color:var(--p-accent-ink) !important; border:none;
  font-family:Poppins,system-ui,sans-serif; font-weight:700; border-radius:.7rem;
  transition:filter .2s ease, transform .2s ease;
}
.portal-root .btn-gradient:hover { filter:brightness(1.08); transform:translateY(-1px); }
.portal-root .btn-outline {
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  background:transparent; color:var(--p-text) !important; border:1px solid var(--p-border-strong);
  font-family:Poppins,system-ui,sans-serif; font-weight:600; border-radius:.7rem;
  transition:border-color .2s ease, color .2s ease;
}
.portal-root .btn-outline:hover { border-color:var(--p-accent); color:var(--p-accent) !important; }

/* Light-mode remap of the hardcoded utilities the portal pages already use. */
html[data-theme="light"] .portal-root .text-white { color:var(--p-text) !important; }
html[data-theme="light"] .portal-root .text-white\/90,
html[data-theme="light"] .portal-root .text-white\/85,
html[data-theme="light"] .portal-root .text-white\/80,
html[data-theme="light"] .portal-root .text-white\/70,
html[data-theme="light"] .portal-root .text-white\/60,
html[data-theme="light"] .portal-root .text-white\/50 { color:var(--p-muted) !important; }
html[data-theme="light"] .portal-root .text-white\/40,
html[data-theme="light"] .portal-root .text-white\/30 { color:var(--p-faint) !important; }
html[data-theme="light"] .portal-root .text-teal { color:var(--p-accent) !important; }
html[data-theme="light"] .portal-root .border-white\/5,
html[data-theme="light"] .portal-root .border-white\/10,
html[data-theme="light"] .portal-root .border-white\/15,
html[data-theme="light"] .portal-root .border-white\/20 { border-color:var(--p-border) !important; }
html[data-theme="light"] .portal-root .bg-white\/5,
html[data-theme="light"] .portal-root .bg-white\/10 { background-color:var(--p-surface-2) !important; }
html[data-theme="light"] .portal-root .bg-charcoal,
html[data-theme="light"] .portal-root .bg-charcoal-light,
html[data-theme="light"] .portal-root .bg-charcoal-dark { background-color:var(--p-surface) !important; }
/* Dark-first translucent blacks read as dull gray slabs on light — soften to a navy tint. */
html[data-theme="light"] .portal-root .bg-black\/10,
html[data-theme="light"] .portal-root .bg-black\/20,
html[data-theme="light"] .portal-root .bg-black\/30 { background-color:rgba(11,31,58,.06) !important; }
/* Tailwind teal-XXX text (dashboard accents, ref codes, section links) is too pale on white. */
html[data-theme="light"] .portal-root .text-teal-100,
html[data-theme="light"] .portal-root .text-teal-200,
html[data-theme="light"] .portal-root .text-teal-300,
html[data-theme="light"] .portal-root .text-teal-400,
html[data-theme="light"] .portal-root .text-teal-200\/60,
html[data-theme="light"] .portal-root .text-teal-400\/70 { color:var(--p-accent) !important; }
html[data-theme="light"] .portal-root .bg-teal-500\/10,
html[data-theme="light"] .portal-root .bg-teal-500\/20,
html[data-theme="light"] .portal-root .bg-teal-900\/10 { background-color:var(--p-accent-soft) !important; }
html[data-theme="light"] .portal-root .border-teal-500\/20,
html[data-theme="light"] .portal-root .border-teal-500\/40 { border-color:rgba(27,102,214,.35) !important; }
/* Status colors legible on white */
html[data-theme="light"] .portal-root .text-red-400,
html[data-theme="light"] .portal-root .text-red-400\/70 { color:#dc2626 !important; }
html[data-theme="light"] .portal-root .text-amber-200 { color:#92400e !important; }

/* Nav hover that works in BOTH themes (Tailwind dark: variants are dead here —
   darkMode:'class' but the portal theme is the html[data-theme] attribute). */
.portal-root .nav-hover:hover { background:rgba(255,255,255,.08); }
html[data-theme="light"] .portal-root .nav-hover:hover { background:rgba(11,31,58,.06); }

/* Portal header + theme toggle */
.portal-root .portal-header { background:var(--p-bg-2); border-bottom:1px solid var(--p-border); }
.portal-root .theme-toggle {
  display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px;
  border-radius:.6rem; border:1px solid var(--p-border-strong); color:var(--p-muted);
  background:transparent; cursor:pointer; transition:color .2s, border-color .2s;
}
.portal-root .theme-toggle:hover { color:var(--p-accent); border-color:var(--p-accent); }
html[data-theme="light"] .ic-sun { display:none; }
html[data-theme="dark"]  .ic-moon { display:none; }
/* Logo adapts to theme: original on light, rendered white on dark for contrast. */
html[data-theme="dark"] .portal-logo-img { filter: brightness(0) invert(1); }
html[data-theme="dark"] .portal-logo { filter: brightness(0) invert(1); }

/* Dark mode overrides for hardcoded light text classes used in recent redesigns */
html[data-theme="dark"] .portal-root h1,
html[data-theme="dark"] .portal-root h2,
html[data-theme="dark"] .portal-root h3,
html[data-theme="dark"] .portal-root h4,
html[data-theme="dark"] .portal-root h5,
html[data-theme="dark"] .portal-root h6,
html[data-theme="dark"] .portal-root .text-ink,
html[data-theme="dark"] .portal-root .text-slate-900,
html[data-theme="dark"] .portal-root .text-slate-800 { color: var(--p-text) !important; }
html[data-theme="dark"] .portal-root .text-slate-700,
html[data-theme="dark"] .portal-root .text-slate-600,
html[data-theme="dark"] .portal-root .text-slate-500 { color: var(--p-muted) !important; }
html[data-theme="dark"] .portal-root .text-slate-400 { color: var(--p-faint) !important; }
html[data-theme="dark"] .portal-root .bg-mist,
html[data-theme="dark"] .portal-root .bg-slate-50,
html[data-theme="dark"] .portal-root .bg-slate-100 { background-color: var(--p-surface-2) !important; }
html[data-theme="dark"] .portal-root .border-slate-100,
html[data-theme="dark"] .portal-root .border-slate-200 { border-color: var(--p-border) !important; }
html[data-theme="dark"] .portal-root .border-line { border-color: var(--p-border) !important; }

/* Cinematic backgrounds (no image needed): floating gradient orbs + mesh */
.portal-aura { position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none; }
.portal-aura::before, .portal-aura::after {
  content:''; position:absolute; width:46vmax; height:46vmax; border-radius:50%;
  filter:blur(80px); opacity:.20; will-change:transform;
}
.portal-aura::before { background:var(--p-accent); top:-18vmax; right:-12vmax; animation:auraFloat 22s ease-in-out infinite; }
.portal-aura::after  { background:#6366F1; bottom:-20vmax; left:-14vmax; animation:auraFloat 28s ease-in-out infinite reverse; }
html[data-theme="light"] .portal-aura::before { opacity:.14; }
html[data-theme="light"] .portal-aura::after  { opacity:.12; }
@keyframes auraFloat { 0%,100%{transform:translate(0,0) scale(1);} 50%{transform:translate(-4vmax,3vmax) scale(1.08);} }
@media (prefers-reduced-motion: reduce){ .portal-aura::before,.portal-aura::after{animation:none;} }

/* ============================================================
   UNIVERSAL SHARE POPOUT (works on public + portal pages)
   ============================================================ */
.atshare-overlay{position:fixed;inset:0;background:rgba(8,12,20,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:1000;display:none;align-items:center;justify-content:center;padding:1rem}
.atshare-overlay.open{display:flex}
.atshare-modal{width:380px;max-width:100%;background:#fff;color:#0B1F3A;border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.35);animation:atshareUp .22s ease}
@keyframes atshareUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.atshare-head{padding:18px 18px 6px;text-align:center}
.atshare-head h3{font-family:Archivo,system-ui,sans-serif;font-weight:800;font-size:1.15rem;margin:0}
.atshare-head p{color:#64748B;font-size:.8rem;margin:.25rem 0 0}
.atshare-qr{display:flex;flex-direction:column;align-items:center;gap:.4rem;padding:10px 18px}
.atshare-qr img{width:150px;height:150px;border-radius:10px;border:3px solid #fff;box-shadow:0 2px 10px rgba(11,31,58,.1)}
.atshare-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:6px 18px 14px}
.atshare-opt{display:flex;flex-direction:column;align-items:center;gap:5px;padding:11px 6px;border-radius:12px;background:#F4F7FB;border:1px solid #E2E8F0;text-decoration:none;color:#475569;font-size:.7rem;font-weight:600;cursor:pointer}
.atshare-opt:hover{border-color:#1B66D6;color:#1B66D6}
.atshare-opt svg{width:22px;height:22px}
.atshare-foot{display:flex;gap:8px;padding:0 18px 18px}
.atshare-foot button{flex:1;padding:11px;border-radius:12px;border:none;font-weight:700;font-size:.85rem;cursor:pointer}
.atshare-copy{background:#0B1F3A;color:#fff}
.atshare-close{background:#F4F7FB;color:#475569;border:1px solid #E2E8F0 !important}
.atshare-toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:#00A37E;color:#fff;padding:10px 22px;border-radius:9999px;font-weight:700;font-size:.85rem;z-index:1001;opacity:0;transition:opacity .2s;pointer-events:none}
.atshare-toast.show{opacity:1}

/* ============================================================
   LIGHT FORM PALETTE for public pages that were built dark-first
   (financing apply/status). The site rebrand remapped .card-dark to
   a white card, which left white text on white — this re-themes those
   pages to the professional light/blue palette. Scope: .fin-light.
   ============================================================ */
.fin-light{background:#F4F7FB !important}
.fin-light .form-input{width:100%;background:#fff;border:1px solid #CBD5E1;border-radius:.75rem;padding:.75rem 1rem;color:#0B1F3A;outline:none;transition:border-color .2s,box-shadow .2s}
.fin-light .form-input::placeholder{color:#94A3B8}
.fin-light .form-input:focus{border-color:#1B66D6;box-shadow:0 0 0 1px #1B66D6}
.fin-light .card-dark{background:#fff !important;border:1px solid #E2E8F0 !important;box-shadow:0 1px 2px rgba(11,31,58,.04),0 8px 24px rgba(11,31,58,.06)}
.fin-light .text-white{color:#0B1F3A !important}
.fin-light .text-white\/80,.fin-light .text-white\/70,.fin-light .text-white\/60,.fin-light .text-white\/55,.fin-light .text-white\/50{color:#475569 !important}
.fin-light .text-white\/40,.fin-light .text-white\/30{color:#94A3B8 !important}
.fin-light .border-white\/10,.fin-light .border-white\/15,.fin-light .border-white\/20{border-color:#E2E8F0 !important}
.fin-light .bg-white\/5,.fin-light .bg-white\/10{background-color:#F4F7FB !important}

/* ===================================================================
   FUTURISTIC HOME FX — lively + futuristic (scoped, reduced-motion safe)
   =================================================================== */
.fx-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;}
.fx-aurora::before,.fx-aurora::after{content:"";position:absolute;border-radius:50%;filter:blur(70px);opacity:.45;mix-blend-mode:screen;}
.fx-aurora::before{width:46vw;height:46vw;left:-10vw;top:-12vw;background:radial-gradient(circle,#1B66D6,transparent 60%);animation:fxDrift1 18s ease-in-out infinite;}
.fx-aurora::after{width:40vw;height:40vw;right:-8vw;bottom:-14vw;background:radial-gradient(circle,#E0A23D,transparent 60%);animation:fxDrift2 22s ease-in-out infinite;}
@keyframes fxDrift1{0%,100%{transform:translate(0,0)}50%{transform:translate(8vw,6vw)}}
@keyframes fxDrift2{0%,100%{transform:translate(0,0)}50%{transform:translate(-7vw,-5vw)}}

.fx-glow-border{position:relative;}
.fx-glow-border::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;z-index:5;
  background:linear-gradient(90deg,transparent,#1B66D6,#E0A23D,transparent);background-size:200% 100%;
  animation:fxSlide 6s linear infinite;opacity:.85;}
@keyframes fxSlide{to{background-position:200% 0}}

.glow-text{background:linear-gradient(90deg,#E0A23D,#facc6b,#7db4ff,#E0A23D);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:fxShimmer 6s linear infinite;}
/* data-split (premium.js) rewraps words in inline-block spans; background-clip:text
   doesn't paint through them while color:transparent still inherits → invisible word.
   Re-apply the gradient on the innermost span so split glow-words stay visible. */
.glow-text .split-word>span{background:linear-gradient(90deg,#E0A23D,#facc6b,#7db4ff,#E0A23D);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;animation:fxShimmer 6s linear infinite;}
@keyframes fxShimmer{to{background-position:300% 0}}

.glass{background:rgba(255,255,255,.06);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.12);}

.fx-glow-card{transition:transform .45s cubic-bezier(.22,.61,.36,1),box-shadow .45s ease;}
.fx-glow-card:hover{transform:translateY(-6px);box-shadow:0 18px 50px -12px rgba(27,102,214,.5),0 0 0 1px rgba(224,162,61,.4);}

.fx-float{animation:fxFloat 7s ease-in-out infinite;}
@keyframes fxFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

.fx-pulse{animation:fxPulse 2.8s ease-in-out infinite;}
@keyframes fxPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,162,61,0)}50%{box-shadow:0 0 26px 2px rgba(224,162,61,.45)}}

.fx-bob{animation:fxBob 2s ease-in-out infinite;}
@keyframes fxBob{0%,100%{transform:translateY(0);opacity:.5}50%{transform:translateY(5px);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .fx-aurora::before,.fx-aurora::after,.fx-glow-border::before,.glow-text,.fx-float,.fx-pulse,.fx-bob{animation:none!important;}
  .glow-text{color:#E0A23D;}
}