/* Hepsia tech effects — add these CSS classes in Elementor (Advanced → CSS Classes).
   All effects stop for visitors who have "reduce motion" switched on. */

/* 1. Particle network background (canvas injected by fx.js) */
.hepsia-particles{ position:relative; overflow:hidden; }
.hepsia-particles > .hepsia-fx-canvas{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:0; }
.hepsia-particles > *:not(.hepsia-fx-canvas):not(.elementor-background-overlay):not(.elementor-background-video-container):not(.elementor-shape){ position:relative; z-index:1; }

/* 2. Drifting blueprint grid */
.hepsia-grid-bg{ position:relative; overflow:hidden; }
.hepsia-grid-bg::after{
  content:""; position:absolute; inset:-60px; pointer-events:none; z-index:0;
  background-image:linear-gradient(rgba(0,175,239,.13) 1px, transparent 1px), linear-gradient(90deg, rgba(0,175,239,.13) 1px, transparent 1px);
  background-size:60px 60px;
  -webkit-mask-image:radial-gradient(ellipse at 70% 50%, #000 0%, transparent 70%);
          mask-image:radial-gradient(ellipse at 70% 50%, #000 0%, transparent 70%);
  animation:hepsia-grid 18s linear infinite;
}
.hepsia-grid-bg > *{ position:relative; z-index:1; }
@keyframes hepsia-grid{ to{ transform:translate(60px, 60px); } }

/* 3. Animated gradient border (cards, pricing tables, image boxes) */
@property --hepsia-angle{ syntax:'<angle>'; initial-value:0deg; inherits:false; }
.hepsia-gradient-border{ position:relative; }
.hepsia-gradient-border::before{
  content:""; position:absolute; inset:0; padding:2px; border-radius:inherit; pointer-events:none; z-index:2;
  background:conic-gradient(from var(--hepsia-angle), #3E4095, #00AFEF, #3E4095 40%, #3E4095 60%, #00AFEF, #3E4095);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  animation:hepsia-spin 6s linear infinite;
}
@keyframes hepsia-spin{ to{ --hepsia-angle:360deg; } }

/* 4. Light sweep on buttons (put the class on the Elementor Button widget) */
.hepsia-glow-btn .elementor-button, a.hepsia-glow-btn, button.hepsia-glow-btn{ position:relative; overflow:hidden; }
.hepsia-glow-btn .elementor-button::after, a.hepsia-glow-btn::after, button.hepsia-glow-btn::after{
  content:""; position:absolute; top:0; bottom:0; left:-60%; width:40%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform:skewX(-18deg); animation:hepsia-sweep 3.8s ease-in-out infinite;
}
@keyframes hepsia-sweep{ 0%, 60%{ left:-60%; } 100%{ left:130%; } }

/* 5. Gentle float (hero images, device mockups) */
.hepsia-float{ animation:hepsia-float 6s ease-in-out infinite; }
@keyframes hepsia-float{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-12px); } }

/* 6. Bar wipe reveal for headings — plays once when scrolled into view */
.hepsia-wipe{ position:relative; }
.hepsia-wipe .elementor-heading-title, .hepsia-wipe.hepsia-wipe--self{ position:relative; display:inline-block; }
.hepsia-wipe:not(.is-in) .elementor-heading-title, .hepsia-wipe--self:not(.is-in){ color:transparent !important; }
.hepsia-wipe.is-in .elementor-heading-title, .hepsia-wipe--self.is-in{ transition:color 0s .35s; }
.hepsia-wipe .elementor-heading-title::after, .hepsia-wipe--self::after{
  content:""; position:absolute; top:0; bottom:0; left:0; width:100%; background:#00AFEF;
  transform:scaleX(0); transform-origin:left;
}
.hepsia-wipe.is-in .elementor-heading-title::after, .hepsia-wipe--self.is-in::after{ animation:hepsia-wipe .8s cubic-bezier(.7,0,.3,1) both; }
@keyframes hepsia-wipe{ 0%{ transform:scaleX(0); transform-origin:left; } 45%{ transform:scaleX(1); transform-origin:left; } 55%{ transform:scaleX(1); transform-origin:right; } 100%{ transform:scaleX(0); transform-origin:right; } }

/* 7. Typed text — [hepsia_typed words="..."] */
.hepsia-typed{ color:#00AFEF; white-space:nowrap; }
.hepsia-typed::after{ content:""; display:inline-block; width:.08em; height:.9em; margin-left:.08em; background:currentColor; vertical-align:-.08em; animation:hepsia-caret 1s steps(1) infinite; }
@keyframes hepsia-caret{ 50%{ opacity:0; } }

@media (prefers-reduced-motion: reduce){
  .hepsia-grid-bg::after, .hepsia-gradient-border::before, .hepsia-float, .hepsia-typed::after,
  .hepsia-glow-btn .elementor-button::after, a.hepsia-glow-btn::after, button.hepsia-glow-btn::after{ animation:none !important; }
  .hepsia-wipe .elementor-heading-title, .hepsia-wipe--self{ color:inherit !important; }
  .hepsia-wipe .elementor-heading-title::after, .hepsia-wipe--self::after{ display:none; }
}