astro_avtourist/frontend/src/components/layout/header/Logo.astro

---
export interface Props {
  href?: string;
  variant?: 'light' | 'dark';
  class?: string;
}

const {
  href = '/',
  variant = 'light',
  class: className = '',
}: Props = Astro.props;

const isDark = variant === 'dark';
const accentColor = '#eac26e';
---

<a href={href} class={className} aria-label="Автоюрист 086 - главная страница">
  <div class="logo-container">
    <!-- Иконка: щит с рулём -->
    <div class="logo-icon">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48" fill="none" class="shield">
        <!-- Маска для анимации блика -->
        <defs>
          <linearGradient id="shineGradient" x1="0%" y1="0%" x2="100%" y2="0%">
            <stop offset="0%" stop-color="black" />
            <stop offset="50%" stop-color="white" />
            <stop offset="100%" stop-color="black" />
          </linearGradient>
          <mask id="shineMask">
            <rect x="-100%" y="0" width="100%" height="48" fill="url(#shineGradient)" class="mask-rect" />
          </mask>
        </defs>

        <!-- Базовый щит -->
        <path
            d="M24 4L6 10V22C6 34 24 44 24 44C24 44 42 34 42 22V10L24 4Z"
            fill={accentColor}
            stroke={accentColor}
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
        />

        <!-- Слой блика с маской -->
        <path
            class="shine-layer"
            d="M24 4L6 10V22C6 34 24 44 24 44C24 44 42 34 42 22V10L24 4Z"
            fill="rgba(255,255,255,0.7)"
            mask="url(#shineMask)"
            style="opacity: 0;"
        />

        <!-- Руль внутри щита -->
        <circle cx="24" cy="24" r="8" fill={isDark ? '#1e3050' : '#ffffff'} opacity="0.9"/>
        <circle cx="24" cy="24" r="3" fill={accentColor}/>

        <!-- Спицы руля -->
        <line x1="24" y1="16" x2="24" y2="20" stroke={isDark ? '#1e3050' : '#ffffff'} stroke-width="2"/>
        <line x1="24" y1="28" x2="24" y2="32" stroke={isDark ? '#1e3050' : '#ffffff'} stroke-width="2"/>
        <line x1="16" y1="24" x2="20" y2="24" stroke={isDark ? '#1e3050' : '#ffffff'} stroke-width="2"/>
        <line x1="28" y1="24" x2="32" y2="24" stroke={isDark ? '#1e3050' : '#ffffff'} stroke-width="2"/>
      </svg>
    </div>

    <!-- Текст логотипа -->
    <div class="logo-text">
      <span class="logo-name">Автоюрист</span>
      <span class="logo-number">086</span>
    </div>
  </div>
</a>

<style>
  .logo-container {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: transform 0.3s ease;
  }

  .logo-container:hover {
    transform: scale(1.02);
  }

  .logo-icon {
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.1));
    position: relative;
    overflow: hidden; /* Обрезаем всё что выходит за границы */
    border-radius: 8px; /* Скругление для красоты */
  }

  .shield {
    width: 100%;
    height: 100%;
    transition: transform 0.3s ease;
    display: block;
  }

  /* Маска по умолчанию слева (не видно блика) */
  .mask-rect {
    transform: translateX(0%);
    transition: transform 0s;
  }

  /* Слой блика скрыт по умолчанию */
  .shine-layer {
    opacity: 0;
    transition: opacity 0.1s ease;
  }

  /* При наведении — анимируем маску и показываем блик */
  .logo-container:hover .shine-layer {
    opacity: 1;
  }

  .logo-container:hover .mask-rect {
    animation: shineSlide 0.8s ease-out forwards;
  }

  @keyframes shineSlide {
    0% {
      transform: translateX(-100%);
    }
    100% {
      transform: translateX(200%);
    }
  }

  /* CSS блик — теперь внутри иконки */
  .logo-icon::after {
    content: '';
    position: absolute;
    top: 0;
    left: -50%; /* Начинаем изнутри */
    width: 30%; /* Уменьшили ширину */
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.9) 50%,
        transparent 100%
    );
    transform: skewX(-25deg);
    pointer-events: none;
    opacity: 0;
  }

  .logo-container:hover .logo-icon::after {
    animation: cssShine 0.7s ease-out 0.1s forwards;
  }

  @keyframes cssShine {
    0% {
      left: -30%;
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    90% {
      opacity: 1;
    }
    100% {
      left: 100%; /* Останавливаемся внутри иконки */
      opacity: 0;
    }
  }

  .logo-container:hover .shield {
    transform: rotate(-3deg);
  }

  .logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
  }

  .logo-name {
    font-size: 1rem;
    font-weight: 700;
    color: #1e3050;
    letter-spacing: -0.3px;
  }

  .logo-number {
    font-size: 1.1rem;
    font-weight: 900;
    color: #eac26e;
    letter-spacing: -0.5px;
  }

  @media (max-width: 576px) {
    .logo-icon {
      width: 36px;
      height: 36px;
    }

    .logo-name {
      font-size: 0.9rem;
    }

    .logo-number {
      font-size: 1rem;
    }
  }
</style>