/* Base styles - Tailwind CDN handles most. Sonner toast container. */
@import "@fontsource/fira-sans/400.css";
@import "@fontsource/fira-sans/500.css";
/* Fira Sans 600 + Fira Code 400/500 loaded async via fonts-defer.css (Performance Audit plan §3.2). */

@import "sonner/dist/styles.css";

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

@layer base {
  body {
    @apply font-fira bg-app-base text-app-text antialiased;
  }
}

:root {
  /* Sidebar: dark theme to match app (#0B0B1A, #23233A, #8B5CF6) */
  --sidebar: 240 10% 4%;
  --sidebar-foreground: 210 20% 96%;
  --sidebar-primary: 263 70% 58%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 15% 15%;
  --sidebar-accent-foreground: 210 20% 96%;
  --sidebar-border: 240 15% 18%;
  --sidebar-ring: 263 70% 58%;
}

.dark {
  --sidebar: 240 5.9% 10%;
  --sidebar-foreground: 240 4.8% 95.9%;
  --sidebar-primary: 263 70% 58%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: 240 3.7% 15.9%;
  --sidebar-accent-foreground: 240 4.8% 95.9%;
  --sidebar-border: 240 3.7% 15.9%;
  --sidebar-ring: 263 70% 58%;
}

/* AdSlot: reserva espaço e evita layout shift (min-height no wrapper + containers) */
.ad-slot-wrapper {
  position: relative;
}

.ad-slot-adsense-container,
.ad-slot-adsterra-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
}

/* Tema movido para tailwind.config.js */

/* ─── Landing page animations ─────────────────────────────────────── */

@keyframes lp-fade-up {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

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

@keyframes lp-fade-left {
  from {
    opacity: 0;
    transform: translateX(-28px);
  }

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

@keyframes lp-fade-right {
  from {
    opacity: 0;
    transform: translateX(28px);
  }

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

@keyframes lp-scale-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Utility classes applied by the useInView hook */
.lp-hidden {
  opacity: 0;
}

.lp-anim-up {
  animation: lp-fade-up 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.lp-anim-left {
  animation: lp-fade-left 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.lp-anim-right {
  animation: lp-fade-right 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.lp-anim-scale {
  animation: lp-scale-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Stagger delays — apply via inline style or delay-N class */
.lp-delay-1 {
  animation-delay: 0.05s;
}

.lp-delay-2 {
  animation-delay: 0.12s;
}

.lp-delay-3 {
  animation-delay: 0.19s;
}

.lp-delay-4 {
  animation-delay: 0.26s;
}

.lp-delay-5 {
  animation-delay: 0.33s;
}

.lp-delay-6 {
  animation-delay: 0.40s;
}

@keyframes neon-pulse {

  0%,
  100% {
    box-shadow: 0 0 15px rgba(255, 140, 0, 0.4);
    border-color: rgba(255, 140, 0, 0.8);
  }

  50% {
    box-shadow: 0 0 30px rgba(255, 140, 0, 0.7);
    border-color: rgba(255, 140, 0, 1);
  }
}

.animate-pulse-neon {
  animation: neon-pulse 2s infinite ease-in-out;
}

/* Disable text selection in protected landing sections (copy protection) */
.no-select {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {

  .lp-hidden,
  .lp-anim-up,
  .lp-anim-left,
  .lp-anim-right,
  .lp-anim-scale,
  .animate-pulse-neon {
    animation: none;
    opacity: 1;
  }
}

/* HowTo modal: HTML from i18n (trusted strings) */
.howto-content p {
  margin-bottom: 0.75rem;
}

.howto-content p:last-child {
  margin-bottom: 0;
}

.howto-content .howto-lead {
  font-size: 0.9375rem;
  color: #e2e8f0;
  margin-bottom: 1rem;
  line-height: 1.55;
}

.howto-content .howto-sub {
  font-weight: 600;
  color: #c4b5fd;
  margin-top: 0.75rem;
  margin-bottom: 0.35rem;
}

.howto-content ol.howto-steps {
  list-style: decimal;
  padding-left: 1.25rem;
  margin: 0.35rem 0 0.75rem;
}

.howto-content ol.howto-steps li {
  margin-bottom: 0.4rem;
  padding-left: 0.25rem;
}

.howto-content ul.howto-bullets {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0.35rem 0 0.75rem;
}

.howto-content ul.howto-bullets li {
  margin-bottom: 0.35rem;
}

.howto-content .howto-glossary {
  font-size: 0.8125rem;
  color: #94a3b8;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid #2e2e45;
}

.howto-callout {
  border-radius: 0.5rem;
  padding: 0.65rem 0.75rem;
  margin: 0.65rem 0;
  font-size: 0.8125rem;
  line-height: 1.45;
}

.howto-callout strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.8125rem;
}

.howto-callout--important {
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.35);
  color: #fde68a;
}

.howto-callout--tip {
  background: rgba(139, 92, 246, 0.12);
  border: 1px solid rgba(139, 92, 246, 0.35);
  color: #ddd6fe;
}