/* ============================================================
   ANIMATIONS — Scroll reveal system
   Instituto Tecnológico CEPRO
   Usage:
     <div class="reveal" data-reveal="up">...</div>
     <div class="reveal" data-reveal="left">...</div>
     <div class="reveal" data-reveal="right">...</div>
     <div class="reveal" data-reveal="scale">...</div>
     <div class="reveal" data-reveal="blur">...</div>

   Optional:
     data-reveal-delay="200"  -> extra delay in ms
   ============================================================ */

/* ============================================
   BASE
   ============================================ */
.reveal {
    opacity: 0;
    will-change: opacity, transform;
    transition:
        opacity 700ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 700ms cubic-bezier(0.16, 1, 0.3, 1),
        filter 700ms cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--reveal-delay, 0ms);
}

.reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
}

/* ============================================
   VARIANTS — desktop distances
   ============================================ */

/* UP — fade + slide from bottom */
.reveal[data-reveal="up"] {
    transform: translate3d(0, 48px, 0);
}

/* DOWN — fade + slide from top */
.reveal[data-reveal="down"] {
    transform: translate3d(0, -48px, 0);
}

/* LEFT — fade + slide from left */
.reveal[data-reveal="left"] {
    transform: translate3d(-56px, 0, 0);
}

/* RIGHT — fade + slide from right */
.reveal[data-reveal="right"] {
    transform: translate3d(56px, 0, 0);
}

/* SCALE — fade + zoom in */
.reveal[data-reveal="scale"] {
    transform: scale(0.92);
}

/* BLUR — fade + unblur (very modern) */
.reveal[data-reveal="blur"] {
    filter: blur(10px);
    transform: translate3d(0, 20px, 0);
}

/* ============================================
   STAGGER — auto delay for children
   ============================================ */
.reveal-stagger > .reveal:nth-child(1)  { --reveal-delay:   0ms; }
.reveal-stagger > .reveal:nth-child(2)  { --reveal-delay: 100ms; }
.reveal-stagger > .reveal:nth-child(3)  { --reveal-delay: 200ms; }
.reveal-stagger > .reveal:nth-child(4)  { --reveal-delay: 300ms; }
.reveal-stagger > .reveal:nth-child(5)  { --reveal-delay: 400ms; }
.reveal-stagger > .reveal:nth-child(6)  { --reveal-delay: 500ms; }
.reveal-stagger > .reveal:nth-child(7)  { --reveal-delay: 600ms; }
.reveal-stagger > .reveal:nth-child(8)  { --reveal-delay: 700ms; }
.reveal-stagger > .reveal:nth-child(9)  { --reveal-delay: 800ms; }
.reveal-stagger > .reveal:nth-child(10) { --reveal-delay: 900ms; }
.reveal-stagger > .reveal:nth-child(n+11) { --reveal-delay: 1000ms; }

/* ============================================
   MANUAL DELAY
   ============================================ */
.reveal[data-reveal-delay="100"] { --reveal-delay: 100ms; }
.reveal[data-reveal-delay="200"] { --reveal-delay: 200ms; }
.reveal[data-reveal-delay="300"] { --reveal-delay: 300ms; }
.reveal[data-reveal-delay="400"] { --reveal-delay: 400ms; }
.reveal[data-reveal-delay="500"] { --reveal-delay: 500ms; }
.reveal[data-reveal-delay="600"] { --reveal-delay: 600ms; }

/* ============================================
   RESPONSIVE — kill lateral offsets on small screens
   Breakpoint at 1200px so lateral reveals don't cause
   clipping when 2-column layouts stack into one column.
   ============================================ */

/* Narrow desktop / tablet & below (≤ 1200px) — no lateral movement */
@media (max-width: 1200px) {
    .reveal[data-reveal="left"],
    .reveal[data-reveal="right"] {
        transform: translate3d(0, 40px, 0);
    }

    .reveal[data-reveal="up"] {
        transform: translate3d(0, 32px, 0);
    }

    .reveal[data-reveal="down"] {
        transform: translate3d(0, -32px, 0);
    }

    .reveal[data-reveal="scale"] {
        transform: scale(0.96);
    }

    .reveal[data-reveal="blur"] {
        filter: blur(6px);
        transform: translate3d(0, 14px, 0);
    }
}

/* Small phones (≤ 600px) — even smaller vertical distances */
@media (max-width: 600px) {
    .reveal[data-reveal="left"],
    .reveal[data-reveal="right"] {
        transform: translate3d(0, 24px, 0);
    }

    .reveal[data-reveal="up"] {
        transform: translate3d(0, 20px, 0);
    }

    .reveal[data-reveal="down"] {
        transform: translate3d(0, -20px, 0);
    }

    .reveal[data-reveal="scale"] {
        transform: scale(0.97);
    }

    .reveal[data-reveal="blur"] {
        filter: blur(4px);
        transform: translate3d(0, 10px, 0);
    }
}

/* ============================================
   ACCESSIBILITY — respect reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
    }
}