/* public/global.css */

@import url('https://fonts.googleapis.com/css2?family=MedievalSharp&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css');

:root {
  /* === Neotale Theme (derivado del logo, similar pero no idéntico) === */
  --primary-color: #43d1e8;
  /* cian (accent principal) */
  --secondary-color: #1467ae;
  /* azul (accent secundario) */

  /* Fondo: ya NO negro puro */
  --background-dark: #061827;
  /* azul muy oscuro */
  --background-deep: #031330;
  /* variante para gradientes */
  --background-veil: rgba(6, 24, 39, 0.65);

  /* Cards / sombras */
  --card-bg: rgba(255, 255, 255, 0.06);
  --shadow-color: rgba(0, 0, 0, 0.55);

  /* Texto */
  --text-color: rgb(255, 255, 255);
  --muted-text: rgba(255, 255, 255, 0.866);

  /* Detalles (oro suave + bordes) */
  --gold-accent: #e8d57b;
  --border-gold: rgba(232, 213, 123, 0.18);
  --border-cyan: rgba(67, 209, 232, 0.20);

  /* Glow controlado */
  --glow-cyan: rgba(67, 210, 232, 0.342);
  --glow-blue: rgba(20, 103, 174, 0.18);

  /* === Tokens UI reutilizables === */
  --ui-overlay: rgba(6, 24, 39, 0.58);
  /* overlays (header/sidebar) */
  --ui-overlay-strong: rgba(6, 24, 39, 0.72);
  --ui-divider: rgba(255, 255, 255, 0.10);

  /* Header/Nav */
  --header-bg: var(--ui-overlay);
  --header-backdrop: 12px;
  --header-text: rgba(255, 255, 255, 0.92);
  --header-text-muted: rgba(255, 255, 255, 0.72);
  --header-hover: var(--gold-accent);
  --header-underline: var(--primary-color);

  /* Burger / mobile menu */
  --burger-bg: rgba(0, 0, 0, 0.18);
  --burger-border: rgba(67, 209, 232, 0.35);
  --mobile-border: rgba(67, 209, 232, 0.45);

  /* Transiciones */
  --transition-fast: 0.25s ease;
  --transition: 0.3s ease;

  /* === Alias (para páginas antiguas) === */
  --accent-primary: var(--primary-color);
  --accent-secondary: var(--secondary-color);
  --text-primary: var(--text-color);
  --text-secondary: var(--muted-text);
  --text-on-accent: rgba(255, 255, 255, 0.96);

  --global-content-bg: var(--background-veil);
  --section-bg-elements: rgba(6, 24, 39, 0.58);

  --border-color: var(--border-cyan);
  --shadow-color-light: var(--glow-cyan);
  --shadow-color-dark: rgba(0, 0, 0, 0.662);

  /* Tipografías (para secciones que usan headings/body distintos) */
  --font-heading: 'MedievalSharp', cursive;
  --font-body: 'MedievalSharp', cursive;
}

/* Reset y base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  min-height: 100%;

  background:
    radial-gradient(1200px 900px at 18% 12%, rgba(67, 209, 232, 0.12), transparent 55%),
    radial-gradient(900px 700px at 82% 22%, rgba(20, 103, 174, 0.14), transparent 60%),
    linear-gradient(180deg, var(--background-deep), var(--background-dark));
  color: var(--text-color);

  font-family: 'MedievalSharp', cursive;
  line-height: 1.6;
  overflow-x: hidden;
  position: relative;
  scroll-behavior: smooth;
}

body.no-footer footer {
  display: none;
}

/* Canvas de fondo */
#background-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  min-height: 100vh;
  z-index: 0;
  pointer-events: none;

  opacity: 0.65;
  filter: drop-shadow(0 0 12px var(--glow-cyan));
}

/* margen sección IP */
#ip {
  padding-top: 80px;
  margin-top: -80px;
}

/* Wrapper para todo el contenido */
#site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}

/* General UI */
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
  color: var(--gold-accent);
  text-shadow: 0 0 10px var(--glow-cyan);
}

button {
  background: linear-gradient(135deg, rgba(67, 209, 232, 0.95), rgba(20, 103, 174, 0.95));
  border: 1px solid rgba(67, 209, 232, 0.35);
  padding: 0.8rem 1.5rem;
  border-radius: 20px;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  font-family: inherit;
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.95);
}

button:hover {
  transform: translateY(-2px);
  border-color: rgba(232, 213, 123, 0.35);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.55),
    0 0 18px var(--glow-cyan);
}

h1,
h2,
h3 {
  color: var(--primary-color);
  text-shadow: 0 0 14px var(--glow-blue);
  margin: 1rem 0;
}

/* Skeleton y reveal */
.skeleton {
  animation: shimmer 1.5s infinite;
  background: linear-gradient(90deg,
      rgba(255, 255, 255, 0.06) 25%,
      rgba(255, 255, 255, 0.10) 50%,
      rgba(255, 255, 255, 0.06) 75%);
  background-size: 200% 100%;
  border-radius: 8px;
  height: 150px;
  width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

.product-card img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  opacity: 0;
  animation: revealImage 1s ease-in-out forwards;
}

@keyframes revealImage {
  from {
    opacity: 0;
    transform: scale(1.1);
  }

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

@keyframes heartbeat_little {

  0%,
  100% {
    transform: scale(1);
  }

  14% {
    transform: scale(1.08);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.08);
  }

  70% {
    transform: scale(1);
  }
}

a[href="#about"].destiny-primary-button:hover {
  color: #fceaa2 !important;
}

a[href="#about"].destiny-primary-button:hover svg {
  fill: #fceaa2 !important;
}

.animate__heartbeat_little {
  animation-name: heartbeat_little !important;
}

/* Responsive */
@media (max-width: 768px) {
  .product-card img {
    height: 120px;
  }

  button {
    padding: 0.6rem 1rem;
    font-size: 0.9rem;
  }
}

.page-content {
  flex: 1;
}

/* ============================================================
   PERFORMANCE OPTIMIZATIONS
   ============================================================ */

/* Optimización de secciones fuera del viewport */
.neotale-section,
.neotale-features-section,
.neotale-faq-section {
  content-visibility: auto;
  contain-intrinsic-size: 0 500px;
}

/* GPU acceleration para elementos animados */
.animate__animated {
  will-change: transform, opacity;
}

/* Limpiar will-change después de la animación */
.animate__animated.animate__animated--done {
  will-change: auto;
}

/* ============================================================
   ACCESSIBILITY - Reduced Motion
   ============================================================ */
@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;
  }

  .animate__animated {
    animation: none !important;
  }

  #background-canvas {
    display: none;
  }
}

/* ============================================================
   FOCUS STYLES FOR ACCESSIBILITY
   ============================================================ */
:focus-visible {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible {
  outline: 2px solid var(--gold-accent);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(232, 213, 123, 0.25);
}

/* Skip link for screen readers */
.skip-link {
  position: absolute;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary-color);
  color: var(--background-dark);
  padding: 0.75rem 1.5rem;
  border-radius: 0 0 8px 8px;
  font-weight: 700;
  z-index: 10000;
  transition: top 0.2s ease;
}

.skip-link:focus {
  top: 0;
}

/* ============================================================
   PRINT STYLES
   ============================================================ */
@media print {

  #background-canvas,
  .neotale-hero-buttons,
  footer,
  header {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  a {
    color: #1467ae !important;
    text-decoration: underline !important;
  }
}