/* =========================================================
   演出
   クラスや data 属性を付けるだけで使えるようにしてある。
   JS が必要なものは対応するファイル名を書いている。
   ========================================================= */

/* ---------------------------------------------------------
   ローディング（js/effects/loading.js）
   読み込みが終わると body が is-loading → is-loaded になる
   --------------------------------------------------------- */
.loading {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 16px;
  background: var(--color-bg);
  transition: opacity .8s var(--ease-out), visibility .8s;
  /* JSが動かなくても5秒で消える保険 */
  animation: loadingFailsafe 0s 5s forwards;
}

body.is-loaded .loading {
  opacity: 0;
  visibility: hidden;
}

.loading_logo {
  font-family: var(--font-en);
  font-size: 20px;
  letter-spacing: .4em;
  color: var(--color-dark);
  animation: loadingFadeUp 1s var(--ease-out) both;
}

.loading_bar {
  position: relative;
  width: 120px;
  height: 1px;
  overflow: hidden;
  background: var(--color-line);
}

.loading_bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  animation: loadingBar 1.2s var(--ease-io) forwards;
}

@keyframes loadingBar {
  to { transform: scaleX(1); }
}

@keyframes loadingFailsafe {
  to { opacity: 0; visibility: hidden; }
}

@keyframes loadingFadeUp {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}

/* ---------------------------------------------------------
   読み込み完了でフェード：.js-load
   スクロールで画面に入ったらフェード：.js-fade（js/effects/fade-in.js）
   時間差は style="--delay: .2s"
   --------------------------------------------------------- */
.js .js-load {
  opacity: 0;
  transition: opacity 1.2s var(--ease-out) var(--delay, 0s);
}

body.is-loaded .js-load {
  opacity: 1;
}

.js .js-fade {
  opacity: 0;
  translate: 0 40px;
  transition:
    opacity var(--duration) var(--ease-out) var(--delay, 0s),
    translate var(--duration) var(--ease-out) var(--delay, 0s);
}

.js .js-fade.is-in {
  opacity: 1;
  translate: 0 0;
}

/* ---------------------------------------------------------
   文字が下からせり上がる：.text-rise > span
   .js-load または .js-fade の中に置くと、親と一緒に発火する
   1行ずつずらすときは style="--rise-delay: .45s"
   --------------------------------------------------------- */
.text-rise {
  display: block;
  overflow: hidden;
}

.text-rise > span {
  display: inline-block;
}

.js .text-rise > span {
  translate: 0 110%;
  transition: translate 1.2s var(--ease-out) var(--rise-delay, .3s);
}

body.is-loaded .js-load .text-rise > span,
.is-in .text-rise > span {
  translate: 0 0;
}

/* ---------------------------------------------------------
   画像リビール：.js-fade の中の .img-reveal
   画像が下から現れ、アクセント色の線がその縁を走る
   --------------------------------------------------------- */
.img-reveal {
  position: relative;
  overflow: hidden;
}

.js .img-reveal {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.2s var(--ease-io) .2s;
}

.js .img-reveal::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 100%;
  z-index: 2;
  height: 4px;
  background: var(--color-accent);
  transition: top 1.2s var(--ease-io) .2s;
}

.js .img-reveal > * {
  scale: 1.25;
  transition: scale 1.6s var(--ease-out) .2s;
}

.js .is-in .img-reveal { clip-path: inset(0); }
.js .is-in .img-reveal::before { top: -4px; }
.js .is-in .img-reveal > * { scale: 1; }

/* ---------------------------------------------------------
   フェードで切り替わるスライド：.fade-slides > .fade-slides_item
   CSSだけで動く。3枚 × 6秒 = 18秒で一周（--i は 0,1,2）
   枚数を変えるときは animation の秒数と keyframes の % を変える
   --------------------------------------------------------- */
.fade-slides {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.fade-slides_item {
  position: absolute;
  inset: 0;
  opacity: 0;
  animation: fadeSlides 18s linear infinite;
  animation-delay: calc(var(--i) * 6s);
}

@keyframes fadeSlides {
  0% { opacity: 0; scale: 1.12; }
  8% { opacity: 1; }
  33% { opacity: 1; }
  41% { opacity: 0; scale: 1; }
  100% { opacity: 0; scale: 1; }
}

/* ---------------------------------------------------------
   背景動画：.bg-video > video.js-bg-video（js/effects/bg-video.js）
   親に position: relative、上に重ねる文字には z-index を付ける
   .bg-video--mask を足すと SVG の形で切り抜く
   （形は assets/img/bg-video-mask.svg と -sp.svg を差し替えて変える）
   --------------------------------------------------------- */
.bg-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.bg-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bg-video--mask {
  mask: url(../assets/img/bg-video-mask.svg) no-repeat center / cover;
}

@media (max-width: 768px) {
  .bg-video--mask {
    mask-image: url(../assets/img/bg-video-mask-sp.svg);
  }
}

/* ---------------------------------------------------------
   スクロールで広がる窓（js/effects/reveal-window.js）
   .reveal-window の高さぶんスクロールする間、画面に貼り付いて広がる
   --------------------------------------------------------- */
.reveal-window {
  position: relative;
  height: 220vh;
  background: var(--color-dark);
}

.reveal-window_sticky {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100vh;
  overflow: hidden;
}

.reveal-window_frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.reveal-window_frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(7, 26, 51, .35);
}

.reveal-window_img {
  position: absolute;
  inset: 0;
}

.reveal-window_txt {
  position: relative;
  z-index: 2;
  padding-inline: 16px;
  color: var(--white);
  text-align: center;
}

/* ---------------------------------------------------------
   文字の形に切り抜いたマーキー：.mask-marquee > .mask-marquee_text
   文字は --text-svg の SVG 内の text を書き換える
   （file:// でも動くように data URI にしている）
   --------------------------------------------------------- */
.mask-marquee {
  padding-block: clamp(40px, 8vw, 96px);
  overflow: hidden;
  background: var(--color-dark);
}

.mask-marquee_text {
  --tile-h: clamp(90px, 16vw, 220px);
  --tile-w: calc(var(--tile-h) * 8); /* SVG の縦横比 2400:300 = 8:1 */
  --text-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 2400 300'%3E%3Ctext x='0' y='232' font-family='Georgia, serif' font-size='230' textLength='2300' lengthAdjust='spacingAndGlyphs'%3EWORLDWIDE ESTATE%3C/text%3E%3C/svg%3E");
  height: var(--tile-h);
  background: linear-gradient(110deg, #e9c46a, var(--color-accent) 30%, #8ecae6 60%, #e9c46a);
  background-size: 200% 100%;
  -webkit-mask-image: var(--text-svg);
  mask-image: var(--text-svg);
  -webkit-mask-repeat: repeat-x;
  mask-repeat: repeat-x;
  -webkit-mask-size: var(--tile-w) var(--tile-h);
  mask-size: var(--tile-w) var(--tile-h);
  animation: maskMarquee 30s linear infinite, maskMarqueeBg 8s ease-in-out infinite alternate;
}

@keyframes maskMarquee {
  from { -webkit-mask-position: 0 0; mask-position: 0 0; }
  to { -webkit-mask-position: calc(var(--tile-w) * -1) 0; mask-position: calc(var(--tile-w) * -1) 0; }
}

@keyframes maskMarqueeBg {
  from { background-position: 0% 0; }
  to { background-position: 100% 0; }
}

/* ---------------------------------------------------------
   無限ループ：.loop.js-loop > ul.loop_track（js/effects/loop.js が列を複製）
   速さは style="--loop-duration: 20s"
   --------------------------------------------------------- */
.loop {
  display: flex;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}

.loop_track {
  display: flex;
  flex-shrink: 0;
  animation: loopX var(--loop-duration, 40s) linear infinite;
}

.loop:hover .loop_track {
  animation-play-state: paused;
}

.loop_track li {
  display: flex;
  align-items: center;
  gap: .6em;
  padding-right: .6em;
  font-family: var(--font-en);
  font-size: clamp(32px, 6vw, 80px);
  font-weight: 300;
  letter-spacing: .1em;
  white-space: nowrap;
}

.loop_track li::after {
  content: "";
  width: .18em;
  height: .18em;
  border-radius: 50%;
  background: var(--color-accent);
}

@keyframes loopX {
  to { translate: -100% 0; }
}

/* 大きな英字を流す：.loop.loop--display（色は --loop-color、大きさは --loop-fz） */
.loop--display {
  -webkit-mask-image: none;
  mask-image: none;
  pointer-events: none;
}

.loop--display .loop_track li {
  padding-right: .4em;
  font-size: var(--loop-fz, clamp(64px, 10vw, 144px));
  font-weight: 700;
  line-height: 1;
  letter-spacing: .04em;
  color: var(--loop-color, var(--white));
}

.loop--display .loop_track li::after {
  display: none;
}

/* 写真を流す：.loop.loop--photos（写真の幅は --photo-w） */
.loop--photos .loop_track {
  gap: 16px;
  padding-right: 16px;
}

.loop--photos .loop_track li {
  padding: 0;
}

.loop--photos .loop_track li::after {
  display: none;
}

.loop--photos .loop_track li > * {
  width: var(--photo-w, 240px);
  height: auto; /* <img height="…"> の高さを打ち消して 3:2 にする */
  aspect-ratio: 3 / 2;
  border-radius: 10px;
  object-fit: cover;
}

/* ---------------------------------------------------------
   パララックス：data-parallax="-8"（js/effects/parallax.js）
   動かす要素は親より上下に大きくしておく（例：inset: -12% 0）
   --------------------------------------------------------- */
[data-parallax] {
  will-change: transform;
}

/* ---------------------------------------------------------
   曲線の縁：.wave（下の縁）／.wave.wave--top（上の縁）
   --wave-color に「隣のセクションの背景色」を入れると、その色で波形に切り取られて見える
   --------------------------------------------------------- */
.wave {
  position: relative;
}

.wave::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -1px;
  z-index: 1;
  height: var(--wave-h, clamp(40px, 7vw, 110px));
  background: var(--wave-color, var(--color-bg));
  -webkit-mask: var(--wave-svg) center bottom / 100% 100% no-repeat;
  mask: var(--wave-svg) center bottom / 100% 100% no-repeat;
  scale: var(--wave-sx, 1) var(--wave-sy, 1);
  pointer-events: none;
  --wave-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 120V78C260 10 560-6 820 38s420 74 620 4v78z'/%3E%3C/svg%3E");
}

.wave--top::after {
  top: -1px;
  bottom: auto;
  --wave-sy: -1;
}

/* 波の向きを左右反対にする */
.wave--flip::after {
  --wave-sx: -1;
}

/* ---------------------------------------------------------
   「動きを減らす」設定の人には演出を止める
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0s !important;
  }

  .fade-slides_item,
  .mask-marquee_text {
    animation: none !important;
  }

  .fade-slides_item:first-child {
    opacity: 1;
  }
}