/* =====================================================================
   うまれ星鑑定書 ヒーロー演出（umareboshi_hero / umareboshi_sp デモ準拠）
   - PC画像: umarehosi-pc-hero.jpg（1374x1145・月の女神）
   - SP画像: umarehosi-sp-hero.jpg（941x1672・画像内タイトル入り）
   - 演出: 2sフェードイン / 呼吸するやわらかい光(12s) / 白金色の流れる光(13s・
     顔とタイトルはマスクで除外) / 月周囲のSVG円形ライン(120s/150s逆回転+呼吸10s)
     / 金の八芒星8個(8s・時間差1.15s刻み) / PCのみ微細なパララックス
   - 流れ星なし。animationはtransform/opacity中心・装飾はpointer-events:none
   ===================================================================== */

.umarehoshi-hero__visual {
  /* SPのobject-positionは実画像を見て微調整できるようカスタムプロパティ化
     （PCは比率一致＋containのため位置指定は不要） */
  --umarehoshi-image-position-sp: 50% 0%;  /* center top（コンテナ比率一致のため実質無トリミング） */
}

/* ---- 画像（約2秒フェードインのみ。マウス・指・傾きには一切反応しない） ---- */
.umarehoshi-hero__image-layer,
.umarehoshi-hero__image {
  transform: none;
  translate: none;
  rotate: none;
  scale: none;
  will-change: auto;
}

.umarehoshi-hero__image-layer {
  position: absolute;
  inset: 0;
}

.umarehoshi-hero__visual picture { display: contents; }

.umarehoshi-hero__image {
  display: block;
  width: 100%;
  height: 100%;
  /* 全面表示。画面比率とのわずかな差はトリミングで吸収する（余白は作らない） */
  object-fit: cover;
  object-position: var(--umarehoshi-image-position-pc, 50% 30%);
  opacity: 0;
  animation: umarehoshiFadeIn 2s ease forwards;
}
@keyframes umarehoshiFadeIn { to { opacity: 1; } }

/* ---- やわらかい呼吸光（15秒周期・月と女性の後ろだけがゆっくり明るくなる） ----
   新画像は三日月が左側にあるため、光の中心を左上へ寄せる（画像全体は明滅させない）。
   女性の顔が白飛びしないよう最大opacityは控えめにする */
.umarehoshi-soft-glow {
  position: absolute;
  inset: -5%;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at 24% 24%,
    rgba(255, 250, 225, 0.34) 0%,
    rgba(255, 247, 220, 0.16) 20%,
    rgba(255, 249, 232, 0.05) 38%,
    rgba(255, 255, 255, 0) 58%);
  mix-blend-mode: screen;
  animation: umarehoshi-glow-breathe 15s ease-in-out infinite;
}
@keyframes umarehoshi-glow-breathe {
  0%, 100% { opacity: 0.14; transform: scale(1); }
  50%      { opacity: 0.30; transform: scale(1.025); }
}

/* ---- 細い白金の光（20秒周期・1本だけ・見えるのは約2.2秒。負のdelayで初回待ちを短く） ----
   新画像では上部中央から右側の余白を通す（月の円弧・女性の顔と手を横切らない）。
   流れ星のように尖らせず、光の反射のように見せる */
.umarehoshi-shimmer {
  position: absolute;
  z-index: 4;
  top: 12%;
  left: 38%;
  width: 240px;
  height: 8px;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(255, 255, 255, 0),
    rgba(255, 246, 214, 0.16),
    rgba(255, 255, 255, 0.46),
    rgba(255, 246, 214, 0.16),
    rgba(255, 255, 255, 0));
  filter: blur(5px);
  mix-blend-mode: screen;
  animation: umarehoshi-shimmer-pass 20s linear infinite;
  animation-delay: -14s;
}
@keyframes umarehoshi-shimmer-pass {
  0%, 78%  { opacity: 0; transform: translate(0, 0) rotate(10deg); }
  80%      { opacity: 0.22; }
  87%      { opacity: 0.38; }
  89%      { opacity: 0; transform: translate(1200px, 150px) rotate(10deg); }
  100%     { opacity: 0; transform: translate(1200px, 150px) rotate(10deg); }
}

/* 画像内に月・星・円形装飾が描かれているため、CSSの月リングと星装飾は使わない */

/* =====================================================================
   SP（767px以下・umarehosi-sp-split 941x1672）
   ===================================================================== */
@media (max-width: 767px) {
  /* スマホで許可する自動演出は「初回フェードイン」と「星5個の明滅」のみ。
     光・流れる光・月リングは非表示（画像自体に星や光が描き込まれているため） */
  .umarehoshi-soft-glow,
  .umarehoshi-shimmer { display: none; }

  /* マウス・指・傾きで画像を動かさない（パララックス受け口を無効化）。
     絶対配置をやめて通常フローに戻し、画像自身の高さでコンテナを決める。
     初回フェード完了後、画像本体は完全に静止する（transform一切なし） */
  .umarehoshi-hero__image-layer {
    position: static;
    inset: auto;
    transform: none;
    transition: none;
    will-change: auto;
    display: block;
    width: 100%;
  }

  .umarehoshi-hero__visual picture {
    display: block;
    width: 100%;
  }

  /* 画像全体を無トリミングで表示（cover・固定高さは使わない）。
     フェード（既存umarehoshiFadeIn 2s・初回のみ・opacityのみ）終了後は完全に静止 */
  .umarehoshi-hero__image {
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
    object-position: center top;
    transform: none; /* 初回フェード(opacityのみ)以外の動きを持たせない */
  }

  /* スマホでは追加の星装飾を使わない（画像内に描かれた星だけを見せる） */
  .umarehoshi-star { display: none; }
}

/* =====================================================================
   動きを減らす設定: 全装飾アニメーションを停止（内容と操作は維持）
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .umarehoshi-hero__image,
  .umarehoshi-hero__image-layer,
  .umarehoshi-soft-glow,
  .umarehoshi-shimmer { animation: none; transition: none; }
  .umarehoshi-hero__image { opacity: 1; }
  .umarehoshi-hero__image-layer { transform: none; }
  .umarehoshi-soft-glow,
  .umarehoshi-shimmer { opacity: 0; }
}
/* =====================================================================
   うまれ星：星の瞬き演出
   - 画像本体は動かさない
   - ゆっくり点灯 → ゆっくり消灯
   - SPは女性の顔を避けて専用配置
   ===================================================================== */

.umarehoshi-stars {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: hidden;
}

.umarehoshi-stars i {
  position: absolute;
  display: block;

  width: 5px;
  height: 5px;
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.98);

  box-shadow:
    0 0 5px rgba(255, 255, 255, 0.95),
    0 0 12px rgba(255, 244, 200, 0.85),
    0 0 20px rgba(200, 220, 255, 0.55);

  opacity: 0.04;
  transform: scale(0.6);

  /*
   * 1回12秒。
   * ゆっくり明るくなり、
   * ゆっくり暗くなる。
   */
  animation:
    umarehoshi-twinkle 12s ease-in-out infinite;
}


/* ---------------------------------------------------------------------
   縦方向の光
   --------------------------------------------------------------------- */

.umarehoshi-stars i::before {
  content: "";
  position: absolute;

  left: 50%;
  top: 50%;

  width: 1px;
  height: 22px;

  transform: translate(-50%, -50%);

  background: linear-gradient(
    to bottom,
    transparent,
    rgba(255, 255, 255, 0.9),
    transparent
  );
}


/* ---------------------------------------------------------------------
   横方向の光
   --------------------------------------------------------------------- */

.umarehoshi-stars i::after {
  content: "";
  position: absolute;

  left: 50%;
  top: 50%;

  width: 22px;
  height: 1px;

  transform: translate(-50%, -50%);

  background: linear-gradient(
    to right,
    transparent,
    rgba(255, 250, 225, 0.9),
    transparent
  );
}


/* =====================================================================
   PC 星の配置
   ===================================================================== */

.umarehoshi-stars i:nth-child(1) {
  left: 8%;
  top: 17%;
  animation-delay: -1.5s;
}

.umarehoshi-stars i:nth-child(2) {
  left: 20%;
  top: 68%;
  animation-delay: -7.0s;
}

.umarehoshi-stars i:nth-child(3) {
  left: 34%;
  top: 10%;
  animation-delay: -3.8s;
}

.umarehoshi-stars i:nth-child(4) {
  left: 48%;
  top: 36%;
  animation-delay: -9.2s;
}

.umarehoshi-stars i:nth-child(5) {
  left: 62%;
  top: 16%;
  animation-delay: -5.4s;
}

.umarehoshi-stars i:nth-child(6) {
  left: 72%;
  top: 63%;
  animation-delay: -10.6s;
}

.umarehoshi-stars i:nth-child(7) {
  left: 84%;
  top: 25%;
  animation-delay: -2.7s;
}

.umarehoshi-stars i:nth-child(8) {
  left: 92%;
  top: 71%;
  animation-delay: -8.1s;
}


/* =====================================================================
   瞬き
   約5秒かけて点灯
   ↓
   一瞬だけ最大光量
   ↓
   約5秒かけて消灯

   「キラッ」ではなく「ふわ〜っ」と光る
   ===================================================================== */

@keyframes umarehoshi-twinkle {

  0% {
    opacity: 0.03;
    transform: scale(0.60);
  }

  15% {
    opacity: 0.08;
    transform: scale(0.65);
  }

  30% {
    opacity: 0.25;
    transform: scale(0.78);
  }

  42% {
    opacity: 0.55;
    transform: scale(0.95);
  }

  50% {
    opacity: 0.82;
    transform: scale(1.10);
  }

  55% {
    opacity: 1;
    transform: scale(1.22);
  }

  60% {
    opacity: 0.82;
    transform: scale(1.10);
  }

  70% {
    opacity: 0.55;
    transform: scale(0.95);
  }

  82% {
    opacity: 0.25;
    transform: scale(0.78);
  }

  93% {
    opacity: 0.08;
    transform: scale(0.65);
  }

  100% {
    opacity: 0.03;
    transform: scale(0.60);
  }
}


/* =====================================================================
   SP
   - PCよりさらにゆっくり
   - 女性の顔がある中央付近を避ける
   ===================================================================== */

@media (max-width: 767px) {

  .umarehoshi-stars i {
    width: 4px;
    height: 4px;

    /*
     * SPは14秒。
     * かなりゆっくり光る。
     */
    animation-duration: 14s;
  }


  .umarehoshi-stars i::before {
    height: 16px;
  }


  .umarehoshi-stars i::after {
    width: 16px;
  }


  /* 左上 */
  .umarehoshi-stars i:nth-child(1) {
    left: 9%;
    top: 15%;
  }


  /* 左側 */
  .umarehoshi-stars i:nth-child(2) {
    left: 14%;
    top: 48%;
  }


  /* 月上部 */
  .umarehoshi-stars i:nth-child(3) {
    left: 35%;
    top: 21%;
  }


  /* 右側上部 */
  .umarehoshi-stars i:nth-child(4) {
    left: 80%;
    top: 34%;
  }


  /* 上部 */
  .umarehoshi-stars i:nth-child(5) {
    left: 67%;
    top: 15%;
  }


  /* 右側 */
  .umarehoshi-stars i:nth-child(6) {
    left: 87%;
    top: 55%;
  }


  /* 右上端 */
  .umarehoshi-stars i:nth-child(7) {
    left: 92%;
    top: 23%;
  }


  /* 左下 */
  .umarehoshi-stars i:nth-child(8) {
    left: 11%;
    top: 72%;
  }
}


/* =====================================================================
   動きを減らす設定
   ===================================================================== */

@media (prefers-reduced-motion: reduce) {

  .umarehoshi-stars i {
    animation: none;
    opacity: 0.20;
    transform: none;
  }
}