.reveal {
  opacity: 1;
  transform: translateY(0);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 700ms ease, transform 700ms ease;
}

.hover-word {
  display: inline-block;
  white-space: nowrap;
}

.hover-letter {
  display: inline-block;
  transform-origin: 50% 65%;
  will-change: transform;
}

.page-widgets {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1;
  height: var(--page-widget-height, 100%);
  overflow: hidden;
  pointer-events: none;
}

.page-widget {
  position: absolute;
  top: var(--widget-top, 16%);
  right: var(--widget-right, auto);
  left: var(--widget-left, auto);
  width: var(--widget-width, clamp(34px, 4.8vw, 82px));
  height: auto;
  opacity: 1;
  filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.34));
  transform: translate3d(0, 0, 0) rotate(var(--r, 0deg));
  animation: widget-drift var(--dur, 5.5s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  will-change: transform;
}

.page-widget--analytics {
  --widget-top: 22%;
  left: clamp(4rem, 9vw, 10rem);
  --widget-width: clamp(48px, 5.8vw, 96px);
  --r: -9deg;
  --dur: 6.5s;
  --dx: 12px;
  --dy: -14px;
}

.page-widget--map-pin {
  --widget-top: 33%;
  right: clamp(4rem, 10vw, 12rem);
  --widget-width: clamp(52px, 6.2vw, 104px);
  --r: 8deg;
  --delay: -1.2s;
  --dx: -14px;
  --dy: 10px;
}

.page-widget--cursor {
  --widget-top: 43%;
  right: clamp(10rem, 23vw, 25rem);
  --widget-width: clamp(36px, 4.6vw, 76px);
  --r: -12deg;
  --dur: 5s;
  --dx: -10px;
  --dy: -13px;
}

.page-widget--rocket {
  --widget-top: 31%;
  --widget-left: -18vw;
  --widget-width: clamp(84px, 8.6vw, 150px);
  animation: rocket-loop 10.5s linear infinite;
}

.page-widgets--work .page-widget--rocket {
  --widget-top: 24%;
}

.page-widgets--local-seo .page-widget--rocket {
  --widget-top: 24%;
}

.page-widgets--seo .page-widget--rocket {
  --widget-top: 14%;
}

.page-widget--compass {
  --widget-top: 52%;
  right: clamp(4rem, 11vw, 13rem);
  --widget-width: clamp(44px, 5.4vw, 92px);
  --r: 11deg;
  --delay: -1.7s;
  --dx: -12px;
  --dy: -12px;
}

.page-widget--map-fold {
  --widget-top: 63%;
  left: clamp(4rem, 10vw, 12rem);
  --widget-width: clamp(48px, 5.8vw, 98px);
  --r: -8deg;
  --delay: -2.4s;
  --dx: 14px;
  --dy: 9px;
}

.page-widget--serp-ladder {
  --widget-top: 39%;
  right: clamp(4rem, 11vw, 13rem);
  --widget-width: clamp(46px, 5.6vw, 96px);
  --r: 7deg;
  --delay: -1.1s;
  --dx: -10px;
  --dy: 12px;
}

.page-widget--ranking {
  --widget-top: 54%;
  left: clamp(4rem, 10vw, 12rem);
  --widget-width: clamp(46px, 5.4vw, 94px);
  --r: 8deg;
  --delay: -1.8s;
  --dx: 12px;
  --dy: 10px;
}

.page-widget--review {
  --widget-top: 68%;
  right: clamp(4rem, 11vw, 13rem);
  --widget-width: clamp(48px, 5.6vw, 96px);
  --r: -10deg;
  --delay: -2.7s;
  --dx: -11px;
  --dy: -9px;
}

.page-widget--paper-plane {
  --widget-top: calc(100% - 520px);
  --widget-left: 0;
  --widget-width: clamp(48px, 5vw, 86px);
  offset-path: path("M -180 240 L 700 0 A 120 120 0 0 0 700 -240 A 120 120 0 0 0 700 0 Q 1060 0 1760 220");
  offset-rotate: auto 24deg;
  transform: none;
  animation: paper-plane-flight 9s linear infinite;
}

.page-widgets--services .page-widget--analytics {
  --widget-top: 18%;
  left: clamp(4rem, 9vw, 11rem);
}

.page-widgets--services .page-widget--map-pin {
  --widget-top: 67%;
  right: clamp(4rem, 10vw, 12rem);
}

.page-widgets--services .page-widget--map-fold {
  --widget-top: 75%;
  left: clamp(4rem, 9vw, 11rem);
}

.page-widgets--services .page-widget--cursor {
  --widget-top: 57%;
  right: clamp(8rem, 17vw, 20rem);
}

.page-widgets--web-design .page-widget--rocket {
  --widget-top: 18%;
}

.page-widgets--web-design .page-widget--map-fold {
  --widget-top: 47%;
  left: clamp(4rem, 9vw, 11rem);
}

.page-widgets--web-design .page-widget--compass {
  --widget-top: 69%;
  right: clamp(4rem, 10vw, 12rem);
}

.page-widgets--local-seo .page-widget--map-pin {
  --widget-top: 28%;
  right: clamp(3rem, 8vw, 10rem);
}

.page-widgets--local-seo .page-widget--serp-ladder {
  --widget-top: 52%;
  right: clamp(4rem, 10vw, 12rem);
}

.page-widgets--local-seo .page-widget--compass {
  --widget-top: 67%;
  right: clamp(3rem, 8vw, 10rem);
}

.page-widgets--seo .page-widget--analytics {
  --widget-top: 71%;
  left: clamp(4rem, 9vw, 11rem);
}

.page-widgets--seo .page-widget--ranking {
  --widget-top: 49%;
  left: clamp(3rem, 8vw, 10rem);
}

.page-widgets--seo .page-widget--review {
  --widget-top: 69%;
  right: clamp(4rem, 10vw, 12rem);
}

.page-widgets--insights .page-widget--analytics {
  --widget-top: 26%;
  left: clamp(4rem, 9vw, 11rem);
}

.page-widgets--insights .page-widget--map-pin {
  --widget-top: 61%;
  right: clamp(3rem, 8vw, 10rem);
}

.page-widgets--insights .page-widget--cursor {
  --widget-top: 55%;
  right: clamp(8rem, 16vw, 19rem);
}

.page-widgets--work .page-widget--analytics {
  --widget-top: 21%;
  left: clamp(4rem, 9vw, 11rem);
}

.page-widgets--work .page-widget--map-pin {
  --widget-top: 59%;
  right: clamp(4rem, 10vw, 12rem);
}

.page-widgets--work .page-widget--cursor {
  --widget-top: 70%;
  right: clamp(8rem, 15vw, 18rem);
}

.page-widgets--contact .page-widget--analytics {
  --widget-top: 45%;
  left: clamp(4rem, 9vw, 11rem);
}

.page-widgets--contact .page-widget--map-pin {
  --widget-top: 49%;
  right: clamp(4rem, 10vw, 12rem);
}

.page-widgets--contact .page-widget--cursor {
  --widget-top: 61%;
  right: clamp(8rem, 17vw, 21rem);
}


.drift {
  animation: drift 7s ease-in-out infinite alternate;
}

.drift-slow {
  animation: drift 11s ease-in-out infinite alternate;
}

@keyframes drift {
  from {
    transform: translate3d(0, 0, 0) rotate(-1deg);
  }
  to {
    transform: translate3d(14px, -18px, 0) rotate(1.5deg);
  }
}

@keyframes widget-drift {
  from {
    transform: translate3d(0, 0, 0) rotate(var(--r, 0deg));
  }
  72% {
    transform: translate3d(calc(var(--dx, 10px) * 0.45), calc(var(--dy, -10px) * 0.35), 0) rotate(calc(var(--r, 0deg) - 2deg));
  }
  to {
    transform: translate3d(var(--dx, 10px), var(--dy, -10px), 0) rotate(calc(var(--r, 0deg) + 4deg));
  }
}

@keyframes paper-plane-flight {
  from {
    offset-distance: 0%;
  }
  to {
    offset-distance: 100%;
  }
}

@keyframes rocket-loop {
  0%,
  100% {
    transform: translate3d(0, 8vh, 0) rotate(36deg) scale(0.96);
    opacity: 1;
  }
  5% {
    transform: translate3d(7vw, 4vh, 0) rotate(38deg) scale(1);
    opacity: 1;
  }
  28% {
    transform: translate3d(34vw, -8vh, 0) rotate(42deg) scale(1.04);
    opacity: 1;
  }
  55% {
    transform: translate3d(72vw, 7vh, 0) rotate(59deg) scale(1);
    opacity: 1;
  }
  80% {
    transform: translate3d(120vw, -5vh, 0) rotate(44deg) scale(0.98);
    opacity: 1;
  }
  83% {
    transform: translate3d(132vw, -5vh, 0) rotate(44deg) scale(0.98);
    opacity: 0;
  }
  84% {
    transform: translate3d(0, 8vh, 0) rotate(36deg) scale(0.96);
    opacity: 0;
  }
  97% {
    transform: translate3d(0, 8vh, 0) rotate(36deg) scale(0.96);
    opacity: 0;
  }
}

.scan-line {
  position: absolute;
  inset-inline: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--orange), transparent);
  animation: scan 1.45s ease-in-out infinite;
}

@keyframes scan {
  from {
    transform: translateY(0);
    opacity: 0;
  }
  20%,
  80% {
    opacity: 1;
  }
  to {
    transform: translateY(120px);
    opacity: 0;
  }
}

@media (max-width: 760px) {
  .hover-word {
    white-space: normal;
  }

  .page-widget {
    width: var(--widget-width, clamp(34px, 12vw, 64px));
    opacity: 1;
  }

  .page-widget:not(.page-widget--paper-plane):not(.page-widget--rocket) {
    display: none;
  }

  .page-widget--rocket {
    display: block;
    --widget-top: 30%;
    --widget-left: -26vw;
    --widget-width: clamp(62px, 18vw, 92px);
  }

  .page-widgets--work .page-widget--rocket {
    --widget-top: 17%;
  }

  .page-widget--paper-plane {
    display: block;
    --widget-top: calc(100% - 500px);
    --widget-left: 0;
    --widget-width: clamp(42px, 14vw, 68px);
    offset-path: path("M -90 120 L 520 -120");
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-widget {
    animation: none;
  }
}