/* ==========================================================
   Innovagic – Motion layer (additive; does not replace site.css)
   Scroll reveals, cursor effects, tilt, magnetic buttons.
   Everything is gated behind .js-anim and reduced-motion.
   ========================================================== */
:root {
  --fx-cyan: #12c4ea;
  --fx-violet: #6d3fd1;
  --fx-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ---------- Scroll progress ---------- */
.fx-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  z-index: 9999;
  background: linear-gradient(90deg, var(--fx-violet), var(--fx-cyan));
  transform-origin: 0 50%;
  transform: scaleX(var(--p, 0));
  pointer-events: none
}

/* ---------- Reveal on scroll ---------- */
.js-anim [data-rv] {
  opacity: 0;
  translate: 0 36px;
  /* leaving the screen: quick, no delay, so it resets ready to play again */
  transition: opacity .45s ease, translate .45s ease, scale .45s ease,
    transform .35s ease, box-shadow .3s ease, border-color .3s ease,
    background-color .3s ease, color .2s ease;
  will-change: opacity, translate
}

.js-anim [data-rv="left"] {
  translate: -48px 0
}

.js-anim [data-rv="right"] {
  translate: 48px 0
}

.js-anim [data-rv="zoom"] {
  translate: 0 24px;
  scale: .94
}

/* scrolled back up: items come in from the top instead of the bottom */
.js-anim [data-rv=""].from-up {
  translate: 0 -36px
}

.js-anim [data-rv="zoom"].from-up {
  translate: 0 -24px
}

/* entering the screen: full animation, with the stagger delay */
.js-anim [data-rv].is-in {
  opacity: 1;
  translate: 0 0;
  scale: 1;
  transition: opacity .8s var(--fx-ease) var(--d, 0ms),
    translate .9s var(--fx-ease) var(--d, 0ms),
    scale .9s var(--fx-ease) var(--d, 0ms),
    transform .35s ease, box-shadow .3s ease, border-color .3s ease,
    background-color .3s ease, color .2s ease
}

/* ---------- Hero: word-by-word entrance ---------- */
.fx-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: .12em;
  margin-bottom: -.12em
}

.fx-w>span {
  display: inline-block;
  transform: translateY(110%);
  animation: fx-word .9s var(--fx-ease) forwards;
  animation-delay: calc(var(--i)*90ms + 150ms)
}

@keyframes fx-word {
  to {
    transform: none
  }
}

.js-anim .hero-subtitle,
.js-anim .hero-actions {
  opacity: 0;
  animation: fx-fade 1s var(--fx-ease) forwards
}

.js-anim .hero-subtitle {
  animation-delay: .75s
}

.js-anim .hero-actions {
  animation-delay: .95s
}

@keyframes fx-fade {
  from {
    opacity: 0;
    transform: translateY(18px)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* Hero glow orbs follow the cursor (parallax) */
.hero-section>.container,
.page-hero-ig>.container {
  position: relative;
  z-index: 2
}

.fx-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: screen;
  opacity: .55;
  translate: calc(var(--mx, 0)*var(--k, 30px)) calc(var(--my, 0)*var(--k, 30px));
  transition: translate .6s ease-out
}

.fx-orb.a {
  width: 380px;
  height: 380px;
  left: 6%;
  top: 8%;
  background: #12c4ea;
  --k: -40px;
  animation: fx-drift 14s ease-in-out infinite
}

.fx-orb.b {
  width: 320px;
  height: 320px;
  right: 4%;
  bottom: 0;
  background: #8b5cf6;
  --k: 55px;
  animation: fx-drift 18s ease-in-out infinite reverse
}

@keyframes fx-drift {
  50% {
    transform: translate(30px, -24px) scale(1.08)
  }
}

.hero-section,
.page-hero-ig {
  overflow: hidden
}

/* ---------- Idle float on illustrations ---------- */
.js-anim .laptop-mock,
.js-anim .why-visual {
  animation: fx-float 7s ease-in-out infinite
}

@keyframes fx-float {
  50% {
    transform: translateY(-10px)
  }
}

.laptop-mock img,
.why-img,
.about-row-ig img {
  transform: translate3d(0, var(--py, 0px), 0);
  will-change: transform
}

/* ---------- Tilt + spotlight cards ---------- */
[data-tilt] {
  position: relative;
  transform-style: preserve-3d;
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--ty, 0px))
}

[data-tilt].is-hot {
  --ty: -6px;
  box-shadow: 0 22px 44px rgba(30, 41, 90, .22)
}

.fx-glare {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  opacity: 0;
  z-index: 3;
  background: radial-gradient(260px circle at var(--gx, 50%) var(--gy, 50%), rgba(255, 255, 255, .28), transparent 60%);
  transition: opacity .3s
}

[data-tilt].is-hot .fx-glare {
  opacity: 1
}

.service-card h3 {
  transition: transform .35s var(--fx-ease)
}

.service-card.is-hot h3 {
  transform: translateZ(30px) translateY(-4px)
}

/* Team avatars */
.team-avatar {
  transition: transform .5s var(--fx-ease), box-shadow .4s
}

.team-member:hover .team-avatar,
.team-ceo:hover .team-avatar {
  transform: scale(1.07) rotate(-2deg);
  box-shadow: 0 14px 30px rgba(18, 196, 234, .35)
}

/* ---------- Buttons ---------- */
.btn {
  position: relative;
  overflow: hidden
}

.fx-magnet {
  transition: translate .45s var(--fx-ease), background-color .2s, box-shadow .2s, color .2s, border-color .2s
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform .7s var(--fx-ease)
}

.btn:hover::before {
  transform: translateX(120%)
}

.fx-ripple {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  background: rgba(255, 255, 255, .45);
  transform: scale(0);
  animation: fx-rip .65s ease-out forwards
}

@keyframes fx-rip {
  to {
    transform: scale(1);
    opacity: 0
  }
}

/* Nav underline */
.nav-list a {
  background: linear-gradient(var(--fx-cyan), var(--fx-cyan)) 0 100%/0 2px no-repeat;
  padding-bottom: 4px;
  transition: background-size .35s var(--fx-ease), color .2s
}

.nav-list a:hover {
  background-size: 100% 2px
}

/* Header hides when scrolling down, returns when scrolling up */
.site-header {
  transition: transform .45s var(--fx-ease), background-color .3s, box-shadow .3s
}

.site-header.fx-hide {
  transform: translateY(-110%)
}

/* Form fields */
.form-control,
.sp-field input,
.sp-field textarea,
.sp-field select {
  transition: box-shadow .25s, border-color .25s, background-color .25s, transform .25s
}

.form-control:focus {
  box-shadow: 0 0 0 4px rgba(18, 196, 234, .18)
}

/* ---------- Custom cursor (mouse devices only) ---------- */
.fx-cursor,
.fx-dot {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 10000;
  border-radius: 50%;
  opacity: 0;
  transition: opacity .3s
}

.fx-cursor {
  width: 38px;
  height: 38px;
  margin: -19px 0 0 -19px;
  border: 1.5px solid var(--fx-cyan);
  transition: width .3s var(--fx-ease), height .3s var(--fx-ease), margin .3s var(--fx-ease), background-color .3s, opacity .3s
}

.fx-dot {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--fx-cyan)
}

.fx-on .fx-cursor,
.fx-on .fx-dot {
  opacity: 1
}

.fx-cursor.is-link {
  width: 64px;
  height: 64px;
  margin: -32px 0 0 -32px;
  background: rgba(18, 196, 234, .12)
}

.fx-cursor.is-down {
  width: 28px;
  height: 28px;
  margin: -14px 0 0 -14px
}

@media (hover:none),
(pointer:coarse) {

  .fx-cursor,
  .fx-dot,
  .fx-orb {
    display: none
  }
}

/* ---------- Reduced motion: switch it all off ---------- */
@media (prefers-reduced-motion:reduce) {
  .js-anim [data-rv] {
    opacity: 1;
    translate: none;
    scale: 1;
    transition: none
  }

  .fx-w>span {
    transform: none;
    animation: none
  }

  .js-anim .hero-subtitle,
  .js-anim .hero-actions {
    opacity: 1;
    animation: none
  }

  .fx-orb,
  .laptop-mock,
  .why-visual {
    animation: none !important
  }

  .fx-cursor,
  .fx-dot,
  .fx-progress {
    display: none
  }

  [data-tilt] {
    transform: none !important
  }
}

/* ---------- Hero: true horizontal centering ---------- */
.hero-section .container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-inline: auto
}

.hero-section .hero-content {
  width: 100%;
  max-width: 820px;
  margin-inline: auto;
  text-align: center
}

.hero-section .hero-title,
.hero-section .hero-subtitle {
  text-align: center;
  margin-inline: auto
}

.hero-section .hero-actions {
  justify-content: center;
  margin-inline: auto
}


/* ---------- Work slider: phone sits on the bottom edge of the card ---------- */
.work-inner {
  padding-bottom: 0;
  align-items: stretch
}

/* site.css left 20px of empty space under the phone */
.work-info {
  align-self: center
}

.work-phone {
  align-self: end;
  line-height: 0
}

.work-phone img {
  margin-bottom: 0;
  vertical-align: bottom
}

/* ---------- Work slider phone: animates but stays glued to the bottom ---------- */
.work-phone img {
  transform-origin: 50% 100%
}

.js-anim .work-card.is-active .work-phone img {
  animation:
    fx-phone-in .9s var(--fx-ease) both,
    fx-phone-idle 6s ease-in-out .9s infinite
}

/* rises up from the bottom edge when a slide appears */
@keyframes fx-phone-in {
  from {
    opacity: 0;
    transform: translateY(60px) scale(.96)
  }

  to {
    opacity: 1;
    transform: none
  }
}

/* gentle breathing + sway: pivots on the bottom edge, so the bottom never lifts */
@keyframes fx-phone-idle {

  0%,
  100% {
    transform: scale(1) rotate(0deg)
  }

  50% {
    transform: scale(1.035) rotate(-1.2deg)
  }
}

.work-phone:hover img {
  animation-play-state: paused, paused
}

@media (prefers-reduced-motion:reduce) {
  .js-anim .work-card.is-active .work-phone img {
    animation: none
  }
}

/* ---------- Contact info: full icon, transparent background ---------- */
.contact-info-icon {
  width: 56px;
  height: 56px;
  margin-bottom: 10px
}

.contact-info-icon.icon-full {
  border: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  overflow: visible;
  display: block
}

.contact-info-icon.icon-full svg,
.contact-info-icon.icon-full img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  stroke: initial;
  stroke-width: initial
}

/* undo the line-icon rule in site.css */
.contact-info-icon:not(.icon-full) svg {
  width: 26px
}

/* ---------- Services: details show on hover / click / tap ---------- */
.service-card {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  outline: none
}

.service-card:focus-visible {
  outline: 3px solid var(--fx-cyan);
  outline-offset: -4px
}

.service-card>h3 {
  position: relative;
  z-index: 1
}

.svc-detail {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: clamp(18px, 2.2vw, 32px) clamp(12px, 1.4vw, 22px);
  text-align: center;
  background: var(--svc-bg, var(--svc-art)) center/cover no-repeat;
  opacity: 0;
  visibility: hidden;
  transition: opacity .45s ease, visibility 0s .45s
}

/* darkening so white text stays readable (stronger when no plain _bg image exists) */
.svc-detail::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(0, 0, 0, .55)
}

.svc-detail.has-bg::before {
  background: rgba(0, 0, 0, .22)
}

.svc-detail h3 {
  margin: 0;
  text-align: center;
  font: 600 clamp(13px, 1.2vw, 17px)/1.3 var(--font-body)
}

.svc-line {
  display: block;
  width: 34px;
  height: 1.5px;
  margin: 12px auto;
  background: rgba(255, 255, 255, .85)
}

.svc-detail p {
  margin: 0;
  color: #fff;
  font-size: clamp(11.5px, .95vw, 13.5px);
  line-height: 1.5;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .35)
}

.svc-detail>* {
  opacity: 0;
  translate: 0 14px;
  transition: opacity .4s ease, translate .55s var(--fx-ease)
}

.svc-detail>:nth-child(2) {
  transition-delay: .06s
}

.svc-detail>:nth-child(3) {
  transition-delay: .12s
}

.service-card.is-open .svc-detail,
.service-card:focus-visible .svc-detail {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s
}

.service-card.is-open .svc-detail>*,
.service-card:focus-visible .svc-detail>* {
  opacity: 1;
  translate: 0 0
}

@media (hover:hover) {
  .service-card:hover .svc-detail {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s
  }

  .service-card:hover .svc-detail>* {
    opacity: 1;
    translate: 0 0
  }
}

@media (prefers-reduced-motion:reduce) {

  .svc-detail,
  .svc-detail>* {
    transition: none;
    translate: none
  }
}

/* ---------- Map: rounded corners with no white corners ---------- */
.contact-map .map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  line-height: 0;
}

.contact-map .map-frame picture {
  display: block
}

.contact-map .map-frame img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
  mix-blend-mode: multiply
}

/* white corners baked into the picture take the section colour */