/* ============================================================================
   YES — Motion & micro-interaction layer  (template-enhance.css)
   Loaded AFTER template-custom.css. Uses ONLY the existing brand colours/vars
   (no new colours). Everything degrades gracefully:
     • reveal-hiding only applies under html.yes-anim (added by JS) — no JS, nothing hides
     • prefers-reduced-motion fully neutralises motion
   ========================================================================== */

/* ---- reduced motion: opt out of everything ------------------------------ */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  html.yes-anim .yes-reveal{opacity:1!important;transform:none!important}
}

/* ---- keyframes ----------------------------------------------------------- */
@keyframes yes-fade-up{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
@keyframes yes-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-13px)}}
@keyframes yes-float-rot1{0%,100%{transform:translateY(0) rotate(-6deg)}50%{transform:translateY(-16px) rotate(-1deg)}}
@keyframes yes-float-rot2{0%,100%{transform:translateY(0) rotate(16deg)}50%{transform:translateY(-13px) rotate(9deg)}}
@keyframes yes-pulse-soft{0%,100%{transform:scale(1);opacity:.45}50%{transform:scale(1.1);opacity:.7}}
@keyframes yes-shine{0%{transform:translateX(-130%)}60%,100%{transform:translateX(230%)}}
@keyframes yes-gradient-pan{to{background-position:200% 50%}}
@keyframes yes-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* ============================================================================
   1. SCROLL REVEAL  (JS adds .yes-reveal + .yes-in; staggers via --i)
   ========================================================================== */
html.yes-anim .yes-reveal{
  opacity:0;transform:translateY(30px);
  transition:opacity .58s cubic-bezier(.22,.7,.25,1),transform .58s cubic-bezier(.22,.7,.25,1);
  transition-delay:calc(var(--i,0) * 50ms);will-change:opacity,transform}
html.yes-anim .yes-reveal.yes-reveal--left{transform:translateX(-40px)}
html.yes-anim .yes-reveal.yes-reveal--right{transform:translateX(40px)}
html.yes-anim .yes-reveal.yes-reveal--scale{transform:scale(.9)}
html.yes-anim .yes-reveal.yes-reveal--pop{transform:translateY(12px) scale(.82);transition-delay:calc(var(--i,0) * 40ms)}
html.yes-anim .yes-reveal.yes-in{opacity:1;transform:none}

/* ============================================================================
   2. HERO — entrance + floating life
   ========================================================================== */
.yes-hero__content > *{animation:yes-fade-up .85s both}
.yes-hero__title{animation-delay:.05s}
.yes-hero__sub{animation-delay:.20s}
.yes-hero__btn{animation-delay:.34s}
.yes-hero__butterflies{animation-delay:.48s}
.yes-hero__figure{animation:yes-fade-up 1s both .22s}
.yes-hero__person{transition:transform .5s var(--yes-ease)}
.yes-hero__figure:hover .yes-hero__person{transform:translateY(-6px)}
/* butterflies gently flutter */
.yes-hero__butterfly--1{animation:yes-float-rot1 6s ease-in-out infinite!important}
.yes-hero__butterfly--2{animation:yes-float-rot2 7.2s ease-in-out infinite .7s!important}
/* primary hero CTA sheen */
.yes-hero__btn{position:relative;overflow:hidden;isolation:isolate}
.yes-hero__btn::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 25%,rgba(255,255,255,.4),transparent 75%);
  transform:translateX(-130%)}
.yes-hero__btn:hover::after{animation:yes-shine 1s ease}

/* ============================================================================
   3. BUTTONS — sheen sweep + arrow nudge
   ========================================================================== */
.yes-btn{position:relative;overflow:hidden;isolation:isolate}
.yes-btn::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,transparent 22%,rgba(255,255,255,.34),transparent 78%);
  transform:translateX(-130%)}
.yes-btn:hover::after{animation:yes-shine .95s ease}
.yes-btn svg{transition:transform var(--yes-ease)}
.yes-btn:hover svg{transform:translateX(4px)}

/* ============================================================================
   4. SECTION HEADS — animated eyebrow + title underline grow
   ========================================================================== */
.yes-eyebrow::before,.yes-eyebrow::after{transition:width var(--yes-ease)}
.yes-head:hover .yes-eyebrow::before,.yes-head:hover .yes-eyebrow::after{width:34px}
.yes-title{position:relative}
.yes-head .yes-title::after{content:"";display:block;width:0;height:4px;margin:18px auto 0;border-radius:4px;
  background:var(--yes-grad-warm);transition:width .7s cubic-bezier(.22,.7,.25,1) .2s}
html.yes-anim .yes-head.yes-in .yes-title::after{width:64px}
html:not(.yes-anim) .yes-head .yes-title::after{width:64px}

/* ============================================================================
   5. CARDS — premium lift, image zoom (kept), diagonal sheen
   ========================================================================== */
.yes-card{will-change:transform}
.yes-card:hover{transform:translateY(-10px)}
.yes-card__media::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,transparent 42%,rgba(255,255,255,.28) 50%,transparent 58%);
  transform:translateX(-100%);transition:transform .85s var(--yes-ease)}
.yes-card:hover .yes-card__media::after{transform:translateX(100%)}
.yes-card__link span{display:inline-block}

/* ============================================================================
   6. FEATURE TILES — springy icon
   ========================================================================== */
.yes-feature__icon{transition:transform .45s cubic-bezier(.34,1.56,.64,1),background var(--yes-ease),color var(--yes-ease)}
.yes-feature:hover .yes-feature__icon{transform:translateY(-5px) rotate(-8deg) scale(1.1);background:var(--yes-grad-warm);color:#fff}

/* ============================================================================
   7. STATS — living gradient numbers
   ========================================================================== */
.yes-stat__num{background:var(--yes-grad);background-size:220% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:yes-gradient-pan 6s linear infinite alternate}

/* ============================================================================
   8. INFO CARDS (contact) — icon bob on hover
   ========================================================================== */
.yes-info:hover .yes-info__ic{animation:yes-bob 1.2s ease infinite}

/* ============================================================================
   9. GALLERY — zoom cue
   ========================================================================== */
.yes-gallery a::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:radial-gradient(circle at center,rgba(255,255,255,.18),transparent 60%);
  opacity:0;transition:opacity var(--yes-ease)}
.yes-gallery a:hover::before{opacity:1}

/* ============================================================================
   10. BANNER + CTA — slowly drifting brand gradient (same brand hues)
   ========================================================================== */
.yes-banner,.yes-cta{
  background-image:linear-gradient(120deg,var(--yes-indigo),var(--yes-blue),var(--yes-blue-d),var(--yes-blue));
  background-size:280% 280%;animation:yes-gradient-pan 14s ease-in-out infinite alternate}
.yes-banner__title{animation:yes-fade-up .85s both .1s}
.yes-breadcrumb{animation:yes-fade-up .85s both .26s}
.yes-banner::before{animation:yes-pulse-soft 9s ease-in-out infinite}
.yes-banner::after{animation:yes-pulse-soft 11s ease-in-out infinite 1s}
.yes-cta::after{animation:yes-pulse-soft 9s ease-in-out infinite}

/* ============================================================================
   11. HEADER — shadow deepens once you scroll; logo + cart life
   ========================================================================== */
.header7_cont.is-scrolled{box-shadow:0 12px 30px rgba(22,24,43,.13)}
#header7 .logo img{transition:transform var(--yes-ease)}
#header7 .logo:hover img{transform:scale(1.05)}
#header7 .cart{transition:transform var(--yes-ease)}
#header7 .cart:hover{transform:translateY(-2px)}

/* ============================================================================
   12. HOME (Elementor) — icon-box + carousel micro-interactions
   ========================================================================== */
.elementor-icon-box-icon,.elementor-icon-box-icon .elementor-icon{transition:transform .45s cubic-bezier(.34,1.56,.64,1)}
.elementor-widget-icon-box:hover .elementor-icon-box-icon{transform:translateY(-6px) scale(1.07)}
.elementor-image-carousel .swiper-slide img{transition:transform .5s var(--yes-ease),filter var(--yes-ease)}
.elementor-image-carousel .swiper-slide:hover img{transform:scale(1.06)}
.cause-item-style2 figure{overflow:hidden;border-radius:12px}
.cause-item-style2 figure img{transition:transform .6s var(--yes-ease)}
.cause-item-style2:hover figure img{transform:scale(1.06)}

/* ============================================================================
   13. BACK-TO-TOP button
   ========================================================================== */
.yes-totop{position:fixed;left:22px;bottom:24px;width:46px;height:46px;border-radius:50%;
  background:var(--yes-grad);color:#fff;border:none;display:grid;place-items:center;cursor:pointer;
  box-shadow:var(--yes-shadow-md);opacity:0;transform:translateY(18px) scale(.85);pointer-events:none;
  transition:opacity var(--yes-ease),transform var(--yes-ease),box-shadow var(--yes-ease);z-index:45}
.yes-totop.show{opacity:1;transform:none;pointer-events:auto}
.yes-totop:hover{transform:translateY(-4px);box-shadow:var(--yes-shadow-lg)}
.yes-totop svg{width:20px;height:20px}
@media(max-width:600px){.yes-totop{left:16px;bottom:18px;width:42px;height:42px}}

/* ============================================================================
   14. THIN SCROLL-PROGRESS bar (brand gradient, top of viewport)
   ========================================================================== */
.yes-progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:60;
  background:var(--yes-grad-warm);box-shadow:0 0 10px rgba(245,106,1,.5);transition:width .1s linear}

/* ============================================================================
   15. SMOOTH ANCHORS (reduced-motion override above resets this to auto)
   ========================================================================== */
html{scroll-behavior:smooth}

/* ============================================================================
   16. PAGE-BANNER BUTTERFLY — one slow, low-key brand accent (JS-injected)
   ========================================================================== */
.yes-banner{position:relative;overflow:hidden}
.yes-banner__inner{position:relative;z-index:2}
.yes-banner__fly{position:absolute;top:26%;left:11%;z-index:1;width:32px;height:32px;
  color:var(--yes-yellow);opacity:.55;pointer-events:none;animation:yes-drift 18s ease-in-out infinite}
.yes-banner__fly svg{width:100%;height:100%;display:block;animation:yes-flap .65s ease-in-out infinite alternate}
@keyframes yes-flap{from{transform:scaleX(1)}to{transform:scaleX(.6)}}
@keyframes yes-drift{
  0%,100%{transform:translate(0,0) rotate(8deg)}
  22%{transform:translate(9vw,-22px) rotate(-7deg)}
  48%{transform:translate(19vw,14px) rotate(10deg)}
  74%{transform:translate(8vw,34px) rotate(-5deg)}}
@media(max-width:700px){.yes-banner__fly{width:24px;height:24px;top:18%}}

/* ============================================================================
   17. BADGES & SHIELD — gentle float (brand life on intro images)
   ========================================================================== */
.yesu-badge,.yesp-badge,.yesf-badge{animation:yes-float 5.5s ease-in-out infinite}
.yesz-shield{animation:yes-float-rot1 6.5s ease-in-out infinite}

/* ============================================================================
   18. NUMBERED STEP CIRCLES — pop in after their card reveals
   ========================================================================== */
@keyframes yes-pop-in{0%{transform:scale(0) rotate(-18deg)}70%{transform:scale(1.14) rotate(3deg)}100%{transform:scale(1) rotate(0)}}
html.yes-anim .yesu-step.yes-in::before,
html.yes-anim .yesf-step.yes-in::before,
html.yes-anim .yesp-step.yes-in::before{
  animation:yes-pop-in .5s cubic-bezier(.34,1.56,.64,1) both;
  animation-delay:calc(var(--i,0) * 50ms + .22s)}

/* ============================================================================
   19. FEATURE ICONS — spring pop the moment their tile reveals
   ========================================================================== */
@keyframes yes-icon-pop{0%{transform:scale(.4)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
html.yes-anim .yes-feature.yes-in .yes-feature__icon{
  animation:yes-icon-pop .55s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay:calc(var(--i,0) * 50ms + .18s)}

/* ============================================================================
   20. INTRO IMAGE WRAPS — living hover (transform-only, no layout shift)
   ========================================================================== */
.yesf-imgwrap img,.yesp-imgwrap img,.yesz-imgwrap img,.yesu-imgwrap img{transition:transform .5s var(--yes-ease)}
.yesf-imgwrap:hover img,.yesp-imgwrap:hover img,.yesz-imgwrap:hover img,.yesu-imgwrap:hover img{transform:scale(1.03)}

/* ============================================================================
   21a. MARQUEE RIBBON — Engage · Empower · Elevate · Evolve
   ========================================================================== */
.yes-marquee{position:relative;z-index:3;overflow:hidden;background:var(--yes-grad);
  padding:15px 0;transform:rotate(-1.1deg) scale(1.02);box-shadow:var(--yes-shadow-md)}
.yes-marquee__track{display:flex;align-items:center;gap:52px;width:max-content;
  animation:yes-marquee 26s linear infinite}
.yes-marquee span{font-family:"Quicksand",sans-serif;font-weight:700;
  font-size:clamp(14px,1.6vw,18px);letter-spacing:.24em;text-transform:uppercase;
  color:#fff;white-space:nowrap}
.yes-marquee span:nth-of-type(4n+2){color:var(--yes-yellow)}
.yes-marquee svg{width:15px;height:15px;color:var(--yes-yellow);opacity:.85;flex:none}
@keyframes yes-marquee{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.yes-marquee{transform:none}}

/* ============================================================================
   21b. BANNER PARALLAX — content drifts slower than the page (depth cue).
   Driven by --yes-par (0→1 over the first viewport) set in template-init.js.
   ========================================================================== */
.yes-banner__inner{transform:translateY(calc(var(--yes-par,0) * 34px))}

/* ============================================================================
   21. FOOTER — micro-interactions
   ========================================================================== */
footer .cont_list li,.widget_lifeline-blog-post li{transition:transform .25s var(--yes-ease)}
footer .cont_list li:hover,.widget_lifeline-blog-post li:hover{transform:translateX(4px)}
footer .flickr_gallery li{overflow:hidden}
footer .flickr_gallery li img{transition:transform .45s var(--yes-ease)}
footer .flickr_gallery li:hover img{transform:scale(1.08)}