/* ══════════════════════════════════════════════════════════════════
   AURORA NIGHT BACKGROUND — bg-video.mp4 + desktop-bg.png + mobile-bg.png
   Device Strategy:
   · Desktop  (≥769px): bg-video.mp4 autoplay loop, desktop-bg.png fallback
   · Mobile   (≤768px): mobile-bg.png static (portrait crop, no video)
   · Reduced-motion:    static image always, zero animation
══════════════════════════════════════════════════════════════════ */

/* ── Base colours matching aurora scene ── */
html {
  background: #040a1a;
  color-scheme: dark;
}
body {
  background: transparent !important;
  background-attachment: unset !important;
}

/* ══════════════════════════════════════════
   BACKGROUND VIDEO  (desktop/tablet)
══════════════════════════════════════════ */
#bgVideo {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: -4;
  pointer-events: none;
  will-change: transform;
  filter: brightness(1.12) contrast(1.06) saturate(1.14);
}

#bgVideo.bg-video-disabled {
  display: none !important;
}

/* ══════════════════════════════════════════
   STATIC IMAGE FALLBACK
   Shown when: video unloaded, mobile, or reduced-motion
══════════════════════════════════════════ */
#bgStatic {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -5;
  pointer-events: none;
  background-image: url('../desktop-bg.png');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: brightness(1.06) contrast(1.05) saturate(1.08);
}

/* ══════════════════════════════════════════
   MOBILE OVERRIDE — Ultra-smooth, zero-jank static mobile-bg.png
   Completely bypasses video decoding and heavy blur layers on mobile screens
══════════════════════════════════════════ */
@media (max-width: 900px), (max-height: 520px) and (orientation: landscape) {
  #bgVideo {
    display: none;
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: -4;
    pointer-events: none;
    filter: brightness(1.10) contrast(1.05) saturate(1.12);
  }
  #bgVideo.bg-video-disabled {
    display: none !important;
  }
  #bgStatic {
    display: block;
    background-image: url('../mobile-bg.png');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;
    filter: brightness(1.06) contrast(1.05) saturate(1.08);
  }
  #auroraShimmer {
    display: none;
    animation: none;
  }
  #mistLayer {
    display: none;
    animation: none;
  }
}

/* ══════════════════════════════════════════
   AURORA SHIMMER PULSE  (top 55% of screen)
   Simulates the aurora breathing / rippling
══════════════════════════════════════════ */
#auroraShimmer {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 55vh;
  z-index: -3;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(20, 180, 160, 0.06) 0%,
    rgba(60, 180, 210, 0.04) 40%,
    transparent 100%
  );
  animation: auroraPulse 5s ease-in-out infinite alternate;
  will-change: opacity, transform;
}
@keyframes auroraPulse {
  0%   { opacity: 0.4; transform: scaleX(1.0) translateY(0px);   }
  33%  { opacity: 0.9; transform: scaleX(1.02) translateY(-8px);  }
  66%  { opacity: 0.6; transform: scaleX(0.99) translateY(4px);  }
  100% { opacity: 1.0; transform: scaleX(1.01) translateY(-4px); }
}

/* ══════════════════════════════════════════
   MIST / FOG DRIFT  (mid-scene valley mist)
══════════════════════════════════════════ */
#mistLayer {
  position: fixed;
  top: 55%; left: -30%;
  width: 160%; height: 22vh;
  z-index: -3;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(120, 160, 210, 0.045) 25%,
    rgba(140, 180, 220, 0.06)  50%,
    rgba(120, 160, 210, 0.045) 75%,
    transparent 100%
  );
  animation: mistDrift 22s linear infinite alternate;
  will-change: transform;
  border-radius: 50%;
  filter: blur(18px);
}
@keyframes mistDrift {
  0%   { transform: translateX(0%)   scaleY(1.0); }
  50%  { transform: translateX(18%)  scaleY(1.1); }
  100% { transform: translateX(-10%) scaleY(0.95); }
}

/* ══════════════════════════════════════════
   PARTICLE CANVAS  (stars + fireflies)
══════════════════════════════════════════ */
#bgCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
  contain: strict;
}

/* ══════════════════════════════════════════
   VIGNETTE  (cinematic lighting grade — ensures crystal clear text & box visibility)
══════════════════════════════════════════ */
#bgVignette {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    /* Balanced atmospheric tone behind left hero content: ensures crisp legibility without dimming video */
    radial-gradient(ellipse 80% 75% at 20% 50%, rgba(2, 6, 20, 0.45) 0%, rgba(2, 6, 20, 0.18) 55%, transparent 88%),
    /* Soft global top and bottom cinematic vignettes */
    linear-gradient(180deg, rgba(2, 5, 16, 0.28) 0%, transparent 22%, transparent 75%, rgba(4, 10, 26, 0.55) 100%);
}

/* ══════════════════════════════════════════
   SECTION & CARD HARMONY
   All transparent so scene shows through
══════════════════════════════════════════ */
.section-pad,
.ticker-section,
.highlights,
.pow-section,
.cta-banner,
.cert-stats-banner {
  position: relative;
  isolation: isolate;
  background: transparent !important;
}

/* ── Glassmorphic cards — translucent luxury dark with aurora backdrop blur ── */
.pcard,
.exp-card,
.featured-exp,
.achiev-card,
.cert-card,
.cert-img-card,
.skill-category,
.info-card,
.edu-card,
.contact-card,
.availability-card,
.qs-item,
.pow-card,
.hl-card,
.hcard,
.coord-card,
.workshop-card,
.contact-form-wrap,
.channel-card,
.location-card {
  background: rgba(4, 10, 26, 0.62) !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  transition:
    transform    0.35s cubic-bezier(0.2, 0, 0, 1),
    border-color 0.35s cubic-bezier(0.2, 0, 0, 1),
    box-shadow   0.35s cubic-bezier(0.2, 0, 0, 1);
}
.pcard:hover,
.exp-card:hover,
.featured-exp:hover,
.achiev-card:hover,
.cert-card:hover,
.cert-img-card:hover,
.info-card:hover,
.edu-card:hover,
.contact-card:hover,
.availability-card:hover,
.qs-item:hover,
.pow-card:hover,
.hl-card:hover,
.hcard:hover,
.coord-card:hover,
.workshop-card:hover,
.channel-card:hover {
  border-color: rgba(56, 189, 248, 0.38) !important;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.65),
              0 0 28px rgba(56, 189, 248, 0.14) !important;
  transform: translateY(-3px);
}

/* ── Navbar scroll state & Page Headers ── */
.page-header {
  background: rgba(4, 10, 26, 0.55) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
  backdrop-filter: blur(16px) saturate(1.3);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
}

/* ── Footer ── */
.footer {
  background: rgba(2, 5, 14, 0.92) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: relative;
  isolation: isolate;
}

/* ══════════════════════════════════════════
   REDUCED MOTION — static only, zero anim
══════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  #bgVideo         { display: none !important; }
  #auroraShimmer   { animation: none !important; opacity: 0.5; }
  #mistLayer       { animation: none !important; opacity: 0; }
  #bgCanvas        { display: none; }
  #bgStatic        { filter: brightness(0.79); }
}

/* ══════════════════════════════════════════
   LOW-POWER DEVICES (coarse pointer = touch)
   Disable mist on low-end mobile to save GPU
══════════════════════════════════════════ */
@media (pointer: coarse) and (max-width: 480px) {
  #mistLayer { display: none; }
  #auroraShimmer { animation-duration: 8s; }
}

/* ══════════════════════════════════════════
   MOBILE GPU PERFORMANCE OPTIMIZATIONS (≤768px)
   Replaces heavy 18px-28px backdrop-filters with optimized solid luxury dark
   styling to guarantee silky 60fps/120fps scrolling on mobile Chrome & Safari
══════════════════════════════════════════ */
@media (max-width: 768px) {
  .pcard,
  .exp-card,
  .featured-exp,
  .achiev-card,
  .cert-card,
  .cert-img-card,
  .skill-category,
  .info-card,
  .edu-card,
  .contact-card,
  .availability-card,
  .qs-item,
  .pow-card,
  .hl-card,
  .hcard,
  .coord-card,
  .workshop-card,
  .contact-form-wrap,
  .channel-card,
  .location-card,
  .page-header,
  .feat-card,
  .exp-lead-main,
  .exp-lead-sidebar,
  .float-chip,
  .hero-stats,
  .hero-links .social-link,
  .hero-ctas .btn-ghost {
    background: rgba(6, 14, 34, 0.92) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
  }

  /* Eliminate expensive continuous SVG/clip-path animations on mobile */
  .hex-border {
    animation: none !important;
    filter: drop-shadow(0 0 16px rgba(56, 189, 248, 0.4)) !important;
  }
  .float-chip {
    animation: none !important;
  }
  .orbit-ring-1,
  .orbit-ring-2,
  .orbit-ring-3,
  .orbit-dot,
  .orbit-dot-2 {
    animation: none !important;
  }
}