/* ═══════════════════════════════════════════════════════════
   FABLE-STYLE PREMIUM ANIMATION SYSTEM
   Scroll-triggered reveals, smooth transitions, parallax
   ═══════════════════════════════════════════════════════════ */

/* ─── SMOOTH SCROLL & GPU ACCELERATION ─── */
html {
  scroll-behavior: smooth;
}

/* ─── SHARED MOTION TOKENS ─────────────────────────────────────
   One vocabulary for the whole site. Premium motion reads as
   restrained and consistent, so everything pulls from these rather
   than hand-picking a curve per rule.
   ────────────────────────────────────────────────────────────── */
:root {
  /* Expressive decelerate — fast start, long soft settle. Default. */
  --ease-reveal: cubic-bezier(0.16, 1, 0.3, 1);
  /* Gentle overshoot, for objects with mass (cards, media). */
  --ease-settle: cubic-bezier(0.34, 1.32, 0.64, 1);
  /* Text: no overshoot — letterforms wobbling looks cheap. */
  --ease-text: cubic-bezier(0.22, 1, 0.36, 1);

  --dur-reveal: 0.9s;
  --dur-text: 1s;
  --dur-slow: 1.2s;

  /* Distance a reveal travels. Small travel + long ease reads as
     "settling into place"; large travel reads as "sliding in". */
  --travel: 40px;
}

/* Registering the tuning knobs stops them inheriting. Custom
   properties inherit by default, so `.zoom-out-section { --rv-dur:
   1.2s }` was leaking the section's slower timing onto every card
   inside it. --stagger-step is deliberately left inheriting: it is
   set on the grid and read by the children. */
@property --rv-dur  { syntax: "<time>";   inherits: false; initial-value: 0.9s; }
@property --rv-ease { syntax: "*";        inherits: false; }
@property --s       { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --w       { syntax: "<number>"; inherits: false; initial-value: 0; }

/* ─── AUTHORITATIVE REVEAL TIMING ───────────────────────────────
   `transition` is a shorthand: any later rule that sets it replaces
   the whole list. app.js injects a <style> block at runtime — so it
   lands after this file — containing bare `.tilt-card { transition:
   transform ... }` and `.section-eyebrow { transition: opacity ... }`
   rules. At equal specificity those won and silently deleted the
   reveal timings, making every card and eyebrow snap instead of ease.

   Declaring the timing once at 0-2-0 (`:root` + attribute) puts it
   out of reach of any single-class rule, whatever the source order.
   Variants tune it through --rv-dur / --rv-ease rather than
   redeclaring the shorthand.
   ─────────────────────────────────────────────────────────────── */
:root [data-reveal],
:root .zoom-out-section,
:root .section-transition {
  transition:
    opacity   var(--rv-dur) var(--ease-reveal),
    translate var(--rv-dur) var(--rv-ease, var(--ease-settle)),
    scale     var(--rv-dur) var(--rv-ease, var(--ease-settle)),
    rotate    var(--rv-dur) var(--rv-ease, var(--ease-settle)),
    filter    var(--rv-dur) var(--ease-reveal),
    clip-path var(--rv-dur) var(--ease-reveal) !important;
}

/* Cards that also tilt on hover keep their fast transform response —
   appended to the same list rather than replacing it.

   The !important is load-bearing, not defensive habit: theme.css:711
   sets `.bento-card { transition: transform .3s, border-color .3s,
   box-shadow .3s !important }`. An important declaration outranks any
   specificity, so without matching it here the reveal transition is
   discarded outright and all six cards snap from hidden to visible in
   a single frame. This file is the one place that owns reveal timing. */
:root [data-reveal].tilt-card {
  transition:
    opacity   var(--rv-dur) var(--ease-reveal),
    translate var(--rv-dur) var(--rv-ease, var(--ease-settle)),
    scale     var(--rv-dur) var(--rv-ease, var(--ease-settle)),
    rotate    var(--rv-dur) var(--rv-ease, var(--ease-settle)),
    transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}

/* ─── WHY REVEALS USE INDIVIDUAL TRANSFORM PROPERTIES ───────────
   The bento cards are simultaneously reveal-animated, parallaxed
   (JS writes inline `transform` every frame) and tilt-enabled (JS
   writes `transform` on hover). Three systems, one property — the
   inline write won and the reveal never visibly moved.

   `translate` / `scale` / `rotate` are separate animatable
   properties that compose with `transform` instead of replacing it,
   so the reveal, the parallax drift and the hover tilt can all run
   on the same element without fighting.
   ────────────────────────────────────────────────────────────── */

/* ─── PROGRESSIVE-ENHANCEMENT SAFETY NET ─────────────────────────
   Reveal states only ever hide content once JS has confirmed it can
   un-hide it again. `js-anims` is set on <html> by an inline head
   snippet, so with JS off/broken every element renders fully visible
   and nothing can get stranded at opacity:0.
   ──────────────────────────────────────────────────────────────── */
html:not(.js-anims) [data-reveal],
html:not(.js-anims) .zoom-out-section,
html:not(.js-anims) .section-transition,
html:not(.js-anims) section[data-reveal],
html:not(.js-anims) .ns-word-in,
/* style.css hides .section-header until JS adds .active, so with JS
   off every section heading on the site would be invisible. */
html:not(.js-anims) .section-header,
html:not(.js-anims) .reveal-on-scroll {
  opacity: 1 !important;
  /* translate/scale/rotate must be reset alongside transform: the
     reveal states use the individual properties, so clearing only
     `transform` would leave content visible but displaced. */
  transform: none !important;
  translate: none !important;
  scale: none !important;
  rotate: none !important;
  filter: none !important;
  clip-path: none !important;
  visibility: visible !important;
  transition: none !important;
}

/* Respect the OS "reduce motion" setting — content appears, it just
   doesn't travel. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].revealed,
  .zoom-out-section,
  .section-transition,
  section[data-reveal],
  .ns-word,
  .ns-word-in {
    opacity: 1 !important;
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    filter: none !important;
    clip-path: none !important;
    transition: none !important;
    animation: none !important;
  }
  /* The mask box would otherwise still clip descenders once the
     word inside stops moving. */
  .ns-word { overflow: visible !important; }
}

/* ─── CORE FADE FAMILY ───────────────────────────────────────────
   fade-up alone accounts for 53 of the 84 data-reveal usages in the
   markup; these four had no CSS at all, so those elements simply
   never moved. Short travel + long ease reads as "settling into
   place" rather than "sliding in".
   ──────────────────────────────────────────────────────────────── */
[data-reveal="fade-up"],
[data-reveal="fade-down"],
[data-reveal="fade-left"],
[data-reveal="fade-right"],
[data-reveal="fade-in"] {
  opacity: 0;
  will-change: translate, opacity;
  /* Text and copy: pure decelerate, no overshoot. */
  --rv-ease: var(--ease-reveal);
}

[data-reveal="fade-up"]    { translate: 0 var(--travel); }
[data-reveal="fade-down"]  { translate: 0 calc(var(--travel) * -1); }
[data-reveal="fade-left"]  { translate: calc(var(--travel) * -1.2) 0; }
[data-reveal="fade-right"] { translate: calc(var(--travel) * 1.2) 0; }
[data-reveal="fade-in"]    { translate: none; }

[data-reveal="fade-up"].revealed,
[data-reveal="fade-down"].revealed,
[data-reveal="fade-left"].revealed,
[data-reveal="fade-right"].revealed,
[data-reveal="fade-in"].revealed {
  opacity: 1;
  translate: 0 0;
}

/* Once a reveal has played, drop the compositor hint so long pages
   don't hold hundreds of promoted layers in memory. */
[data-reveal].revealed {
  will-change: auto;
}

/* ─── PRO MODERN ZOOM TRANSITIONS (Framer / Apple style) ─── */

/* Shared choreography for the zoom family. Scale and translate are
   separate properties now, so the JS parallax `transform` layers on
   top instead of erasing them. */
[data-reveal="zoom-out-container"],
.zoom-out-section,
[data-reveal="zoom-in-card"],
[data-reveal="scale-up"],
[data-reveal="zoom-step-card"],
[data-reveal="zoom-fade-left"],
[data-reveal="zoom-fade-right"],
[data-reveal="zoom-rotate-up"],
[data-reveal="zoom-rotate-up-right"] {
  opacity: 0;
  will-change: translate, scale, opacity;
}

[data-reveal="zoom-out-container"].revealed,
.zoom-out-section.revealed,
[data-reveal="zoom-in-card"].revealed,
[data-reveal="scale-up"].revealed,
[data-reveal="zoom-step-card"].revealed,
[data-reveal="zoom-fade-left"].revealed,
[data-reveal="zoom-fade-right"].revealed,
[data-reveal="zoom-rotate-up"].revealed,
[data-reveal="zoom-rotate-up-right"].revealed {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  rotate: 0deg;
}

/* Container recede: a whole section settling back into the page.
   Slower and with no overshoot — big surfaces bouncing looks cheap. */
[data-reveal="zoom-out-container"],
.zoom-out-section {
  scale: 1.05;
  translate: 0 36px;
  --rv-dur: var(--dur-slow);
  --rv-ease: var(--ease-reveal);
}

/* Cards: a touch of overshoot so they land with weight. */
[data-reveal="zoom-in-card"],
[data-reveal="scale-up"]        { scale: 0.9;  translate: 0 32px; }
[data-reveal="zoom-step-card"]  { scale: 0.82; translate: 0 46px; }
[data-reveal="zoom-fade-left"]  { scale: 0.94; translate: -56px 0; }
[data-reveal="zoom-fade-right"] { scale: 0.94; translate: 56px 0; }

/* The rotate pair keeps its tilt, now on the `rotate` property so the
   hover tilt transform still composes. */
[data-reveal="zoom-rotate-up"] {
  scale: 0.94;
  translate: 0 46px;
  rotate: -2.5deg;
}
[data-reveal="zoom-rotate-up-right"] {
  scale: 0.94;
  translate: 0 46px;
  rotate: 2.5deg;
}

/* Blur In */
[data-reveal="blur-in"] {
  opacity: 0;
  filter: blur(12px);
  translate: 0 20px;
  will-change: translate, opacity, filter;
  --rv-ease: var(--ease-reveal);
}
[data-reveal="blur-in"].revealed {
  opacity: 1;
  filter: blur(0);
  translate: 0 0;
}

/* Clip Reveal (wipe from bottom) */
[data-reveal="clip-up"] {
  opacity: 1;
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
  --rv-dur: 1s;
}
[data-reveal="clip-up"].revealed {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}

/* ─── SECTION-LEVEL SCROLL TRANSITIONS ─── */
/* This used to also match `section[data-reveal]` and apply its own
   translateY(40px) scale(0.98) on top of whatever the section's own
   variant already set — at 0-1-1 it outranked the variant, so every
   section moved twice as far as intended (and 13 sections in the
   markup carry a variant). Sections now animate purely from their
   declared data-reveal value.

   .section-transition is a standalone opt-in class; it appears in no
   page today but is kept as a usable section-level treatment. */
.section-transition {
  opacity: 0;
  translate: 0 40px;
  scale: 0.98;
  will-change: translate, scale, opacity;
  --rv-dur: var(--dur-slow);
  --rv-ease: var(--ease-reveal);
}
.section-transition.revealed {
  opacity: 1;
  translate: 0 0;
  scale: 1;
}

/* 3D Flip Up Scroll Reveal */
[data-reveal="flip-up"] {
  opacity: 0;
  transform: perspective(1000px) rotateX(25deg) translateY(50px) scale(0.95);
  transform-origin: center bottom;
  will-change: transform, opacity;
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="flip-up"].revealed {
  opacity: 1;
  transform: perspective(1000px) rotateX(0deg) translateY(0) scale(1);
}

/* Curtain Wipe Reveal */
[data-reveal="curtain-reveal"] {
  opacity: 0;
  clip-path: inset(8% 4% 8% 4% round 24px);
  transform: scale(0.96);
  will-change: clip-path, transform, opacity;
  transition: opacity 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              clip-path 1.1s cubic-bezier(0.16, 1, 0.3, 1),
              transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal="curtain-reveal"].revealed {
  opacity: 1;
  clip-path: inset(0% 0% 0% 0% round 0px);
  transform: scale(1);
}

/* ═══════════════════════════════════════════════════════════════
   PREMIUM MOTION LAYER
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. MASKED WORD RISE (headings) ────────────────────────────
   Each word sits inside its own overflow-hidden box and rises out
   of it. Reads as typesetting rather than "a div faded in" — the
   single biggest tell between stock and premium motion.

   Structure is built by animations.js:
     <span class="ns-word"><span class="ns-word-in">Word</span></span>
   ─────────────────────────────────────────────────────────────── */
[data-reveal="mask-text"] {
  /* The heading itself never hides — only its words move. */
  opacity: 1;
}

/* A container must never hide content it isn't responsible for
   revealing. style.css keeps .section-header at opacity:0 pending an
   .active class; where the header's children each animate themselves,
   the header is opted out of that baseline entirely. Equal specificity
   to `.section-header.active`, and animations.css loads last, so this
   wins. */
.section-header.ns-self-revealing {
  opacity: 1;
  transform: none;
}

.ns-word {
  display: inline-block;
  overflow: hidden;
  /* Descenders (g, y, p) would otherwise be clipped by the mask.
     Pad the box, then pull the extra space back out of the layout. */
  padding-bottom: 0.14em;
  margin-bottom: -0.14em;
  vertical-align: bottom;
}

.ns-word-in {
  display: inline-block;
  translate: 0 110%;
  opacity: 0;
  transition: translate var(--dur-text) var(--ease-text),
              opacity calc(var(--dur-text) * 0.6) linear;
  transition-delay: calc(var(--w, 0) * 42ms);
  will-change: translate, opacity;
}

[data-reveal="mask-text"].revealed .ns-word-in,
.revealed .ns-word-in {
  translate: 0 0;
  opacity: 1;
}

/* ─── 2. AUTOMATIC STAGGER ──────────────────────────────────────
   Children of a grid cascade instead of arriving as one block.
   Only applies where the markup hasn't already set an explicit
   data-delay, so hand-tuned sequences keep priority. */
[data-reveal]:not([data-delay]) {
  transition-delay: calc(var(--s, 0) * var(--stagger-step, 65ms));
}

/* ─── 3. COMPOSITOR-DRIVEN PROGRESS BAR ─────────────────────────
   Where scroll-driven animations are supported the bar is tied
   directly to scroll position on the compositor — perfectly smooth
   and it costs no main-thread work. A CSS animation outranks the
   inline transform the JS fallback writes, so supporting browsers
   use this automatically and everything else keeps the JS path. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .scroll-progress {
      animation: nsScrollProgress linear both;
      animation-timeline: scroll(root block);
    }
    @keyframes nsScrollProgress {
      from { transform: scaleX(0); }
      to   { transform: scaleX(1); }
    }
  }
}

/* ─── 4. DEPTH ON THE BENTO NUMBERS ─────────────────────────────
   The oversized 01–06 numerals drift slightly against their cards,
   which is what sells the parallax as depth rather than movement. */
.bento-card .bento-bg-number {
  transition: opacity var(--dur-slow) var(--ease-reveal);
}

/* ─── STAGGER DELAYS ─── */
[data-delay="1"] { transition-delay: 0.08s; }
[data-delay="2"] { transition-delay: 0.16s; }
[data-delay="3"] { transition-delay: 0.24s; }
[data-delay="4"] { transition-delay: 0.32s; }
[data-delay="5"] { transition-delay: 0.40s; }
[data-delay="6"] { transition-delay: 0.48s; }
[data-delay="7"] { transition-delay: 0.56s; }
[data-delay="8"] { transition-delay: 0.64s; }

/* ─── PREMIUM DURATION VARIANTS ─── */
[data-speed="fast"] {
  transition-duration: 0.5s !important;
}
[data-speed="slow"] {
  transition-duration: 1.4s !important;
}

/* Hero text visibility & animation handled seamlessly by CSS .hero-anim */

.hero-anim--1 { animation-delay: 0.10s; }
.hero-anim--2 { animation-delay: 0.22s; }
.hero-anim--3 { animation-delay: 0.38s; }
.hero-anim--4 { animation-delay: 0.52s; }
.hero-anim--5 { animation-delay: 0.66s; }

/* ─── NAVBAR SCROLL MORPHING ─── */
.navbar {
  transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.5s ease,
              box-shadow 0.5s ease,
              backdrop-filter 0.5s ease,
              padding 0.4s ease !important;
}

.navbar.scrolled {
  background: rgba(0, 0, 0, 0.85) !important;
  backdrop-filter: blur(24px) saturate(1.8) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.8) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}

/* ─── MAGNETIC BUTTON EFFECT ─── */
.btn-magnetic {
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ─── CURSOR GLOW ─── */
.cursor-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.04) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  transition: opacity 0.4s ease;
  opacity: 0;
}
.cursor-glow.active {
  opacity: 1;
}

/* ─── SECTION HORIZONTAL LINE REVEAL ─── */
.section-line {
  width: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
  margin: 0 auto 60px;
  transition: width 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.section-line.revealed {
  width: 80%;
}

/* ─── TEXT SHIMMER EFFECT ─── */
@keyframes textShimmer {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.text-shimmer {
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #a1a1aa 25%,
    #ffffff 50%,
    #a1a1aa 75%,
    #ffffff 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: textShimmer 4s linear infinite;
}



/* ─── FLOATING ANIMATION ─── */
@keyframes premiumFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.anim-float {
  animation: premiumFloat 6s ease-in-out infinite;
}

/* ─── PULSE RING ─── */
@keyframes pulseRing {
  0% { transform: scale(0.9); opacity: 1; }
  100% { transform: scale(2.2); opacity: 0; }
}

.pulse-ring {
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  animation: pulseRing 2.5s ease-out infinite;
}

/* ─── COUNTER ANIMATION ─── */
.counter-value {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ─── PREMIUM HOVER TILT (cards) ─── */
.tilt-card {
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              box-shadow 0.4s ease;
}

/* ─── SECTION HEADERS - ENHANCED ─── */
/* The heading and eyebrow transitions that used to live here have been
   removed: both are [data-reveal] elements, and at 0-2-0 these rules
   tied with the authoritative reveal timing above but came later in the
   file, so they won — replacing the shorthand and dropping `translate`
   from the transition list, which made both snap into place. Their
   timing now comes from the reveal system. */

/* ─── SCROLL PROGRESS BAR ───
   Injected by animations.js so every page gets one. Needs an explicit
   width: a fixed-position empty div is shrink-to-fit (0px), which
   would make scaleX() scale nothing at all. */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, #ff5420, #ff8a3d);
  z-index: 100000;
  transform-origin: left center;
  transform: scaleX(0);
  transition: none;
  pointer-events: none;
}

/* ─── REDUCED MOTION ─── */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
    clip-path: none !important;
  }
  .hero-word {
    opacity: 1 !important;
    transform: none !important;
  }
  .cursor-glow { display: none; }
  .scroll-progress { display: none; }
}








/* Glowing divider line across the top of the footer.
   The selector and opening brace of this rule had been lost at some
   point, leaving the declarations orphaned at top level (and a stray
   closing brace). The light-theme override further down still targets
   .footer::before, which is what identifies it. */
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  max-width: 1200px;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 84, 32, 0.65) 50%, transparent 100%);
  filter: drop-shadow(0 0 10px rgba(255, 84, 32, 0.8));
}

/* Ambient Radial Glow Background Orbs */
.footer::after {
  content: '';
  position: absolute;
  bottom: -150px;
  right: -100px;
  width: 450px;
  height: 450px;
  background: radial-gradient(circle, rgba(255, 84, 32, 0.07) 0%, rgba(59, 130, 246, 0.04) 50%, transparent 70%);
  pointer-events: none;
  border-radius: 50%;
  filter: blur(60px);
}

.footer .container {
  position: relative;
  z-index: 2;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 70px;
}

@media (max-width: 992px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
  }
}

@media (max-width: 576px) {
  .footer-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
}

/* Brand Section */
.footer-brand p {
  color: #94a3b8;
  font-size: 0.95rem;
  line-height: 1.65;
  margin-top: 12px;
  margin-bottom: 26px;
  max-width: 320px;
}

/* ─── NEXT-GEN ENGAGING SOCIAL MEDIA HOVER EFFECTS ─── */
.footer-social-links,
.social-links {
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-social-links a,
.social-links a {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #e2e8f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  text-decoration: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  position: relative;
  overflow: visible;
  cursor: pointer;
}

/* Background Brand Gradient Layer */
.footer-social-links a::before,
.social-links a::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.6);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 1;
}

/* Pulsing Outer Ripple Ring on Hover */
.footer-social-links a::after,
.social-links a::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.footer-social-links a i,
.social-links a i {
  position: relative;
  z-index: 2;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover Spring Physics */
.footer-social-links a:hover,
.social-links a:hover {
  transform: translateY(-6px) scale(1.14);
  color: #ffffff !important;
  border-color: transparent;
}

.footer-social-links a:hover::before,
.social-links a:hover::before {
  opacity: 1;
  transform: scale(1);
}

.footer-social-links a:hover::after,
.social-links a:hover::after {
  opacity: 0.6;
  transform: scale(1.18);
}

.footer-social-links a:hover i,
.social-links a:hover i {
  transform: scale(1.2) rotate(8deg);
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4));
}

/* Brand Specific Hover Gradients & Glows */

/* Instagram: Radiant Instagram Sunset Gradient */
.footer-social-links a[aria-label="Instagram"]::before,
.footer-social-links a[href*="instagram"]::before {
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
}
.footer-social-links a[aria-label="Instagram"]:hover,
.footer-social-links a[href*="instagram"]:hover {
  box-shadow: 0 12px 28px rgba(214, 36, 159, 0.45), 0 0 15px rgba(253, 89, 73, 0.3);
}

/* YouTube: Intense Crimson YouTube Red */
.footer-social-links a[aria-label="YouTube"]::before,
.footer-social-links a[href*="youtube"]::before {
  background: linear-gradient(135deg, #FF0000 0%, #C40000 100%);
}
.footer-social-links a[aria-label="YouTube"]:hover,
.footer-social-links a[href*="youtube"]:hover {
  box-shadow: 0 12px 28px rgba(255, 0, 0, 0.5), 0 0 15px rgba(255, 0, 0, 0.3);
}

/* LinkedIn: Corporate Professional Blue */
.footer-social-links a[aria-label="LinkedIn"]::before,
.footer-social-links a[href*="linkedin"]::before {
  background: linear-gradient(135deg, #0A66C2 0%, #004182 100%);
}
.footer-social-links a[aria-label="LinkedIn"]:hover,
.footer-social-links a[href*="linkedin"]:hover {
  box-shadow: 0 12px 28px rgba(10, 102, 194, 0.5), 0 0 15px rgba(10, 102, 194, 0.3);
}

/* Facebook: Modern Meta Facebook Blue */
.footer-social-links a[aria-label="Facebook"]::before,
.footer-social-links a[href*="facebook"]::before {
  background: linear-gradient(135deg, #1877F2 0%, #0C51AB 100%);
}
.footer-social-links a[aria-label="Facebook"]:hover,
.footer-social-links a[href*="facebook"]:hover {
  box-shadow: 0 12px 28px rgba(24, 119, 242, 0.5), 0 0 15px rgba(24, 119, 242, 0.3);
}

/* Footer Navigation Column Headers */
.footer-col h4 {
  color: #ffffff;
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 1.08rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 24px;
  position: relative;
  display: inline-block;
}

.footer-col h4::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 0;
  width: 24px;
  height: 2px;
  background: linear-gradient(90deg, #ff5420, transparent);
  border-radius: 999px;
  transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-col:hover h4::after {
  width: 100%;
}

/* Footer Link List & Smooth Hover Transitions */
.footer-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-col ul li {
  margin-bottom: 14px;
}

.footer-col ul li a {
  color: #94a3b8;
  font-size: 0.94rem;
  font-weight: 500;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
}

.footer-col ul li a::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #ff5420;
  opacity: 0;
  transform: scale(0);
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-col ul li a:hover {
  color: #ffffff;
  transform: translateX(6px);
  text-shadow: 0 0 12px rgba(255, 255, 255, 0.2);
}

.footer-col ul li a:hover::before {
  opacity: 1;
  transform: scale(1);
}

/* Footer Bottom Bar */
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding-top: 36px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.88rem;
  color: #64748b;
  flex-wrap: wrap;
  gap: 16px;
}

.footer-bottom p {
  margin: 0;
}

/* Luxury Back to Top Pill Button */
.btn-back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #cbd5e1;
  font-family: 'Outfit', 'Plus Jakarta Sans', system-ui, sans-serif;
  font-size: 0.84rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.btn-back-to-top i {
  font-size: 0.78rem;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-back-to-top:hover {
  background: #ffffff;
  border-color: #ffffff;
  color: #0f172a;
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(255, 255, 255, 0.25), 0 0 15px rgba(255, 84, 32, 0.3);
}

.btn-back-to-top:hover i {
  transform: translateY(-3px);
}

/* Light Mode Overrides */
html[data-theme="light"] .footer,
body[data-theme="light"] .footer {
  background-color: #f8fafc !important;
  color: #475569 !important;
  border-top-color: #e2e8f0 !important;
}

html[data-theme="light"] .footer::before,
body[data-theme="light"] .footer::before {
  background: linear-gradient(90deg, transparent 0%, rgba(255, 84, 32, 0.5) 50%, transparent 100%) !important;
}

html[data-theme="light"] .footer-col h4,
body[data-theme="light"] .footer-col h4 {
  color: #0f172a !important;
}

html[data-theme="light"] .footer-col ul li a,
body[data-theme="light"] .footer-col ul li a {
  color: #64748b !important;
}

html[data-theme="light"] .footer-col ul li a:hover,
body[data-theme="light"] .footer-col ul li a:hover {
  color: #0f172a !important;
}

html[data-theme="light"] .footer-social-links a,
html[data-theme="light"] .social-links a,
body[data-theme="light"] .footer-social-links a,
body[data-theme="light"] .social-links a {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
}

html[data-theme="light"] .btn-back-to-top,
body[data-theme="light"] .btn-back-to-top {
  background: #ffffff !important;
  border-color: #cbd5e1 !important;
  color: #0f172a !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
}

html[data-theme="light"] .btn-back-to-top:hover,
body[data-theme="light"] .btn-back-to-top:hover {
  background: #0f172a !important;
  border-color: #0f172a !important;
  color: #ffffff !important;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.25) !important;
}