/* Little Eyes 101 journal (article page) motion. Article pages only. Pairs with journal-motion.js.
   Transform and opacity only. Default state is the settled state; the script adds the pre-states. */

/* 1. Living hero */
.wrap.art-hero-w { max-width: 900px; padding-top: 20px; }
.art-hero { height: 156px; border-radius: 18px; border: 1px solid var(--hairline); box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center; overflow: hidden; }
.art-hero svg { height: calc(100% - 20px); width: auto; max-width: 92%; display: block; }
.lm-eye, .lm-look, .lm-lid, .jm-bob { transform-box: fill-box; transform-origin: center; }
@media (max-width: 800px) {
  .wrap.art-hero-w { padding-top: 16px; }
  .art-hero { height: 128px; border-radius: 16px; }
  .art-hero svg { height: calc(100% - 16px); }
}

/* 2. Reading-progress eye: a fixed thin line, scaled (not resized) by progress */
html.jm .progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 70; background: transparent; pointer-events: none; }
html.jm .progress > i { width: 100% !important; transform: scaleX(0); transform-origin: 0 50%; transition: none; will-change: transform; }
.jm-peye { position: absolute; left: 0; top: 4px; width: 24px; height: 15px; opacity: 0; transition: opacity .3s ease; will-change: transform; }
.jm-peye.on { opacity: 1; }
.jm-peye svg { display: block; width: 24px; height: 15px; }
.jm-peye g { transform-box: fill-box; transform-origin: center; }
/* Phones (30 Sep 2026, Dr Ong: "I do not see the reading progress thing ... on the phone"). The menu bar
   now stays at the top on phones, so the line runs along the bar's own bottom edge and the eye rides on it,
   half in the bar and half below, with no extra band taking up the screen. */
@media (max-width: 800px) {
  html.jm .progress { display: block !important; position: absolute; top: auto; bottom: -1px; height: 3px; z-index: 2; }
  html.jm .progress > i { height: 3px; }
  .jm-peye { top: -5px; width: 24px; height: 15px; }
  .jm-peye svg { width: 24px; height: 15px; }
}

/* 3. FAQ */
.faq details summary::after { transition: transform .3s cubic-bezier(.65,0,.35,1); }
.faq details.jm-closing[open] summary::after { transform: none; }
.prose h2, .faq-h2 { scroll-margin-top: 20px; }

/* 4. Key takeaways ticks (the script swaps the dot for a tick) */
.takeaways.jm-t li::before { display: none; }
.jm-tick { position: absolute; left: 0; top: 5px; width: 15px; height: 15px; display: block; }
.jm-tick path { stroke: var(--deep); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.jm-tick circle { fill: #FFFFFF; }

/* 5. Pull quotes: a soft highlighter sweep (one translated layer) */
.pull { position: relative; overflow: hidden; isolation: isolate; }
.pull::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: rgba(78,205,196,.2); transform: translateX(0); will-change: transform; }
.pull.jm-wait::before { transform: translateX(-101%); }
.pull.jm-go::before { transform: translateX(0); transition: transform 1.1s cubic-bezier(.65,0,.35,1); }

/* 7. "This article as a carousel" band: the real quick-guide slides as a small fan */
.jm-fan { position: relative; width: 112px; height: 140px; flex: none; margin: 0 24px; }
.jm-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 9px; border: 2px solid #fff;
  background: #fff; box-shadow: 0 8px 16px rgba(20,60,56,.22); transition: transform .7s cubic-bezier(.65,0,.35,1), opacity .7s ease; will-change: transform, opacity; }
.jm-slide[data-slot="0"] { transform: translate(0,0) rotate(0); opacity: 1; z-index: 4; }
.jm-slide[data-slot="1"] { transform: translate(16px,3px) rotate(5deg) scale(.96); opacity: 1; z-index: 3; }
.jm-slide[data-slot="2"] { transform: translate(-16px,5px) rotate(-5deg) scale(.92); opacity: 1; z-index: 2; }
.jm-slide[data-slot="hide"] { transform: translate(0,6px) scale(.9); opacity: 0; z-index: 1; }
.jm-slide[data-slot="out"] { transform: translate(-56px,-4px) rotate(-14deg); opacity: 0; z-index: 5; }
@media (max-width: 800px) { .jm-fan { width: 88px; height: 110px; margin: 4px 14px; }
  .jm-slide[data-slot="1"] { transform: translate(12px,3px) rotate(5deg) scale(.96); } .jm-slide[data-slot="2"] { transform: translate(-12px,5px) rotate(-5deg) scale(.92); } }

@media (prefers-reduced-motion: reduce) {
  .faq details summary::after, .jm-slide, .jm-peye { transition: none; }
  .pull.jm-wait::before { transform: none; }
}