/* =========================================================
   CIELO DESIGN | Loading 画面 スタイル
   ========================================================= */

:root {
  --cl-bg: #ffffff;
  --cl-text: #a8c3bb;
  --cl-fade: 900ms;
  --cl-letter-gap: 0.08s;
  --cl-logo-height: 280px;
}

html.cl-loading,
html.cl-loading body {
  overflow: hidden;
  height: 100%;
}

/* Loading中はKV本体を隠す */
html.cl-loading .fv__video,
html.cl-loading .fv__overlay,
html.cl-loading .fv__subtitle,
html.cl-loading .fv__logo-main,
html.cl-loading .fv__logo2 {
  opacity: 0;
  visibility: hidden;
}

/* ---- オーバーレイ ---- */
.cl-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 28px;
  background: var(--cl-bg);
  opacity: 1;
  visibility: visible;
  transition: opacity var(--cl-fade) ease, background var(--cl-fade) ease, visibility 0s linear var(--cl-fade);
}

.cl-overlay.is-bg-hide {
  background: transparent;
}

.cl-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* ---- ローディング中のCロゴ（fv-logo2.webp）---- */
.cl-logo {
  width: auto;
  height: var(--cl-logo-height);
  transform: scale(1);
  transition: transform 0.95s cubic-bezier(0.22, 0.72, 0.18, 1);
  will-change: transform;
}

.cl-logo-img {
  display: block;
  width: auto;
  height: var(--cl-logo-height);
  object-fit: contain;
  transform-origin: center center;
  animation: cl-logo-breathe 2.6s ease-in-out infinite;
}

@keyframes cl-logo-breathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.07); }
}

.cl-overlay.is-to-kv .cl-logo {
  transition: transform 0.95s cubic-bezier(0.22, 0.72, 0.18, 1);
}

.cl-overlay.is-to-kv .cl-logo-img {
  animation: none;
  transform: scale(1);
}

/* ---- Loading テキスト ---- */
.cl-text {
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  font-size: 16px;
  letter-spacing: 0.35em;
  color: var(--cl-text);
  user-select: none;
  transition: opacity 0.35s ease;
}

.cl-overlay.is-to-kv .cl-text {
  opacity: 0;
}

.cl-dots span {
  display: inline-block;
  letter-spacing: 0;
  animation: cl-dot-wave 1.4s ease-in-out infinite;
}

.cl-dots span:nth-child(1) {
  animation-delay: 0s;
}

.cl-dots span:nth-child(2) {
  animation-delay: 0.18s;
}

.cl-dots span:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes cl-dot-wave {
  0%, 70%, 100% {
    transform: translateY(0);
    opacity: 0.3;
  }
  35% {
    transform: translateY(-5px);
    opacity: 1;
  }
}

/* =========================================================
   KVテキスト: 1文字ずつ左から落下
   ========================================================= */
.fv__logo-main {
  display: inline-block;
}

.fv__logo-main .cl-letter {
  display: inline-block;
  opacity: 0;
  transform: translate(-88px, -120px) rotate(-10deg);
}

body.cl-kv-text-ready .fv__logo-main .cl-letter {
  animation: cl-letter-drop 0.78s cubic-bezier(0.2, 0.9, 0.25, 1.12) both;
}

body.cl-kv-text-ready .fv__logo-main .cl-letter--space {
  animation: none;
  opacity: 1;
  transform: none;
}

@keyframes cl-letter-drop {
  0% {
    opacity: 0;
    transform: translate(-88px, -120px) rotate(-10deg);
  }
  68% {
    opacity: 1;
    transform: translate(8px, 10px) rotate(2deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
}

/* KV表示後のフェードイン */
body.cl-kv-transition .fv__video,
body.cl-kv-visible .fv__video,
body.cl-kv-transition .fv__subtitle,
body.cl-kv-visible .fv__subtitle {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.8s ease;
}

body.cl-kv-transition .fv__subtitle,
body.cl-kv-visible .fv__subtitle {
  transition-delay: 0.55s;
}

.fv__logo2 {
  display: none;
}

/* 遷移中: 移動先の座標だけ確保（非表示） */
body.cl-kv-transition .fv__logo2,
body.cl-kv-visible .fv__logo2 {
  display: inline-block;
  position: absolute;
  top: calc(86vh - 180px);
  right: 0;
}

body.cl-kv-transition .fv__logo2 {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* 移動完了後に表示 */
body.cl-kv-visible .fv__logo2 {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease;
}

body.cl-kv-transition .fv__logo2 img,
body.cl-kv-visible .fv__logo2 img {
  width: auto;
  height: var(--cl-logo-height);
  aspect-ratio: 210/280;
  object-fit: contain;
}

/* KV表示時は黒オーバーレイを外す */
body.cl-kv-transition .fv__overlay,
body.cl-kv-visible .fv__overlay {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

body.cl-kv-visible .fv__logo-main {
  opacity: 1;
  visibility: visible;
}

@media (max-width: 1260px) {
  :root {
    --cl-logo-height: min(280px, 22.222222222vw);
  }
}

@media (max-width: 768px) {
  :root {
    --cl-logo-height: 42.666666667vw;
  }

  body.cl-kv-transition .fv__logo2,
  body.cl-kv-visible .fv__logo2 {
    top: 118vw;
  }

  body.cl-kv-visible .fv__logo2 img {
    margin-left: -8%;
  }
}

/* =========================================================
   アクセシビリティ
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  .cl-logo-img { animation: none; }
  .cl-dots span { animation: none; opacity: 1; transform: none; }
  .cl-overlay { transition: opacity 200ms linear; }
  .fv__logo-main .cl-letter {
    opacity: 1;
    transform: none;
    animation: none;
  }
  html.cl-loading .fv__video,
  html.cl-loading .fv__overlay,
  html.cl-loading .fv__subtitle,
  html.cl-loading .fv__logo-main,
  html.cl-loading .fv__logo2 {
    opacity: 1;
    visibility: visible;
  }
}