.section-features {
  background: linear-gradient(
    90.87deg,
    rgba(69, 120, 130, 0) -31.4%,
    rgba(69, 120, 130, 0.3) 99.25%
  );
  position: relative;
  padding-top: 30px;
  /* Height set by JS: slideCount * 100vh */
}

.features-sticky {
  /* Native CSS sticky - works reliably on all platforms including Mac */
  position: sticky;
  top: max(0px, calc((100vh - 780px) / 2));
  height: 780px;
  overflow: hidden;
  z-index: 1;
}

.features-container {
  max-width: 1440px;
  max-height: 720px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
}

.features-header {
  font-family: Cabinet Grotesk;
  font-weight: 300;
  font-size: 58px;
  margin: 0;
  line-height: 96%;
  letter-spacing: 0%;
  color: #1a5259;
  max-width: 804px;
}

.features-header span {
  font-family: Cabinet Grotesk;
  font-weight: 400;
  font-size: 58px;
  line-height: 96%;
  letter-spacing: 0%;
}

.features-left {
  position: relative;
  flex: 1;
  margin-left: 30px;
}

.features-left-content {
  position: absolute;
  top: 0;
  left: 0;
  max-height: 661px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 86px 0 0px 70px;
  opacity: 0;
  visibility: hidden;
  /* Fade up effect disabled
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  */
}

.features-left-content.active {
  opacity: 1;
  visibility: visible;
}

/* Header text container - clips the sliding header */
.features-header-wrapper {
  position: relative;
  overflow: hidden;
  flex: 1;
}

/* Header text slides in/out */
.features-header {
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.features-left-content.slide-up .features-header {
  transform: translateY(-100%);
}

.features-left-content.slide-down .features-header {
  transform: translateY(100%);
}

.features-left-content.active .features-header {
  transform: translateY(0);
}

.features-label {
  font-family: Manrope;
  font-weight: 700;
  font-size: 20px;
  line-height: 90%;
  letter-spacing: 6%;
  text-transform: uppercase;
  color: #1a5259;
}

.features-right {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 350px;
  height: 720px; /* 2 squares: 360px each */
  margin-right: 30px;
}

.features-right-content {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  /* Fade up effect disabled
  transition:
    opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0.8s cubic-bezier(0.16, 1, 0.3, 1);
  */
}

.features-right-content.active {
  opacity: 1;
  visibility: visible;
}

.features-square {
  width: 350px;
  height: 360px;
  object-fit: cover;
  display: flex;
  align-items: center;
  justify-content: center;
}

.features-square img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.features-square-illustrator {
  background-color: #1a5259;
  filter: drop-shadow(15px 30px 11px #1a525946);
}

.features-square-logo {
  background: linear-gradient(
    -41.68deg,
    rgba(255, 255, 255, 0) 24.99%,
    rgba(255, 255, 255, 0.5) 96.4%
  );
}

/* Animated Yellow Dot */
.features-yellow-dot {
  position: absolute;
  width: 22px;
  height: 22px;
  background-color: #ffd88a;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10;
  /* Hidden by default until SVG positions are loaded */
  opacity: 0;
  visibility: hidden;
  /* Position controlled by CSS custom properties */
  bottom: var(--dot-y, 200px);
  left: var(--dot-x, 175px);
  /* Luxurious smooth animation with ease-out curve */
  transition:
    left 1s cubic-bezier(0.16, 1, 0.3, 1),
    bottom 1s cubic-bezier(0.16, 1, 0.3, 1),
    width 1s cubic-bezier(0.16, 1, 0.3, 1),
    height 1s cubic-bezier(0.16, 1, 0.3, 1),
    opacity 0.5s ease,
    visibility 0.5s ease;
  will-change: left, bottom, width, height;
}

/* Show dot only after SVG positions are successfully loaded */
.features-yellow-dot.is-visible {
  opacity: 1;
  visibility: visible;
}

/* Inline SVG Styling */
.features-svg-inline {
  max-width: 100%;
  max-height: 100%;
}

/* Eclipse SVG Ring Animation */
.eclipse-ring {
  transform-origin: center center;
  transition:
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When leaving slide 0 (eclipse), collapse rings to a line */
.features-svg-inline[data-slide="0"].collapsing .eclipse-ring {
  transform: scaleX(0.02);
  opacity: 0 !important;
}

/* Stagger the animation for each ring */
.features-svg-inline[data-slide="0"].collapsing .eclipse-ring[data-ring="0"] {
  transition-delay: 0s;
}
.features-svg-inline[data-slide="0"].collapsing .eclipse-ring[data-ring="1"] {
  transition-delay: 0.05s;
}
.features-svg-inline[data-slide="0"].collapsing .eclipse-ring[data-ring="2"] {
  transition-delay: 0.1s;
}
.features-svg-inline[data-slide="0"].collapsing .eclipse-ring[data-ring="3"] {
  transition-delay: 0.15s;
}

/* Reset transform when returning to slide 0 (opacity preserved from SVG) */
.features-svg-inline[data-slide="0"]:not(.collapsing) .eclipse-ring {
  transform: scaleX(1);
}

/* ===== Bar Chart SVG (Slide 1) Animations ===== */

/* Vertical lines - grow from bottom */
.chart-line {
  transform-origin: center bottom;
  transition:
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.6s ease;
}

/* Initial state - lines collapsed */
.features-svg-inline[data-slide="1"]:not(.entering) .chart-line {
  transform: scaleY(0);
  opacity: 0;
}

/* Entering - lines grow from bottom with stagger */
.features-svg-inline[data-slide="1"].entering .chart-line {
  transform: scaleY(1);
  opacity: 1;
}

/* Stagger animation for each line (7 lines, center first) */
.features-svg-inline[data-slide="1"].entering .chart-line[data-line="3"] {
  transition-delay: 0s;
}
.features-svg-inline[data-slide="1"].entering .chart-line[data-line="2"],
.features-svg-inline[data-slide="1"].entering .chart-line[data-line="4"] {
  transition-delay: 0.08s;
}
.features-svg-inline[data-slide="1"].entering .chart-line[data-line="1"],
.features-svg-inline[data-slide="1"].entering .chart-line[data-line="5"] {
  transition-delay: 0.16s;
}
.features-svg-inline[data-slide="1"].entering .chart-line[data-line="0"],
.features-svg-inline[data-slide="1"].entering .chart-line[data-line="6"] {
  transition-delay: 0.24s;
}

/* Circles - bloom effect */
.chart-circle {
  transform-origin: center center;
  transition:
    transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.6s ease;
}

/* Initial state - circles hidden */
.features-svg-inline[data-slide="1"]:not(.entering) .chart-circle {
  transform: scale(0);
  opacity: 0;
}

/* Entering - circles bloom */
.features-svg-inline[data-slide="1"].entering .chart-circle {
  transform: scale(1);
  opacity: 1;
}

/* Stagger bloom animation for circles */
.features-svg-inline[data-slide="1"].entering .chart-circle[data-circle="0"],
.features-svg-inline[data-slide="1"].entering .chart-circle[data-circle="1"] {
  transition-delay: 0.2s;
}
.features-svg-inline[data-slide="1"].entering .chart-circle[data-circle="2"],
.features-svg-inline[data-slide="1"].entering .chart-circle[data-circle="3"] {
  transition-delay: 0.35s;
}

/* Exiting animation */

/* Middle line (line 3) slides to the right */
.features-svg-inline[data-slide="1"].exiting .chart-line[data-line="3"] {
  transform: translateX(120px) scaleY(1);
  opacity: 0;
  transition-delay: 0s;
}

/* Right side lines (4, 5, 6) collapse to 0 height */
.features-svg-inline[data-slide="1"].exiting .chart-line[data-line="4"] {
  transform: scaleY(0);
  opacity: 0;
  transition-delay: 0.05s;
}
.features-svg-inline[data-slide="1"].exiting .chart-line[data-line="5"] {
  transform: scaleY(0);
  opacity: 0;
  transition-delay: 0.1s;
}
.features-svg-inline[data-slide="1"].exiting .chart-line[data-line="6"] {
  transform: scaleY(0);
  opacity: 0;
  transition-delay: 0.15s;
}

/* Left side lines (0, 1, 2) collapse to 0 height */
.features-svg-inline[data-slide="1"].exiting .chart-line[data-line="2"] {
  transform: scaleY(0);
  opacity: 0;
  transition-delay: 0.05s;
}
.features-svg-inline[data-slide="1"].exiting .chart-line[data-line="1"] {
  transform: scaleY(0);
  opacity: 0;
  transition-delay: 0.1s;
}
.features-svg-inline[data-slide="1"].exiting .chart-line[data-line="0"] {
  transform: scaleY(0);
  opacity: 0;
  transition-delay: 0.15s;
}

/* Circle shrinks then slides to the right */
.features-svg-inline[data-slide="1"].exiting .chart-circle {
  transform: scale(0.6) translateX(80px);
  opacity: 0;
  transition:
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.5s ease 0.2s;
}

/* ===== Third SVG (Slide 2) Animations ===== */

/* Vertical lines - grow from bottom */
.chart2-line {
  transform-origin: center bottom;
  transition:
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.5s ease;
}

/* Initial state - lines collapsed */
.features-svg-inline[data-slide="2"]:not(.entering) .chart2-line {
  transform: scaleY(0);
  opacity: 0;
}

/* Entering - lines grow from bottom with stagger (right to left) */
.features-svg-inline[data-slide="2"].entering .chart2-line {
  transform: scaleY(1);
  opacity: 1;
}

/* Stagger animation - rightmost first (line 5), then left */
.features-svg-inline[data-slide="2"].entering .chart2-line[data-line="5"] {
  transition-delay: 0s;
}
.features-svg-inline[data-slide="2"].entering .chart2-line[data-line="4"] {
  transition-delay: 0.06s;
}
.features-svg-inline[data-slide="2"].entering .chart2-line[data-line="3"] {
  transition-delay: 0.12s;
}
.features-svg-inline[data-slide="2"].entering .chart2-line[data-line="2"] {
  transition-delay: 0.18s;
}
.features-svg-inline[data-slide="2"].entering .chart2-line[data-line="1"] {
  transition-delay: 0.24s;
}
.features-svg-inline[data-slide="2"].entering .chart2-line[data-line="0"] {
  transition-delay: 0.3s;
}

/* Circles - bloom effect (transform-origin set dynamically in JS) */
.chart2-circle {
  transition:
    transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.5s ease;
}

/* Initial state - circles hidden */
.features-svg-inline[data-slide="2"]:not(.entering) .chart2-circle {
  transform: scale(0);
  opacity: 0;
}

/* Entering - circles bloom */
.features-svg-inline[data-slide="2"].entering .chart2-circle {
  transform: scale(1);
  opacity: 1;
  transition-delay: 0.1s;
}

/* Exiting animation */
.features-svg-inline[data-slide="2"].exiting .chart2-line {
  transform: scaleY(0);
  opacity: 0;
}

.features-svg-inline[data-slide="2"].exiting .chart2-circle {
  transform: scale(0);
  opacity: 0;
}

/* Responsive - Tablet/Mobile: Hide desktop features */
@media (max-width: 992px) {
  .section-features {
    display: none;
  }
}

/* =============================================
   MOBILE FEATURES SECTION - Slider with navigation
   ============================================= */
.section-features-mobile {
  display: none;
}

@media (max-width: 992px) {
  .section-features-mobile {
    display: block;
    position: relative;
    background: linear-gradient(
      90.87deg,
      rgba(69, 120, 130, 0) -31.4%,
      rgba(69, 120, 130, 0.3) 99.25%
    );
    padding: 60px 0 15px;
  }

  .features-mobile-sticky {
    position: relative;
  }

  .features-mobile-container {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding: 0 15px;
  }

  .features-mobile-background {
    display: none;
  }

  /* Left side - Text content */
  .features-mobile-left {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
  }

  /* Container for animated headers - fixed height based on longest text */
  .features-mobile-headers {
    position: relative;
    height: var(--content-height, 100px);
    overflow: hidden; /* Clip text when it slides out */
  }

  .features-mobile-content {
    /* All slides positioned absolutely for smooth transitions */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(100%);
    visibility: hidden;
    transition: transform 0.4s ease, visibility 0s 0.4s; /* Visibility changes after transform completes */
  }

  /* Show active content item */
  .features-mobile-content.active {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.4s ease, visibility 0s 0s; /* Visibility changes immediately */
  }

  /* Direction-aware slide animations - only affects the header inside content */
  .features-mobile-content.slide-up {
    transform: translateY(-100%);
  }

  .features-mobile-content.slide-down {
    transform: translateY(100%);
  }

  .features-mobile-header {
    font-family: Cabinet Grotesk;
    font-weight: 300;
    font-size: 32px;
    line-height: 96%;
    letter-spacing: 0%;
    color: #1a5259;
    margin: 0;
  }

  .features-mobile-header span {
    font-family: Cabinet Grotesk;
    font-weight: 400;
    font-size: 32px;
    line-height: 96%;
  }

  /* Label stays constant - positioned outside the animated area */
  .features-mobile-label-static {
    font-family: Manrope;
    font-weight: 700;
    font-size: 14px;
    line-height: 90%;
    letter-spacing: 6%;
    text-transform: uppercase;
    color: #1a5259;
    margin-top: 20px;
  }

  /* Hide individual slide labels - we use the static one */
  .features-mobile-content .features-mobile-label {
    display: none;
  }

  /* Fallback if static label not present */
  .features-mobile-label {
    font-family: Manrope;
    font-weight: 700;
    font-size: 14px;
    line-height: 90%;
    letter-spacing: 6%;
    text-transform: uppercase;
    color: #1a5259;
  }

  /* Navigation Buttons - matching insights-nav-btn style */
  .features-mobile-nav {
    display: flex;
    gap: 6px;
    margin-top: 30px;
  }

  .features-mobile-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: transparent;
    border: 1px solid rgba(69, 120, 130, 0.3);
    border-radius: 9999px;
    cursor: pointer;
    color: #457882;
    transition: background-color 0.3s ease, border-color 0.3s ease;
  }

  .features-mobile-nav-btn:hover:not(:disabled) {
    background-color: rgba(69, 120, 130, 0.1);
    border-color: rgba(69, 120, 130, 0.5);
  }

  .features-mobile-nav-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .features-mobile-nav-btn svg {
    width: 24px;
    height: 24px;
  }

  /* Right side - Visual content (squares in a row) */
  .features-mobile-right {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
  }

  .features-mobile-squares {
    /* Hide all by default */
    display: none;
    flex-direction: row;
    gap: 2px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
  }

  /* Show active squares */
  .features-mobile-squares.active {
    display: flex;
    opacity: 1;
    visibility: visible;
  }

  .features-mobile-square-logo {
    flex: 1;
    min-width: 0;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(
      -41.68deg,
      rgba(255, 255, 255, 0) 24.99%,
      rgba(255, 255, 255, 0.5) 96.4%
    );
  }

  .features-mobile-square-logo img {
    max-width: 80%;
    max-height: 80%;
    object-fit: contain;
  }

  .features-mobile-square-illustrator {
    flex: 1;
    min-width: 0;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #1a5259;
    padding: 10px;
  }

  .features-mobile-square-illustrator img,
  .features-mobile-svg-inline {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  /* Animated Yellow Dot */
  .features-mobile-yellow-dot {
    position: absolute;
    width: 16px;
    height: 16px;
    background-color: #ffd88a;
    border-radius: 50%;
    pointer-events: none;
    z-index: 10;
    opacity: 0;
    visibility: hidden;
    bottom: var(--dot-y, 100px);
    left: var(--dot-x, 50%);
    transition:
      left 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      bottom 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      width 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      height 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.3s ease,
      visibility 0.3s ease;
    will-change: left, bottom, width, height;
  }

  .features-mobile-yellow-dot.is-visible {
    opacity: 1;
    visibility: visible;
  }

  /* Mobile SVG inline styles */
  .features-mobile-svg-inline {
    max-width: 100%;
    max-height: 100%;
  }

  /* Eclipse ring animation for mobile */
  .features-mobile-svg-inline .eclipse-ring {
    transform-origin: center center;
    transition:
      transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .features-mobile-svg-inline.collapsing .eclipse-ring {
    transform: scaleX(0.02);
    opacity: 0 !important;
  }

  /* Chart animations for mobile */
  .features-mobile-svg-inline .chart-line,
  .features-mobile-svg-inline .chart2-line {
    transform-origin: center bottom;
    transition:
      transform 0.6s cubic-bezier(0.4, 0, 0.2, 1),
      opacity 0.5s ease;
  }

  .features-mobile-svg-inline:not(.entering) .chart-line,
  .features-mobile-svg-inline:not(.entering) .chart2-line {
    transform: scaleY(0);
    opacity: 0;
  }

  .features-mobile-svg-inline.entering .chart-line,
  .features-mobile-svg-inline.entering .chart2-line {
    transform: scaleY(1);
    opacity: 1;
  }

  .features-mobile-svg-inline .chart-circle,
  .features-mobile-svg-inline .chart2-circle {
    transform-origin: center center;
    transition:
      transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
      opacity 0.5s ease;
  }

  .features-mobile-svg-inline:not(.entering) .chart-circle,
  .features-mobile-svg-inline:not(.entering) .chart2-circle {
    transform: scale(0);
    opacity: 0;
  }

  .features-mobile-svg-inline.entering .chart-circle,
  .features-mobile-svg-inline.entering .chart2-circle {
    transform: scale(1);
    opacity: 1;
  }
}