/**
 * SDW Scroll Experience Engine — Styles v1.0.0
 *
 * Usa exclusivamente CSS custom properties del Theme Engine (--sdw-*).
 * Se carga solo cuando hay escenas en la página.
 *
 * @package SomosDeWeb
 */

/* ── CSS Variables de progreso (inicializadas en sección) ──────────────────── */

.sdw-scroll-scene {
  --sdw-progress:       0;
  --sdw-frame-progress: 0;
  --sdw-text-progress:  0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BASE — Sección raíz
   ═══════════════════════════════════════════════════════════════════════════ */

.sdw-scroll-scene {
  position: relative;
  width: 100%;
  overflow: hidden;
  isolation: isolate;
  box-sizing: border-box;
}

/* Modos con canvas requieren altura definida para el pin de GSAP */
.sdw-scroll-scene--frames,
.sdw-scroll-scene--hybrid {
  min-height: 100vh;
  min-height: 100dvh;
}

.sdw-scroll-scene--timeline {
  min-height: 60vh;
}

/* ── Fondo ─────────────────────────────────────────────────────────────────── */

.sdw-scroll-bg {
  position: absolute;
  inset: 0;
  z-index: var(--sdw-z-below, -1);
  pointer-events: none;
}

/* ── Canvas ────────────────────────────────────────────────────────────────── */

.sdw-scroll-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--sdw-z-visual, 5);
  pointer-events: none;
  display: block;
  object-fit: cover;
}

/* ── Contenido HTML (sobre canvas) ────────────────────────────────────────── */

.sdw-scroll-content {
  position: relative;
  z-index: var(--sdw-z-content, 20);
  width: 100%;
  max-width: var(--sdw-container, 1280px);
  margin-inline: auto;
  padding: var(--sdw-space-16, 4rem) var(--sdw-container-px, clamp(1rem, 4vw, 2.5rem));
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sdw-space-8, 2rem);
  min-height: 100vh;
  min-height: 100dvh;
  box-sizing: border-box;
}

/* Posición izquierda-centro (default hybrid) */
.sdw-scroll-scene--hybrid .sdw-scroll-content {
  max-width: 56ch;
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEMAS DE FONDO
   ═══════════════════════════════════════════════════════════════════════════ */

/* Azul premium radial (tipo Apple iPad Pro) */
.sdw-scroll-theme--radial-premium-blue .sdw-scroll-bg {
  background:
    radial-gradient(ellipse 80% 60% at 70% 50%, rgba(15, 50, 130, 0.85) 0%, transparent 70%),
    radial-gradient(ellipse 50% 80% at 20% 80%, rgba(8, 20, 60, 0.60) 0%, transparent 65%),
    linear-gradient(160deg, #020610 0%, #05102a 40%, #020810 100%);
}

/* Oscuro neutro */
.sdw-scroll-theme--dark .sdw-scroll-bg {
  background: var(--sdw-bg, #050509);
}

/* Vidrio premium */
.sdw-scroll-theme--glass .sdw-scroll-bg {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(139, 92, 246, 0.10) 0%, transparent 70%),
    var(--sdw-bg, #050509);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA
   ═══════════════════════════════════════════════════════════════════════════ */

.sdw-scroll-eyebrow {
  display: inline-block;
  font-family: var(--sdw-font-sans);
  font-size: var(--sdw-text-xs, 0.75rem);
  font-weight: 600;
  letter-spacing: var(--sdw-tracking-widest, 0.12em);
  text-transform: uppercase;
  color: var(--sdw-accent-blue, #38bdf8);
  padding: var(--sdw-space-1, 0.25rem) var(--sdw-space-3, 0.75rem);
  border: 1px solid rgba(56, 189, 248, 0.30);
  border-radius: var(--sdw-radius-pill, 9999px);
  backdrop-filter: blur(8px);
  background: rgba(56, 189, 248, 0.06);
  width: fit-content;
  user-select: text;
}

.sdw-scroll-title {
  font-family: var(--sdw-font-display);
  font-size: var(--sdw-text-hero, clamp(3.5rem, 9vw, 6.5rem));
  font-weight: 700;
  letter-spacing: var(--sdw-tracking-tight, -0.04em);
  line-height: var(--sdw-leading-tight, 1.2);
  color: var(--sdw-fg, #f5f5fa);
  margin: 0;
  user-select: text;
}

/* Gradiente Apple integrado — activado por data-gradient o clase .sdw-gradient-text */
.sdw-scroll-title.sdw-gradient-text,
.sdw-scroll-title[data-gradient] {
  background-image: linear-gradient(
    90deg,
    #ff7a1a 0%,
    #ffd36a 30%,
    #b8f0df 65%,
    #2f8cff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.sdw-scroll-subtitle {
  font-family: var(--sdw-font-sans);
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  line-height: var(--sdw-leading-relaxed, 1.75);
  color: var(--sdw-muted, rgba(245, 245, 250, 0.64));
  max-width: 46ch;
  margin: 0;
  user-select: text;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.sdw-scroll-cards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sdw-space-4, 1rem);
}

.sdw-scroll-card {
  position: relative;
  padding: var(--sdw-space-6, 1.5rem);
  border-radius: var(--sdw-radius-xl, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--sdw-space-2, 0.5rem);
  flex: 1 1 220px;
  max-width: 320px;
  user-select: text;
}

/* Glass dark card */
.sdw-scroll-card--glass {
  background:
    linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.065) 0%,
      rgba(255, 255, 255, 0.025) 100%
    );
  border: 1px solid rgba(255, 255, 255, 0.09);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow:
    0 20px 50px rgba(0, 0, 0, 0.40),
    inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Dark solid card */
.sdw-scroll-card--dark {
  background: rgba(8, 8, 18, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.50);
}

.sdw-scroll-card__icon {
  font-size: var(--sdw-text-xl, 1.25rem);
  line-height: 1;
  margin-bottom: var(--sdw-space-1, 0.25rem);
}

.sdw-scroll-card__title {
  display: block;
  font-family: var(--sdw-font-display);
  font-size: var(--sdw-text-base, 1rem);
  font-weight: 600;
  color: var(--sdw-fg, #f5f5fa);
  letter-spacing: var(--sdw-tracking-snug, -0.02em);
}

.sdw-scroll-card__text {
  font-size: var(--sdw-text-sm, 0.875rem);
  line-height: var(--sdw-leading-relaxed, 1.75);
  color: var(--sdw-muted, rgba(245, 245, 250, 0.64));
  margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   POSTER / FALLBACK
   ═══════════════════════════════════════════════════════════════════════════ */

.sdw-scroll-poster {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: var(--sdw-z-visual, 5);
}

.sdw-scroll-scene--fallback .sdw-scroll-canvas {
  display: none;
}

.sdw-scroll-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sdw-space-12, 3rem);
  color: var(--sdw-muted, rgba(245, 245, 250, 0.64));
  font-size: var(--sdw-text-sm, 0.875rem);
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ESTADO READY — elimina flash inicial
   ═══════════════════════════════════════════════════════════════════════════ */

.sdw-scroll-scene--ready {
  visibility: visible;
}

/* ═══════════════════════════════════════════════════════════════════════════
   ACCESIBILIDAD — prefers-reduced-motion
   ═══════════════════════════════════════════════════════════════════════════ */

.sdw-scroll-scene--reduced-motion .sdw-scroll-canvas {
  opacity: 0.35;
}

/* Mostrar contenido siempre visible en reduced motion */
.sdw-scroll-scene--reduced-motion .sdw-scroll-eyebrow,
.sdw-scroll-scene--reduced-motion .sdw-scroll-title,
.sdw-scroll-scene--reduced-motion .sdw-scroll-subtitle,
.sdw-scroll-scene--reduced-motion .sdw-scroll-card {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .sdw-scroll-scene .sdw-scroll-canvas {
    opacity: 0.35;
  }

  .sdw-scroll-eyebrow,
  .sdw-scroll-title,
  .sdw-scroll-subtitle,
  .sdw-scroll-card {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .sdw-scroll-scene--hybrid .sdw-scroll-content {
    max-width: 100%;
    padding-block: var(--sdw-space-12, 3rem);
  }

  .sdw-scroll-title {
    font-size: clamp(2.5rem, 10vw, 4rem);
  }

  .sdw-scroll-cards {
    flex-direction: column;
  }

  .sdw-scroll-card {
    max-width: 100%;
  }

  .sdw-scroll-subtitle {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .sdw-scroll-title {
    font-size: clamp(2rem, 12vw, 3rem);
  }

  .sdw-scroll-eyebrow {
    font-size: var(--sdw-text-xs, 0.75rem);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   GSAP PIN HELPER
   Cuando GSAP hace pin, añade un wrapper. Estos estilos aseguran
   que el canvas ocupe todo el viewport durante el pin.
   ═══════════════════════════════════════════════════════════════════════════ */

.sdw-scroll-scene.pin-spacer-owner {
  overflow: visible;
}

/* ── Utilidades opcionales expuestas vía CSS vars de progreso ─────────────── */

/*
   Ejemplo de uso en CSS del theme o plantillas:
   .mi-elemento {
     opacity: calc(var(--sdw-progress) * 1);
     transform: translateY(calc((1 - var(--sdw-progress)) * 40px));
   }
*/