/* =============================================================================
   C2 Fun Bricks
   ============================================================================= */

.BrickAWrM {
    overflow: hidden;
    /* Positioning context so JS can read each brick's offsetLeft relative to the
       container when deciding which bricks are actually on-screen (see
       ensureEggVisible in c2-fun-bricks.js). Does not change the visual layout. */
    position: relative;
}

.BrickAWrM.NoAnimation {
    margin: 0;
}

/* Reveal zone for the bounceInDown entrance: bricks start 3000px above their
   final position and become visible only as they enter this padded space. */
.BrickAWrM.Animation {
    padding-top: 80px;
}

/* Extend brick rows beyond the container edges so the wall bleeds to both sides.
   align-items:flex-start prevents the tallest brick wrapper from stretching all siblings.
   margin-block/padding overrides stop FSE theme rules from injecting spacing. */
.AColInner {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    margin: 0 -150px;
    margin-block-start: 0;
    margin-block-end: 0;
    padding: 0;
}

.AColInner.B {
    left: -40px;
    position: relative;
}

img.AElemBrick {
    /* display:block removes the inline descender gap; vertical-align:top is the
       fallback if a theme rule overrides display back to inline — it ensures the
       image sits at the top of its line box rather than on the text baseline */
    display: block;
    vertical-align: top;
    width: 71.29641px;
    height: 35.648209px;
    margin: 2px;
}

.AElemBrick:hover {
    cursor: pointer;
}

/* Brick disappears on click; visibility:hidden keeps layout space so
   the absolutely-positioned Easter Egg beneath it stays in place */
.AElemBrick.invisible {
    visibility: hidden;
}

.AElemBrickWr {
    position: relative;
    padding: 0;
    /* Explicitly constrain each brick slot to the correct row height.
       Absolutely-positioned children (.btn-particles, .elemEasterEgg) can
       still overflow since there is no overflow:hidden here. */
    height: 44px;
}

.elemEasterEgg {
    position: absolute;
    top: 6px;
    left: 25px;
    width: 26px;
    z-index: -1;
    visibility: hidden;
}

/* Reveal the Easter egg only after its brick is clicked (brick gets .invisible) */
.AElemBrick.invisible ~ .elemEasterEgg {
    visibility: visible;
}

.elemEasterEgg p {
    margin: 0;
}

.btn-particles {
    position: absolute;
    z-index: -1;
    width: 550px;
    height: 550px;
    border-radius: 999px;
    color: #eee;
    font-family: monospace;
    top: -240px;
    left: -40px;
}

/* Safety net: wpautop can inject <br> elements inside our brick wrappers */
.AElemBrickWr br {
    display: none;
}

/* wpautop injects empty <p> elements inside the brick wall markup (after
   AColInner rows and around the Easter Egg if/endif blocks). Hide them all. */
.BrickAWrM p:empty {
    display: none;
    margin: 0;
}

.egg-icon-spin {
    width: 100%;
    height: auto;
    display: block;
    animation: egg-spin 2s linear infinite;
}

@keyframes egg-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* ---- WOW.js animation support ----
   WOW.js adds the 'animated' class when an element scrolls into view.
   These keyframes (from animate.css v3) must be bundled here so the plugin
   is self-contained and does not require the theme to load animate.css. */

.animated {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/* WOW.js reads animation-name from getComputedStyle() — it caches the value before
   setting animation-name:none (hidden), then restores it when the element enters view.
   Without these rules the computed animation-name is 'none' and WOW.js caches 'none',
   so no animation ever plays even though the keyframes are defined. */
.bounceInDown {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

.bounceInRight {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

@-webkit-keyframes bounceInDown {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0%   { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); }
    60%  { opacity: 1; -webkit-transform: translate3d(0, 25px, 0);    transform: translate3d(0, 25px, 0); }
    75%  {             -webkit-transform: translate3d(0, -10px, 0);   transform: translate3d(0, -10px, 0); }
    90%  {             -webkit-transform: translate3d(0, 5px, 0);     transform: translate3d(0, 5px, 0); }
    to   {             -webkit-transform: none;                        transform: none; }
}
@keyframes bounceInDown {
    from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
    0%   { opacity: 0; transform: translate3d(0, -3000px, 0); }
    60%  { opacity: 1; transform: translate3d(0, 25px, 0); }
    75%  {             transform: translate3d(0, -10px, 0); }
    90%  {             transform: translate3d(0, 5px, 0); }
    to   {             transform: none; }
}

@-webkit-keyframes bounceInRight {
    from, 60%, 75%, 90%, to {
        -webkit-animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    from { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); }
    60%  { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0);  transform: translate3d(-25px, 0, 0); }
    75%  {             -webkit-transform: translate3d(10px, 0, 0);   transform: translate3d(10px, 0, 0); }
    90%  {             -webkit-transform: translate3d(-5px, 0, 0);   transform: translate3d(-5px, 0, 0); }
    to   {             -webkit-transform: none;                       transform: none; }
}
@keyframes bounceInRight {
    from, 60%, 75%, 90%, to { animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000); }
    from { opacity: 0; transform: translate3d(3000px, 0, 0); }
    60%  { opacity: 1; transform: translate3d(-25px, 0, 0); }
    75%  {             transform: translate3d(10px, 0, 0); }
    90%  {             transform: translate3d(-5px, 0, 0); }
    to   {             transform: none; }
}

/* ---- Reduced-motion safety ---- */

@media (prefers-reduced-motion: reduce) {
    .AElemBrick,
    .btn-particles .shape {
        transition: none !important;
        animation: none !important;
    }
}