/**
 * Teatro Municipal de Chillán - Hero Text Animations
 * 
 * Animaciones de texto para la sección hero
 */

/* ==========================================================================
   BASE ANIMATION SETUP
   ========================================================================== */

/* Animation speeds */
.hero-anim-slow { --anim-duration: 1.5s; --anim-delay-step: 0.4s; }
.hero-anim-normal { --anim-duration: 1s; --anim-delay-step: 0.2s; }
.hero-anim-fast { --anim-duration: 0.5s; --anim-delay-step: 0.1s; }

/* Stagger delays for sequential animations */
.hero-anim-stagger .hero-badge,
.hero-anim-stagger .hero-hashtag { --anim-delay: 0s; }
.hero-anim-stagger .hero-title .line-1 { --anim-delay: calc(var(--anim-delay-step) * 1); }
.hero-anim-stagger .hero-title .line-2 { --anim-delay: calc(var(--anim-delay-step) * 2); }
.hero-anim-stagger .hero-description { --anim-delay: calc(var(--anim-delay-step) * 3); }
.hero-anim-stagger .hero-buttons { --anim-delay: calc(var(--anim-delay-step) * 4); }

/* No stagger - all at once */
.hero-section:not(.hero-anim-stagger) [data-animation] {
    --anim-delay: 0s;
}

/* Initial hidden state for animated elements */
[data-animation]:not([data-animation="none"]) {
    opacity: 0;
}

[data-animation].animated {
    opacity: 1;
}

/* ==========================================================================
   FADE ANIMATIONS
   ========================================================================== */

/* Fade In */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

[data-animation="fade-in"].animated {
    animation: fadeIn var(--anim-duration, 1s) ease-out var(--anim-delay, 0s) forwards;
}

/* Fade Up */
@keyframes fadeUp {
    from { 
        opacity: 0; 
        transform: translateY(30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

[data-animation="fade-up"].animated {
    animation: fadeUp var(--anim-duration, 1s) ease-out var(--anim-delay, 0s) forwards;
}

/* Fade Down */
@keyframes fadeDown {
    from { 
        opacity: 0; 
        transform: translateY(-30px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

[data-animation="fade-down"].animated {
    animation: fadeDown var(--anim-duration, 1s) ease-out var(--anim-delay, 0s) forwards;
}

/* ==========================================================================
   SLIDE ANIMATIONS
   ========================================================================== */

/* Slide from Left */
@keyframes slideLeft {
    from { 
        opacity: 0; 
        transform: translateX(-100px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

[data-animation="slide-left"].animated {
    animation: slideLeft var(--anim-duration, 1s) ease-out var(--anim-delay, 0s) forwards;
}

/* Slide from Right */
@keyframes slideRight {
    from { 
        opacity: 0; 
        transform: translateX(100px); 
    }
    to { 
        opacity: 1; 
        transform: translateX(0); 
    }
}

[data-animation="slide-right"].animated {
    animation: slideRight var(--anim-duration, 1s) ease-out var(--anim-delay, 0s) forwards;
}

/* ==========================================================================
   ZOOM ANIMATIONS
   ========================================================================== */

/* Zoom In */
@keyframes zoomIn {
    from { 
        opacity: 0; 
        transform: scale(0.5); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

[data-animation="zoom-in"].animated {
    animation: zoomIn var(--anim-duration, 1s) ease-out var(--anim-delay, 0s) forwards;
}

/* Scale */
@keyframes scaleIn {
    from { 
        opacity: 0; 
        transform: scale(0.8); 
    }
    to { 
        opacity: 1; 
        transform: scale(1); 
    }
}

[data-animation="scale"].animated {
    animation: scaleIn var(--anim-duration, 1s) ease-out var(--anim-delay, 0s) forwards;
}

/* ==========================================================================
   BLUR ANIMATION
   ========================================================================== */

@keyframes blurIn {
    from { 
        opacity: 0; 
        filter: blur(20px); 
    }
    to { 
        opacity: 1; 
        filter: blur(0); 
    }
}

[data-animation="blur-in"].animated {
    animation: blurIn var(--anim-duration, 1s) ease-out var(--anim-delay, 0s) forwards;
}

/* ==========================================================================
   BOUNCE ANIMATION
   ========================================================================== */

@keyframes bounceIn {
    0% { 
        opacity: 0; 
        transform: scale(0.3); 
    }
    50% { 
        opacity: 1;
        transform: scale(1.05); 
    }
    70% { 
        transform: scale(0.9); 
    }
    100% { 
        opacity: 1;
        transform: scale(1); 
    }
}

[data-animation="bounce"].animated {
    animation: bounceIn var(--anim-duration, 1s) ease-out var(--anim-delay, 0s) forwards;
}

/* ==========================================================================
   TYPEWRITER ANIMATION
   ========================================================================== */

[data-animation="typewriter"] {
    opacity: 1 !important;
}

[data-animation="typewriter"] .typewriter-text {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 3px solid var(--brand-red);
    animation: typing 3.5s steps(40, end), blinkCursor 0.75s step-end infinite;
}

[data-animation="typewriter"].animated .typewriter-text {
    animation: typing var(--anim-duration, 2s) steps(40, end) var(--anim-delay, 0s) forwards, 
               blinkCursor 0.75s step-end infinite;
    width: 100%;
}

@keyframes typing {
    from { width: 0; }
    to { width: 100%; }
}

@keyframes blinkCursor {
    from, to { border-color: transparent; }
    50% { border-color: var(--brand-red); }
}

/* Typewriter - hide cursor after typing */
[data-animation="typewriter"].typed .typewriter-text {
    border-right-color: transparent;
    animation: none;
}

/* ==========================================================================
   GLITCH ANIMATION
   ========================================================================== */

[data-animation="glitch"] {
    position: relative;
    opacity: 1 !important;
}

[data-animation="glitch"] .glitch-text {
    position: relative;
    display: inline-block;
}

[data-animation="glitch"].animated .glitch-text {
    animation: glitch 1s ease-in-out var(--anim-delay, 0s);
}

[data-animation="glitch"] .glitch-text::before,
[data-animation="glitch"] .glitch-text::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}

[data-animation="glitch"].animated .glitch-text::before {
    animation: glitchTop 0.5s ease-in-out var(--anim-delay, 0s) 2;
    color: var(--brand-red);
    clip-path: polygon(0 0, 100% 0, 100% 33%, 0 33%);
}

[data-animation="glitch"].animated .glitch-text::after {
    animation: glitchBottom 0.5s ease-in-out var(--anim-delay, 0s) 2;
    color: #00ffff;
    clip-path: polygon(0 67%, 100% 67%, 100% 100%, 0 100%);
}

@keyframes glitch {
    0% { opacity: 0; transform: translateX(0); }
    10% { opacity: 1; transform: translateX(-5px); }
    20% { transform: translateX(5px); }
    30% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    50% { transform: translateX(0); }
    100% { opacity: 1; transform: translateX(0); }
}

@keyframes glitchTop {
    0%, 100% { opacity: 0; transform: translateX(0); }
    20% { opacity: 0.8; transform: translateX(-10px); }
    40% { opacity: 0.8; transform: translateX(10px); }
    60% { opacity: 0; transform: translateX(0); }
}

@keyframes glitchBottom {
    0%, 100% { opacity: 0; transform: translateX(0); }
    20% { opacity: 0.8; transform: translateX(10px); }
    40% { opacity: 0.8; transform: translateX(-10px); }
    60% { opacity: 0; transform: translateX(0); }
}

/* ==========================================================================
   PULSE ANIMATION
   ========================================================================== */

@keyframes pulse {
    0% { 
        opacity: 0;
        transform: scale(1); 
    }
    25% {
        opacity: 1;
    }
    50% { 
        transform: scale(1.1); 
    }
    100% { 
        opacity: 1;
        transform: scale(1); 
    }
}

[data-animation="pulse"].animated {
    animation: pulse var(--anim-duration, 1s) ease-in-out var(--anim-delay, 0s) forwards;
}

/* Continuous pulse for badge */
.hero-badge[data-animation="pulse"].animated {
    animation: pulse var(--anim-duration, 1s) ease-in-out var(--anim-delay, 0s) forwards,
               pulseContinue 2s ease-in-out 1.5s infinite;
}

@keyframes pulseContinue {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* ==========================================================================
   SHAKE ANIMATION
   ========================================================================== */

@keyframes shake {
    0% { opacity: 0; transform: translateX(0); }
    10% { opacity: 1; transform: translateX(-10px); }
    20% { transform: translateX(10px); }
    30% { transform: translateX(-10px); }
    40% { transform: translateX(10px); }
    50% { transform: translateX(-5px); }
    60% { transform: translateX(5px); }
    70% { transform: translateX(-2px); }
    80% { transform: translateX(2px); }
    90% { transform: translateX(0); }
    100% { opacity: 1; transform: translateX(0); }
}

[data-animation="shake"].animated {
    animation: shake var(--anim-duration, 1s) ease-out var(--anim-delay, 0s) forwards;
}

/* ==========================================================================
   ROTATING WORDS ANIMATION
   ========================================================================== */

[data-animation="rotate-words"] {
    opacity: 1 !important;
}

.rotating-words-container {
    display: inline-block;
    position: relative;
    min-width: 200px;
    text-align: inherit;
}

.rotating-word {
    display: inline-block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.rotating-word.active {
    position: relative;
    opacity: 1;
    transform: translateY(0);
}

.rotating-word.exit {
    opacity: 0;
    transform: translateY(-20px);
}

/* Different rotation styles */
.rotating-words-container.style-fade .rotating-word {
    transform: none;
}

.rotating-words-container.style-fade .rotating-word.exit {
    transform: none;
}

.rotating-words-container.style-slide .rotating-word {
    transform: translateX(30px);
}

.rotating-words-container.style-slide .rotating-word.active {
    transform: translateX(0);
}

.rotating-words-container.style-slide .rotating-word.exit {
    transform: translateX(-30px);
}

.rotating-words-container.style-zoom .rotating-word {
    transform: scale(0.5);
}

.rotating-words-container.style-zoom .rotating-word.active {
    transform: scale(1);
}

.rotating-words-container.style-zoom .rotating-word.exit {
    transform: scale(1.5);
}

/* Underline effect for rotating words */
.rotating-words-container.with-underline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--brand-red);
    transform: scaleX(0);
    transform-origin: left;
    animation: underlineGrow 0.5s ease forwards;
}

@keyframes underlineGrow {
    to { transform: scaleX(1); }
}

/* ==========================================================================
   RESET ANIMATIONS (for slide changes)
   ========================================================================== */

.hero-section.reset-animations [data-animation] {
    opacity: 0;
    animation: none;
}

.hero-section.reset-animations [data-animation="typewriter"] .typewriter-text,
.hero-section.reset-animations [data-animation="glitch"] .glitch-text {
    animation: none;
}

/* ==========================================================================
   RESPONSIVE ADJUSTMENTS
   ========================================================================== */

@media (max-width: 768px) {
    .rotating-words-container {
        min-width: 150px;
    }
    
    [data-animation="typewriter"] .typewriter-text {
        white-space: normal;
        border-right: none;
        animation: fadeIn 1s ease forwards;
    }
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    [data-animation],
    [data-animation]::before,
    [data-animation]::after,
    .rotating-word,
    .typewriter-text {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}