/**
 * GAL Theme Animations & Micro-Interactions
 *
 * Smooth text reveals for titles and paragraphs (inspired by topgolf.sa)
 * and choreographed section element animations on scroll.
 */

/* ==========================================================================
   1. Smooth Paragraph Reveal (Topgolf Style)
   ========================================================================== */

p.paragraph-scroll-reveal {
    opacity: 0;
    clip-path: inset(0 0 99% 0);
    transform: translate3d(0, 38px, 0);
    filter: blur(7px);
    transition:
        opacity 800ms cubic-bezier(0.16, 1, 0.3, 1) 260ms,
        transform 1000ms cubic-bezier(0.16, 1, 0.3, 1) 260ms,
        filter 850ms cubic-bezier(0.16, 1, 0.3, 1) 260ms,
        clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1) 260ms;
    will-change: opacity, transform, filter, clip-path;
}

p.paragraph-scroll-reveal.paragraph-visible {
    opacity: 1;
    clip-path: inset(0);
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    will-change: auto;
}

/* ==========================================================================
   2. Smooth Title & Heading Mask Reveals
   ========================================================================== */

.gal-heading-reveal,
.gal-heading-reveal__mask,
.gal-heading-reveal__line,
.gal-heading-reveal__word {
    background: transparent !important;
    background-image: none !important;
}

.gal-heading-reveal__mask {
    display: block;
    overflow: hidden;
    margin: 0;
    padding-bottom: 0.12em;
    position: relative;
}

/* Mask that covers the text and slides away */
/* Mask pseudo-element removed – heading will reveal via sliding text */

.gal-heading-reveal__line {
    display: block;
    clip-path: inset(0 100% 0 0);
    transform: none;
    opacity: 0;
    filter: blur(5px);
    transition:
        clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1) var(--gal-line-delay, 0ms),
        opacity 350ms ease var(--gal-line-delay, 0ms),
        filter 700ms cubic-bezier(0.16, 1, 0.3, 1) var(--gal-line-delay, 0ms);
    will-change: clip-path, opacity, filter;
    white-space: nowrap;
}

/* Mask that covers each line and slides right */






.gal-heading-reveal.is-text-visible .gal-heading-reveal__line {
    clip-path: inset(0);
    transform: none;
    opacity: 1;
    filter: blur(0);
    will-change: auto;
}

.gal-heading-reveal__word {
    display: inline;
}

/* For titles that are revealed as a single block */
.gal-heading-reveal:not(.is-split) {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: none;
    filter: blur(5px);
    transition:
        clip-path 900ms cubic-bezier(0.16, 1, 0.3, 1),
        opacity 350ms ease,
        filter 700ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: clip-path, opacity, filter;
}

.gal-heading-reveal.is-text-visible:not(.is-split) {
    opacity: 1;
    clip-path: inset(0);
    transform: none;
    filter: blur(0);
    will-change: auto;
}

/* ==========================================================================
   3. Section Elements Staggered Animation
   ========================================================================== */

.gal-stage-item {
    opacity: 0;
    transform: translate3d(0, 56px, 0);
    filter: blur(12px);
    transition:
        opacity 800ms cubic-bezier(0.16, 1, 0.3, 1) var(--stage-delay, 0ms),
        transform 1150ms cubic-bezier(0.16, 1, 0.3, 1) var(--stage-delay, 0ms),
        filter 950ms cubic-bezier(0.16, 1, 0.3, 1) var(--stage-delay, 0ms);
    will-change: opacity, transform, filter;
}

.gal-stage-image {
    clip-path: inset(0 0 100% 0);
    transform: translate3d(0, 64px, 0) scale(0.985);
    filter: blur(12px) saturate(0.92);
    transition:
        opacity 800ms cubic-bezier(0.16, 1, 0.3, 1) var(--stage-delay, 0ms),
        transform 1150ms cubic-bezier(0.16, 1, 0.3, 1) var(--stage-delay, 0ms),
        filter 950ms cubic-bezier(0.16, 1, 0.3, 1) var(--stage-delay, 0ms),
        clip-path 1150ms cubic-bezier(0.16, 1, 0.3, 1) var(--stage-delay, 0ms);
    will-change: opacity, transform, filter, clip-path;
}

.is-section-visible .gal-stage-item,
.sequence-visible .gal-stage-item {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
    will-change: auto;
}

.is-section-visible .gal-stage-image,
.sequence-visible .gal-stage-image {
    clip-path: inset(0 0 0 0);
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0) saturate(1);
    will-change: auto;
}

/* ==========================================================================
   4. Existing Component Hover Micro-Interactions
   ========================================================================== */

.gal-capability-card,
.gal-news-card,
.gal-stat {
    transition:
        transform 450ms cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 450ms cubic-bezier(0.16, 1, 0.3, 1),
        border-color 300ms ease;
    will-change: transform;
}

.gal-capability-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45), 0 0 20px rgba(186, 154, 57, 0.22);
}

.gal-news-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.4), 0 0 18px rgba(186, 154, 57, 0.2);
}

.gal-stat:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
}

.gal-capability-card img,
.gal-news-card img,
.gal-why__media img {
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1);
}

.gal-capability-card:hover img {
    transform: scale(1.05);
}

.gal-news-card:hover img {
    transform: scale(1.06);
}

.gal-why__media:hover img {
    transform: scale(1.03);
}

.gal-capability-card img.gal-stage-image,
.gal-news-card img.gal-stage-image,
.gal-why__media img.gal-stage-image {
    transition:
        opacity 800ms cubic-bezier(0.16, 1, 0.3, 1) var(--stage-delay, 0ms),
        transform 1150ms cubic-bezier(0.16, 1, 0.3, 1) var(--stage-delay, 0ms),
        filter 950ms cubic-bezier(0.16, 1, 0.3, 1) var(--stage-delay, 0ms),
        clip-path 1150ms cubic-bezier(0.16, 1, 0.3, 1) var(--stage-delay, 0ms);
}

:where(.button, .wp-element-button, .wp-block-button__link) {
    transition:
        transform 280ms cubic-bezier(0.16, 1, 0.3, 1),
        background-color 280ms ease,
        border-color 280ms ease,
        box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

:where(.button, .wp-element-button, .wp-block-button__link):hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35), 0 0 14px rgba(186, 154, 57, 0.35);
}

/* ==========================================================================
   5. Accessibility (prefers-reduced-motion)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    p.paragraph-scroll-reveal,
    .gal-heading-reveal__line,
    .gal-heading-reveal:not(.is-split),
    .gal-stage-item,
    .gal-stage-image,
    .gal-capability-card,
    .gal-news-card,
    .gal-stat,
    .gal-capability-card img,
    .gal-news-card img,
    .gal-why__media img,
    :where(.button, .wp-element-button, .wp-block-button__link) {
        transition: none !important;
        animation: none !important;
        transform: none !important;
        clip-path: none !important;
        opacity: 1 !important;
        filter: none !important;
    }
}