/* ============================================================================
   IN THE ZONE CHILDCARE — "SIX TO SIX" motion layer                 (2026-09-15)
   Canvas scenes live in day.js (day, grow). Here: the only playful motion in the
   set. Headings pop in a hair too big and settle; the coral phrase gets a crayon
   wave that draws on; content hops up; the growth-blocks mark builds itself.
   ========================================================================== */

.dayw{position:relative;width:100%;aspect-ratio:4/3;max-width:36rem;border-radius:28px;overflow:hidden;border:6px solid #fff;box-shadow:0 30px 60px -36px rgba(51,36,76,.7)}
.dayw canvas{position:absolute;inset:0;width:100%;height:100%}
.grow__stage{position:relative;width:100%;aspect-ratio:4/3;max-width:30rem;justify-self:center;border-radius:28px;overflow:hidden;border:1px solid var(--line-w);box-shadow:0 30px 60px -36px rgba(0,0,0,.9)}
.grow__stage canvas{position:absolute;inset:0;width:100%;height:100%}

/* 1. headings pop */
.js .pop{opacity:0}
.js .pop.in{animation:popin .7s cubic-bezier(.34,1.56,.64,1) forwards}
@keyframes popin{0%{opacity:0;transform:scale(.94) translateY(10px)}100%{opacity:1;transform:none}}

/* 2. a crayon wave draws under the accent */
.js .pop .y{position:relative;display:inline-block}
.js .pop .y::after{content:"";position:absolute;left:0;bottom:-.14em;height:.22em;width:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 10' preserveAspectRatio='none'><path d='M0 6 Q5 1 10 6 T20 6 T30 6 T40 6' fill='none' stroke='%23FF8FA0' stroke-width='3' stroke-linecap='round'/></svg>") repeat-x;background-size:auto 100%}
.js .pop.in .y::after{animation:crayon .9s cubic-bezier(.2,.8,.2,1) .5s forwards}
@keyframes crayon{to{width:100%}}

/* 3. content hops up */
.js .fx{opacity:0;transform:translateY(16px)}
.js .fx.in{animation:hop .6s cubic-bezier(.34,1.4,.64,1) forwards}
.js .fx.d1.in{animation-delay:.08s}.js .fx.d2.in{animation-delay:.16s}.js .fx.d3.in{animation-delay:.24s}.js .fx.d4.in{animation-delay:.32s}
@keyframes hop{to{opacity:1;transform:none}}
.js .fx.pop{transform:none}
.js .fx.pop.in{animation:popin .7s cubic-bezier(.34,1.56,.64,1) forwards}

/* 4. the growth-blocks mark builds itself */
.motif{width:6.5rem;color:var(--coral-lite);margin-bottom:1.2rem}
.js .motif rect,.js .motif path{opacity:0;transform-origin:50% 100%}
.js .motif.in .m1{animation:block .5s cubic-bezier(.34,1.56,.64,1) forwards}
.js .motif.in .m2{animation:block .5s cubic-bezier(.34,1.56,.64,1) .35s forwards}
.js .motif.in .m3{animation:heart .5s cubic-bezier(.34,1.56,.64,1) .7s forwards;transform-origin:50% 50%}
@keyframes block{from{opacity:0;transform:translateY(-14px) scaleY(.6)}to{opacity:1;transform:none}}
@keyframes heart{from{opacity:0;transform:scale(0)}to{opacity:1;transform:scale(1)}}

/* 5. pinned stage */
.grow.is-pinned .grow__pin{position:sticky;top:0;height:100vh;display:grid;align-items:center}
.grow.is-pinned .stage{opacity:.3;transition:opacity .35s ease,transform .35s cubic-bezier(.34,1.4,.64,1);transform:translateX(-8px)}
.grow.is-pinned .stage.is-on{opacity:1;transform:none}
.grow.is-pinned .stage.is-done{opacity:.6;transform:none}
.grow.is-flat .stage{opacity:.55;transition:opacity .35s}
.grow.is-flat .stage.is-on{opacity:1}

/* 6. surfaces */
.cubby,.rev,.chapter,.ph,.camp{transition:transform .35s cubic-bezier(.34,1.4,.64,1),box-shadow .35s}
.cubby:hover,.rev:hover,.camp:hover{}
.ph img{transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.ph:hover img{transform:scale(1.04)}
.btn{transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .2s,color .2s}
.btn--acc:hover{}
.hd__phone svg{transform-origin:50% 60%}
.hd__phone:hover svg{animation:ring .5s ease-in-out 2}
@keyframes ring{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(6deg)}}

@media (prefers-reduced-motion:reduce){
  .js .pop,.js .pop.in,.js .fx,.js .fx.in{opacity:1;transform:none;animation:none}
  .js .pop .y::after,.js .pop.in .y::after{width:100%;animation:none}
  .js .motif rect,.js .motif path{opacity:1;animation:none}
  .hd__phone:hover svg{animation:none}
  .cubby:hover,.rev:hover,.camp:hover,.btn--acc:hover,.ph:hover img{transform:none}
}