/* Motion layer. Animations here are intentionally NOT wrapped in
   prefers-reduced-motion queries: the site owner wants motion on for every visitor,
   including systems where OS animations are switched off. */

/* ============ Page transitions ============ */
@view-transition { navigation: auto; }
.site-header { view-transition-name: header; }
::view-transition-old(root) { animation: vtOut .4s var(--ease) both; }
::view-transition-new(root) { animation: vtIn .75s var(--ease) both; }
@keyframes vtOut { to { opacity: 0; scale: .97; filter: blur(6px); } }
@keyframes vtIn { from { clip-path: circle(0% at 50% 100%); } to { clip-path: circle(150% at 50% 100%); } }

/* ============ Reveal system ============ */
.js [data-reveal]:not(.is-in) { opacity: 0; }
[data-reveal].is-in { animation: revUp 1s var(--ease) var(--d, 0s) backwards; }
[data-reveal="scale"].is-in { animation-name: revScale; }
[data-reveal="rise"].is-in { animation: revRise 1.1s var(--spring) calc(var(--i, 0) * .12s) backwards; }
@keyframes revUp { from { opacity: 0; translate: 0 44px; } }
@keyframes revScale { from { opacity: 0; scale: .9; filter: blur(8px); } }
@keyframes revRise { from { opacity: 0; translate: 0 90px; rotate: 3deg; } }

[data-split] .w { display: inline-block; overflow: clip; overflow-clip-margin: .2em; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
[data-split] .wi { display: inline-block; }
.js [data-split]:not(.is-in) .wi { translate: 0 115%; }
[data-split].is-in .wi { animation: wordUp 1s var(--ease) calc(var(--d, 0s) + var(--wi) * .07s) backwards; }
@keyframes wordUp { from { translate: 0 115%; rotate: 6deg; } }

/* ============ Hero bits ============ */
.wave svg { animation: waveHand 2.4s ease-in-out infinite; }
@keyframes waveHand { 0%, 60%, 100% { rotate: 0deg; } 10%, 30% { rotate: 18deg; } 20%, 40% { rotate: -10deg; } }
.ht-caret { animation: blink 1s steps(1) infinite; }
.scene-glow { animation: spin 16s linear infinite; }
.scroll-hint span { animation: scrollHint 1.8s var(--ease) infinite; }
@keyframes scrollHint { 0% { translate: 0 0; opacity: 1; } 70% { translate: 0 16px; opacity: 0; } 100% { translate: 0 0; opacity: 0; } }
.marquee-track { animation: marquee 34s linear infinite; }
.footer-marquee .marquee-track { animation-duration: 60s; }
.svc-marquee .marquee-track { animation-duration: 26s; animation-direction: reverse; }
@keyframes marquee { to { transform: translateX(-50%); } }
.price-badge svg { animation: spin 18s linear infinite; }
.term-caret { animation: blink 1s steps(1) infinite; }
.cookie-icon svg { animation: wobble 3s ease-in-out infinite; }
.cta-glow.g1 { animation: drift 13s ease-in-out infinite alternate; }
.cta-glow.g2 { animation: drift 16s ease-in-out -4s infinite alternate-reverse; }
.cta-glow.g3 { animation: drift 11s ease-in-out -2s infinite alternate; }
@keyframes drift { to { translate: 12vmax 8vmax; scale: 1.2; } }

/* ============ Isometric scenes ============ */
.iso polygon, .iso .solid { stroke: var(--ink); stroke-width: 1.2; stroke-linejoin: round; }
.iso .ring { stroke: var(--ink); stroke-width: 1.2; }
.iso .grid line { stroke: #4A4396; stroke-width: 1; opacity: .55; }
.iso text { font-family: var(--f-mono); }
.iso .shadow { stroke: none; }

.js .iso .a-drop { opacity: 0; }
.iso.is-in .a-drop { opacity: 1; animation: isoDrop 1s var(--spring) var(--d, 0s) backwards; }
@keyframes isoDrop { from { opacity: 0; transform: translateY(-90px); } 40% { opacity: 1; } }
.iso .a-float { animation: isoFloat 4.6s ease-in-out calc(var(--f, 0s) + 1.8s) infinite alternate; }
@keyframes isoFloat { to { transform: translateY(calc(var(--amp, 8px) * -1)); } }

.iso .a-spin, .mini .spin { transform-box: fill-box; transform-origin: center; animation: spin var(--spd, 8s) linear infinite; }
.iso .a-spin.rev { animation-direction: reverse; }
.iso .a-dash { stroke-dasharray: 2 12; animation: dash var(--spd, 1.2s) linear infinite; }
.iso .a-dash.slow { stroke-dasharray: 4 9; animation: dash2 1.6s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -14; } }
@keyframes dash2 { to { stroke-dashoffset: -13; } }

.iso .a-type { transform-box: fill-box; transform-origin: left center; }
.js .iso:not(.is-in) .a-type { transform: scaleX(0); }
.iso.is-in .a-type { animation: typeLoop 7s var(--ease) var(--d, 0s) infinite backwards; }
@keyframes typeLoop { 0% { transform: scaleX(0); } 12%, 86% { transform: scaleX(1); } 96%, 100% { transform: scaleX(0); } }

.iso .a-pop { transform-box: fill-box; transform-origin: center; }
.js .iso:not(.is-in) .a-pop { transform: scale(0); }
.iso.is-in .a-pop { animation: popLoop 6s var(--spring) var(--d, 0s) infinite backwards; }
@keyframes popLoop { 0% { transform: scale(0); } 9% { transform: scale(1.12); } 13%, 88% { transform: scale(1); } 96%, 100% { transform: scale(0); } }

.iso .a-blink { animation: blink 1.1s steps(1) var(--d, 0s) infinite; }
.iso .a-pulse { transform-box: fill-box; transform-origin: center; animation: pulse 1.8s ease-in-out infinite; }
.iso .a-ripple { transform-box: fill-box; transform-origin: center; animation: ripple 2.6s var(--ease) var(--d, 0s) infinite; }
.iso .a-feed { animation: feed 10s var(--ease) infinite; }
.iso .a-cursor { animation: cursorPath 7s ease-in-out infinite; }
.iso .a-glow { animation: glow 2.2s ease-in-out infinite alternate; }
.iso .a-plug { animation: plug 3.6s var(--ease) infinite; }
.iso .a-wiggle { transform-box: fill-box; transform-origin: 8% 50%; animation: wiggle 2.8s ease-in-out infinite; }
.iso .a-rise { animation: rise 3.4s ease-in-out infinite alternate; }
.iso .a-dot { animation: dotBounce 1.2s ease-in-out var(--d, 0s) infinite; }

@keyframes ripple { from { transform: scale(.15); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes feed { 0%, 14% { transform: translateY(0); } 32%, 48% { transform: translateY(-30px); } 66%, 82% { transform: translateY(-72px); } 100% { transform: translateY(0); } }
@keyframes cursorPath {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-70px, 40px); } 26% { transform: translate(-70px, 40px) scale(.85); } 30% { transform: translate(-70px, 40px); }
  55% { transform: translate(40px, 70px); } 61% { transform: translate(40px, 70px) scale(.85); } 65% { transform: translate(40px, 70px); }
  85% { transform: translate(20px, -20px); }
}
@keyframes glow { from { opacity: .35; } to { opacity: 1; } }
@keyframes plug { 0%, 100% { transform: translateY(-22px); } 45%, 60% { transform: translateY(0); } }
@keyframes wiggle { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(9deg); } }
@keyframes rise { from { transform: translateY(6px); } to { transform: translateY(-14px); } }
@keyframes dotBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-5px); } }

/* ============ Shared keyframes ============ */
@keyframes spin { to { rotate: 360deg; } }
@keyframes blink { 50% { opacity: 0; } }
@keyframes pulse { 50% { transform: scale(1.25); opacity: .75; } }
@keyframes wobble { 0%, 100% { rotate: 0deg; } 25% { rotate: -10deg; } 75% { rotate: 8deg; } }
@keyframes bob { to { translate: 0 -10px; } }
@keyframes bobT { to { transform: translateY(-10px); } }

/* ============ Mini service icons ============ */
.mini-web .l1, .mini-web .l2, .mini-web .l3 { stroke-dasharray: 30; animation: miniType 3.2s var(--ease) infinite; }
.mini-web .l2 { animation-delay: .3s; } .mini-web .l3 { animation-delay: .6s; }
.mini-web .cur { animation: blink 1s steps(1) infinite; }
@keyframes miniType { 0% { stroke-dashoffset: 30; } 40%, 80% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -30; } }
.mini-mob .swipe { animation: swipe 3.4s var(--ease) infinite; }
@keyframes swipe { 0%, 30% { translate: 0 0; } 45%, 75% { translate: 0 -8px; } 100% { translate: 0 0; } }
.mini-mob .ping { transform-box: fill-box; transform-origin: center; animation: pulse 1.6s ease-in-out infinite; }
.mini-db .d2, .mini-db .d3 { animation: bob 1.4s ease-in-out infinite alternate; }
.mini-db .d3 { animation-delay: .35s; }
.mini-db .flowline { stroke-dasharray: 4 5; animation: dash 1s linear infinite; }
.mini-gear .spin { --spd: 7s; }
.svc-card:hover .mini, .other:hover .mini { animation: wobble .8s ease-in-out; }

/* ============ Decorative micro elements ============ */
.deco { position: absolute; z-index: 1; width: var(--s, 48px); pointer-events: none; translate: var(--px, 0px) var(--py, 0px); transition: translate .6s cubic-bezier(.2, .7, .2, 1); }
.deco svg { width: 100%; height: auto; overflow: visible; }
@media (max-width: 700px) { .only-desk { display: none; } }
@media (min-width: 701px) { .only-mob { display: none; } }

.deco-star svg { animation: spin 10s linear infinite; }
.deco-star path { transform-box: fill-box; transform-origin: center; animation: pulse 2.6s ease-in-out infinite; stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; }

.deco-ring svg > circle { transform-box: view-box; transform-origin: 50% 50%; animation: spin 24s linear infinite reverse; }
.deco-ring .orbit { transform-box: view-box; transform-origin: 50% 50%; animation: spin 4.5s linear infinite; }
.deco-ring .orbit circle { stroke: var(--ink); stroke-width: 2; }

.deco-squiggle path { stroke-dasharray: 300; animation: drawLoop 4s ease-in-out infinite alternate; }
@keyframes drawLoop { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }

.deco-plus path { transform-box: fill-box; transform-origin: center; animation: twinkle 2.2s ease-in-out calc(var(--i) * .3s) infinite; }
@keyframes twinkle { 0%, 100% { opacity: .2; transform: scale(.7); } 50% { opacity: 1; transform: scale(1.1) rotate(90deg); } }

.deco-brackets { display: flex; align-items: center; gap: 4px; width: auto; font-family: var(--f-mono); font-size: 2.6rem; font-weight: 600; color: var(--violet); }
.deco-brackets .b-l { animation: brL 2.2s var(--ease) infinite; }
.deco-brackets .b-r { animation: brR 2.2s var(--ease) infinite; }
.deco-brackets .b-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--sun); animation: pulse 1.1s ease-in-out infinite; }
@keyframes brL { 50% { translate: -10px 0; } }
@keyframes brR { 50% { translate: 10px 0; } }

.deco-caret { display: flex; align-items: center; gap: 8px; width: auto; font-family: var(--f-mono); font-size: 1.6rem; color: var(--mint); font-weight: 600; }
.deco-caret .caret { width: 14px; height: 1.6rem; background: var(--mint); animation: blink 1s steps(1) infinite; }

.deco-blob svg { animation: spin 22s linear infinite; }

.deco-dots { display: flex; gap: 8px; width: auto; padding: 12px 16px; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--line); }
.deco-dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--coral); animation: dotBounce2 1.2s ease-in-out infinite; }
.deco-dots i:nth-child(2) { background: var(--sun); animation-delay: .15s; }
.deco-dots i:nth-child(3) { background: var(--mint); animation-delay: .3s; }
@keyframes dotBounce2 { 0%, 60%, 100% { translate: 0 0; } 30% { translate: 0 -8px; } }
.services .deco-dots, .offers-sec .deco-dots { background: #fff; border-color: #D6D1F5; }

.deco-eq { display: flex; align-items: end; gap: 5px; width: auto; height: 38px; }
.deco-eq i { width: 7px; height: 100%; border-radius: 4px; background: var(--violet); transform-origin: bottom; animation: eq 1.1s ease-in-out infinite alternate; }
.deco-eq i:nth-child(2) { background: var(--coral); animation-delay: -.4s; }
.deco-eq i:nth-child(3) { background: var(--sun); animation-delay: -.8s; }
.deco-eq i:nth-child(4) { background: var(--mint); animation-delay: -.2s; }
.deco-eq i:nth-child(5) { animation-delay: -.6s; }
@keyframes eq { from { transform: scaleY(.2); } to { transform: scaleY(1); } }

.deco-cube { height: var(--s, 48px); perspective: 400px; }
.cube3d { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: cube 9s linear infinite; }
.cube3d i { position: absolute; inset: 0; border: 2px solid var(--ink); border-radius: 6px; }
.cube3d .f0 { background: var(--violet); transform: translateZ(calc(var(--s, 48px) / 2)); }
.cube3d .f1 { background: var(--coral); transform: rotateY(180deg) translateZ(calc(var(--s, 48px) / 2)); }
.cube3d .f2 { background: var(--mint); transform: rotateY(90deg) translateZ(calc(var(--s, 48px) / 2)); }
.cube3d .f3 { background: var(--sun); transform: rotateY(-90deg) translateZ(calc(var(--s, 48px) / 2)); }
.cube3d .f4 { background: #B9BAFF; transform: rotateX(90deg) translateZ(calc(var(--s, 48px) / 2)); }
.cube3d .f5 { background: #FFB3BC; transform: rotateX(-90deg) translateZ(calc(var(--s, 48px) / 2)); }
@keyframes cube { from { transform: rotateX(-24deg) rotateY(0deg); } to { transform: rotateX(-24deg) rotateY(360deg); } }

.deco-sync svg { animation: spin 3.6s var(--ease) infinite; }
.deco-orbit svg { animation: spin 14s linear infinite; }
.deco-orbit circle { animation: pulse 1.6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

.deco-chip { display: inline-flex; align-items: center; gap: 8px; width: auto; white-space: nowrap; padding: 8px 14px; border-radius: 999px; font-family: var(--f-mono); font-size: .8rem; color: var(--text); background: rgba(30, 25, 80, .9); border: 1px solid var(--line); box-shadow: 0 14px 30px -14px rgba(0,0,0,.6); animation: bobT 2.6s ease-in-out infinite alternate; }
.deco-chip .pulse { width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 0 currentColor; animation: chipPulse 1.6s ease-out infinite; color: var(--mint); }
@keyframes chipPulse { 0% { box-shadow: 0 0 0 0 rgba(79,227,193,.7); } 100% { box-shadow: 0 0 0 10px rgba(79,227,193,0); } }

.deco-zigzag path { stroke-dasharray: 20 10; animation: dash 1.2s linear infinite; }

.deco-pcursor { display: flex; align-items: end; gap: 2px; width: auto; }
.deco-pcursor svg { width: 26px; animation: tap 2.4s ease-in-out infinite; }
.deco-pcursor b { font-size: .8rem; padding: 4px 10px; border-radius: 999px; background: var(--coral); color: var(--ink); border: 2px solid var(--ink); font-weight: 700; animation: tapLabel 2.4s ease-in-out infinite; }
@keyframes tap { 0%, 100% { translate: 0 0; } 40% { translate: 10px -10px; } 50% { translate: 10px -10px; scale: .85; } 60% { translate: 10px -10px; } }
@keyframes tapLabel { 0%, 45%, 100% { scale: 1; } 52% { scale: 1.15; } }

/* decos inside light sections */
.services .deco-plus svg, .offers-sec .deco-plus svg, .form-sec .deco-plus svg { stroke: var(--ink); }
.cta-band .deco-plus svg { stroke: var(--ink); }

/* ============ Utilities ============ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tilt { transition: transform .3s var(--ease), box-shadow .35s var(--ease), translate .35s var(--ease), background .3s, border-color .3s; }