/*
 * 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 ComingSoon component */
@layer components {
  .coming-soon {
    min-height: calc(100vh - 80px); /* Adjust based on header if exists, or just 100vh */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background: radial-gradient(circle at center, var(--color-bg-surface) 0%, var(--color-bg-deep) 100%);

    & .coming-soon__content {
      width: 100%;
      max-width: 600px;
      animation: fadeIn var(--transition-physical);
    }

    & .coming-soon__glass-panel {
      background: var(--color-bg-surface-glass);
      backdrop-filter: blur(var(--glass-blur));
      border: 1px solid var(--color-border-glass);
      border-radius: var(--radius-lg);
      padding: var(--space-3xl) var(--space-2xl);
      text-align: center;
      position: relative;
      overflow: hidden;
      box-shadow: var(--shadow-premium);

      /* Subtle "Red Line" and "Blue Line" accents */
      &::before, &::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        height: 2px;
        opacity: 0.6;
      }

      &::before {
        top: 0;
        background: var(--color-accent-blue);
      }

      &::after {
        bottom: 0;
        background: var(--color-accent-red);
      }
    }

    & .coming-soon__badge {
      display: inline-block;
      font-family: var(--font-family-heading);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.2em;
      color: var(--color-accent-red);
      margin-bottom: var(--space-md);
      font-weight: 700;
    }

    & .coming-soon__title {
      font-size: clamp(2rem, 8vw, 3.5rem);
      margin-bottom: var(--space-2xl);
      letter-spacing: -0.02em;
      line-height: 1;
    }

    & .coming-soon__quote {
      margin: 0 0 var(--space-2xl) 0;
      padding: 0;
      position: relative;

      & p {
        font-family: var(--font-family-body);
        font-size: 1.25rem;
        font-style: italic;
        color: var(--color-text-heading);
        margin-bottom: var(--space-sm);
        line-height: 1.4;
      }

      & cite {
        font-family: var(--font-family-heading);
        font-size: 0.875rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--color-text-main);
        font-style: normal;
      }
    }

    & .coming-soon__message {
      color: var(--color-text-main);
      max-width: 400px;
      margin: 0 auto var(--space-3xl);
      font-size: 1rem;
    }

    & .coming-soon__divider {
      height: 1px;
      background: linear-gradient(to right, transparent, var(--color-border-glass), transparent);
      margin-bottom: var(--space-md);
    }

    & .coming-soon__status {
      font-family: var(--font-family-heading);
      font-size: 0.75rem;
      text-transform: uppercase;
      letter-spacing: 0.3em;
      color: var(--color-accent-blue);
      margin: 0;
    }
  }
}

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