/* =============================================
   BUDDING SEEDS — Animations (CSS/SVG only, no libraries)
   Only transform/opacity are animated → smooth on mid-range phones.
   ============================================= */
@keyframes wordUp{to{transform:translateY(0)}}
@keyframes bob{0%,100%{transform:translateY(0) rotate(var(--r,0deg))}50%{transform:translateY(-10px) rotate(calc(var(--r,0deg) + 4deg))}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{0%,100%{transform:translateX(0)}50%{transform:translateX(-22px)}}
@keyframes marquee{to{transform:translateX(-50%)}}
@keyframes ring{0%{transform:scale(1);opacity:.7}80%,100%{transform:scale(1.5);opacity:0}}
@keyframes waBounce{0%,52%,100%{transform:translateY(0)}26%{transform:translateY(-10px)}39%{transform:translateY(-3px)}}
@keyframes starOn{to{color:#f6c94f}}
@keyframes iconPop{0%{transform:scale(1) rotate(0)}40%{transform:scale(1.22) rotate(-8deg)}70%{transform:scale(.95) rotate(5deg)}100%{transform:scale(1) rotate(0)}}
@keyframes grow{from{scale:0}to{scale:1}}
@keyframes sway{0%,100%{rotate:-2.5deg}50%{rotate:2.5deg}}
@keyframes floatPlane{0%,100%{transform:translate(0,0) rotate(-4deg)}50%{transform:translate(-16px,10px) rotate(3deg)}}
@keyframes drawIn{to{stroke-dashoffset:0}}
@keyframes leafOpen{from{transform:scale(0)}to{transform:scale(1)}}

/* ---------- Scroll reveal (only when JS is on) ---------- */
.js .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.js .reveal.in{opacity:1;transform:none}
/* image reveal: the wipe is applied to the image itself, so the observed wrapper is never clipped */
.js .reveal-img>img,.js .reveal-img>iframe,.js .reveal-img>video{clip-path:inset(0 0 100% 0);transition:clip-path .75s cubic-bezier(.65,0,.25,1)}
.js .reveal-img.in>img,.js .reveal-img.in>iframe,.js .reveal-img.in>video{clip-path:inset(0 0 -1px 0)}
.js .reveal-img>img{transform:scale(1.15);transition:clip-path .75s cubic-bezier(.65,0,.25,1),transform 1.05s cubic-bezier(.2,.7,.2,1)}
.js .reveal-img.in>img{transform:scale(1)}
.js .gal.reveal-img.in:hover>img{transform:scale(1.06);transition:transform .7s ease}
/* placeholder photo tiles + video frame: simple fade/scale since there's no image to wipe */
.js .gal.ph{opacity:0;transform:scale(.95);transition:opacity .5s ease,transform .5s cubic-bezier(.2,.7,.2,1)}
.js .gal.ph.in{opacity:1;transform:none}

/* about media holds an overflowing badge, so reveal its arch only */
.js .about-media .arch{clip-path:inset(0 0 100% 0);transition:clip-path .75s cubic-bezier(.65,0,.25,1)}
.js .about-media.in .arch{clip-path:inset(0 0 0 0)}
.js .about-media .badge-round{opacity:0;transform:scale(.5);transition:all .5s cubic-bezier(.3,1.5,.5,1) .5s}
.js .about-media.in .badge-round{opacity:1;transform:none}

/* ---------- Hero ---------- */
.h-split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.h-split .w>span{display:inline-block;transform:translateY(112%);animation:wordUp .85s cubic-bezier(.2,.7,.2,1) forwards;animation-delay:calc(var(--i)*.08s + .1s)}
.hero .reveal{animation:none}
.sun .rays{transform-origin:60px 60px;animation:spin 40s linear infinite}
.cloud{animation:drift 9s ease-in-out infinite}
.block{animation:bob 4.5s ease-in-out infinite}
.b1{--r:-8deg}
.b2{--r:8deg;animation-delay:-2s}
.tag-card.t1{animation:bob 6s ease-in-out infinite}
.tag-card.t2{animation:bob 7s ease-in-out -3s infinite}
.hero-art .arch{transform:translate3d(0,var(--py,0px),0);will-change:transform}
.hero-art .deco.block{transform:translate3d(0,calc(var(--py,0px) * -.6),0)}

/* ---------- Marquee ---------- */
.marquee-track{animation:marquee 36s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}

/* ---------- About: growing sprout ---------- */
.grow-sprout .stem{stroke-dasharray:60;stroke-dashoffset:60}
.grow-sprout .leaf{transform:scale(0)}
.grow-sprout .l1{transform-box:fill-box;transform-origin:100% 100%}
.grow-sprout .l2{transform-box:fill-box;transform-origin:0% 100%}
.about-media.in .grow-sprout .stem{animation:drawIn 1s ease 1s forwards}
.about-media.in .grow-sprout .l1{animation:leafOpen .7s cubic-bezier(.3,1.4,.5,1) 1.8s forwards}
.about-media.in .grow-sprout .l2{animation:leafOpen .7s cubic-bezier(.3,1.4,.5,1) 2s forwards}
.grow-sprout{transform-origin:50% 100%;animation:sway 6s ease-in-out 3s infinite}

/* ---------- Program cards: icon micro-interaction ---------- */
.prog:hover .prog-ic .ic{animation:iconPop .7s ease}
.prog .prog-ic{transition:transform .3s}
.prog:hover .prog-ic{transform:translateY(-3px)}
.focus-grid li:hover .ic{animation:iconPop .7s ease}
.step-n{transition:transform .3s,background .3s}
.steps li:hover .step-n{transform:scale(1.1);background:var(--coral);color:#3a1f10}

/* ---------- Why us: icons draw themselves ---------- */
/* ---------- Why Us: Fixed Icon Animations ---------- */

.draw-ic .ic {
    stroke-dasharray: 90;
    stroke-dashoffset: 0;
}

/* Animate icon drawing when section becomes visible */
.js .why-item:not(.in) .draw-ic .ic {
    stroke-dashoffset: 90;
}

.js .why-item.in .draw-ic .ic {
    animation: drawIn 1.2s ease .3s forwards;
}

/* Animate the circle instead of replacing SVG animation */
.why-item .draw-ic {
    transform-origin: center;
    transition: transform .3s ease, background-color .3s ease;
}

.why-item:hover .draw-ic {
    animation: iconPop .7s ease;
}

/* ---------- Contact / footer finishing touches ---------- */
.paper-plane{animation:floatPlane 7s ease-in-out infinite}
.fs>g{transform-box:fill-box;transform-origin:50% 100%;scale:0}
.footer.in .fs>g{animation:grow .9s cubic-bezier(.3,1.3,.5,1) forwards,sway 6s ease-in-out infinite;animation-delay:calc(var(--i)*.14s),calc(var(--i)*.14s + .9s)}

/* ---------- Respect reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;animation-delay:0s!important;transition-duration:.001ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
  .marquee-track{animation:none}
  .js .reveal,.js .about-media .arch,.js .reveal-img>img,.js .reveal-img>iframe,.js .reveal-img>video{opacity:1;transform:none;clip-path:none}
  .h-split .w>span{transform:none}
  .fs>g{scale:1}
  .grow-sprout .stem{stroke-dashoffset:0}.grow-sprout .leaf{transform:none}
  .draw-ic .ic{stroke-dashoffset:0}
}

/* ============================================
   BUDDING SEEDS — OWNER & HERO ANIMATIONS
   ============================================ */

/* ---------- New keyframes ---------- */

@keyframes ownerFadeUp {
    from {
        opacity: 0;
        transform: translateY(35px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes ownerPhotoEnter {
    from {
        opacity: 0;
        transform: translateX(-35px) scale(.97);
    }
    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes ownerPhotoFloat {
    0%, 100% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-7px) rotate(-.5deg);
    }
}

@keyframes softFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
}

@keyframes softTilt {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(2deg);
    }
}

@keyframes iconFadePop {
    from {
        opacity: 0;
        transform: scale(.75);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================
   OWNER PROFILE
   ============================================ */

/* Founder photo entrance */
.founder-feature-photo {
    animation:
        ownerPhotoEnter .9s ease both;
}

/* Float the photo very gently after entrance */
.founder-feature-photo img {
    animation: ownerPhotoFloat 7s ease-in-out infinite;
    animation-delay: 1s;
    transform-origin: center center;
}

/* Founder heading */
.founder-feature-details h2 {
    animation: ownerFadeUp .8s ease both;
    animation-delay: .15s;
}

/* Founder designation */
.founder-feature-role {
    animation: ownerFadeUp .8s ease both;
    animation-delay: .3s;
}

/* Founder introduction */
.founder-feature-description {
    animation: ownerFadeUp .8s ease both;
    animation-delay: .45s;
}

/* Founder eyebrow */
.founder-feature-eyebrow {
    animation: ownerFadeUp .7s ease both;
}

/* Qualification items */
.founder-feature-fact {
    animation: ownerFadeUp .65s ease both;
    transition: transform .3s ease;
}

.founder-feature-fact:nth-child(1) {
    animation-delay: .5s;
}

.founder-feature-fact:nth-child(2) {
    animation-delay: .6s;
}

.founder-feature-fact:nth-child(3) {
    animation-delay: .7s;
}

.founder-feature-fact:nth-child(4) {
    animation-delay: .8s;
}

/* Small hover lift */
.founder-feature-fact:hover {
    transform: translateY(-4px);
}

/* Qualification icons */
.founder-feature-icon {
    transition:
        transform .35s ease,
        background-color .35s ease;
}

.founder-feature-fact:hover .founder-feature-icon {
    transform: rotate(-7deg) scale(1.08);
}

/* ============================================
   HERO SECTION
   ============================================ */

/* Hero illustration entrance */
.hero-art {
    animation: ownerFadeUp 1s ease both;
}

/* Subtle illustration tilt */
.hero-art .arch img {
    animation: softTilt 9s ease-in-out infinite;
    transform-origin: center center;
}

/* Keep decorative motion from existing CSS */
.hero-art .sun {
    animation: softFloat 6s ease-in-out infinite;
}

.hero-art .cloud {
    animation: drift 9s ease-in-out infinite;
}

/* Hero button hover */
.hero-actions .btn {
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-color .3s ease,
        color .3s ease;
}

.hero-actions .btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px -14px rgba(34,48,43,.4);
}

/* Hero location eyebrow */
.hero-copy .eyebrow {
    transition: transform .35s ease;
}

.hero-copy .eyebrow:hover {
    transform: translateY(-3px);
}

/* Stat cards hover */
.stat-band a {
    transition:
        transform .35s ease,
        box-shadow .35s ease,
        border-color .35s ease;
}

.stat-band a:hover {
    transform: translateY(-6px);
}

/* ============================================
   MOBILE — REDUCED MOVEMENT
   ============================================ */

@media (max-width: 640px) {

    .founder-feature-photo img {
        animation-duration: 10s;
    }

    .hero-art .arch img {
        animation-duration: 12s;
    }

    .founder-feature-fact:hover {
        transform: none;
    }
}

/* ============================================
   ACCESSIBILITY — REDUCED MOTION
   Keep this override at the very end.
   ============================================ */

@media (prefers-reduced-motion: reduce) {

    .founder-feature-photo,
    .founder-feature-photo img,
    .founder-feature-details h2,
    .founder-feature-role,
    .founder-feature-description,
    .founder-feature-eyebrow,
    .founder-feature-fact,
    .hero-art,
    .hero-art .arch img,
    .hero-art .sun,
    .hero-art .cloud {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}

/* =============================================
   OWNER PROFILE & HERO — VISIBLE ANIMATIONS
   Paste at END of animation.css
   ============================================= */

/* Keyframes */
@keyframes founderEntrance {
    0% {
        opacity: 0;
        transform: translateX(-65px) scale(.94);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes founderFloating {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1.04);
    }
    50% {
        transform: translateY(-14px) rotate(1.2deg) scale(1.07);
    }
}

@keyframes founderTextEnter {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroFloatVisible {
    0%, 100% {
        transform: translateY(0) rotate(-1deg);
    }
    50% {
        transform: translateY(-18px) rotate(1deg);
    }
}

/* ---------------------------------------------
   OWNER PROFILE — runs immediately
   --------------------------------------------- */

.founder-feature-photo {
    animation: founderEntrance 1.1s ease-out both;
    overflow: hidden;
}

.founder-feature-photo img {
    animation: founderFloating 5s ease-in-out infinite;
    transform-origin: center center;
    will-change: transform;
}

/* Staggered text entrance */
.founder-feature-eyebrow {
    animation: founderTextEnter .7s ease-out .15s both;
}

.founder-feature-details h2 {
    animation: founderTextEnter .8s ease-out .3s both;
}

.founder-feature-role {
    animation: founderTextEnter .8s ease-out .45s both;
}

.founder-feature-description {
    animation: founderTextEnter .8s ease-out .6s both;
}

.founder-feature-fact {
    animation: founderTextEnter .7s ease-out both;
    transition: transform .35s ease;
}

.founder-feature-fact:nth-child(1) {
    animation-delay: .7s;
}

.founder-feature-fact:nth-child(2) {
    animation-delay: .85s;
}

.founder-feature-fact:nth-child(3) {
    animation-delay: 1s;
}

.founder-feature-fact:nth-child(4) {
    animation-delay: 1.15s;
}

.founder-feature-fact:hover {
    transform: translateY(-6px);
}

.founder-feature-icon {
    transition: transform .35s ease;
}

.founder-feature-fact:hover .founder-feature-icon {
    transform: rotate(10deg) scale(1.12);
}

/* ---------------------------------------------
   HERO SECTION — continuous motion
   --------------------------------------------- */

/* Float the complete Hero illustration
   without interfering with its parallax */
.hero-art {
    animation: heroFloatVisible 6s ease-in-out infinite;
    transform-origin: center center;
}

/* Preserve original image styling */
.hero-art .arch img {
    animation: none;
}

/* Hero buttons */
.hero-actions .btn {
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background-color .3s ease,
        color .3s ease;
}

.hero-actions .btn:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px rgba(34,48,43,.16);
}

/* Rating and location hover */
.hero .rating-chip,
.hero .eyebrow {
    transition: transform .3s ease;
}

.hero .rating-chip:hover,
.hero .eyebrow:hover {
    transform: translateY(-5px);
}

/* Mobile: smaller movement */
@media (max-width: 640px) {
    .founder-feature-photo img {
        animation-duration: 6s;
    }

    .hero-art {
        animation-duration: 8s;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .founder-feature-photo,
    .founder-feature-photo img,
    .founder-feature-eyebrow,
    .founder-feature-details h2,
    .founder-feature-role,
    .founder-feature-description,
    .founder-feature-fact,
    .hero-art {
        animation: none !important;
        transform: none !important;
        opacity: 1 !important;
    }
}