/* ============================================================
   Red-Rose homepage hero — "A day at the top" (Dubai penthouse)
   Fully scoped: #dxhero descendants + body.dx-* state classes.
   Loaded by index.html only, after styles.css.
   ============================================================ */

/* ---- fixed sky stack (paints behind ALL page content via z:-1) ---- */
#dxhero .dxbg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#0a0807}
/* once the hero is fully scrolled past, drop the whole backdrop: no bleed-through
   behind content, no video decode, no compositing cost for the rest of the page */
body.dx-done #dxhero .dxbg{display:none}
#dxhero .dxbg canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
#dxhero .dxbg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;
  opacity:0;transition:opacity 1.4s ease;pointer-events:none}
#dxhero .dxscrimL,#dxhero .dxscrimR{position:absolute;inset:0;pointer-events:none;transition:opacity 1s ease}
#dxhero .dxscrimL{opacity:0;background:
  linear-gradient(102deg, rgba(10,8,7,.68) 0%, rgba(10,8,7,.4) 34%, rgba(10,8,7,.06) 62%, rgba(10,8,7,.14) 100%),
  linear-gradient(180deg, rgba(10,8,7,.5) 0%, transparent 20%, transparent 74%, rgba(10,8,7,.6) 100%)}
#dxhero .dxscrimR{opacity:1;background:
  linear-gradient(258deg, rgba(10,8,7,.68) 0%, rgba(10,8,7,.4) 34%, rgba(10,8,7,.06) 62%, rgba(10,8,7,.14) 100%),
  linear-gradient(180deg, rgba(10,8,7,.5) 0%, transparent 20%, transparent 74%, rgba(10,8,7,.6) 100%)}
body.dx-side-l #dxhero .dxscrimL{opacity:1}
body.dx-side-l #dxhero .dxscrimR{opacity:0}
body.dx-side-r #dxhero .dxscrimL{opacity:0}
body.dx-side-r #dxhero .dxscrimR{opacity:1}

/* ---- journey sections ---- */
#dxhero section.dxs{min-height:76vh;display:flex;align-items:center;padding:0 clamp(24px,7vw,120px)}
/* beat 1 carries CTAs + stats — anchor it below the fixed nav instead of centering */
#dxhero section.dxs:first-of-type{align-items:flex-start;padding-top:clamp(118px,15vh,170px);padding-bottom:48px}
#dxhero section.dxs .dxrow{width:100%;display:flex}
#dxhero section.dxs.right .dxrow{justify-content:flex-end}
#dxhero section.dxs.left .dxrow{justify-content:flex-start}
#dxhero .dxcap{max-width:680px}
#dxhero .dxcap>*{opacity:0;transform:translateY(24px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1)}
#dxhero section.dxs.in .dxcap>*{opacity:1;transform:none}
#dxhero section.dxs.in .dxcap>*:nth-child(2){transition-delay:.08s}
#dxhero section.dxs.in .dxcap>*:nth-child(3){transition-delay:.16s}
#dxhero section.dxs.in .dxcap>*:nth-child(4){transition-delay:.24s}
#dxhero section.dxs.in .dxcap>*:nth-child(5){transition-delay:.32s}
/* tight dark halo (not just soft glow) so the small gold eyebrow stays legible over bright midday sky */
#dxhero .dxnum{font-family:'Cinzel',serif;font-size:13.5px;letter-spacing:.34em;color:var(--gold);text-transform:uppercase;
  text-shadow:0 0 2px rgba(10,8,7,.95),0 1px 3px rgba(10,8,7,.85),0 2px 18px rgba(10,8,7,.6)}
#dxhero .dxcap h1,#dxhero .dxcap h2{font-family:'Cinzel',serif;font-weight:600;font-size:clamp(40px,5.8vw,78px);line-height:1.04;margin-top:16px;color:#fff;letter-spacing:-.005em;
  text-shadow:0 1px 2px rgba(10,8,7,.55),0 2px 34px rgba(0,0,0,.5)}
#dxhero .dxcap p.dxlede{margin-top:22px;font-size:19px;line-height:1.6;color:rgba(244,238,226,.92);max-width:520px;text-shadow:0 1px 12px rgba(0,0,0,.55)}
#dxhero .dxcap .hl{color:var(--gold)}
#dxhero .hero-cta{margin-top:30px}
#dxhero .hero-stats{margin-top:44px}
#dxhero .hero-stats .n{text-shadow:0 1px 14px rgba(0,0,0,.45)}
#dxhero .hero-stats .l{text-shadow:0 1px 8px rgba(0,0,0,.45)}

/* ---- night: CTA + nav button glow ---- */
body.dx-night #dxhero .dxcap .btn-primary{box-shadow:0 0 26px rgba(193,31,56,.8), 0 0 70px rgba(193,31,56,.4)}
body.dx-night .navlinks .btn{box-shadow:0 0 22px rgba(193,31,56,.75), 0 0 60px rgba(193,31,56,.35)}
#dxhero .dxcap .btn-primary{transition:box-shadow .8s ease,background .18s,transform .18s}

/* ---- responsive ---- */
@media (max-width:700px){
  #dxhero .dxcap p.dxlede{font-size:17px}
  #dxhero .dxcap h1,#dxhero .dxcap h2{font-size:clamp(34px,9vw,44px)}
}
@media (prefers-reduced-motion:reduce){
  #dxhero .dxcap>*{opacity:1;transform:none;transition:none}
  #dxhero .dxbg video{transition:none}
}