/* ==========================================================================
     Scroll-Triggered Entry Framework (Activates strictly when .is-triggered is present)
     ========================================================================== */
  
  /* Left Hand Side Headline Entrance */
  #servicesSection.is-triggered .lhs-panel {
      animation: lhsSlideIn 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes lhsSlideIn {
      0% { opacity: 0; transform: translateY(25px); filter: blur(4px); }
      100% { opacity: 1; transform: translateY(0); filter: blur(0); }
  }
  @media (min-width: 1024px) {
      #servicesSection.is-triggered .lhs-panel {
          animation: lhsSlideInDesktop 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
      }
      @keyframes lhsSlideInDesktop {
          0% { opacity: 0; transform: translateX(-40px); filter: blur(4px); }
          100% { opacity: 1; transform: translateX(0); filter: blur(0); }
      }
  }

  /* Desktop Isometric Engine Core Animations */
  @media (min-width: 1024px) {
      #servicesSection.is-triggered .iso-layer {
          animation: stack3DEntrance 1.1s cubic-bezier(0.34, 1.3, 0.64, 1) forwards;
          animation-delay: var(--layer-delay);
      }
      #servicesSection.is-triggered .interactive-row {
          animation: rowRevealEntrance 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
          animation-delay: var(--row-delay);
      }
      @keyframes stack3DEntrance {
          0% { opacity: 0; transform: translateY(140px) rotateX(15deg) scale(0.7); }
          100% { opacity: 1; transform: translateY(0) rotateX(0) scale(1); }
      }
      @keyframes rowRevealEntrance {
          0% { opacity: 0; transform: translateY(var(--base-top, 0)) scale(0.8); }
          100% { opacity: 1; transform: translateY(var(--base-top, 0)) scale(1); }
      }

      /* Structural positioning transitions */
      .interactive-row {
          position: absolute;
          transform: translateY(var(--base-top));
          transition: transform 0.6s cubic-bezier(0.25, 1, 0.22, 1), opacity 0.4s ease;
      }
      .iso-layer .svg-active { display: none; }
      .iso-layer .svg-inactive { display: block; }
      .iso-layer.active-layer .svg-active { display: block; }
      .iso-layer.active-layer .svg-inactive { display: none; }
      
      .iso-layer { transition: transform 0.6s cubic-bezier(0.25, 1, 0.22, 1), filter 0.4s ease; }
      .iso-layer.active-layer { transform: scale(1.12) translateY(-10px); filter: drop-shadow(0 15px 30px rgba(255, 0, 0, 0.45)); }
      
      @keyframes activeMicroPulse {
          0%, 100% { transform: translateY(0) scale(1); }
          50% { transform: translateY(-2px) scale(1.01); }
      }
      .iso-layer.active-layer .active-pulse { animation: activeMicroPulse 2s ease-in-out infinite; }

      .pill-desc {
          max-height: 0; opacity: 0; overflow: hidden; font-size: 12px; font-weight: 400; line-height: 1.45; color: #F3F4F6;
          transition: max-height 0.45s cubic-bezier(0.25, 1, 0.2, 1), opacity 0.3s ease, margin-top 0.3s ease;
      }
      /* rounded-full computes to border-radius: 9999px. A rendered corner radius clamps at
         half the box's own height, so at 42px tall that still looks like a capsule -- but
         animating 9999px -> 16px is linear in raw pixels, and 9999 stays far above the clamp
         for ~90% of the transition. The shape reads as a full oval almost the whole time and
         only visually snaps to the rounded rect in the last few ms. Starting from a value
         already sized to the resting pill (half of its 42px height) makes the same capsule
         shape at rest, but the animated distance to 16px is small enough to look continuous. */
      .service-pill {
          border-radius: 21px !important;
          transition: width 0.45s cubic-bezier(0.25, 1, 0.28, 1), padding 0.45s cubic-bezier(0.25, 1, 0.28, 1),
                      background-color 0.35s ease, box-shadow 0.35s ease, color 0.2s ease,
                      border-radius 0.45s cubic-bezier(0.25, 1, 0.28, 1) !important;
      }
      .service-pill.pill-expanded {
          background-color: #FF0000 !important; color: #FFFFFF !important; border-radius: 16px !important;
          width: 265px !important; padding: 16px 18px !important; box-shadow: 0 20px 40px -5px rgba(255, 0, 0, 0.5);
      }
      .service-pill.pill-expanded .pill-title { text-align: left !important; }
      .service-pill.pill-expanded .pill-desc { text-align: left !important; max-height: 130px; opacity: 1; margin-top: 10px; }
      .interactive-row.row-active { z-index: 50; }
      .interactive-row.row-active .connector-dot { background-color: #FF0000 !important; transform: scale(1.5); box-shadow: 0 0 10px #FF0000; }

      .interactive-row[data-index="0"] { --base-top: -132px; }
      .interactive-row[data-index="1"] { --base-top: -88px; }
      .interactive-row[data-index="2"] { --base-top: -44px; }
      .interactive-row[data-index="3"] { --base-top: 0px; }
      .interactive-row[data-index="4"] { --base-top: 44px; }
      .interactive-row[data-index="5"] { --base-top: 88px; }
      .interactive-row[data-index="6"] { --base-top: 132px; }
  }

  /* Mobile Layout Interaction Styles */
  .mobile-service-row.row-expanded {
      background-color: #1a0202 !important;
      border-color: rgba(255, 0, 0, 0.3) !important;
      box-shadow: 0 10px 30px -10px rgba(255, 0, 0, 0.2);
  }
  .mobile-service-row.row-expanded .mobile-row-title { color: #FF0000 !important; }
  .mobile-service-row.row-expanded .mobile-chevron-icon {
      background-color: #FF0000 !important; color: #FFFFFF !important; transform: rotate(180deg);
  }
  .mobile-service-row.row-expanded .mobile-row-desc { max-height: 120px; opacity: 1; }

  @keyframes shine { 100% { transform: skewX(-12deg) translateX(250%); } }
  .animate-shine { animation: shine 0.8s ease-in-out; }