/* ==========================================
   ANIMATIONS CSS - SoloTurnos Landing
   Reveal, float, shine, waveform, typing
   ========================================== */

/* --- REVEAL ANIMATIONS --- */
.reveal, .reveal-scale { 
    opacity: 0; 
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1), transform 1.2s cubic-bezier(0.16, 1, 0.3, 1); 
}

.reveal { 
    transform: translateY(60px); 
}

.reveal-scale { 
    transform: scale(0.95) translateY(40px); 
}

.reveal.active, .reveal-scale.active { 
    opacity: 1; 
    transform: translate(0) scale(1); 
}

/* Delay classes */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }

/* --- FLOAT ANIMATION --- */
@keyframes float { 
    0% { transform: translateY(0px); } 
    50% { transform: translateY(-15px); } 
    100% { transform: translateY(0px); } 
}

.animate-float { 
    animation: float 6s ease-in-out infinite; 
}

/* --- SHINE / PREMIUM BADGE --- */
@keyframes shine { 
    0% { left: -150%; } 
    20% { left: 150%; } 
    100% { left: 150%; } 
}

.premium-shine { 
    position: relative; 
    overflow: hidden; 
}

.premium-shine::after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: -150%; 
    width: 100%; 
    height: 100%; 
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); 
    transform: skewX(-25deg); 
    animation: shine 3s ease-in-out infinite; 
}

/* --- CALLING RING PULSE --- */
@keyframes calling-ring { 
    0% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.6); } 
    70% { box-shadow: 0 0 0 25px rgba(29, 78, 216, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0); } 
}

.ringing-pulse { 
    animation: calling-ring 1.5s infinite ease-in-out; 
}

/* --- AUDIO WAVEFORM --- */
@keyframes waveform { 
    0%, 100% { transform: scaleY(0.3); } 
    50% { transform: scaleY(1); } 
}

.audio-bar { 
    width: 4px; 
    background-color: #25D366; 
    border-radius: 4px; 
    display: inline-block; 
    transform-origin: center; 
    transform: scaleY(0.3); 
}

.playing .audio-bar { 
    animation: waveform 0.8s infinite ease-in-out; 
}

.audio-bar:nth-child(1) { animation-delay: 0.1s; }
.audio-bar:nth-child(2) { animation-delay: 0.3s; }
.audio-bar:nth-child(3) { animation-delay: 0.0s; }
.audio-bar:nth-child(4) { animation-delay: 0.4s; }
.audio-bar:nth-child(5) { animation-delay: 0.2s; }
.audio-bar:nth-child(6) { animation-delay: 0.5s; }
.audio-bar:nth-child(7) { animation-delay: 0.1s; }
.audio-bar:nth-child(8) { animation-delay: 0.3s; }
.audio-bar:nth-child(9) { animation-delay: 0.0s; }
.audio-bar:nth-child(10) { animation-delay: 0.4s; }

/* --- TYPING DOTS --- */
@keyframes typing { 
    0%, 100% { transform: translateY(0); opacity: 0.4; } 
    50% { transform: translateY(-4px); opacity: 1; } 
}

.typing-dot { 
    width: 6px; 
    height: 6px; 
    background-color: #9ca3af; 
    border-radius: 50%; 
    display: inline-block; 
    animation: typing 1.4s infinite ease-in-out both; 
}

.typing-dot:nth-child(1) { animation-delay: -0.32s; }
.typing-dot:nth-child(2) { animation-delay: -0.16s; }

/* --- PULSE MIC (Listening) --- */
@keyframes pulse-mic { 
    0% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4); } 
    70% { box-shadow: 0 0 0 10px rgba(59, 130, 246, 0); } 
    100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); } 
}

.mic-listening { 
    animation: pulse-mic 1.5s infinite; 
}

/* --- SMOOTH ZOOM (Hero Backgrounds) --- */
@keyframes smooth-zoom { 
    0% { transform: scale(1); } 
    100% { transform: scale(1.1); } 
}

/* --- SCROLL PHONE (Auto-scroll inside phone) --- */
@keyframes scroll-phone {
    0%, 15% { transform: translateY(0); }
    45%, 55% { transform: translateY(-180px); }
    85%, 100% { transform: translateY(0); }
}

.animate-scroll-phone { 
    animation: scroll-phone 14s ease-in-out infinite; 
}

/* --- BLINK CURSOR --- */
@keyframes blink { 
    0%, 100% { opacity: 1; } 
    50% { opacity: 0; } 
}

.cursor-blink { 
    animation: blink 1s step-end infinite; 
}

/* --- ANIM ELEMENT BASE (GSAP) --- */
.anim-element { 
    position: absolute; 
    opacity: 0; 
}

/* --- SHADOW UTILITIES --- */
.shadow-google { 
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04); 
}

.shadow-google-hover { 
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.12), 0 4px 12px rgba(0, 0, 0, 0.06); 
}

.shadow-corp { 
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.15); 
}

/* --- BACKGROUND PATTERNS --- */
.bg-dots { 
    background-image: radial-gradient(#cbd5e1 2px, transparent 2px); 
    background-size: 16px 16px; 
}

.bg-striped { 
    background-image: repeating-linear-gradient(-45deg, #f1f5f9, #f1f5f9 10px, #f8fafc 10px, #f8fafc 20px); 
}

.bg-striped-green { 
    background-image: repeating-linear-gradient(-45deg, #ecfdf5, #ecfdf5 10px, #d1fae5 10px, #d1fae5 20px); 
}

.bg-striped-gray { 
    background-image: repeating-linear-gradient(-45deg, #f1f5f9, #f1f5f9 10px, #e2e8f0 10px, #e2e8f0 20px); 
}

/* --- SCROLL SPY STEP TEXT --- */
.step-text { 
    transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); 
}

.step-text.inactive { 
    opacity: 0.3; 
    transform: scale(0.95); 
}

.step-text.active { 
    opacity: 1; 
    transform: scale(1); 
}

/* --- TABLE ROW HOVER --- */
.table-row-hover:hover td { 
    background-color: #f8fafc; 
}

/* --- SLOT MACHINE (CSS-only, reusable) ---
   HTML minimal pattern:
     <div class="slot-mask">
       <div class="slot-col-down" data-slot-text="Menos filas,"></div>
     </div>
   JS (initSlotMachines) generates the 10 items automatically. */

.slot-mask {
  position: relative;
  overflow: hidden;
  height: 1.5em;
  display: flex;
  align-items: flex-start;
  padding: 0 0.5rem;
  border-radius: 0.75rem;
  width: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
  mask-image: linear-gradient(to bottom, transparent, black 15%, black 85%, transparent);
}

.slot-col-down,
.slot-col-up {
  display: flex;
  flex-direction: column;
  will-change: transform;
}

.slot-item {
  height: 1.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding-bottom: 0.25rem;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}

/* Animation only applied via JS after items are generated */
.slot-col-down.is-animating { animation: slot-down 4.5s ease-in-out infinite; }
.slot-col-up.is-animating   { animation: slot-up 4.5s ease-in-out infinite; }

@keyframes slot-down {
  0%    { transform: translateY(-90%); filter: blur(0); }
  6%    { filter: blur(6px); }
  38%   { filter: blur(6px); }
  44%   { transform: translateY(0%); filter: blur(0); }
  44.1% { transform: translateY(-90%); }
  100%  { transform: translateY(-90%); filter: blur(0); }
}

@keyframes slot-up {
  0%    { transform: translateY(0%); filter: blur(0); }
  6%    { filter: blur(6px); }
  38%   { filter: blur(6px); }
  44%   { transform: translateY(-90%); filter: blur(0); }
  44.1% { transform: translateY(0%); }
  100%  { transform: translateY(0%); filter: blur(0); }
}

@media (max-width: 767px) {
  .slot-col-down.is-animating { animation-name: slot-down-m; }
  .slot-col-up.is-animating   { animation-name: slot-up-m; }
}

@keyframes slot-down-m {
  0%    { transform: translateY(-90%); opacity: 1; }
  6%    { opacity: 0.5; }
  38%   { opacity: 0.5; }
  44%   { transform: translateY(0%); opacity: 1; }
  44.1% { transform: translateY(-90%); }
  100%  { transform: translateY(-90%); opacity: 1; }
}

@keyframes slot-up-m {
  0%    { transform: translateY(0%); opacity: 1; }
  6%    { opacity: 0.5; }
  38%   { opacity: 0.5; }
  44%   { transform: translateY(-90%); opacity: 1; }
  44.1% { transform: translateY(0%); }
  100%  { transform: translateY(0%); opacity: 1; }
}

/* --- GPU ACCELERATION for GSAP-animated elements --- */
@media (min-width: 768px) {
  .anim-element,
  #stage,
  [data-embedded-stage],
  .sector-item,
  .ticket-base,
  .tv-frame {
    will-change: transform;
  }
}

/* --- DISABLE expensive backdrop-filter on mobile --- */
@media (max-width: 767px) {
  [class*="backdrop-blur"] {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}