/* ==========================================================================
   NoTech Premium Interaction Layer
   Scroll reveal, parallax, magnetic buttons, tilt cards, glass header,
   scroll-progress indicator, Lenis smooth-scroll support.

   Additive only — sits on top of notech.css / notech-responsive.css /
   notech-mobile-enhance.css and the existing WOW.js entrance animations.
   Every effect here is gated behind (hover: hover) and (pointer: fine) for
   touch devices, and behind prefers-reduced-motion for accessibility.
   ========================================================================== */

:root {
  --np-ease: cubic-bezier(.16, 1, .3, 1);
  --np-ease-soft: cubic-bezier(.22, .61, .36, 1);
  --np-duration: .7s;
  --np-shadow-color: var(--notech-black-rgb, 16, 24, 40);
}

/* ---- Lenis smooth-scroll base (from lenis/dist/lenis.css) -------------- */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ==========================================================================
   1. Scroll reveal
   ========================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--np-duration) var(--np-ease),
              transform var(--np-duration) var(--np-ease);
  transition-delay: var(--reveal-delay, 0ms);
  will-change: opacity, transform;
}
[data-reveal="fade"] { transform: none; }
[data-reveal="left"] { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="zoom"] { transform: scale(.94); }

[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

html.np-reduced-motion [data-reveal] {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ==========================================================================
   2. Buttons — magnetic pull + sheen sweep
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  /* Note: .thm-btn already owns ::after for the theme's own black-fill hover
     sweep (notech.css) — the sheen below uses ::before instead so it doesn't
     clobber that existing animation. */
  .thm-btn,
  .header-cta-btn {
    transition: transform .45s var(--np-ease-soft), box-shadow .45s var(--np-ease-soft);
  }
  .thm-btn::before,
  .header-cta-btn::before {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .35), transparent);
    transform: skewX(-20deg);
    pointer-events: none;
    transition: left .75s var(--np-ease);
    z-index: 2;
  }
  .header-cta-btn { position: relative; overflow: hidden; }
  .thm-btn:hover::before,
  .header-cta-btn:hover::before { left: 130%; }
  .thm-btn:hover,
  .header-cta-btn:hover {
    box-shadow: 0 14px 30px -10px rgba(var(--notech-primary-rgb), .55);
  }
}

/* ==========================================================================
   3. Card hover — lift, shadow bloom, icon response
   ========================================================================== */
@media (hover: hover) and (pointer: fine) {
  /* .tech-card already ships a full hover treatment (lift, shadow, gradient
     overlay, icon-ring pulse) — left untouched here on purpose. */
  .services-two__single,
  .delivering-it__single,
  .business-from-two__single {
    transition: transform .5s var(--np-ease-soft), box-shadow .5s var(--np-ease-soft);
  }
  .services-two__single:hover,
  .business-from-two__single:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 48px -20px rgba(var(--np-shadow-color), .28);
  }
  .delivering-it__single:hover { transform: translateY(-6px); }

  /* testimonial-two__single-inner uses data-tilt (JS-driven transform) instead
     of a CSS :hover transform, since inline styles from mousemove would win anyway */
  .testimonial-two__single-inner[data-tilt] {
    box-shadow: 0 0 0 rgba(var(--np-shadow-color), 0);
    transition: box-shadow .5s var(--np-ease-soft);
  }
  .testimonial-two__single-inner[data-tilt]:hover {
    box-shadow: 0 24px 48px -20px rgba(var(--np-shadow-color), .22);
  }

  /* icon-circle flourish layered on top of the theme's own color-fill
     reveal (which already handles background/text/icon-color on hover) */
  .services-two__icon {
    transition: transform .5s var(--np-ease-soft);
  }
  .services-two__single:hover .services-two__icon {
    transform: scale(1.08) rotate(-4deg);
  }

  .services-two__btn-box .thm-btn {
    transition: transform .35s var(--np-ease-soft);
  }
  .services-two__single:hover .services-two__btn-box .thm-btn {
    transform: translateX(5px);
  }
}

/* Tilt cards — perspective wrapper, transform applied via JS */
[data-tilt] {
  transform-style: preserve-3d;
  transition: transform .4s var(--np-ease-soft);
  will-change: transform;
}

/* ==========================================================================
   4. Sticky header — glass transition
   ========================================================================== */
.stricky-header.stricked-menu {
  transition: background-color .45s var(--np-ease-soft), box-shadow .45s var(--np-ease-soft),
              backdrop-filter .45s var(--np-ease-soft);
}
.stricky-header.stricked-menu.stricky-fixed {
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 12px 32px -16px rgba(var(--np-shadow-color), .35);
}

/* Nav link underline sweep */
.main-menu__list > li > a {
  position: relative;
}
.main-menu__list > li > a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 2px;
  background: var(--notech-primary);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .4s var(--np-ease-soft);
}
@media (hover: hover) and (pointer: fine) {
  .main-menu__list > li > a:hover::before { transform: scaleX(1); transform-origin: left; }
}

/* ==========================================================================
   5. Parallax helpers
   ========================================================================== */
[data-parallax] { will-change: transform; }

/* ==========================================================================
   6. Scroll-to-top — progress ring
   ========================================================================== */
.np-progress-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  pointer-events: none;
}
.np-progress-ring__bg {
  fill: none;
  stroke: rgba(var(--notech-white-rgb, 255, 255, 255), .15);
  stroke-width: 2.5;
}
.np-progress-ring__bar {
  fill: none;
  stroke: var(--notech-primary);
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke-dashoffset .15s linear;
}

/* ==========================================================================
   7. Reduced motion / touch — global overrides
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .thm-btn, .header-cta-btn,
  .services-two__single, .delivering-it__single, .project-two__single,
  .testimonial-two__single-inner, [data-tilt] {
    transition: none !important;
  }
}

html.np-touch .thm-btn::after,
html.np-touch .header-cta-btn::after { display: none; }

/* ==========================================================================
   8. Header nav-row fix (pre-existing, not introduced by this pass)
   Every header variant (.main-menu, .main-menu-two — including index.html's
   video hero, where it's masked by the full-bleed background) needs ~1920px
   to fit the logo, full nav list, phone-number block and CTA on one row, but
   the only breakpoint below that is the 1199px mobile fallback. Result: at
   any realistic laptop/desktop width the nav wraps into 2-3 stacked rows, in
   both the normal and sticky header. Recovering width by tightening the
   (unusually generous, 60px) item gap and hiding the phone block below
   1600px fixes it for every variant.
   ========================================================================== */
@media (min-width: 1200px) {
  .main-menu,
  .stricky-header.main-menu {
    padding-left: 24px;
    padding-right: 24px;
  }
  .main-menu .main-menu__logo {
    margin-right: 24px;
  }
  .main-menu .main-menu__list > li + li,
  .stricky-header.main-menu .main-menu__list > li + li {
    margin-left: 16px;
  }
}
@media (min-width: 1200px) and (max-width: 1599px) {
  .main-menu .main-menu__call {
    display: none;
  }
}

/* ==========================================================================
   9. Form input focus glow
   The theme's inputs (.comment-form__input-box, footer newsletter) have no
   focus feedback beyond the site-wide :focus-visible outline for keyboard
   users — a mouse/touch click into a field gives no visual response at all.
   Add a soft border/shadow transition on focus so filling out the contact
   form feels responsive.
   ========================================================================== */
.comment-form__input-box:not(.has-error) input[type="text"],
.comment-form__input-box:not(.has-error) input[type="email"],
.comment-form__input-box:not(.has-error) input[type="tel"],
.comment-form__input-box:not(.has-error) select,
.comment-form__input-box:not(.has-error) textarea,
.footer-widget__newsletter-input-box input[type="email"] {
  transition: box-shadow .35s var(--np-ease-soft), background-color .35s var(--np-ease-soft);
  box-shadow: 0 0 0 1.5px transparent inset;
}
.comment-form__input-box:not(.has-error) input[type="text"]:focus,
.comment-form__input-box:not(.has-error) input[type="email"]:focus,
.comment-form__input-box:not(.has-error) input[type="tel"]:focus,
.comment-form__input-box:not(.has-error) select:focus,
.comment-form__input-box:not(.has-error) textarea:focus,
.footer-widget__newsletter-input-box input[type="email"]:focus {
  box-shadow: 0 0 0 1.5px var(--notech-primary) inset, 0 0 20px -6px rgba(var(--notech-primary-rgb), .5);
}

/* ==========================================================================
   10. Industries cards (homepage) — now real links, reset default anchor styling
   ========================================================================== */
a.business-from-two__content {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}