/* ---------------------------------------------
   ANIMATIONS.CSS — Motion & reveal effects
   Studaria — A Scholarly Atelier
----------------------------------------------*/

/* ---------------------------------------------
   GLOBAL FADE-IN
----------------------------------------------*/

.fade-in {
    opacity: 0;
    animation: fadeIn 1.2s ease forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ---------------------------------------------
   SOFT UPWARD FLOAT
----------------------------------------------*/

.float-up {
    opacity: 0;
    transform: translateY(20px);
    animation: floatUp 1.2s ease forwards;
}

@keyframes floatUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------
   GOLD RIBBON REVEAL (HERO)
----------------------------------------------*/

/* The ribbon sweeps from left to right,
   revealing the hero title as it passes. */

.hero-ribbon {
    opacity: 0;
    transform: translateX(-40%);
    animation: ribbonSweep 1.6s ease-out forwards;
    animation-delay: 0.3s;
}

@keyframes ribbonSweep {
    0% {
        opacity: 0;
        transform: translateX(-40%);
        width: 0%;
    }
    20% {
        opacity: 1;
        width: 20%;
    }
    60% {
        width: 100%;
        transform: translateX(0);
    }
    100% {
        opacity: 0.4;
        width: 100%;
        transform: translateX(0);
    }
}

/* ---------------------------------------------
   HERO TITLE REVEAL (after ribbon)
----------------------------------------------*/

.hero-title {
    opacity: 0;
    animation: titleReveal 1.2s ease forwards;
    animation-delay: 1.1s;
}

@keyframes titleReveal {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------
   HERO SUBTITLE REVEAL
----------------------------------------------*/

.hero-subtitle {
    opacity: 0;
    animation: subtitleReveal 1.2s ease forwards;
    animation-delay: 1.4s;
}

@keyframes subtitleReveal {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------
   CTA BUTTON REVEAL
----------------------------------------------*/

.hero .cta-button {
    opacity: 0;
    animation: ctaReveal 1.2s ease forwards;
    animation-delay: 1.7s;
}

@keyframes ctaReveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------------------------------------------
   SECTION FADE-UP ON SCROLL (optional)
----------------------------------------------*/

.reveal-on-scroll {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

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