// =============================================================================
// HELP PAGE STYLES - PREMIUM APPLE-INSPIRED DESIGN WITH ADVANCED MICRO-INTERACTIONS
// =============================================================================

@use '../abstracts/variables' as *;
@use '../abstracts/mixins' as *;

// Wrap all help styles with .alt-audit-section for CSS isolation
.alt-audit-section {
  &.alt-audit-help {
    // Enhanced Custom Scrollbar for Help Page
    @include custom-scrollbar;

    // Enhanced Header with Premium Entrance Animation
    .alt-audit-header {
      position: relative;
      margin-bottom: $space-8;
      padding: $space-8;
      border: 1px solid rgba($color-info, 0.1);
      border-radius: $radius-apple-lg;
      background: linear-gradient(135deg, rgba($color-info, 0.08) 0%, rgba($color-info, 0.03) 100%);
      overflow: hidden;
      box-shadow:
        0 4px 24px rgba($color-info, 0.08),
        inset 0 1px 0 rgba(white, 0.4);
      animation: fadeInDown 0.6s cubic-bezier(0.16, 1, 0.3, 1);
      backdrop-filter: blur(20px);

      // Premium gradient overlay
      &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba($color-info, 0.3), transparent);
        animation: shimmer 3s ease-in-out infinite;
      }

      @keyframes fadeInDown {
        from {
          opacity: 0;
          transform: translateY(-30px) scale(0.98);
        }

        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      @keyframes shimmer {
        0%,
        100% {
          opacity: 0;
        }

        50% {
          opacity: 1;
        }
      }

      h1 {
        @include heading-large;

        margin: 0 0 $space-2;
        background: linear-gradient(135deg, $color-gray-900 0%, $color-info 80%, $color-primary 100%);
        background-size: 200% auto;
        letter-spacing: -0.02em;
        animation:
          fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both,
          gradientShift 8s ease-in-out infinite;
        -webkit-text-fill-color: transparent;
        background-clip: text;
      }

      @keyframes gradientShift {
        0%,
        100% {
          background-position: 0% center;
        }

        50% {
          background-position: 100% center;
        }
      }

      .alt-audit-subtitle {
        @include body-large;

        margin: 0;
        color: $color-gray-600;
        line-height: 1.6;
        animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }
    }

    // Help Container Layout with Staggered Animation
    .alt-audit-help-container {
      display: grid;
      gap: $space-6;
      grid-template-columns: 250px 1fr;
      animation: slideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both;

      @keyframes slideUp {
        from {
          opacity: 0;
          transform: translateY(20px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      @include media-down(md) {
        grid-template-columns: 1fr;
      }
    }

    // Premium Help Navigation (Sidebar) with Advanced Interactions
    .help-nav {
      position: sticky;
      top: $space-6;
      display: flex;
      flex-direction: column;
      gap: $space-2;
      height: fit-content;
      padding: $space-4;
      border-radius: $radius-apple-md;
      background: $color-background;
      box-shadow:
        $shadow-sm,
        0 0 0 1px rgba($color-gray-200, 0.5);
      transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);

      // Hover lift effect for entire nav
      &:hover {
        box-shadow:
          $shadow-md,
          0 0 0 1px rgba($color-primary, 0.1);
      }

      @include media-down(md) {
        position: relative;
        top: 0;
        flex-direction: row;
        overflow-x: auto;

        @include custom-scrollbar;
      }

      .nav-link {
        @include flex-start;

        position: relative;
        padding: $space-3 $space-4;
        border: none;
        border-radius: $radius-apple-sm;
        background: transparent;
        color: $color-gray-600;
        font-family: $font-secondary;
        font-size: $font-size-sm;
        font-weight: $font-weight-medium;
        text-decoration: none;
        white-space: nowrap;
        overflow: hidden;
        transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        cursor: pointer;

        // Premium hover indicator
        &::before {
          content: '';
          position: absolute;
          top: 50%;
          left: 0;
          width: 3px;
          height: 0;
          border-radius: 0 2px 2px 0;
          background: linear-gradient(180deg, $color-primary 0%, $color-info 100%);
          transform: translateY(-50%);
          transition: height 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .nav-icon {
          @include flex-center;

          position: relative;
          width: 32px;
          height: 32px;
          margin-right: $space-3;
          border-radius: $radius-apple-sm;
          background: rgba($color-gray-100, 0.5);
          overflow: hidden;
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

          // Icon background glow
          &::before {
            content: '';
            position: absolute;
            background: radial-gradient(circle at center, rgba($color-primary, 0.2) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            inset: 0;
          }

          @include media-down(md) {
            margin-right: 0;
          }

          .dashicons {
            position: relative;
            z-index: 1;
            font-size: 16px;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
          }
        }

        .nav-text {
          transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);

          @include media-down(md) {
            @include sr-only;
          }
        }

        // Enhanced hover effect
        &:hover {
          background: rgba($color-primary, 0.06);
          color: $color-primary;
          transform: translateX(4px);

          @include media-down(md) {
            transform: translateY(-2px);
          }

          &::before {
            height: 60%;
          }

          .nav-icon {
            background: rgba($color-primary, 0.12);

            &::before {
              opacity: 1;
            }

            .dashicons {
              transform: scale(1.15) rotate(-5deg);
            }
          }

          .nav-text {
            transform: translateX(2px);
          }
        }

        // Premium active state
        &.active {
          background: linear-gradient(135deg, $color-primary 0%, rgba($color-primary, 0.9) 100%);
          color: white;
          box-shadow:
            $shadow-apple-md,
            0 4px 12px rgba($color-primary, 0.3);
          transform: translateX(0);

          &::before {
            height: 100%;
            background: rgba(white, 0.3);
          }

          .nav-icon {
            background: rgba(white, 0.25);

            &::before {
              opacity: 0;
            }

            .dashicons {
              transform: scale(1) rotate(0);
            }
          }

          &:hover {
            box-shadow:
              $shadow-apple-lg,
              0 4px 16px rgba($color-primary, 0.35);
            transform: translateX(2px);

            @include media-down(md) {
              transform: translateY(-3px);
            }

            .nav-icon .dashicons {
              transform: scale(1.1) rotate(-3deg);
            }
          }
        }

        // Enhanced focus state with ring
        &:focus {
          box-shadow:
            $shadow-apple-focus,
            0 0 0 4px rgba($color-primary, 0.1);
          outline: none;
        }

        // Premium press feedback
        &:active {
          transform: translateX(0) scale(0.97);
          transition-duration: 0.1s;

          @include media-down(md) {
            transform: translateY(0) scale(0.97);
          }

          .nav-icon .dashicons {
            transform: scale(0.95);
          }
        }
      }
    }

    // Premium Help Content Area
    .help-content {
      min-width: 0; // Prevent grid overflow

      .help-section {
        display: none;
        animation: contentFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);

        &.active {
          display: block;
        }

        @keyframes contentFadeIn {
          from {
            opacity: 0;
            transform: translateY(20px) scale(0.98);
          }

          to {
            opacity: 1;
            transform: translateY(0) scale(1);
          }
        }

        // Premium Section Header
        .section-header {
          position: relative;
          margin-bottom: $space-8;
          padding-bottom: $space-4;
          background:
            linear-gradient($color-background, $color-background) padding-box,
            linear-gradient(90deg, $color-primary 0%, $color-info 50%, transparent 100%) border-box;
          border-bottom: 2px solid transparent;

          .section-title {
            @include heading-medium;

            margin: 0 0 $space-2;

            @include flex-start;

            letter-spacing: -0.01em;

            .dashicons {
              margin-right: $space-3;
              color: $color-primary;
              font-size: 24px;
              animation: iconPulse 2s ease-in-out infinite;
            }

            @keyframes iconPulse {
              0%,
              100% {
                transform: scale(1);
              }

              50% {
                transform: scale(1.05);
              }
            }
          }

          .section-description {
            @include body-medium;

            margin: 0;
            color: $color-gray-600;
            line-height: 1.6;
          }
        }
      }
    }

    // Premium Getting Started Steps with Connecting Lines
    .help-steps {
      position: relative;
      display: flex;
      flex-direction: column;
      gap: $space-8;
      margin-bottom: $space-8;

      // Connecting line between steps
      &::before {
        content: '';
        position: absolute;
        top: 56px; // After first indicator
        bottom: $space-8;
        left: 28px; // Center of step indicator
        width: 2px;
        background: linear-gradient(180deg, $color-primary 0%, rgba($color-primary, 0.2) 100%);
        opacity: 0.3;

        @include media-down(sm) {
          display: none;
        }
      }

      .help-step {
        position: relative;
        display: flex;
        gap: $space-6;
        animation: stepFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: calc(var(--step-index, 0) * 0.15s);

        @keyframes stepFadeIn {
          from {
            opacity: 0;
            transform: translateX(-30px) scale(0.95);
          }

          to {
            opacity: 1;
            transform: translateX(0) scale(1);
          }
        }

        @include media-down(sm) {
          flex-direction: column;
          gap: $space-4;
        }

        .step-indicator {
          @include flex-center;

          position: relative;
          z-index: 1;
          width: 56px;
          height: 56px;
          border: 2px solid rgba($color-primary, 0.2);
          border-radius: $radius-full;
          background: linear-gradient(135deg, rgba($color-primary, 0.15) 0%, rgba($color-primary, 0.08) 100%);
          overflow: hidden;
          box-shadow:
            $shadow-apple-sm,
            0 4px 12px rgba($color-primary, 0.2),
            inset 0 1px 0 rgba(white, 0.5);
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
          flex-shrink: 0;

          // Animated background shimmer
          &::before {
            content: '';
            position: absolute;
            background: conic-gradient(from 0deg, transparent, rgba($color-primary, 0.3), transparent);
            opacity: 0;
            transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            animation: rotate 4s linear infinite;
            inset: -50%;
          }

          @keyframes rotate {
            to {
              transform: rotate(360deg);
            }
          }

          .step-number {
            position: relative;
            z-index: 1;
            color: $color-primary;
            font-family: $font-primary;
            font-size: $font-size-2xl;
            font-weight: $font-weight-bold;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
          }

          &:hover {
            border-color: rgba($color-primary, 0.4);
            box-shadow:
              $shadow-apple-md,
              0 8px 20px rgba($color-primary, 0.35);
            transform: scale(1.15) rotate(8deg);

            &::before {
              opacity: 1;
            }

            .step-number {
              transform: scale(1.1);
            }
          }
        }

        .step-content {
          flex: 1;
          padding: $space-2 0;

          .step-title {
            @include heading-small;

            margin: 0 0 $space-2;
            letter-spacing: -0.01em;
            transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
          }

          .step-description {
            @include body-medium;

            margin: 0 0 $space-4;
            color: $color-gray-600;
            line-height: 1.6;
          }

          .step-features {
            display: flex;
            flex-direction: column;
            gap: $space-2;
            margin-bottom: $space-4;

            .feature-item {
              @include flex-start;
              @include body-small;

              padding: $space-2 0;
              color: $color-gray-700;
              transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

              .dashicons {
                margin-right: $space-2;
                color: $color-success;
                font-size: 16px;
                transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
              }

              &:hover {
                color: $color-gray-900;
                transform: translateX(4px);

                .dashicons {
                  transform: scale(1.2);
                }
              }
            }
          }

          .step-action {
            .button {
              position: relative;
              overflow: hidden;
              transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

              // Shine effect on hover
              &::before {
                content: '';
                position: absolute;
                top: 0;
                left: -100%;
                width: 100%;
                height: 100%;
                background: linear-gradient(90deg, transparent, rgba(white, 0.3), transparent);
                transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
              }

              .dashicons {
                margin-right: $space-2;
                transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
              }

              &:hover {
                box-shadow: $shadow-apple-md;
                transform: translateY(-2px);

                &::before {
                  left: 100%;
                }

                .dashicons {
                  transform: translateX(2px);
                }
              }

              &:active {
                transform: translateY(0) scale(0.98);
              }
            }
          }
        }

        // Hover effect on entire step
        &:hover .step-title {
          color: $color-primary;
        }
      }
    }

    // Premium Quick Tips Section
    .quick-tips {
      @include apple-card;

      position: relative;
      margin-bottom: $space-8;
      border: 1px solid rgba($color-success, 0.1);
      background: linear-gradient(135deg, rgba($color-success, 0.05) 0%, rgba($color-success, 0.02) 100%);
      overflow: hidden;

      // Animated gradient border
      &::before {
        content: '';
        position: absolute;
        padding: 1px;
        border-radius: inherit;
        background: linear-gradient(135deg, rgba($color-success, 0.2), transparent);
        opacity: 0;
        transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        inset: 0;
        mask:
          linear-gradient(#fff 0 0) content-box,
          linear-gradient(#fff 0 0);
        mask-composite: xor;
        mask-composite: exclude;
      }

      &:hover::before {
        opacity: 1;
      }

      .tips-title {
        @include heading-small;

        margin: 0 0 $space-6;
        color: $color-gray-900;
        letter-spacing: -0.01em;
      }

      .tips-grid {
        display: grid;
        gap: $space-4;
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));

        .tip-card {
          position: relative;
          padding: $space-5;
          border: 1px solid $color-gray-200;
          border-radius: $radius-apple-sm;
          background: $color-background;
          overflow: hidden;
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

          // Hover gradient overlay
          &::before {
            content: '';
            position: absolute;
            background: linear-gradient(135deg, rgba($color-success, 0.03) 0%, transparent 100%);
            opacity: 0;
            transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            inset: 0;
          }

          &:hover {
            border-color: rgba($color-success, 0.4);
            box-shadow:
              $shadow-apple-md,
              0 8px 24px rgba($color-success, 0.15);
            transform: translateY(-6px) scale(1.02);

            &::before {
              opacity: 1;
            }
          }

          .tip-icon {
            @include flex-center;

            position: relative;
            z-index: 1;
            width: 40px;
            height: 40px;
            margin-bottom: $space-3;
            border-radius: $radius-full;
            background: rgba($color-success, 0.12);
            color: $color-success;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

            // Pulsing ring effect
            &::after {
              content: '';
              position: absolute;
              border: 2px solid rgba($color-success, 0.3);
              border-radius: $radius-full;
              opacity: 0;
              transform: scale(0.8);
              transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
              inset: -4px;
            }

            .dashicons {
              font-size: 20px;
              transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            }
          }

          h4 {
            @include label-medium;

            position: relative;
            z-index: 1;
            margin: 0 0 $space-2;
            color: $color-gray-900;
            transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
          }

          p {
            @include body-small;

            position: relative;
            z-index: 1;
            margin: 0;
            color: $color-gray-600;
            line-height: 1.6;
          }

          &:hover {
            .tip-icon {
              background: rgba($color-success, 0.2);
              transform: scale(1.2) rotate(8deg);

              &::after {
                opacity: 1;
                transform: scale(1.2);
              }

              .dashicons {
                transform: scale(1.1);
              }
            }

            h4 {
              color: $color-success;
            }
          }

          // Staggered entrance animation
          @for $i from 1 through 6 {
            &:nth-child(#{$i}) {
              animation: tipCardFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
              animation-delay: #{$i * 0.08}s;
            }
          }

          @keyframes tipCardFadeIn {
            from {
              opacity: 0;
              transform: translateY(20px) scale(0.9);
            }

            to {
              opacity: 1;
              transform: translateY(0) scale(1);
            }
          }
        }
      }
    }

    // Premium Features Grid with Advanced Hover Effects
    .features-grid {
      display: grid;
      gap: $space-6;
      grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

      .feature-card {
        @include apple-card;

        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        animation: cardFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: calc(var(--card-index, 0) * 0.1s);

        @keyframes cardFadeIn {
          from {
            opacity: 0;
            transform: scale(0.92) translateY(20px);
          }

          to {
            opacity: 1;
            transform: scale(1) translateY(0);
          }
        }

        // Gradient overlay on hover
        &::before {
          content: '';
          position: absolute;
          background: radial-gradient(circle at top right, rgba($color-primary, 0.05) 0%, transparent 60%);
          opacity: 0;
          transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
          inset: 0;
        }

        &:hover {
          box-shadow: $shadow-apple-lg;
          transform: translateY(-8px) scale(1.02);

          &::before {
            opacity: 1;
          }
        }

        .feature-header {
          position: relative;
          z-index: 1;
          margin-bottom: $space-4;

          .feature-icon {
            @include flex-center;

            position: relative;
            width: 48px;
            height: 48px;
            margin-bottom: $space-3;
            border-radius: $radius-apple-sm;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

            // Rotating gradient background
            &::before {
              content: '';
              position: absolute;
              background: conic-gradient(from 0deg, transparent, currentcolor, transparent);
              opacity: 0.1;
              transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
              animation: rotateGradient 6s linear infinite;
              inset: -50%;
            }

            @keyframes rotateGradient {
              to {
                transform: rotate(360deg);
              }
            }

            .dashicons {
              position: relative;
              z-index: 1;
              font-size: 24px;
              transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            }
          }

          h3 {
            @include heading-small;

            margin: 0;
            letter-spacing: -0.01em;
            transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
          }
        }

        .feature-content {
          position: relative;
          z-index: 1;
          flex: 1;

          p {
            @include body-medium;

            margin: 0 0 $space-4;
            color: $color-gray-600;
            line-height: 1.6;
          }

          .feature-benefits {
            display: flex;
            flex-direction: column;
            gap: $space-2;

            .benefit-item {
              @include flex-start;
              @include body-small;

              padding: $space-1 0;
              color: $color-gray-700;
              transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

              .dashicons {
                margin-right: $space-2;
                color: $color-success;
                font-size: 16px;
                transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
              }

              &:hover {
                color: $color-gray-900;
                transform: translateX(4px);

                .dashicons {
                  transform: scale(1.2) rotate(5deg);
                }
              }
            }
          }
        }

        // Feature-specific premium styling
        &.ai-feature {
          .feature-icon {
            background: rgba($color-primary, 0.12);
            color: $color-primary;
          }

          &:hover {
            border-color: rgba($color-primary, 0.3);

            .feature-icon {
              background: rgba($color-primary, 0.2);
              transform: scale(1.15) rotate(-8deg);

              &::before {
                opacity: 0.2;
              }

              .dashicons {
                transform: scale(1.1);
              }
            }

            .feature-header h3 {
              color: $color-primary;
            }
          }
        }

        &.quality-feature {
          .feature-icon {
            background: rgba($color-purple, 0.12);
            color: $color-purple;
          }

          &:hover {
            border-color: rgba($color-purple, 0.3);

            .feature-icon {
              background: rgba($color-purple, 0.2);
              transform: scale(1.15) rotate(8deg);

              &::before {
                opacity: 0.2;
              }

              .dashicons {
                transform: scale(1.1);
              }
            }

            .feature-header h3 {
              color: $color-purple;
            }
          }
        }

        &.compliance-feature {
          .feature-icon {
            background: rgba($color-success, 0.12);
            color: $color-success;
          }

          &:hover {
            border-color: rgba($color-success, 0.3);

            .feature-icon {
              background: rgba($color-success, 0.2);
              transform: scale(1.15) rotate(-8deg);

              &::before {
                opacity: 0.2;
              }

              .dashicons {
                transform: scale(1.1);
              }
            }

            .feature-header h3 {
              color: $color-success;
            }
          }
        }

        &.bulk-feature {
          .feature-icon {
            background: rgba($color-info, 0.12);
            color: $color-info;
          }

          &:hover {
            border-color: rgba($color-info, 0.3);

            .feature-icon {
              background: rgba($color-info, 0.2);
              transform: scale(1.15) rotate(8deg);

              &::before {
                opacity: 0.2;
              }

              .dashicons {
                transform: scale(1.1);
              }
            }

            .feature-header h3 {
              color: $color-info;
            }
          }
        }

        &.audit-feature {
          .feature-icon {
            background: rgba($color-warning, 0.12);
            color: $color-warning;
          }

          &:hover {
            border-color: rgba($color-warning, 0.3);

            .feature-icon {
              background: rgba($color-warning, 0.2);
              transform: scale(1.15) rotate(-8deg);

              &::before {
                opacity: 0.2;
              }

              .dashicons {
                transform: scale(1.1);
              }
            }

            .feature-header h3 {
              color: $color-warning;
            }
          }
        }

        &.export-feature {
          .feature-icon {
            background: rgba($color-gray-500, 0.12);
            color: $color-gray-700;
          }

          &:hover {
            border-color: rgba($color-gray-500, 0.3);

            .feature-icon {
              background: rgba($color-gray-500, 0.2);
              transform: scale(1.15) rotate(8deg);

              &::before {
                opacity: 0.2;
              }

              .dashicons {
                transform: scale(1.1);
              }
            }

            .feature-header h3 {
              color: $color-gray-700;
            }
          }
        }
      }
    }

    // Premium Quality Levels Container
    .quality-levels-container {
      display: flex;
      flex-direction: column;
      gap: $space-6;

      .quality-level {
        @include apple-card;

        position: relative;
        display: flex;
        gap: $space-6;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        animation: qualityFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
        animation-delay: calc(var(--level-index, 0) * 0.1s);

        @keyframes qualityFadeIn {
          from {
            opacity: 0;
            transform: translateX(-30px) scale(0.95);
          }

          to {
            opacity: 1;
            transform: translateX(0) scale(1);
          }
        }

        @include media-down(sm) {
          flex-direction: column;
        }

        // Hover lift effect
        &:hover {
          box-shadow: $shadow-apple-lg;
          transform: translateX(4px);
        }

        .quality-badge {
          @include flex-center;

          position: relative;
          flex-direction: column;
          width: 120px;
          padding: $space-4;
          border-radius: $radius-apple-sm;
          text-align: center;
          overflow: hidden;
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
          flex-shrink: 0;

          // Animated pulse ring
          &::after {
            content: '';
            position: absolute;
            border: 3px solid currentcolor;
            border-radius: $radius-apple-sm;
            opacity: 0;
            transform: scale(0.8);
            transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
            inset: -8px;
          }

          .quality-score {
            position: relative;
            z-index: 1;
            margin-bottom: $space-2;
            font-family: $font-primary;
            font-size: $font-size-2xl;
            font-weight: $font-weight-bold;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
          }

          .quality-label {
            position: relative;
            z-index: 1;
            font-family: $font-secondary;
            font-size: $font-size-sm;
            font-weight: $font-weight-semibold;
            letter-spacing: 0.05em;
            text-transform: uppercase;
          }
        }

        .quality-content {
          flex: 1;

          h3 {
            @include heading-small;

            margin: 0 0 $space-2;
          }

          p {
            @include body-medium;

            margin: 0 0 $space-4;
            color: $color-gray-600;
          }

          .quality-indicators {
            display: flex;
            flex-direction: column;
            gap: $space-2;

            .indicator-item {
              @include flex-start;
              @include body-small;

              .dashicons {
                margin-right: $space-2;
                font-size: 16px;
              }

              &.positive {
                color: $color-success-dark;

                .dashicons {
                  color: $color-success;
                }
              }

              &.negative {
                color: $color-error-dark;

                .dashicons {
                  color: $color-error;
                }
              }

              &.neutral {
                color: $color-gray-700;

                .dashicons {
                  color: $color-warning;
                }
              }
            }
          }
        }

        // Premium quality-specific styling with pulsing badges
        &.quality-missing {
          .quality-badge {
            border: 2px solid rgba($color-missing, 0.25);
            background: linear-gradient(135deg, rgba($color-missing, 0.15) 0%, rgba($color-missing, 0.08) 100%);
            color: $color-missing;
          }

          &:hover {
            border-color: rgba($color-missing, 0.4);

            .quality-badge {
              box-shadow:
                $shadow-apple-md,
                0 8px 20px rgba($color-missing, 0.25);
              transform: scale(1.08) rotate(-2deg);

              &::after {
                opacity: 0.3;
                transform: scale(1.15);
              }

              .quality-score {
                transform: scale(1.1);
              }
            }
          }
        }

        &.quality-decorative {
          .quality-badge {
            border: 2px solid rgba($color-decorative, 0.25);
            background: linear-gradient(135deg, rgba($color-decorative, 0.15) 0%, rgba($color-decorative, 0.08) 100%);
            color: $color-decorative;
          }

          &:hover {
            border-color: rgba($color-decorative, 0.4);

            .quality-badge {
              box-shadow:
                $shadow-apple-md,
                0 8px 20px rgba($color-decorative, 0.25);
              transform: scale(1.08) rotate(2deg);

              &::after {
                opacity: 0.3;
                transform: scale(1.15);
              }

              .quality-score {
                transform: scale(1.1);
              }
            }
          }
        }

        &.quality-weak {
          .quality-badge {
            border: 2px solid rgba($color-weak, 0.25);
            background: linear-gradient(135deg, rgba($color-weak, 0.15) 0%, rgba($color-weak, 0.08) 100%);
            color: $color-weak;
          }

          &:hover {
            border-color: rgba($color-weak, 0.4);

            .quality-badge {
              box-shadow:
                $shadow-apple-md,
                0 8px 20px rgba($color-weak, 0.25);
              transform: scale(1.08) rotate(-2deg);

              &::after {
                opacity: 0.3;
                transform: scale(1.15);
              }

              .quality-score {
                transform: scale(1.1);
              }
            }
          }
        }

        &.quality-good {
          .quality-badge {
            border: 2px solid rgba($color-good, 0.25);
            background: linear-gradient(135deg, rgba($color-good, 0.15) 0%, rgba($color-good, 0.08) 100%);
            color: $color-good;
          }

          &:hover {
            border-color: rgba($color-good, 0.4);

            .quality-badge {
              box-shadow:
                $shadow-apple-md,
                0 8px 20px rgba($color-good, 0.25);
              transform: scale(1.08) rotate(2deg);

              &::after {
                opacity: 0.3;
                transform: scale(1.15);
              }

              .quality-score {
                transform: scale(1.1);
              }
            }
          }
        }

        &.quality-excellent {
          .quality-badge {
            border: 2px solid rgba($color-excellent, 0.25);
            background: linear-gradient(135deg, rgba($color-excellent, 0.15) 0%, rgba($color-excellent, 0.08) 100%);
            color: $color-excellent;

            // Subtle pulsing animation for excellent quality
            animation: excellentPulse 3s ease-in-out infinite;

            @keyframes excellentPulse {
              0%,
              100% {
                box-shadow: 0 0 0 rgba($color-excellent, 0.3);
              }

              50% {
                box-shadow: 0 0 12px rgba($color-excellent, 0.4);
              }
            }
          }

          &:hover {
            border-color: rgba($color-excellent, 0.4);

            .quality-badge {
              box-shadow:
                $shadow-apple-md,
                0 8px 20px rgba($color-excellent, 0.3);
              transform: scale(1.08) rotate(-2deg);
              animation: none;

              &::after {
                opacity: 0.4;
                transform: scale(1.15);
              }

              .quality-score {
                transform: scale(1.1);
              }
            }
          }
        }
      }
    }

    // Quality Tips Section
    .quality-tips {
      @include apple-card;

      margin-top: $space-8;
      background: linear-gradient(135deg, rgba($color-primary, 0.03) 0%, rgba($color-primary, 0.01) 100%);

      h3 {
        @include heading-small;

        margin: 0 0 $space-6;
      }

      .tips-list {
        display: flex;
        flex-direction: column;
        gap: $space-4;

        .tip-item {
          @include flex-start;

          padding: $space-4;
          border: 1px solid $color-gray-200;
          border-radius: $radius-apple-sm;
          background: $color-background;
          transition: all 0.3s $ease-apple;

          .tip-icon {
            @include flex-center;

            width: 40px;
            height: 40px;
            margin-right: $space-4;
            border-radius: $radius-full;
            background: rgba($color-primary, 0.1);
            color: $color-primary;
            transition: all 0.3s $ease-apple;
            flex-shrink: 0;

            .dashicons {
              font-size: 20px;
            }
          }

          .tip-content {
            flex: 1;

            strong {
              @include label-medium;

              display: block;
              margin-bottom: $space-1;
              color: $color-gray-900;
            }

            p {
              @include body-small;

              margin: 0;
              color: $color-gray-600;
            }
          }

          &:hover {
            border-color: rgba($color-primary, 0.3);
            box-shadow: $shadow-sm;
            transform: translateX(4px);

            .tip-icon {
              transform: scale(1.1);
            }
          }
        }
      }
    }

    // Premium Troubleshooting Accordion with Smooth Animations
    .troubleshooting-accordion {
      display: flex;
      flex-direction: column;
      gap: $space-4;

      .troubleshooting-item {
        @include apple-card;

        position: relative;
        padding: 0;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

        // Animated left border indicator
        &::before {
          content: '';
          position: absolute;
          top: 0;
          bottom: 0;
          left: 0;
          width: 4px;
          background: linear-gradient(180deg, $color-warning 0%, rgba($color-warning, 0.3) 100%);
          transform: scaleY(0);
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
          transform-origin: top;
        }

        &.open::before {
          transform: scaleY(1);
        }

        .trouble-header {
          @include flex-between;

          position: relative;
          padding: $space-5;
          transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
          cursor: pointer;

          &:hover {
            background: rgba($color-warning, 0.04);
          }

          .trouble-title {
            @include flex-start;
            @include heading-small;

            margin: 0;
            letter-spacing: -0.01em;
            transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);

            .dashicons {
              margin-right: $space-3;
              color: $color-warning;
              font-size: 20px;
              transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            }
          }

          .toggle-button {
            @include flex-center;

            position: relative;
            width: 32px;
            height: 32px;
            border: none;
            border-radius: $radius-full;
            background: rgba($color-gray-200, 0.5);
            color: $color-gray-600;
            overflow: hidden;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            cursor: pointer;

            // Ripple effect on interaction
            &::after {
              content: '';
              position: absolute;
              border-radius: $radius-full;
              background: radial-gradient(circle, rgba($color-primary, 0.2) 0%, transparent 70%);
              opacity: 0;
              transform: scale(0);
              transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
              inset: 0;
            }

            .dashicons {
              position: relative;
              z-index: 1;
              font-size: 16px;
              transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            }

            &:hover {
              background: rgba($color-warning, 0.15);
              color: $color-warning;
              transform: scale(1.1);

              &::after {
                opacity: 1;
                transform: scale(1.2);
              }
            }

            &:active {
              transform: scale(0.95);
            }

            &[aria-expanded='true'] {
              background: rgba($color-warning, 0.15);
              color: $color-warning;

              .dashicons {
                transform: rotate(180deg) scale(1.1);
              }
            }
          }

          &:hover .trouble-title {
            color: $color-warning;

            .dashicons {
              transform: scale(1.15) rotate(-5deg);
            }
          }
        }

        .trouble-content {
          max-height: 0;
          padding: 0 $space-5;
          overflow: hidden;
          opacity: 0;
          transition:
            max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            padding 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);

          &.open {
            max-height: 1000px;
            padding: 0 $space-5 $space-5;
            opacity: 1;
          }

          .trouble-description {
            @include body-medium;

            margin: 0 0 $space-5;
            color: $color-gray-600;
          }

          .solution-steps {
            display: flex;
            flex-direction: column;
            gap: $space-4;

            .step-item {
              @include flex-start;

              padding: $space-4;
              border-radius: $radius-apple-sm;
              background: rgba($color-gray-50, 0.5);
              transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
              border-left: 3px solid $color-primary;

              .step-icon {
                @include flex-center;

                position: relative;
                width: 36px;
                height: 36px;
                margin-right: $space-4;
                border-radius: $radius-full;
                background: rgba($color-primary, 0.12);
                color: $color-primary;
                transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                flex-shrink: 0;

                .dashicons {
                  font-size: 18px;
                  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
                }
              }

              .step-content {
                flex: 1;

                strong {
                  @include label-medium;

                  display: block;
                  margin-bottom: $space-1;
                  color: $color-gray-900;
                  transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
                }

                p {
                  @include body-small;

                  margin: 0;
                  color: $color-gray-600;
                  line-height: 1.6;
                }
              }

              &:hover {
                padding-left: calc(#{$space-4} - 1px);
                background: rgba($color-primary, 0.03);
                transform: translateX(4px);
                border-left-width: 4px;

                .step-icon {
                  background: rgba($color-primary, 0.2);
                  transform: scale(1.1);

                  .dashicons {
                    transform: rotate(5deg);
                  }
                }

                .step-content strong {
                  color: $color-primary;
                }
              }
            }
          }
        }

        &.open {
          box-shadow:
            $shadow-apple-lg,
            0 0 0 1px rgba($color-warning, 0.1);
        }
      }
    }

    // Premium Support Options with Advanced Interactions
    .support-options {
      display: grid;
      gap: $space-6;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

      .support-card {
        @include apple-card;

        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

        // Gradient overlay on hover
        &::before {
          content: '';
          position: absolute;
          background: radial-gradient(circle at top left, rgba($color-primary, 0.04) 0%, transparent 60%);
          opacity: 0;
          transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
          inset: 0;
        }

        &:hover {
          box-shadow: $shadow-apple-lg;
          transform: translateY(-6px) scale(1.02);

          &::before {
            opacity: 1;
          }
        }

        .card-header {
          position: relative;
          z-index: 1;
          margin-bottom: $space-4;

          .card-icon {
            @include flex-center;

            position: relative;
            width: 48px;
            height: 48px;
            margin-bottom: $space-3;
            border-radius: $radius-apple-sm;
            overflow: hidden;
            transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

            // Rotating shine effect
            &::before {
              content: '';
              position: absolute;
              background: conic-gradient(from 0deg, transparent, currentcolor, transparent);
              opacity: 0.08;
              animation: rotateShine 8s linear infinite;
              inset: -50%;
            }

            @keyframes rotateShine {
              to {
                transform: rotate(360deg);
              }
            }

            .dashicons {
              position: relative;
              z-index: 1;
              font-size: 24px;
              transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            }
          }

          h3 {
            @include heading-small;

            margin: 0;
            letter-spacing: -0.01em;
            transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
          }
        }

        .card-content {
          position: relative;
          z-index: 1;
          flex: 1;
          margin-bottom: $space-5;

          p {
            @include body-medium;

            margin: 0 0 $space-4;
            color: $color-gray-600;
            line-height: 1.6;
          }

          .card-features {
            display: flex;
            flex-direction: column;
            gap: $space-2;

            .feature-item {
              @include flex-start;
              @include body-small;

              padding: $space-1 0;
              color: $color-gray-700;
              transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

              .dashicons {
                margin-right: $space-2;
                color: $color-success;
                font-size: 16px;
                transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
              }

              &:hover {
                color: $color-gray-900;
                transform: translateX(4px);

                .dashicons {
                  transform: scale(1.2);
                }
              }
            }
          }
        }

        .card-action {
          position: relative;
          z-index: 1;

          .button {
            position: relative;
            justify-content: center;
            width: 100%;
            overflow: hidden;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

            // Animated shine effect
            &::after {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg, transparent, rgba(white, 0.25), transparent);
              transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            }

            .dashicons {
              margin-right: $space-2;
              transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            }

            &:hover {
              box-shadow: $shadow-apple-md;
              transform: translateY(-2px);

              &::after {
                left: 100%;
              }

              .dashicons {
                transform: translateX(3px);
              }
            }

            &:active {
              transform: translateY(0) scale(0.98);
            }
          }
        }

        // Card-specific premium styling
        &.documentation-card {
          .card-icon {
            background: rgba($color-primary, 0.12);
            color: $color-primary;
          }

          &:hover {
            border-color: rgba($color-primary, 0.3);

            .card-icon {
              background: rgba($color-primary, 0.2);
              transform: scale(1.15) rotate(-8deg);

              .dashicons {
                transform: scale(1.1);
              }
            }

            .card-header h3 {
              color: $color-primary;
            }
          }
        }

        &.community-card {
          .card-icon {
            background: rgba($color-purple, 0.12);
            color: $color-purple;
          }

          &:hover {
            border-color: rgba($color-purple, 0.3);

            .card-icon {
              background: rgba($color-purple, 0.2);
              transform: scale(1.15) rotate(8deg);

              .dashicons {
                transform: scale(1.1);
              }
            }

            .card-header h3 {
              color: $color-purple;
            }
          }
        }

        &.contact-card {
          .card-icon {
            background: rgba($color-success, 0.12);
            color: $color-success;
          }

          &:hover {
            border-color: rgba($color-success, 0.3);

            .card-icon {
              background: rgba($color-success, 0.2);
              transform: scale(1.15) rotate(-8deg);

              .dashicons {
                transform: scale(1.1);
              }
            }

            .card-header h3 {
              color: $color-success;
            }
          }
        }
      }
    }

    // Premium System Information Section
    .system-info-section {
      @include apple-card;

      margin-top: $space-8;
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

      &:hover {
        box-shadow: $shadow-apple-md;
      }

      .info-title {
        @include heading-small;

        margin: 0 0 $space-2;
        letter-spacing: -0.01em;
      }

      .info-description {
        @include body-medium;

        margin: 0 0 $space-6;
        color: $color-gray-600;
        line-height: 1.6;
      }

      .info-container {
        .info-grid {
          display: grid;
          gap: $space-4;
          grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
          margin-bottom: $space-5;

          .info-item {
            position: relative;
            padding: $space-4;
            border: 1px solid $color-gray-200;
            border-radius: $radius-apple-sm;
            background: rgba($color-gray-50, 0.5);
            overflow: hidden;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

            // Shine effect on hover
            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg, transparent, rgba(white, 0.4), transparent);
              transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            }

            &:hover {
              border-color: rgba($color-primary, 0.2);
              background: rgba($color-gray-100, 0.6);
              box-shadow: $shadow-apple-sm;
              transform: translateY(-3px);

              &::before {
                left: 100%;
              }
            }

            .info-label {
              @include label-medium;

              position: relative;
              z-index: 1;
              display: block;
              margin-bottom: $space-1;
              color: $color-gray-600;
              font-size: $font-size-xs;
              letter-spacing: 0.05em;
              text-transform: uppercase;
            }

            .info-value {
              @include body-medium;

              position: relative;
              z-index: 1;
              color: $color-gray-900;
              font-weight: $font-weight-semibold;
              word-break: break-word;
            }
          }
        }

        .copy-info-section {
          @include flex-start;

          gap: $space-3;

          .button {
            position: relative;
            overflow: hidden;
            transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

            &::before {
              content: '';
              position: absolute;
              top: 0;
              left: -100%;
              width: 100%;
              height: 100%;
              background: linear-gradient(90deg, transparent, rgba(white, 0.2), transparent);
              transition: left 0.5s cubic-bezier(0.16, 1, 0.3, 1);
            }

            .dashicons {
              margin-right: $space-2;
              transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1);
            }

            &:hover {
              box-shadow: $shadow-apple-md;
              transform: translateY(-2px);

              &::before {
                left: 100%;
              }

              .dashicons {
                transform: scale(1.1);
              }
            }

            &:active {
              transform: translateY(0) scale(0.98);
            }
          }

          .copy-feedback {
            @include body-small;

            padding: $space-2 $space-3;
            border: 1px solid rgba($color-success, 0.3);
            border-radius: $radius-apple-sm;
            background: linear-gradient(135deg, rgba($color-success, 0.15) 0%, rgba($color-success, 0.1) 100%);
            color: $color-success-dark;
            animation: fadeInScale 0.3s cubic-bezier(0.16, 1, 0.3, 1);

            @keyframes fadeInScale {
              from {
                opacity: 0;
                transform: scale(0.9) translateY(5px);
              }

              to {
                opacity: 1;
                transform: scale(1) translateY(0);
              }
            }
          }
        }
      }
    }

    // Premium Additional Resources
    .additional-resources {
      @include apple-card;

      margin-top: $space-8;

      h3 {
        @include heading-small;

        margin: 0 0 $space-6;
        letter-spacing: -0.01em;
      }

      .resources-grid {
        display: grid;
        gap: $space-4;
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

        .resource-link {
          @include flex-center;

          position: relative;
          flex-direction: column;
          padding: $space-5;
          border: 1px solid $color-gray-200;
          border-radius: $radius-apple-sm;
          background: rgba($color-gray-50, 0.5);
          color: $color-gray-700;
          text-decoration: none;
          overflow: hidden;
          transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);

          // Radial gradient on hover
          &::before {
            content: '';
            position: absolute;
            background: radial-gradient(circle at center, rgba($color-primary, 0.08) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
            inset: 0;
          }

          .dashicons {
            position: relative;
            z-index: 1;
            margin-bottom: $space-3;
            color: $color-primary;
            font-size: 32px;
            transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
          }

          span {
            @include label-medium;

            position: relative;
            z-index: 1;
            text-align: center;
            transition: color 0.25s cubic-bezier(0.16, 1, 0.3, 1);
          }

          &:hover {
            border-color: rgba($color-primary, 0.4);
            background: rgba($color-primary, 0.06);
            color: $color-primary;
            box-shadow:
              $shadow-apple-md,
              0 8px 20px rgba($color-primary, 0.15);
            transform: translateY(-6px) scale(1.03);

            &::before {
              opacity: 1;
            }

            .dashicons {
              transform: scale(1.25) rotate(5deg);
            }

            span {
              color: $color-primary;
            }
          }

          &:active {
            transform: translateY(-3px) scale(1);
          }
        }
      }
    }

    // Premium Loading States
    .loading-spinner {
      @include flex-center;

      position: relative;
      width: 40px;
      height: 40px;
      margin: $space-6 auto;

      &::before,
      &::after {
        content: '';
        position: absolute;
        border: 3px solid transparent;
        border-radius: $radius-full;
      }

      // Outer ring
      &::before {
        animation: spinOuter 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
        inset: 0;
        border-top-color: $color-primary;
        border-right-color: $color-primary;
      }

      // Inner ring
      &::after {
        animation: spinInner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite reverse;
        inset: 6px;
        border-top-color: $color-info;
        border-right-color: $color-info;
      }

      @keyframes spinOuter {
        to {
          transform: rotate(360deg);
        }
      }

      @keyframes spinInner {
        to {
          transform: rotate(360deg);
        }
      }
    }

    // Skeleton Loading States
    .skeleton-loading {
      position: relative;
      border-radius: $radius-apple-sm;
      background: linear-gradient(
        90deg,
        rgba($color-gray-200, 0.5) 25%,
        rgba($color-gray-300, 0.5) 50%,
        rgba($color-gray-200, 0.5) 75%
      );
      background-size: 200% 100%;
      overflow: hidden;
      animation: shimmerLoading 1.5s ease-in-out infinite;

      @keyframes shimmerLoading {
        0% {
          background-position: 200% 0;
        }

        100% {
          background-position: -200% 0;
        }
      }

      &.skeleton-text {
        height: 1em;
        margin-bottom: $space-2;
      }

      &.skeleton-card {
        height: 200px;
      }

      &.skeleton-avatar {
        width: 48px;
        height: 48px;
        border-radius: $radius-full;
      }
    }

    // Enhanced Premium Dark Mode Support
    @include dark-mode {
      .alt-audit-header {
        border-color: rgba($color-info, 0.2);
        background: linear-gradient(135deg, rgba($color-info, 0.15) 0%, rgba($color-info, 0.08) 100%);
        box-shadow:
          0 4px 24px rgba($color-info, 0.12),
          inset 0 1px 0 rgba(white, 0.05);

        &::before {
          background: linear-gradient(90deg, transparent, rgba($color-info, 0.4), transparent);
        }

        h1 {
          background: linear-gradient(135deg, $dark-text-primary 0%, $color-info 80%, $color-primary 100%);
          color: $dark-text-primary;
          -webkit-text-fill-color: $dark-text-primary;
          background-clip: text;
        }

        .alt-audit-subtitle {
          color: $dark-text-secondary;
        }
      }

      .help-nav {
        background: $dark-surface;
        box-shadow:
          $shadow-apple-sm,
          0 0 0 1px rgba($color-gray-600, 0.3);

        &:hover {
          box-shadow:
            $shadow-apple-md,
            0 0 0 1px rgba($color-primary, 0.2);
        }

        .nav-link {
          color: $dark-text-secondary;

          .nav-icon {
            background: rgba($color-gray-700, 0.4);

            &::before {
              background: radial-gradient(circle at center, rgba($color-primary, 0.3) 0%, transparent 70%);
            }
          }

          &:hover {
            background: rgba($color-primary, 0.12);
            color: $color-primary;

            .nav-icon {
              background: rgba($color-primary, 0.2);
            }
          }

          &.active {
            background: linear-gradient(135deg, $color-primary 0%, rgba($color-primary, 0.85) 100%);
            color: white;
            box-shadow:
              $shadow-apple-md,
              0 4px 12px rgba($color-primary, 0.4);
          }
        }
      }

      .help-section .section-header {
        border-bottom-color: $dark-border;

        .section-title {
          color: $dark-text-primary;
        }

        .section-description {
          color: $dark-text-secondary;
        }
      }

      .step-indicator {
        border-color: rgba($color-primary, 0.3);
        background: linear-gradient(135deg, rgba($color-primary, 0.2) 0%, rgba($color-primary, 0.12) 100%);
        box-shadow:
          $shadow-apple-sm,
          0 4px 12px rgba($color-primary, 0.25);
      }

      .quick-tips,
      .quality-tips,
      .system-info-section,
      .additional-resources {
        border-color: $dark-border;
        background: $dark-surface;
      }

      .tip-card,
      .feature-card,
      .quality-level,
      .troubleshooting-item,
      .support-card {
        border-color: $dark-border;
        background: rgba($dark-surface, 0.6);

        &:hover {
          border-color: rgba($color-primary, 0.3);
          background: rgba($dark-surface, 0.8);
        }
      }

      .info-item,
      .resource-link {
        border-color: $dark-border;
        background: rgba($dark-surface, 0.4);

        &:hover {
          border-color: rgba($color-primary, 0.3);
          background: rgba($dark-surface, 0.6);
        }
      }

      .step-title,
      .section-title,
      h3,
      h4,
      strong {
        color: $dark-text-primary;
      }

      .step-description,
      .section-description,
      p,
      .info-label {
        color: $dark-text-secondary;
      }

      .skeleton-loading {
        background: linear-gradient(
          90deg,
          rgba($color-gray-700, 0.3) 25%,
          rgba($color-gray-600, 0.3) 50%,
          rgba($color-gray-700, 0.3) 75%
        );
        background-size: 200% 100%;
      }

      // Dark mode specific enhancements
      .quality-badge {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
      }

      .trouble-header:hover {
        background: rgba($color-warning, 0.08);
      }

      .solution-steps .step-item {
        background: rgba($dark-surface, 0.3);

        &:hover {
          background: rgba($color-primary, 0.06);
        }
      }
    }

    // Reduced Motion Support - Disable all animations
    @include reduced-motion {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
      }

      .alt-audit-header,
      .alt-audit-help-container,
      .help-step,
      .feature-card,
      .quality-level {
        animation: none;
      }

      .nav-link,
      .button,
      .tip-card,
      .feature-icon,
      .quality-badge {
        transition: none;
      }
    }

    // High Contrast Mode Support
    @include high-contrast {
      .help-section,
      .tip-card,
      .feature-card,
      .quality-level,
      .troubleshooting-item,
      .support-card,
      .info-item,
      .resource-link {
        border: 2px solid currentcolor;
      }

      .nav-link.active {
        outline: 2px solid currentcolor;
        outline-offset: 2px;
      }
    }
  }
} // End .alt-audit-section wrapper