/* HealthOps — حركة مستوحاة من MetaMask (orbs، طفو، reveal) */

/* orbs داخل section.hero */
.hero > .hop-orbs,
.dhero > .hop-orbs{
  position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;
}
.hero-carousel > .hero-track,
.hero-carousel > .hero-progress,
.hero-carousel > .hero-nav{position:relative;z-index:1}
.hero-slide .hero-grid,
.dhero .wrap{position:relative;z-index:2}
.hero-nav,.hero-dots,.hero-progress{z-index:2}

.hop-orb{
  position:absolute;border-radius:50%;filter:blur(52px);opacity:.72;
  animation:hop-orb-drift 12s ease-in-out infinite alternate;
}
.hop-orb--1{
  width:min(560px,78vw);height:min(560px,78vw);
  top:-18%;inset-inline-end:-12%;
  background:radial-gradient(circle,rgba(93,95,239,.55),transparent 68%);
}
.hop-orb--2{
  width:min(440px,62vw);height:min(440px,62vw);
  bottom:-20%;inset-inline-start:-10%;
  background:radial-gradient(circle,rgba(22,185,125,.38),transparent 68%);
  animation-delay:-4s;animation-duration:16s;
}
.hop-orb--accent{
  width:min(320px,46vw);height:min(320px,46vw);
  top:18%;inset-inline-start:28%;
  background:radial-gradient(circle,rgba(124,122,244,.42),transparent 70%);
  animation-delay:-7s;animation-duration:14s;
}
@keyframes hop-orb-drift{
  0%{transform:translate(0,0) scale(1)}
  100%{transform:translate(24px,-28px) scale(1.08)}
}

/* الطفو عبر GSAP — لا animation CSS هنا لتجنب تعارض transform */
.hop-float{will-change:transform}
.hop-parallax{will-change:transform}

.hero .hop-float .shot-frame,
.dhero .hop-float .shot-frame{
  transform:perspective(1200px) rotateY(-2deg);
  box-shadow:0 36px 80px rgba(30,31,75,.22),0 0 0 1px rgba(93,95,239,.08);
  transition:box-shadow .3s ease,transform .3s ease;
}
.hero .hop-float:hover .shot-frame,
.dhero .hop-float:hover .shot-frame{
  transform:perspective(1200px) rotateY(0deg) translateY(-4px);
  box-shadow:0 44px 96px rgba(30,31,75,.26),0 0 0 1px rgba(93,95,239,.14);
}
@media(max-width:920px){
  .hero .hop-float .shot-frame,.dhero .hop-float .shot-frame{transform:none}
  .hero .hop-float:hover .shot-frame,.dhero .hop-float:hover .shot-frame{transform:none}
}

/* Reveal — hidden until GSAP runs */
html.hop-motion-ready [data-hop-reveal]{
  opacity:0;transform:translateY(32px);
}
html.hop-motion-ready [data-hop-reveal="right"]{
  transform:translateX(36px);
}
html[dir="rtl"].hop-motion-ready [data-hop-reveal="right"]{
  transform:translateX(-36px);
}
html.hop-no-motion [data-hop-reveal],
html:not(.hop-motion-ready) [data-hop-reveal]{
  opacity:1!important;transform:none!important;
}

/* Nav shrink on scroll */
.nav{transition:box-shadow .25s ease,background .25s ease}
.nav .nav-in,.nav-in{transition:height .25s ease}
.nav.nav-shrunk .nav-in{height:58px}
.nav.nav-shrunk{box-shadow:0 8px 28px rgba(30,31,75,.10);background:rgba(255,255,255,.96)}

/* Stagger children — visible until GSAP animates */
[data-hop-stagger] > *{opacity:1}

/* طباعة أكبر — فرق واضح */
.hero h1{font-size:clamp(36px,5.8vw,64px)!important;line-height:1.06!important;letter-spacing:-.03em!important}
.dhero h1{font-size:clamp(34px,5vw,52px)!important;line-height:1.08!important}
.head-center h2{font-size:clamp(30px,4.2vw,44px)!important}
.hero .lead{font-size:clamp(17px,2.2vw,20px)!important;line-height:1.8!important}

.section{padding:clamp(80px,11vw,108px) 0}
.section[id]{scroll-margin-top:84px}

@media(prefers-reduced-motion:reduce){
  .hop-orb{animation:none!important;opacity:.4}
  html.hop-motion-ready [data-hop-reveal]{opacity:1!important;transform:none!important}
}

@media(max-width:767px){
  .hop-orb{opacity:.5;filter:blur(40px)}
}