/*
 * 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.
 */

@layer components {
  .how-it-works {
    padding-block: var(--space-2xl);
    background: var(--color-surface);
    overflow: hidden;

    & .how-it-works__step {
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-xl);
      align-items: center;
      margin-bottom: var(--space-2xl);

      @media (width >= 800px) {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);

        &[data-step="2"] {
          & .how-it-works__visual {
            grid-column: 2;
          }
          & .how-it-works__content {
            grid-column: 1;
            grid-row: 1;
          }
        }
      }

      &:last-child {
        margin-bottom: 0;
      }
    }

    & .how-it-works__content {
      position: relative;
      padding-block: var(--space-l);

      & .how-it-works__overline {
        font-family: var(--font-serif);
        font-size: var(--size-step-0);
        color: var(--color-primary);
        text-transform: uppercase;
        letter-spacing: 0.2em;
        margin-bottom: var(--space-xs);
        font-weight: 600;
        position: relative;
        display: inline-block;
        opacity: 0.8;

        &::after {
          content: "";
          position: absolute;
          top: -0.5rem;
          left: 0;
          width: 2rem;
          height: 1px;
          background: var(--color-primary);
        }
      }

      & .how-it-works__title {
        font-family: var(--font-serif);
        font-size: var(--size-step-3);
        line-height: 1.2;
        margin-bottom: var(--space-m);
        color: var(--color-text);
      }

      & .how-it-works__description {
        font-size: var(--size-step-0);
        line-height: 1.8;
        opacity: 0.9;
        max-width: 50ch;

        & strong {
          color: var(--color-primary);
          font-weight: 600;
        }
        & em {
          font-style: italic;
          color: var(--color-accent);
        }
      }
    }

    & .how-it-works__visual {
      display: flex;
      justify-content: center;
      perspective: 1000px;
      position: relative;
    }

    & .how-it-works__frame {
      border: 1px solid var(--color-primary);
      padding: var(--space-xs);
      background: var(--color-surface);
      border-radius: var(--radius-m);
      box-shadow: 0 20px 40px rgba(0,0,0,0.3);
      overflow: hidden;
      width: 100%;
      max-width: 480px;
      animation: levitate-simple 6s ease-in-out infinite alternate;
    }

    &[data-step="1"], &[data-step="3"] {
      & .how-it-works__frame {
        transform: rotateY(5deg) rotateX(2deg);
      }
    }

    &[data-step="2"] {
      & .how-it-works__frame {
        transform: rotateY(-5deg) rotateX(2deg);
      }
    }

    & .how-it-works__img {
      width: 100%;
      height: auto;
      aspect-ratio: 4/3;
      object-fit: cover;
      border-radius: var(--radius-s);
      display: block;
    }
  }
}

@keyframes levitate-simple {
  from { transform: translateY(0); }
  to { transform: translateY(-20px); }
}