/* ===========================================================
   iTumbuh homepage-only motion layer (shared effects: site-motion.css).
   Motion only: no colours, sizes or layout change here. Everything
   animates transform / opacity / clip-path (cheap to composite), entrance
   animations use fill-mode `backwards` so no transform is left behind once
   they finish, and prefers-reduced-motion switches the lot off.
   =========================================================== */

/* ---------- Hero entrance ---------- */
@keyframes hmUp{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
@keyframes hmIn{from{opacity:0;transform:translateX(34px) scale(.97);}to{opacity:1;transform:none;}}
.hero-grid > div:first-child > *{animation:hmUp .8s cubic-bezier(.22,.61,.36,1) backwards;}
.hero-grid > div:first-child > :nth-child(1){animation-delay:.05s;}
.hero-grid > div:first-child > :nth-child(2){animation-delay:.14s;}
.hero-grid > div:first-child > :nth-child(3){animation-delay:.23s;}
.hero-grid > div:first-child > :nth-child(4){animation-delay:.32s;}
.hero-grid > div:first-child > :nth-child(5){animation-delay:.41s;}
.hero-visual{animation:hmIn 1s .2s cubic-bezier(.22,.61,.36,1) backwards;}
.helpbar .help-panel{animation:hmUp .8s .5s cubic-bezier(.22,.61,.36,1) backwards;}

/* Warning icon on the stunting stat gives a small nudge every few seconds. */
@keyframes hmNudge{0%,86%,100%{transform:none;}89%{transform:rotate(-12deg);}92%{transform:rotate(10deg);}95%{transform:rotate(-6deg);}}
.hero-stat svg{transform-origin:50% 60%;animation:hmNudge 5s 2.5s ease-in-out infinite;}

/* ---------- Hero chart draws itself ---------- */
@keyframes hmDraw{to{stroke-dashoffset:0;}}
@keyframes hmPop{from{transform:scale(0);}60%{transform:scale(1.35);}to{transform:scale(1);}}
@keyframes hmPing{0%{transform:scale(1);opacity:.55;}100%{transform:scale(3.4);opacity:0;}}
@keyframes hmBadge{from{opacity:0;transform:translateY(-6px) scale(.8);}to{opacity:1;transform:none;}}
.chart-card .ch-band,.chart-card .ch-line{stroke-dasharray:1;stroke-dashoffset:1;animation:hmDraw 1.3s cubic-bezier(.65,0,.35,1) forwards;}
.chart-card .ch-band{animation-delay:.45s;}
.chart-card .ch-band + .ch-band{animation-delay:.6s;}
.chart-card .ch-line{animation-duration:1.5s;animation-delay:.95s;}
.chart-card .ch-dot{transform-box:fill-box;transform-origin:center;animation:hmPop .5s cubic-bezier(.34,1.56,.64,1) backwards;}
.chart-card .ch-dot:nth-of-type(1){animation-delay:1s;}
.chart-card .ch-dot:nth-of-type(2){animation-delay:1.45s;}
.chart-card .ch-dot:nth-of-type(3){animation-delay:1.95s;}
.chart-card .ch-dot:nth-of-type(4){animation-delay:2.4s;}
.chart-card .ch-ping{fill:none;stroke:#3B82F6;stroke-width:2;transform-box:fill-box;transform-origin:center;opacity:0;animation:hmPing 2.4s 2.9s ease-out infinite;}
.chart-card .badge.low{animation:hmBadge .5s 2.6s cubic-bezier(.34,1.56,.64,1) backwards;}

/* 3D tilt (driven by home-motion.js) */
.hero-visual{perspective:1100px;}
.chart-card{transition:transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease;will-change:transform;}
.chart-card.is-tilting{transition:transform .12s linear, box-shadow .3s ease;box-shadow:0 28px 60px rgba(15,23,42,.28);}

/* ---------- Scroll-in refinements ----------
   The cards already fade up via .reveal; these give each group a cascade
   and keep hover-lift snappy by lifting with `translate` instead of the
   reveal's slower `transform` transition. */
.stat-block.reveal,.why-card.reveal,.tile.reveal,.audience-card.reveal{
  transition:opacity .6s cubic-bezier(.22,.61,.36,1), transform .6s cubic-bezier(.22,.61,.36,1), translate .3s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease;
}
.stat-block.reveal.is-visible:hover,.why-card.reveal.is-visible:hover,.tile.reveal.is-visible:hover,.audience-card.reveal.is-visible:hover{transform:none;}
.stat-block.reveal.is-visible:hover{translate:0 -5px;box-shadow:0 16px 34px rgba(17,24,39,.09);}
.why-card.reveal.is-visible:hover{translate:0 -5px;}
.tile.reveal.is-visible:hover{translate:0 -7px;}
.audience-card.reveal.is-visible:hover{translate:0 -7px;}
.why-list .reveal:nth-child(2){transition-delay:.08s;}
.why-list .reveal:nth-child(3){transition-delay:.16s;}
.why-list .reveal:nth-child(4){transition-delay:.24s;}
.tile-grid .reveal:nth-child(2){transition-delay:.08s;}
.tile-grid .reveal:nth-child(3){transition-delay:.16s;}
.tile-grid .reveal:nth-child(4){transition-delay:.24s;}
.faq-list .reveal:nth-child(2){transition-delay:.08s;}
.faq-list .reveal:nth-child(3){transition-delay:.16s;}

/* Icons answer the hover with a small wiggle. */
@keyframes hmWiggle{0%,100%{transform:none;}30%{transform:rotate(-10deg) scale(1.12);}60%{transform:rotate(7deg) scale(1.08);}}
.why-card:hover .why-ic,.audience-card:hover .icon-circle,.step:hover .step-ic{animation:hmWiggle .6s ease;}

/* Photos zoom gently inside their frames. */
.tile .media-photo{transition:scale .7s cubic-bezier(.22,.61,.36,1);}
.tile:hover .media-photo{scale:1.08;}
.sc-slide .media-photo{scale:1;}
.sc-slide.is-active .media-photo{scale:1.07;transition:scale 8s ease-out;}

/* "Why" photo wipes open, then its badge rises and floats. */
.why-media.reveal .media{clip-path:inset(10% 10% 10% 10% round 28px);transition:clip-path 1.1s cubic-bezier(.22,.61,.36,1);}
.why-media.reveal.is-visible .media{clip-path:inset(0 round var(--radius-lg));}
@keyframes hmFloat{from{transform:translateY(0);}to{transform:translateY(-8px);}}
.why-media.reveal .why-badge{opacity:0;translate:0 18px;transition:opacity .6s .55s ease, translate .7s .55s cubic-bezier(.34,1.56,.64,1);}
.why-media.reveal.is-visible .why-badge{opacity:1;translate:0 0;animation:hmFloat 3.2s 1.4s ease-in-out infinite alternate;}

/* Audience tick lists slide in once the card is on screen. */
.audience-card.reveal ul li{opacity:0;translate:-10px 0;transition:opacity .45s ease, translate .45s cubic-bezier(.22,.61,.36,1);}
.audience-card.reveal.is-visible ul li{opacity:1;translate:0 0;}
.audience-card.reveal.is-visible ul li:nth-child(1){transition-delay:.35s;}
.audience-card.reveal.is-visible ul li:nth-child(2){transition-delay:.47s;}
.audience-card.reveal.is-visible ul li:nth-child(3){transition-delay:.59s;}

/* ---------- How it works: the timeline draws, then a light travels it ---------- */
.steps::before{transform:scaleX(0);transform-origin:left center;transition:transform 1.4s .15s cubic-bezier(.65,0,.35,1);}
.steps.in-view::before{transform:scaleX(1);}
@keyframes hmFlow{from{background-position:-30% 0;}to{background-position:130% 0;}}
.steps::after{
  content:"";position:absolute;top:28px;left:12.5%;right:12.5%;height:4px;border-radius:4px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(191,219,254,.95),transparent) no-repeat;background-size:16% 100%;
  opacity:0;filter:drop-shadow(0 0 6px rgba(96,165,250,.9));
}
.steps.in-view::after{opacity:1;transition:opacity .4s 1.5s;animation:hmFlow 3.4s 1.5s linear infinite;}
@keyframes hmNode{0%{transform:scale(.4);}60%{transform:scale(1.18);}100%{transform:scale(1);}}
.steps.in-view .step-node{animation:hmNode .6s cubic-bezier(.34,1.56,.64,1) backwards;}
.steps.in-view .step:nth-child(1) .step-node{animation-delay:.15s;}
.steps.in-view .step:nth-child(2) .step-node{animation-delay:.5s;}
.steps.in-view .step:nth-child(3) .step-node{animation-delay:.85s;}
.steps.in-view .step:nth-child(4) .step-node{animation-delay:1.2s;}

@media (max-width:960px){
  .steps::after{display:none;}
}
@media (prefers-reduced-motion: reduce){
  .hero-grid > div:first-child > *,.hero-visual,.helpbar .help-panel,.hero-stat svg,
  .chart-card .ch-dot,.chart-card .badge.low,.chart-card .ch-ping,
  .why-media.reveal.is-visible .why-badge,.steps.in-view .step-node,
  .why-card:hover .why-ic,.audience-card:hover .icon-circle,.step:hover .step-ic{animation:none;}
  .chart-card .ch-band,.chart-card .ch-line{animation:none;stroke-dashoffset:0;}
  .steps::before{transform:none;transition:none;}
  .steps::after{display:none;}
  .why-media.reveal .media{clip-path:none;transition:none;}
  .why-media.reveal .why-badge,.audience-card.reveal ul li{opacity:1;translate:none;transition:none;}
  .tile .media-photo,.sc-slide .media-photo{transition:none;scale:1;}
}

/* ---------- Quick Growth Check ---------- */
/* Boy / Girl: a white pill slides between the two options. */
.qc-seg{position:relative;}
.qc-seg::before{
  content:"";position:absolute;top:5px;bottom:5px;left:5px;width:calc(50% - 8px);
  background:#fff;border-radius:9px;box-shadow:0 2px 8px rgba(17,24,39,.1);
  transform:translateX(calc(var(--i, 0) * (100% + 6px)));opacity:0;
  transition:transform .4s cubic-bezier(.34,1.3,.64,1), opacity .2s ease;
}
.qc-seg.has-pick::before{opacity:1;}
.qc-seg button{position:relative;z-index:1;}
.qc-seg button[aria-checked="true"]{background:transparent;box-shadow:none;}
.qc-form .field label{transition:color .2s ease;}
.qc-form .field:focus-within > label{color:var(--primary-ink);}

/* Button: the site's shine sweep, and a spinner while checking. */
.qc-submit{position:relative;overflow:hidden;}
.qc-submit::after{
  content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.45),transparent);
  transform:translateX(-160%) skewX(-18deg);
}
.qc-submit:hover::after{transform:translateX(330%) skewX(-18deg);transition:transform .75s ease;}
@keyframes qcSpin{to{transform:rotate(360deg);}}
.qc-submit.is-busy::before{
  content:"";width:16px;height:16px;margin-right:10px;border-radius:50%;
  border:2px solid rgba(255,255,255,.45);border-top-color:#fff;animation:qcSpin .7s linear infinite;
}

/* Empty state: the chart icon floats and its line keeps drawing itself;
   the three promises slide in once the card is on screen. */
@keyframes qcFloat{from{transform:translateY(0);}to{transform:translateY(-7px);}}
@keyframes qcLine{0%{stroke-dashoffset:20;}45%,80%{stroke-dashoffset:0;opacity:1;}100%{stroke-dashoffset:0;opacity:0;}}
.qc-empty-ic{animation:qcFloat 2.8s ease-in-out infinite alternate;}
.qc-empty-ic svg path:last-child{stroke-dasharray:20;stroke-dashoffset:20;animation:qcLine 3.2s .6s ease-in-out infinite;}
.qc-card.reveal .qc-empty li{opacity:0;translate:-10px 0;transition:opacity .45s ease, translate .45s cubic-bezier(.22,.61,.36,1);}
.qc-card.reveal.is-visible .qc-empty li{opacity:1;translate:0 0;}
.qc-card.reveal.is-visible .qc-empty li:nth-child(1){transition-delay:.35s;}
.qc-card.reveal.is-visible .qc-empty li:nth-child(2){transition-delay:.47s;}
.qc-card.reveal.is-visible .qc-empty li:nth-child(3){transition-delay:.59s;}

/* A fresh result builds up in order: badge pops, text rises, the gauge
   fills from the left, the marker slides in, then the numbers and advice. */
@keyframes qcRise{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:none;}}
@keyframes qcPop{0%{opacity:0;transform:scale(.6);}70%{transform:scale(1.08);}100%{opacity:1;transform:none;}}
@keyframes qcFill{from{transform:scaleX(0);}to{transform:none;}}
.qc-out.qc-anim > *{animation:qcRise .5s cubic-bezier(.22,.61,.36,1) backwards;}
.qc-out.qc-anim > .qc-badge{animation:qcPop .5s cubic-bezier(.34,1.56,.64,1) backwards;}
.qc-out.qc-anim > :nth-child(2){animation-delay:.08s;}
.qc-out.qc-anim > :nth-child(3){animation-delay:.14s;}
.qc-out.qc-anim > :nth-child(4){animation-delay:.2s;}
.qc-out.qc-anim > :nth-child(5){animation-delay:.55s;}
.qc-out.qc-anim > :nth-child(6){animation-delay:.65s;}
.qc-out.qc-anim > :nth-child(7){animation-delay:.72s;}
.qc-out.qc-anim > :nth-child(8){animation-delay:.8s;}
.qc-out.qc-anim > :nth-child(9){animation-delay:.88s;}
.qc-out.qc-anim .qc-bar{transform-origin:left center;animation:qcFill .7s .25s cubic-bezier(.65,0,.35,1) backwards;}
.qc-out.qc-anim .qc-pin-in{animation-delay:.6s;}
.qc-out.qc-anim .qc-stat{animation:qcPop .45s cubic-bezier(.34,1.56,.64,1) backwards;}
.qc-out.qc-anim .qc-stat:nth-child(1){animation-delay:.6s;}
.qc-out.qc-anim .qc-stat:nth-child(2){animation-delay:.7s;}
.qc-out.qc-anim .qc-stat:nth-child(3){animation-delay:.8s;}
.qc-stat{transition:translate .25s ease, box-shadow .25s ease;}
.qc-stat:hover{translate:0 -3px;box-shadow:0 8px 18px rgba(17,24,39,.07);}

/* "At risk" / "Stunted" badges keep a soft pulse on their dot. */
@keyframes qcPulse{0%{box-shadow:0 0 0 0 currentColor;}70%{box-shadow:0 0 0 7px transparent;}100%{box-shadow:0 0 0 0 transparent;}}
.qc-s-risk::before,.qc-s-stunted::before{animation:qcPulse 1.8s ease-out infinite;}

@media (prefers-reduced-motion: reduce){
  .qc-seg::before{transition:none;}
  .qc-empty-ic,.qc-empty-ic svg path:last-child,.qc-out.qc-anim > *,.qc-out.qc-anim .qc-bar,
  .qc-out.qc-anim .qc-stat,.qc-s-risk::before,.qc-s-stunted::before{animation:none;}
  .qc-empty-ic svg path:last-child{stroke-dashoffset:0;}
  .qc-card.reveal .qc-empty li{opacity:1;translate:none;transition:none;}
}