/*
 * ASUKA247 ORION Design System v1.0
 * Compliance Without Compromise
 */

:root {
  /* Brand */
  --orion-navy-950: #040b12;
  --orion-navy-900: #071522;
  --orion-navy-800: #0a2949;
  --orion-navy-700: #123f6d;
  --orion-blue-600: #2f78b7;
  --orion-blue-400: #8dbbe6;
  --orion-amber-600: #c4622d;
  --orion-amber-400: #e39a69;

  /* Status */
  --orion-success: #319a64;
  --orion-warning: #d88725;
  --orion-critical: #c43d3d;
  --orion-information: #2f78b7;

  /* Surfaces */
  --orion-white: #ffffff;
  --orion-surface: #f4f6f8;
  --orion-surface-raised: #ffffff;
  --orion-border: #dce3e9;
  --orion-text: #111820;
  --orion-muted: #65707c;

  /* Shape */
  --orion-radius-sm: 4px;
  --orion-radius-md: 8px;
  --orion-radius-lg: 14px;

  /* Elevation */
  --orion-shadow-sm: 0 6px 18px rgba(7, 21, 34, 0.08);
  --orion-shadow-md: 0 18px 45px rgba(7, 21, 34, 0.14);
  --orion-shadow-lg: 0 34px 90px rgba(0, 0, 0, 0.32);

  /* Motion */
  --orion-motion-fast: 160ms;
  --orion-motion-normal: 280ms;
  --orion-motion-slow: 700ms;

  /* Focus */
  --orion-focus: 0 0 0 3px rgba(47, 120, 183, 0.32);
}

/* Universal focus standard */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  box-shadow: var(--orion-focus);
}

/* Standard enterprise card behaviour */
.story-grid article,
.audience-grid article,
.benefit-grid article,
.preview-panel,
.preview-stats div {
  transition:
    transform var(--orion-motion-normal) ease,
    box-shadow var(--orion-motion-normal) ease,
    border-color var(--orion-motion-normal) ease;
}

.story-grid article:hover,
.audience-grid article:hover {
  transform: translateY(-5px);
  border-color: rgba(47, 120, 183, 0.35);
  box-shadow: var(--orion-shadow-md);
}

.benefit-grid article:hover {
  transform: translateY(-5px);
  border-color: rgba(227, 154, 105, 0.42);
  background: rgba(255, 255, 255, 0.06);
}

/* Product display motion */
.product-preview {
  animation: orionFloat 7s ease-in-out infinite;
}

.preview-window {
  border-radius: var(--orion-radius-sm);
}

.preview-stats div:hover,
.preview-panel:hover {
  transform: translateY(-2px);
  box-shadow: var(--orion-shadow-sm);
}

/* Subtle animated grid */
.hero-grid {
  animation: orionGridMove 28s linear infinite;
}

/* Light sweep across product preview */
.product-preview::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      110deg,
      transparent 25%,
      rgba(255, 255, 255, 0.07) 45%,
      transparent 65%
    );
  transform: translateX(-120%);
  animation: orionSweep 8s ease-in-out infinite;
}

.product-preview {
  position: relative;
  overflow: hidden;
}

/* Scroll reveal */
.orion-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--orion-motion-slow) ease,
    transform var(--orion-motion-slow) ease;
}

.orion-reveal.orion-visible {
  opacity: 1;
  transform: translateY(0);
}

.orion-delay-1 {
  transition-delay: 80ms;
}

.orion-delay-2 {
  transition-delay: 160ms;
}

.orion-delay-3 {
  transition-delay: 240ms;
}

/* Stronger CTA feedback */
.button,
.nav-demo,
.demo-form button {
  transition:
    transform var(--orion-motion-fast) ease,
    filter var(--orion-motion-fast) ease,
    box-shadow var(--orion-motion-fast) ease;
}

.button-primary:hover,
.nav-demo:hover,
.demo-form button:hover {
  box-shadow: 0 12px 28px rgba(196, 98, 45, 0.28);
}

/* Navigation underline */
.main-nav > a:not(.nav-demo) {
  position: relative;
}

.main-nav > a:not(.nav-demo)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: -8px;
  height: 2px;
  background: var(--orion-amber-600);
  transition: right var(--orion-motion-normal) ease;
}

.main-nav > a:not(.nav-demo):hover::after,
.main-nav > a:not(.nav-demo):focus-visible::after {
  right: 0;
}

/* Standardised form appearance */
.demo-form {
  border-radius: var(--orion-radius-md);
  box-shadow: var(--orion-shadow-lg);
}

.demo-form input,
.demo-form select,
.demo-form textarea {
  border-radius: var(--orion-radius-sm);
  transition:
    border-color var(--orion-motion-fast) ease,
    background var(--orion-motion-fast) ease,
    box-shadow var(--orion-motion-fast) ease;
}

.demo-form input:hover,
.demo-form select:hover,
.demo-form textarea:hover {
  background: #ffffff;
  border-color: #aebdca;
}

/* Animated connection status */
.preview-status::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 7px;
  border-radius: 50%;
  background: #75d59e;
  box-shadow: 0 0 0 rgba(117, 213, 158, 0.55);
  animation: orionPulse 2.2s infinite;
}

/* Keyframes */
@keyframes orionFloat {
  0%, 100% {
    transform: perspective(1300px) rotateY(-3deg) rotateX(2deg)
      translateY(0);
  }

  50% {
    transform: perspective(1300px) rotateY(-3deg) rotateX(2deg)
      translateY(-9px);
  }
}

@keyframes orionGridMove {
  from {
    background-position: 0 0;
  }

  to {
    background-position: 56px 56px;
  }
}

@keyframes orionSweep {
  0%, 62% {
    transform: translateX(-120%);
  }

  82%, 100% {
    transform: translateX(120%);
  }
}

@keyframes orionPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(117, 213, 158, 0.55);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(117, 213, 158, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(117, 213, 158, 0);
  }
}

@media (max-width: 1100px) {
  .product-preview {
    animation: none;
  }

  @keyframes orionFloat {
    from,
    to {
      transform: none;
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .product-preview,
  .hero-grid,
  .product-preview::after,
  .preview-status::before {
    animation: none !important;
  }

  .orion-reveal {
    opacity: 1;
    transform: none;
  }
}