/* SemanticMind V1.2 — scroll-led motion system
   Calm, editorial reveals inspired by premium product storytelling.
   Motion supports hierarchy; it never blocks content or interaction. */

:root{
  --motion-ease:cubic-bezier(.16,1,.3,1);
  --motion-ease-soft:cubic-bezier(.22,1,.36,1);
}

/* The base page styles already contain a simple reveal fallback.
   These rules refine it once JavaScript has opted the page into motion. */
html.motion-ready .reveal{
  opacity:0;
  transform:translate3d(0,44px,0) scale(.992);
  filter:blur(4px);
  transition:
    opacity .82s var(--motion-ease),
    transform 1.08s var(--motion-ease),
    filter .82s var(--motion-ease);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform,filter;
}

html.motion-ready .reveal.in-view{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}

/* Graphic stages arrive a little more spatially than copy. */
html.motion-ready .reveal[data-reveal="visual"]{
  transform:translate3d(0,26px,0) scale(.965);
  filter:blur(2px);
  clip-path:inset(3.5% 4.5% 3.5% 4.5%);
  transition:
    opacity .9s var(--motion-ease),
    transform 1.25s var(--motion-ease),
    filter .95s var(--motion-ease),
    clip-path 1.25s var(--motion-ease);
}
html.motion-ready .reveal[data-reveal="visual"].in-view{
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
  clip-path:inset(0 0 0 0);
}

/* Copy builds in line by line after the parent enters the viewport. */
html.motion-ready .reveal .reveal-part{
  opacity:0;
  transform:translate3d(0,18px,0);
  transition:
    opacity .62s var(--motion-ease-soft),
    transform .82s var(--motion-ease);
  transition-delay:0ms;
}
html.motion-ready .reveal.in-view .reveal-part{
  opacity:1;
  transform:translate3d(0,0,0);
  transition-delay:calc(90ms + (var(--reveal-order,0) * 78ms));
}

/* Repeated items use a restrained cascade instead of arriving all at once. */
html.motion-ready .reveal .reveal-item{
  opacity:0;
  transform:translate3d(0,24px,0) scale(.985);
  transition:
    opacity .62s var(--motion-ease-soft),
    transform .9s var(--motion-ease);
  transition-delay:0ms;
}
html.motion-ready .reveal.in-view .reveal-item{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  transition-delay:calc(110ms + (var(--reveal-order,0) * 86ms));
}

/* Long case-study chapters are grouped at runtime and revealed as reading units. */
html.motion-ready .scroll-block.reveal{
  transform:translate3d(0,30px,0);
  filter:none;
  transition-duration:.72s,.92s,0s;
}
html.motion-ready .scroll-block.reveal.in-view{
  transform:translate3d(0,0,0);
}

/* The left rail should feel anchored while the article moves past it. */
html.motion-ready .projection-origin.reveal{
  transform:translate3d(0,22px,0);
}

@media(max-width:780px){
  html.motion-ready .reveal{
    transform:translate3d(0,28px,0);
    filter:none;
  }
  html.motion-ready .reveal[data-reveal="visual"]{
    transform:translate3d(0,18px,0) scale(.98);
    filter:none;
    clip-path:inset(2% 2% 2% 2%);
  }
  html.motion-ready .reveal .reveal-part{
    transform:translate3d(0,12px,0);
  }
}

@media(prefers-reduced-motion:reduce){
  html.motion-ready .reveal,
  html.motion-ready .reveal[data-reveal="visual"],
  html.motion-ready .reveal .reveal-part,
  html.motion-ready .reveal .reveal-item,
  html.motion-ready .scroll-block.reveal{
    opacity:1!important;
    transform:none!important;
    filter:none!important;
    clip-path:none!important;
    transition:none!important;
  }
}

/* Keep the typography of dynamically grouped long-form case sections stable. */
.scroll-block{display:flow-root}
.original-rendered > section > .scroll-block:first-child > h2:first-child{margin-top:0}


/* V1.3 — restrained scroll depth
   `translate` is intentionally separate from `transform`, allowing the depth
   movement to layer cleanly underneath the reveal animation. */
.parallax-layer{
  --parallax-y:0px;
  translate:0 var(--parallax-y);
  will-change:translate;
}

/* Decorative geometry should feel weightless rather than interactive. */
.architecture-hero .parallax-layer,
.perspective-stage .parallax-layer,
.clarity-stage .parallax-layer,
.action-stage .parallax-layer,
.actor-stage .parallax-layer,
.perspectives-map .parallax-layer,
.explicit-map .parallax-layer,
.action-map .parallax-layer,
.actor-map .parallax-layer,
.stage .parallax-layer{
  pointer-events:none;
}

@media(max-width:780px){
  .parallax-layer{will-change:auto}
}

@media(prefers-reduced-motion:reduce){
  .parallax-layer{
    translate:none!important;
    will-change:auto!important;
  }
}