/* =============================================================
   Kreston Global — Hero Banner Animation
   Add to your theme stylesheet or enqueue as a separate file.

   ENQUEUE IN functions.php (optional separate file approach):
   wp_enqueue_style(
       'kreston-banner',
       get_template_directory_uri() . '/banner-animation.css',
       array(), '1.0'
   );
   ============================================================= */


/* ── Figure wrapper ──────────────────────────────────────────── */
/* Bootstrap sets `figure { margin: 0 0 1rem }` — override it.  */
figure.hb-figure {
    display: block;
    margin: 0 !important;
    padding: 0;
    line-height: 0;
    width: 100%;
}


/* ── Outer shell — establishes the aspect ratio via padding-bottom
   aspect-ratio CSS property breaks inside .container-fluid because
   the browser resolves the intrinsic height differently at 100vw.
   padding-bottom: X% is always relative to the element's WIDTH,
   so it reliably locks the 2600:542 ratio at any container size.
   2600 / 542 = 20.846%                                          ── */
.hb-outer {
    position: relative;
    width: 100%;
    padding-bottom: 20.846%;
    height: 0;
}


/* ── Inner shell — fills the padding box and clips all layers ── */
/*
 * Absolutely positioned children use top/left percentages relative
 * to their containing block's HEIGHT. .hb-inner has an explicit
 * height (100% of .hb-outer's padding box) so all % values resolve
 * correctly.
 *
 * transform: translateZ(0) promotes .hb-inner to a GPU compositing
 * layer so that animated children (opacity/transform) cannot paint
 * outside the overflow:hidden boundary.
 */
.hb-inner {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
    isolation: isolate;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}


/* ── Base layer ──────────────────────────────────────────────── */
/*
 * max-width: none overrides Bootstrap's global img { max-width: 100% }.
 * height: auto ensures images scale proportionally with their width.
 */
.hb-layer {
    position: absolute;
    display: block;
    max-width: none;
    height: auto;
}


/* ── Layer positions (% of 2600 × 542 canvas) ───────────────── */

/* z:1  Background */
.hb-bg {
    left: 0; top: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: 1;
}

/* z:2  Small bar — behind bloke */
.hb-sml-bar {
    left:  8.92%; top: 53.50%;
    width: 3.42%;
    z-index: 2;
}

/* z:3  Pie rings — all 168×168, same canvas, same position */
.hb-pie-1,
.hb-pie-2,
.hb-pie-3 {
    left:  9.19%; top: 19.74%;
    width: 6.46%;
    z-index: 3;
}

/* z:4  Vertical gradient */
.hb-vgrad {
    left: 12.92%; top: 18.45%;
    width:  3.88%;
    z-index: 4;
}

/* z:5  Bloke */
.hb-bloke {
    left:  7.15%; top:  2.58%;
    width: 16.27%;
    z-index: 5;
}

/* z:6  Horizontal gradient */
.hb-hgrad {
    left:  0%;    top: 57.75%;
    width: 42.35%;
    z-index: 6;
}

/* z:7  Individual bars */
.hb-bar-1 { left: 25.31%; top: 57.75%; width: 1.62%; z-index: 7; }
.hb-bar-2 { left: 27.35%; top: 57.75%; width: 1.65%; z-index: 7; }
.hb-bar-3 { left: 29.42%; top: 57.75%; width: 1.65%; z-index: 7; }
.hb-bar-4 { left: 31.42%; top: 57.94%; width: 1.65%; z-index: 7; }
.hb-bar-5 { left: 33.38%; top: 57.75%; width: 1.62%; z-index: 7; }

/* z:8  Small pie */
.hb-sml-pie {
    left: 19.31%; top: 49.98%;
    width:  3.31%;
    z-index: 8;
}

/* z:9  Line graph */
.hb-line-graph {
    left: 23.27%; top: 25.65%;
    width:  7.46%;
    z-index: 9;
}

/* ── Hero content overlay sits ABOVE all animation layers ────── */
.hero-content {
    position: relative;
    z-index: 10;
}


/* ── Keyframes ───────────────────────────────────────────────── */
@keyframes hb-fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes hb-fadeInScale {
    from { opacity: 0; transform: scale(0.82); }
    to   { opacity: 1; transform: scale(1);    }
}

@keyframes hb-slideInLeft {
    from { opacity: 0; transform: translateX(-24px); }
    to   { opacity: 1; transform: translateX(0);     }
}

@keyframes hb-fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0);    }
}


/* ── Animation schedule (~3 s total) ────────────────────────── */
/*
    0.15s  pie ring 1     (0.20 s) → done 0.35 s
    0.35s  pie ring 2     (0.20 s) → done 0.55 s
    0.50s  pie ring 3     (0.20 s) → done 0.70 s
    0.75s  bloke          (0.40 s) → done 1.15 s
    1.20s  vgrad + smlbar (0.30 s) → done 1.50 s
    1.60s  hgrad          (0.20 s) → done 1.80 s
    1.90s  bars 1→5       (0.15 s each, 0.15 s stagger)
    2.65s  sml pie        (0.20 s) → done 2.85 s
    2.80s  line graph     (0.20 s) → done 3.00 s
*/

.hb-pie-1 { animation: hb-fadeInScale 0.2s ease-out 0.15s both; }
.hb-pie-2 { animation: hb-fadeInScale 0.2s ease-out 0.35s both; }
.hb-pie-3 { animation: hb-fadeInScale 0.2s ease-out 0.50s both; }

.hb-bloke { animation: hb-fadeIn 0.4s ease-out 0.75s both; }

.hb-vgrad   { animation: hb-slideInLeft 0.3s ease-out 1.2s both; }
.hb-sml-bar { animation: hb-slideInLeft 0.3s ease-out 1.2s both; }

.hb-hgrad { animation: hb-fadeInUp 0.2s ease-out 1.6s both; }

.hb-bar-1 { animation: hb-fadeIn 0.15s ease-out 1.90s both; }
.hb-bar-2 { animation: hb-fadeIn 0.15s ease-out 2.05s both; }
.hb-bar-3 { animation: hb-fadeIn 0.15s ease-out 2.20s both; }
.hb-bar-4 { animation: hb-fadeIn 0.15s ease-out 2.35s both; }
.hb-bar-5 { animation: hb-fadeIn 0.15s ease-out 2.50s both; }

.hb-sml-pie    { animation: hb-fadeIn 0.2s ease-out 2.65s both; }
.hb-line-graph { animation: hb-fadeIn 0.2s ease-out 2.80s both; }