my-protfolio/src/components/ScenicHeroJourney.module.css

/* ============================================================
   ScenicHeroJourney — hero stage with SVG backdrop
   Breakpoint strategy:
     ≤ 640px   → mobile   (large bold crop, small sun clear of toggle)
     641-1100px → tablet  (large bold crop, fluid width)
     1101-1440px → laptop (fluid clamp bleed — the approved look)
     > 1440px  → ultra-wide (frozen at 1440px values, overflow:visible)
   ============================================================ */

/* ── Container ─────────────────────────────────────────────── */
.scenicContainer {
  position: relative;
  width: 100%;
  height: auto;
  overflow: visible;
  background-color: var(--bg-page);
}

/* ── Hero Stage ─────────────────────────────────────────────── */
.heroStage {
  position: relative;
  width: 100%;
  height: auto;
  min-height: clamp(41.25rem, 52vw, 47.5rem);
  overflow: hidden;
  background: var(--bg-page);
}

/* ── Backdrop wrapper ───────────────────────────────────────── */
.heroBackdrop {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  user-select: none;
}

/* ── All backdrop SVGs are absolutely positioned ─────────────── */
.heroBackdrop svg,
.heroBackdrop img {
  position: absolute;
  display: block;
  height: auto;
}

.heroBackdrop svg path,
.heroBackdrop svg rect {
  transition: fill 0.3s ease;
}

/* ── Dark-mode styling ─────────────────────────────────────────── */
:global([data-theme="dark"]) .heroBackdrop {
  opacity: 1;
}

/* ── Celestial Bodies (Sun & Moon) ──────────────────────────── */
.backdropSun,
.backdropMoon {
  position: absolute;
  display: block;
  height: auto;
  pointer-events: none;
  user-select: none;
  transition: opacity 0.4s cubic-bezier(0.2, 0.8, 0.2, 1),
              transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Light mode (default): Sun shines brightly with solar glow, Moon hidden */
.backdropSun {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  filter: drop-shadow(0 0 16px var(--hero-illus-sun-glow)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.85));
}

.backdropMoon {
  opacity: 0;
  transform: scale(0.65) rotate(-25deg);
}

/* Dark mode: Bright half-moon shines with lunar glow, Sun gracefully sets */
:global([data-theme="dark"]) .backdropSun {
  opacity: 0;
  transform: scale(0.65) rotate(35deg);
}

:global([data-theme="dark"]) .backdropMoon {
  opacity: 1;
  transform: scale(1) rotate(0deg);
  filter: drop-shadow(0 0 16px var(--hero-illus-moon-glow)) drop-shadow(0 0 4px rgba(255, 255, 255, 0.8));
}

/* ================================================================
   LAPTOP  1101px – 1440px  (default — approved bleed look)
   Illustrations scale with vw and partially bleed off canvas edges.
   ================================================================ */
.backdropLeft {
  top: clamp(72px, 8vw, 100px);
  left: clamp(-220px, calc(22% - 28vw), -40px);
  width: clamp(240px, 28vw, 440px);
  animation: landscapeFloatLeft 8s var(--motion-ease-in-out) infinite alternate;
}

.backdropRight {
  top: clamp(80px, 9vw, 110px);
  right: clamp(-240px, calc(22% - 29vw), -40px);
  width: clamp(250px, 29vw, 460px);
  animation: landscapeFloatRight 9s var(--motion-ease-in-out) -2s infinite alternate;
}

@keyframes landscapeFloatLeft {
  to { transform: translate3d(0.5rem, -0.375rem, 0); }
}

@keyframes landscapeFloatRight {
  to { transform: translate3d(-0.5rem, 0.375rem, 0); }
}

.backdropSun,
.backdropMoon {
  top: clamp(20px, 3.5vw, 52px);
  right: clamp(100px, calc(22% + 2vw), 380px);
  width: clamp(52px, 10vw, 139px);
}

@media (prefers-reduced-motion: reduce) {
  .backdropLeft,
  .backdropRight {
    animation: none;
    transform: none;
  }
}

/* ================================================================
   TABLET  651px – 1100px
   Large illustrations with heavy bleed — bold fragments at edges.
   Width scales fluidly; fixed bleed offset keeps content clear.
   ================================================================ */
@media (max-width: 1100px) and (min-width: 651px) {
  .heroStage {
    height: auto;
    min-height: clamp(38rem, 66vw, 43rem);
  }

  /* Left — visible slice ≈ width - 150px, always < content padding */
  .backdropLeft {
    top: clamp(88px, 10vw, 108px);
    left: -150px;
    width: clamp(280px, 36vw, 360px);
  }

  /* Right — slightly larger, deeper bleed */
  .backdropRight {
    top: clamp(96px, 11vw, 116px);
    right: -165px;
    width: clamp(295px, 38vw, 380px);
  }

  /* Celestial — upper-right zone, between avatar and right cubes */
  .backdropSun,
  .backdropMoon {
    top: clamp(26px, 3.5vw, 44px);
    right: clamp(120px, 33vw, 280px);
    width: clamp(62px, 9vw, 96px);
  }
}

/* ================================================================
   MOBILE  ≤ 650px  (screensizes under 650px)
   Assets moved UP to the sides (matching desktop/tablet aesthetic):
   - Anchored via top, flanking the avatar & title
   - Fluid side bleed maintains balance between visibility & clearance
   - Zero collision with central avatar, title, buttons, or contact bar
   ================================================================ */
@media (max-width: 650px) {
  .heroStage {
    height: auto;
    min-height: 33.75rem;
  }

  .backdropLeft {
    top: clamp(75px, 16vw, 95px);
    bottom: auto;
    left: clamp(-100px, calc(20vw - 230px), -100px);
    width: clamp(200px, 44vw, 250px);
  }

  .backdropRight {
    top: clamp(82px, 18vw, 102px);
    bottom: auto;
    right: clamp(-130px, calc(20vw - 240px), -120px);
    width: clamp(210px, 46vw, 260px);
  }

  .backdropSun,
  .backdropMoon {
    top: clamp(24px, 5vw, 36px);
    right: clamp(52px, 15vw, 68px);
    width: clamp(34px, 8vw, 42px);
  }
}

/* ================================================================
   ULTRA-WIDE  > 1440px
   Canvas capped at 1440px but vw keeps growing → bleed explodes.
   Freeze at the values the clamp() formulas resolve to @ 1440px and
   keep enough stage height to contain the full illustration.
   ================================================================ */
@media (min-width: 1441px) {
  .heroStage {
    height: auto;
    min-height: 47.5rem;
    overflow: visible;
  }

  .backdropLeft {
    top: 100px;
    left: -86px;
    width: 403px;
  }

  .backdropRight {
    top: 110px;
    right: -101px;
    width: 418px;
  }

  .backdropSun,
  .backdropMoon {
    top: 50px;
    right: 346px;
    width: 139px;
  }
}