/*
 * 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: 100vh;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-inline: var(--space-l);
    background-color: var(--color-surface);
    overflow: hidden;

    & .hero__content {
      position: relative;
      z-index: 10;
      max-width: 800px;
      margin-left: 5%;
      padding: var(--space-xl);

      /* Glassmorphism */
      background: rgba(255, 255, 255, 0.03);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-radius: var(--space-m);
      border: 1px solid rgba(255, 255, 255, 0.1);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
    }

    & .hero__title {
      font-family: var(--font-sans);
      font-size: clamp(4rem, 15vw, 10rem);
      font-weight: 900;
      line-height: 0.85;
      letter-spacing: -0.04em;
      margin: 0;
      color: var(--color-text);
      text-transform: uppercase;

      & span {
        display: block;
        color: var(--color-accent);
        opacity: 0.8;
      }
    }

    & .hero__subtitle {
      font-family: var(--font-mono);
      font-size: var(--size-step-1);
      font-weight: 300;
      margin-top: var(--space-l);
      max-width: 45ch;
      color: var(--color-text-muted);
      line-height: 1.4;
      letter-spacing: 0.02em;
    }

    & .hero__image-wrapper {
      position: absolute;
      right: -5%;
      top: 10%;
      width: 65%;
      height: 85%;
      z-index: 1;

      /* Organic shape */
      border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);

      /* Breathing animation */
      animation: breathe 18s ease-in-out infinite alternate;
      will-change: border-radius;
    }

    & .hero__image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      filter: grayscale(15%) brightness(0.9) contrast(1.1);
      transform: scale(1.1);
      transition: transform 2s var(--ease-zen);

      &:hover {
        transform: scale(1.02);
      }
    }
  }

  @keyframes breathe {
    0% {
      border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
    33% {
      border-radius: 60% 40% 50% 50% / 50% 60% 40% 50%;
    }
    66% {
      border-radius: 50% 50% 40% 60% / 60% 40% 50% 50%;
    }
    100% {
      border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }
  }

  /* Dark mode overrides for glassmorphism */
  @media (prefers-color-scheme: dark) {
    .hero .hero__content {
      background: rgba(15, 23, 42, 0.4);
      border: 1px solid rgba(255, 255, 255, 0.05);
      box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
    }

    .hero .hero__subtitle {
      color: var(--clr-moon-glow);
      opacity: 0.9;
    }
  }

  /* Responsive tweaks */
  @media (max-width: 1024px) {
    .hero {
      flex-direction: column;
      justify-content: center;
      padding-top: var(--space-2xl);

      & .hero__content {
        margin-left: 0;
        max-width: 100%;
        text-align: center;
      }

      & .hero__image-wrapper {
        position: relative;
        right: 0;
        top: 0;
        width: 100%;
        height: 50vh;
        margin-top: var(--space-xl);
      }
    }
  }

  :root {
    --ease-zen: cubic-bezier(0.25, 0.1, 0.25, 1);
  }
}