/* ==========================================================================
   Web Development — Hero floating tech-stack icons (with glow)
   Scoped to #marketing.web-hero so the shared marketing hero is unaffected.
   ========================================================================== */

#marketing.web-hero .container {
  position: relative;
  /* Pin the hero to 90vh here (not only in the shared marketing stylesheet)
     so the absolutely-positioned Node stays centred even if the base file is
     cached/older — otherwise the container grows to its content height and
     the Node (top:50%) drifts below the section's centre line. */
  min-height: 90vh;
  max-height: 90vh;
}

/* Floating icon wrapper: glow layer + sharp icon layer, centred on top */
#marketing.web-hero .tech-pin {
  position: absolute;
  display: grid;
  place-items: center;
  /* Default base transform so the float keyframes (which reference var(--base))
     resolve for every pin, not just the centre one. .tp-node overrides it. */
  --base: translate(0, 0);
  transform: var(--base);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  will-change: transform;
  pointer-events: none;
}

#marketing.web-hero .tech-pin img {
  grid-area: 1 / 1;
  display: block;
  height: auto;
}

/* Sharp icon on top */
#marketing.web-hero .tech-pin .tech-icon {
  position: relative;
  width: 100%;
  z-index: 2;
}

/* Blurred colour glow behind, slightly larger than the icon */
#marketing.web-hero .tech-pin .tech-glow {
  position: relative;
  width: 135%;
  z-index: 1;
  opacity: 0.85;
}

/* --------------------------------------------------------------------------
   Desktop layout — Node in the centre, others spread around it
   -------------------------------------------------------------------------- */
#marketing.web-hero .tp-node {
  --base: translate(-50%, -50%);
  width: 300px;
  left: 50%;
  top: 60%;
  z-index: -1;
  animation-name: tp-float-a;
  animation-duration: 8s;
}
#marketing.web-hero .tp-laravel {
  width: 188px;
  left: 15%;
  top: 22%;
  z-index: -2;
  animation-name: tp-float-b;
  animation-duration: 9s;
}
#marketing.web-hero .tp-js {
  width: 196px;
  right: 13%;
  top: 20%;
  z-index: -2;
  animation-name: tp-float-c;
  animation-duration: 10s;
}
#marketing.web-hero .tp-wp {
  width: 206px;
  left: 16%;
  top: 61%;
  z-index: -3;
  animation-name: tp-float-d;
  animation-duration: 11s;
}
#marketing.web-hero .tp-shopify {
  width: 206px;
  right: 14%;
  top: 59%;
  z-index: -3;
  animation-name: tp-float-e;
  animation-duration: 12s;
}

/* --------------------------------------------------------------------------
   Mobile layout — matches the reference design
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Lift the heading + subtitle higher on mobile (the shared marketing rule
     uses margin-top: 20%). */
  #marketing.web-hero .top-part {
    margin-top: 8%;
  }
  #marketing.web-hero .tp-node {
    width: 224px;
    top: 45%;
  }
  #marketing.web-hero .tp-laravel {
    width: 136px;
    left: 4%;
    top: 13%;
  }
  #marketing.web-hero .tp-js {
    width: 143px;
    right: 1%;
    top: 13%;
  }
  #marketing.web-hero .tp-wp {
    width: 154px;
    left: 0;
    top: 48%;
  }
  #marketing.web-hero .tp-shopify {
    width: 158px;
    right: 0;
    top: 46%;
  }
}

/* --------------------------------------------------------------------------
   Gentle floating animations (a few variants for a natural feel)
   -------------------------------------------------------------------------- */
@keyframes tp-float-a {
  0%   { transform: var(--base) translate(0px, 0px) rotate(0deg); }
  50%  { transform: var(--base) translate(0px, -10px) rotate(1deg); }
  100% { transform: var(--base) translate(0px, 6px) rotate(-1deg); }
}
@keyframes tp-float-b {
  0%   { transform: var(--base) translate(0px, 0px) rotate(0deg); }
  50%  { transform: var(--base) translate(6px, -8px) rotate(1.5deg); }
  100% { transform: var(--base) translate(-5px, 7px) rotate(-1.5deg); }
}
@keyframes tp-float-c {
  0%   { transform: var(--base) translate(0px, 0px) rotate(0deg); }
  50%  { transform: var(--base) translate(-7px, -6px) rotate(-1.5deg); }
  100% { transform: var(--base) translate(5px, 8px) rotate(1.5deg); }
}
@keyframes tp-float-d {
  0%   { transform: var(--base) translate(0px, 0px) rotate(0deg); }
  50%  { transform: var(--base) translate(7px, 8px) rotate(1deg); }
  100% { transform: var(--base) translate(-6px, -6px) rotate(-1deg); }
}
@keyframes tp-float-e {
  0%   { transform: var(--base) translate(0px, 0px) rotate(0deg); }
  50%  { transform: var(--base) translate(-6px, 9px) rotate(-1deg); }
  100% { transform: var(--base) translate(8px, -5px) rotate(1deg); }
}

@media (prefers-reduced-motion: reduce) {
  #marketing.web-hero .tech-pin {
    animation: none !important;
  }
}