lmdWeb/html/assets/scss/pages/_page-header.scss

@use '../abstracts/variables' as v;
@use '../abstracts/mixins' as mix;
@use 'sass:map';

.page-header {
  position: relative;
  min-height: 400px;
  @include mix.flex(row, center, center);
  overflow: hidden;
  
  @include mix.respond-to-max('md') {
    min-height: 350px;
  }
  
  @include mix.respond-to-max('sm') {
    min-height: 300px;
  }
  
  // Background container
  .page-header-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    
    // Digital grid pattern
    .digital-grid {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: 
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 50px 50px;
      animation: grid-move 20s linear infinite;
      
      @include mix.respond-to-max('md') {
        background-size: 40px 40px;
      }
      
      @include mix.respond-to-max('sm') {
        background-size: 30px 30px;
      }
    }
    
    // Particles container
    .particles-container {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      
      .particle {
        position: absolute;
        width: 4px;
        height: 4px;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 50%;
        animation: particle-float 15s infinite ease-in-out;
        
        &:nth-child(1) {
          top: 20%;
          left: 10%;
          animation-delay: 0s;
          animation-duration: 12s;
        }
        
        &:nth-child(2) {
          top: 60%;
          left: 20%;
          animation-delay: -2s;
          animation-duration: 14s;
          width: 6px;
          height: 6px;
        }
        
        &:nth-child(3) {
          top: 40%;
          left: 80%;
          animation-delay: -4s;
          animation-duration: 16s;
        }
        
        &:nth-child(4) {
          top: 80%;
          left: 30%;
          animation-delay: -6s;
          animation-duration: 18s;
          width: 3px;
          height: 3px;
        }
        
        &:nth-child(5) {
          top: 30%;
          left: 60%;
          animation-delay: -8s;
          animation-duration: 13s;
          width: 5px;
          height: 5px;
        }
        
        &:nth-child(6) {
          top: 70%;
          left: 70%;
          animation-delay: -10s;
          animation-duration: 15s;
        }
        
        &:nth-child(7) {
          top: 10%;
          left: 40%;
          animation-delay: -12s;
          animation-duration: 17s;
          width: 7px;
          height: 7px;
        }
        
        &:nth-child(8) {
          top: 90%;
          left: 50%;
          animation-delay: -14s;
          animation-duration: 11s;
        }
        
        &:nth-child(9) {
          top: 50%;
          left: 15%;
          animation-delay: -16s;
          animation-duration: 19s;
          width: 8px;
          height: 8px;
        }
        
        &:nth-child(10) {
          top: 25%;
          left: 85%;
          animation-delay: -18s;
          animation-duration: 14s;
        }
        
        &:nth-child(11) {
          top: 75%;
          left: 5%;
          animation-delay: -20s;
          animation-duration: 16s;
          width: 6px;
          height: 6px;
        }
        
        &:nth-child(12) {
          top: 45%;
          left: 95%;
          animation-delay: -22s;
          animation-duration: 12s;
        }
      }
    }
    
    // Geometric overlay
    .geometric-overlay {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      
      .geometric-shape {
        position: absolute;
        border: 1px solid rgba(255, 255, 255, 0.1);
        
        &.shape-1 {
          width: 200px;
          height: 200px;
          top: 10%;
          left: -50px;
          border-radius: 50%;
          animation: geometric-rotate 25s linear infinite;
        }
        
        &.shape-2 {
          width: 150px;
          height: 150px;
          top: 60%;
          right: -30px;
          @include mix.transform(rotate(45deg));
          animation: geometric-pulse 8s ease-in-out infinite;
        }
        
        &.shape-3 {
          width: 100px;
          height: 100px;
          top: 30%;
          right: 15%;
          border-radius: 50%;
          animation: geometric-float 12s ease-in-out infinite;
        }
        
        &.shape-4 {
          width: 80px;
          height: 80px;
          bottom: 20%;
          left: 20%;
          @include mix.transform(rotate(30deg));
          animation: geometric-rotate 20s linear infinite reverse;
        }
      }
    }
  }
  
  // Content
  .page-header-content {
    @include mix.flex(row, center, center);
    position: relative;
    z-index: 10;
    text-align: center;
    max-width: 800px;
    padding: 0 map.get(v.$spacers, 3);
    
    @include mix.respond-to-max('sm') {
      padding: 0 map.get(v.$spacers, 2);
    }
  }
  
  // Breadcrumb
  .breadcrumb {
    @include mix.flex(row, center, center);
    gap: map.get(v.$spacers, 2);
    margin-bottom: map.get(v.$spacers, 3);
    font-size: map.get(v.$font-sizes, 'sm');
    
    @include mix.respond-to-max('sm') {
      margin-bottom: map.get(v.$spacers, 2);
    }
    
    .breadcrumb-link {
      color: rgba(255, 255, 255, 0.8);
      text-decoration: none;
      @include mix.transition(v.$transition-base);
      
      &:hover {
        color: v.$white;
      }
    }
    
    .breadcrumb-separator {
      color: rgba(255, 255, 255, 0.6);
      @include mix.flex(row, center, center);
      
      svg {
        width: 16px;
        height: 16px;
        fill: currentColor;
      }
    }
    
    .breadcrumb-current {
      color: v.$white;
      font-weight: map.get(v.$font-weights, 'medium');
    }
  }
  
  // Page title
  .page-title {
    font-family: v.$font-family-heading;
    font-size: map.get(v.$font-sizes, '4xl');
    font-weight: map.get(v.$font-weights, 'bold');
    color: v.$white;
    margin-bottom: map.get(v.$spacers, 3);
    line-height: 1.2;
    text-align: center;
    
    @include mix.respond-to-max('md') {
      font-size: map.get(v.$font-sizes, '3xl');
    }
    
    @include mix.respond-to-max('sm') {
      font-size: map.get(v.$font-sizes, '2xl');
      margin-bottom: map.get(v.$spacers, 2);
    }
  }
  
  // Page description
  .page-description {
    font-size: map.get(v.$font-sizes, 'lg');
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
    
    @include mix.respond-to-max('md') {
      font-size: map.get(v.$font-sizes, 'base');
    }
    
    @include mix.respond-to-max('sm') {
      font-size: map.get(v.$font-sizes, 'sm');
    }
  }
  
  // Floating elements
  .floating-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    
    .floating-circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.05);
      
      &.floating-circle-1 {
        width: 120px;
        height: 120px;
        top: 15%;
        right: 10%;
        animation: floating-1 20s ease-in-out infinite;
      }
      
      &.floating-circle-2 {
        width: 80px;
        height: 80px;
        bottom: 25%;
        left: 8%;
        animation: floating-2 15s ease-in-out infinite;
      }
      
      &.floating-circle-3 {
        width: 60px;
        height: 60px;
        top: 40%;
        left: 5%;
        animation: floating-3 18s ease-in-out infinite;
      }
    }
  }
}

// Animations
@keyframes particle-float {
  0%, 100% {
    @include mix.transform(translateY(0px) translateX(0px));
    opacity: 0.6;
  }
  25% {
    @include mix.transform(translateY(-20px) translateX(10px));
    opacity: 1;
  }
  50% {
    @include mix.transform(translateY(-10px) translateX(-15px));
    opacity: 0.8;
  }
  75% {
    @include mix.transform(translateY(-30px) translateX(5px));
    opacity: 0.9;
  }
}

@keyframes grid-move {
  0% {
    @include mix.transform(translate(0, 0));
  }
  100% {
    @include mix.transform(translate(50px, 50px));
  }
}

@keyframes geometric-rotate {
  0% {
    @include mix.transform(rotate(0deg));
  }
  100% {
    @include mix.transform(rotate(360deg));
  }
}

@keyframes geometric-pulse {
  0%, 100% {
    @include mix.transform(rotate(45deg) scale(1));
    opacity: 0.1;
  }
  50% {
    @include mix.transform(rotate(45deg) scale(1.1));
    opacity: 0.2;
  }
}

@keyframes geometric-float {
  0%, 100% {
    @include mix.transform(translateY(0px));
  }
  50% {
    @include mix.transform(translateY(-20px));
  }
}

@keyframes floating-1 {
  0%, 100% {
    @include mix.transform(translateY(0px) translateX(0px));
  }
  33% {
    @include mix.transform(translateY(-30px) translateX(20px));
  }
  66% {
    @include mix.transform(translateY(20px) translateX(-10px));
  }
}

@keyframes floating-2 {
  0%, 100% {
    @include mix.transform(translateY(0px) translateX(0px));
  }
  50% {
    @include mix.transform(translateY(-25px) translateX(15px));
  }
}

@keyframes floating-3 {
  0%, 100% {
    @include mix.transform(translateY(0px) translateX(0px));
  }
  25% {
    @include mix.transform(translateY(15px) translateX(-20px));
  }
  75% {
    @include mix.transform(translateY(-20px) translateX(10px));
  }
}

// Reduced motion support
@media (prefers-reduced-motion: reduce) {
  .page-header {
    .particle,
    .geometric-shape,
    .floating-circle,
    .digital-grid {
      animation: none;
    }
  }
}