/* Little Eyes 101 homepage motion. Homepage only. Pairs with motion.js.
   Transforms and opacity only, so nothing shifts layout. */

/* 1. Hero eye chart */
.lm-chart-overlay { position: absolute; overflow: visible; pointer-events: none; }
.lm-shape, .lm-chart { transform-box: fill-box; transform-origin: center; }
.lm-pointer { will-change: transform; }

/* 2. Journal card eyes */
.lm-eye, .lm-look, .lm-lid { transform-box: fill-box; transform-origin: center; }

/* 3. Age band */
.ages-grid { position: relative; }
.lm-ages-overlay { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 2; }
.lm-ages-overlay path.lm-line { fill: none; stroke: #4ECDC4; stroke-width: 3; stroke-linecap: round; opacity: .9; transition: opacity .8s ease; }
.lm-ages-overlay.is-settled path.lm-line { opacity: .4; }
.lm-dot { fill: #4ECDC4; }
.lm-dot-glow { fill: #4ECDC4; opacity: .22; }
.lm-dotg { transition: opacity .2s ease; }
.age-cell { transition: transform .5s cubic-bezier(.34,1.56,.64,1), box-shadow .5s ease, background .3s ease; }
.age-cell.lm-lift { transform: translateY(-6px); box-shadow: 0 14px 24px rgba(10,16,22,.32); background: rgba(251,247,236,.11); }
@media (max-width: 800px) { .lm-ages-overlay path.lm-line { stroke-width: 2; } }
@media (prefers-reduced-motion: reduce) {
  .age-cell { transition: none; }
}