@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  html {
    scroll-behavior: smooth;
  }
  body {
    @apply bg-paper-50 text-ink antialiased;
  }
  [dir='rtl'] body {
    @apply font-body-ar;
  }
  [dir='ltr'] body {
    @apply font-body;
  }
  h1,
  h2,
  h3,
  h4 {
    @apply font-display;
  }
  [dir='rtl'] h1,
  [dir='rtl'] h2,
  [dir='rtl'] h3,
  [dir='rtl'] h4 {
    @apply font-display-ar;
  }
  :focus-visible {
    outline: 2px solid theme('colors.volt.500');
    outline-offset: 2px;
  }
}

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

/* Signature element: the solar production curve used across hero/dividers */
.production-curve path {
  stroke-dasharray: 1000;
}

/* Scroll-reveal system — hidden state is only applied once JS has mounted
   (see components/ui/reveal.tsx), so content stays visible without JS. */
.reveal {
  opacity: 0;
  will-change: opacity, transform;
}
.reveal[data-variant='up'] {
  transform: translateY(22px);
}
.reveal[data-variant='down'] {
  transform: translateY(-14px);
}
.reveal[data-variant='fade'] {
  transform: none;
}
.reveal[data-variant='scale'] {
  transform: scale(0.94);
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.7s ease,
    transform 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Soft page fade-in for the outermost app shell */
@keyframes page-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.page-enter {
  animation: page-fade 0.5s ease-out both;
}