/**
 * Scroll / load reveal — site-wide motion language.
 *
 * Conventions:
 *   data-reveal          fade-up (default)
 *   data-reveal="fade"   opacity only
 *   data-reveal="left"   subtle from left
 *   data-reveal="right"  subtle from right
 *   data-reveal="scale"  soft scale-in
 *   data-reveal-stagger  stagger direct children / [data-reveal-item]
 *   data-reveal-ignore   skip auto-targeting
 *
 * Only active when html has .reveal-on (set early in base.html).
 * Respects prefers-reduced-motion and .reveal-fallback failsafe.
 */

:root {
    --reveal-distance: 1.35rem;
    --reveal-duration: 0.75s;
    --reveal-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --reveal-stagger: 0.08s;
}

/* ---------- Scroll targets (hidden until .is-revealed) ---------- */

html.reveal-on [data-reveal]:not(.is-revealed) {
    opacity: 0;
    transform: translate3d(0, var(--reveal-distance), 0);
    will-change: opacity, transform;
}

html.reveal-on [data-reveal="fade"]:not(.is-revealed) {
    transform: none;
}

html.reveal-on [data-reveal="left"]:not(.is-revealed) {
    transform: translate3d(calc(var(--reveal-distance) * -1), 0, 0);
}

html.reveal-on [data-reveal="right"]:not(.is-revealed) {
    transform: translate3d(var(--reveal-distance), 0, 0);
}

html.reveal-on [data-reveal="scale"]:not(.is-revealed) {
    transform: scale(0.97);
}

html.reveal-on [data-reveal] {
    transition:
        opacity var(--reveal-duration) var(--reveal-ease),
        transform var(--reveal-duration) var(--reveal-ease);
    transition-delay: var(--reveal-delay, 0ms);
}

html.reveal-on [data-reveal].is-revealed {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Stagger: children wait for parent .is-revealed */
html.reveal-on [data-reveal-stagger] > :is(
    [data-reveal-item],
    .reveal-item,
    .about-services__card,
    .about-principles__item,
    .faq-accordion__item,
    .featured-story,
    .portfolio-card-link,
    .story-card,
    .solutions__tab,
    li
) {
    opacity: 0;
    transform: translate3d(0, 0.9rem, 0);
    transition:
        opacity 0.65s var(--reveal-ease),
        transform 0.65s var(--reveal-ease);
    transition-delay: 0ms;
    will-change: opacity, transform;
}

html.reveal-on [data-reveal-stagger].is-revealed > :is(
    [data-reveal-item],
    .reveal-item,
    .about-services__card,
    .about-principles__item,
    .faq-accordion__item,
    .featured-story,
    .portfolio-card-link,
    .story-card,
    .solutions__tab,
    li
) {
    opacity: 1;
    transform: none;
    will-change: auto;
    transition-delay: calc(var(--reveal-i, 0) * var(--reveal-stagger));
}

/* ---------- Hero load entrance (above the fold) ---------- */

@keyframes reveal-hero-in {
    from {
        opacity: 0;
        transform: translate3d(0, 1.1rem, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

html.reveal-on .reveal-hero-item {
    opacity: 0;
    animation: reveal-hero-in 0.85s var(--reveal-ease) forwards;
    animation-delay: var(--reveal-hero-delay, 0ms);
}

/* Named hero targets without extra markup */
html.reveal-on .landing-hero--home .hero-title,
html.reveal-on .landing-hero--about .about-hero__title,
html.reveal-on .contact-hero-pg__title,
html.reveal-on .portfolio-hero-title,
html.reveal-on .blog-stories .portfolio-hero-title {
    opacity: 0;
    animation: reveal-hero-in 0.85s var(--reveal-ease) forwards;
    animation-delay: 0.05s;
}

html.reveal-on .landing-hero--home .hero-body,
html.reveal-on .landing-hero--about .about-hero__subtitle,
html.reveal-on .contact-hero-pg__text,
html.reveal-on .portfolio-hero-inner > p {
    opacity: 0;
    animation: reveal-hero-in 0.85s var(--reveal-ease) forwards;
    animation-delay: 0.16s;
}

html.reveal-on .landing-hero--home .hero-cta,
html.reveal-on .landing-hero--about .about-hero__cta,
html.reveal-on .contact-hero-pg__points,
html.reveal-on .portfolio-filters,
html.reveal-on .blog-stories .portfolio-filters {
    opacity: 0;
    animation: reveal-hero-in 0.85s var(--reveal-ease) forwards;
    animation-delay: 0.28s;
}

html.reveal-on .landing-hero--about .about-hero__revolver,
html.reveal-on .contact-hero-pg__form-col {
    opacity: 0;
    animation: reveal-hero-in 0.9s var(--reveal-ease) forwards;
    animation-delay: 0.22s;
}

/* ---------- Reduced motion / failsafe ---------- */

@media (prefers-reduced-motion: reduce) {
    html.reveal-on [data-reveal],
    html.reveal-on [data-reveal].is-revealed,
    html.reveal-on [data-reveal-stagger] > :is(
        [data-reveal-item],
        .reveal-item,
        .about-services__card,
        .about-principles__item,
        .faq-accordion__item,
        .featured-story,
        .portfolio-card-link,
        .story-card,
        .solutions__tab,
        li
    ),
    html.reveal-on .reveal-hero-item,
    html.reveal-on .landing-hero--home .hero-title,
    html.reveal-on .landing-hero--home .hero-body,
    html.reveal-on .landing-hero--home .hero-cta,
    html.reveal-on .landing-hero--about .about-hero__title,
    html.reveal-on .landing-hero--about .about-hero__subtitle,
    html.reveal-on .landing-hero--about .about-hero__cta,
    html.reveal-on .landing-hero--about .about-hero__revolver,
    html.reveal-on .contact-hero-pg__title,
    html.reveal-on .contact-hero-pg__text,
    html.reveal-on .contact-hero-pg__points,
    html.reveal-on .contact-hero-pg__form-col,
    html.reveal-on .portfolio-hero-title,
    html.reveal-on .portfolio-hero-inner > p,
    html.reveal-on .portfolio-filters,
    html.reveal-on .blog-stories .portfolio-hero-title,
    html.reveal-on .blog-stories .portfolio-filters {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}

html.reveal-fallback [data-reveal],
html.reveal-fallback [data-reveal-stagger] > * {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}