/* ==========================================================================
   Keyframes
   ========================================================================== */

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

/* Pure-CSS reveal: plays automatically on page load, no JS required. */
.reveal {
    animation: revealUp .7s var(--ease-out) both;
}
.reveal--d1 { animation-delay: 90ms; }
.reveal--d2 { animation-delay: 180ms; }
.reveal--d3 { animation-delay: 270ms; }
.reveal--d4 { animation-delay: 360ms; }

@keyframes floatBlobA {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(40px, 30px) scale(1.08); }
}
@keyframes floatBlobB {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(-30px, -40px) scale(1.05); }
}
@keyframes floatBlobC {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50%      { transform: translate(20px, -25px) scale(1.12); }
}

.blob--1 { animation: floatBlobA 16s ease-in-out infinite; }
.blob--2 { animation: floatBlobB 18s ease-in-out infinite; }
.blob--3 { animation: floatBlobC 14s ease-in-out infinite; }

@keyframes marqueeUp {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}
@keyframes marqueeDown {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}
@keyframes marqueeLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@keyframes marqueeRight {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

.marquee--up .marquee__track {
    animation: marqueeUp 90s linear infinite;
}
.marquee--down .marquee__track {
    animation: marqueeDown 105s linear infinite;
}

.marquee:hover .marquee__track {
    animation-play-state: paused;
}

/* On tablets/phones the showcase collapses into a single horizontal row —
   override the vertical shorthand with a horizontal one (must stay below
   the base rule above so the cascade order picks this up). */
@media (max-width: 1080px) {
    .marquee--up .marquee__track {
        animation: marqueeLeft 55s linear infinite;
    }
}