/* =========================================================================
   MORIO — motion layer
   Emotional, restrained animation. All effects gated behind
   prefers-reduced-motion: no-preference so print / a11y stays static.
   Image rule: never crop — frames wipe, images fade. No object zoom.
   ========================================================================= */

@media (prefers-reduced-motion: no-preference){

  /* ---- richer scroll reveal: emerge with blur + longer travel ---- */
  [data-reveal]{
    opacity:0; transform:translateY(42px); filter:blur(9px);
    transition:opacity 1.2s var(--ease), transform 1.2s var(--ease), filter 1.2s var(--ease);
    will-change:opacity, transform, filter;
  }
  [data-reveal].is-in{ opacity:1; transform:none; filter:blur(0); }
  [data-reveal][data-delay="1"]{ transition-delay:.10s; }
  [data-reveal][data-delay="2"]{ transition-delay:.22s; }
  [data-reveal][data-delay="3"]{ transition-delay:.34s; }
  [data-reveal][data-delay="4"]{ transition-delay:.46s; }

  /* ---- bilingual heading: EN wordmark wipes up from a mask ---- */
  .btitle .en{
    display:inline-block;
    clip-path:inset(0 0 112% 0);
    transform:translateY(.16em);
    transition:clip-path 1.05s var(--ease) .14s, transform 1.05s var(--ease) .14s;
  }
  .btitle.is-in .en{ clip-path:inset(0 0 -14% 0); transform:none; }

  /* ---- figures: elegant curtain wipe (clips the FRAME, not the image) ---- */
  .figure[data-reveal]{
    opacity:1; transform:none; filter:none;
    clip-path:inset(0 0 100% 0);
    transition:clip-path 1.5s var(--ease);
  }
  .figure[data-reveal].is-in{ clip-path:inset(0 0 0 0); }
  .figure[data-reveal] img{ opacity:.32; transition:opacity 1.7s var(--ease); }
  .figure[data-reveal].is-in img{ opacity:1; }
  /* caption drifts up after the wipe */
  .figure .cap{ opacity:0; transform:translateY(16px); transition:opacity 1s var(--ease) .5s, transform 1s var(--ease) .5s; }
  .figure[data-reveal].is-in .cap{ opacity:1; transform:none; }

  /* ---- hero entrance choreography ---- */
  .hero .eyebrow{ animation:m-rise 1.2s var(--ease) both .25s; }
  .hero h1{ animation:m-rise 1.4s var(--ease) both .5s; }
  .hero-sub{ animation:m-rise 1.3s var(--ease) both .9s; }
  .scrollcue{ animation:m-fade 1.6s var(--ease) both 1.5s; }
  .hero-bg img{ animation:m-hero-img 2.6s var(--ease) both; }

  @keyframes m-rise{ from{ opacity:0; transform:translateY(32px); filter:blur(8px); } to{ opacity:1; transform:none; filter:blur(0); } }
  @keyframes m-fade{ from{ opacity:0; } to{ opacity:1; } }
  @keyframes m-hero-img{ from{ opacity:0; filter:brightness(.4) blur(12px); } to{ opacity:1; filter:none; } }

  /* ---- gold shimmer on the statement accent ---- */
  .statement-jp .accent{
    background:linear-gradient(100deg, var(--accent) 22%, var(--accent-2) 50%, var(--accent) 78%);
    background-size:220% auto;
    -webkit-background-clip:text; background-clip:text;
    -webkit-text-fill-color:transparent; color:transparent;
    animation:m-shimmer 7s linear infinite;
  }
  @keyframes m-shimmer{ to{ background-position:-220% center; } }

  /* ---- hover micro-interactions ---- */
  .cap-item{ transition:background .5s var(--ease), transform .55s var(--ease); }
  .cap-item:hover{ transform:translateY(-5px); }
  .layer{ transition:background .5s var(--ease), transform .5s var(--ease); }
  .layer:hover{ transform:translateX(7px); }
  .stat{ transition:transform .55s var(--ease); }
  .stat:hover{ transform:translateY(-5px); }
  .trio-row{ transition:transform .5s var(--ease); }
  .trio-row:hover{ transform:translateX(5px); }
  .prow{ transition:transform .45s var(--ease); }
  .prow:hover{ transform:translateX(5px); }
}

/* ---- scroll progress bar (always on; harmless under reduced motion) ---- */
.scroll-prog{
  position:fixed; top:0; left:0; height:2px; width:100%; z-index:90;
  transform:scaleX(0); transform-origin:left;
  background:linear-gradient(90deg, var(--accent), var(--accent-2));
  box-shadow:0 0 14px var(--accent-glow);
  pointer-events:none;
}

/* ---- hero cursor glow (set via JS; static-safe) ---- */
.hero::before{
  content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0;
  background:radial-gradient(440px circle at var(--mx,50%) var(--my,42%), rgba(194,162,95,.16), transparent 62%);
  transition:opacity .8s var(--ease);
  mix-blend-mode:screen;
}
.hero:hover::before{ opacity:1; }