/* Core Pillar 3: Reduced Risk Section */

#pillar-reduced-risk {
  --scrub-vh: 220;
  /* Reduced scroll distance */
  --p: 0;
  /* 0..1 entire section progress */
  --t: 0;
  /* 0..1 only in last 10% to shrink/dock */
  --expansion-p: 0;
  /* 0..1 for expansion phase (first 25% of scroll) */
  height: calc(var(--scrub-vh) * 1vh);
  position: relative;
  overflow: clip;
}

/* Title section on video */
.pillar-title-section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  padding: 10rem 2rem 2rem;
  z-index: 10;
  /* No background gradient - title is now outside video scaler */
}

/* Sticky positioning for header and title */
.pillar-title-section.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 20 !important;
}

.pillar-title-section .pillar-title {
  font-size: var(--section-header-size);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-white);
  line-height: 1.2;
  height: 45vh;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin-top: -1rem;
}

/* Ensure sticky positioning works - override any conflicting styles */
#pillar-reduced-risk .pillar-video-sticky {
  position: sticky !important;
  top: -4px !important;
  height: 100vh !important;
  width: 100% !important;
  overflow: hidden !important;
}

#pillar-reduced-risk .video-scaler {
  position: absolute !important;
  inset: 0 !important;
  display: grid !important;
  place-items: center !important;
  transform-origin: 50% 0% !important;
  /* Phase 1: Expand from small to full size (first 25% of scroll) */
  /* Phase 2: Stay full size while bullets show (25% to 90%) */
  /* Phase 3: Shrink back down (last 10%) */
  /* Start at 0vh (not cut off), expand to center, then shrink down */
  transform: translateY(calc(var(--expansion-p) * 7vh))
    scale(calc(0.7 + var(--expansion-p) * 0.3 - var(--t) * 0.3)) !important;
  border-radius: calc(
    (1 - var(--expansion-p)) * 2.5rem + var(--t) * 2.5rem
  ) !important;
  overflow: hidden !important;
  will-change: transform, border-radius !important;
  z-index: 1 !important;
}

#equity-growth-overlay {
  min-height: 100vh;
}

/* Video overlay that starts visible and fades out at the end */
.video-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 1;
  /* Start visible, fade out controlled by GSAP */
  pointer-events: none;
  z-index: 2;
  will-change: opacity;
}

/* Bullets container - positioned absolutely, becomes sticky like title */
.pillar-bullets-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 3;
  padding-top: max(30vh, 10rem);
}

.pillar-bullets-container .pillar-bullet-disclaimer {
  margin-top: 0rem;
  z-index: 1;
  pointer-events: auto;
}

.pillar-bullets-container .pillar-bullet-disclaimer a {
  pointer-events: auto;
  cursor: pointer;
}

/* Sticky state for bullets container */
.pillar-bullets-container.sticky {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  height: auto !important;
  z-index: 9 !important;
}

/* Individual bullet styling - positioned relatively inside container */
.pillar-bullet {
  position: relative;
  width: 100%;
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transform: translateY(100px);
  will-change: opacity, transform;
  transition: none;
  /* Animations handled by GSAP */
  padding: 0.5rem 0;
  margin: 0 auto;
  max-width: 600px;
}

/* Position bullets vertically within the sticky container */
.pillar-bullet[data-bullet='1'] {
  /* First bullet below title with more space to avoid overlap */
}

.pillar-bullet[data-bullet='2'] {
  margin-top: 2rem;
  /* Closer spacing between bullets */
}

.pillar-bullet[data-bullet='3'] {
  margin-top: 2rem;
  /* Closer spacing between bullets */
}

/* Bullet title styling - matches video title but smaller */
.pillar-bullet .bullet-title {
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.3;
  font-weight: 400;
  text-align: center;
  color: var(--color-white);
  max-width: 780px;
  margin: 0 auto;
  padding: 0 2rem;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
}

/* Caption styling - positioned absolutely at bottom of video-scaler */
#pillar-reduced-risk-caption {
  color: var(--color-accent-main);
  text-align: center;
  margin: 0;
  position: absolute;
  bottom: 7.5rem;
  left: 0;
  right: 0;
  z-index: -1;
  opacity: 0;
  /* Caption moves with the video as it scales */
}

/* Responsive Design */
@media (max-width: 900px) {
  .pillar-title-section {
    padding: 0rem 1.5rem 1.5rem;
  }

  .pillar-bullet .bullet-title {
    font-size: var(--section-header-size);
    padding: 0 1.5rem;
  }

  .pillar-bullet {
    max-width: 450px;
    margin: 0 auto;
    margin-top: 2rem;
  }
}

@media (max-width: 600px) {
  .pillar-title-section {
    padding: 0rem 1.5rem 1rem;
  }

  #first-bullet {
    padding-top: 3rem;
  }

  .pillar-bullet .bullet-title {
    font-size: clamp(1.5rem, 3vw, 2rem);
    padding: 0 1rem;
  }

  .pillar-bullets-container .pillar-bullet-disclaimer {
    margin-top: 4rem;
  }
}

/* Mobile scaling adjustment for screens under 400px */
@media (max-width: 525px) {
  #pillar-reduced-risk .video-scaler {
    /* Start larger on very small screens: 0.85 instead of 0.7 */
    /* Still expands to full size (1.0) and shrinks back to 0.85 */
    transform: translateY(calc(var(--expansion-p) * 7vh))
      scale(calc(0.92 + var(--expansion-p) * 0.15 - var(--t) * 0.15)) !important;
  }
}