/* ====================================================================
   Wolf enhance.css — additive UI/UX layer
   Goal: replace pure-black monotony with a richer, dimensional dark,
   add hover/press feedback, keep Webflow CSS completely untouched.
   ==================================================================== */

/* (Background gradient + ambient drift + section hairlines reverted —
   pure black aesthetic preserved per user preference.) */

/* -------------------------------------------------------------------
   3. Tactile button feedback — every clickable element gets press
      scale + magnetic-ready transitions. Combined with JS haptics.
   ------------------------------------------------------------------- */
button,
.w-button,
a[class*="btn"],
a[class*="button"],
a[class*="cta"],
[role="button"] {
  transition: transform 140ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 200ms ease-out !important;
  will-change: transform;
}

button:active,
.w-button:active,
a[class*="btn"]:active,
a[class*="button"]:active,
a[class*="cta"]:active,
[role="button"]:active {
  transform: scale(0.96);
  transition: transform 80ms cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* Magnetic-hover halo on the primary CTA — picks up brand accent */
.w-button:hover,
a[class*="btn-primary"]:hover,
a[class*="cta1"]:hover {
  box-shadow: 0 8px 32px rgba(91, 89, 246, 0.35),
              0 0 0 1px rgba(247, 174, 248, 0.2) inset;
}

/* -------------------------------------------------------------------
   4. Card hover lift — cards become tactile instead of flat.
      Pattern-match common Webflow card class names.
   ------------------------------------------------------------------- */
.case-card,
.project-card,
.testimonial-card,
.service-card,
.blog-card,
.blog-card-flex,
[class*="case-studies"] [class*="card"],
[class*="services"] [class*="card"],
[class*="testimonials"] [class*="card"],
.cta1-flex,
.metrics-flex {
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 320ms cubic-bezier(0.4, 0, 0.2, 1),
              border-color 320ms ease;
}

.case-card:hover,
.project-card:hover,
.testimonial-card:hover,
.service-card:hover,
.blog-card:hover,
.blog-card-flex:hover,
[class*="case-studies"] [class*="card"]:hover,
[class*="services"] [class*="card"]:hover,
[class*="testimonials"] [class*="card"]:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(91, 89, 246, 0.22),
              0 0 0 1px rgba(91, 89, 246, 0.18);
}

/* -------------------------------------------------------------------
   5. Image polish — blur-to-sharp transition removes the "pop" of
      images that load late. enhance.js toggles .ww-img-loaded.
   ------------------------------------------------------------------- */
img {
  transition: filter 420ms ease-out, opacity 420ms ease-out;
}
img:not(.ww-img-loaded) {
  filter: blur(8px);
  opacity: 0.85;
}
img.ww-img-loaded {
  filter: blur(0);
  opacity: 1;
}

/* (Nav link underline removed — generic web pattern, read as cheap.
   Webflow's default color shift on hover is enough.) */

/* -------------------------------------------------------------------
   7. Form input focus — slight glow when active
   ------------------------------------------------------------------- */
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(91, 89, 246, 0.25),
              0 0 24px -6px rgba(91, 89, 246, 0.5) !important;
  transition: box-shadow 200ms ease !important;
}

/* Error state shake — JS adds .ww-shake on submit-validation failure */
@keyframes ww-shake {
  0%, 100% { transform: translateX(0); }
  20%, 60% { transform: translateX(-5px); }
  40%, 80% { transform: translateX(5px); }
}
.ww-shake {
  animation: ww-shake 340ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

/* -------------------------------------------------------------------
   8b. Mega-menu backdrop — when a nav dropdown opens, dim + blur
       everything else so the menu commands attention.

       Implementation note: overlay is permanently rendered with
       opacity:0 + blur:0 + transparent bg. Transitioning these
       properties handles BOTH fade-in AND fade-out symmetrically.
       (A keyframe animation only fires on element creation, so the
       close would be instant — which felt jarring.)
   ------------------------------------------------------------------- */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  backdrop-filter: blur(0) saturate(100%);
  -webkit-backdrop-filter: blur(0) saturate(100%);
  z-index: 100;
  pointer-events: none;
  opacity: 0;
  transition:
    opacity 380ms cubic-bezier(0.32, 0.72, 0, 1),
    background 380ms cubic-bezier(0.32, 0.72, 0, 1),
    backdrop-filter 380ms cubic-bezier(0.32, 0.72, 0, 1),
    -webkit-backdrop-filter 380ms cubic-bezier(0.32, 0.72, 0, 1);
}

body:has(.w-dropdown-list.w--open)::after {
  opacity: 1;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px) saturate(85%);
  -webkit-backdrop-filter: blur(6px) saturate(85%);
}

/* Lift the nav and any open dropdown above the backdrop.
   IMPORTANT: only touch z-index — never override `position`, or
   Webflow's sticky nav jumps off-viewport when the dropdown opens. */
body:has(.w-dropdown-list.w--open) header.nav-flex,
body:has(.w-dropdown-list.w--open) .w-nav,
body:has(.w-dropdown-list.w--open) nav[role="navigation"] {
  z-index: 101;
}

body:has(.w-dropdown-list.w--open) .w-dropdown-list.w--open {
  z-index: 102;
}

/* -------------------------------------------------------------------
   8b2. Mega-menu stagger reveal — copied from Flow Ninja's pattern:
        cards fade up with translateY(12px → 0), opacity (0 → 1),
        400ms cubic-bezier(0.25,0.46,0.45,0.94), 60ms stagger.

        Two-stage transition trick: default (close) is fast 220ms ease;
        when .w--open is added, the active rules apply the slower
        400ms reveal curve. CSS handles both directions cleanly.
   ------------------------------------------------------------------- */
/* Tags are static labels of the dropdown's structural frame — they
   appear instantly with the panel. Only the content cards animate.
   This matches Flow Ninja's behaviour: their section headers ("By
   role", "By industry", etc.) sit still while the cards cascade. */
@keyframes ww-card-rise {
  from {
    opacity: 0;
    transform: translateY(20px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Cards: rise + scale. Same pattern in two contexts:
   - mega-menu: triggered by .w-dropdown-list.w--open (display none→block)
   - in-page services section: triggered by .is-cascading added by JS
     when the .services-grid-3 enters viewport.

   In-page version starts hidden so the animation has a "from" state
   when JS toggles .is-cascading. */

/* In-page: cards start hidden until .is-cascading is added */
.section-services .services-grid-2 > .service-flex,
.section-services .service-flex-1 {
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  will-change: opacity, transform;
}

/* Animation rules — apply in BOTH contexts */
.w-dropdown-list.w--open .services-grid-2 > .service-flex,
.section-services .services-grid-3.is-cascading .services-grid-2 > .service-flex,
.w-dropdown-list.w--open .service-flex-1,
.section-services .services-grid-3.is-cascading .service-flex-1 {
  animation: ww-card-rise 460ms cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
  will-change: opacity, transform;
}

/* Stagger delays — same in both contexts */
.w-dropdown-list.w--open .services-grid-2 > .service-flex:nth-child(2),
.section-services .services-grid-3.is-cascading .services-grid-2 > .service-flex:nth-child(2) {
  animation-delay: 0ms;
}
.w-dropdown-list.w--open .services-grid-2 > .service-flex:nth-child(3),
.section-services .services-grid-3.is-cascading .services-grid-2 > .service-flex:nth-child(3) {
  animation-delay: 100ms;
}
.w-dropdown-list.w--open .service-flex-1,
.section-services .services-grid-3.is-cascading .service-flex-1 {
  animation-delay: 200ms;
}

/* Reduced motion: render at final state instantly */
@media (prefers-reduced-motion: reduce) {
  .section-services .services-grid-2 > .service-flex,
  .section-services .service-flex-1 {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

/* Chevron rotation on the Teenused trigger when its dropdown opens.
   The "toggle" wraps the icon. Use :has() to detect open state of the
   sibling .w-dropdown-list. */
.w-dropdown:has(> .w-dropdown-list.w--open) .w-icon-dropdown-toggle {
  transform: rotate(180deg);
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.w-icon-dropdown-toggle {
  transition: transform 400ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* -------------------------------------------------------------------
   8c. Single-flag language switcher — sits between nav links and CTA.
       Shows the flag of the OTHER language ("click to switch to").
   ------------------------------------------------------------------- */
.ww-lang-switcher {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 14px 0 8px;
  padding: 7px;
  border-radius: 10px;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.04);
  transition: transform 220ms cubic-bezier(0.34, 1.56, 0.64, 1),
              background 200ms ease,
              box-shadow 200ms ease;
  flex-shrink: 0;
  cursor: pointer;
}
.ww-lang-switcher:hover {
  background: rgba(91, 89, 246, 0.18);
  transform: scale(1.08);
  box-shadow: 0 4px 18px rgba(91, 89, 246, 0.28);
}
.ww-lang-switcher:active {
  transform: scale(0.94);
}
.ww-flag {
  display: block;
  width: 24px;
  height: 18px;
  object-fit: cover;
  border-radius: 3px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18),
              0 1px 3px rgba(0, 0, 0, 0.3);
  filter: none !important;
  opacity: 1 !important;
  pointer-events: none;  /* clicks land on the parent <a> */
}

/* On mobile (Webflow burger menu), bump margin so it doesn't hug
   the last menu item too tightly. */
@media (max-width: 991px) {
  .ww-lang-switcher {
    margin: 16px 0 0 0;
    align-self: center;
  }
}

/* -------------------------------------------------------------------
   8d. Scroll reveal — single consistent pattern site-wide.
       Pattern stolen from Flow Ninja + Surfer's discipline:
         - one direction: always upward (translateY 24px → 0)
         - one ease: cubic-bezier(0.25, 0.46, 0.45, 0.94)
         - one duration: 700ms
         - opacity 0 → 1 paired with the translate
         - JS adds .is-revealed when element enters viewport (15%)
         - JS sets transition-delay inline for stagger groups
       Anti-patterns deliberately rejected:
         - no slide from sides ("cheap")
         - no scale/bounce overshoot ("cheap")
         - no per-element easing variation ("uncoordinated")
   ------------------------------------------------------------------- */
.ww-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 700ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.ww-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* If a user has reduce-motion set, skip reveals entirely — render
   everything visible at its final state immediately. */
@media (prefers-reduced-motion: reduce) {
  .ww-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* -------------------------------------------------------------------
   8e. "Alive but not cheap" motion system — coordinated layer of 7
       behaviors all using the same easing/timing language.
   ------------------------------------------------------------------- */

/* (1) Logo breathing removed — too subtle to perceive consciously,
   and at the threshold it looked like a render glitch more than
   "alive". Premium feel comes from response, not ambient ticking. */

/* (2) Refined scroll reveal — adds a tiny scale to the existing upward
   motion so elements feel like they "settle in" rather than slide. */
.ww-reveal {
  transform: translateY(24px) scale(0.985);
}
.ww-reveal.is-revealed {
  transform: translateY(0) scale(1);
}

/* (3) Card 3D tilt — JS sets --ww-rx / --ww-ry on mousemove.
   Tilt maxes at 4°.

   IMPORTANT: no `transform-style: preserve-3d` or `perspective` here.
   They create a 3D stacking context that broke z-index of the inner
   <a class="link-absolute"> overlay, making cards unclickable.
   Plain rotateX/rotateY still gives visible 3D-tilt without the
   side effect. */
.case-card,
.case-card-flex,
.service-flex,
.service-flex-1,
.blog-card-flex,
.testimonial-card,
.metric {
  transition: transform 320ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ww-tilt {
  transform: perspective(1000px) rotateX(var(--ww-rx, 0deg)) rotateY(var(--ww-ry, 0deg));
  transition: transform 80ms linear;
}

/* (4) Image hover zoom on portfolio + blog thumbnails. Overflow-hidden
   parent so the zoom appears as a slow crop, not a layout shift. */
.case-card,
.case-card-flex,
.blog-card-flex,
.blog-card,
.laptop-screen,
.phone-screen-hero {
  overflow: hidden;
}
.case-card img,
.case-card-flex img,
.blog-card-flex img,
.blog-card img,
.case-card .screen-laptop,
.case-card-flex .screen-laptop {
  transition: transform 720ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
              filter 720ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}
.case-card:hover img,
.case-card-flex:hover img,
.blog-card-flex:hover img,
.blog-card:hover img,
.case-card:hover .screen-laptop,
.case-card-flex:hover .screen-laptop {
  transform: scale(1.05);
}

/* (5) Hero headline line reveal — REMOVED.
   The reveal animation made the buttons below the headline appear to
   shift as the lines settled in. Hero now renders as one composed
   block on first paint. CSS class kept inert in case re-introduced. */

/* (6) Number count-up CSS removed alongside the JS — kept only the
   tabular-nums hint so digit widths stay consistent if the numbers
   ever update at runtime. */
.number-metric {
  font-variant-numeric: tabular-nums;
}

/* (7) Sticky floating CTA pill — appears after scrolling past hero.
   Sits bottom-right, on-brand purple, magnetic-press feedback inherited
   from existing button rules. */
.ww-sticky-cta {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 95;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 100px;
  background: linear-gradient(135deg, #5b59f6 0%, #7b79f7 100%);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  box-shadow:
    0 12px 36px rgba(91, 89, 246, 0.35),
    0 2px 8px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
  opacity: 0;
  transform: translateY(60px) scale(0.92);
  pointer-events: none;
  transition:
    opacity 440ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 440ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    box-shadow 200ms ease;
}
.ww-sticky-cta.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.ww-sticky-cta:hover {
  box-shadow:
    0 16px 44px rgba(91, 89, 246, 0.5),
    0 4px 12px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.ww-sticky-cta:active {
  transform: translateY(0) scale(0.96);
}
.ww-sticky-cta svg {
  width: 14px;
  height: 14px;
  transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.ww-sticky-cta:hover svg {
  transform: translateX(3px);
}

@media (max-width: 600px) {
  .ww-sticky-cta {
    right: 16px;
    bottom: 16px;
    padding: 10px 16px;
    font-size: 13px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ww-hero-line { opacity: 1 !important; transform: none !important; }
  .ww-sticky-cta { transition: none !important; }
}

/* -------------------------------------------------------------------
   9. Reduced-motion respect — kills any ambient animation + cancels
      transitions for users who set OS-level prefers-reduced-motion.
   ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body::after { animation: none !important; }
}