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

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

@layer components {
  .elbrus {
    --elbrus-bg: color-mix(in srgb, var(--color-surface), transparent 93%);
    --elbrus-border: color-mix(in srgb, var(--color-text), transparent 90%);
    --elbrus-accent: var(--color-accent, #00f5d4);
    
    padding-block: var(--space-xl);
    display: flex;
    justify-content: center;
    width: 100%;

    & .elbrus__terminal {
      width: 100%;
      max-width: 900px;
      min-height: 450px;
      background: var(--elbrus-bg);
      backdrop-filter: blur(24px);
      -webkit-backdrop-filter: blur(24px);
      border: 1px solid var(--elbrus-border);
      border-radius: var(--radius-md, 20px);
      padding: var(--space-l);
      box-shadow: 0 40px 100px rgba(0, 0, 0, 0.15);
      display: flex;
      flex-direction: column;
      gap: var(--space-m);
      transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      overflow: hidden;

      &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--elbrus-accent), transparent);
        opacity: 0.4;
      }
    }

    &[data-state="gameover"] .elbrus__terminal {
      border-color: rgba(255, 77, 77, 0.3);
      box-shadow: 0 0 50px rgba(255, 77, 77, 0.05);
      
      &::before {
        background: linear-gradient(90deg, transparent, #ff4d4d, transparent);
      }
    }

    &[data-state="victory"] .elbrus__terminal {
      border-color: rgba(77, 255, 140, 0.3);
      box-shadow: 0 0 50px rgba(77, 255, 140, 0.05);

      &::before {
        background: linear-gradient(90deg, transparent, #4dff8c, transparent);
      }
    }

    & .elbrus__status-bar {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--font-mono);
      font-size: 0.65rem;
      color: var(--color-text-muted);
      text-transform: uppercase;
      letter-spacing: 0.1em;
    }

    & .elbrus__status-indicators {
        display: flex;
        gap: var(--space-m);
    }

    & .elbrus__status-text {
        &::before {
            content: "// ";
            opacity: 0.5;
        }
    }

    & .elbrus__inventory {
        display: flex;
        gap: var(--space-xs);
    }

    & .elbrus__item {
        font-size: 1.1rem;
        opacity: 0.1;
        filter: grayscale(100%);
        transition: all 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        transform: scale(0.9);
        
        &[data-active="true"] {
            opacity: 1;
            filter: grayscale(0%);
            transform: scale(1.1);
        }
    }

    & .elbrus__content {
      flex: 1;
      font-family: var(--font-mono);
      font-size: var(--size-step-0);
      line-height: 1.8;
      color: var(--color-text);
      min-height: 220px;
      scrollbar-width: none;
      overflow-y: auto;
      
      &::-webkit-scrollbar {
          display: none;
      }
    }

    & .elbrus__choices {
      display: flex;
      flex-wrap: wrap;
      gap: var(--space-s);
      margin-top: var(--space-l);
      min-height: 60px;
      
      &[data-visible="false"] {
          pointer-events: none;
          opacity: 0;
      }
    }

    & .elbrus__choice {
      padding: 0.5rem 1.25rem;
      background: color-mix(in srgb, var(--color-text), transparent 92%);
      border: 1px solid color-mix(in srgb, var(--color-text), transparent 85%);
      border-radius: 9999px; /* TAG style */
      color: var(--color-text);
      cursor: pointer;
      font-family: var(--font-mono);
      font-size: 0.75rem;
      font-weight: 500;
      letter-spacing: 0.05em;
      transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

      &:hover {
        background: var(--color-accent);
        color: var(--clr-midnight-blue, #000);
        border-color: var(--color-accent);
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }

      &:active {
          transform: translateY(-1px);
      }
    }
  }
}