/**
 * ============================================
 * RESPALDO POLÍTICO - THE DOSSIER
 * Animations & Micro-interactions
 * ============================================
 * Cinematográficas, sofisticadas, con peso
 * ============================================
 */

/* ============================================
   KEYFRAME ANIMATIONS
   ============================================ */

/* Grain texture animation */
@keyframes grain {
    0%, 100% { transform: translate(0, 0); }
    10% { transform: translate(-5%, -10%); }
    20% { transform: translate(-15%, 5%); }
    30% { transform: translate(7%, -25%); }
    40% { transform: translate(-5%, 25%); }
    50% { transform: translate(-15%, 10%); }
    60% { transform: translate(15%, 0%); }
    70% { transform: translate(0%, 15%); }
    80% { transform: translate(3%, 35%); }
    90% { transform: translate(-10%, 10%); }
}

/* Fade in up */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in down */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Fade in left */
@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Fade in right */
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(60px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

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

/* Blur in */
@keyframes blurIn {
    from {
        opacity: 0;
        filter: blur(10px);
    }
    to {
        opacity: 1;
        filter: blur(0);
    }
}

/* Clip reveal */
@keyframes clipReveal {
    from {
        clip-path: inset(0 100% 0 0);
    }
    to {
        clip-path: inset(0 0 0 0);
    }
}

/* Line grow */
@keyframes lineGrow {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}

/* Float subtle */
@keyframes floatSubtle {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(0.5deg);
    }
}

/* Pulse glow */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(84, 11, 14, 0.4);
    }
    50% {
        box-shadow: 0 0 20px 10px rgba(84, 11, 14, 0);
    }
}

/* Typewriter cursor */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Stamp drop */
@keyframes stampDrop {
    0% {
        opacity: 0;
        transform: rotate(-20deg) scale(2);
    }
    60% {
        opacity: 1;
        transform: rotate(-5deg) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: rotate(-5deg) scale(1);
    }
}

/* Paper rustle */
@keyframes paperRustle {
    0%, 100% {
        transform: rotate(-1deg);
    }
    25% {
        transform: rotate(-0.5deg);
    }
    50% {
        transform: rotate(-1.5deg);
    }
    75% {
        transform: rotate(-0.8deg);
    }
}

/* ============================================
   REVEAL ANIMATIONS
   ============================================ */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: 
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal--left {
    opacity: 0;
    transform: translateX(-50px);
    transition: 
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--left.reveal--visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal--right {
    opacity: 0;
    transform: translateX(50px);
    transition: 
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--right.reveal--visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal--scale {
    opacity: 0;
    transform: scale(0.92);
    transition: 
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--scale.reveal--visible {
    opacity: 1;
    transform: scale(1);
}

.reveal--blur {
    opacity: 0;
    filter: blur(10px);
    transition: 
        opacity 1s cubic-bezier(0.16, 1, 0.3, 1),
        filter 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--blur.reveal--visible {
    opacity: 1;
    filter: blur(0);
}

/* ============================================
   STAGGERED ANIMATIONS
   ============================================ */
[data-stagger-item] {
    opacity: 0;
    transform: translateY(30px);
    transition: 
        opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-stagger-item].reveal--visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal--visible [data-stagger-item]:nth-child(1) { transition-delay: 0s; }
.reveal--visible [data-stagger-item]:nth-child(2) { transition-delay: 0.08s; }
.reveal--visible [data-stagger-item]:nth-child(3) { transition-delay: 0.16s; }
.reveal--visible [data-stagger-item]:nth-child(4) { transition-delay: 0.24s; }
.reveal--visible [data-stagger-item]:nth-child(5) { transition-delay: 0.32s; }
.reveal--visible [data-stagger-item]:nth-child(6) { transition-delay: 0.40s; }
.reveal--visible [data-stagger-item]:nth-child(7) { transition-delay: 0.48s; }
.reveal--visible [data-stagger-item]:nth-child(8) { transition-delay: 0.56s; }

/* ============================================
   LINK HOVERS
   ============================================ */
.masthead__link {
    position: relative;
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.masthead__link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--burgundy-power);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.masthead__link:hover::after {
    width: 100%;
}

.footer__links a {
    position: relative;
    transition: 
        color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer__links a::before {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--burgundy-power);
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer__links a:hover::before {
    width: 100%;
}

/* ============================================
   BUTTON ANIMATIONS
   ============================================ */
.btn {
    position: relative;
    overflow: hidden;
    transition: 
        background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:hover::before {
    width: 300px;
    height: 300px;
}

.btn:hover {
    transform: translateY(-3px);
}

.btn:active {
    transform: translateY(-1px);
}

/* ============================================
   CARD HOVER EFFECTS
   ============================================ */
.module-card {
    transition: 
        transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.module-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: var(--burgundy-power);
    transition: height 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.module-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 30px 60px rgba(13, 13, 13, 0.15),
        0 10px 20px rgba(13, 13, 13, 0.1);
}

.module-card:hover::before {
    height: 100%;
}

.module-card__number {
    transition: 
        color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.module-card:hover .module-card__number {
    color: var(--burgundy-power);
    transform: translateX(5px);
}

/* ============================================
   IMAGE FRAME EFFECTS
   ============================================ */
.hero__image-frame {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.hero__image-frame:hover {
    transform: rotate(0deg) scale(1.02);
}

.article__image-wrapper {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.article__image-wrapper::before {
    transition: 
        transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.article__image-wrapper:hover {
    transform: translateY(-5px);
}

.article__image-wrapper:hover::before {
    transform: translate(15px, 15px);
    opacity: 0.7;
}

/* ============================================
   FORM INPUT EFFECTS
   ============================================ */
.form-input,
.form-select,
.form-textarea {
    transition: 
        border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--burgundy-power);
    box-shadow: 
        0 0 0 4px rgba(84, 11, 14, 0.08),
        0 4px 12px rgba(13, 13, 13, 0.05);
    background: var(--paper-torn);
}

.form-group {
    position: relative;
}

.form-label {
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-group:focus-within .form-label {
    color: var(--burgundy-power);
}

/* ============================================
   VIDEO PLACEHOLDER
   ============================================ */
.video-placeholder__play {
    transition: 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.video-placeholder:hover .video-placeholder__play {
    transform: scale(1.15);
    border-color: var(--cream-classic);
    color: var(--cream-classic);
}

.video-placeholder:hover span {
    color: var(--cream-classic);
}

/* ============================================
   STAT COUNTER ANIMATION
   ============================================ */
.stat-item__number {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.stat-item:hover .stat-item__number {
    transform: scale(1.1);
}

/* ============================================
   STAMP EFFECT
   ============================================ */
.stamp {
    animation: stampDrop 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.8s;
    opacity: 0;
}

/* ============================================
   DECORATIVE NUMBER FLOAT
   ============================================ */
.hero__deco-number {
    animation: floatSubtle 8s ease-in-out infinite;
}

/* ============================================
   COUNTRIES LIST
   ============================================ */
.countries-list li {
    transition: 
        color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        padding-left 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.countries-list li:hover {
    color: var(--burgundy-power);
    padding-left: var(--space-sm);
    border-color: var(--burgundy-power);
}

/* ============================================
   BLOCKQUOTE EFFECTS
   ============================================ */
.blockquote {
    position: relative;
}

.blockquote__text {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.blockquote:hover .blockquote__text {
    transform: translateX(10px);
}

/* ============================================
   CLASSIFIED SECTION ANIMATIONS
   ============================================ */

/* Dossier Fragment */
.dossier-fragment__paper {
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.dossier-fragment:hover .dossier-fragment__paper {
    transform: rotate(0deg);
}

.dossier-list__item {
    transition: 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.dossier-list__item:hover {
    transform: translateX(8px);
    background: rgba(255, 255, 255, 0.9);
    border-color: var(--burgundy-power);
}

.dossier-stamp {
    animation: stamp-appear 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.8s;
    opacity: 0;
    transform: rotate(8deg) scale(1.5);
}

@keyframes stamp-appear {
    0% {
        opacity: 0;
        transform: rotate(20deg) scale(2);
    }
    60% {
        opacity: 1;
        transform: rotate(5deg) scale(0.95);
    }
    100% {
        opacity: 0.9;
        transform: rotate(8deg) scale(1);
    }
}

/* Booking Card */
.booking-card__main {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-card:hover .booking-card__main {
    transform: translateY(-5px);
}

.booking-card__layer--1 {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-card:hover .booking-card__layer--1 {
    transform: rotate(3deg);
}

.booking-card__layer--2 {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-card:hover .booking-card__layer--2 {
    transform: rotate(-2deg);
}

/* Booking CTA */
.booking-cta {
    transition: 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.booking-cta:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 60px rgba(84, 11, 14, 0.5);
}

.booking-cta:active {
    transform: translateY(-2px);
}

/* Clipping */
.classified-clipping__paper {
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.classified-clipping:hover .classified-clipping__paper {
    transform: rotate(0deg);
}

/* Paper clip wiggle */
.paper-clip {
    animation: clip-wiggle 3s ease-in-out infinite;
}

@keyframes clip-wiggle {
    0%, 100% { transform: rotate(15deg); }
    50% { transform: rotate(18deg); }
}

/* Background words float */
.classified-bg__word--1 {
    animation: float-word-1 20s ease-in-out infinite;
}

.classified-bg__word--2 {
    animation: float-word-2 25s ease-in-out infinite;
}

@keyframes float-word-1 {
    0%, 100% { transform: rotate(-5deg) translateY(0); }
    50% { transform: rotate(-5deg) translateY(-20px); }
}

@keyframes float-word-2 {
    0%, 100% { transform: rotate(3deg) translateX(0); }
    50% { transform: rotate(3deg) translateX(20px); }
}

/* Blur spots pulse */
.classified-bg__blur--1 {
    animation: blur-pulse-1 8s ease-in-out infinite;
}

.classified-bg__blur--2 {
    animation: blur-pulse-2 10s ease-in-out infinite;
}

@keyframes blur-pulse-1 {
    0%, 100% { opacity: 0.15; transform: scale(1); }
    50% { opacity: 0.2; transform: scale(1.1); }
}

@keyframes blur-pulse-2 {
    0%, 100% { opacity: 0.12; transform: scale(1); }
    50% { opacity: 0.18; transform: scale(1.15); }
}

/* ============================================
   CONSENT SIGNATURE ANIMATIONS
   ============================================ */
.consent-section {
    animation: fadeInUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.3s;
    opacity: 0;
}

@keyframes consent-unlock {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.1);
    }
    60% {
        transform: scale(0.95);
    }
    100% {
        transform: scale(1);
    }
}

.booking-cta--enabled {
    animation: consent-unlock 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.consent-signature__pad {
    transition: 
        border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-style 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        background 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.consent-signature__pad.is-signed {
    box-shadow: 
        inset 0 0 20px rgba(84, 11, 14, 0.05),
        0 0 0 2px rgba(84, 11, 14, 0.1);
}

.consent-document {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.consent-document:hover {
    transform: translateY(-2px);
}

/* Lock icon animation */
.booking-cta__lock svg {
    animation: lock-wiggle 2s ease-in-out infinite;
}

@keyframes lock-wiggle {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-5deg); }
    75% { transform: rotate(5deg); }
}

/* ============================================
   MASTHEAD SCROLL EFFECT
   ============================================ */
.masthead {
    transition: 
        background 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        backdrop-filter 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.masthead--scrolled {
    background: rgba(240, 235, 216, 0.92);
    box-shadow: 0 4px 30px rgba(13, 13, 13, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* ============================================
   KICKER ANIMATION
   ============================================ */
.kicker {
    position: relative;
    overflow: hidden;
}

.kicker::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: var(--burgundy-power);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--visible .kicker::after {
    transform: scaleX(1);
    transition-delay: 0.3s;
}

/* ============================================
   LEDE DIVIDER ANIMATION
   ============================================ */
.lede__divider {
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal--visible .lede__divider {
    transform: scaleX(1);
    transition-delay: 0.5s;
}

/* ============================================
   PAGE LOAD ANIMATIONS
   ============================================ */
@keyframes heroLoad {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__content {
    animation: heroLoad 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.2s;
    opacity: 0;
}

.hero__visual {
    animation: heroLoad 1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.4s;
    opacity: 0;
}

.hero__masthead-bar {
    animation: fadeInDown 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.1s;
    opacity: 0;
}

/* ============================================
   PARALLAX EFFECT (subtle)
   ============================================ */
[data-parallax] {
    will-change: transform;
    transition: transform 0.1s linear;
}

/* ============================================
   REDUCED MOTION
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .reveal,
    .reveal--left,
    .reveal--right,
    .reveal--scale,
    .reveal--blur {
        opacity: 1;
        transform: none;
        filter: none;
    }
    
    [data-stagger-item] {
        opacity: 1;
        transform: none;
    }
    
    .grain::before {
        animation: none;
    }
    
    .hero__content,
    .hero__visual,
    .hero__masthead-bar {
        opacity: 1;
        animation: none;
    }
    
    .stamp {
        opacity: 1;
        animation: none;
    }
}

/* ============================================
   SCROLL-TRIGGERED ANIMATIONS (JS enhancement)
   ============================================ */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
}

.animate-on-scroll.animated {
    opacity: 1;
    transform: translateY(0);
    transition: 
        opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ============================================
   CUSTOM CURSOR (Desktop only)
   ============================================ */
.custom-cursor {
    position: fixed;
    width: 40px;
    height: 40px;
    border: 1px solid var(--burgundy-power);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10000;
    transform: translate(-50%, -50%);
    transition: 
        width 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    mix-blend-mode: difference;
}

.custom-cursor--hover {
    width: 60px;
    height: 60px;
    border-color: var(--cream-classic);
}

.custom-cursor__dot {
    position: fixed;
    width: 6px;
    height: 6px;
    background: var(--burgundy-power);
    border-radius: 50%;
    pointer-events: none;
    z-index: 10001;
    transform: translate(-50%, -50%);
    mix-blend-mode: difference;
}

/* Hide default cursor when custom is active */
.has-custom-cursor {
    cursor: none;
}

.has-custom-cursor a,
.has-custom-cursor button,
.has-custom-cursor input,
.has-custom-cursor textarea,
.has-custom-cursor select {
    cursor: none;
}