/**
 * Theme Name:      CreativityDS Divi 5 Agency Base
 * Theme URI:       https://www.creativityds.com/
 * Description:     Production-ready child theme foundation for Divi 5.
 * Author:          Creativity Design Studio LLC
 * Author URI:      https://www.creativityds.com/
 * Template:        Divi
 * Version:         5.2026.9.15
 * Text Domain:     creativityds-child-theme
 * License:         GPL-2.0-or-later
 * License URI:     https://www.gnu.org/licenses/gpl-2.0.html
 */

/* ==========================================================================
   TABLE OF CONTENTS
   --------------------------------------------------------------------------
   01. Backdrop Blur
   02. Zoom Effect — KB Slider (Gecko/Firefox/LibreWolf safe)
   03. Animate Gradient
   04. Show Desktop Menu on Phone
   05. Motion V / H (Float Animations)
   06. Agency-Safe Baseline (images, focus, a11y)
   07. Reduced Motion Accessibility Override

   BASELINE PHILOSOPHY
   --------------------------------------------------------------------------
   This file should remain small, intentional, and reversible. Every rule
   here exists because the baseline needs to own that behavior. Do not add
   "optimization" CSS speculatively — if a rule fights Divi, scope it to a
   module inside inc/compatibility.php instead of expanding this file.
   ========================================================================== */


/* --------------------------------------------------------------------------
   01. BACKDROP BLUR
   -------------------------------------------------------------------------- */
.bblur {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}


/* --------------------------------------------------------------------------
   02. ZOOM EFFECT — KB SLIDER
   Gecko / Firefox / LibreWolf / Waterfox / Tor Browser fix.

   - will-change: transform promotes the element to its own GPU layer
     before the animation begins (prevents first-frame jank).
   - backface-visibility: hidden suppresses sub-pixel flicker on scaled
     layers in both WebKit and Gecko.
   - translateZ(0) forces a compositing context on Gecko builds that
     ignore will-change alone. Note: the keyframes replace the transform
     value during animation, so this is primarily a pre-animation hint —
     it is kept because it improves observed Gecko behavior.
   - linear timing is correct for a slow Ken-Burns loop; `ease` produces
     visually uneven pacing across the 0% / 50% / 100% boundaries.
   -------------------------------------------------------------------------- */
.zoomkbslider {
    animation: kbsl 60s linear infinite;
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0);
}

@keyframes kbsl {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.2); }
    100% { transform: scale(1); }
}


/* --------------------------------------------------------------------------
   03. ANIMATE GRADIENT
   -------------------------------------------------------------------------- */
.animate-gradient {
    background-size: 400% 400%;
    animation: gradient 5s ease infinite alternate;
}

@keyframes gradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}


/* --------------------------------------------------------------------------
   04. SHOW DESKTOP MENU ON PHONE
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .pa-open-mobile-menu .et_pb_menu__menu {
        display: flex !important;
    }

    .pa-open-mobile-menu .et_mobile_nav_menu {
        display: none !important;
    }
}


/* --------------------------------------------------------------------------
   05. MOTION V / H (FLOAT ANIMATIONS)

   IMPORTANT — animation ownership:
   Both classes control the entire `transform` property. Apply them to a
   WRAPPER element, never to a Divi module or element that already requires
   its own transform. Doing so will silently override the element's existing
   transform and produce mysterious layout behavior.
   -------------------------------------------------------------------------- */
.motion-v {
    animation: floatVertical 3.5s ease-in-out infinite;
}

@keyframes floatVertical {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

.motion-h {
    animation: floatHorizontal 3.5s ease-in-out infinite;
}

@keyframes floatHorizontal {
    0%, 100% { transform: translateX(0); }
    50%      { transform: translateX(-8px); }
}


/* --------------------------------------------------------------------------
   06. AGENCY-SAFE BASELINE

   Intentionally scoped to `img` only. Video and iframe elements are left
   under Divi's control because Divi modules, YouTube/Vimeo embeds, Google
   Maps, and third-party widgets all rely on their own intrinsic sizing
   rules. A global max-width on video/iframe can collapse fixed-aspect
   containers. If a specific overflow issue appears, fix it in
   inc/compatibility.php with a module-scoped selector.
   -------------------------------------------------------------------------- */
img {
    max-width: 100%;
}

:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 3px;
}

.screen-reader-text {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}


/* --------------------------------------------------------------------------
   07. REDUCED MOTION ACCESSIBILITY OVERRIDE

   Placed last so it wins the cascade over every animation declaration
   above. Also releases the GPU layer (will-change: auto) when motion is
   disabled, so reduced-motion users do not carry the memory cost of a
   composited layer they never see animate.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .zoomkbslider,
    .animate-gradient,
    .motion-v,
    .motion-h {
        animation: none !important;
        transform: none !important;
        will-change: auto !important;
    }
}