/* SITE 54 EDITORIAL MOSAIC — motion（reveal / parallax の初期状態と遷移） */

/* reveal: 初期は隠し、is-in で表示。原則1回再生 */
[data-reveal]{opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease),clip-path .8s var(--ease)}
[data-reveal="fade-up"]{transform:translateY(28px)}
[data-reveal="fade-left"]{transform:translateX(-28px)}
[data-reveal="fade-right"]{transform:translateX(28px)}
[data-reveal="fade-in"]{transform:none}
[data-reveal="mask"]{opacity:1;clip-path:inset(0 100% 0 0)}      /* 写真のマスク表示（左→右で現れる） */
[data-reveal].is-in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}

/* group stagger（子に順次ディレイ。JSが --i を付与） */
[data-reveal-group]>*{opacity:0;transform:translateY(22px);transition:opacity .66s var(--ease),transform .66s var(--ease);transition-delay:calc(var(--i,0)*70ms)}
[data-reveal-group].is-in>*{opacity:1;transform:none}

/* parallax: transform は JS が rAF で付与（background-attachment:fixed 非依存） */
[data-parallax]{will-change:transform}

/* burger open state */
.drawer.is-open ~ .hdr .burger span,
.burger.is-active span{background:transparent}
.burger.is-active span::before{top:0;transform:rotate(45deg)}
.burger.is-active span::after{top:0;transform:rotate(-45deg)}

/* reduced motion: すべて即時・パララックス停止 */
@media(prefers-reduced-motion:reduce){
  [data-reveal],[data-reveal-group]>*{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
  [data-parallax]{transform:none!important}
  .progress{transition:none}
  *{scroll-behavior:auto!important}
}