/*
---------------------------------------------------------------------------
DEVNITE STUDIOS
---------------------------------------------------------------------------
Project      : Kirzen 4.1
Organization : Devnite Studios
License      : Proprietary
Copyright    : © 2026 Devnite Studios. All rights reserved.

This source file is proprietary software developed and maintained by
Devnite Studios as part of the Kirzen 4.1 project.

Unauthorized copying, redistribution, modification, publication,
or reproduction of this file or any portion of its contents is strictly
prohibited without prior written authorization from Devnite Studios.
---------------------------------------------------------------------------
*/

/* ============================================================================
   PREMIUM COMING SOON
   ============================================================================ */

.premium-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  min-height: 60vh;

  padding: 48px 24px;

  text-align: center;

  animation: premium-fade-in 400ms ease;
}

@keyframes premium-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ============================================================================
   ICON
   ============================================================================ */

.soon-icon {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 88px;
  height: 88px;

  margin-bottom: 24px;

  border: 1px solid rgba(88, 101, 242, 0.2);
  border-radius: 50%;

  background: var(--accent-subtle);

  color: var(--accent-primary);

  animation: premium-pulse 3s ease-in-out infinite;
}

@keyframes premium-pulse {
  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(88, 101, 242, 0.2);
  }

  50% {
    box-shadow: 0 0 0 12px rgba(88, 101, 242, 0);
  }
}

/* ============================================================================
   BADGE
   ============================================================================ */

.soon-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 16px;

  padding: 5px 12px;

  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: var(--radius-full);

  background: var(--success-subtle);

  color: var(--success);

  font-size: 11px;
  font-weight: 700;

  letter-spacing: 0.06em;

  text-transform: uppercase;
}

/* ============================================================================
   TITLE & DESCRIPTION
   ============================================================================ */

.soon-title {
  margin: 0 0 10px;

  color: var(--text-primary);

  font-size: 38px;
  font-weight: 800;

  line-height: 1.15;

  letter-spacing: -1.2px;
}

.soon-desc {
  max-width: 430px;

  margin: 0 0 32px;

  color: var(--text-secondary);

  font-size: 15px;

  line-height: 1.6;
}

/* ============================================================================
   FEATURES PREVIEW
   ============================================================================ */

.soon-features {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;

  margin-bottom: 32px;
}

.soon-feature {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  padding: 8px 14px;

  border: 1px solid var(--border-color);
  border-radius: var(--radius-full);

  background: var(--bg-surface);

  color: var(--text-secondary);

  font-size: 12px;
  font-weight: 500;

  transition:
    border-color var(--transition-fast),
    color var(--transition-fast),
    background-color var(--transition-fast);
}

.soon-feature:hover {
  border-color: var(--border-strong);
  color: var(--text-primary);
  background: var(--bg-surface-hover);
}

.soon-feature svg {
  color: var(--success);
}

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 640px) {
  .premium-soon {
    min-height: 50vh;
    padding: 36px 16px;
  }

  .soon-icon {
    width: 72px;
    height: 72px;

    margin-bottom: 20px;
  }

  .soon-title {
    font-size: 30px;
  }

  .soon-desc {
    font-size: 14px;
  }

  .soon-features {
    gap: 8px;
  }

  .soon-feature {
    padding: 7px 12px;

    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .premium-soon,
  .soon-icon {
    animation: none !important;
  }
}