/*
 Theme Name:   Astra Child - FOSECTECH
 Theme URI:    https://fosectech.com
 Description:  Tema hijo de Astra con animaciones Apple-style para FOSECTECH
 Author:       FOSECTECH
 Author URI:   https://fosectech.com
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child-fosectech
*/

/* ── Importar estilos del tema padre ── */
@import url("../astra/style.css");

/* ════════════════════════════════════════════════
   FOSECTECH — Animaciones Premium (Apple-style)
   Estos estilos se agregan ENCIMA del tema Astra
════════════════════════════════════════════════ */

/* ── Variables globales ── */
:root {
  --fos-cyan:       #00d4ff;
  --fos-purple:     #7b2ff7;
  --fos-pink:       #ec4899;
  --fos-dark:       rgba(0,0,0,0.95);
  --fos-border:     rgba(255,255,255,0.10);
  --fos-white60:    rgba(255,255,255,0.60);
  --fos-white30:    rgba(255,255,255,0.30);
  --fos-radius:     18px;
  --fos-ease:       cubic-bezier(.25,.1,.25,1);
  --fos-ease-out:   cubic-bezier(0,.55,.45,1);
}

/* ── CURSOR PERSONALIZADO ── */
body { cursor: none !important; }
@media (max-width: 768px) { body { cursor: auto !important; } }

.fos-cursor {
  position: fixed;
  width: 10px; height: 10px;
  background: var(--fos-cyan);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99999;
  transform: translate(-50%,-50%);
  transition: background 0.3s;
  mix-blend-mode: difference;
}
.fos-cursor-ring {
  position: fixed;
  width: 38px; height: 38px;
  border: 1.5px solid rgba(0,212,255,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 99998;
  transform: translate(-50%,-50%);
  transition: all 0.12s var(--fos-ease);
}
.fos-cursor-hover .fos-cursor       { background: var(--fos-purple); transform: translate(-50%,-50%) scale(2.5); }
.fos-cursor-hover .fos-cursor-ring  { opacity: 0; transform: translate(-50%,-50%) scale(1.5); }

/* ── SMOOTH SCROLL LENIS ── */
html.lenis { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ── NAVBAR — Glassmorphism al hacer scroll ── */
.site-header.fos-scrolled,
#masthead.fos-scrolled {
  background: rgba(0,0,0,0.85) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  box-shadow: 0 1px 0 var(--fos-border) !important;
  transition: all 0.4s var(--fos-ease) !important;
}

/* ── HERO SECTION — Canvas de partículas ── */
#fos-particles-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ── ORB FLOATANTES (efecto glow de fondo) ── */
.fos-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: fosOrbFloat 8s ease-in-out infinite;
  z-index: 1;
}
.fos-orb-1 {
  width: 500px; height: 500px;
  background: rgba(123,47,247,0.18);
  top: -80px; left: -100px;
}
.fos-orb-2 {
  width: 380px; height: 380px;
  background: rgba(0,212,255,0.14);
  top: 40%; right: -80px;
  animation-delay: -3s;
}
.fos-orb-3 {
  width: 280px; height: 280px;
  background: rgba(236,72,153,0.12);
  bottom: -20px; left: 35%;
  animation-delay: -5s;
}
@keyframes fosOrbFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-28px) scale(1.05); }
}

/* ── MARQUEE / TICKER ── */
.fos-marquee-wrap {
  overflow: hidden;
  border-top: 1px solid var(--fos-border);
  border-bottom: 1px solid var(--fos-border);
  background: rgba(255,255,255,0.02);
  padding: 18px 0;
  white-space: nowrap;
}
.fos-marquee-track {
  display: inline-flex;
  gap: 40px;
  animation: fosMarquee 22s linear infinite;
}
.fos-marquee-wrap:hover .fos-marquee-track { animation-play-state: paused; }
.fos-marquee-track span {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--fos-white60);
  letter-spacing: 0.05em;
  font-family: inherit;
}
.fos-marquee-track .fos-sep { color: var(--fos-cyan); }
@keyframes fosMarquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ── WORD REVEAL (Intro estilo Apple) ── */
.fos-word {
  display: inline-block;
  margin-right: 0.35em;
  color: rgba(255,255,255,0.18);
  transition: color 0.4s var(--fos-ease);
}
.fos-word.fos-lit { color: rgba(255,255,255,0.92); }
.fos-word.fos-highlight.fos-lit {
  background: linear-gradient(135deg, var(--fos-cyan), var(--fos-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── SCROLL REVEAL genérico ── */
.fos-reveal {
  opacity: 0;
  transform: translateY(36px);
  transition: opacity 0.8s var(--fos-ease-out), transform 0.8s var(--fos-ease-out);
}
.fos-reveal.fos-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── TARJETAS CON GLOW MAGNÉTICO ── */
.elementor-widget-container:has(.fos-card),
.fos-card {
  position: relative;
  overflow: hidden;
  transition: transform 0.4s var(--fos-ease-out), box-shadow 0.4s var(--fos-ease-out), border-color 0.4s !important;
}
.fos-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow: 0 24px 60px rgba(0,212,255,0.12) !important;
  border-color: rgba(0,212,255,0.35) !important;
}
.fos-card-glow {
  position: absolute;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,212,255,0.22) 0%, transparent 70%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s;
  transform: translate(-50%,-50%);
  z-index: 0;
}
.fos-card:hover .fos-card-glow { opacity: 1; }

/* ── CONTADORES — barra de progreso ── */
.fos-counter-bar {
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 100px;
  overflow: hidden;
  margin-top: 12px;
}
.fos-counter-fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--fos-cyan), var(--fos-purple));
  border-radius: 100px;
  transition: width 1.6s var(--fos-ease-out);
}

/* ── TYPED CURSOR ── */
.typed-cursor {
  color: var(--fos-cyan);
  font-weight: 300;
}

/* ── GRADIENT TEXT ── */
.fos-gradient-text {
  background: linear-gradient(135deg, var(--fos-cyan) 0%, var(--fos-purple) 55%, var(--fos-pink) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── BOTÓN CON GLOW PULSANTE ── */
.fos-glow-btn {
  animation: fosBtnGlow 2s ease-in-out infinite alternate;
}
@keyframes fosBtnGlow {
  from { box-shadow: 0 0 20px rgba(0,212,255,0.2); }
  to   { box-shadow: 0 0 50px rgba(0,212,255,0.6), 0 0 80px rgba(0,212,255,0.2); }
}

/* ── PARALLAX MOUSE en sección Hero ── */
[data-fos-parallax] {
  transition: transform 0.1s linear;
  will-change: transform;
}

/* ── STAGGER REVEAL — elementos Elementor ── */
.fos-stagger > * {
  opacity: 0;
  transform: translateY(30px);
}
.fos-stagger.fos-visible > * {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.7s var(--fos-ease-out), transform 0.7s var(--fos-ease-out);
}
.fos-stagger.fos-visible > *:nth-child(1) { transition-delay: 0ms; }
.fos-stagger.fos-visible > *:nth-child(2) { transition-delay: 100ms; }
.fos-stagger.fos-visible > *:nth-child(3) { transition-delay: 200ms; }
.fos-stagger.fos-visible > *:nth-child(4) { transition-delay: 300ms; }
.fos-stagger.fos-visible > *:nth-child(5) { transition-delay: 400ms; }
.fos-stagger.fos-visible > *:nth-child(6) { transition-delay: 500ms; }

/* ── SCROLL INDICATOR ── */
.fos-scroll-indicator {
  position: absolute;
  bottom: 36px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  z-index: 10;
  animation: fosScrollFade 1s 2s both;
}
@keyframes fosScrollFade {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}
.fos-scroll-indicator span {
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fos-white30);
}
.fos-scroll-mouse {
  width: 22px; height: 36px;
  border: 1px solid var(--fos-white30);
  border-radius: 100px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.fos-scroll-dot {
  width: 4px; height: 8px;
  background: var(--fos-white60);
  border-radius: 100px;
  animation: fosScrollBounce 2s ease-in-out infinite;
}
@keyframes fosScrollBounce {
  0%,100% { transform: translateY(0); opacity: 1; }
  60%      { transform: translateY(10px); opacity: 0; }
}

/* Asegurar que los canvas no bloqueen clicks */
canvas { pointer-events: none; }
#fos-particles-canvas { pointer-events: all; }