/*
  夜明けの木漏れ日 v3

  重要: 光線を移動・回転させない。サーチライトに見えるため。
  写真にもともと写っている自然な光線を主役にする。暗い写真の上へ
  明るい写真がゆっくり重なり、左上の朝光、写真の光筋、地面の反射が
  時間差で立ち上がる設計。人工的な帯・三角形は描画しない。
*/

.rays-stage {
  position: relative;
  min-height: max(68vh, min(66vw, 88vh));
  overflow: hidden;
  isolation: isolate;
  background: #07100d;
}

.rays-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  user-select: none;
}

.rays-photo-night {
  z-index: 0;
  filter: brightness(0.24) saturate(0.68) contrast(1.12) hue-rotate(4deg);
  transform: scale(1.012);
}

/* 同じ写真の明るい層をゆっくり重ねる。元写真の光筋が自然な形のまま
   浮かび上がるため、CSSで擬似的なサーチライトを描かない。 */
.rays-photo-day {
  z-index: 1;
  opacity: 0;
  filter: brightness(1.13) saturate(1.04) contrast(0.96) sepia(0.05);
  animation: dawn-photo 18s cubic-bezier(0.42, 0, 0.25, 1) infinite;
}

.rays-ambient {
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 6% 0%,
    rgba(255, 244, 204, 0.36) 0%,
    rgba(255, 228, 158, 0.12) 28%,
    transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
  animation: dawn-ambient 18s ease-in-out infinite;
}

/* 地面に光が届いたことを示す楕円状の反射。光線より少し遅れて現れる。 */
.rays-ground-light {
  position: absolute;
  z-index: 4;
  right: -8%;
  bottom: -15%;
  width: 72%;
  height: 46%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(ellipse at center,
    rgba(255, 236, 177, 0.62) 0%,
    rgba(255, 224, 149, 0.24) 38%,
    transparent 72%);
  mix-blend-mode: screen;
  filter: blur(10px);
  opacity: 0;
  animation: dawn-ground 18s ease-in-out infinite;
}

@keyframes dawn-photo {
  0%, 12% { opacity: 0; }
  27% { opacity: 0.22; }
  46% { opacity: 0.7; }
  60%, 80% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes dawn-ambient {
  0%, 12% { opacity: 0; }
  42% { opacity: 0.58; }
  60%, 80% { opacity: 0.82; }
  100% { opacity: 0; }
}

@keyframes dawn-ground {
  0%, 31% { opacity: 0; }
  52% { opacity: 0.46; }
  64%, 80% { opacity: 0.72; }
  100% { opacity: 0; }
}

.rays-content {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-end;
  min-height: max(68vh, min(66vw, 88vh));
  padding: 3rem clamp(1.5rem, 5vw, 4rem);
}
.rays-content > div { max-width: 31rem; }
.rays-content p {
  margin: 0;
  color: rgba(255, 253, 244, 0.96);
  font-size: 0.9rem;
  line-height: 1.9;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.72);
}
.rays-replay {
  margin-top: 18px;
  padding: 9px 16px;
  color: rgba(255, 253, 244, 0.94);
  background: rgba(7, 16, 13, 0.42);
  border: 1px solid rgba(255, 253, 244, 0.56);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.74rem;
  cursor: pointer;
  backdrop-filter: blur(8px);
}
.rays-replay:hover { background: rgba(7, 16, 13, 0.7); }

.rays-stage.is-resetting * { animation: none !important; }

@media (max-width: 600px) {
  .rays-stage,
  .rays-content { min-height: 70svh; }
  .rays-photo { object-position: 57% bottom; }
  .rays-ground-light { right: -24%; width: 98%; }
}

@media (prefers-reduced-motion: reduce) {
  .rays-photo-day {
    opacity: 1;
  }
  .rays-ambient { opacity: 0.58; }
  .rays-ground-light { opacity: 0.48; }
  .rays-replay { display: none; }
}