/* ==========================================================================
   AURORA — day-to-night design layer for amann-nordin.com
   Loads AFTER the page's own <style>. Keeps the brand colours
   (blue #304FFE, navy #0a1440, white) and adds: glass cards, 3D depth,
   a fixed WebGL network canvas, and a light -> dark switch on scroll.
   If this file or aurora.js fails, the page still works as before.
   ========================================================================== */

/* ---- colour tokens that can animate between day and night ---- */
@property --white      { syntax: '<color>'; inherits: true; initial-value: #ffffff; }
@property --light-gray { syntax: '<color>'; inherits: true; initial-value: #f9fafb; }
@property --dark       { syntax: '<color>'; inherits: true; initial-value: #0a1440; }
@property --gray       { syntax: '<color>'; inherits: true; initial-value: #6b7280; }
@property --border     { syntax: '<color>'; inherits: true; initial-value: #e5e7eb; }
@property --blue-light { syntax: '<color>'; inherits: true; initial-value: #E8EEFF; }
@property --accent-text{ syntax: '<color>'; inherits: true; initial-value: #304FFE; }

:root {
  --white: #f7f9ff;
  --light-gray: #eef2ff;
  --dark: #0a1440;
  --gray: #5b6a99;
  --border: #dbe3ff;
  --blue-light: #E8EEFF;
  --accent-text: #304FFE;
  --glass: color-mix(in srgb, var(--white) 72%, transparent);
  --glass-line: color-mix(in srgb, var(--accent-text) 16%, transparent);
  transition: --white .9s ease, --light-gray .9s ease, --dark .9s ease, --gray .9s ease,
              --border .9s ease, --blue-light .9s ease, --accent-text .9s ease;
}
html[data-mode="night"] {
  --white: #060c28;
  --light-gray: #0a1440;
  --dark: #e8eeff;
  --gray: #9db0f0;
  --border: rgba(116, 143, 255, .22);
  --blue-light: rgba(48, 79, 254, .22);
  --accent-text: #8fa6ff;
}

body { background: var(--white); color: var(--dark); transition: background-color .9s ease; overflow-x: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---- fixed WebGL canvas that sits behind everything ---- */
#aurora-gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
#aurora-bar { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 1000;
  transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, #304FFE, #748FFF); pointer-events: none; }
#aurora-glow { position: fixed; left: 0; top: 0; width: 460px; height: 460px; margin: -230px 0 0 -230px; z-index: 0;
  pointer-events: none; border-radius: 50%; opacity: 0; transition: opacity .4s;
  background: radial-gradient(circle, rgba(48,79,254,.16), transparent 62%); will-change: transform; }
html[data-mode="night"] #aurora-glow { background: radial-gradient(circle, rgba(116,143,255,.2), transparent 62%); }

/* sections become see-through so the canvas shows behind the content */
.hero, .stats, .about, .services, .why, .insights, .reviews { position: relative; z-index: 1; }
nav { position: fixed; z-index: 999; }
.hero, .stats, .about, .services, .why, .insights, .reviews { background: transparent !important; }
.about, .why, .reviews { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--accent-text) 5%, transparent) 50%, transparent) !important; }
.partners, .cta-banner, footer { position: relative; z-index: 1; }
footer { background: #04081f !important; }

/* ---- navigation: glass + shrink on scroll ---- */
nav { background: var(--glass) !important; backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
  border-bottom: 1px solid var(--glass-line) !important; transition: height .35s ease, box-shadow .35s ease, background-color .9s ease; }
nav.is-scrolled { height: 60px; box-shadow: 0 8px 30px rgba(10, 20, 64, .12); }
html[data-mode="night"] nav .nav-logo > span { color: #8fa6ff !important; }
.dropdown { background: var(--white) !important; border-color: var(--border) !important; }
.dropdown a, .nav-item > a, .nav-about { color: var(--dark) !important; }
.dropdown-text span { color: var(--gray) !important; }
.mobile-menu { background: var(--white) !important; }
.mobile-menu-item > a, .mobile-submenu a { color: var(--dark) !important; border-color: var(--border) !important; }
.nav-login { color: var(--accent-text) !important; border-color: var(--accent-text) !important; }
.nav-mobile-btn span { background: var(--dark) !important; }

/* ---- hero ---- */
.hero { margin-top: 0 !important; min-height: 100vh; padding-top: 160px; }
.hero::before { display: none; }
.hero-aurora { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hero-aurora i { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5; will-change: transform; }
.hero-aurora i:nth-child(1) { width: 520px; height: 520px; right: -120px; top: -120px; background: #304FFE; opacity: .22; animation: aur1 16s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(2) { width: 420px; height: 420px; left: -140px; bottom: -80px; background: #748FFF; opacity: .22; animation: aur2 19s ease-in-out infinite alternate; }
.hero-aurora i:nth-child(3) { width: 300px; height: 300px; left: 38%; top: 8%; background: #8ea2ff; opacity: .16; animation: aur3 22s ease-in-out infinite alternate; }
@keyframes aur1 { to { transform: translate(-90px, 70px) scale(1.12); } }
@keyframes aur2 { to { transform: translate(110px, -60px) scale(1.1); } }
@keyframes aur3 { to { transform: translate(-70px, 90px) scale(.9); } }
.hero h1 { letter-spacing: -1.2px; }
.hero h1 em { background: linear-gradient(100deg, #304FFE 10%, #748FFF 55%, #304FFE 90%); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: shine 6s linear infinite; }
html[data-mode="night"] .hero h1 em { background-image: linear-gradient(100deg, #8fa6ff 10%, #c4d0ff 55%, #8fa6ff 90%); }
@keyframes shine { to { background-position: -200% 0; } }
.hero h1 .w { display: inline-block; will-change: transform; }
.hero-badge { background: var(--glass) !important; border: 1px solid var(--glass-line); color: var(--accent-text) !important; backdrop-filter: blur(8px); }
.hero-badge span { box-shadow: 0 0 0 0 rgba(48,79,254,.6); animation: ping 2s infinite; }
@keyframes ping { 70% { box-shadow: 0 0 0 9px rgba(48,79,254,0); } 100% { box-shadow: 0 0 0 0 rgba(48,79,254,0); } }
.hero-img { perspective: 1100px; min-height: 380px; }
.hero-img > img { transition: opacity .8s; }
.gl-on .hero-img > img { opacity: 0; }
.hero-img-badge, .hero-img-badge2 { background: var(--glass) !important; border: 1px solid var(--glass-line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hero-img-badge-text strong, .hero-img-badge2 strong { color: var(--dark) !important; }
.hero-img-badge-text span { color: var(--gray) !important; }
.hero-img-badge-icon { background: var(--blue-light) !important; }
.hero-trust-text, .hero p { color: var(--gray) !important; }
.hero-trust-avatars img { border-color: var(--white) !important; }
.hero-scroll { position: absolute; left: 50%; bottom: 22px; width: 24px; height: 38px; margin-left: -12px; border: 2px solid var(--glass-line);
  border-radius: 14px; opacity: .8; }
.hero-scroll::after { content: ''; position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px;
  background: var(--accent-text); animation: wheel 1.8s infinite; }
@keyframes wheel { 0% { opacity: 0; transform: translateY(0); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(14px); } }

/* ---- region ticker ---- */
.region-ticker { position: relative; z-index: 1; overflow: hidden; border-block: 1px solid var(--glass-line); background: var(--glass);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 15px 0; }
.region-track { display: flex; gap: 3.2rem; width: max-content; animation: tick 38s linear infinite; }
.region-track span { font-size: 13px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; color: var(--gray); white-space: nowrap; }
.region-track span::before { content: '◆'; color: var(--accent-text); margin-right: 3.2rem; font-size: 9px; vertical-align: 2px; }
@keyframes tick { to { transform: translateX(-50%); } }

/* ---- glass 3D cards ---- */
.stat-card, .service-card, .why-card, .insight-card, .review-card, .partner-stat {
  background: var(--glass) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-line) !important; transform-style: preserve-3d; will-change: transform;
  transition: border-color .3s, box-shadow .4s; }
.stat-card:hover, .service-card:hover, .why-card:hover, .insight-card:hover, .review-card:hover {
  border-color: var(--accent-text) !important; box-shadow: 0 30px 70px rgba(48, 79, 254, .22) !important; }
.tilt-glare { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.22), transparent 55%); mix-blend-mode: soft-light; }
.is-tilting .tilt-glare { opacity: 1; }
.service-card, .why-card, .stat-card, .insight-card, .review-card { position: relative; }
.service-card h3, .why-card h4, .insight-body h4, .stat-label, .review-author-info strong { color: var(--dark) !important; }
.service-feature { color: var(--dark) !important; }
.service-icon, .why-icon, .credential-icon { background: var(--blue-light) !important; }
.service-icon, .why-icon { animation: floaty 6s ease-in-out infinite; }
.why-card:nth-child(2) .why-icon, .service-card:nth-child(2) .service-icon { animation-delay: -1.5s; }
.why-card:nth-child(3) .why-icon, .service-card:nth-child(3) .service-icon { animation-delay: -3s; }
.why-card:nth-child(4) .why-icon { animation-delay: -4.5s; }
@keyframes floaty { 50% { transform: translateY(-7px) rotate(3deg); } }
.stat-number, .service-link, .insight-read, .section-tag, .about-content h2 em { color: var(--accent-text) !important; }
.section-tag, .insight-tag { background: var(--blue-light) !important; color: var(--accent-text) !important; }
.partners .section-tag { background: rgba(255,255,255,.15) !important; color: #fff !important; }
.section-title, .about-content h2, .credential-text strong { color: var(--dark) !important; }
.section-sub, .about-content p, .stat-desc, .service-card p, .why-card p, .insight-body p, .review-text, .credential-text span,
.insight-meta, .review-author-info span { color: var(--gray) !important; }
.review-author img { border-color: var(--blue-light) !important; }
.stat-number { background: linear-gradient(120deg, var(--accent-text), #748FFF); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* section heading underline draws in */
.section-title { position: relative; }
.section-header .section-title::after { content: ''; display: block; width: 74px; height: 4px; margin: 16px auto 0; border-radius: 4px;
  background: linear-gradient(90deg, #304FFE, #748FFF); transform: scaleX(var(--ul, 1)); transform-origin: 50% 50%; }

/* partners band keeps the solid brand blue, now with depth */
.partners { background: linear-gradient(135deg, #304FFE 0%, #1a3ae0 60%, #12238f 100%) !important; overflow: hidden; }
.partners::before { content: ''; position: absolute; inset: -30% -10% auto auto; width: 560px; height: 560px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.2), transparent 65%); pointer-events: none; }
.partner-stat { background: rgba(255,255,255,.1) !important; border-color: rgba(255,255,255,.2) !important; }
.partner-stat strong, .partner-stat span { color: #fff !important; }
.partners-img { perspective: 1200px; }
.partners-img img { transform-style: preserve-3d; }
.cta-banner { background: linear-gradient(135deg, #050a24 0%, #0a1440 55%, #1a2f8f 100%) !important; overflow: hidden; }
.cta-banner h2, .cta-banner p { color: #fff !important; }

/* ---- buttons: magnetic + shine ---- */
.btn-primary, .nav-cta, .btn-white { position: relative; overflow: hidden; }
.btn-primary::after, .nav-cta::after { content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.38), transparent); transform: skewX(-20deg); transition: left .7s; }
.btn-primary:hover::after, .nav-cta:hover::after { left: 130%; }
.btn-secondary { color: var(--dark) !important; border-color: var(--border) !important; background: var(--glass); backdrop-filter: blur(8px); }
.btn-secondary:hover { border-color: var(--accent-text) !important; color: var(--accent-text) !important; }
.btn-primary, .btn-secondary, .nav-cta, .btn-white { will-change: transform; }

/* ---- responsive & accessibility ---- */
@media (max-width: 1024px) {
  .hero-img { min-height: 320px; }
  .hero-scroll { display: none; }
}
@media (max-width: 768px) {
  .hero { padding: 130px 1.25rem 40px; }
  .hero-img { min-height: 280px; }
  .region-track { gap: 2.2rem; }
  .region-track span::before { margin-right: 2.2rem; }
  #aurora-glow { display: none; }
}
@media (hover: none) { #aurora-glow { display: none; } .tilt-glare { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hero-aurora i, .region-track, .service-icon, .why-icon, .hero h1 em, .hero-scroll::after, .hero-badge span { animation: none !important; }
  :root { transition: none; }
}

/* tablets: the full menu does not fit below ~1100px, use the hamburger earlier */
@media (max-width: 1100px) {
  nav .nav-links, nav .nav-right { display: none; }
  nav .nav-mobile-btn { display: flex; }
  nav { padding: 0 1.5rem; }
}