/* Hepsia motion layer — subtle, fast, brand-coloured.
   Everything is keyed off html.hm-on, which motion.js adds only when the visitor
   hasn't asked for reduced motion. Without it, the page renders exactly as built. */

:root{
  --hm-indigo:#3E4095; --hm-deep:#24265A; --hm-cyan:#00AFEF; --hm-cyan-deep:#0089BC;
  --hm-ease:cubic-bezier(.2,.7,.2,1);
}

/* ---------- 6. page transitions (cross-document, Chrome/Edge/Safari 18+) ---------- */
/* the @view-transition opt-in is printed in <head> by motion.php, so it can be switched off in Settings */
::view-transition-old(root){ animation:hm-vt-out .18s ease both; }
::view-transition-new(root){ animation:hm-vt-in .26s var(--hm-ease) both; }
@keyframes hm-vt-out{ to{ opacity:0; } }
@keyframes hm-vt-in{ from{ opacity:0; transform:translateY(6px); } }
html.hm-no-vt::view-transition-old(root), html.hm-no-vt::view-transition-new(root){ animation:none; }

/* ---------- 1. hero ---------- */
.hepsia-hero{ position:relative; overflow:hidden; isolation:isolate; }
html.hm-on .hepsia-hero{
  background-image:linear-gradient(120deg,#1C1E4A 0%,#24265A 30%,#2F3180 55%,#3E4095 75%,#24265A 100%) !important;
  background-size:260% 260% !important;
  animation:hm-grad 26s ease-in-out infinite alternate;
}
@keyframes hm-grad{ from{ background-position:0% 40%; } to{ background-position:100% 60%; } }

.hm-hero-layer{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.hm-hero-layer canvas{ position:absolute; inset:0; width:100%; height:100%; }
/* keep motion away from the text: particles and shapes fade out towards the left */
.hm-hero-layer{ -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 38%,#000 62%); mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.25) 38%,#000 62%); }
@media (max-width:767px){
  .hm-hero-layer{ -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent 55%,rgba(0,0,0,.6) 100%); mask-image:linear-gradient(180deg,transparent 0%,transparent 55%,rgba(0,0,0,.6) 100%); }
}
.hepsia-hero > .elementor-container, .hepsia-hero > .e-con-inner, .hepsia-hero > .elementor-widget-wrap,
.hepsia-hero > *:not(.hm-hero-layer):not(.hm-scene):not(.hs-scene):not(.elementor-background-overlay):not(.elementor-background-slideshow){ position:relative; z-index:1; }

.hm-shape{ position:absolute; display:block; opacity:.9; will-change:transform; }
html.hm-on .hm-shape{ animation:hm-float var(--d,14s) ease-in-out var(--delay,0s) infinite alternate; }
@keyframes hm-float{
  from{ transform:translate3d(0,0,0) rotate(var(--r0,0deg)); }
  to{ transform:translate3d(var(--dx,10px),var(--dy,-18px),0) rotate(var(--r1,8deg)); }
}

/* hero text: fade + slide in sequence on load (hidden before the script runs, to avoid a flash) */
html.hm-on:not(.hm-ready) .hepsia-hero .elementor-widget{ opacity:0; }
html.hm-on .hepsia-hero .hm-in{ opacity:0; transform:translateY(18px); }
html.hm-on .hepsia-hero .hm-in.hm-shown{ opacity:1; transform:none; transition:opacity .7s var(--hm-ease), transform .7s var(--hm-ease); transition-delay:var(--hm-delay,0ms); }

/* CTA buttons: subtle lift + light sweep on hover */
.hepsia-hero .elementor-button, .hm-cta .elementor-button{ position:relative; overflow:hidden; transition:transform .2s var(--hm-ease), box-shadow .2s var(--hm-ease), background-color .2s ease, color .2s ease !important; }
.hepsia-hero .elementor-button:hover, .hm-cta .elementor-button:hover{ transform:translateY(-2px); box-shadow:0 10px 24px -10px rgba(0,175,239,.55); }
.hepsia-hero .elementor-button::after, .hm-cta .elementor-button::after{
  content:""; position:absolute; top:0; bottom:0; left:-70%; width:45%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent); transform:skewX(-18deg); pointer-events:none;
}
.hepsia-hero .elementor-button:hover::after, .hm-cta .elementor-button:hover::after{ left:130%; transition:left .6s var(--hm-ease); }

/* ---------- 2. scroll reveals ---------- */
html.hm-on .hm-reveal{ opacity:0; transform:translateY(24px); }
html.hm-on .hm-reveal.hm-shown{ opacity:1; transform:none; transition:opacity .7s var(--hm-ease), transform .7s var(--hm-ease); transition-delay:var(--hm-delay,0ms); }

html.hm-on .hm-img{ overflow:hidden; }
html.hm-on .hm-img img{ transform:scale(1.06); opacity:0; clip-path:inset(0 0 12% 0); }
html.hm-on .hm-img.hm-shown img{ transform:none; opacity:1; clip-path:inset(0 0 0 0); transition:transform 1.1s var(--hm-ease), opacity .8s ease, clip-path 1s var(--hm-ease); }

/* ---------- 3. interactive service cards ---------- */
.hm-card{ position:relative; transition:transform .28s var(--hm-ease), box-shadow .28s var(--hm-ease) !important; }
.hm-card > .elementor-widget-wrap, .hm-card > .elementor-column-wrap, .hm-card.e-con{ transition:background-color .28s ease, border-color .28s ease !important; }
.hm-card::before{ content:""; position:absolute; inset:0; border:1px solid transparent; pointer-events:none; transition:border-color .28s ease; z-index:2; }
.hm-card::after{ content:""; position:absolute; left:0; top:0; height:4px; width:100%; background:linear-gradient(90deg,var(--hm-indigo),var(--hm-cyan)); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--hm-ease); z-index:2; }
.hm-card:hover{ transform:translateY(-6px); box-shadow:0 22px 40px -24px rgba(36,38,90,.45); }
.hm-card:hover::before{ border-color:rgba(0,175,239,.55); }
.hm-card:hover::after{ transform:scaleX(1); }
.hm-card:hover > .elementor-widget-wrap, .hm-card:hover > .elementor-column-wrap, .hm-card.e-con:hover{ background-color:#F4F7FD !important; }
.hm-card .elementor-icon, .hm-card .elementor-icon-box-icon .elementor-icon{ transition:transform .35s var(--hm-ease), color .25s ease; }
.hm-card:hover .elementor-icon{ transform:rotate(-8deg) scale(1.06); }
.hm-arrow{ display:inline-block; margin-left:8px; opacity:0; transform:translateX(-8px); transition:opacity .25s ease, transform .3s var(--hm-ease); }
.hm-card:hover .hm-arrow, .hm-card:focus-within .hm-arrow{ opacity:1; transform:none; }
.hm-card:focus-within{ transform:translateY(-6px); }

/* ---------- 5. counters ---------- */
.hm-count{ font-variant-numeric:tabular-nums; }

/* ---------- 4. technology visualisation [hepsia_tech_viz] ---------- */
.hm-tech{
  --tv-bg:#1B1D47; position:relative; display:grid; grid-template-columns:1.25fr .9fr; gap:0; overflow:hidden;
  background:radial-gradient(120% 90% at 20% 0%,#2A2C72 0%,#1B1D47 60%); color:#C9D3EF;
  font-family:'Inter','Segoe UI',sans-serif; border:1px solid rgba(0,175,239,.18);
}
.hm-tech *{ box-sizing:border-box; }
.hm-tech-net{ position:relative; min-height:380px; }
.hm-tech-net svg{ position:absolute; inset:0; width:100%; height:100%; }
.hm-tech-3d{ position:absolute; right:10px; bottom:10px; width:130px; height:130px; opacity:.5; pointer-events:none; }
.hm-tech .edge{ stroke:rgba(0,175,239,.28); stroke-width:1.5; fill:none; stroke-dasharray:4 6; }
html.hm-on .hm-tech.hm-live .edge{ animation:hm-dash 1.6s linear infinite; }
@keyframes hm-dash{ to{ stroke-dashoffset:-20; } }
.hm-tech .node-bg{ fill:#24265A; stroke:rgba(0,175,239,.55); stroke-width:1.5; }
.hm-tech .node-ic{ fill:none; stroke:#00AFEF; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.hm-tech .node-lb{ fill:#C9D3EF; font:600 11px 'Inter','Segoe UI',sans-serif; letter-spacing:.02em; }
.hm-tech .node-pulse{ fill:none; stroke:#00AFEF; stroke-width:1.5; opacity:0; }
html.hm-on .hm-tech.hm-live .node-pulse{ animation:hm-pulse 3.2s ease-out infinite; animation-delay:var(--pd,0s); transform-origin:center; transform-box:fill-box; }
@keyframes hm-pulse{ 0%{ opacity:.7; transform:scale(1); } 70%,100%{ opacity:0; transform:scale(1.55); } }
.hm-tech .packet{ fill:#00AFEF; filter:drop-shadow(0 0 4px rgba(0,175,239,.9)); }
.hm-tech .packet.b{ fill:#fff; }

.hm-tech-code{ position:relative; border-left:1px solid rgba(0,175,239,.18); background:rgba(10,11,40,.45); padding:0; display:flex; flex-direction:column; }
.hm-tech-bar{ display:flex; align-items:center; gap:6px; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,.07); font:500 12px 'Inter',sans-serif; color:#8FA0CF; }
.hm-tech-bar i{ width:9px; height:9px; border-radius:50%; background:#3E4095; display:inline-block; }
.hm-tech-bar i:nth-child(2){ background:#5E61C4; } .hm-tech-bar i:nth-child(3){ background:#00AFEF; }
.hm-tech-bar span{ margin-left:8px; }
.hm-tech pre{ margin:0; padding:16px 18px 18px; font:13px/1.75 ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace; color:#DDE4F7; white-space:pre-wrap; flex:1; min-height:260px; background:none; border:0; }
.hm-tech pre .k{ color:#00AFEF; } .hm-tech pre .s{ color:#9FE3B4; } .hm-tech pre .c{ color:#6F7BB0; } .hm-tech pre .n{ color:#F5C66B; }
.hm-caret{ display:inline-block; width:7px; height:15px; background:#00AFEF; vertical-align:-2px; margin-left:1px; }
html.hm-on .hm-caret{ animation:hm-blink 1s steps(1) infinite; }
@keyframes hm-blink{ 50%{ opacity:0; } }
.hm-tech-status{ display:flex; gap:18px; flex-wrap:wrap; padding:12px 18px; border-top:1px solid rgba(255,255,255,.07); font:500 12px 'Inter',sans-serif; color:#8FA0CF; }
.hm-tech-status b{ color:#fff; font-weight:600; }
.hm-tech-status .ok::before{ content:""; display:inline-block; width:8px; height:8px; border-radius:50%; background:#3BD37F; margin-right:6px; box-shadow:0 0 0 3px rgba(59,211,127,.18); }

@media (max-width:900px){
  .hm-tech{ grid-template-columns:1fr; }
  .hm-tech-code{ border-left:0; border-top:1px solid rgba(0,175,239,.18); }
  .hm-tech-net{ min-height:300px; }
}


/* [hepsia_tech_viz layout="included"] — what's included, next to the live terminal */
.hm-tech--included{ grid-template-columns:1fr 1fr; }
.hm-tech-list{ position:relative; padding:44px 44px 40px; }
.hm-tech-list .hm-tech-3d{ right:10px; top:10px; bottom:auto; width:180px; height:180px; opacity:.4; }
.hm-tech-list > *:not(.hm-tech-3d){ position:relative; }
.hm-tech-kicker{ margin:0 0 22px; max-width:78%; font:600 13px/1.4 'Inter','Segoe UI',sans-serif; letter-spacing:.08em; text-transform:uppercase; color:#00AFEF; }
.hm-tech-list ul{ list-style:none; margin:0; padding:0; display:grid; gap:14px; }
.hm-tech-list li{ position:relative; padding-left:34px; font:500 16px/1.5 'Inter','Segoe UI',sans-serif; color:#E6EBFA; }
.hm-tech-list li::before{ content:""; position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%; background:rgba(0,175,239,.14); box-shadow:inset 0 0 0 1px rgba(0,175,239,.5); }
.hm-tech-list li::after{ content:""; position:absolute; left:7px; top:8px; width:8px; height:5px; border-left:2px solid #00AFEF; border-bottom:2px solid #00AFEF; transform:rotate(-45deg); }
html.hm-on .hm-tech--included.hm-live li{ animation:hm-li .6s var(--hm-ease) both; }
html.hm-on .hm-tech--included.hm-live li:nth-child(2){ animation-delay:.08s } html.hm-on .hm-tech--included.hm-live li:nth-child(3){ animation-delay:.16s }
html.hm-on .hm-tech--included.hm-live li:nth-child(4){ animation-delay:.24s } html.hm-on .hm-tech--included.hm-live li:nth-child(5){ animation-delay:.32s }
html.hm-on .hm-tech--included.hm-live li:nth-child(6){ animation-delay:.40s }
@keyframes hm-li{ from{ opacity:0; transform:translateX(-10px); } }
@media (max-width:900px){
  .hm-tech--included{ grid-template-columns:1fr; }
  .hm-tech-list{ padding:30px 22px 26px; }
  .hm-tech-list .hm-tech-3d{ width:110px; height:110px; right:4px; top:4px; }
  .hm-tech-list li{ font-size:15px; }
  .hm-tech pre{ font-size:12px; min-height:230px; padding:14px; }
}

/* ---------- reduced motion: show everything, move nothing ---------- */
@media (prefers-reduced-motion: reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
  .hepsia-hero, .hm-shape, .hm-tech .edge, .hm-caret, .hm-tech-list li{ animation:none !important; }
  .hm-card, .hm-card:hover{ transform:none; }
}