/* =========================================================================
   AANGAN · THE GARDEN — flowers, wind, bee, frog, and the Mindori chit
   -------------------------------------------------------------------------
   Paired with js/43-garden.js. Loads after slabs.css so it sits over the
   grass layer. Everything is scoped under #homeOv, and to either #ckLangdi
   (the flowers, the bee, the frog — anything that has to be tappable or has
   to travel with a slab) or .ck-floor (the seed fluff, which is pure
   decoration and wants the whole yard to drift across). Which layer takes
   which, and why it is not the obvious split, is in 43-garden.js:lay().

   No `will-change` anywhere. There are a couple of dozen animated elements
   on this floor already; promoting each to its own compositor layer costs
   more memory on a cheap phone than the repaint it saves.
   ========================================================================= */

/* The flowers live in #ckLangdi, not in .ck-floor — see the block comment in
   43-garden.js:lay(). IN FRONT of the slabs (owner 2026-07-31: "if the
   flowers overlap with the tiles, it should appear above the tile"), which is
   also the truer reading: a plant grows up past the edge of a tile lying on
   the ground, it does not get buried by it. They still sit under the bee at
   z-index 6, because the bee is in the air. */
#homeOv #ckLangdi > .ck-garden{position:absolute;inset:0;z-index:5;
  pointer-events:none;overflow:visible}

/* THE LAWN HAS TO BE REACHABLE. #ckLangdi is a positioned div spanning the
   whole courtyard, and a transparent element still takes hits — only SVG
   defaults to testing painted pixels — so the wrap swallowed every press over
   open lawn even though it has no background of its own. It only ever needs
   to catch presses on its slabs, so it hands the rest of its box back and the
   slabs (and the flower heads) opt in. Scoped to [data-slabs] so the chalk
   grid this replaced, which does need its own box, is untouched. */
#homeOv #ckLangdi[data-slabs="1"]{pointer-events:none}
#homeOv #ckLangdi[data-slabs="1"] .slabcell{pointer-events:auto}

/* ---------------- a Mindori flower ----------------
   WHAT TAKES A TAP IS THE FLOWER, NOT ITS BOX. The layer is transparent to
   pointers so a finger on the lawn still reaches the slab underneath; the
   wrapper and the stem are transparent too. Only `.mhead` turns pointers
   back on, and SVG's default hit test is `visiblePainted` — so the press has
   to land on an actual painted petal or on the bobble. That matters because
   a plant's box is up to 60px wide and can reach over the edge of a slab: a
   box-shaped hit area would silently steal taps meant for a room.

   The wrapper's width/height are written inline by 43-garden.js from the
   plant's own drawn size, and the negative margin is what keeps `left/top`
   meaning "where the stem meets the soil". */
#homeOv #ckLangdi > .ck-garden .mflower{
  position:absolute;display:block;pointer-events:none;
  transform-origin:50% 100%;
  animation:mfsway var(--d,3.6s) ease-in-out var(--t,0s) infinite}
#homeOv #ckLangdi > .ck-garden .mflower > svg{display:block;
  width:100%;height:100%;pointer-events:none}
#homeOv #ckLangdi > .ck-garden .mflower .mhead{pointer-events:auto;cursor:pointer}

/* The stem bends, and the head follows a beat LATE. That lag is the whole
   difference between wind and a metronome: two nested rotations on periods
   that do not divide into each other never repeat the same pose twice, so
   the eye reads air rather than a loop. */
@keyframes mfsway{
  0%,100%{transform:rotate(calc(var(--a,4deg) * -1))}
  47%    {transform:rotate(var(--a,4deg))}}
#homeOv #ckLangdi > .ck-garden .mflower .mhead{
  transform-box:fill-box;transform-origin:50% 100%;
  animation:mfbob var(--hd,2.6s) ease-in-out infinite}
@keyframes mfbob{
  0%,100%{transform:rotate(5deg) translateY(0)}
  50%    {transform:rotate(-5deg) translateY(-.6px)}}

/* the tap: the whole plant recoils, the way something on a stem does when
   you touch it — no ring, no flash, nothing that says "button" */
#homeOv #ckLangdi > .ck-garden .mflower.nudge{animation:mfnudge .62s ease-out}
@keyframes mfnudge{
  0%  {transform:rotate(0deg)}
  18% {transform:rotate(-13deg)}
  42% {transform:rotate(9deg)}
  66% {transform:rotate(-5deg)}
  86% {transform:rotate(2deg)}
  100%{transform:rotate(0deg)}}

/* ---------------- the bee ----------------
   Its own layer, inside #ckLangdi and over the slabs: a bee is in the air and
   the slabs are on the ground. `inset:0` on a position:relative wrap means it
   shares the slabs' coordinate space exactly. */
#ckLangdi > .ck-air{position:absolute;inset:0;z-index:6;pointer-events:none}
#ckLangdi > .ck-air .mbeewrap{position:absolute;display:block;pointer-events:none}
#ckLangdi > .ck-air .mbeewrap svg{display:block;overflow:visible;
  filter:drop-shadow(0 2px 2px rgba(30,22,6,.32))}

/* ---------------- seed fluff on the breeze ----------------
   Clipped to the courtyard, unlike the flowers: a mote is supposed to leave,
   and one hanging in the margin beside the yard reads as a bug. The lateral
   travel is on the wrapper and the bob is on the SVG inside it, so the two
   compose instead of fighting for the same transform. */
#homeOv > .ck-floor > .ck-drift{position:absolute;inset:0;z-index:2;
  overflow:hidden;pointer-events:none}
#homeOv > .ck-floor > .ck-drift .mdrift{position:absolute;left:0;display:block;
  animation:mdcross var(--dd,17s) linear var(--dt,0s) infinite}
#homeOv > .ck-floor > .ck-drift .mdrift svg{display:block;
  transform:scale(var(--ds,.8));
  animation:mdbob calc(var(--dd,17s) / 5) ease-in-out infinite}
@keyframes mdcross{
  0%  {transform:translateX(-30px);opacity:0}
  9%  {opacity:.85}
  88% {opacity:.85}
  100%{transform:translateX(calc(100vw + 30px));opacity:0}}
@keyframes mdbob{
  0%,100%{translate:0 calc(var(--db,20px) * -.5)}
  50%    {translate:0 calc(var(--db,20px) * .5)}}

/* ---------------- the frogs, loose in the courtyard ----------------
   Owner 2026-08-01: "make sure it can jump and roam around anywhere on the
   menu." There used to be one frog and she was a child of the Profile slab,
   which meant she inherited its tilt for free and could not physically leave
   it. Both of those go together: the tilt was never worth the cage.

   The layer is a sibling of the slabs, LAST in #ckLangdi, so a frog crossing
   the yard passes in front of a tile rather than disappearing behind it.
   pointer-events:none on the layer, because the slabs are the tap targets and
   a frog that swallowed your tap would be a bug, not a feature. */
#ckLangdi > .ck-frogs{position:absolute;inset:0;z-index:6;
  pointer-events:none;overflow:visible}
/* The box is a REAL size, and the centring is done with a negative margin
   rather than by giving the wrapper zero size. A `width:0` wrapper is the
   containing block for the absolutely-positioned <b> inside it, so shrink-to
   -fit resolved that <b> against zero available width and the frog came out
   0.7px wide — present in the DOM, invisible on screen, and invisible in code
   review too. Only the render showed it.

   --mfrog is 32px (owner 2026-08-01: bigger, a bit). It is a variable and not
   three literals because 43-garden.js bounds the hops off the SAME number —
   how far off the yard's edge a frog may land, how close two may sit — so a
   size change made here alone would leave the frogs half over the wall. */
#ckLangdi > .ck-frogs{--mfrog:32px}
#ckLangdi .ck-frogs > .mfrog{position:absolute;display:block;z-index:2;
  pointer-events:none;width:var(--mfrog);height:var(--mfrog);
  margin:calc(var(--mfrog) / -2) 0 0 calc(var(--mfrog) / -2)}
#ckLangdi .ck-frogs > .mfrog > b{display:block;
  width:var(--mfrog);height:var(--mfrog);
  transform:rotate(var(--r,0deg));transform-origin:50% 50%;
  filter:drop-shadow(0 2px 3px rgba(20,26,12,.45))}
#ckLangdi .ck-frogs > .mfrog > b > svg{display:block;
  width:var(--mfrog);height:var(--mfrog)}
/* The hop. The squash is on the OUTER element, in screen axes, and that is
   deliberate: seen from above, a frog leaving the ground reads as the body
   lengthening along the jump and flattening on the landing. The rotation
   lives on the inner <b> so the two never multiply into a shear. */
#ckLangdi .ck-frogs > .mfrog.hop{animation:mfroghop .62s cubic-bezier(.3,.6,.4,1) forwards}
@keyframes mfroghop{
  0%  {transform:translate(0,0) scale(1,1)}
  14% {transform:translate(0,0) scale(1.16,.8)}
  48% {transform:translate(calc(var(--dx,0px) * .52), calc(var(--dy,0px) * .52 - 13px))
       scale(.86,1.2)}
  86% {transform:translate(var(--dx,0px), var(--dy,0px)) scale(1.14,.84)}
  100%{transform:translate(var(--dx,0px), var(--dy,0px)) scale(1,1)}}

/* ---------------- the Mindori chit ----------------
   A paper slip on the courtyard floor, not a system dialog. Fixed to the
   VIEWPORT and appended to <body>, because the floor layer it is opened from
   is `contain:paint` and would have clipped it. */
.mnd-scrim{position:fixed;inset:0;z-index:9600;display:flex;
  align-items:center;justify-content:center;padding:22px;
  background:rgba(24,17,8,.52);opacity:0;transition:opacity .2s ease;
  -webkit-tap-highlight-color:transparent}
.mnd-scrim.on{opacity:1}
.mnd-chit{position:relative;width:min(330px,100%);box-sizing:border-box;
  padding:16px 18px 15px;text-align:center;
  color:#3c2a13;
  background:linear-gradient(178deg,#fdf6e4,#f3e6c8 62%,#eddcb6);
  border-radius:3px;
  box-shadow:0 14px 30px rgba(16,10,3,.42), 0 2px 0 rgba(255,255,255,.6) inset;
  transform:translateY(14px) rotate(-.7deg) scale(.97);
  transition:transform .24s cubic-bezier(.2,.9,.3,1.1)}
.mnd-scrim.on .mnd-chit{transform:translateY(0) rotate(-.7deg) scale(1)}
/* torn top edge — a chit off a pad, not a card with a radius */
.mnd-chit::before{content:"";position:absolute;left:0;right:0;top:-5px;height:6px;
  background:
    radial-gradient(4px 6px at 5px 6px,#fdf6e4 96%,transparent 100%) repeat-x 0 0/11px 6px}
.mnd-mark{line-height:0;margin:-2px 0 4px}
.mnd-mark svg{display:inline-block}
.mnd-chit h3{margin:0 0 5px;font-family:var(--ck-disp);
  font-size:20px;letter-spacing:.4px;color:#8d3d5c;font-weight:600}
.mnd-chit p{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:#4a3517}
.mnd-btns{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.mnd-btns button{flex:1 1 0;min-width:112px;padding:10px 12px;
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;
  border-radius:3px;border:1.4px solid transparent;
  -webkit-tap-highlight-color:transparent}
.mnd-btns .mnd-no{background:rgba(120,92,48,.1);border-color:rgba(120,92,48,.4);
  color:#6b5227}
.mnd-btns .mnd-go{background:linear-gradient(180deg,#d9628a,#b8496b);color:#fff8ee;
  border-color:#9c3a58;box-shadow:0 2px 0 rgba(88,26,44,.4)}
.mnd-btns button:active{transform:translateY(1px)}
.mnd-btns button:focus-visible{outline:2px solid #8d3d5c;outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  #homeOv #ckLangdi > .ck-garden .mflower,
  #homeOv #ckLangdi > .ck-garden .mflower .mhead,
  #homeOv > .ck-floor > .ck-drift .mdrift,
  #homeOv > .ck-floor > .ck-drift .mdrift svg{animation:none}
  #ckLangdi > .ck-air{display:none}
  #ckLangdi .ck-frogs > .mfrog.hop{animation-duration:.01s}
  .mnd-scrim,.mnd-chit{transition:none}
}

/* ---------------- the Wall tile's prison (js/44-ant.js) ----------------
   A live overlay on the tile's face: the bars and the ant have to share one
   SMIL clock, and the slab itself is an <img> nothing outside can be kept in
   step with. `preserveAspectRatio="none"` on the SVG means the drawing is
   built at the tile's measured size and stays glued to it if the tile is
   re-laid a pixel narrower. */
#ckLangdi .slabcell > .antcage{position:absolute;inset:0;z-index:1;
  pointer-events:none;line-height:0}
#ckLangdi .slabcell > .antcage > svg{display:block;width:100%;height:100%}
@media (prefers-reduced-motion: reduce){
  /* the bars still read as a border standing still; a bolting insect does
     not belong in a reduced-motion session at all */
  #ckLangdi .slabcell > .antcage > svg > g:last-child{display:none}
}