/* =========================================================
   Animated hero background — LIVE+ Season 2
   Concept: SUNLIGHT RAYS (warm resort morning light)

   Layers behind the hero video:
     1. warm glow pool at the top, slowly breathing
     2. a fan of light rays turning very slowly overhead
     3. dust motes rising and catching the light
     4. faint warm haze drifting for depth

   All decorative, pointer-events:none, transform/opacity only.
   ========================================================= */

.hero-section{position:relative; overflow:hidden}

/* hero content (video + copy) sits above every layer */
.hero-section > .container{position:relative; z-index:5}

.hero-rays{
  position:absolute; inset:0;
  overflow:hidden; pointer-events:none;
  z-index:0;
}

/* ---- 1. warm glow pool, top-centre, gentle breathe ---- */
.hero-rays::before{
  content:"";
  position:absolute; inset:0;
  background:radial-gradient(ellipse 70% 55% at 50% 4%, rgba(255,255,255,.72), transparent 70%);
  animation:hero-pool 12s ease-in-out infinite;
}
@keyframes hero-pool{
  0%,100%{opacity:.72}
  50%    {opacity:1}
}

/* ---- 4. faint warm haze for depth, drifting the other way ---- */
.hero-rays::after{
  content:"";
  position:absolute; inset:-20%;
  background:
    radial-gradient(ellipse at 28% 38%, rgba(255,255,255,.42), transparent 55%),
    radial-gradient(ellipse at 76% 66%, rgba(209,166,76,.28), transparent 60%);
  animation:hero-haze 30s ease-in-out infinite;
}
@keyframes hero-haze{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(-40px,28px,0) scale(1.12)}
}

/* ---- 2. the ray fan ---- */
.hero-rays .fan{
  position:absolute;
  left:50%; top:-62%;
  width:150%; aspect-ratio:1;
  transform:translateX(-50%);
  transform-origin:50% 50%;
  will-change:transform;

  background:conic-gradient(
    from 0deg,
    rgba(255,255,255,0)   0deg,  rgba(255,255,255,.50) 4deg,  rgba(255,255,255,0)  9deg,
    rgba(255,255,255,0)  16deg,  rgba(224,200,133,.50) 21deg, rgba(255,255,255,0) 27deg,
    rgba(255,255,255,0)  36deg,  rgba(255,255,255,.42) 41deg, rgba(255,255,255,0) 47deg,
    rgba(255,255,255,0)  58deg,  rgba(209,166,76,.42)  63deg, rgba(255,255,255,0) 70deg,
    rgba(255,255,255,0)  82deg,  rgba(255,255,255,.45) 87deg, rgba(255,255,255,0) 94deg,
    rgba(255,255,255,0) 108deg,  rgba(224,200,133,.38)113deg, rgba(255,255,255,0)120deg,
    rgba(255,255,255,0) 360deg
  );

  /* fade the fan out toward its edges so rays don't end abruptly */
  -webkit-mask-image:radial-gradient(closest-side, #000 22%, rgba(0,0,0,.55) 55%, transparent 78%);
          mask-image:radial-gradient(closest-side, #000 22%, rgba(0,0,0,.55) 55%, transparent 78%);

  filter:blur(6px);
  animation:hero-fan 60s linear infinite;
}
@keyframes hero-fan{
  from{transform:translateX(-50%) rotate(0deg)}
  to  {transform:translateX(-50%) rotate(360deg)}
}

/* a second, slower counter-turning fan adds shimmer without extra clutter */
.hero-rays .fan.fan-2{
  width:120%;
  top:-48%;
  opacity:.55;
  filter:blur(11px);
  animation:hero-fan-rev 96s linear infinite;
}
@keyframes hero-fan-rev{
  from{transform:translateX(-50%) rotate(360deg)}
  to  {transform:translateX(-50%) rotate(0deg)}
}

/* ---- 3. dust motes catching the light ---- */
.hero-motes{
  position:absolute; inset:0;
  overflow:hidden; pointer-events:none;
  z-index:1;
}
.hero-motes i{
  position:absolute; display:block;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 6px 1px rgba(255,255,255,.85);
  opacity:0;
  will-change:transform, opacity;
  animation-name:hero-mote;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes hero-mote{
  0%  {transform:translate3d(0,0,0);opacity:0}
  15% {opacity:.9}
  85% {opacity:.45}
  100%{transform:translate3d(var(--mx,30px), var(--my,-380px), 0);opacity:0}
}

/* ---- gentle float on the hero artwork / video ---- */
.hero-artwork{animation:hero-float 7s ease-in-out infinite}
@keyframes hero-float{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,-12px,0)}
}

/* ---- accessibility ---- */
@media (prefers-reduced-motion: reduce){
  .hero-rays::before, .hero-rays::after,
  .hero-rays .fan, .hero-motes i, .hero-artwork{animation:none !important}
  .hero-motes{display:none}
}