/* =============================================================
   GHS Theme -- assets/css/animations.css
   Keyframe animations and clip-path helper classes.

   All keyframe values are copied EXACTLY from ghs-website.css.
   Motion is guarded by prefers-reduced-motion where appropriate.

   @package GHS_Theme
   @since   1.0.0
   ============================================================= */


/* ----------------------------------------------------------
   KEYFRAMES
   ---------------------------------------------------------- */

/* Hero section: background gradient drift (16 s, infinite) */
@keyframes gradDrift {
    0%   { background-position:   0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position:   0% 50%; }
}

/* Hero section: floating radial-gradient blob A */
@keyframes blobA {
    0%,  100% { transform: translate(0,     0)     scale(1);    }
    33%        { transform: translate(28px, -22px)  scale(1.08); }
    66%        { transform: translate(-16px, 18px)  scale(0.94); }
}

/* Hero section: floating radial-gradient blob B */
@keyframes blobB {
    0%,  100% { transform: translate(0,     0)    scale(1);    }
    40%        { transform: translate(-20px, 28px) scale(1.12); }
    75%        { transform: translate(18px, -14px) scale(0.92); }
}

/* Hero section: floating radial-gradient blob C */
@keyframes blobC {
    0%,  100% { transform: translate(0,    0);    }
    50%        { transform: translate(14px, 18px); }
}

/* Hero section: Ken Burns zoom + pan on the hero image (18 s, alternate) */
@keyframes kenBurns {
    0%   { transform: scale(1)    translate(0%,    0%);   }
    100% { transform: scale(1.09) translate(-1.5%, 0.5%); }
}

/* Tab content: fade in + 10px upward slide (220 ms) */
@keyframes fadeslide {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);    }
}


/* ----------------------------------------------------------
   ANIMATION UTILITY CLASSES
   ---------------------------------------------------------- */

/* Apply fadeslide to any newly-visible element */
.ghs-anim-fadeslide {
    animation: fadeslide 220ms var(--ease-out) both;
}

/* Hero gradient drift (applied via inline style on section, but also
   available as a class for reuse) */
.ghs-anim-grad-drift {
    background-size: 350% 350%;
    animation: gradDrift 16s ease-in-out infinite;
}

/* Ken Burns -- apply to an <img> inside a clipped/overflow-hidden wrapper */
.ghs-anim-ken-burns {
    animation: kenBurns 18s ease-in-out infinite alternate;
}


/* ----------------------------------------------------------
   CLIP-PATH HELPERS
   The SVG <defs> containing the actual <clipPath> shapes are
   injected into the DOM by header.php (as a zero-size SVG).
   These classes simply apply the clip-path reference.
   ---------------------------------------------------------- */

/* GHS hero / right-column polygon shape */
.ghs-clip-hero {
    clip-path: url(#ghs-hero-clip);
}

/* Mirrored version for the "Over ons" section (arch on left side) */
.ghs-clip-about {
    clip-path: url(#ghs-about-clip);
}


/* ----------------------------------------------------------
   REDUCED MOTION OVERRIDE
   Users who prefer reduced motion get cross-fade only, no
   translate, scale, or continuous animation.
   ---------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .ghs-anim-fadeslide,
    .ghs-anim-ken-burns,
    .ghs-anim-grad-drift {
        animation: none;
    }

    *,
    *::before,
    *::after {
        animation-duration:        0.01ms !important;
        animation-iteration-count: 1      !important;
        transition-duration:       0.01ms !important;
    }
}