/* ============================================================
   enhance.css — creative/animated layer (progressive enhancement)
   Adds 3D + motion on top of style.css without changing structure.
   ============================================================ */

/* --- scroll progress bar --- */
.scrollbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--accent),var(--accent2));box-shadow:0 0 12px rgba(34,211,238,.6)}

/* --- animated gradient section headings --- */
h2.sec{
  background:linear-gradient(90deg,var(--text) 0%,var(--accent) 40%,var(--accent2) 60%,var(--text) 100%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  animation:shine 7s linear infinite}
@keyframes shine{to{background-position:250% 0}}
.eyebrow{position:relative;display:inline-block;text-shadow:0 0 18px rgba(34,211,238,.45)}

/* --- HERO: animated background --- */
.hero{position:relative;overflow:hidden}
.hero .wrap{position:relative;z-index:3}
.hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(34,211,238,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(34,211,238,.06) 1px,transparent 1px);
  background-size:46px 46px;
  -webkit-mask:radial-gradient(circle at 50% 0,#000,transparent 72%);
          mask:radial-gradient(circle at 50% 0,#000,transparent 72%);
  animation:gridmove 22s linear infinite}
@keyframes gridmove{to{background-position:46px 46px}}

/* floating blurred orbs (injected by JS) */
.orb{position:absolute;border-radius:50%;filter:blur(64px);opacity:.55;z-index:1;pointer-events:none;
  animation:float 16s ease-in-out infinite}
@keyframes float{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(30px,-26px) scale(1.08)}66%{transform:translate(-24px,20px) scale(.94)}}

/* floating 3D geometric shapes (injected by JS) */
.shape{position:absolute;z-index:2;pointer-events:none;opacity:.5;
  border:1.5px solid rgba(34,211,238,.35);border-radius:14px;
  box-shadow:inset 0 0 26px rgba(99,102,241,.18);
  animation:spin 18s linear infinite}
.shape.ring{border-radius:50%;border-color:rgba(99,102,241,.4)}
.shape.dot{background:radial-gradient(circle at 30% 30%,var(--accent),transparent 70%);border:none;opacity:.7;animation:float 12s ease-in-out infinite}
@keyframes spin{to{transform:rotate3d(1,1,.4,360deg)}}

/* --- scroll reveal --- */
.reveal{opacity:0;transform:translateY(34px);
  transition:opacity .7s ease,transform .75s cubic-bezier(.2,.75,.25,1)}
.reveal.in{opacity:1;transform:none}

/* --- 3D tilt cards --- */
.g4,.g3{perspective:1200px}
.card,.price{position:relative;overflow:hidden;transform-style:preserve-3d;
  transition:transform .2s ease,border-color .2s ease,box-shadow .3s ease;will-change:transform}
.card::after,.price::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  transition:opacity .35s;border-radius:inherit;
  background:radial-gradient(520px circle at var(--mx,50%) var(--my,50%),rgba(34,211,238,.14),transparent 45%)}
.card:hover,.price:hover{box-shadow:0 24px 60px rgba(2,8,20,.55),0 0 0 1px rgba(34,211,238,.25)}
.card:hover::after,.price:hover::after{opacity:1}

/* --- buttons: shimmer sweep --- */
.btn-primary{position:relative;overflow:hidden}
.btn-primary::before{content:"";position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);transition:left .6s}
.btn-primary:hover::before{left:140%}

/* --- service icons: gentle float --- */
.card .ico{animation:bob 4.5s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}

/* respect reduced-motion */
@media(prefers-reduced-motion:reduce){
  .orb,.shape,.card .ico,h2.sec,.hero::after{animation:none!important}
  .reveal{transition:none;opacity:1;transform:none}
}