.wobble {
    animation-name: wobble;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
  
  @keyframes wobble {
    0% {transform: translateX(0) rotate(0deg);}
    15% {transform: translateX(-30px) rotate(-5deg);}
    30% {transform: translateX(15px) rotate(3deg);}
    45% {transform: translateX(-15px) rotate(-3deg);}
    60% {transform: translateX(9px) rotate(2deg);}
    75% {transform: translateX(-6px) rotate(-1deg);}
    100% {transform: translateX(0) rotate(0deg);}
  }


.animated-title {
  /* Apply the animation */
  animation: reveal 0.6s ease forwards;
}

@keyframes reveal {
  /* Start with a heavy blur */
  from {
    filter: blur(8px);
  }
  /* End with no blur */
  to {
    filter: blur(0px);
  }
}

/* Aplica esta clase a las secciones o contenedores que tengan animaciones laterales */
.anim-container {
    overflow: hidden;
    width: 100%;
}

/* Clase base para todos */
.reveal {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform, opacity;
}

/* Variante elegante */
.reveal--elegante {
    transition: transform 0.8s ease,
                opacity 0.8s ease,
                filter 1.5s ease;
}

/* Variante cine */
.reveal--cine {
    transition: transform 0.8s ease,
                opacity 0.8s ease,
                filter 2s ease;
}




/* Izquierda a Derecha */
.from-left {
    transform: translateX(-50px);
}

/* Derecha a Izquierda */
.from-right {
    transform: translateX(50px);
}

/* Abajo hacia Arriba */
.from-bottom {
    transform: translateY(50px);
}

.reveal.active {
    opacity: 1;
    transform: translateX(0) translateY(0);
}




/* fade + scale */
.from-scale {
    transform: scale(0.9);
}

.reveal.active.from-scale {
    transform: scale(1);
}


/* blur + fade */
.from-blur {
    filter: blur(15px);
    transform: translateY(20px);
}

.reveal.active.from-blur {
    filter: blur(0);
    transform: translateY(0);
}

/* Clip-Path Reveal  desde la izquierda */
.from-clip-left {
    clip-path: inset(0 100% 0 0);
}

.reveal.active.from-clip-left {
    clip-path: inset(0 0 0 0);
}


/* Clip-Path Reveal  desde la derecha */
.from-clip-right {
    clip-path: inset(0 0 0 100%);
}

.reveal.active.from-clip-right {
    clip-path: inset(0 0 0 0);
}

/* mask reveal */
.from-mask-left {
    mask-image: linear-gradient(to right, transparent 0%, black 30%);
    mask-size: 200% 100%;
    mask-position: right;
    mask-repeat: no-repeat;
}

.reveal.active.from-mask-left {
    mask-position: left;
}

/* rotate + face */
.from-rotate {
    transform: rotate(-3deg) translateY(20px);
}

.reveal.active.from-rotate {
    transform: rotate(0) translateY(0);
}


/*
Cómo aplicarlo:

<section class="anim-container">
    <div class="reveal from-left">
        <h2>Entrando desde la izquierda</h2>
    </div>
</section>

<section class="anim-container">
    <div class="reveal from-right">
        <h2>Entrando desde la derecha</h2>
    </div>
</section>

<section class="anim-container">
    <div class="reveal from-bottom">
        <h2>Subiendo con elegancia</h2>
    </div>
</section>
*/


/*
.delay-03 { transition-delay: 0.3s; }
.delay-06 { transition-delay: 0.6s; }
.delay-09 { transition-delay: 0.9s; }
.delay-12 { transition-delay: 1.2s; }
.delay-15 { transition-delay: 1.5s; }
*/


/* Clase base para párrafos */
p.reveal {
    opacity: 0;
    transition: opacity 1s ease, transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform, opacity;
}

/* Variaciones de dirección */
p.from-left   { transform: translateX(-30px); }
p.from-right  { transform: translateX(30px); }
p.from-bottom { transform: translateY(30px); }

/* Estado activo */
p.reveal.active {
    opacity: 1;
    transform: translate(0, 0);
}

/* Opcional: Escalonado (Stagger effect) */
/* Si pones varios p.reveal juntos, el segundo tardará un poco más */
p.reveal:nth-of-type(2) { transition-delay: 0.2s; }
p.reveal:nth-of-type(3) { transition-delay: 0.4s; }

/*
Cómo aplicarlo:

<div class="sede__item anim-container">
    <h2 class="reveal from-bottom">Catedral Metropolitana</h2>
    <p class="reveal from-left">La ceremonia religiosa se llevará a cabo a las 17:00 hrs.</p>
    <p class="reveal from-left">Favor de llegar 15 minutos antes.</p>
</div>

<div class="regalos__item anim-container">
    <p class="reveal from-right">Tu presencia es nuestro mejor regalo, pero si deseas obsequiarnos algo...</p>
    <button class="btn-copy reveal from-bottom">Copiar CLABE</button>
</div>
*/