html.fv-intro-lock,
html.fv-intro-lock body {
  overflow: hidden;
}

.fv-intro {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: auto;
  background: #fffefa;
  opacity: 1;
  isolation: isolate;
  transition: opacity 500ms ease;
}

.fv-intro.is-hidden {
  pointer-events: none;
  opacity: 0;
}

/* bee3 / pollenScatter 用の CSS 背景（bee1/bee2 はキャンバス描画に移行） */
.fv-intro::before {
  position: absolute;
  inset: -12%;
  z-index: 0;
  content: "";
  background:
    radial-gradient(ellipse at 68% 89%, rgba(25, 135, 245, 0.65), transparent 65%),
    radial-gradient(ellipse at 88% 31%, rgba(243, 255, 111, 0.88), transparent 65%),
    radial-gradient(ellipse at 55% 8%, rgba(255, 182, 74, 0.54), transparent 65%),
    radial-gradient(ellipse at 43% 38%, rgba(255, 177, 117, 0.66), transparent 65%),
    radial-gradient(ellipse at 17% 57%, rgba(255, 177, 20, 0.49), transparent 65%),
    radial-gradient(ellipse at 13% 11%, rgba(255, 176, 117, 0.61), transparent 65%),
    radial-gradient(ellipse at 43% 37%, rgba(255, 182, 19, 0.55), transparent 65%),
    radial-gradient(ellipse at 51% 56%, rgba(198, 242, 166, 0.6), transparent 65%),
    radial-gradient(ellipse at 28% 78%, rgba(243, 255, 111, 0.6), transparent 65%),
    linear-gradient(180deg, rgba(255, 190, 61, 0.2), rgba(255, 255, 255, 0.08) 44%, rgba(15, 135, 255, 0.18));
  transform: translate3d(0, 0, 0) scale(1.04);
  will-change: transform;
  animation: fv-intro-bg 6s ease-in-out infinite alternate;
}

/* bee1/bee2 は bg-canvas に描画するので ::before を隠す */
[data-fv-intro-type="bee1"]::before,
[data-fv-intro-type="bee2"]::before {
  display: none;
}

.fv-intro__grad {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.fv-intro__grad--end {
  opacity: 0;
  will-change: opacity;
  background:
    radial-gradient(ellipse at 48% 91%, rgba(25, 135, 245, 0.62), transparent 69%),
    radial-gradient(ellipse at 25% 62%, rgba(243, 255, 112, 0.88), transparent 65%),
    radial-gradient(ellipse at 92% 13%, rgb(255, 228, 148), transparent 65%),
    radial-gradient(ellipse at 21% 8%, rgba(255, 177, 117, 0.66), transparent 65%),
    radial-gradient(ellipse at 23% 35%, rgba(255, 177, 20, 0.49), transparent 65%),
    radial-gradient(ellipse at 61% 9%, rgba(255, 189, 56, 0.65), transparent 65%),
    linear-gradient(180deg, rgba(255, 190, 61, 0.2), rgba(255, 255, 255, 0.08) 44%, rgba(15, 135, 255, 0.18));
}

.fv-intro__grad--fade {
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255, 255, 255, 1)    0%,
    rgba(255, 255, 255, 0.88) 28%,
    rgba(255, 255, 255, 0.52) 58%,
    transparent 82%
  );
}

/* 背景キャンバス（bee1/bee2 専用） */
.fv-intro__bg-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fv-intro__canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fv-intro__brand {
  position: relative;
  z-index: 3;
  width: min(480px, 62vw);
  opacity: 0;
  transform: scale(0.78);
  animation: fv-intro-logo 850ms cubic-bezier(0.16, 1, 0.3, 1) 900ms forwards;
}

.fv-intro__logo {
  display: block;
  width: 100%;
  height: auto;
}

@keyframes fv-intro-logo {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fv-intro-bg {
  to {
    transform: translate3d(-2%, 1.5%, 0) scale(1.08);
  }
}

/* bee2 (patternB): スケールなし、フェードインのみ */
[data-fv-intro-type="bee2"] .fv-intro__brand {
  transform: scale(1);
  animation: fv-intro-logo-fade 1600ms ease-out 0ms forwards;
}

/* bee2 (patternB): 白フェードは bg-canvas 側で描画するため静的グラデーションのみ */
[data-fv-intro-type="bee2"] .fv-intro__grad--fade {
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255, 255, 255, 1)    0%,
    rgba(255, 255, 255, 0.88) 28%,
    rgba(255, 255, 255, 0.52) 58%,
    transparent 82%
  );
}

@keyframes fv-intro-logo-fade {
  to { opacity: 1; }
}

/* bee1 (patternA): 白背景スタート */
[data-fv-intro-type="bee1"] {
  background: #ffffff;
}

/* bee3 (patternC): ロゴ出現を少し遅らせる */
[data-fv-intro-type="bee3"] .fv-intro__brand {
  animation: fv-intro-logo 850ms cubic-bezier(0.16, 1, 0.3, 1) 1500ms forwards;
}

/* bee3 (patternC): 白フェードをより強く */
[data-fv-intro-type="bee3"] .fv-intro__grad--fade {
  background: radial-gradient(ellipse at 50% 50%,
    rgba(255, 255, 255, 1)    0%,
    rgba(255, 255, 255, 0.97) 30%,
    rgba(255, 255, 255, 0.86) 60%,
    rgba(255, 255, 255, 0.42) 86%,
    rgba(255, 255, 255, 0.12) 100%
  );
}

/* pollenScatter — 白背景、全画面散布 → 中央収束 */
.fv-intro:not([data-fv-intro-type])::before,
[data-fv-intro-type="pollenScatter"]::before {
  display: none;
}

[data-fv-intro-type="pollenScatter"] .fv-intro__grad--end,
[data-fv-intro-type="pollenScatter"] .fv-intro__grad--fade {
  display: none;
}

[data-fv-intro-type="pollenScatter"] .fv-intro__brand {
  transform: scale(0.97);
  animation: fv-intro-logo-scatter 1400ms ease-out 2600ms forwards;
}

@keyframes fv-intro-logo-scatter {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 767px) {
  .fv-intro__brand {
    width: min(320px, 78vw);
  }

  .fv-intro__grad--fade {
    background: radial-gradient(ellipse 90% 55% at 50% 50%,
      rgba(255, 255, 255, 1)    0%,
      rgba(255, 255, 255, 0.92) 30%,
      rgba(255, 255, 255, 0.55) 65%,
      rgba(255, 255, 255, 0.42) 100%
    );
  }

  [data-fv-intro-type="bee3"] .fv-intro__grad--fade {
    background: radial-gradient(ellipse 90% 55% at 50% 50%,
      rgba(255, 255, 255, 1)    0%,
      rgba(255, 255, 255, 0.95) 30%,
      rgba(255, 255, 255, 0.62) 65%,
      rgba(255, 255, 255, 0.46) 100%
    );
  }

  /* bee2 (patternB) SP: 正円に近い形、bg-canvas 側で追加白を描画するため静的のみ */
  [data-fv-intro-type="bee2"] .fv-intro__grad--fade {
    background: radial-gradient(ellipse 85% 85% at 50% 50%,
      rgba(255, 255, 255, 1)    0%,
      rgba(255, 255, 255, 0.88) 28%,
      rgba(255, 255, 255, 0.52) 58%,
      transparent 82%
    );
  }
}

@media (prefers-reduced-motion: reduce) {
  .fv-intro {
    transition: opacity 160ms ease;
  }

  .fv-intro::before,
  .fv-intro__brand {
    animation: none;
  }

  .fv-intro__brand {
    opacity: 1;
    transform: none;
  }
}