/* =========================================================
   home.css: styles used ONLY on the homepage
   centered-logo navbar, scroll-driven hero, ribbons, about wrapper
   ========================================================= */

/* ---------- Navbar: logo dead center (homepage only) ---------- */
.home .bar{min-height:76px}
.home .nav .brand{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2}
.home .nav .brand img{height:72px;margin:0}
@media (min-width:901px){
  .home .links{flex:1}
  .home .links a:nth-child(4){margin-left:auto}   /* Home, About, Team | logo | Programs, Contact */
}
@media (max-width:900px){
  .home .menu-btn{margin-left:auto}
}

/* ---------- Scroll scene: navbar hidden until the logo lands ---------- */
.scene .nav{position:fixed;left:0;right:0;top:env(safe-area-inset-top,0px);animation:none;opacity:var(--no,0);visibility:hidden}
.scene .nav.on{visibility:visible}
.scene:not(.landed) .nav .brand img{opacity:0}

/* big logo that flies into the navbar (position is set from home.js) */
.fl{display:none}
.scene .fl{display:block;position:fixed;left:0;top:0;z-index:60;width:min(86vw,clamp(340px,34vw,600px));transform-origin:0 0;
  transform:translate(calc(50vw - 50%),calc(50vh - 50%));opacity:0;pointer-events:none;will-change:transform}
.fl img{display:block;width:100%;height:auto;pointer-events:auto;-webkit-user-select:none;user-select:none;-webkit-user-drag:none;
  transition:rotate .5s cubic-bezier(.34,1.56,.64,1),scale .5s cubic-bezier(.34,1.56,.64,1)}
.fl img:hover{rotate:-3deg;scale:1.06}
.scene .fl.rdy{opacity:1}
.scene.landed .fl{visibility:hidden}

/* ---------- Hero ---------- */
/* Default = static layout (reduced motion / no JS). .scene = pinned, scroll-driven. */
.hero{position:relative;background:#F3F7FF}   /* same color as the stage bottom, so no seam can ever show */
.scene .hero{height:410vh;height:410svh}   /* keep in step with LEN in home.js */
.stage{--lp:1;--tp:1;--pp:.55;position:relative;height:max(100vh,620px);height:max(100svh,620px);overflow:hidden;container-type:size;background:linear-gradient(var(--sky) 55%,#F3F7FF)}
.scene .stage{--lp:0;--tp:0;--pp:0;position:sticky;top:0;height:100vh;height:100svh}

.cv{position:relative;width:min(100% - 40px,1240px);height:100%;margin-inline:auto;container-type:inline-size}

/* headline block, centered and pinned */
.intro{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;pointer-events:none}
.scene .intro{padding-top:92px}   /* centers the text in the space under the fixed navbar */
.intro h1{font:700 min(16.5cqw,10.5cqh)/.98 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.025em;text-shadow:0 0 .4em rgba(238,244,255,.9)}
.ln{display:block;white-space:nowrap;position:relative;left:var(--x)}
.m{display:inline-block;overflow:hidden;padding:.06em .06em .12em;margin:-.06em -.06em -.12em}
.m>span{display:block;transform:translateY(calc((1 - clamp(0,calc(var(--tp)*1.6 - var(--i)*.2),1))*115%))}
.lead{--o:clamp(0,calc((var(--tp) - .55)*2.4),1);opacity:var(--o);translate:0 calc((1 - var(--o))*22px);margin:min(3cqh,22px) auto 0;max-width:30rem;
  font-size:clamp(1.1rem,1.6vw,1.25rem);line-height:1.55;color:var(--muted);text-shadow:0 0 14px rgba(238,244,255,.95)}
.intro .btn{--o:clamp(0,calc((var(--tp) - .7)*3.4),1);opacity:var(--o);translate:0 calc((1 - var(--o))*22px);pointer-events:auto}
.boff .btn{visibility:hidden}

/* anything that rises past the pinned text: photos, stickers, sparkles.
   --a / --b = start and end of its journey (0 to 1 across the photo scroll) */
.fy{--q:clamp(0,calc((var(--pp) - var(--a))/(var(--b) - var(--a))),1);position:absolute;left:var(--X,0);top:0;z-index:4;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  translate:0 calc(100cqh - var(--q)*(100cqh + var(--H,14cqw) + 24px))}
.ph{--X:var(--x);--W:var(--w);--H:var(--h);--pad:clamp(5px,.6cqw,9px);width:var(--W);height:var(--H);padding:var(--pad);background:#fff;border-radius:var(--rad);rotate:var(--r);
  box-shadow:0 18px 34px -18px rgba(42,27,69,.5);transition:rotate .45s cubic-bezier(.34,1.56,.64,1),scale .45s cubic-bezier(.34,1.56,.64,1)}
.ph figcaption{left:1.2cqw;bottom:-.9cqw;font-size:clamp(.8rem,1.15cqw,1rem)}
.stk{--X:var(--x);width:var(--w);height:auto;filter:drop-shadow(0 8px 10px rgba(42,27,69,.16))}
.sp{--X:var(--x);width:var(--w);height:auto}
.stage .ph,.stage .stk,.stage .sp{will-change:translate}
.stk,.sp{pointer-events:none}

/* clouds always glide in from off-screen left (each has its own speed and a small start delay) */
.stage .cloud{left:0;animation:cdrift var(--t) linear var(--dl) infinite backwards}
@media (hover:none){.fy{pointer-events:none}}   /* touch: frames never catch a finger, so scrolling and taps always work */

/* "scroll" hint, fades away as soon as the logo starts moving */
.cue{display:none}
.scene .cue{position:absolute;left:50%;bottom:clamp(18px,4vh,36px);translate:-50% 0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:2px;font-weight:500;font-size:.95rem;color:var(--muted);
  opacity:clamp(0,calc(1 - var(--lp)*6),1);pointer-events:none}
.cue svg{width:26px;height:26px;fill:none;stroke:var(--pink);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;animation:bob 1.6s ease-in-out infinite}

/* ---------- Ribbons ---------- */
.ribs{position:relative;overflow:hidden;background:#F3F7FF;padding:clamp(24px,4vw,48px) 0 clamp(8px,2vw,24px)}
.rib{position:relative;height:clamp(130px,16vw,180px)}
.rb{position:absolute;left:-8%;width:116%;top:50%;overflow:hidden;display:flex;align-items:center;white-space:nowrap;color:#fff}
.rb.b1{height:60px;background:var(--blue);transform:translateY(-50%) rotate(2.2deg)}
.rb.b2{height:72px;background:var(--pink);transform:translateY(-50%) rotate(-2.4deg);box-shadow:0 10px 24px -12px rgba(42,27,69,.4)}
.tk{display:flex;flex:none;animation:tick 30s linear infinite}
.b1 .tk{animation-direction:reverse;animation-duration:40s}
.grp{display:flex;flex:none;align-items:center}
.grp span{padding:0 22px;font:700 clamp(1.4rem,2.4vw,1.8rem)/1 var(--serif);font-variation-settings:"SOFT" 100}
.grp svg{width:24px;height:24px;fill:var(--pinkt);flex:none}

/* ---------- Section wrapper for Vision / Mission / Beliefs ---------- */
.about{background:linear-gradient(#F3F7FF,#fff 260px);padding:clamp(64px,9vw,130px) 20px}

/* ---------- About Us + Why Choose Us ---------- */
.who{background:#F3F7FF;padding:clamp(64px,9vw,120px) 20px 0}
.who-in{max-width:1100px;margin:0 auto;text-align:center}
.who-hd{position:relative;max-width:46rem;margin:0 auto}
.who-hd .sp2{position:absolute;width:34px}
.who h2{font:700 clamp(2.8rem,7vw,5rem)/1 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.025em}
.who-hd p{margin-top:22px;font-size:clamp(1.1rem,1.6vw,1.25rem);line-height:1.7;color:var(--muted)}
.why-h{margin-top:clamp(52px,7vw,84px);font:700 clamp(1.7rem,3vw,2.3rem)/1.1 var(--serif);font-variation-settings:"SOFT" 100;letter-spacing:-.015em}
.why{list-style:none;padding:0;margin:clamp(30px,4vw,44px) 0 0;display:grid;grid-template-columns:1fr;gap:34px;text-align:left}
.why li{position:relative;display:flex;align-items:flex-start;gap:18px;padding:26px 26px 28px;background:#fff;border-radius:32px;rotate:var(--r);translate:0 0;
  box-shadow:0 18px 34px -20px rgba(42,27,69,.45);transition:rotate .45s cubic-bezier(.34,1.56,.64,1),translate .45s cubic-bezier(.34,1.56,.64,1),box-shadow .3s}
.why li:hover{rotate:0deg;translate:0 -6px;box-shadow:0 26px 40px -22px rgba(42,27,69,.5)}
.wb{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:color-mix(in srgb,var(--c) 14%,#fff)}
.wb svg{width:30px;height:30px;fill:none;stroke:var(--c);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.why p{font-size:1.1rem;line-height:1.55;color:var(--muted)}
.why strong{color:var(--ink);font-weight:700}
@media (min-width:901px){
  .why{grid-template-columns:repeat(3,1fr);gap:28px}
  .why li{flex-direction:column;gap:16px}
}

/* ---------- Keyframes (home only) ---------- */
@keyframes tick{to{transform:translateX(-25%)}}
@keyframes bob{50%{transform:translateY(6px)}}
@keyframes cdrift{from{transform:translateX(-110%)}to{transform:translateX(100vw)}}

/* ---------- Mobile ---------- */
.first{display:contents}
.strip{display:none}
@media (max-width:900px){
  /* no pinning on mobile: logo flight, then headline, then a looping photo strip, all in normal scrolling */
  .scene .hero{height:auto}
  .scene .stage,.stage{position:relative;top:auto;height:auto;container-type:normal}
  .scene .first{display:block;position:relative;height:100vh;height:100svh}
  .cv{height:auto}
  .intro,.scene .intro{position:relative;inset:auto;padding:34px 0 0;pointer-events:auto}
  .fy{display:none}
  .stage .cloud{animation-duration:calc(var(--t)*.55)}   /* shorter trip on a narrow screen, so the first cloud shows up sooner */

  .strip{display:block;overflow:hidden;margin-top:34px;padding:22px 0 56px;touch-action:pan-y;cursor:grab;
    -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
  .track{display:flex;align-items:center;width:max-content;will-change:transform}
  .sf{--pad:6px;position:relative;flex:none;width:min(60vw,260px);height:auto;aspect-ratio:var(--ar);margin-right:16px}
  .sf figcaption{left:14px;bottom:-10px;font-size:.85rem}
}
@media (max-width:900px) and (prefers-reduced-motion:reduce){
  .strip{overflow-x:auto;touch-action:auto}
}
/* ---------- Desktop ---------- */
@media (min-width:901px){
  .intro h1{font-size:min(9.4cqw,12cqh)}
}