/* ====================================================================
   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 — JS wraps each line in .ww-hero-line.
   They animate up sequentially as a coordinated entrance.

   FLASH-PREVENTION: hide the unprocessed h1 so the raw text doesn't
   render briefly before JS swaps it for animatable spans. We use
   visibility (not opacity) so layout space is reserved — no shift
   on processing. data-ww-hero-processed attribute is set by JS the
   moment it begins the swap. */
h1.one-liner:not([data-ww-hero-processed]) {
  visibility: hidden;
}
.ww-hero-line {
  display: inline-block;
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}
.ww-hero-line.is-in {
  opacity: 1;
  transform: translateY(0);
}

/* Reduced-motion users: never hide the h1 — render at final state */
@media (prefers-reduced-motion: reduce) {
  h1.one-liner:not([data-ww-hero-processed]) {
    visibility: visible !important;
  }
}

/* (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; }
}