/* ╔══════════════════════════════════════════════════════════════════════╗
   ║  APEX LAYER — Vibe OS 4.0 × Apple 2026 Final Masterpiece            ║
   ║  Load order: ABSOLUTE LAST (after phase-omega.css)                   ║
   ║                                                                       ║
   ║  Techniques used:                                                    ║
   ║  1. @view-transition  — silky cross-document page transitions        ║
   ║  2. @property shimmer — CSS-animated specular sweep on glass cards   ║
   ║  3. @property orb     — hero ambient orbs breathe with actual life   ║
   ║  4. view() timeline   — GPU-composited scroll-driven section reveals ║
   ║  5. Motion safety     — prefers-reduced-motion respected throughout  ║
   ╚══════════════════════════════════════════════════════════════════════╝ */


/* ══════════════════════════════════════════════════════════════════════════
   0. CURSOR ARBITRATION — single canonical definition (overrides all others)
   Desktop only: OS cursor is none, custom spring-blob cursor runs via JS.
   Touch: OS cursor auto (launch-standards.css handles this via hover:none).
══════════════════════════════════════════════════════════════════════════ */

@media (hover: hover) {
  /* Kill OS cursor on desktop — everywhere, no exceptions */
  html, body, *, *::before, *::after {
    cursor: none !important;
  }

  /* The one true cursor — spring-physics blob created by supreme-v5.js
     RULE: only position/z-index/pointer-events get !important.
     transform, width, height, border-radius, opacity, background must
     stay WITHOUT !important — JavaScript sets them via el.style and
     CSS !important would block JS from overriding them. */
  .vs-cursor {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    pointer-events: none !important;
    z-index: 999999 !important;
    display: block !important;
    width: 16px;
    height: 16px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    mix-blend-mode: difference;
    transform: translate(0, 0);
    will-change: transform, width, height, border-radius;
  }

  .vs-cursor.blob-active {
    background: rgba(163, 207, 43, 0.25);
    mix-blend-mode: normal;
    border: 1.5px solid rgba(163, 207, 43, 0.9);
    box-shadow: 0 0 24px rgba(163, 207, 43, 0.5), 0 0 60px rgba(163, 207, 43, 0.2);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  /* Kill all competing cursors */
  .nano-liquid-cursor,
  .premium-glow-cursor,
  #vsCursor,
  #vsCursorRing,
  .vs-cursor-ring,
  .cursor-dot,
  #cursorDot,
  #cursorRing {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   1. CROSS-DOCUMENT PAGE TRANSITIONS
   Apple-tier: clicking any nav link fades + scales between pages natively.
   No JS. Pure CSS. Works on Chrome 126+ / Safari 18.2+ — degrades cleanly.
══════════════════════════════════════════════════════════════════════════ */

@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: apex-page-out 0.22s ease-in both;
}

::view-transition-new(root) {
  animation: apex-page-in 0.34s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both;
}

@keyframes apex-page-out {
  from { opacity: 1; transform: scale(1)    translateY(0);   filter: blur(0px); }
  to   { opacity: 0; transform: scale(0.986) translateY(6px); filter: blur(3px); }
}

@keyframes apex-page-in {
  from { opacity: 0; transform: scale(1.014) translateY(-6px); filter: blur(3px); }
  to   { opacity: 1; transform: scale(1)     translateY(0);    filter: blur(0px); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════════
   2. CSS HOUDINI — @property ANIMATED SPECULAR SHIMMER ON GLASS CARDS
   The specular highlight sweeps across each card on hover — like real glass
   catching a beam of light. Impossible without @property. Zero JS.
══════════════════════════════════════════════════════════════════════════ */

/* Register as typed property so CSS can INTERPOLATE it (not possible normally) */
@property --shimmer-x {
  syntax: '<percentage>';
  inherits: true;       /* ::after inherits the transitioning value from parent */
  initial-value: -120%;
}

/* Declare initial value + enable transition on the cards */
.glass-card,
.spatial-card,
.vibe-what-card,
.bento-card,
.srv-card,
.vsh-stat,
.milestone-card {
  --shimmer-x: -120%;
  transition:
    --shimmer-x 0.0s,        /* instant reset when mouse leaves */
    transform   0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.25s ease,
    box-shadow   0.25s ease;
  overflow: hidden;   /* clip the shimmer to card bounds */
  position: relative; /* required for ::after positioning */
}

/* Fire the shimmer on hover — @property makes this animatable */
.glass-card:hover,
.spatial-card:hover,
.vibe-what-card:hover,
.bento-card:hover,
.srv-card:hover,
.vsh-stat:hover,
.milestone-card:hover {
  --shimmer-x: 165%;
  transition:
    --shimmer-x 0.70s cubic-bezier(0.4, 0, 0.2, 1),
    transform   0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
    border-color 0.25s ease,
    box-shadow   0.25s ease;
}

/* The shimmer beam itself */
.glass-card::after,
.spatial-card::after,
.vibe-what-card::after,
.bento-card::after,
.srv-card::after,
.vsh-stat::after,
.milestone-card::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: var(--shimmer-x);   /* follows the @property transition on parent */
  width: 52%;
  background: linear-gradient(
    105deg,
    transparent               0%,
    rgba(255,255,255,0.035)  38%,
    rgba(255,255,255,0.090)  50%,
    rgba(255,255,255,0.035)  62%,
    transparent              100%
  );
  transform: skewX(-12deg);
  pointer-events: none;
  z-index: 3;         /* above card content but below cursor */
  border-radius: inherit;
}


/* ══════════════════════════════════════════════════════════════════════════
   3. @property AMBIENT ORB PULSE — "Living Background"
   Animates the color stop alpha INSIDE the gradient — only possible with
   @property. Without it, CSS cannot interpolate values inside gradient().
══════════════════════════════════════════════════════════════════════════ */

@property --orb-a {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.07;
}

@property --orb-b {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.06;
}

@property --orb-c {
  syntax: '<number>';
  inherits: false;
  initial-value: 0.025;
}

@media (prefers-reduced-motion: no-preference) {
  .vsh-orb-1 {
    background: radial-gradient(ellipse, rgba(163,207,43,var(--orb-a)) 0%, transparent 70%) !important;
    animation: apex-orb-a 10s ease-in-out infinite;
  }
  .vsh-orb-2 {
    background: radial-gradient(ellipse, rgba(0,137,123,var(--orb-b)) 0%, transparent 70%) !important;
    animation: apex-orb-b 15s ease-in-out infinite 2s;
  }
  .vsh-orb-3 {
    background: radial-gradient(ellipse, rgba(163,207,43,var(--orb-c)) 0%, transparent 70%) !important;
    animation: apex-orb-c 8s ease-in-out infinite 4s;
  }
}

@keyframes apex-orb-a {
  0%, 100% { --orb-a: 0.05; }
  50%      { --orb-a: 0.15; }
}
@keyframes apex-orb-b {
  0%, 100% { --orb-b: 0.04; }
  50%      { --orb-b: 0.12; }
}
@keyframes apex-orb-c {
  0%, 100% { --orb-c: 0.015; }
  50%      { --orb-c: 0.065; }
}


/* ══════════════════════════════════════════════════════════════════════════
   4. SCROLL-DRIVEN SECTION REVEALS — GPU Composited (Chrome 115+ / Safari 15.4+)
   Each section rises from depth as it enters the viewport.
   CSS-only, compositor-thread — zero JS, zero IntersectionObserver cost.
   The existing JS .reveal system handles children — this handles containers.
══════════════════════════════════════════════════════════════════════════ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* Section containers — subtle depth entry */
    .section:not(#hero-main):not(.vsh) {
      animation: apex-section-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 22%;
    }

    /* Section header: title + tag reveal with letter-spacing snap */
    .section-header:not(.reveal),
    .section-header-worldclass:not(.reveal) {
      animation: apex-header-enter linear both;
      animation-timeline: view();
      animation-range: entry 5% entry 35%;
    }

    /* Journey spatial cards — stagger via delay */
    .spatial-card-wrap:nth-child(1) { animation-delay: 0s; }
    .spatial-card-wrap:nth-child(2) { animation-delay: 0.05s; }
    .spatial-card-wrap:nth-child(3) { animation-delay: 0.10s; }
    .spatial-card-wrap:nth-child(4) { animation-delay: 0.15s; }
    .spatial-card-wrap:nth-child(5) { animation-delay: 0.20s; }
  }
}

@keyframes apex-section-rise {
  from {
    opacity: 0;
    transform: translateY(32px) scale(0.984);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0px);
  }
}

@keyframes apex-header-enter {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   5. STATS — @property Lime Number Glow on Hover
   The number radiates lime light as you hover the stat card.
══════════════════════════════════════════════════════════════════════════ */

@property --stat-glow {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.vsh-stat {
  --stat-glow: 0;
  transition: --stat-glow 0.35s ease;
}

.vsh-stat:hover {
  --stat-glow: 1;
}

.vsh-stat-n {
  text-shadow:
    0 0 calc(var(--stat-glow) * 28px) rgba(163,207,43,calc(var(--stat-glow) * 0.55)),
    0 0 calc(var(--stat-glow) * 60px) rgba(163,207,43,calc(var(--stat-glow) * 0.18));
  transition: text-shadow 0.35s ease;
}


/* ══════════════════════════════════════════════════════════════════════════
   6. PHOTO FRAME — Periodic Specular Sweep
   Once every 8 seconds a light beam sweeps across Ahmed's photo.
   Subtle. Cinematic. Like a Apple product showcase.
══════════════════════════════════════════════════════════════════════════ */

.vsh-photo-glass {
  overflow: hidden; /* ensure sweep clips to frame */
}

@media (prefers-reduced-motion: no-preference) {
  .vsh-photo-glass::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    left: -100%;
    width: 55%;
    background: linear-gradient(
      110deg,
      transparent,
      rgba(255,255,255,0.07),
      rgba(255,255,255,0.12),
      rgba(255,255,255,0.07),
      transparent
    );
    transform: skewX(-12deg);
    animation: photo-beam 9s ease-in-out infinite 3s;
    pointer-events: none;
    z-index: 5;
  }
}

@keyframes photo-beam {
  0%, 65%, 100% { left: -100%; }
  40%           { left: 180%; }
}


/* ══════════════════════════════════════════════════════════════════════════
   7. NAV CTA — Pulse Glow (draws the eye without being tacky)
   Breathes a soft lime halo every 3 seconds. Stops on hover.
══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  .vn-cta {
    animation: apex-cta-breathe 3.5s ease-in-out infinite !important;
  }
  .vn-cta:hover {
    animation: none !important;
  }
}

@keyframes apex-cta-breathe {
  0%, 100% {
    box-shadow:
      0 2px 8px  rgba(163,207,43,0.22),
      0 1px 0    rgba(255,255,255,0.22) inset !important;
  }
  50% {
    box-shadow:
      0 4px 24px rgba(163,207,43,0.45),
      0 0   44px rgba(163,207,43,0.10),
      0 1px 0    rgba(255,255,255,0.25) inset !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   8. SCROLL PROGRESS BAR — Animated gradient (not static lime)
══════════════════════════════════════════════════════════════════════════ */

.scroll-progress-bar {
  background: linear-gradient(
    90deg,
    #a3cf2b 0%,
    #00c4aa 45%,
    #a3cf2b 100%
  ) !important;
  background-size: 200% 100% !important;
  animation: apex-progress-flow 2.5s linear infinite !important;
}

@keyframes apex-progress-flow {
  0%   { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}


/* ══════════════════════════════════════════════════════════════════════════
   9. TICKER — Pause on hover so the user can actually read it
══════════════════════════════════════════════════════════════════════════ */

.vs-ticker:hover .vs-ticker-inner {
  animation-play-state: paused;
}


/* ══════════════════════════════════════════════════════════════════════════
   10. HERO EYEBROW — availability dot: richer pulse
══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  .vsh-dot {
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
    animation: apex-dot-sonar 2.2s ease-out infinite !important;
  }
}

@keyframes apex-dot-sonar {
  0%   { box-shadow: 0 0 0  0px rgba(52,211,153,0.70); }
  70%  { box-shadow: 0 0 0 12px rgba(52,211,153,0.00); }
  100% { box-shadow: 0 0 0  0px rgba(52,211,153,0.00); }
}


/* ══════════════════════════════════════════════════════════════════════════
   11. GLASS CARD — Hover border brightens to lime (accent edge)
   Adds a single-pixel lime top-border on hover for a "selected" feel.
══════════════════════════════════════════════════════════════════════════ */

.glass-card:hover,
.service-card:hover,
.srv-card:hover {
  border-top-color: rgba(163,207,43,0.35) !important;
}

.spatial-card:hover {
  border-color: rgba(163,207,43,0.30) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   12. HERO MAIN TITLE — Lime word: depth glow radiates on page load
══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  .vsh-line-word {
    animation:
      vsh-rise     0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both,
      apex-word-glow 4s ease-in-out 1.5s infinite !important;
  }
}

@keyframes apex-word-glow {
  0%, 100% {
    text-shadow:
      0 0  60px rgba(163,207,43,0.14),
      0 0 120px rgba(163,207,43,0.05);
  }
  50% {
    text-shadow:
      0 0  80px rgba(163,207,43,0.28),
      0 0 160px rgba(163,207,43,0.10),
      0 0 240px rgba(163,207,43,0.04);
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   13. ECOSYSTEM NEURAL MAP — Animated SVG pulse lines
   The lines between nodes travel light pulses like real neural signals.
══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {

  /* Each path gets a travelling dash */
  .eco-path {
    stroke-dasharray: 8 12;
    stroke-dashoffset: 20;
    animation: apex-neural-pulse 3s linear infinite;
  }

  .eco-path:nth-child(1) { animation-delay: 0s;    animation-duration: 2.8s; }
  .eco-path:nth-child(2) { animation-delay: 0.7s;  animation-duration: 3.2s; }
  .eco-path:nth-child(3) { animation-delay: 1.4s;  animation-duration: 2.5s; }
  .eco-path:nth-child(4) { animation-delay: 2.1s;  animation-duration: 3.6s; }

  @keyframes apex-neural-pulse {
    from { stroke-dashoffset: 20; }
    to   { stroke-dashoffset: -20; }
  }

  /* Core node: pulsing glow ring */
  .eco-core {
    animation: apex-core-breathe 4s ease-in-out infinite;
  }

  @keyframes apex-core-breathe {
    0%, 100% {
      box-shadow: 0 0 50px rgba(163,207,43,0.20), inset 0 0 20px rgba(163,207,43,0.10);
    }
    50% {
      box-shadow: 0 0 90px rgba(163,207,43,0.40), inset 0 0 40px rgba(163,207,43,0.20);
    }
  }

  /* Eco nodes: float in on entry */
  .eco-node {
    animation: apex-node-float 6s ease-in-out infinite;
  }
  .eco-node-1 { animation-delay: 0s; }
  .eco-node-2 { animation-delay: 1.5s; }
  .eco-node-3 { animation-delay: 3s; }
  .eco-node-4 { animation-delay: 4.5s; }

  @keyframes apex-node-float {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50%      { transform: translate(-50%, -50%) translateY(-6px); }
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   14. COURSE CARDS — Premium glass upgrade + shimmer
   Applies the same shimmer that's on glass-card to course cards.
══════════════════════════════════════════════════════════════════════════ */

.course-card {
  --shimmer-x: -120%;
  position: relative;
  overflow: hidden;
}

.course-card:hover {
  --shimmer-x: 165%;
  transition: --shimmer-x 0.70s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.course-card::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: var(--shimmer-x);
  width: 52%;
  background: linear-gradient(
    105deg,
    transparent               0%,
    rgba(255,255,255,0.035)  38%,
    rgba(255,255,255,0.090)  50%,
    rgba(255,255,255,0.035)  62%,
    transparent              100%
  );
  transform: skewX(-12deg);
  pointer-events: none;
  z-index: 3;
}

/* Featured course: lime top glow on hover */
.course-card.course-featured:hover {
  border-top-color: rgba(163,207,43,0.5) !important;
  box-shadow:
    0 0 0 0.5px rgba(255,255,255,0.08) inset,
    0 1px 0 rgba(163,207,43,0.3) inset,
    0 32px 80px rgba(163,207,43,0.10),
    0 8px 20px rgba(0,0,0,0.4) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   15. TESTIMONIALS — Dual-row gap + card improvements
══════════════════════════════════════════════════════════════════════════ */

/* Second row gets slightly smaller margin so rows feel intentionally close */
#testimonials .testimonials-marquee-wrap + .testimonials-marquee-wrap {
  margin-top: 16px;
}

/* Tighter testimonials section height */
#testimonials {
  padding-bottom: 80px !important;
}

/* Stars on testimonials: lime override (already inline but reinforce) */
.tmc-stars span {
  color: var(--vs-lime) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   16. VIBE STEP CARDS — Process steps connected animation
   Steps 01→04 connect visually with a travelling light dot on hover.
══════════════════════════════════════════════════════════════════════════ */

.vibe-steps {
  position: relative;
}

.vibe-step {
  --shimmer-x: -120%;
  position: relative;
  overflow: hidden;
  transition: --shimmer-x 0.7s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.vibe-step:hover {
  --shimmer-x: 165%;
  transform: translateY(-6px) scale(1.02) !important;
}

.vibe-step::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: var(--shimmer-x);
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.08), transparent);
  transform: skewX(-12deg);
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
}

.vstep-num {
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.vibe-step:hover .vstep-num {
  color: var(--vs-lime) !important;
  text-shadow: 0 0 20px rgba(163,207,43,0.4);
}


/* ══════════════════════════════════════════════════════════════════════════
   17. SPATIAL TIMELINE ORBS — Year labels pulse
   The year bubbles on the journey timeline feel alive.
══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: no-preference) {
  .spatial-card-wrap.spatial-card-now .spatial-orb {
    animation: apex-now-pulse 2s ease-in-out infinite;
  }

  @keyframes apex-now-pulse {
    0%, 100% {
      box-shadow: 0 0 0 0 rgba(163,207,43,0.5);
    }
    50% {
      box-shadow: 0 0 0 12px rgba(163,207,43,0);
    }
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   18. PORTFOLIO ITEMS — Image reveal on hover
   The overlay appears with a smooth scale + fade instead of instant.
══════════════════════════════════════════════════════════════════════════ */

.portfolio-item .port-overlay {
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  transform: translateY(8px);
}

.portfolio-item:hover .port-overlay {
  transform: translateY(0) !important;
}

.portfolio-item .port-img-wrap img {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.4s ease !important;
}

.portfolio-item:hover .port-img-wrap img {
  transform: scale(1.06) !important;
  filter: contrast(1.04) brightness(0.9) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   PRECISION FIXES — same engineering standard as the cursor
══════════════════════════════════════════════════════════════════════════ */

/* FIX 1: GSAP 3D tilt owns card transforms — remove CSS hover transform
   conflict. CSS translateY(!important) on hover was fighting GSAP
   rotationX/rotationY, causing cards to snap instead of spring. */
.glass-card:hover,
.bento-card:hover,
.course-card:hover,
.srv-card:hover,
.service-card:hover {
  transform: none !important;  /* GSAP handles all 3D transform — CSS steps back */
}

/* FIX 2: Per-card ambient glow — WowEngine sets --glow-x/--glow-y in JS.
   CSS uses them to paint a radial cursor-tracking glow under the glass. */
.glass-card,
.bento-card,
.srv-card,
.service-card,
.course-card,
.skill-card {
  --glow-x: 50%;
  --glow-y: 50%;
  background-image:
    radial-gradient(
      circle at var(--glow-x) var(--glow-y),
      rgba(163, 207, 43, 0.06) 0%,
      transparent 60%
    ) !important;
  transition: background-image 0s, box-shadow 0.3s ease, border-color 0.3s ease !important;
}

.glass-card:hover,
.bento-card:hover,
.srv-card:hover,
.service-card:hover,
.course-card:hover {
  background-image:
    radial-gradient(
      circle at var(--glow-x) var(--glow-y),
      rgba(163, 207, 43, 0.11) 0%,
      transparent 55%
    ) !important;
  border-color: rgba(163, 207, 43, 0.22) !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.07) inset,
    0 1px 0 rgba(255,255,255,0.14) inset,
    0 32px 72px rgba(0,0,0,0.52),
    0 8px 20px rgba(163,207,43,0.08) !important;
}

/* FIX 3: Nav active indicator line — WowEngine._initActiveNav injects it */
.vn-link {
  position: relative;
}

/* FIX 4: Section reveal — single source of truth using IntersectionObserver.
   WowEngine.ScrollTrigger owns [data-gsap-reveal].
   CSS adds the initial hidden state so there's no flash of unstyled content. */
[data-gsap-reveal] {
  opacity: 0;
  transform: translateY(32px);
  will-change: opacity, transform;
}

/* FIX 5: Scroll progress bar precision — uses scroller-inline-size token */
.scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #a3cf2b 0%, #00897b 100%);
  z-index: 999998;
  pointer-events: none;
  transform-origin: left;
  transition: width 0.1s linear;
}

/* FIX 6: Section tag — precise micro-typography */
.section-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* FIX 7: Button active state — same spring feel as cursor */
.btn-primary:active,
.btn-outline:active,
.vsh-btn-primary:active,
.vsh-btn-ghost:active {
  transform: scale(0.96) !important;
  transition-duration: 0.08s !important;
}

/* FIX 8: Image lazy-load fade — consistent with loading="lazy" + decoding="async" */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.5s ease;
}
img[loading="lazy"].loaded,
img[loading="lazy"][data-loaded] {
  opacity: 1;
}

/* ══════════════════════════════════════════════════════════════════════════
   SAFETY — Everything above respects prefers-reduced-motion
══════════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════════
   19. CURSOR ARBITRATION — Kill competing cursor layers
   supreme-v5.js InfinityCursor is the ONE true cursor. Silence the others.
══════════════════════════════════════════════════════════════════════════ */

.nano-liquid-cursor,
.premium-glow-cursor {
  display: none !important;
  pointer-events: none !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   20. PORTFOLIO TAG VARIANTS — omega-tag colour system
   Each tag type maps to a distinct brand colour from the design tokens.
══════════════════════════════════════════════════════════════════════════ */

.omega-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.omega-tag-featured {
  background: rgba(163, 207, 43, 0.12);
  color: #a3cf2b;
  border: 1px solid rgba(163, 207, 43, 0.30);
}

.omega-tag-ui {
  background: rgba(0, 137, 123, 0.12);
  color: #00897b;
  border: 1px solid rgba(0, 137, 123, 0.30);
}

.omega-tag-brand {
  background: rgba(124, 58, 237, 0.12);
  color: #a78bfa;
  border: 1px solid rgba(124, 58, 237, 0.30);
}

.omega-tag-social {
  background: rgba(245, 158, 11, 0.12);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.30);
}

.omega-tag-motion {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.30);
}

.omega-tag-web {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
  border: 1px solid rgba(59, 130, 246, 0.30);
}

/* Hover: subtle lift */
.omega-tag:hover {
  filter: brightness(1.15);
  transform: translateY(-1px);
  transition: filter 0.2s ease, transform 0.2s ease;
}


/* ══════════════════════════════════════════════════════════════════════════
   21. BENTO GRID HELPERS — Classes referenced in HTML but not yet styled
══════════════════════════════════════════════════════════════════════════ */

.roadmap-bento {
  display: grid;
  gap: 16px;
}

.automation-log {
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  color: rgba(163, 207, 43, 0.8);
  line-height: 1.7;
  padding: 12px 0;
}

.roi-integrated {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}


@media (prefers-reduced-motion: reduce) {

  /* Disable all apex animations */
  .vsh-orb-1,
  .vsh-orb-2,
  .vsh-orb-3         { animation: none !important; }

  .vn-cta            { animation: none !important; }

  .scroll-progress-bar { animation: none !important; background: #a3cf2b !important; }

  /* Disable ecosystem animations */
  .eco-path          { animation: none !important; }
  .eco-core          { animation: none !important; }
  .eco-node          { animation: none !important; }

  /* Disable course card shimmer */
  .course-card::after { display: none !important; }

  /* Disable vibe step shimmer */
  .vibe-step::after  { display: none !important; }

  .vsh-photo-glass::after { display: none !important; }

  .vsh-line-word {
    animation: vsh-rise 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.36s both !important;
  }

  /* Disable shimmer — use instantaneous state */
  .glass-card::after,
  .spatial-card::after,
  .vibe-what-card::after,
  .bento-card::after,
  .srv-card::after,
  .vsh-stat::after,
  .milestone-card::after { display: none !important; }

  /* Disable scroll-driven section animations */
  .section:not(#hero-main):not(.vsh),
  .section-header:not(.reveal),
  .section-header-worldclass:not(.reveal) {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}