/*
  OneLife Africa — animations & video
  Controlled from  Appearance → Customize → Effects & animation.

  PER-BLOCK CLASSES (Advanced → Additional CSS class(es))
    Scroll reveal : rv-up  rv-fade  rv-left  rv-right  rv-alt  rv-zoom  rv-blur  rv-flip   (rv-none = don't animate)
    Counters      : count-up   (any paragraph whose text is a number, e.g. 1,200+)
    Parallax      : ol-parallax   (on an Image block with class "photo")
    Video popup   : video-pop     (on a Button / Image link whose URL is a YouTube, Vimeo or .mp4 link)
*/

/* =====================================================================
   1. SCROLL REVEAL   (JS adds .rv + a type class; hidden state only exists when JS runs)
   ===================================================================== */
body{--rv-t:.7s}
body.rv-sp-fast{--rv-t:.45s}
body.rv-sp-slow{--rv-t:1.1s}

html.ol-js body{overflow-x:clip}

html.ol-js .rv{
  opacity:0;
  transition:
    opacity var(--rv-t) ease var(--rv-d,0s),
    transform calc(var(--rv-t) * 1.15) cubic-bezier(.2,.7,.2,1) var(--rv-d,0s),
    filter var(--rv-t) ease var(--rv-d,0s);
}
html.ol-js .rv.rv-up   {transform:translateY(34px)}
html.ol-js .rv.rv-left {transform:translateX(-52px)}
html.ol-js .rv.rv-right{transform:translateX(52px)}
html.ol-js .rv.rv-zoom {transform:scale(.88)}
html.ol-js .rv.rv-blur {filter:blur(12px);transform:translateY(14px)}
html.ol-js .rv.rv-flip {transform:perspective(900px) rotateX(18deg) translateY(30px);transform-origin:50% 100%}
html.ol-js body .rv.is-in{opacity:1;transform:none;filter:none}

/* =====================================================================
   2. HERO ENTRANCE   (pure CSS, runs on page load)
   ===================================================================== */
@keyframes ol-rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes ol-fadein{from{opacity:0}to{opacity:1}}

body.an-hero .hero-inner>*{animation:ol-rise .95s var(--ease) both}
body.an-hero .hero-inner>:nth-child(1){animation-delay:.10s}
body.an-hero .hero-inner>:nth-child(2){animation-delay:.30s}
body.an-hero .hero-inner>:nth-child(3){animation-delay:.50s}
body.an-hero .hero-inner>:nth-child(4){animation-delay:.70s}
body.an-hero .page-hero .wrap>*{animation:ol-rise .85s var(--ease) both}
body.an-hero .page-hero .wrap>:nth-child(2){animation-delay:.18s}
body.an-hero .hero-video .hero-bg video{animation:ol-fadein 1.4s ease both}

/* =====================================================================
   3. SCROLL PROGRESS BAR
   ===================================================================== */
.ol-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:99;pointer-events:none}
.ol-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--crimson),var(--gold));transform:scaleX(0);transform-origin:left}
.admin-bar .ol-progress{top:32px}
@media (max-width:782px){.admin-bar .ol-progress{top:46px}}

/* =====================================================================
   4. HEADER SHRINKS WHEN YOU SCROLL  (logo scales down; the header's height never changes, so the page can't jump)
   ===================================================================== */
body.hdr-shrink .site-header{transition:box-shadow .35s,background .25s}
body.hdr-shrink .site-header .logo{transform-origin:left center;transition:transform .35s var(--ease)}
body.hdr-shrink .site-header.scrolled .logo{transform:scale(.82)}
body.hdr-shrink .site-header.scrolled{box-shadow:0 8px 28px -12px rgba(0,0,0,.18)}

/* =====================================================================
   5. ALWAYS-ON MICRO-ANIMATIONS
   ===================================================================== */
p.link a::after{display:inline-block;white-space:pre;transition:transform .3s var(--ease)}
p.link a:hover::after{transform:translateX(5px)}
.value svg{transition:transform .45s var(--spring)}
.value:hover svg{transform:translateY(-5px) scale(1.14) rotate(-4deg)}

/* Parallax (images move slower than the page) */
.photo.ol-parallax img{inset:auto;left:0;top:-11%;height:122%;will-change:translate}

/* =====================================================================
   6. COUNTERS  (pattern: OneLife – Impact numbers)
   ===================================================================== */
.stats-sec{background:var(--green-dk);color:#fff;padding:4rem 0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem 1rem;text-align:center}
.stat{padding:0 1rem;border-left:1px solid rgba(255,255,255,.16)}
.stat:first-child{border-left:0}
.stat-num{font:800 clamp(2.4rem,5vw,3.8rem)/1 var(--serif);color:var(--gold);margin:0;font-variant-numeric:tabular-nums}
.stat-label{font:600 .74rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#e8efe9;margin:.8rem 0 0}
@media (max-width:800px){
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(odd){border-left:0}
}

/* =====================================================================
   7. VIDEO
   ===================================================================== */

/* 7a. Inline video section (YouTube / Vimeo embed, or an uploaded file) */
.video-sec{padding:var(--sec) 0}
.video-sec .head{max-width:720px;margin:0 auto 2.2rem;text-align:center}
.video-sec .head h2{font-size:clamp(1.9rem,3vw,2.5rem);margin:0 0 .5em}
.video-sec .head p{margin:0}
.video-frame{position:relative;max-width:980px;margin-inline:auto;isolation:isolate}
.video-frame::before{content:"";position:absolute;z-index:-1;right:-14px;bottom:-14px;width:62%;height:62%;border:3px solid var(--gold)}
.video-frame>.wp-block-embed,.video-frame>.wp-block-video{margin:0;box-shadow:0 30px 60px -26px rgba(12,58,43,.55)}
.video-frame .wp-block-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain;background:#000}
.video-frame .wp-block-embed__wrapper{background:#000}
.video-frame figcaption{margin:.8rem 0 0;font-size:.85rem;text-align:center;color:var(--text)}

/* 7b. Play button (a real Button block with classes "play-btn video-pop") */
.play-wrap{position:absolute;inset:0;z-index:3;display:flex;align-items:center;justify-content:center;margin:0;pointer-events:none}
.play-btn{pointer-events:auto}
.play-btn .wp-block-button__link{position:relative;width:76px;height:76px;padding:0;border-radius:50%;background:rgba(0,0,0,.4);border:2px solid #fff;color:transparent;font-size:0;line-height:0;transition:transform .35s var(--spring),background .25s,border-color .25s}
.play-btn .wp-block-button__link::before{content:"";position:absolute;left:31px;top:23px;border-left:22px solid #fff;border-top:15px solid transparent;border-bottom:15px solid transparent}
.play-btn .wp-block-button__link::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid rgba(255,255,255,.75);animation:ol-pulse 2.2s ease-out infinite}
.play-btn .wp-block-button__link:hover,.play-btn .wp-block-button__link:focus-visible{transform:scale(1.12);background:var(--crimson);border-color:var(--crimson);color:transparent}
@keyframes ol-pulse{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.7);opacity:0}}

/* 7c. Poster with play button (opens popup) */
.vposter-sec{padding:var(--sec) 0}
.vposter{position:relative;max-width:1100px;margin-inline:auto;cursor:pointer;background:#10261d}
.vposter .photo{aspect-ratio:16/9;min-height:0}
.vposter::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(8,20,15,.78),rgba(8,20,15,.08) 58%)}
.vposter-cap{position:absolute;left:clamp(1.2rem,3vw,2.4rem);right:7rem;bottom:clamp(1rem,2.5vw,2rem);z-index:2;color:#fff}
.vposter-cap .label{font:600 .7rem var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin:0 0 .4rem}
.vposter-cap h3{color:#fff;font-size:clamp(1.3rem,2.6vw,2rem);margin:0}

/* 7d. Hero with background video */
.hero-video .hero-bg{margin:0}
.hero-video .hero-bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero-video::before{z-index:1}
.hero-video .wrap{z-index:2}
.vctl{position:absolute;right:1.25rem;bottom:1.25rem;z-index:3;width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.75);background:rgba(0,0,0,.35);color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;transition:background .2s,transform .25s var(--spring)}
.vctl:hover{background:var(--crimson);transform:scale(1.08)}
.vctl svg{width:16px;height:16px;fill:currentColor}
.vctl .i-play{display:none}
.vctl.paused .i-play{display:block}
.vctl.paused .i-pause{display:none}

/* 7e. Popup player (lightbox) */
.vmodal{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:clamp(3.2rem,6vw,4rem) clamp(1rem,4vw,3rem) clamp(1rem,4vw,3rem);background:rgba(7,17,13,.94);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s}
.vmodal.open{opacity:1;visibility:visible;transition:opacity .35s ease}
.vmodal-box{position:relative;width:min(1100px,100%,calc((100vh - 8rem) * 1.7778));aspect-ratio:16/9;background:#000;box-shadow:0 40px 90px -20px #000;transform:scale(.9) translateY(24px);transition:transform .5s var(--spring)}
.vmodal.open .vmodal-box{transform:none}
.vmodal-stage{position:absolute;inset:0}
.vmodal-stage iframe,.vmodal-stage video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
.vmodal-close{position:absolute;top:-2.9rem;right:0;display:flex;align-items:center;gap:.5rem;background:none;border:0;color:#fff;font:600 .8rem var(--sans);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;padding:.4rem .2rem}
.vmodal-close span{display:grid;place-items:center;width:34px;height:34px;border:1.5px solid rgba(255,255,255,.7);border-radius:50%;font-size:1.3rem;line-height:1;transition:background .2s,transform .3s var(--spring)}
.vmodal-close:hover span{background:var(--crimson);border-color:var(--crimson);transform:rotate(90deg)}
body.vmodal-lock{overflow:hidden}

@media print{html.ol-js .rv{opacity:1!important;transform:none!important;filter:none!important}}

/* =====================================================================
   Reduced motion: everything is shown, nothing moves
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  html.ol-js .rv{opacity:1!important;transform:none!important;filter:none!important}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;animation-delay:0s!important}
}