/* Local preview only: clearly visible, professional morning-light motion. */
.heroCopy {
  position: relative;
  z-index: 3;
}

.heroPic {
  animation: morning-scene-drift 16s ease-in-out infinite alternate;
  will-change: background-position;
}

.morning-live-canvas {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
}

.hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 720px;
  height: 720px;
  top: -430px;
  right: -210px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 253, 226, .98) 0 7%, rgba(255, 223, 112, .66) 18%, rgba(245, 197, 66, .25) 39%, rgba(245, 197, 66, 0) 70%);
  filter: blur(4px);
  mix-blend-mode: screen;
  animation: morning-glow 8s ease-in-out infinite alternate;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: -25% -25% -30% 8%;
  pointer-events: none;
  opacity: .23;
  transform: rotate(-13deg);
  transform-origin: 70% 0;
  background: repeating-linear-gradient(102deg, transparent 0 8%, rgba(255, 250, 218, .28) 10% 11%, transparent 14% 23%);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 78%);
  animation: morning-rays 9s ease-in-out infinite alternate;
}

@keyframes morning-scene-drift {
  from { background-position: 43% 52%; }
  to { background-position: 58% 45%; }
}

@keyframes morning-glow {
  from { transform: translate3d(-7%, 2%, 0) scale(.9); opacity: .66; }
  to { transform: translate3d(8%, 10%, 0) scale(1.1); opacity: 1; }
}

@keyframes morning-rays {
  from { transform: rotate(-16deg) translate3d(-4%, -2%, 0); opacity: .22; }
  to { transform: rotate(-8deg) translate3d(6%, 5%, 0); opacity: .48; }
}

@media (max-width: 650px) {
  .hero::before {
    width: 520px;
    height: 520px;
    top: -250px;
    right: -260px;
  }

  .hero::after { inset: -20% -70% -20% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .heroPic, .hero::before, .hero::after { animation: none; }
}