/* ================================================================
   TODO EN VIDRIO — PREMIUM ANIMATION SYSTEM
   Sistema de efectos de carga y entrada premium.
   NO modifica diseno, estructura, colores ni contenido existente.
   ================================================================ */

/* 1. EASING PREMIUM */
:root {
  --ease-expo:   cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease-smooth: cubic-bezier(.25, .46, .45, .94);
  --cyan-glow:   rgba(8, 207, 227, .18);
  --cyan-glow-strong: rgba(8, 207, 227, .32);
}

/* ================================================================
   2. PRELOADER
   ================================================================ */
body.preloader-active {
  overflow: hidden;
}

#tve-preloader {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #060a0c;
  background-image:
    linear-gradient(rgba(8,207,227,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,207,227,.04) 1px, transparent 1px);
  background-size: 80px 80px;
  pointer-events: all;
  transition: opacity .55s cubic-bezier(.25,.46,.45,.94), visibility .55s;
}

#tve-preloader.is-hiding {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.preloader-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  opacity: 0;
  transform: translateY(8px) scale(.97);
  animation: preloaderReveal .55s cubic-bezier(.16,1,.3,1) .1s forwards;
}

@keyframes preloaderReveal {
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.preloader-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.preloader-logo-img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  filter: brightness(1.1);
}

.preloader-brand {
  text-align: center;
}

.preloader-brand-name {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .22em;
  color: #ffffff;
  line-height: 1;
}

.preloader-brand-tagline {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .28em;
  color: rgba(255,255,255,.45);
  margin-top: 7px;
  text-transform: uppercase;
}

.preloader-progress-wrap {
  width: 180px;
  height: 1px;
  background: rgba(255,255,255,.1);
  position: relative;
  overflow: hidden;
}

.preloader-progress-line {
  position: absolute;
  inset: 0;
  background: #08cfe3;
  transform-origin: left center;
  transform: scaleX(0);
  animation: preloaderProgress .85s cubic-bezier(.16,1,.3,1) .22s forwards;
  box-shadow: 0 0 12px rgba(8,207,227,.6);
}

@keyframes preloaderProgress {
  0%   { transform: scaleX(0); }
  60%  { transform: scaleX(.85); }
  100% { transform: scaleX(1); }
}

.preloader-corner {
  position: absolute;
  width: 22px;
  height: 22px;
  opacity: .28;
}
.preloader-corner--tl { top: 28px; left: 28px; border-top: 1px solid #08cfe3; border-left: 1px solid #08cfe3; }
.preloader-corner--tr { top: 28px; right: 28px; border-top: 1px solid #08cfe3; border-right: 1px solid #08cfe3; }
.preloader-corner--bl { bottom: 28px; left: 28px; border-bottom: 1px solid #08cfe3; border-left: 1px solid #08cfe3; }
.preloader-corner--br { bottom: 28px; right: 28px; border-bottom: 1px solid #08cfe3; border-right: 1px solid #08cfe3; }

/* ================================================================
   3. HEADER — ENTRADA SUAVE
   ================================================================ */
#site-header.header-entrance {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(2px);
  transition:
    opacity .7s cubic-bezier(.16,1,.3,1),
    transform .7s cubic-bezier(.16,1,.3,1),
    filter .6s cubic-bezier(.25,.46,.45,.94);
}

#site-header.header-entrance.header-entered {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* ================================================================
   4. HERO — ENTRADAS CINEMATOGRAFICAS
   ================================================================ */
.hero-badge,
.hero-title,
.hero-subtitle,
.hero-buttons,
.scroll-indicator {
  opacity: 0;
}

body.hero-revealed .hero-badge {
  animation: heroItemIn .7s cubic-bezier(.16,1,.3,1) 100ms both;
}

body.hero-revealed .hero-title {
  animation: heroTitleIn .9s cubic-bezier(.16,1,.3,1) 220ms both;
}

body.hero-revealed .hero-subtitle {
  animation: heroItemIn .75s cubic-bezier(.16,1,.3,1) 350ms both;
}

body.hero-revealed .hero-buttons {
  animation: heroItemIn .7s cubic-bezier(.16,1,.3,1) 480ms both;
}

body.hero-revealed .scroll-indicator {
  animation: heroItemIn .6s cubic-bezier(.16,1,.3,1) 700ms both;
}

@keyframes heroItemIn {
  from { opacity: 0; transform: translateY(22px); filter: blur(4px); }
  to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes heroTitleIn {
  from { opacity: 0; transform: translateY(32px) scale(.985); filter: blur(6px); }
  to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* ================================================================
   5. SISTEMA DE REVEALS AL SCROLL
   ================================================================ */
.tve-reveal {
  opacity: 0;
  transform: translateY(45px);
  filter: blur(4px);
  transition:
    opacity .85s cubic-bezier(.16,1,.3,1),
    transform .85s cubic-bezier(.16,1,.3,1),
    filter .7s cubic-bezier(.25,.46,.45,.94);
  will-change: transform, opacity;
}

.tve-reveal[data-delay="80"]  { transition-delay: 80ms; }
.tve-reveal[data-delay="160"] { transition-delay: 160ms; }
.tve-reveal[data-delay="240"] { transition-delay: 240ms; }
.tve-reveal[data-delay="320"] { transition-delay: 320ms; }
.tve-reveal[data-delay="400"] { transition-delay: 400ms; }

.tve-reveal.tve-revealed {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  will-change: auto;
}

.tve-reveal-scale {
  opacity: 0;
  transform: translateY(30px) scale(.97);
  filter: blur(3px);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform .9s cubic-bezier(.16,1,.3,1),
    filter .75s cubic-bezier(.25,.46,.45,.94);
  will-change: transform, opacity;
}

.tve-reveal-scale.tve-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  will-change: auto;
}

/* ================================================================
   6. MICROINTERACCIONES PREMIUM
   ================================================================ */

/* Botones — glow cyan sutil */
.sl-specular-button {
  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    border-color .35s,
    box-shadow .35s,
    background .35s !important;
}

.sl-specular-button:hover {
  box-shadow:
    0 14px 34px rgba(0,0,0,.22),
    0 0 0 1px rgba(8,207,227,.3),
    0 4px 20px rgba(8,207,227,.18) !important;
}

.hero-buttons .sl-specular-button:first-child:hover {
  box-shadow:
    0 10px 30px rgba(8,207,227,.3),
    0 4px 14px rgba(8,207,227,.2) !important;
}

/* Tarjetas de servicios */
.stack-card-inner {
  transition:
    transform .45s cubic-bezier(.16,1,.3,1),
    box-shadow .45s cubic-bezier(.16,1,.3,1),
    border-color .35s !important;
}

.stack-card:hover .stack-card-inner {
  transform: translateY(-5px) !important;
  border-color: rgba(8,207,227,.28) !important;
  box-shadow:
    0 24px 64px rgba(7,12,16,.12),
    0 0 0 1px rgba(8,207,227,.15) !important;
}

/* Tarjetas sociales */
.social-premium-card {
  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    border-color .35s,
    box-shadow .35s !important;
}

.social-premium-card:hover {
  transform: translateY(-5px) !important;
  box-shadow:
    0 20px 50px rgba(7,12,16,.18),
    0 0 0 1px rgba(8,207,227,.2) !important;
}

/* Iconos sociales */
.social-header-link,
.footer-social-icon {
  transition:
    color .3s,
    border-color .3s,
    transform .3s cubic-bezier(.34,1.56,.64,1),
    box-shadow .3s !important;
}

.social-header-link:hover,
.footer-social-icon:hover {
  transform: translateY(-2px) scale(1.05) !important;
}

/* Tarjetas de contacto */
.contact-card-link {
  transition:
    border-color .3s,
    transform .35s cubic-bezier(.16,1,.3,1),
    box-shadow .3s !important;
}

.contact-card-link:hover {
  transform: translateX(5px) !important;
  box-shadow: 0 4px 20px rgba(8,207,227,.18) !important;
}

/* Filtros galeria */
.filter-btn {
  transition:
    color .25s,
    background .25s,
    transform .25s cubic-bezier(.34,1.56,.64,1) !important;
}

.filter-btn:hover:not(.active) {
  transform: translateY(-1px) !important;
}

/* Botones carousel */
.carousel-nav-btn {
  transition:
    border-color .3s,
    color .3s,
    transform .3s cubic-bezier(.34,1.56,.64,1),
    box-shadow .3s !important;
}

.carousel-nav-btn:hover {
  transform: translateY(-50%) scale(1.08) !important;
  box-shadow: 0 6px 24px rgba(8,207,227,.18) !important;
}

/* WhatsApp flotante */
.floating-whatsapp-btn {
  transition:
    transform .35s cubic-bezier(.34,1.56,.64,1),
    box-shadow .35s !important;
}

.floating-whatsapp-btn:hover {
  transform: translateY(-3px) scale(1.06) !important;
}

/* Pilares */
.pillar-card {
  transition:
    transform .4s cubic-bezier(.16,1,.3,1),
    background .3s !important;
}

.pillar-card:hover {
  transform: translateY(-3px) !important;
  background: rgba(255,255,255,.03) !important;
}

/* Proceso - nodos */
.process-node {
  transition:
    border-color .4s cubic-bezier(.16,1,.3,1),
    box-shadow .4s cubic-bezier(.16,1,.3,1),
    transform .4s cubic-bezier(.34,1.56,.64,1) !important;
}

.process-card.is-active .process-node {
  transform: scale(1.08) !important;
}

/* ================================================================
   7. ACCESIBILIDAD — prefers-reduced-motion
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  #tve-preloader { display: none !important; }

  body.preloader-active { overflow: auto !important; }

  .hero-badge,
  .hero-title,
  .hero-subtitle,
  .hero-buttons,
  .scroll-indicator {
    opacity: 1 !important;
    animation: none !important;
  }

  #site-header.header-entrance {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .tve-reveal,
  .tve-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }

  .stack-card-inner,
  .social-premium-card,
  .contact-card-link,
  .sl-specular-button,
  .social-header-link,
  .footer-social-icon,
  .floating-whatsapp-btn,
  .pillar-card,
  .process-node {
    transition: none !important;
  }
}


/* v3 — SpecularButton: clip all effect pixels inside the actual button. */
.sl-specular-button{overflow:hidden !important;isolation:isolate !important;}
.sl-specular-button > .sl-specular-button__effect{inset:0 !important;overflow:hidden !important;border-radius:inherit !important;pointer-events:none !important;}
.sl-specular-button > .sl-specular-button__effect canvas{top:-20px !important;left:-20px !important;}