/* =========================================================
   Animated hero background
   Layers (back → front):
     1. drifting aurora mesh   (.hero-bg)
     2. slow-rotating gold rings (existing header::before/::after)
     3. floating gold particles  (.hero-particles, JS-generated)
     4. shimmer sweep across the whole hero
   All decorative + pointer-events:none.
   ========================================================= */

/* ---- 1. aurora mesh, two blobs drifting on different paths ---- */
.hero-bg{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:0;
}

.hero-bg span{
  position:absolute;
  border-radius:50%;
  filter:blur(70px);
  will-change:transform;
}

.hero-bg span:nth-child(1){
  width:620px; height:620px; top:-14%; right:-6%;
  background:radial-gradient(circle, rgba(27,90,77,.75), transparent 68%);
  animation:aurora-a 26s ease-in-out infinite;
}
.hero-bg span:nth-child(2){
  width:520px; height:520px; bottom:-16%; left:-8%;
  background:radial-gradient(circle, rgba(201,164,92,.20), transparent 68%);
  animation:aurora-b 32s ease-in-out infinite;
}
.hero-bg span:nth-child(3){
  width:400px; height:400px; top:38%; left:34%;
  background:radial-gradient(circle, rgba(232,213,168,.10), transparent 70%);
  animation:aurora-c 38s ease-in-out infinite;
}

@keyframes aurora-a{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  33%    {transform:translate3d(-70px,50px,0) scale(1.12)}
  66%    {transform:translate3d(40px,90px,0) scale(.94)}
}
@keyframes aurora-b{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  50%    {transform:translate3d(90px,-60px,0) scale(1.18)}
}
@keyframes aurora-c{
  0%,100%{transform:translate3d(0,0,0) scale(1)}
  40%    {transform:translate3d(60px,-40px,0) scale(1.1)}
  75%    {transform:translate3d(-50px,30px,0) scale(.9)}
}

/* ---- 2. gold rings — drift, breathe, and a dashed ring that reads as rotating ----
   NOTE: rotating a plain circle is invisible (it looks identical at every
   angle), so movement here comes from drift + scale + opacity, and from a
   DASHED ring whose dashes visibly travel around as it spins.            */

header::after{
  animation:ring-drift-a 34s ease-in-out infinite;
  transform-origin:center;
}
header::before{
  animation:ring-drift-b 28s ease-in-out infinite;
  transform-origin:center;
}

@keyframes ring-drift-a{
  0%,100%{transform:translate3d(0,0,0) scale(1);        opacity:1}
  35%    {transform:translate3d(-46px,34px,0) scale(1.09); opacity:.55}
  70%    {transform:translate3d(28px,-24px,0) scale(.95);  opacity:.85}
}
@keyframes ring-drift-b{
  0%,100%{transform:translate3d(0,0,0) scale(1);         opacity:.9}
  50%    {transform:translate3d(52px,40px,0) scale(1.14); opacity:.4}
}

/* dashed rings injected by JS — the dashes make the spin clearly visible */
.hero-rings{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:0;
}
.hero-rings b{
  position:absolute;
  display:block;
  border-radius:50%;
  border:1px dashed rgba(201,164,92,.30);
  will-change:transform;
  transform-origin:center;
}
.hero-rings b:nth-child(1){
  width:460px; height:460px; right:6%; top:-120px;
  animation:spin-cw 48s linear infinite;
}
.hero-rings b:nth-child(2){
  width:300px; height:300px; right:16%; top:40px;
  border-color:rgba(232,213,168,.22);
  animation:spin-ccw 34s linear infinite;
}
.hero-rings b:nth-child(3){
  width:640px; height:640px; left:-180px; bottom:-260px;
  border-color:rgba(201,164,92,.16);
  animation:spin-cw 72s linear infinite;
}

@keyframes spin-cw { from{transform:rotate(0deg)}   to{transform:rotate(360deg)} }
@keyframes spin-ccw{ from{transform:rotate(360deg)} to{transform:rotate(0deg)} }

/* a gold dot orbiting one of the rings — unmistakable motion cue */
.hero-rings b:nth-child(2)::after{
  content:"";
  position:absolute;
  top:-4px; left:50%;
  width:7px; height:7px; margin-left:-3.5px;
  border-radius:50%;
  background:var(--gold-pale, #E8D5A8);
  box-shadow:0 0 12px 2px rgba(232,213,168,.55);
}

/* inner pages (buyer / nonbuyer): shorter hero, add the matching 2nd ring */
header.inner-hero::before{
  content:"";position:absolute;right:20px;top:90px;width:300px;height:300px;
  border:1px solid rgba(201,164,92,.12);border-radius:50%;
  animation:ring-spin-rev 70s linear infinite;
  transform-origin:center;
}
header.inner-hero .hero-particles i{--rise:-420px}
header.inner-hero .hero-bg span:nth-child(1){width:520px;height:520px}
header.inner-hero .hero-bg span:nth-child(3){top:24%}

/* ---- 3. floating gold particles ---- */
.hero-particles{
  position:absolute; inset:0; overflow:hidden;
  pointer-events:none; z-index:1;
}
.hero-particles i{
  position:absolute;
  display:block;
  width:3px; height:3px;
  border-radius:50%;
  background:var(--gold-pale, #E8D5A8);
  opacity:0;
  will-change:transform, opacity;
  animation-name:float-up;
  animation-timing-function:linear;
  animation-iteration-count:infinite;
}
@keyframes float-up{
  0%  {transform:translate3d(0, 0, 0) scale(.6);      opacity:0}
  12% {                                               opacity:.85}
  85% {                                               opacity:.5}
  100%{transform:translate3d(var(--drift, 26px), var(--rise, -560px), 0) scale(1); opacity:0}
}

/* ---- 4. slow shimmer sweep ---- */
header .hero-sheen{
  position:absolute; inset:0;
  pointer-events:none; z-index:1;
  background:linear-gradient(
    100deg,
    transparent 35%,
    rgba(232,213,168,.05) 48%,
    rgba(232,213,168,.09) 52%,
    transparent 65%
  );
  background-size:250% 100%;
  animation:sheen 14s ease-in-out infinite;
}
@keyframes sheen{
  0%,100%{background-position:130% 0}
  50%    {background-position:-30% 0}
}

/* ---- hero content and phone sit above all of it ---- */
header .hero-grid{position:relative; z-index:3}
header.inner-hero > .wrap{position:relative; z-index:3}

/* gentle float on the phone mockup + its ring */
.hero-visual img{animation:phone-float 7s ease-in-out infinite}
.hero-visual .ring{animation:ring-pulse 5s ease-in-out infinite}
@keyframes phone-float{
  0%,100%{transform:translate3d(0,0,0)}
  50%    {transform:translate3d(0,-14px,0)}
}
@keyframes ring-pulse{
  0%,100%{transform:scale(1);   opacity:.9}
  50%    {transform:scale(1.05); opacity:.5}
}

/* ---- accessibility: respect reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  .hero-bg span,
  .hero-particles i,
  header .hero-sheen,
  header::before, header::after,
  header.inner-hero::before,
  .hero-rings b,
  .hero-visual img, .hero-visual .ring{
    animation:none !important;
  }
  .hero-particles{display:none}
}