/* ═══════════════════════════════════════════════════════════
   parallax.css
   Parallax depth system — perspective containers,
   layer speeds, 3D depth effects, scroll-driven
   movement styles. GSAP drives all transforms.
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   ROOT PARALLAX SCENE
   Perspective container for true 3D depth layers
   ───────────────────────────────────────────── */
.parallax-scene {
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  perspective: 1px;
}

/* ─────────────────────────────────────────────
   PARALLAX LAYER BASE
   All [data-speed] elements share these rules.
   JS reads data-speed and applies translateY.
   ───────────────────────────────────────────── */
.parallax-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* ─────────────────────────────────────────────
   PARALLAX SPEED CLASSES
   CSS-only fallback depth hints.
   GSAP overrides with precise scroll values.

   data-speed="0.15"  → very slow  (deep background)
   data-speed="0.25"  → slow       (background shapes)
   data-speed="0.45"  → medium     (profile image)
   data-speed="0.6"   → fast       (hero text)
   data-speed="0.7"   → faster     (project float el)
   data-speed="1.0"   → fastest    (foreground detail)
   ───────────────────────────────────────────── */
[data-speed="0.15"] { --parallax-depth: 0.15; }
[data-speed="0.2"]  { --parallax-depth: 0.2;  }
[data-speed="0.25"] { --parallax-depth: 0.25; }
[data-speed="0.3"]  { --parallax-depth: 0.3;  }
[data-speed="0.45"] { --parallax-depth: 0.45; }
[data-speed="0.5"]  { --parallax-depth: 0.5;  }
[data-speed="0.6"]  { --parallax-depth: 0.6;  }
[data-speed="0.7"]  { --parallax-depth: 0.7;  }
[data-speed="0.75"] { --parallax-depth: 0.75; }
[data-speed="0.8"]  { --parallax-depth: 0.8;  }
[data-speed="0.9"]  { --parallax-depth: 0.9;  }
[data-speed="1.0"]  { --parallax-depth: 1.0;  }

/* ─────────────────────────────────────────────
   HERO PARALLAX LAYERS
   4 depth levels for strong illusion of depth
   ───────────────────────────────────────────── */

/* Layer 0 — Deep background (slowest 0.15) */
.hero__bg {
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
  transform-origin: center center;
}

/* Layer 1 — Floating shapes (slow 0.25) */
.hero__shapes {
  position: absolute;
  inset: -20%;
  z-index: 1;
  pointer-events: none;
  transform-origin: center center;
}

/* Layer 2 — Profile image (medium 0.45) */
.hero__profile-wrap {
  z-index: 2;
  transform-origin: center center;
  transform-style: preserve-3d;
  backface-visibility: visible;
  -webkit-backface-visibility: visible;
}

/* Layer 3 — Text content (faster 0.6) */
.hero__content {
  position: relative;
  z-index: 3;
  transform-origin: center top;
}

/* ─────────────────────────────────────────────
   ABILITIES PARALLAX LAYERS
   ───────────────────────────────────────────── */
.abilities__bg {
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   PROJECT PARALLAX LAYERS
   Each project has its own depth stack
   ───────────────────────────────────────────── */

/* Project background — slow base */
.project__bg {
  position: absolute;
  inset: -40%;
  z-index: 0;
  pointer-events: none;
  transform-origin: center center;
  /* Extra overflow to prevent edge reveal during parallax */
  overflow: hidden;
}

/* Project content — sits on z:1 */
.project__content {
  position: relative;
  z-index: 2;
}

/* Project mockups — sits on z:3, moves slightly faster */
.project__mockups {
  position: relative;
  z-index: 3;
  transform-origin: center center;
}

/* Floating detail elements — z:4, fastest */
.project__float-el {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  transform-origin: center center;
}

/* ─────────────────────────────────────────────
   CONTACT PARALLAX LAYER
   ───────────────────────────────────────────── */
.contact__bg {
  position: absolute;
  inset: -30%;
  z-index: 0;
  pointer-events: none;
}

/* ─────────────────────────────────────────────
   3D MOCKUP DEPTH CONTAINERS
   Perspective wrapper gives true 3D depth to
   phone/desktop frames on scroll.
   ───────────────────────────────────────────── */
.mockup-scene {
  perspective: 1000px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

/* Phone frame — subtle 3D tilt driven by GSAP */
.mockup__frame--phone {
  transform-origin: center bottom;
  transform-style: preserve-3d;
}

/* Desktop frame — wider perspective origin */
.mockup__frame--desktop {
  transform-origin: center center;
  transform-style: preserve-3d;
  perspective-origin: 50% 40%;
}

/* ─────────────────────────────────────────────
   PARALLAX OVERFLOW MANAGEMENT
   Prevents layout shifts during large parallax moves
   ───────────────────────────────────────────── */
/* Hero needs visible overflow for the 3D flip to work */
.hero {
  overflow: visible;
}

.abilities,
.project,
.contact {
  overflow: hidden;
  isolation: isolate;
}

/* ─────────────────────────────────────────────
   PARALLAX TILT — mouse move effect
   Applied to mockup containers on hover.
   GSAP drives the actual transform values.
   ───────────────────────────────────────────── */
.tilt-container {
  transform-style: preserve-3d;
  perspective: 800px;
  will-change: transform;
}

.tilt-target {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Child elements lift in 3D space on tilt */
.tilt-target .mockup__frame--phone,
.tilt-target .mockup__frame--desktop {
  transform: translate3d(0, 0, 20px);
  transition: transform 0.3s var(--ease-out-expo);
}

.tilt-target:hover .mockup__frame--phone,
.tilt-target:hover .mockup__frame--desktop {
  transform: translate3d(0, 0, 40px);
}

/* ─────────────────────────────────────────────
   HORIZONTAL PARALLAX
   Used for abilities section subtle sideways drift
   ───────────────────────────────────────────── */
[data-parallax-x] {
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
}

[data-parallax-x="left"]  { --parallax-x-dir: -1; }
[data-parallax-x="right"] { --parallax-x-dir:  1; }

/* ─────────────────────────────────────────────
   SCROLL SCRUB MARKERS
   GSAP ScrollTrigger uses these as trigger points.
   Invisible in production.
   ───────────────────────────────────────────── */
.scrub-start,
.scrub-end {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
  visibility: hidden;
}

.scrub-start { top: 0; }
.scrub-end   { bottom: 0; }

/* ─────────────────────────────────────────────
   STICKY PARALLAX PANELS
   For pinned scroll sections (optional — wire
   in JS if implementing pin-based transitions)
   ───────────────────────────────────────────── */
.parallax-pin-wrap {
  overflow: hidden;
}

.parallax-pin-inner {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}



.project--maxxfitness 

.project--petmaster 

.project--couzllectors 

/* ─────────────────────────────────────────────
   SCROLL PROGRESS INDICATOR
   Thin line at top tracks page scroll position
   ───────────────────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(
    90deg,
    var(--color-accent) 0%,
    rgba(84, 67, 73, 0.5) 100%
  );
  z-index: calc(var(--z-nav) + 2);
  transform-origin: left center;
  will-change: width;
  pointer-events: none;
  /* Subtle glow on the bar */
  box-shadow: 0 0 8px var(--color-accent-glow);
}

/* ─────────────────────────────────────────────
   LENIS / SMOOTH SCROLL INTEGRATION
   If Lenis smooth scroll is added later,
   these classes ensure compatibility
   ───────────────────────────────────────────── */
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* ─────────────────────────────────────────────
   RESPONSIVE — reduce parallax on mobile
   Large parallax moves feel wrong on touch
   devices; scale them down significantly
   ───────────────────────────────────────────── */
@media (max-width: 768px) {

  /* Override all data-speed values on mobile —
     GSAP will read --parallax-mobile-scale */
  [data-speed] {
    --parallax-mobile-scale: 0.3;
  }

  /* Flatten deep backgrounds on mobile */
  .hero__bg,
  .hero__shapes,
  .abilities__bg,
  .project__bg,
  .contact__bg {
    inset: -10%;
  }

  /* Disable tilt on touch devices */
  .tilt-container {
    perspective: none;
  }

  .tilt-target {
    transform: none !important;
  }

    



}

/* ─────────────────────────────────────────────
   REDUCED MOTION — disable all parallax
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

  .parallax-layer,
  [data-speed],
  [data-parallax-x],
  .tilt-target,
  

  .hero__bg,
  .hero__shapes,
  .hero__profile-wrap,
  .project__bg,
  .abilities__bg,
  .contact__bg {
    inset: 0;
  }

}