/* kolam-motion.css — styles for assets/kolam-motion.js (motion layer, D-53…D-63). Uses the tokens in site.css.
   Without JS every kolam here is fully drawn; the JS hides and draws. Reduced motion: final state, no movement. */
.k{display:block;overflow:visible;max-width:100%;height:auto;}
.k .k-line,.k .k-strand,.k .k-four,.k .k-five{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.k .k-child{fill:none;stroke:var(--peacock);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity .6s var(--ease);}
.k .k-child.k-settled{opacity:.45;}
.k .k-comet{fill:none;stroke:var(--coral);stroke-width:4.2;stroke-linecap:round;opacity:0;}
.k circle{fill:var(--ink);transform-box:fill-box;transform-origin:center;}
.k .k-dots circle{transition:opacity .3s var(--ease) calc(var(--i,0) * 22ms),fill .3s var(--ease),transform .3s var(--ease);}
.k .k-cells rect{mix-blend-mode:multiply;opacity:.9;transition:opacity .45s var(--ease);}
.k.k-wait .k-dots circle,.k.k-wait .k-cells rect{opacity:0;}
.k-pop{animation:k-pop .44s var(--ease);}
@keyframes k-pop{0%{transform:scale(1);}38%{transform:scale(2.1);fill:var(--coral);}100%{transform:scale(1);}}
.k .k-dots circle.k-on{fill:var(--coral);transform:scale(1.55);}
.wordmark .mark circle{transform-box:fill-box;transform-origin:center;}
/* growing kolam: circles are placed by transform, so they scale about their own centre at 0,0 */
.k.k-grow .k-dots circle{transform-box:view-box;transform-origin:0 0;transition:transform .55s var(--ease);}
/* join the line: the open place */
.k .k-place{fill:var(--paper);stroke:var(--coral);stroke-width:1.8;transition:fill .25s var(--ease);}
.k .k-place.k-filled{fill:var(--coral);}
.k .k-four{transition:opacity .2s var(--ease);}

/* ---------- placements ---------- */
/* a cut-paper sand plate under a kolam (01 Home hero, 03 Parents hero, 05 Schools hero): hand-cut, one ink shadow sheet, 3° off-square,
   laid over the corner of the photo frame, so line-art never sits on the photograph */
.kolam-plate{position:absolute;left:0;bottom:0;width:164px;aspect-ratio:188/232;padding:14px;}
.kolam-plate .plate,.kolam-plate .plate-shadow{position:absolute;inset:0;clip-path:polygon(2% 1%,99% 0,100% 98%,0 100%);transform:rotate(-3deg);}
.kolam-plate .plate{background:var(--sand);}
.kolam-plate .plate-shadow{background:var(--ink);opacity:.14;transform:rotate(-3deg) translate(4px,5px);}
.kolam-plate .k{position:relative;width:100%;}
.kolam-plate.way{width:132px;aspect-ratio:1;padding:10px;border:0;margin:0;background:none;font:inherit;color:inherit;-webkit-tap-highlight-color:transparent;}
.kolam-plate.grow{width:112px;aspect-ratio:120/152;padding:10px;-webkit-tap-highlight-color:transparent;}

/* the invitation (D-104): the same cue on every kolam that answers a click or tap (01 Home, 03 Parents, 05 Schools); JS adds .k-invite.
   Mouse hover, keyboard focus and the one-time touch cue (.k-cue) all look the same */
.k-invite{cursor:pointer;transition:transform .2s var(--ease);}
.k-invite .plate-shadow{transition:transform .2s var(--ease),opacity .2s var(--ease);}
.k-invite>.k .k-dots circle:first-child{transition:fill .2s var(--ease),transform .2s var(--ease);}
/* the whole plate lifts as one piece (lifting the svg alone would isolate it and lose the cells' multiply over the plate) */
.k-invite:focus-visible,.k-invite.k-cue{transform:translateY(-2px);}
.k-invite:focus-visible .plate-shadow,.k-invite.k-cue .plate-shadow{transform:rotate(-3deg) translate(5px,8px);opacity:.22;}
.k-invite:focus-visible>.k .k-dots circle:first-child,.k-invite.k-cue>.k .k-dots circle:first-child{fill:var(--coral);transform:scale(1.5);}
@media (hover:hover){
  .k-invite:hover{transform:translateY(-2px);}
  .k-invite:hover .plate-shadow{transform:rotate(-3deg) translate(5px,8px);opacity:.22;}
  .k-invite:hover>.k .k-dots circle:first-child{fill:var(--coral);transform:scale(1.5);}
}

/* a story kolam beside its heading (02 About, 05 Schools) */
.khead{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--s5);align-items:center;}
.khead .k-host{width:96px;}
.khead .k-host .k{width:100%;}
h3.khead,.khead h3{margin:0;}

/* 04 one step at a time: the line draws with scroll at the site's normal spacing (D-61) */
.k-path{position:absolute;left:0;top:0;pointer-events:none;overflow:visible;}
.k-path-on .kdot{visibility:hidden;}
.k-path .k-dots circle.k-on{transform:scale(1.3);}
.k-path-on .step h3,.k-path-on .step p{transition:color .35s var(--ease);}
.k-path-on .step h3{color:var(--ink-2);}
.k-path-on .step.reached h3,.k-path-on .step.reached p{color:var(--ink);}

/* 07 join the line, in the closing band */
.cta .k-join{width:150px;margin:0 0 var(--s4);}

/* 08 today's kolam, in the footer */
.today{display:flex;align-items:center;gap:var(--s4);margin-top:var(--s5);}
.today .kolam-plate{position:relative;width:76px;aspect-ratio:auto;padding:9px;flex:none;}
.today .kolam-plate .plate{background:var(--paper);}
.site-footer .today p{margin:0;}

@media (min-width:760px){
  .kolam-plate{width:200px;padding:16px;}
  .kolam-plate.way{width:156px;padding:12px;}
  .kolam-plate.grow{width:132px;padding:12px;}
  .today .kolam-plate{width:84px;padding:10px;}
  .khead .k-host{width:132px;}
  .cta .k-join{width:170px;}
}
@media (prefers-reduced-motion:reduce){
  .k *,.k,.wordmark .mark *{transition:none!important;animation:none!important;}
  .k.k-wait .k-dots circle,.k.k-wait .k-cells rect{opacity:1;}
  /* the invitation stays, but static: no lift, only the deeper shadow and the coral starting dot */
  .k-invite:hover,.k-invite:focus-visible,.k-invite.k-cue{transform:none;}
}