/* Opening interaction (from opening-interaction_ver2.html) */

/*
  Safari UI色: iOS 26+ は端の fixed の background-color をサンプリングする。
  オープニング終了直後だけ上下白帯を一瞬出して再サンプリング。
  常時表示はしない（コンテンツ上に帯が残るため）。上は .header2 の白背景で維持。
*/
.c-safari-tint {
  display: none;
  position: fixed;
  left: 0;
  width: 100%;
  z-index: 2147483646;
  pointer-events: none;
  background-color: #ffffff;
}
.c-safari-tint--top {
  top: 0;
  height: max(env(safe-area-inset-top, 0px), 12px);
  min-height: 12px;
}
.c-safari-tint--bottom {
  bottom: 0;
  height: max(env(safe-area-inset-bottom, 0px), 15px);
  min-height: 15px;
}
@media screen and (max-width: 767px) {
  html.is-safari-tint-flash .c-safari-tint {
    display: block;
  }
}

html.is-skip-opening .c-opening {
  display: none !important;
  pointer-events: none !important;
}
.c-opening {
  position: fixed;
  inset: 0;
  z-index: 100000;
  /* 青は #curtain 側のみ。親に塗ると lift 時の下部丸みが同色で消える */
  background: transparent;
  pointer-events: auto;
  /* ::after の下部カーブ（画面下にはみ出す）をクリップしない */
  overflow: visible;
}
.c-opening.is-done {
  display: none !important;
  pointer-events: none;
}
.c-opening canvas {
  display: block;
}
.c-opening #bg-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  filter: blur(12px) saturate(1.15);
  transform: scale(1.03);
}
.c-opening #bulb-canvas {
  position: absolute;
  inset: 0;
  z-index: 30;
  pointer-events: none;
}

/* --- curtain / preloader --- */
.c-opening #curtain {
  position: absolute;
  inset: 0;
  z-index: 20;
  background-color: #00a9e0;
  background: #00a9e0;
  font-family: -apple-system, "Hiragino Sans", "Helvetica Neue", Arial, sans-serif;
  will-change: transform;
}
.c-opening #curtain::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  top: calc(100% - 1px);
  height: 22vh;
  background: #00a9e0;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.c-opening #curtain.lift {
  transform: translateY(calc(-100% - 22vh));
  transition: transform 1.35s cubic-bezier(0.76, 0, 0.24, 1);
}

.c-opening #ct-logo-wrap {
  position: absolute;
  top: 48%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(21vw, 190px);
}
.c-opening #ct-logo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}
.c-opening #ct-logo .ltr {
  fill: #ffffff;
  opacity: 0;
  transform: translateY(14px);
  transform-box: fill-box;
  transform-origin: center;
  animation: ct-ltr 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 90ms + 200ms);
}
@keyframes ct-ltr {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (max-width: 768px) {
  .c-opening #ct-logo-wrap {
    width: min(30vw, 150px);
    top: 47%;
  }
  .c-opening #curtain::after {
    left: -70%;
    right: -70%;
    height: 20vh;
    border-radius: 0 0 50% 50% / 0 0 100% 100%;
  }
  .c-opening #curtain.lift {
    transform: translateY(calc(-100% - 20vh));
  }
}