/* VISTRUBA v1.9 Motion Edition
   A progressive enhancement: the site remains readable without JavaScript.
   Original imagery, palette, layout and content are unchanged. */

/* A quiet atmosphere in the hero, without shifting the camera artwork. */
.hero { isolation: isolate; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .32;
  background:
    radial-gradient(circle at 68% 28%, rgba(60,135,255,.27), transparent 29%),
    radial-gradient(circle at 84% 85%, rgba(123,63,245,.17), transparent 34%);
  animation: vis-ambient 16s ease-in-out infinite alternate;
}
.hero-art { transform-origin: 75% 50%; animation: vis-hero-arrive 1.5s cubic-bezier(.2,.68,.2,1) both; }
.hero .kicker, .hero h1, .hero-description, .hero-buttons, .hero-features {
  animation: vis-entrance .7s cubic-bezier(.16,.8,.26,1) both;
}
.hero .kicker { animation-delay: .09s; }
.hero h1 { animation-delay: .17s; }
.hero-description { animation-delay: .26s; }
.hero-buttons { animation-delay: .36s; }
.hero-features { animation-delay: .46s; }

/* Header gets a modest separation from the page during scrolling. */
.site-header { transition: box-shadow .28s ease, background-color .28s ease; }
.site-header.is-scrolled { box-shadow: 0 11px 33px rgba(2, 11, 28, .3); background-color: rgba(6, 17, 37, .97); }
.nav-link, .footer nav a { transition: color .2s ease, text-shadow .2s ease; }
.nav-link:hover, .nav-link:focus-visible, .footer nav a:hover, .footer nav a:focus-visible { text-shadow: 0 0 14px rgba(93, 164, 255, .28); }

/* CTA movement is intentional, short and legible. */
.btn.primary, .nav-cta { background-size: 145% 100%; background-position: 0 50%; transition: background-position .38s ease, transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.btn.primary:hover, .nav-cta:hover { background-position: 100% 50%; }
.btn.primary span, .nav-cta span, .section-text-link span, .service-link span {
  display: inline-block; transition: transform .22s ease;
}
.btn.primary:hover span, .nav-cta:hover span, .section-text-link:hover span, .service-link:hover span,
.btn.primary:focus-visible span, .nav-cta:focus-visible span, .section-text-link:focus-visible span, .service-link:focus-visible span { transform: translateX(4px); }

/* Cards invite exploration without strong 3D tilt or reflow. */
.service-card {
  position: relative;
  isolation: isolate;
  transition: transform .28s cubic-bezier(.2,.65,.2,1), box-shadow .28s ease, border-color .28s ease;
}
.service-card:hover, .service-card:focus-within { transform: translateY(-5px); box-shadow: 0 16px 32px rgba(17,40,94,.16); border-color: #b8c9f0; }
.service-card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1;
  background: radial-gradient(240px circle at var(--mx, 45%) var(--my, 0%), rgba(89,124,245,.12), transparent 72%);
  opacity: 0; transition: opacity .26s ease;
}
.service-card:hover::after, .service-card:focus-within::after { opacity: 1; }
.service-content { position: relative; z-index: 2; }
.service-media { position: relative; overflow: hidden; }
.service-media img { transition: transform .6s cubic-bezier(.2,.75,.2,1), filter .35s ease; }
.service-card:hover .service-media img, .service-card:focus-within .service-media img { transform: scale(1.055); filter: saturate(1.08); }
.service-icon { transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease; }
.service-card:hover .service-icon, .service-card:focus-within .service-icon { transform: translateY(-3px); box-shadow: 0 0 0 3px #f5f8fe, 0 5px 16px rgba(61,105,255,.18); }

.solution-card { position: relative; transition: transform .28s ease; }
.solution-card > img { transition: transform .55s cubic-bezier(.2,.7,.2,1), filter .35s ease, box-shadow .35s ease; }
.solution-card:hover > img, .solution-card:focus-within > img { transform: translateY(-3px) scale(1.018); filter: saturate(1.13); box-shadow: 0 13px 28px rgba(0,0,0,.24); }
.application-icon, .step-icon { transition: transform .28s ease, box-shadow .28s ease; }
.solution-card:hover .application-icon, .approach-list li:hover .step-icon { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(46,68,135,.22); }

/* Poised reveal only for off-screen elements; script opts specific elements in. */
.motion-target { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity .72s ease, transform .72s cubic-bezier(.16,.7,.24,1); transition-delay: var(--motion-delay, 0ms); }
.motion-target.motion-visible { opacity: 1; transform: translate3d(0,0,0); }

/* Contact form and detail pages: subtle focused interactions. */
.contact-form input, .contact-form select, .contact-form textarea { transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { box-shadow: 0 0 0 4px rgba(61,104,253,.13); }
.detail-photo img, .industry-card img { transition: transform .55s ease; }
.detail-block:hover .detail-photo img, .industry-card:hover img { transform: scale(1.025); }
.detail-photo, .industry-card { overflow: hidden; }
.contact-cta { position: relative; isolation: isolate; overflow: hidden; }
.contact-cta::before {
  content: ""; position: absolute; inset: -25% -15%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle at 78% 45%, rgba(100,124,244,.1), transparent 35%);
  animation: vis-ambient 17s ease-in-out infinite alternate;
}

@keyframes vis-entrance { from { opacity: 0; transform: translate3d(0, 19px, 0); } to { opacity: 1; transform: translate3d(0,0,0); } }
@keyframes vis-hero-arrive { from { opacity: .45; transform: scale(1.035); } to { opacity: 1; transform: scale(1); } }
@keyframes vis-ambient { from { opacity: .15; transform: translate3d(-1%,0,0); } to { opacity: .36; transform: translate3d(1%,0,0); } }

@media (hover: none), (pointer: coarse) {
  .service-card:hover, .solution-card:hover, .service-card:hover .service-media img,
  .solution-card:hover > img, .detail-block:hover .detail-photo img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero::after, .contact-cta::before, .hero-art, .hero .kicker, .hero h1,
  .hero-description, .hero-buttons, .hero-features { animation: none !important; }
  .motion-target { opacity: 1 !important; transform: none !important; transition: none !important; }
  .site-header, .btn.primary, .nav-cta, .nav-link, .footer nav a,
  .service-card, .service-card::after, .service-media img, .service-icon,
  .solution-card, .solution-card > img, .application-icon, .step-icon,
  .detail-photo img, .industry-card img { transition: none !important; }
}