/* ==========================================================================
   PARALLAX STORYTELLING — Cinematic scroll reveals (About page)
   ========================================================================== */

.parallax-story {
  position: relative;
  overflow: hidden;
}

/* Floating background glows for depth */
.parallax-story::before,
.parallax-story::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}

.parallax-story::before {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.04) 0%, transparent 70%);
  top: 10%;
  left: -80px;
  filter: blur(40px);
}

.parallax-story::after {
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(var(--accent-rgb), 0.03) 0%, transparent 70%);
  bottom: 15%;
  right: -60px;
  filter: blur(30px);
}

.parallax-story.ps-active::before,
.parallax-story.ps-active::after {
  opacity: 1;
}

/* --- Cinematic slide reveals — alternating left/right --- */
.ps-cin {
  opacity: 0;
  filter: blur(3px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform, filter;
}

.ps-cin-left {
  transform: translateX(-50px) translateY(10px);
}

.ps-cin-right {
  transform: translateX(50px) translateY(10px);
}

.ps-cin.ps-visible {
  opacity: 1;
  transform: translateX(0) translateY(0);
  filter: blur(0);
}

/* Stagger delays */
.ps-cin.ps-delay-1 { transition-delay: 0.12s; }
.ps-cin.ps-delay-2 { transition-delay: 0.24s; }
.ps-cin.ps-delay-3 { transition-delay: 0.36s; }

/* --- Parallax depth layers --- */
.ps-depth {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* Subtle accent line that grows as section enters viewport */
.ps-accent-line {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 0;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(var(--accent-rgb), 0.3) 30%,
    rgba(var(--accent-rgb), 0.15) 70%,
    transparent 100%
  );
  transform: translateX(-50%);
  transition: height 1.2s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}

.parallax-story.ps-active .ps-accent-line {
  height: 100%;
}

/* --- Floating orb decorations for depth --- */
.ps-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.5s ease;
}

.ps-orb-1 {
  width: 6px;
  height: 6px;
  background: rgba(var(--accent-rgb), 0.25);
  box-shadow: 0 0 12px rgba(var(--accent-rgb), 0.2);
  top: 20%;
  right: 12%;
}

.ps-orb-2 {
  width: 4px;
  height: 4px;
  background: rgba(var(--accent-rgb), 0.15);
  box-shadow: 0 0 8px rgba(var(--accent-rgb), 0.15);
  top: 55%;
  left: 8%;
}

.ps-orb-3 {
  width: 3px;
  height: 3px;
  background: rgba(var(--accent-rgb), 0.2);
  box-shadow: 0 0 10px rgba(var(--accent-rgb), 0.18);
  bottom: 25%;
  right: 18%;
}

.parallax-story.ps-active .ps-orb {
  opacity: 1;
}

/* --- Section heading cinematic entrance --- */
.ps-heading {
  opacity: 0;
  transform: translateY(15px) scale(0.97);
  filter: blur(4px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.ps-heading.ps-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* --- Mobile adjustments --- */
@media (max-width: 768px) {
  .ps-cin-left {
    transform: translateX(-30px) translateY(8px);
  }
  .ps-cin-right {
    transform: translateX(30px) translateY(8px);
  }
  .parallax-story::before {
    width: 200px;
    height: 200px;
    left: -60px;
  }
  .parallax-story::after {
    width: 140px;
    height: 140px;
    right: -40px;
  }
  .ps-orb { display: none; }
}

/* --- Reduced motion: disable all parallax-story animations --- */
@media (prefers-reduced-motion: reduce) {
  .ps-cin,
  .ps-cin-left,
  .ps-cin-right {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .ps-heading {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  .parallax-story::before,
  .parallax-story::after {
    opacity: 0 !important;
  }
  .ps-orb {
    display: none !important;
  }
  .ps-accent-line {
    display: none !important;
  }
  .ps-depth {
    transform: none !important;
    transition: none !important;
  }
}