/* ---------- Lenis smooth scroll ---------- */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

/* ---------- Pre-hide reveal targets (no FOUC; JS restores on failure) ---------- */
.js-anim [data-hero],
.js-anim [data-reveal],
.js-anim .navbar__logo,
.js-anim .navbar__link,
.js-anim .navbar__cta,
.js-anim .built__features-top>*,
.js-anim .built__feature,
.js-anim .step,
.js-anim .highlight,
.js-anim .field,
.js-anim .enquiry-form__submit {
  opacity: 0;
}

.js-anim .built__img {
  clip-path: inset(0 0 100% 0 round 20px);
}

/* will-change only on elements that continuously transform */
.hero__bg,
.icon-badge,
.btn {
  will-change: transform;
}

/* SplitText line wrapper safety (plugin adds masks; keep block flow) */
.line {
  display: block;
}

.hero,
.built,
.design,
.process,
.enquire,
.footer {
  overflow-x: clip;
}

/* ---------- Sticky navbar + scrolled state ---------- */
.navbar {
  position: sticky;
  top: 0;
  transition: height .35s ease, box-shadow .35s ease, background-color .35s ease;
}

.navbar.is-scrolled {
  height: 74px;
  box-shadow: 0 6px 24px rgba(10, 13, 18, .08);
}

.navbar__logo {
  transition: transform .35s ease;
}

.navbar.is-scrolled .navbar__logo {
  transform: translateY(-50%) scale(.9);
}

/* ---------- Hover / interaction micro-interactions ---------- */
.btn {
  transition: translate .2s ease, box-shadow .2s ease, filter .2s ease;
}

.btn:hover {
  translate: 0 -2px;
  box-shadow: 0 8px 20px rgba(58, 8, 1, .18);
}

.btn:active {
  translate: 0 1px;
  box-shadow: none;
}

.btn:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
}

.navbar__link {
  transition: color .2s ease;
}

.navbar__link:hover {
  color: var(--c-primary);
}

.step {
  transition: translate .25s ease, box-shadow .25s ease;
}

.step:hover {
  translate: 0 -6px;
  box-shadow: var(--shadow-lg);
}

.highlight {
  transition: translate .25s ease, box-shadow .25s ease;
}

.highlight:hover {
  translate: 0 -4px;
  box-shadow: 0 10px 24px rgba(10, 13, 18, .06);
}

/* icons rotate slightly on card/pill hover (composes with the GSAP float) */
.icon {
  transition: transform .3s ease;
}

.built__feature:hover .icon,
.highlight:hover .icon {
  transform: rotate(-10deg) scale(1.06);
}

/* arrow badge nudge on hover of its row */
.built__cta-row .icon-badge {
  transition: translate .25s ease;
}

.built__cta-row:hover .icon-badge {
  translate: 4px -4px;
}

/* images: soft zoom on hover */
.built__img,
.enquire__img,
.step__img {
  transition: scale .5s ease;
}

.built__img:hover,
.enquire__img:hover,
.step__img:hover {
  scale: 1.03;
}

/* footer links: animated underline */
.footer__col a {
  background-image: linear-gradient(var(--c-cream), var(--c-cream));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size .25s ease;
}

.footer__col a:hover {
  background-size: 100% 1px;
}

/* ---------- Form focus + error states ---------- */
.field input {
  transition: border-color .25s ease, box-shadow .25s ease;
}

.field input:focus {
  outline: none;
  border-color: var(--c-cream);
  box-shadow: 0 0 0 3px rgba(249, 240, 233, .18);
}

.field.is-error input {
  border-color: #e07a6b;
  box-shadow: 0 0 0 3px rgba(224, 122, 107, .18);
}

.field__error {
  display: block;
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.3;
  color: #e79b8e;
}

.field__error:empty {
  display: none;
  margin: 0;
}

@keyframes fieldShake {

  0%,
  100% {
    transform: translateX(0);
  }

  20%,
  60% {
    transform: translateX(-6px);
  }

  40%,
  80% {
    transform: translateX(6px);
  }
}

.field.is-shaking {
  animation: fieldShake .4s ease;
}

/* submit loading spinner */
.enquiry-form__submit.is-loading {
  position: relative;
  opacity: .85;
  cursor: progress;
}

.enquiry-form__submit.is-loading::after {
  content: "";
  width: 15px;
  height: 15px;
  margin-left: 10px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  display: inline-block;
  animation: btnSpin .6s linear infinite;
}

@keyframes btnSpin {
  to {
    transform: rotate(360deg);
  }
}

/* status message under the form */
.enquiry-form__status {
  margin-top: 4px;
  font-size: var(--fs-sm);
  line-height: 1.4;
  font-weight: var(--fw-medium);
}

.enquiry-form__status.is-success {
  color: #9fd8b0;
}

.enquiry-form__status.is-error {
  color: #e79b8e;
}

/* ---------- Continuous slow loops (CSS) for the dots ---------- */
@keyframes dotPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.55);
    opacity: .45;
  }
}

.eyebrow::before {
  animation: dotPulse 2.6s ease-in-out infinite;
}

@keyframes sliderPulse {

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

  50% {
    transform: scale(1.5);
  }
}

.design__dot.is-active {
  animation: sliderPulse 1.9s ease-in-out infinite;
}

/* ---------- Hero background overscan (so parallax never reveals an edge) ---------- */
.js-anim .hero__bg {
  top: -12%;
  bottom: -12%;
}

/* ---------- Reduced motion: kill motion, reveal everything ---------- */
@media (prefers-reduced-motion: reduce) {

  .js-anim [data-hero],
  .js-anim [data-reveal],
  .js-anim .navbar__logo,
  .js-anim .navbar__link,
  .js-anim .navbar__cta,
  .js-anim .built__features-top>*,
  .js-anim .built__feature,
  .js-anim .step,
  .js-anim .highlight,
  .js-anim .field,
  .js-anim .enquiry-form__submit {
    opacity: 1 !important;
    transform: none !important;
  }

  .js-anim .built__img {
    clip-path: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}