/*
 * 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 {
  .comming-soon {
    min-height: 100svh;
    display: grid;
    place-items: center;
    padding: var(--space-xl);
    background: var(--color-surface);
    color: var(--color-text);
    text-align: center;

    & .comming-soon__container {
      width: min(100%, 1200px);
      display: grid;
      grid-template-columns: 1fr;
      gap: var(--space-2xl);
      align-items: center;
      justify-items: center;
    }

    & .comming-soon__heading {
      max-width: var(--max-content);
      display: grid;
      gap: var(--space-m);
    }

    & .comming-soon__eyebrow {
      letter-spacing: 0.12em;
      text-transform: uppercase;
      font-weight: 500;
      color: color-mix(in oklab, var(--color-text) 70%, transparent);
    }

    & .comming-soon__title {
      font-family: var(--font-serif);
      font-weight: 600;
      font-size: var(--size-step-4);
      line-height: 1.1;
      margin: 0;
    }

    & .comming-soon__paragraph {
      font-size: var(--size-step-1);
    }

    & .comming-soon__badge {
      display: inline-block;
      padding: 0.4rem 0.8rem;
      border: 1px solid color-mix(in oklab, var(--color-text) 25%, transparent);
      border-radius: 999px;
      font-size: 0.85rem;
      color: color-mix(in oklab, var(--color-text) 80%, transparent);
      background: color-mix(in oklab, var(--color-accent) 18%, transparent);
    }

    /* Lyre visualization */
    & .lyre {
      --strings: 19;
      position: relative;
      width: min(90vw, 780px);
      aspect-ratio: 3 / 2.8;
      display: grid;
      place-items: center;
      isolation: isolate;

      & .lyre__body {
        position: absolute;
        inset: 4% 8% 6% 8%;
        border-radius: 100% 100% 60% 60% / 80% 80% 50% 50%;
        background: radial-gradient(110% 80% at 50% -10%, color-mix(in oklab, var(--color-primary) 40%, transparent) 0 40%, transparent 48%),
                    linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 45%, transparent) 0%, transparent 55%);
        opacity: 0.25;
        z-index: 0;
        filter: saturate(0.9);
      }

      & .lyre__pillar {
        position: absolute;
        top: 2%;
        bottom: 10%;
        width: clamp(10px, 1.4vw, 16px);
        background: linear-gradient(180deg, color-mix(in oklab, #000 12%, var(--color-primary)) 0%, var(--color-primary) 55%, color-mix(in oklab, #fff 14%, var(--color-primary)) 100%);
        border-radius: 12px;
        box-shadow: 0 8px 18px color-mix(in oklab, #000 10%, transparent);
        z-index: 1;

        &--left { left: 8%; transform: skewY(2deg); }
        &--right { right: 8%; transform: skewY(-2deg); }
      }

      & .lyre__crown {
        position: absolute;
        top: 2%;
        left: 14%;
        right: 14%;
        height: clamp(10px, 1.4vw, 16px);
        background: linear-gradient(180deg, color-mix(in oklab, #000 10%, var(--color-primary)) 0%, var(--color-primary) 60%, color-mix(in oklab, #fff 14%, var(--color-primary)) 100%);
        border-radius: 12px;
        z-index: 1;
        box-shadow: 0 8px 18px color-mix(in oklab, #000 10%, transparent);
      }

      & .lyre__strings {
        --gap: calc(100% / (var(--strings) - 1));
        position: absolute;
        top: 7%;
        bottom: 10%;
        left: 14%;
        right: 14%;
        z-index: 2;
      }

      & .lyre__string {
        --i: 1;
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc((var(--i) - 1) * var(--gap));
        width: 1.5px;
        background: linear-gradient(180deg, color-mix(in oklab, var(--color-primary) 40%, #000 10%) 0%, color-mix(in oklab, var(--color-primary) 80%, #fff 6%) 70%, color-mix(in oklab, var(--color-primary) 50%, #000 8%) 100%);
        transform-origin: 50% 0%;
        transition: box-shadow 0.2s ease;
        cursor: pointer;

        &.is-vibrating {
          animation: vibrate 220ms ease-out infinite;
          box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary) 30%, transparent);
        }

        &::after {
          content: "";
          position: absolute;
          inset-block: 0;
          inset-inline: -10px;
          z-index: 1;
        }
      }
    }

    & .comming-soon__cta {
      display: grid;
      gap: var(--space-s);
      justify-items: center;
    }

    & .muse-btn {
      appearance: none;
      background: var(--color-primary);
      color: #1d1a14;
      border: none;
      border-radius: 999px;
      padding: 0.75rem 1.1rem;
      font-weight: 600;
      letter-spacing: 0.02em;
      cursor: pointer;
      box-shadow: 0 6px 14px color-mix(in oklab, var(--color-primary) 35%, transparent);
      transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s;

      &:hover { transform: translateY(-1px); }
      &:active { transform: translateY(0); opacity: 0.9; }
    }

    & .sound-on {
      display: inline-grid;
      grid-auto-flow: column;
      align-items: center;
      gap: 0.45rem;
      font-size: 0.9rem;
      color: color-mix(in oklab, var(--color-text) 80%, transparent);

      & .dot {
        width: 8px; height: 8px; border-radius: 50%;
        background: var(--color-primary);
        box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-primary) 30%, transparent);
      }
    }

    & footer {
      margin-top: var(--space-xl);
      font-size: 0.9rem;
    }
  }
}

@keyframes vibrate {
  0% { transform: translateX(0px); }
  25% { transform: translateX(0.7px); }
  50% { transform: translateX(-0.7px); }
  75% { transform: translateX(0.4px); }
  100% { transform: translateX(0); }
}