/* Etpaar Creative — scroll-life: the homepage's quiet breathing layer.
 *
 * Final states are the defaults. scroll-life.js only arms hidden states
 * after it has found every element (and only under html.js-ready), so
 * no-JS and failed-JS leave the page complete and readable. Everything
 * here is transform/opacity only — no layout shift — and every loop dies
 * under body.calm and prefers-reduced-motion.
 *
 * Not here on purpose: the sec-index rule draw and the data-kx kinetic
 * travel already live in site.js — they are not duplicated. */

/* ===== 1) spine stagger — the crafts spreads and the notebook spines
   rise into place once, on first entry. The hidden state is armed by
   scroll-life.js adding .sl-stag; the reveal itself is WAAPI (per-child
   delay, then cancelled), so .cspread's width suck and .jp-spine's
   height suck keep their own stylesheet transitions untouched. */
html.js-ready body:not(.calm) .sl-stag:not(.sl-in)>*{opacity:0;transform:translate3d(0,16px,0);}

/* ===== 2) the picture desk drifts — scroll-life.js writes a small
   translate3d on #feat-slides while the section is on screen; the sheet
   sits a hair proud of its frame so the drift never shows the stage
   behind it. Armed by .sl-drift (JS), clipped by .feat-stage. */
html.js-ready body:not(.calm) .feat-stage.sl-drift .feat-slides{will-change:transform;}

/* ===== 3) the letters panel breathes — a slow ink wash in the client's
   own ink rising and settling over the paper, barely there (11s). The
   panel's ::before is unused; grain (::after, z2) stays on top. */
@media (prefers-reduced-motion: no-preference){
  html.js-ready body:not(.calm) .t-panel::before{
    content:'';position:absolute;inset:-8%;z-index:1;pointer-events:none;
    background:
      radial-gradient(90% 70% at 20% 8%,rgba(var(--t-ink-rgb),0.11),transparent 62%),
      radial-gradient(85% 95% at 94% 98%,rgba(var(--t-ink-rgb),0.08),transparent 58%);
    opacity:0;
    animation:sl-inkwash 11s ease-in-out infinite;
  }
  /* ===== 4) the studio-ethos star — a slow registration pulse (9s) ===== */
  html.js-ready body:not(.calm) .k-annot .star{display:inline-block;animation:sl-star 9s ease-in-out infinite;}
}
@keyframes sl-inkwash{
  0%,100%{opacity:0;transform:translate3d(0,1.1%,0);}
  50%{opacity:.85;transform:translate3d(0,-1.1%,0);}
}
@keyframes sl-star{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.45;transform:scale(.9);}
}

/* ===== settle: calm or reduced motion returns every default ===== */
body.calm .sl-stag>*{opacity:1 !important;transform:none !important;}
body.calm .feat-slides{transform:none !important;will-change:auto;}
body.calm .t-panel::before{animation:none !important;opacity:0 !important;}
body.calm .k-annot .star{animation:none !important;}
@media (prefers-reduced-motion: reduce){
  .sl-stag>*{opacity:1 !important;transform:none !important;}
  .feat-slides{transform:none !important;will-change:auto;}
  .k-annot .star{animation:none !important;}
}