/* marquee-wall.css — works.html ヒーロー背景の斜めマーキー
   見た目の調整は、下の .mq の変数だけで行う。
   素材は assets/marquee/（丸ごと差し替え可）。このファイルと marquee-wall.js は素材フォルダの外に置く。 */

.works-hero{position:relative;overflow:hidden;isolation:isolate}
.works-hero>.container{position:relative;z-index:2}

.mq{
  --tilt:30deg;        /* 傾き（右に倒す＝正の値） */
  --tile-w:150px;      /* コマの幅 */
  --gap:14px;          /* コマの間隔 */
  --veil:250,248,244;  /* 紙色（#FAF8F4）のRGB。文字の可読性を守るベール */
  position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;contain:layout paint;
  opacity:0;transition:opacity 1.2s ease;
}
.mq.ready{opacity:1}

.mq-wall{position:absolute;left:50%;top:50%;display:flex;gap:var(--gap);
  transform:translate(-50%,-50%) rotate(var(--tilt));transform-origin:50% 50%}
.mq-col{flex:0 0 var(--tile-w);width:var(--tile-w)}
.mq-track{display:block;will-change:transform;animation:mq-up var(--dur,80s) linear infinite}
.mq-col.rev .mq-track{animation-name:mq-down}
.mq.paused .mq-track{animation-play-state:paused}
@keyframes mq-up{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes mq-down{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}

/* 間隔は gap ではなく margin-bottom で取る（-50% でぴったり1周させるため） */
.mq-tile{position:relative;width:100%;aspect-ratio:9/16;margin-bottom:var(--gap);
  border-radius:12px;overflow:hidden;box-shadow:0 6px 18px rgba(35,39,43,.14);transform:translateZ(0)}
.mq-tile img,.mq-tile video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.mq-tile video{opacity:0;transition:opacity .5s ease}
.mq-tile.on video{opacity:1}

/* ベール（PC）：左＝文字側は紙色でほぼ消し、右35%ほどに壁を見せる。下端は次のセクションへ溶かす */
.mq::after{content:"";position:absolute;inset:0;background:
  linear-gradient(180deg,rgba(var(--veil),0) 70%,rgba(var(--veil),1) 100%),
  linear-gradient(90deg,rgba(var(--veil),.95) 0%,rgba(var(--veil),.93) 60%,rgba(var(--veil),.32) 82%,rgba(var(--veil),.12) 100%)}

/* ベール（タブレット・スマホ）：文字が全幅に広がるので、上の余白帯で見せ、文字の背後は薄い質感に留める */
@media(max-width:1100px){
  .mq{--tile-w:104px;--gap:12px}
  .mq-tile{border-radius:9px}
  .mq::after{background:
    linear-gradient(180deg,rgba(var(--veil),0) 78%,rgba(var(--veil),1) 100%),
    linear-gradient(180deg,rgba(var(--veil),.28) 0,rgba(var(--veil),.28) 96px,rgba(var(--veil),.86) 164px,rgba(var(--veil),.86) 100%)}
}

/* 一時停止ボタン（動き続ける装飾には止める手段を用意する） */
.mq-toggle{display:none;position:absolute;right:18px;bottom:12px;z-index:3;width:34px;height:34px;padding:0;
  border-radius:50%;border:1.5px solid var(--line,#E7E2DA);background:rgba(255,255,255,.92);
  color:var(--sumi,#23272B);cursor:pointer;align-items:center;justify-content:center;transition:transform .2s}
.mq.ready + .mq-toggle{display:flex}
/* スマホ・タブレットでは出さない（壁は上の帯と薄い質感だけで動きが控えめ。ボタンがフィルタの近くで邪魔になるため） */
@media(max-width:1100px){.mq.ready + .mq-toggle{display:none}}
.mq-toggle:hover{transform:translateY(-1px)}
.mq-toggle svg{width:14px;height:14px;display:block}
.mq-toggle .i-play{display:none}
.mq-toggle[aria-pressed="true"] .i-pause{display:none}
.mq-toggle[aria-pressed="true"] .i-play{display:block}

/* 「動きを減らす」設定の端末では、流れを止めて静止した壁にする（動画再生も JS 側で行わない） */
@media (prefers-reduced-motion: reduce){
  .mq{transition:none}
  .mq-track{animation:none!important}
  .mq.ready + .mq-toggle{display:none}
}