/* ============================================================
   Sun lights: soft light shafts from an upper corner, a warm corner glow and a few slowly drifting
   bokeh glints over the hero photo and the "Family of 4" CTA photo (#bonus-cta).
   Markup is injected by js/hero-sunlight.js (decorative, aria-hidden, pointer-events: none).
   Only transform and opacity animate. Reduced motion: the media query below is live, so switching the
   OS setting stops/starts the motion immediately and leaves a static glow.
   ============================================================ */
.hero, #bonus-cta { position: relative; isolation: isolate; }
.campaignlogoand-price { isolation: isolate; }

.sunlight {
  --sun-warm: 255, 236, 196;   /* warm white */
  --sun-gold: 255, 206, 140;   /* pale gold */
  --sun-accent: 196, 31, 38;  /* brand accent, used faintly */
  position: absolute; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
  mix-blend-mode: screen;      /* light adds to the photo instead of veiling it */
}
/* bonus CTA: above the photo (::before, z 0) and under the copy scrim (::after, z 1, later in paint order) */
#bonus-cta > .sunlight { z-index: 1; }
/* one layer per hero host: the photo is on .hero from 768px up and on .campaignlogoand-price below it */
@media (max-width: 767px) { .sunlight--wide { display: none; } }
@media (min-width: 768px) { .sunlight--narrow { display: none; } }

.sunlight__glow,
.sunlight__rays,
.sunlight__glint { position: absolute; display: block; will-change: transform, opacity; }

/* warm wash pooled in the upper-right corner */
.sunlight__glow {
  top: -32vmax; right: -32vmax; width: 64vmax; height: 64vmax;   /* centred on the corner */
  background: radial-gradient(closest-side, rgba(var(--sun-warm), .7), rgba(var(--sun-gold), .32) 35%, rgba(var(--sun-accent), .1) 65%, rgba(var(--sun-accent), 0));
  animation: sun-breathe 12s ease-in-out infinite alternate;
}

/* light shafts fanning from the top-right corner; pivots on that corner */
.sunlight__rays {
  top: 0; right: 0; width: 170%; height: 170%;
  transform-origin: 100% 0;
  background: conic-gradient(from 180deg at 100% 0,
    rgba(var(--sun-warm), 0) 0deg, rgba(var(--sun-warm), .3) 6deg, rgba(var(--sun-warm), 0) 11deg,
    rgba(var(--sun-warm), 0) 17deg, rgba(var(--sun-gold), .22) 21deg, rgba(var(--sun-gold), 0) 24deg,
    rgba(var(--sun-warm), 0) 31deg, rgba(var(--sun-warm), .28) 37deg, rgba(var(--sun-warm), 0) 45deg,
    rgba(var(--sun-gold), 0) 52deg, rgba(var(--sun-gold), .2) 56deg, rgba(var(--sun-gold), 0) 60deg,
    rgba(var(--sun-warm), 0) 68deg, rgba(var(--sun-warm), .24) 74deg, rgba(var(--sun-warm), 0) 81deg,
    rgba(var(--sun-warm), 0) 360deg);
  -webkit-mask-image: radial-gradient(circle at 100% 0, #000 0, rgba(0, 0, 0, .6) 30%, rgba(0, 0, 0, 0) 68%);
  mask-image: radial-gradient(circle at 100% 0, #000 0, rgba(0, 0, 0, .6) 30%, rgba(0, 0, 0, 0) 68%);
  animation: sun-sway 26s ease-in-out infinite alternate;
}

/* soft bokeh glints; position, size and timing come from inline custom properties */
.sunlight__glint {
  left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(var(--sun-warm), .8), rgba(var(--sun-gold), .3) 55%, rgba(var(--sun-gold), 0));
  opacity: .6;
  animation: sun-drift var(--t, 22s) ease-in-out var(--delay, 0s) infinite alternate;
}
.sunlight__glint--accent { background: radial-gradient(closest-side, rgba(var(--sun-gold), .6), rgba(var(--sun-accent), .24) 60%, rgba(var(--sun-accent), 0)); }

@keyframes sun-breathe { from { opacity: .75; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }
@keyframes sun-sway { from { opacity: .7; transform: rotate(-3deg); } to { opacity: 1; transform: rotate(3deg); } }
@keyframes sun-drift {
  from { opacity: .3; transform: translate3d(0, 0, 0) scale(.9); }
  to   { opacity: .85; transform: translate3d(var(--dx, 24px), var(--dy, -18px), 0) scale(1.08); }
}

/* bonus CTA on desktop: the copy fills the left half, so the light stays on the photo side */
@media (min-width: 992px) {
  #bonus-cta > .sunlight {
    -webkit-mask-image: linear-gradient(90deg, transparent 50%, #000 70%);
    mask-image: linear-gradient(90deg, transparent 50%, #000 70%);
  }
}

/* bonus CTA stacked (tablet/phone): the copy fills the top of the photo, so the light stays below it */
@media (max-width: 991px) {
  #bonus-cta > .sunlight {
    -webkit-mask-image: linear-gradient(180deg, transparent 38%, #000 58%);
    mask-image: linear-gradient(180deg, transparent 38%, #000 58%);
  }
}

/* paused while off-screen or in a background tab, and frozen for good (.is-settled) after 5s of on-screen play
   so the loop meets WCAG 2.2.2 (set by js/hero-sunlight.js) */
.sunlight.is-paused > * { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .sunlight > * { animation: none; }
  .sunlight__glint { opacity: .55; }
}