@charset "utf-8";

.site-opening {
  position: fixed;
  inset: 0;
  z-index: var(--opening-z);
  background: #000;
  overflow: hidden;
  transition:
    opacity 1.2s var(--ease-main),
    visibility 1.2s var(--ease-main);
}

.site-opening.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.site-opening__skip {
  position: absolute;
  top: max(100px, env(safe-area-inset-top));
  right: max(100px, env(safe-area-inset-right));
  z-index: 30;
  min-width: 66px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.26);
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.86);
  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(8px);
  transition:
    background-color var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    opacity var(--dur-fast) ease;
}

.site-opening__skip:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.44);
}

.site-opening__stage {
  position: absolute;
  inset: 0;
}

.site-opening__noise {
  position: absolute;
  inset: -10%;
  z-index: 1;
  opacity: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08), transparent 18%),
    radial-gradient(circle at 70% 40%, rgba(255,255,255,0.05), transparent 16%),
    radial-gradient(circle at 40% 70%, rgba(255,255,255,0.04), transparent 18%);
  mix-blend-mode: screen;
  filter: blur(12px) contrast(135%);
  transform: scale(1.08);
}

.site-opening.is-noise-active .site-opening__noise {
  opacity: 0.82;
  animation: opNoisePulse 1.25s linear infinite;
}

@keyframes opNoisePulse {
  0% {
    transform: scale(1.08) translate3d(0, 0, 0);
    opacity: 0.04;
  }
  8% {
    transform: scale(1.095) translate3d(-0.9%, 0.4%, 0);
    opacity: 0.52;
  }
  12% {
    transform: scale(1.07) translate3d(0.5%, -0.3%, 0);
    opacity: 0.12;
  }
  28% {
    transform: scale(1.08) translate3d(0, 0, 0);
    opacity: 0.03;
  }
  38% {
    transform: scale(1.092) translate3d(0.7%, -0.5%, 0);
    opacity: 0.46;
  }
  42% {
    transform: scale(1.07) translate3d(-0.4%, 0.3%, 0);
    opacity: 0.1;
  }
  68% {
    transform: scale(1.08) translate3d(0, 0, 0);
    opacity: 0.02;
  }
  78% {
    transform: scale(1.094) translate3d(-0.6%, 0.6%, 0);
    opacity: 0.42;
  }
  82% {
    transform: scale(1.075) translate3d(0.4%, -0.4%, 0);
    opacity: 0.08;
  }
  100% {
    transform: scale(1.08) translate3d(0, 0, 0);
    opacity: 0.03;
  }
}

/* first copy */
.op-copyintro {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 20px;
  padding: 24px;
}

.op-copyintro.is-fading {
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition:
    opacity 1.65s var(--ease-main),
    transform 1.65s var(--ease-main);
}

.op-copyintro__line {
  margin: 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.98);
  font-size: clamp(24px, 3.4vw, 42px);
  line-height: 1.22;
  letter-spacing: 0.08em;
  font-weight: 400;
  font-family:
    "Shippori Mincho",
    "Noto Serif JP",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;
}

.op-copyintro__char {
  display: inline-block;
  opacity: 0;
  filter: blur(12px);
  transform: translate3d(0, 0, 0);
  will-change: opacity, filter, transform;
}

.op-copyintro.is-active .op-copyintro__char.is-visible {
  opacity: 1;
  filter: blur(0);
  transition:
    opacity 0.45s var(--ease-main),
    filter 0.55s var(--ease-main);
}

/* movie */
.op-movieblock {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.72s var(--ease-main),
    visibility 0s linear 0.72s;
}

.op-movieblock.is-active {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.72s var(--ease-main),
    visibility 0s linear 0s;
}

.op-movieblock__frame {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #050505;
}

.op-webgl {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0.5;
}

.op-movieblock__video-source {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  left: -9999px;
  top: -9999px;
}

/* lead */
.op-lead {
  position: absolute;
  inset: 0;
  z-index: 8;

  overflow: hidden;
  pointer-events: none;
  opacity: 0;

  display: block;

  /*
    中央より下だけ見える。
    下から入ってきた文字が、画面中央付近でグラデーション消失する。
  */
  -webkit-mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 48%,
    rgba(0,0,0,0.25) 53%,
    rgba(0,0,0,1) 63%,
    rgba(0,0,0,1) 88%,
    rgba(0,0,0,0) 100%
  );
  mask-image: linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    rgba(0,0,0,0) 48%,
    rgba(0,0,0,0.25) 53%,
    rgba(0,0,0,1) 63%,
    rgba(0,0,0,1) 88%,
    rgba(0,0,0,0) 100%
  );
}

.op-lead.is-active {
  opacity: 1;
  transition: opacity 0.35s ease;
}

.op-lead__scroll {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;

  gap: 0.42em;
  padding: 0 8vw;

  transform: translate3d(0, 100svh, 0);
  will-change: transform;
}

.op-lead.is-active .op-lead__scroll {
  animation: opLeadScrollBlock 19s linear forwards;
}

.op-lead__line {
  position: relative;
  display: block;

  margin: 0.15em 0;
  width: fit-content;
  max-width: min(980px, calc(100vw - 120px));

  color: rgba(255, 255, 255, 0.96);
  text-align: center;

  font-size: clamp(14px, 1.08vw, 18px);
  line-height: 1.85;
  letter-spacing: 0.08em;

  opacity: 1;
  filter: none;
  transform: none;
  animation: none !important;

  font-family:
  "Shippori Mincho",
  "Noto Serif JP",
  "Yu Mincho",
  "Hiragino Mincho ProN",
  serif;
  
  text-shadow:
    0 2px 6px rgba(0,0,0,0.6),
    0 8px 24px rgba(0,0,0,0.55),
    0 0 40px rgba(0,0,0,0.4);
}

@keyframes opLeadScrollBlock {
  0% {
    transform: translate3d(0, 100svh, 0);
  }

  100% {
    transform: translate3d(0, calc(42svh - 100%), 0);
  }
}

.op-lead.is-fading {
  opacity: 0;
  filter: blur(8px);
  transition:
    opacity 0.42s var(--ease-main),
    filter 0.42s var(--ease-main);
}

/* final copy */
.op-finalcopy {
  position: absolute;
  inset: 0;
  z-index: 9;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  padding-bottom: 60vh;
}

.op-finalcopy.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s var(--ease-main);
}

.op-finalcopy__line {
  margin: 0;
  color: rgba(255, 255, 255, 0.98);
  font-size: clamp(20px, 2.8vw, 38px);
  font-family:
  "Shippori Mincho",
  "Noto Serif JP",
  "Yu Mincho",
  "Hiragino Mincho ProN",
  serif;
  line-height: 1.1;
  letter-spacing: 0.08em;
  font-weight: 500;
  opacity: 0;
  filter: blur(16px);
  transform: translate3d(0, 0, 0);
}

.op-finalcopy.is-active .op-finalcopy__line {
  animation: opFinalBloomIn 1.4s var(--ease-main) forwards;
}

.op-finalcopy.is-active .op-finalcopy__line:nth-child(2) {
  animation-delay: 0.25s;
}

@keyframes opFinalBloomIn {
  0% {
    opacity: 0;
    filter: blur(18px);
  }
  60% {
    opacity: 1;
    filter: blur(5px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* ===============================
   Lead時：背景をさらに暗く
================================ */

.op-movieblock__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  transition: background 0.8s var(--ease-main);
  z-index: 5;
  pointer-events: none;
}

/* op-lead は .op-movieblock__frame 内なので、movieBlock active時に暗幕を出す */
.op-movieblock.is-active .op-movieblock__frame::after {
  background: rgba(0, 0, 0, 0.45);
}

/* =========================================
   SP Opening
========================================= */

@media (max-width: 900px) {
  .op-lead__scroll {
    gap: 0.42em;
    padding: 0 8vw;
  }
}

@media (max-width: 560px) {
  .op-copyintro {
    gap: 16px;
  }

  .op-lead__scroll {
    gap: 0.5em;
    padding: 0 7vw;
  }

  .op-lead__line {
    max-width: calc(100vw - 44px);
    font-size: 14px;
    line-height: 1.7;
  }

  .op-webgl {
    display: none !important;
  }

  .op-movieblock__video-source {
    position: absolute !important;
    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    opacity: 1 !important;
    pointer-events: none !important;

    left: auto !important;
    top: auto !important;

    object-fit: cover !important;
    object-position: center center !important;

    filter: none !important;
  }
  
/* final copy */
.op-finalcopy {
  padding-bottom: 50vh;
}
  
}

.sp {
  display: none;
}

@media (max-width: 560px) {
  .sp {
    display: block;
  }
}


/* =========================================
   Opening Auto Reload
========================================= */

html.is-opening-reloading .site-opening {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html.is-after-opening-reload .site-main {
  opacity: 0;
  filter: blur(8px);
  animation: afterOpeningReloadMainFade 1.1s ease forwards;
}

@keyframes afterOpeningReloadMainFade {
  from {
    opacity: 0;
    filter: blur(8px);
  }

  to {
    opacity: 1;
    filter: blur(0);
  }
}

/* =========================================
   Opening Reload Smooth Blackout
========================================= */

html.is-opening-reloading .site-opening {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  background: #000 !important;
  transition: none !important;
}

.site-opening.is-outro-fading .site-opening__stage,
.site-opening.is-outro-fading .site-opening__noise,
.site-opening.is-outro-fading .site-opening__skip {
  opacity: 0 !important;
  filter: blur(8px);
  transition:
    opacity 0.85s var(--ease-main),
    filter 0.85s var(--ease-main);
}


/* =========================================
   Opening Direct Movie Mode
========================================= */

.op-webgl {
  display: none !important;
}

.op-movieblock__video-source {
  position: absolute !important;
  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  opacity: 1 !important;
  pointer-events: none !important;

  left: auto !important;
  top: auto !important;

  object-fit: cover !important;
  object-position: center center !important;

  filter: none !important;
}

/* スクロールリード文は完全非表示 */
.op-lead {
  display: none !important;
}

/* lead用の暗幕を無効化 */
.op-movieblock.is-active .op-movieblock__frame::after {
  background: rgba(0, 0, 0, 0) !important;
}

/* Final copy + Japanese */
.op-finalcopy {
  padding-bottom: 0 !important;
}

.op-finalcopy__main {
  display: grid;
  gap: 10px;
  place-items: center;
}

.op-finalcopy__ja {
  position: absolute;
  left: 50%;
  bottom: max(54px, env(safe-area-inset-bottom));
  margin: 0;

  color: rgba(255,255,255,0.86);
  font-size: clamp(12px, 1.2vw, 15px);
  line-height: 1.8;
  letter-spacing: 0.16em;

  opacity: 0;
  filter: blur(12px);
  transform: translateX(-50%) translateY(10px);
}

.op-finalcopy.is-active .op-finalcopy__ja {
  animation: opFinalJaIn 1.4s var(--ease-main) 0.45s forwards;
}

@keyframes opFinalJaIn {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateX(-50%) translateY(0);
  }
}


/* =========================================
   Opening Final Copy Position / Movie Dim
========================================= */

/* 最終コピー表示時だけ動画を少し暗くする */
.site-opening:has(.op-finalcopy.is-active) .op-movieblock__frame::after {
  background: rgba(0, 0, 0, 0.42) !important;
  transition: background 1.8s var(--ease-main);
}

/* 最終コピー全体は中央配置を解除 */
.op-finalcopy {
  display: block !important;
  place-items: unset !important;
  align-content: unset !important;
  padding: 0 !important;
}

/* 英文：画面上から10% */
.op-finalcopy__main {
  position: absolute;
  left: 50%;
  top: 15%;

  display: grid;
  gap: 16px;
  place-items: center;

  width: min(92vw, 1000px);

  transform: translateX(-50%);
}

.op-finalcopy__line {
  font-size: clamp(24px, 2.4vw, 42px);
  line-height: 1.15;
  letter-spacing: 0.08em;
}

.op-finalcopy__ja {
  position: absolute;

  left: 50% !important;
  bottom: 20% !important;

  width: min(92vw, 1000px);

  margin: 0;

  text-align: center;

  font-family:
    "Shippori Mincho",
    "Noto Serif JP",
    "Yu Mincho",
    "Hiragino Mincho ProN",
    serif;

  font-size: clamp(20px, 1.8vw, 32px);
  line-height: 1.6;
  letter-spacing: 0.12em;

  color: rgba(255,255,255,0.92);

  transform: translateX(-50%) translateY(18px);
}

/* もっとふわっと表示 */
.op-finalcopy.is-active .op-finalcopy__line {
  animation: opFinalSoftBloomIn 2.4s var(--ease-main) forwards;
}

.op-finalcopy.is-active .op-finalcopy__line:nth-child(2) {
  animation-delay: 0.38s;
}

.op-finalcopy.is-active .op-finalcopy__ja {
  animation: opFinalJaSoftIn 2.2s var(--ease-main) 0.72s forwards;
}

@keyframes opFinalSoftBloomIn {
  0% {
    opacity: 0;
    filter: blur(26px);
    transform: translate3d(0, 18px, 0) scale(0.985);
  }

  55% {
    opacity: 0.72;
    filter: blur(10px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translate3d(0, 0, 0) scale(1);
  }
}

@keyframes opFinalJaSoftIn {
  0% {
    opacity: 0;
    filter: blur(20px);
    transform: translateX(-50%) translateY(22px);
  }

  100% {
    opacity: 1;
    filter: blur(0);
    transform: translateX(-50%) translateY(0);
  }
}