/* =========================================================================
   AETHER Motion — 依存ゼロのモーション部品（CSS）
   JS は「いつ効かせるか」だけを決め、見た目の変化はここで作る。
   ========================================================================= */

:root {
  --am-ease: cubic-bezier(.2, .7, .3, 1);
  --am-dur: .8s;
  --am-marquee-duration: 24s;
}

/* ── 1) reveal ─────────────────────────────────────────────── */
[data-am-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--am-dur) var(--am-ease), transform var(--am-dur) var(--am-ease);
}
[data-am-reveal="left"]  { transform: translateX(-40px); }
[data-am-reveal="right"] { transform: translateX(40px); }
[data-am-reveal="zoom"]  { transform: scale(.92); }
[data-am-reveal="none"]  { transform: none; }
[data-am-reveal].is-in   { opacity: 1; transform: none; }

/* ── 2) split（1文字ずつ） ─────────────────────────────────── */
.am-word { display: inline-block; white-space: nowrap; }
.am-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(.5em);
  transition: opacity .6s var(--am-ease), transform .6s var(--am-ease);
}
[data-am-split].is-in .am-char { opacity: 1; transform: none; }

/* ── 4) mask（下から滑り上がる） ───────────────────────────── */
[data-am-mask] { display: block; overflow: hidden; }
.am-mask__inner {
  display: block;
  transform: translateY(110%);
  transition: transform 1s var(--am-ease);
  will-change: transform;
}
[data-am-mask].is-in .am-mask__inner { transform: none; }

/* ── 5) marker（蛍光ペン） ─────────────────────────────────── */
[data-am-marker] {
  background-image: linear-gradient(color-mix(in srgb, var(--accent) 32%, transparent),
                                    color-mix(in srgb, var(--accent) 32%, transparent));
  background-repeat: no-repeat;
  background-position: 0 88%;
  background-size: 0% .5em;
  transition: background-size .8s var(--am-ease);
  padding: 0 .1em;
}
[data-am-marker].is-in { background-size: 100% .5em; }

/* ── 6) marquee（無限に流れる帯） ──────────────────────────── */
[data-am-marquee] {
  display: flex;
  overflow: hidden;
  white-space: nowrap;
  user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.am-marquee__track {
  display: flex;
  flex: 0 0 auto;
  gap: 1.5em;
  padding-right: 1.5em;
  animation: am-marquee var(--am-marquee-duration) linear infinite;
}
[data-am-marquee]:hover .am-marquee__track { animation-play-state: paused; }
@keyframes am-marquee { to { transform: translateX(-100%); } }

/* ── 7) parallax ───────────────────────────────────────────── */
[data-am-parallax] { will-change: transform; }

/* ── 8) tilt ───────────────────────────────────────────────── */
.am-tilt {
  transition: transform .4s var(--am-ease);
  transform-style: preserve-3d;
}

/* ── 9) magnetic ───────────────────────────────────────────── */
.am-magnetic { transition: transform .5s var(--am-ease); }

/* ── 11) scene（スクロールで世界が切り替わる） ─────────────── */
.am-scene-host {
  position: relative;
  /* シーン数 × 1画面ぶんの高さを確保し、中身を sticky で貼り付ける */
  height: calc(var(--am-scene-count, 2) * 100vh);
}
.am-scene-host > .am-scene {
  position: sticky;
  top: 0;
  height: 100vh;
  margin-bottom: -100vh;   /* 積み重ねる */
  opacity: 0;
  transition: opacity .6s var(--am-ease);
}
.am-scene-host > .am-scene.is-on { opacity: 1; }
.am-scene-host.is-static { height: auto; }
.am-scene-host.is-static > .am-scene {
  position: static; height: auto; margin-bottom: 0; opacity: 1;
}
.am-scene-host.is-static > .am-scene ~ .am-scene { display: none; }

/* ── 12) hscroll（縦スクロールで横に流れる） ───────────────── */
.am-hscroll-host { position: relative; }
.am-hscroll-host > .am-hscroll-sticky {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex; align-items: center;
}
.am-htrack {
  display: flex;
  gap: clamp(16px, 3vw, 40px);
  padding: 0 clamp(20px, 6vw, 60px);
  will-change: transform;
}
.am-htrack > * { flex: 0 0 auto; }
/* モバイル・省モーションでは普通の横スクロールに */
.am-hscroll-host.is-native { height: auto !important; }
.am-hscroll-host.is-native > .am-hscroll-sticky { position: static; height: auto; overflow-x: auto; }
.am-hscroll-host.is-native .am-htrack { transform: none !important; }

/* ── 13) skew ──────────────────────────────────────────────── */
[data-am-skew] { will-change: transform; }

/* ── 14) cursor（追従ドット） ──────────────────────────────── */
.am-cursor {
  position: fixed; left: 0; top: 0; z-index: 9999;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  mix-blend-mode: difference;
  transition: width .25s var(--am-ease), height .25s var(--am-ease), opacity .25s;
}
.am-cursor.is-active { width: 40px; height: 40px; opacity: .7; }
/* 端末にマウスが無いときは出さない */
@media (hover: none), (pointer: coarse) { .am-cursor { display: none; } }

/* ── 省モーション：全部止めて最終状態で見せる ──────────────── */
@media (prefers-reduced-motion: reduce) {
  [data-am-reveal],
  [data-am-reveal].is-in { opacity: 1; transform: none; transition: none; }
  .am-char { opacity: 1; transform: none; transition: none; }
  .am-mask__inner { transform: none; transition: none; will-change: auto; }
  [data-am-marker] { background-size: 100% .5em; transition: none; }
  .am-marquee__track { animation: none; }
  [data-am-parallax], [data-am-skew] { transform: none !important; will-change: auto; }
  .am-tilt, .am-magnetic { transform: none !important; transition: none; }
  .am-cursor { display: none; }
}