/* ========================================
   CSS Variables
   ======================================== */
  @font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa2JL7W0Q5n-wU.woff2) format('woff2');
    unicode-range: U +0460 -052F, U +1C80 -1C8A, U +20B4, U +2DE0 -2DFF, U + A640-A69F, U + FE2E-FE2F;
}
:root {
  --color-bg-primary: #121212;
  --color-bg-card: #1E1E1E;
  --color-accent: #FF8C42;
  --color-accent-hover: #e67a32;
  --color-text-primary: #ffffff;
  --color-text-secondary: #9ca3af;
  --color-text-muted: #6b7280;
  --color-border: #374151;
  --color-border-light: #4b5563;
}

/* ========================================
   Base Styles
   ======================================== */
body {
  font-family: 'Inter', sans-serif;
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  line-height: 1.5;
}

/* ========================================
   Utility Classes (Tailwind Extensions)
   ======================================== */
.accent-orange { color: var(--color-accent); }
.bg-accent-orange { background-color: var(--color-accent); }
.border-accent-orange { border-color: var(--color-accent); }

/* ========================================
   Animations
   ======================================== */

/* Fade in from bottom (for results) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.7s ease-out forwards;
}

/* Spinner (for image generation) */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Pulse (for loading skeleton) */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ========================================
   Component Styles
   ======================================== */

/* Details/Summary arrow rotation */
details[open] .details-arrow {
  transform: rotate(180deg);
}

details summary::-webkit-details-marker {
  display: none;
}

/* Form inputs focus state */
input:focus,
textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

/* Image upload area hover */
.image-upload-area:hover {
  border-color: var(--color-border-light);
}

.image-upload-area.has-image {
  border-color: var(--color-accent);
  background-color: rgba(255, 140, 66, 0.05);
}

/* POV type button states */
.pov-btn {
  transition: all 0.2s ease;
}

.pov-btn.active {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: white;
}

.pov-btn:not(.active):hover {
  border-color: var(--color-border-light);
}

/* Submit button */
.submit-btn {
  transition: all 0.2s ease;
}

.submit-btn:hover:not(:disabled) {
  background-color: var(--color-accent-hover);
}

.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Villain image hover effect */
.villain-image-container img {
  transition: transform 1s ease;
}

.villain-image-container:hover img {
  transform: scale(1.05);
}

/* Scene card hover */
.scene-card {
  transition: border-color 0.2s ease;
}

.scene-card:hover {
  border-color: var(--color-border-light);
}

.scene-card:hover .scene-number {
  background-color: var(--color-accent);
  color: white;
}

/* ========================================
   Visibility Utilities
   ======================================== */
.hidden {
  display: none !important;
}

/* ========================================
   Print Styles
   ======================================== */
@media print {
  body {
    background-color: white;
    color: black;
  }

  #form-section,
  #empty-state,
  #loading-skeleton,
  .action-footer,
  header,
  footer {
    display: none !important;
  }

  #result-section {
    display: block !important;
  }

  .scene-card {
    break-inside: avoid;
    border: 1px solid #ccc;
    margin-bottom: 1rem;
  }
}

/* ========================================
   Scrollbar Styling
   ======================================== */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-border-light);
}