/**
 * Phase 7 Stylesheet — پرداخت نهایی UI/UX
 * ---------------------------------------------------------------------------
 * انیمیشن‌های ورود/انتقال، مکعب سه‌بعدی جهت‌گیری (CSS 3D خالص)، پنل
 * WebGL Orb، سیستم Toast، Responsive تکمیلی، و پشتیبانی کامل از
 * prefers-reduced-motion.
 */

/* ===================== Reduced Motion (اولویت اول، بالای فایل) ===================== */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===================== Panel Entrance Animation ===================== */

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

.app-grid .panel {
  animation: panelFadeIn 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.app-grid .panel:nth-child(1) { animation-delay: 0.02s; }
.app-grid .panel:nth-child(2) { animation-delay: 0.06s; }
.app-grid .panel:nth-child(3) { animation-delay: 0.10s; }
.app-grid .panel:nth-child(4) { animation-delay: 0.14s; }
.app-grid .panel:nth-child(5) { animation-delay: 0.18s; }
.app-grid .panel:nth-child(6) { animation-delay: 0.22s; }

/* ===================== 3D Tilt Card (نمایش کنترلر) ===================== */

.panel-controller {
  transition: box-shadow 0.3s ease;
}

.panel-controller:hover {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(45, 226, 196, 0.15);
}

/* ===================== 3D Orientation Cube (Motion Panel) ===================== */

.panel-3d-showcase {
  grid-column: 1 / -1;
}

.showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  padding: 20px;
}

.showcase-block {
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.showcase-block h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  align-self: flex-start;
}

.orientation-stage {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 700px;
}

.orientation-cube {
  position: relative;
  width: 88px;
  height: 88px;
  transform-style: preserve-3d;
  transform: rotateX(-90deg) rotateY(0deg);
  transition: transform 0.05s linear;
}

.cube-face {
  position: absolute;
  width: 88px;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: linear-gradient(145deg, rgba(45, 226, 196, 0.12), rgba(255, 255, 255, 0.03));
  border: 1px solid var(--border-strong);
  backface-visibility: hidden;
}

.cube-top { transform: translateZ(44px); background: linear-gradient(145deg, rgba(45, 226, 196, 0.25), rgba(45, 226, 196, 0.05)); color: var(--signal-cyan); }
.cube-bottom { transform: rotateX(180deg) translateZ(44px); }
.cube-front { transform: rotateX(90deg) translateZ(44px); }
.cube-back { transform: rotateX(-90deg) translateZ(44px); }
.cube-left { transform: rotateY(-90deg) translateZ(44px); }
.cube-right { transform: rotateY(90deg) translateZ(44px); }

.motion-flip-controls {
  display: flex;
  gap: 16px;
  font-size: 11.5px;
  color: var(--text-faint);
}

.motion-flip-controls label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* ===================== WebGL Signal Orb ===================== */

.orb-stage {
  width: 100%;
  height: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.orb-canvas {
  width: 160px;
  height: 160px;
}

/* ===================== Toast Notifications ===================== */

.toast-container {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 300;
  display: flex;
  flex-direction: column-reverse;
  gap: 10px;
  max-width: 360px;
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-primary);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: auto;
  cursor: pointer;
}

.toast-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.toast-info { border-inline-start: 3px solid var(--signal-violet); }
.toast-success { border-inline-start: 3px solid var(--signal-cyan); }
.toast-warning { border-inline-start: 3px solid var(--signal-amber); }
.toast-error { border-inline-start: 3px solid var(--signal-red); }

/* ===================== Responsive Refinement (تکمیلی) ===================== */

@media (max-width: 1280px) and (min-width: 981px) {
  .app-grid {
    grid-template-columns: 1.2fr 1fr;
  }
}

@media (max-width: 980px) {
  .showcase-grid {
    grid-template-columns: 1fr;
  }
  .toast-container {
    left: 12px;
    right: 12px;
    max-width: none;
    bottom: 12px;
  }
  .btn {
    min-height: 40px;
  }
}

@media (max-width: 560px) {
  .brand-text h1 { font-size: 14.5px; }
  .brand-text p { font-size: 11px; }
  .wizard-actions .btn { flex: 1 1 auto; }
  .analog-canvas-wrap { flex-direction: column; }
}