/* ==========================================
   RIDDLE STORY
   霧が晴れる全画面ローディング演出
========================================== */

.member-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;

  display: grid;
  place-items: center;

  min-height: 100vh;
  min-height: 100dvh;
  padding: 24px;

  overflow: hidden;
  color: #f5f7f8;
  text-align: center;

  background:
    radial-gradient(
      circle at 50% 42%,
      rgba(93, 106, 111, 0.22),
      rgba(4, 7, 9, 0.76) 58%
    ),
    rgba(3, 5, 7, 0.76);

  -webkit-backdrop-filter: blur(15px) brightness(0.48) saturate(0.72);
  backdrop-filter: blur(15px) brightness(0.48) saturate(0.72);

  opacity: 1;
  visibility: visible;

  transition:
    background-color 1.45s ease,
    opacity 1.45s ease,
    visibility 1.45s ease,
    -webkit-backdrop-filter 1.45s ease,
    backdrop-filter 1.45s ease;
}

/* 周囲を少し暗くする */
.member-loading-overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at center,
      transparent 0%,
      rgba(0, 0, 0, 0.08) 43%,
      rgba(0, 0, 0, 0.62) 100%
    );

  opacity: 1;
  transition: opacity 1.3s ease;
}

/* 薄い粒子 */
.member-loading-overlay::after {
  content: "";
  position: absolute;
  inset: -30%;
  z-index: 4;
  pointer-events: none;

  background-image:
    radial-gradient(circle, rgba(255, 255, 255, 0.12) 0 0.7px, transparent 1px),
    radial-gradient(circle, rgba(255, 255, 255, 0.07) 0 0.6px, transparent 1px);

  background-size:
    9px 9px,
    15px 15px;

  opacity: 0.15;
  mix-blend-mode: screen;

  animation: rsFogNoise 0.42s steps(2, end) infinite;
  transition: opacity 0.9s ease;
}

/* =========================
   霧
========================= */

.member-loading-fog {
  position: absolute;
  z-index: 2;
  pointer-events: none;

  width: 165vw;
  height: 120vh;
  min-width: 1100px;
  min-height: 760px;

  left: 50%;
  top: 50%;

  border-radius: 50%;
  transform: translate(-50%, -50%) scale(1);

  filter: blur(34px);
  mix-blend-mode: screen;

  opacity: 0.68;

  background-repeat: no-repeat;
  background-size: 100% 100%;

  transition:
    opacity 1.4s ease,
    transform 1.6s cubic-bezier(0.22, 1, 0.36, 1),
    filter 1.5s ease;
}

.member-loading-fog-1 {
  background:
    radial-gradient(
      ellipse at 22% 42%,
      rgba(224, 233, 235, 0.62) 0%,
      rgba(172, 187, 191, 0.30) 24%,
      transparent 58%
    ),
    radial-gradient(
      ellipse at 76% 61%,
      rgba(214, 225, 228, 0.48) 0%,
      rgba(151, 166, 172, 0.22) 28%,
      transparent 62%
    );

  animation: rsFogDrift1 9s ease-in-out infinite alternate;
}

.member-loading-fog-2 {
  z-index: 3;
  opacity: 0.46;

  background:
    radial-gradient(
      ellipse at 34% 72%,
      rgba(219, 228, 231, 0.50) 0%,
      rgba(144, 160, 166, 0.22) 31%,
      transparent 65%
    ),
    radial-gradient(
      ellipse at 68% 25%,
      rgba(237, 242, 243, 0.40) 0%,
      rgba(157, 170, 175, 0.18) 25%,
      transparent 58%
    );

  animation: rsFogDrift2 12s ease-in-out infinite alternate;
}

.member-loading-fog-3 {
  opacity: 0.32;
  filter: blur(48px);

  background:
    radial-gradient(
      ellipse at 50% 50%,
      rgba(232, 239, 241, 0.40) 0%,
      rgba(139, 154, 160, 0.16) 34%,
      transparent 72%
    );

  animation: rsFogPulse 6.5s ease-in-out infinite;
}

/* =========================
   文章エリア
========================= */

.member-loading-content {
  position: relative;
  z-index: 5;

  width: min(620px, 100%);
  padding: 34px 32px 30px;

  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 3px;

  background:
    linear-gradient(
      145deg,
      rgba(10, 15, 18, 0.60),
      rgba(5, 8, 10, 0.38)
    );

  box-shadow:
    0 30px 90px rgba(0, 0, 0, 0.42),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);

  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);

  opacity: 1;
  transform: translateY(0);
  filter: blur(0);

  animation: rsFogContentIn 0.85s cubic-bezier(0.16, 1, 0.3, 1) both;

  transition:
    opacity 0.65s ease,
    transform 0.75s ease,
    filter 0.75s ease;
}

.member-loading-brand {
  margin: 0 0 34px;

  color: rgba(238, 244, 245, 0.46);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.42em;
}

.member-loading-label {
  margin: 0 0 13px;

  color: rgba(215, 226, 229, 0.62);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
}

.member-loading-content h1 {
  margin: 0;

  color: #f5f7f8;
  font-size: clamp(23px, 5.5vw, 34px);
  font-weight: 650;
  line-height: 1.55;
  letter-spacing: 0.075em;

  text-shadow: 0 0 26px rgba(225, 237, 240, 0.10);
}

.member-loading-text {
  margin: 16px 0 0;

  color: rgba(226, 234, 236, 0.62);
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: 0.06em;
}

/* =========================
   進行状況バー
========================= */

.member-loading-progress {
  width: 100%;
  margin-top: 32px;
}

.member-loading-progress-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  margin-bottom: 9px;

  color: rgba(228, 236, 238, 0.50);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
}

.member-loading-progress-track {
  position: relative;

  width: 100%;
  height: 4px;

  overflow: hidden;
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.10);
  box-shadow:
    inset 0 1px 4px rgba(0, 0, 0, 0.50),
    0 0 0 1px rgba(255, 255, 255, 0.035);
}

.member-loading-progress-track::after {
  content: "";
  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.16),
      transparent
    );

  transform: translateX(-100%);
  animation: rsFogProgressSweep 1.7s ease-in-out infinite;
}

.member-loading-progress-bar {
  position: absolute;
  inset: 0 auto 0 0;
  z-index: 2;

  width: 0%;
  border-radius: inherit;

  background:
    linear-gradient(
      90deg,
      rgba(167, 184, 189, 0.82),
      rgba(240, 246, 247, 0.96)
    );

  box-shadow:
    0 0 10px rgba(225, 239, 242, 0.42),
    0 0 24px rgba(187, 207, 212, 0.22);

  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 完了した瞬間に少し明るくなる */
.member-loading-overlay.is-completing .member-loading-progress-bar {
  box-shadow:
    0 0 15px rgba(241, 250, 252, 0.75),
    0 0 34px rgba(204, 222, 226, 0.44);
}

/* =========================
   読み込み完了：霧が晴れる
========================= */

.member-loading-overlay.is-clearing {
  background: rgba(3, 5, 7, 0);

  -webkit-backdrop-filter: blur(0) brightness(1) saturate(1);
  backdrop-filter: blur(0) brightness(1) saturate(1);

  pointer-events: none;
}

.member-loading-overlay.is-clearing::before {
  opacity: 0;
}

.member-loading-overlay.is-clearing::after {
  opacity: 0;
}

.member-loading-overlay.is-clearing .member-loading-content {
  opacity: 0;
  transform: translateY(-14px) scale(0.985);
  filter: blur(5px);
}

.member-loading-overlay.is-clearing .member-loading-fog-1 {
  opacity: 0;
  transform: translate(-58%, -50%) scale(1.42);
  filter: blur(58px);
}

.member-loading-overlay.is-clearing .member-loading-fog-2 {
  opacity: 0;
  transform: translate(-42%, -50%) scale(1.52);
  filter: blur(66px);
}

.member-loading-overlay.is-clearing .member-loading-fog-3 {
  opacity: 0;
  transform: translate(-50%, -43%) scale(1.65);
  filter: blur(72px);
}

.member-loading-overlay.is-hidden {
  display: none;
}

/* =========================
   Animation
========================= */

@keyframes rsFogContentIn {
  from {
    opacity: 0;
    transform: translateY(12px);
    filter: blur(7px);
  }

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

@keyframes rsFogDrift1 {
  from {
    background-position:
      -5% 0,
      105% 0;
  }

  to {
    background-position:
      7% 5%,
      92% -4%;
  }
}

@keyframes rsFogDrift2 {
  from {
    background-position:
      2% 8%,
      98% -4%;
  }

  to {
    background-position:
      -8% -4%,
      108% 7%;
  }
}

@keyframes rsFogPulse {
  0%,
  100% {
    opacity: 0.24;
    filter: blur(44px);
  }

  50% {
    opacity: 0.40;
    filter: blur(54px);
  }
}

@keyframes rsFogNoise {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-0.8%, 0.5%);
  }

  50% {
    transform: translate(0.5%, -0.7%);
  }

  75% {
    transform: translate(0.7%, 0.8%);
  }

  100% {
    transform: translate(-0.4%, 0.3%);
  }
}

@keyframes rsFogProgressSweep {
  0% {
    transform: translateX(-100%);
  }

  55%,
  100% {
    transform: translateX(100%);
  }
}

/* =========================
   Smartphone
========================= */

@media (max-width: 600px) {
  .member-loading-overlay {
    padding: 18px;
  }

  .member-loading-content {
    padding: 29px 21px 25px;
  }

  .member-loading-brand {
    margin-bottom: 27px;
    font-size: 9px;
    letter-spacing: 0.31em;
  }

  .member-loading-label {
    font-size: 9px;
    letter-spacing: 0.20em;
  }

  .member-loading-content h1 {
    font-size: 22px;
    letter-spacing: 0.055em;
  }

  .member-loading-text {
    font-size: 12px;
  }

  .member-loading-progress {
    margin-top: 27px;
  }

  .member-loading-fog {
    min-width: 900px;
    min-height: 680px;
  }
}

/* =========================
   Reduced motion
========================= */

@media (prefers-reduced-motion: reduce) {
  .member-loading-overlay *,
  .member-loading-overlay::before,
  .member-loading-overlay::after {
    animation: none !important;
  }

  .member-loading-progress-bar {
    transition-duration: 0.1s;
  }

  .member-loading-overlay,
  .member-loading-fog,
  .member-loading-content {
    transition-duration: 0.25s;
  }
}