/*
 * Solvix Technologies motion layer
 * Progressive enhancement only: the existing layout remains fully usable when
 * this stylesheet, JavaScript, Canvas, or motion effects are unavailable.
 */

:root {
  --solvix-motion-brand-rgb: 168, 115, 66;
  --solvix-motion-ink-rgb: 23, 23, 23;
  --solvix-motion-ease: cubic-bezier(.22, 1, .36, 1);
  --solvix-motion-perspective: 900px;
}

/* Branded loader. Hidden in markup until JavaScript confirms motion is usable. */
.solvix-loader {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(255, 255, 255, .985);
  opacity: 1;
  visibility: visible;
  transition: opacity .45s ease, visibility .45s ease;
}
.solvix-loader[hidden] { display: none; }
.solvix-loader.is-complete { opacity: 0; visibility: hidden; pointer-events: none; }
.solvix-loader__inner { display: grid; justify-items: center; gap: 13px; }
.solvix-loader__mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 21px;
  background: #fff;
  box-shadow: 0 18px 46px rgba(var(--solvix-motion-brand-rgb), .19);
  animation: solvix-loader-float 1.6s var(--solvix-motion-ease) infinite alternate;
}
.solvix-loader__mark::before,
.solvix-loader__mark::after {
  content: "";
  position: absolute;
  inset: -10px;
  border: 1px solid rgba(var(--solvix-motion-brand-rgb), .25);
  border-radius: 27px;
  animation: solvix-loader-orbit 2.4s linear infinite;
}
.solvix-loader__mark::after { inset: -18px; opacity: .45; animation-direction: reverse; animation-duration: 3.2s; }
.solvix-loader__mark img { width: 45px; height: 45px; object-fit: contain; }
.solvix-loader__name { color: var(--ink); font-family: "Manrope", sans-serif; font-size: 13px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.solvix-loader__line { width: 128px; height: 2px; overflow: hidden; border-radius: 999px; background: var(--brand-soft); }
.solvix-loader__line::after { content: ""; display: block; width: 42%; height: 100%; border-radius: inherit; background: var(--brand); animation: solvix-loader-line 1.15s var(--solvix-motion-ease) infinite; }

/* Header depth and navigation polish. */
.site-header {
  transition: min-height .35s var(--solvix-motion-ease), background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
  will-change: box-shadow;
}
.site-header.solvix-nav-scrolled {
  background: rgba(255, 255, 255, .9) !important;
  box-shadow: 0 11px 35px rgba(var(--solvix-motion-ink-rgb), .07);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  backdrop-filter: blur(16px) saturate(150%);
}
.navbar-brand img { transition: transform .45s var(--solvix-motion-ease), filter .45s ease; transform-origin: left center; }
.navbar-brand:hover img { transform: translateY(-1px) scale(1.012); filter: drop-shadow(0 7px 14px rgba(var(--solvix-motion-brand-rgb), .14)); }
.navbar .nav-link::after { transform-origin: center; transition-duration: .35s; transition-timing-function: var(--solvix-motion-ease); }

/* Shared hero space. The canvas is decorative and always behind content. */
.hero,
.page-hero,
.article-hero { isolation: isolate; }
.page-hero,
.article-hero { overflow: hidden; overflow: clip; }
.hero > .container,
.page-hero > .container,
.article-hero > .container { position: relative; z-index: 3; }
.solvix-hero-scene {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: .62;
  pointer-events: none;
  contain: strict;
}
.hero .solvix-hero-scene { opacity: .78; }
.article-hero .solvix-hero-scene { opacity: .42; }
.solvix-hero-fallback {
  position: absolute;
  z-index: 1;
  width: 340px;
  height: 340px;
  right: 5%;
  top: 50%;
  border: 1px solid rgba(var(--solvix-motion-brand-rgb), .17);
  border-radius: 50%;
  opacity: .6;
  transform: translateY(-50%);
  pointer-events: none;
}
.solvix-hero-fallback::before,
.solvix-hero-fallback::after {
  content: "";
  position: absolute;
  inset: 17%;
  border: 1px solid rgba(var(--solvix-motion-brand-rgb), .22);
  border-radius: 32% 68% 54% 46%;
  animation: solvix-orbit-spin 18s linear infinite;
}
.solvix-hero-fallback::after { inset: 32%; border-radius: 50%; background: radial-gradient(circle, rgba(var(--solvix-motion-brand-rgb), .14), transparent 68%); animation-direction: reverse; animation-duration: 13s; }

/* Existing home hero artwork gains spatial depth without changing its box. */
.hero-visual { perspective: 1100px; transform-style: preserve-3d; }
.hero-visual::before,
.hero-visual::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 9% 5%;
  border: 1px solid rgba(var(--solvix-motion-brand-rgb), .16);
  border-radius: 50%;
  transform: rotateX(67deg) rotateZ(-8deg);
  animation: solvix-orbit-spin 16s linear infinite;
}
.hero-visual::after { inset: 23% 18%; transform: rotateY(69deg) rotateZ(14deg); animation-duration: 12s; animation-direction: reverse; }
.hero-visual img { transition: transform .35s ease-out, filter .45s ease; will-change: transform; }
.hero-card { transition: transform .35s var(--solvix-motion-ease), box-shadow .35s ease, border-color .35s ease; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.hero-card.one { animation: solvix-card-float 4.8s ease-in-out infinite; }
.hero-card.two { animation: solvix-card-float 5.6s ease-in-out -1.2s infinite; }

/* Scroll reveals are applied by JavaScript only after elements are discovered. */
.solvix-reveal {
  opacity: 0;
  transform: translate3d(0, 28px, 0) scale(.988);
  filter: blur(3px);
  transition: opacity .75s var(--solvix-motion-ease), transform .75s var(--solvix-motion-ease), filter .75s ease;
  transition-delay: var(--solvix-reveal-delay, 0ms);
  will-change: opacity, transform;
}
.solvix-reveal[data-solvix-reveal="left"] { transform: translate3d(-28px, 0, 0); }
.solvix-reveal[data-solvix-reveal="right"] { transform: translate3d(28px, 0, 0); }
.solvix-reveal.is-visible { opacity: 1; transform: translate3d(0, 0, 0) scale(1); filter: none; }

/* Perspective hover uses CSS variables set by pointer events. */
.solvix-tilt {
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(var(--solvix-motion-perspective)) rotateX(var(--solvix-rx, 0deg)) rotateY(var(--solvix-ry, 0deg)) translate3d(0, var(--solvix-lift, 0), 0);
  transition: transform .48s var(--solvix-motion-ease), box-shadow .35s ease, border-color .35s ease;
  will-change: transform;
}
.solvix-tilt::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--solvix-glow-x, 50%) var(--solvix-glow-y, 50%), rgba(var(--solvix-motion-brand-rgb), .14), transparent 48%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.solvix-tilt:hover { --solvix-lift: -7px; box-shadow: 0 24px 58px rgba(30, 24, 20, .13); border-color: rgba(var(--solvix-motion-brand-rgb), .3); }
.solvix-tilt:hover::after { opacity: 1; }
.solvix-tilt > * { position: relative; z-index: 1; }
.solvix-tilt > .popular-badge { position: absolute; z-index: 4; }
.service-card .icon-wrap,
.icon-card .icon-wrap,
.value-card .icon-wrap,
.job-card .project-meta { transition: transform .45s var(--solvix-motion-ease), box-shadow .45s ease; }
.service-card:hover .icon-wrap,
.icon-card:hover .icon-wrap { transform: translateZ(24px) rotate(-3deg) scale(1.055); box-shadow: 0 13px 25px rgba(var(--solvix-motion-brand-rgb), .18); }
.project-image,
.blog-card > img,
.article-cover { position: relative; transform: translateZ(1px); }
.project-image::after,
.blog-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: -30% 45% -30% -45%;
  background: linear-gradient(105deg, transparent 37%, rgba(255,255,255,.34) 50%, transparent 63%);
  transform: translateX(-115%) rotate(3deg);
  transition: transform .8s var(--solvix-motion-ease);
  pointer-events: none;
}
.project-card:hover .project-image::after,
.blog-card:hover::before { transform: translateX(185%) rotate(3deg); }
.blog-card { position: relative; }
.blog-card::before { bottom: auto; height: 260px; }

/* Section atmosphere remains within the existing palette. */
.section,
.section-sm,
.cta { position: relative; isolation: isolate; }
.section,
.section-sm { overflow: hidden; overflow: clip; }
.section::after,
.section-sm::after {
  content: "";
  position: absolute;
  z-index: -1;
  width: 360px;
  height: 360px;
  right: -220px;
  top: 16%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--solvix-motion-brand-rgb), .055), transparent 68%);
  pointer-events: none;
}
.bg-soft::after { left: -220px; right: auto; }
.cta::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background: linear-gradient(112deg, transparent 20%, rgba(255,255,255,.07) 46%, transparent 68%);
  transform: translateX(-100%);
  animation: solvix-cta-sheen 8s ease-in-out infinite;
  pointer-events: none;
}
.cta > .container { position: relative; z-index: 2; }

/* Buttons and links keep their current dimensions and semantics. */
.btn-brand,
.btn-outline-brand,
.btn-light-brand,
.text-link,
.social-links a { position: relative; overflow: hidden; isolation: isolate; }
.whatsapp-float { overflow: hidden; isolation: isolate; }
.btn-brand,
.btn-outline-brand,
.btn-light-brand { transform: translateZ(0); transition: color .3s ease, background-color .3s ease, border-color .3s ease, transform .3s var(--solvix-motion-ease), box-shadow .3s ease; }
.btn-brand:hover,
.btn-outline-brand:hover,
.btn-light-brand:hover { box-shadow: 0 13px 28px rgba(var(--solvix-motion-brand-rgb), .22); }
.btn-brand:active,
.btn-outline-brand:active,
.btn-light-brand:active { transform: translateY(0) scale(.975); }
.solvix-ripple {
  position: absolute;
  z-index: -1;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .46);
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0);
  animation: solvix-ripple .62s ease-out forwards;
}
.btn-outline-brand .solvix-ripple { background: rgba(var(--solvix-motion-brand-rgb), .22); }
.text-link { display: inline-flex; align-items: center; gap: 7px; }
.text-link::after { content: "\2192"; transition: transform .3s var(--solvix-motion-ease); }
.text-link:hover::after { transform: translateX(5px); }

/* Form interaction is intentionally calm and never uses perspective tilt. */
.form-control,
.form-select { transition: border-color .25s ease, box-shadow .25s ease, transform .25s var(--solvix-motion-ease), background-color .25s ease; }
.form-control:hover,
.form-select:hover { border-color: rgba(var(--solvix-motion-brand-rgb), .52); }
.form-control:focus,
.form-select:focus { transform: translateY(-1px); }
.career-form,
form.shadow-sm { transition: box-shadow .4s ease, border-color .4s ease; }
.career-form:focus-within,
form.shadow-sm:focus-within { border-color: rgba(var(--solvix-motion-brand-rgb), .32) !important; box-shadow: 0 24px 60px rgba(30, 24, 20, .105) !important; }

/* Article and FAQ focus cues. */
.article-cover { transition: transform .7s var(--solvix-motion-ease), box-shadow .7s ease; }
.article-cover:hover { transform: scale(1.012); box-shadow: 0 26px 60px rgba(30, 24, 20, .12); }
.article-toc { transition: transform .4s var(--solvix-motion-ease), box-shadow .4s ease; }
.article-toc:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.solvix-accordion .accordion-item { transition: transform .35s var(--solvix-motion-ease), box-shadow .35s ease, border-color .35s ease; }
.solvix-accordion .accordion-item:hover { transform: translateY(-2px); border-color: rgba(var(--solvix-motion-brand-rgb), .3); box-shadow: 0 13px 32px rgba(30, 24, 20, .07); }
.process-number { box-shadow: 0 10px 22px rgba(var(--solvix-motion-brand-rgb), .2); transition: transform .4s var(--solvix-motion-ease), box-shadow .4s ease; }
.process-step:hover .process-number { transform: translateY(-4px) rotate(-5deg); box-shadow: 0 16px 29px rgba(var(--solvix-motion-brand-rgb), .28); }

/* Pointer-following light is desktop-only and decorative. */
.solvix-pointer-light {
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--solvix-motion-brand-rgb), .075), transparent 66%);
  opacity: 0;
  transform: translate3d(calc(var(--solvix-pointer-x, -400px) - 50%), calc(var(--solvix-pointer-y, -400px) - 50%), 0);
  transition: opacity .35s ease;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.solvix-pointer-light.is-visible { opacity: 1; }

@keyframes solvix-loader-float { to { transform: translateY(-7px) scale(1.02); } }
@keyframes solvix-loader-orbit { to { transform: rotate(360deg); } }
@keyframes solvix-loader-line { 0% { transform: translateX(-120%); } 60%,100% { transform: translateX(245%); } }
@keyframes solvix-orbit-spin { to { transform: rotateX(67deg) rotateZ(352deg); } }
@keyframes solvix-card-float { 0%,100% { transform: translate3d(0,0,30px); } 50% { transform: translate3d(0,-9px,36px); } }
@keyframes solvix-cta-sheen { 0%,70% { transform: translateX(-100%); } 90%,100% { transform: translateX(100%); } }
@keyframes solvix-ripple { to { opacity: 0; transform: translate(-50%, -50%) scale(18); } }

/* Tablet/mobile: no cursor light, no tilt, fewer layers, shorter travel. */
@media (max-width: 991.98px), (hover: none), (pointer: coarse) {
  .solvix-pointer-light { display: none; }
  .solvix-tilt { transform: translate3d(0, var(--solvix-lift, 0), 0); }
  .solvix-hero-scene { opacity: .4; }
  .hero .solvix-hero-scene { opacity: .46; }
  .solvix-hero-fallback { right: -90px; width: 260px; height: 260px; opacity: .42; }
  .hero-visual::before,
  .hero-visual::after { animation-duration: 24s; }
  .navbar-collapse.show .nav-link { animation: solvix-mobile-nav .42s var(--solvix-motion-ease) both; animation-delay: calc(var(--solvix-nav-index, 0) * 45ms); }
  .solvix-reveal { transform: translate3d(0, 18px, 0); filter: none; transition-duration: .6s; }
  .solvix-reveal[data-solvix-reveal="left"],
  .solvix-reveal[data-solvix-reveal="right"] { transform: translate3d(0, 18px, 0); }
}
@keyframes solvix-mobile-nav { from { opacity: 0; transform: translateX(13px); } to { opacity: 1; transform: none; } }

@media (max-width: 575.98px) {
  .solvix-loader__mark { width: 66px; height: 66px; }
  .solvix-loader__mark img { width: 40px; height: 40px; }
  .solvix-hero-scene { opacity: .3; }
  .hero .solvix-hero-scene { opacity: .34; }
  .solvix-hero-fallback { width: 210px; height: 210px; right: -105px; }
  .hero-visual::before,
  .hero-visual::after { opacity: .7; }
  .section::after,
  .section-sm::after { width: 240px; height: 240px; }
}

/* Low-power mode is set through conservative capability checks in JavaScript. */
.solvix-low-power .solvix-pointer-light,
.solvix-low-power .solvix-hero-scene { display: none; }
.solvix-low-power .hero-card,
.solvix-low-power .hero-visual::before,
.solvix-low-power .hero-visual::after,
.solvix-low-power .cta::before { animation: none; }

/* Accessibility: all content remains visible and all motion stops. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .solvix-loader,
  .solvix-hero-scene,
  .solvix-pointer-light { display: none !important; }
  .solvix-reveal,
  .solvix-reveal[data-solvix-reveal="left"],
  .solvix-reveal[data-solvix-reveal="right"] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .solvix-tilt,
  .solvix-tilt:hover,
  .article-cover:hover,
  .article-toc:hover,
  .solvix-accordion .accordion-item:hover { transform: none !important; }
}