@charset "UTF-8";

/* ===== Intro Animation v2 ===== */
html { overflow-y: scroll; }
body.is-intro-locked {
  overflow: hidden !important;
  height: 100% !important;
  touch-action: none;
  position: fixed;
  width: 100%;
}

/* オーバーレイ全体 */
.intro-animation {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 99999;
  background: #ffffff;
  overflow: hidden;
  transition: transform 0.7s cubic-bezier(0.85, 0, 0.15, 1);
  will-change: transform;
}
.intro-animation.is-curtain-up {
  transform: translateY(-100%);
}


/* ロゴラッパー（2枚重ね：案A 塗りつぶし演出）
   z-index 5 で紺ブロック(3)・catch(4) より前面に置き、
   紺の上にロゴが乗ったまま透けて消えていくのが見えるように */
.intro-animation__logo-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 620px;
  max-width: 48vw;
  transform: translate(-50%, -50%);
  z-index: 3;
  opacity: 0;
  transition: opacity 0.5s ease-out;
}
.intro-animation__logo-wrap.is-visible { opacity: 1; }
.intro-animation__logo-wrap.is-hidden {
  opacity: 0;
  transition: opacity 0.55s ease-in;   /* 紺の拡大と重なって消えるよう、長めにフェードアウト */
}
.intro-animation__logo {
  display: block;
  width: 100%;
  height: auto;
}
/* 下層 = 薄いゴースト、上層 = 通常色を clip-path で左→右に reveal */
.intro-animation__logo--ghost {
  opacity: 0.18;
  filter: grayscale(1);
}
.intro-animation__logo--fill {
  position: absolute;
  top: 0;
  left: 0;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
  transition: clip-path 1.3s cubic-bezier(0.7, 0, 0.2, 1);
}
.intro-animation__logo--fill.is-filled {
  clip-path: inset(0 0 0 0);
}

/* #171c61 の四角い箱：中心の 1px から上下左右に拡大 */
.intro-animation__box {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  background-color: #171c61;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  z-index: 3;
  transition:
    width 1.05s cubic-bezier(0.85, 0, 0.15, 1),
    height 1.05s cubic-bezier(0.85, 0, 0.15, 1);
  will-change: width, height;
}
/* 中心固定で上下左右に拡大（200vmax で確実にビューポートを覆う） */
.intro-animation__box.is-fullscreen {
  width: 200vmax;
  height: 200vmax;
}

/* catch.png：マスクで左から文字をスムーズに reveal */
.intro-animation__catch {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 960px;
  max-width: 86vw;
  transform: translate(-50%, -50%);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease-out;
}
.intro-animation__catch.is-visible { opacity: 1; }
.intro-animation__catch-img {
  display: block;
  width: 100%;
  height: auto;
  mix-blend-mode: screen;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.15s cubic-bezier(0.45, 0, 0.25, 1);
  will-change: clip-path;
}
.intro-animation__catch.is-revealed .intro-animation__catch-img {
  clip-path: inset(0 0 0 0);
}

/* 案E: サイト本体の浮き上がり（幕上げと並行） */
body.is-intro-revealing .hero .hero__mainvisual {
  animation: introHeroRise 1.3s cubic-bezier(0.2, 0.7, 0.2, 1) both !important;
}
@keyframes introHeroRise {
  0%   { transform: translateY(80px) scale(1.10); opacity: 0; }
  100% { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* SP 調整 */
@media (max-width: 768px) {
  .intro-animation__logo-wrap { width: 78vw; max-width: 360px; }
  .intro-animation__catch { width: 90vw; max-width: 420px; }
}