/*
 * This file is part of the UX SDC Bundle
 *
 * (c) Jozef Môstka <https://github.com/tito10047/ux-sdc>
 *
 * For the full copyright and license information, please view the LICENSE
 * file that was distributed with this source code.
 */

/* Styles for Hero component */
@layer components {
  .hero {
    position: relative;
    min-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
    background: radial-gradient(circle at center, #1a1e2e 0%, #0b0d17 100%);
    color: #ffffff;
    padding: var(--space-xl) var(--space-m);

    & .hero__content {
      position: relative;
      z-index: 1;
      max-width: 800px;
      margin-inline: auto;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    & .hero__logo-wrapper {
      margin-bottom: var(--space-xl);
      animation: fadeIn 2s ease-out;
      position: relative;
      display: grid;
      place-items: center;
      width: clamp(200px, 30vw, 300px);
    }

    & .hero__logo {
      grid-area: 1 / 1;
      width: 100%;
      height: auto;
      filter: drop-shadow(0 0 15px rgba(194, 166, 107, 0.4));

      &.hero__logo--star {
        animation: pulse var(--star-duration, 3s) ease-in-out var(--star-delay, 0s) infinite alternate;
      }

      &:nth-child(2) { --star-duration: 2.5s; --star-delay: 0.1s; }
      &:nth-child(3) { --star-duration: 3.2s; --star-delay: 0.5s; }
      &:nth-child(4) { --star-duration: 2.8s; --star-delay: 1.2s; }
      &:nth-child(5) { --star-duration: 3.5s; --star-delay: 0.2s; }
      &:nth-child(6) { --star-duration: 2.2s; --star-delay: 0.8s; }
      &:nth-child(7) { --star-duration: 3.0s; --star-delay: 1.5s; }
      &:nth-child(8) { --star-duration: 2.7s; --star-delay: 0.4s; }
      &:nth-child(9) { --star-duration: 3.3s; --star-delay: 1.0s; }
    }

    & .hero__title {
      font-family: var(--font-serif);
      font-size: var(--size-step-4);
      line-height: 1.1;
      margin-bottom: var(--space-m);
      color: var(--color-primary);
      text-shadow: 0 2px 10px rgba(0,0,0,0.5);
    }

    & .hero__subtitle {
      font-size: var(--size-step-1);
      margin-bottom: var(--space-xl);
      max-width: 60ch;
      margin-inline: auto;
      opacity: 0.9;
      color: #e0e0e0;
    }

    & .hero__actions {
      display: flex;
      justify-content: center;
      gap: var(--space-m);
    }
  }
}

@keyframes pulse {
  0% { transform: scale(1); opacity: 0.8; }
  100% { transform: scale(1.05); opacity: 1; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}