/*
  OneLife Africa — hover effects (10 buttons · 10 cards · 10 photos · 10 menu links)

  HOW IT WORKS
  • Pick your site-wide favourites in  Appearance → Customize → Effects & animation.
  • To use a different effect on ONE block, add its class in the block sidebar:
      Advanced → Additional CSS class(es)   e.g.  fx-btn-5   fx-card-3   fx-photo-6
  • Add  fx-none  to a block to switch its effect off. (fx-btn-0 / fx-card-0 / fx-photo-0 also mean "none".)
  • See every effect live: log in as admin and open  yoursite.com/?ol_effects=1

  This file is generated: each effect is a self-contained block, safe to delete or edit.
*/

/* shared helpers */
.btn,.wp-block-button__link{--fx-c:158,27,50}
.hz .btn{--fx-c:18,80,60}
.hero .is-style-outline .wp-block-button__link{--fx-c:255,255,255}
@keyframes fx-shine{from{left:-75%}to{left:135%}}
@keyframes fx-arrow{0%{transform:translateX(0);opacity:1}45%{transform:translateX(16px);opacity:0}46%{transform:translateX(-16px);opacity:0}100%{transform:translateX(0);opacity:1}}
@keyframes fx-ring{0%{box-shadow:0 0 0 0 rgba(var(--fx-c),.55)}100%{box-shadow:0 0 0 18px rgba(var(--fx-c),0)}}


/* ======================================================================
   BUTTONS  —  class fx-btn-N   (Add to a Button block)
   ====================================================================== */

/* fx-btn-1 · Lift & shadow */
:is(.btn.fx-btn-1,.fx-btn-1 .wp-block-button__link){position:relative;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background .2s,color .2s}
:is(.btn.fx-btn-1,.fx-btn-1 .wp-block-button__link):is(:hover,:focus-visible){transform:translateY(-3px);box-shadow:0 12px 22px -8px rgba(var(--fx-c),.6)}
:is(.btn.fx-btn-1,.fx-btn-1 .wp-block-button__link):active{transform:translateY(-1px);box-shadow:0 5px 10px -6px rgba(var(--fx-c),.6)}

/* fx-btn-2 · Slide fill */
:is(.btn.fx-btn-2,.fx-btn-2 .wp-block-button__link){position:relative;overflow:hidden;isolation:isolate;transition:color .35s,border-color .35s,background .35s}
:is(.btn.fx-btn-2,.fx-btn-2 .wp-block-button__link)::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--green-dk);transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease)}
:is(.btn.fx-btn-2,.fx-btn-2 .wp-block-button__link):is(:hover,:focus-visible)::before{transform:scaleX(1)}
:is(.btn.fx-btn-2,.fx-btn-2 .wp-block-button__link):is(:hover,:focus-visible){border-color:var(--green-dk)!important;color:#fff}

/* fx-btn-3 · Arrow loop */
:is(.btn.fx-btn-3,.fx-btn-3 .wp-block-button__link){position:relative;overflow:hidden;transition:box-shadow .3s,background .2s}
:is(.btn.fx-btn-3,.fx-btn-3 .wp-block-button__link)::after{display:inline-block}
:is(.btn.fx-btn-3,.fx-btn-3 .wp-block-button__link):is(:hover,:focus-visible)::after{animation:fx-arrow .65s var(--ease)}
:is(.btn.fx-btn-3,.fx-btn-3 .wp-block-button__link):is(:hover,:focus-visible){box-shadow:0 10px 20px -10px rgba(var(--fx-c),.6)}

/* fx-btn-4 · Spring pop */
:is(.btn.fx-btn-4,.fx-btn-4 .wp-block-button__link){position:relative;transition:transform .4s var(--spring),box-shadow .3s,background .2s}
:is(.btn.fx-btn-4,.fx-btn-4 .wp-block-button__link):is(:hover,:focus-visible){transform:scale(1.07);box-shadow:0 10px 24px -8px rgba(var(--fx-c),.55)}
:is(.btn.fx-btn-4,.fx-btn-4 .wp-block-button__link):active{transform:scale(.96)}

/* fx-btn-5 · Shine sweep */
:is(.btn.fx-btn-5,.fx-btn-5 .wp-block-button__link){position:relative;overflow:hidden;isolation:isolate;transition:transform .3s var(--ease),background .2s}
:is(.btn.fx-btn-5,.fx-btn-5 .wp-block-button__link)::before{content:"";position:absolute;top:0;left:-75%;width:45%;height:100%;z-index:1;pointer-events:none;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg)}
:is(.btn.fx-btn-5,.fx-btn-5 .wp-block-button__link):is(:hover,:focus-visible)::before{animation:fx-shine .85s ease}
:is(.btn.fx-btn-5,.fx-btn-5 .wp-block-button__link):is(:hover,:focus-visible){transform:translateY(-2px)}

/* fx-btn-6 · Pulse ring */
:is(.btn.fx-btn-6,.fx-btn-6 .wp-block-button__link){position:relative;transition:background .2s}
:is(.btn.fx-btn-6,.fx-btn-6 .wp-block-button__link):is(:hover,:focus-visible){animation:fx-ring 1.2s ease-out infinite}

/* fx-btn-7 · Pill morph */
:is(.btn.fx-btn-7,.fx-btn-7 .wp-block-button__link){position:relative;transition:border-radius .4s var(--ease),transform .4s var(--ease),box-shadow .3s,background .2s}
:is(.btn.fx-btn-7,.fx-btn-7 .wp-block-button__link):is(:hover,:focus-visible){border-radius:999px;transform:translateY(-2px);box-shadow:0 10px 20px -10px rgba(var(--fx-c),.55)}

/* fx-btn-8 · Offset shadow (press) */
:is(.btn.fx-btn-8,.fx-btn-8 .wp-block-button__link){position:relative;transition:transform .2s var(--ease),box-shadow .2s var(--ease),background .2s}
:is(.btn.fx-btn-8,.fx-btn-8 .wp-block-button__link):is(:hover,:focus-visible){transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--gold)}
:is(.btn.fx-btn-8,.fx-btn-8 .wp-block-button__link):active{transform:translate(0,0);box-shadow:0 0 0 var(--gold)}

/* fx-btn-9 · Gold burst */
:is(.btn.fx-btn-9,.fx-btn-9 .wp-block-button__link){position:relative;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s,background .3s}
:is(.btn.fx-btn-9,.fx-btn-9 .wp-block-button__link)::before{content:"";position:absolute;left:50%;top:50%;width:150%;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--gold);z-index:-1;transform:scale(0);transition:transform .55s var(--ease)}
:is(.btn.fx-btn-9,.fx-btn-9 .wp-block-button__link):is(:hover,:focus-visible)::before{transform:scale(1)}
:is(.btn.fx-btn-9,.fx-btn-9 .wp-block-button__link):is(:hover,:focus-visible){color:#1c1c1a!important;border-color:var(--gold)!important}

/* fx-btn-10 · Frame expand */
:is(.btn.fx-btn-10,.fx-btn-10 .wp-block-button__link){position:relative;transition:background .2s}
:is(.btn.fx-btn-10,.fx-btn-10 .wp-block-button__link)::before{content:"";position:absolute;inset:-7px;border:2px solid rgba(var(--fx-c),.85);border-radius:inherit;opacity:0;transform:scale(.9);transition:opacity .3s,transform .4s var(--ease);pointer-events:none}
:is(.btn.fx-btn-10,.fx-btn-10 .wp-block-button__link):is(:hover,:focus-visible)::before{opacity:1;transform:scale(1)}

/* ======================================================================
   CARDS  —  class fx-card-N   (Add to a card (Group with class "card" or "story"))
   ====================================================================== */

/* fx-card-1 · Lift & shadow */
.fx-card-1{transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.fx-card-1:is(:hover,:focus-within){transform:translateY(-8px);box-shadow:0 24px 40px -16px rgba(12,58,43,.3)}

/* fx-card-2 · Bottom bar grows */
.fx-card-2{position:relative;transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.fx-card-2::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--crimson);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:3;pointer-events:none}
.fx-card-2:is(:hover,:focus-within)::after{transform:scaleX(1)}
.fx-card-2:is(:hover,:focus-within){transform:translateY(-4px);box-shadow:0 16px 28px -16px rgba(0,0,0,.25)}

/* fx-card-3 · 3D tilt (follows cursor) */
.fx-card-3{transition:transform .25s ease-out,box-shadow .4s;transform-style:preserve-3d}
.fx-card-3:is(:hover,:focus-within){transform:perspective(900px) rotateX(var(--tilt-y,2deg)) rotateY(var(--tilt-x,-3deg)) translateY(-6px);box-shadow:0 26px 40px -18px rgba(0,0,0,.35)}

/* fx-card-4 · Gold frame */
.fx-card-4{position:relative;transition:transform .4s var(--ease)}
.fx-card-4::after{content:"";position:absolute;inset:0;border:3px solid var(--gold);opacity:0;transform:scale(1.05);transition:opacity .35s,transform .5s var(--ease);z-index:3;pointer-events:none}
.fx-card-4:is(:hover,:focus-within)::after{opacity:1;transform:scale(1)}
.fx-card-4:is(:hover,:focus-within){transform:translateY(-3px)}

/* fx-card-5 · Colour flood (green) */
.fx-card-5{transition:background .45s var(--ease),transform .4s var(--ease),box-shadow .4s}
.fx-card-5 :is(h2,h3,h4,p,a,.label){transition:color .4s}
.fx-card-5:is(:hover,:focus-within){background:var(--green);transform:translateY(-5px);box-shadow:0 20px 34px -16px rgba(12,58,43,.5)}
.fx-card-5:is(:hover,:focus-within) :is(h2,h3,h4){color:#fff}
.fx-card-5:is(:hover,:focus-within) :is(p,.label){color:#dbe8e0}
.fx-card-5:is(:hover,:focus-within) a{color:var(--gold)}

/* fx-card-6 · Polaroid tilt */
.fx-card-6{transition:transform .5s var(--spring),box-shadow .4s}
.fx-card-6:is(:hover,:focus-within){transform:rotate(-1.8deg) scale(1.04);box-shadow:0 22px 38px -14px rgba(0,0,0,.32);z-index:2}
.fx-card-6:nth-child(even):is(:hover,:focus-within){transform:rotate(1.8deg) scale(1.04)}

/* fx-card-7 · Cursor spotlight */
.fx-card-7{position:relative;transition:transform .4s var(--ease),box-shadow .4s}
.fx-card-7::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(300px circle at var(--mx,50%) var(--my,35%),rgba(232,169,59,.32),transparent 68%)}
.fx-card-7:is(:hover,:focus-within)::before{opacity:1}
.fx-card-7:is(:hover,:focus-within){transform:translateY(-4px);box-shadow:0 18px 30px -16px rgba(0,0,0,.28)}

/* fx-card-8 · Stacked layers */
.fx-card-8{transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.fx-card-8:is(:hover,:focus-within){transform:translate(-5px,-5px);box-shadow:5px 5px 0 var(--gold),10px 10px 0 var(--green)}

/* fx-card-9 · Focus (dims the others) */
.fx-card-9{transition:transform .45s var(--ease),opacity .45s,filter .45s,box-shadow .45s}
.fx-card-9:is(:hover,:focus-within){transform:translateY(-6px) scale(1.03);box-shadow:0 24px 40px -16px rgba(0,0,0,.3);z-index:2}
@media (hover:hover){:hover>.fx-card-9:not(:hover):not(:focus-within){opacity:.5;filter:saturate(.4);transform:scale(.97)}}

/* fx-card-10 · Gold glow */
.fx-card-10{transition:transform .4s var(--ease),box-shadow .4s}
.fx-card-10:is(:hover,:focus-within){transform:translateY(-4px);box-shadow:0 0 0 2px var(--gold),0 0 30px 4px rgba(232,169,59,.5)}

/* ======================================================================
   PHOTOS  —  class fx-photo-N   (Add to an Image block with class "photo")
   ====================================================================== */

/* fx-photo-1 · Zoom in */
.fx-photo-1 img{transition:transform .9s var(--ease)}
:is(.fx-photo-1:hover,.card:hover .fx-photo-1,.story:hover .fx-photo-1) img{transform:scale(1.09)}

/* fx-photo-2 · Zoom out (settle) */
.fx-photo-2 img{transform:scale(1.14);transition:transform 1.1s var(--ease)}
:is(.fx-photo-2:hover,.card:hover .fx-photo-2,.story:hover .fx-photo-2) img{transform:scale(1)}

/* fx-photo-3 · Slow drift */
.fx-photo-3 img{transition:transform 1.4s var(--ease)}
:is(.fx-photo-3:hover,.card:hover .fx-photo-3,.story:hover .fx-photo-3) img{transform:scale(1.16) translate(-2.5%,-1.5%);transition-duration:7s;transition-timing-function:cubic-bezier(.25,.5,.3,1)}

/* fx-photo-4 · Rotate & zoom */
.fx-photo-4 img{transition:transform 1s var(--ease)}
:is(.fx-photo-4:hover,.card:hover .fx-photo-4,.story:hover .fx-photo-4) img{transform:scale(1.15) rotate(2.5deg)}

/* fx-photo-5 · Greyscale to colour */
@media (hover:hover){
.fx-photo-5 img{filter:grayscale(1);transition:filter .7s,transform .9s var(--ease)}
:is(.fx-photo-5:hover,.card:hover .fx-photo-5,.story:hover .fx-photo-5) img{filter:grayscale(0);transform:scale(1.05)}
}

/* fx-photo-6 · Green fade-up */
.fx-photo-6::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(12,58,43,.9) 0%,rgba(12,58,43,.28) 55%,transparent 100%);opacity:0;transition:opacity .5s}
.fx-photo-6 img{transition:transform .9s var(--ease)}
:is(.fx-photo-6:hover,.card:hover .fx-photo-6,.story:hover .fx-photo-6)::after{opacity:1}
:is(.fx-photo-6:hover,.card:hover .fx-photo-6,.story:hover .fx-photo-6) img{transform:scale(1.06)}

/* fx-photo-7 · Vivid pop */
.fx-photo-7 img{transition:filter .6s,transform .9s var(--ease)}
:is(.fx-photo-7:hover,.card:hover .fx-photo-7,.story:hover .fx-photo-7) img{filter:saturate(1.5) contrast(1.07) brightness(1.04);transform:scale(1.05)}

/* fx-photo-8 · Inner frame */
.fx-photo-8::after{content:"";position:absolute;inset:14px;border:2px solid rgba(255,255,255,.92);box-shadow:0 0 0 999px rgba(12,58,43,.28);z-index:1;pointer-events:none;opacity:0;transform:scale(1.1);transition:opacity .45s,transform .65s var(--ease)}
.fx-photo-8 img{transition:transform .9s var(--ease)}
:is(.fx-photo-8:hover,.card:hover .fx-photo-8,.story:hover .fx-photo-8)::after{opacity:1;transform:none}
:is(.fx-photo-8:hover,.card:hover .fx-photo-8,.story:hover .fx-photo-8) img{transform:scale(1.06)}

/* fx-photo-9 · Round & lift */
.fx-photo-9{transition:border-radius .55s var(--ease),transform .55s var(--ease),box-shadow .55s}
.fx-photo-9 img{transition:transform .9s var(--ease)}
:is(.fx-photo-9:hover,.card:hover .fx-photo-9,.story:hover .fx-photo-9){border-radius:20px;transform:translateY(-6px);box-shadow:0 26px 44px -18px rgba(0,0,0,.45)}
:is(.fx-photo-9:hover,.card:hover .fx-photo-9,.story:hover .fx-photo-9) img{transform:scale(1.06)}

/* fx-photo-10 · Shine sweep */
.fx-photo-10::after{content:"";position:absolute;top:0;left:-75%;width:42%;height:100%;z-index:1;pointer-events:none;background:linear-gradient(105deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg)}
.fx-photo-10 img{transition:transform .9s var(--ease)}
:is(.fx-photo-10:hover,.card:hover .fx-photo-10,.story:hover .fx-photo-10)::after{animation:fx-shine .95s ease}
:is(.fx-photo-10:hover,.card:hover .fx-photo-10,.story:hover .fx-photo-10) img{transform:scale(1.04)}

/* ======================================================================
   MENU LINKS  —  class fx-nav-N   (Set under Customize → Effects & animation)
   ====================================================================== */

/* fx-nav-1 · Underline slides in */
.fx-nav-1>ul>li>a{position:relative}
.fx-nav-1>ul>li>a::before{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
:is(.fx-nav-1>ul>li:hover>a,.fx-nav-1>ul>li>a:focus-visible)::before{transform:scaleX(1)}

/* fx-nav-2 · Underline from centre */
.fx-nav-2>ul>li>a{position:relative}
.fx-nav-2>ul>li>a::before{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:center;transition:transform .35s var(--ease)}
:is(.fx-nav-2>ul>li:hover>a,.fx-nav-2>ul>li>a:focus-visible)::before{transform:scaleX(1)}

/* fx-nav-3 · Underline slides through */
.fx-nav-3>ul>li>a{position:relative}
.fx-nav-3>ul>li>a::before{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
:is(.fx-nav-3>ul>li:hover>a,.fx-nav-3>ul>li>a:focus-visible)::before{transform:scaleX(1);transform-origin:left}

/* fx-nav-4 · Fill block rises */
.fx-nav-4>ul>li>a{position:relative;isolation:isolate;transition:color .3s}
.fx-nav-4>ul>li>a::before{content:"";position:absolute;inset:-7px -13px;background:var(--crimson);border-radius:3px;z-index:-1;transform:scaleY(0);transform-origin:bottom;transition:transform .35s var(--ease)}
:is(.fx-nav-4>ul>li:hover>a,.fx-nav-4>ul>li>a:focus-visible)::before{transform:scaleY(1)}
:is(.fx-nav-4>ul>li:hover>a,.fx-nav-4>ul>li>a:focus-visible){color:#fff!important}

/* fx-nav-5 · Soft pill */
.fx-nav-5>ul>li>a{position:relative;isolation:isolate}
.fx-nav-5>ul>li>a::before{content:"";position:absolute;inset:-8px -15px;border-radius:999px;background:rgba(158,27,50,.1);z-index:-1;opacity:0;transform:scale(.7);transition:opacity .3s,transform .4s var(--spring)}
:is(.fx-nav-5>ul>li:hover>a,.fx-nav-5>ul>li>a:focus-visible)::before{opacity:1;transform:scale(1)}
.site-header.is-transparent:not(.scrolled) .fx-nav-5>ul>li>a::before{background:rgba(255,255,255,.2)}

/* fx-nav-6 · Dot indicator */
.fx-nav-6>ul>li>a{position:relative}
.fx-nav-6>ul>li>a::before{content:"";position:absolute;left:50%;bottom:-11px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:currentColor;transform:scale(0);transition:transform .35s var(--spring)}
:is(.fx-nav-6>ul>li:hover>a,.fx-nav-6>ul>li>a:focus-visible)::before{transform:scale(1)}

/* fx-nav-7 · Bounce up */
.fx-nav-7>ul>li>a{display:inline-block;transition:transform .35s var(--spring)}
:is(.fx-nav-7>ul>li:hover>a,.fx-nav-7>ul>li>a:focus-visible){transform:translateY(-3px)}

/* fx-nav-8 · Gold highlighter */
.fx-nav-8>ul>li>a{position:relative;isolation:isolate}
.fx-nav-8>ul>li>a::before{content:"";position:absolute;left:-5px;right:-5px;bottom:0;height:.65em;background:rgba(232,169,59,.6);border-radius:2px;z-index:-1;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
:is(.fx-nav-8>ul>li:hover>a,.fx-nav-8>ul>li>a:focus-visible)::before{transform:scaleX(1)}

/* fx-nav-9 · Spotlight (dims the others) */
.fx-nav-9>ul>li>a{display:inline-block;transition:opacity .3s,transform .35s var(--spring)}
.fx-nav-9>ul:hover>li:not(:hover)>a{opacity:.38}
:is(.fx-nav-9>ul>li:hover>a,.fx-nav-9>ul>li>a:focus-visible){transform:scale(1.07)}

/* fx-nav-10 · Wavy underline */
.fx-nav-10>ul>li>a{text-decoration:underline wavy transparent;text-decoration-thickness:1.5px;text-underline-offset:8px;transition:text-decoration-color .3s}
:is(.fx-nav-10>ul>li:hover>a,.fx-nav-10>ul>li>a:focus-visible){text-decoration-color:var(--gold)}

@media (prefers-reduced-motion:reduce){
  [class*="fx-btn-"] *,[class*="fx-btn-"],[class*="fx-card-"],[class*="fx-photo-"] *,[class*="fx-photo-"]{animation:none!important}
}