/* ============================================================
   Venia Profit - Produkter effects layer
   Loaded ONLY on /produkter/ by wp-content/novamira-sandbox/venia-fx.php

   WHY THIS FILE EXISTS
   Elementor's V4 atomic style engine silently strips @keyframes,
   @media (prefers-reduced-motion) and mask-image, and explicitly
   drops all `animation-*` declarations. Pro Interactions is also
   non-functional on this install (PRO Elements 4.2.3 vs Elementor
   core 4.3.0-beta2: data saves correctly, renderer emits
   data-interactions="null"). So ALL motion lives here.

   STATIC styling stays in Elementor global classes so it remains
   editable in the editor. This file only adds motion on top of
   those same class names.

   Safe to delete: nothing is hidden by default, so removing this
   file simply removes the motion.
   ============================================================ */

:root {
  --vp-navy: #0F1D37;
  --vp-coral: #F15C51;
  --vp-border: #E4E6E8;
  /* Design system: 150-300ms, ease / ease-out */
  --vp-dur: 260ms;
  --vp-ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 1. Keyframes ---------- */
@keyframes vp-rise {
  from { opacity: 0; transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes vp-rise-sm {
  from { opacity: 0; transform: translate3d(0, 10px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes vp-shot-in {
  from { opacity: 0; transform: translate3d(0, 24px, 0) scale(.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

/* ---------- 2. Scroll-driven reveals (native CSS, no JS)
   Guarded by @supports: browsers without scroll-driven animation
   render the final state. Content is NEVER hidden by default, so
   nothing can get stuck invisible. ---------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .vp-reveal {
      animation: vp-rise linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 52%;
    }

    .vp-reveal-shot {
      animation: vp-shot-in linear both;
      animation-timeline: view();
      animation-range: entry 2% entry 58%;
    }

    /* Staggered children: each starts later in the scroll range,
       producing a wave as the block enters the viewport. */
    .vp-stagger > * {
      animation: vp-rise-sm linear both;
      animation-timeline: view();
    }
    .vp-stagger > *:nth-child(1)   { animation-range: entry 2%  entry 40%; }
    .vp-stagger > *:nth-child(2)   { animation-range: entry 8%  entry 46%; }
    .vp-stagger > *:nth-child(3)   { animation-range: entry 14% entry 52%; }
    .vp-stagger > *:nth-child(4)   { animation-range: entry 20% entry 58%; }
    .vp-stagger > *:nth-child(5)   { animation-range: entry 26% entry 64%; }
    .vp-stagger > *:nth-child(6)   { animation-range: entry 32% entry 70%; }
    .vp-stagger > *:nth-child(n+7) { animation-range: entry 38% entry 76%; }
  }
}

/* Hero is already in view on load, so it animates on load. */
@media (prefers-reduced-motion: no-preference) {
  .vp-hero-in > * { animation: vp-rise 520ms var(--vp-ease) both; }
  .vp-hero-in > *:nth-child(1) { animation-delay: 60ms; }
  .vp-hero-in > *:nth-child(2) { animation-delay: 130ms; }
  .vp-hero-in > *:nth-child(3) { animation-delay: 200ms; }
  .vp-hero-in > *:nth-child(4) { animation-delay: 270ms; }
  .vp-hero-in > *:nth-child(5) { animation-delay: 340ms; }

  .vp-hero-shot {
    animation: vp-shot-in 720ms var(--vp-ease) both;
    animation-delay: 180ms;
  }
}

/* ---------- 3. Tab panel crossfade
   V4 atomic tabs are Alpine-driven; the live panel is the one
   without [hidden]. Toggling display restarts the animation, so
   every tab switch crossfades. ---------- */
@media (prefers-reduced-motion: no-preference) {
  [role="tabpanel"] {
    animation: vp-rise-sm 300ms var(--vp-ease) both;
  }
}

/* Tab pills: colour/background live in the vp-tab global class,
   this only adds the press/hover motion it cannot express. */
.vp-tab { transition: transform 180ms var(--vp-ease); }
.vp-tab:hover  { transform: translateY(-1px); }
.vp-tab:active { transform: translateY(0); }

/* ---------- 4. Hover, deliberately restrained
   Design system: slight border change, very subtle shadow, no zoom.
   The large product panel gets no lift (it would read as clumsy at
   that size); only the small stat cards lift. ---------- */
.vp-card {
  transition:
    border-color var(--vp-dur) var(--vp-ease),
    box-shadow var(--vp-dur) var(--vp-ease);
}
.vp-card:hover {
  border-color: #D9DCE0;
  box-shadow: 0 8px 30px rgba(15, 29, 55, .05);
}

.vp-kpi {
  transition:
    border-color var(--vp-dur) var(--vp-ease),
    box-shadow var(--vp-dur) var(--vp-ease),
    transform var(--vp-dur) var(--vp-ease);
}
.vp-kpi:hover {
  border-color: #D9DCE0;
  box-shadow: 0 8px 30px rgba(15, 29, 55, .05);
  transform: translateY(-2px);
}

/* Product screenshot drifts 1.5% on panel hover - intentionally
   below the threshold where it reads as a "zoom effect". */
.vp-panel-img { transition: transform 420ms var(--vp-ease); }
.vp-card:hover .vp-panel-img { transform: scale(1.015); }

/* ---------- 5. Mask fade (stripped by Elementor, works here) ---------- */
.vp-mask-fade {
  -webkit-mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 58%, transparent 100%);
}

/* ---------- 6. Decorative depth (design system caps at 3-6%) ---------- */
.vp-decor { position: relative; isolation: isolate; }
.vp-decor::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(52% 46% at 84% 8%,  var(--vp-coral) 0%, transparent 68%),
    radial-gradient(44% 40% at 6%  96%, var(--vp-navy)  0%, transparent 70%);
  opacity: .045;
}

/* ---------- 7. Focus visibility (WCAG 2.4.7 / 2.4.11) ---------- */
.vp-tab:focus-visible,
.vp-card a:focus-visible,
.vp-cta-panel a:focus-visible {
  outline: 2px solid var(--vp-coral);
  outline-offset: 3px;
}
/* Keep focused elements clear of any sticky header */
html { scroll-padding-top: 96px; }

/* ---------- 8. Reduced motion: single authoritative kill switch.
   Every animated element renders its final state. ---------- */
@media (prefers-reduced-motion: reduce) {
  .vp-reveal,
  .vp-reveal-shot,
  .vp-stagger > *,
  .vp-hero-in > *,
  .vp-hero-shot,
  [role="tabpanel"] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .vp-card,
  .vp-kpi,
  .vp-tab,
  .vp-panel-img {
    transition: none !important;
  }
  .vp-card:hover,
  .vp-kpi:hover,
  .vp-tab:hover,
  .vp-card:hover .vp-panel-img {
    transform: none !important;
  }
}

/* ---------- 3b. Active-tab triangle pointer
   Drawn as a pseudo-element instead of a real child element: Elementor
   renders "Type your paragraph here" placeholder text inside any empty
   text widget, which leaked into every tab's accessible name. A pseudo
   element has no DOM node, no placeholder and no pruning risk.
   .vp-tab already carries position: relative from the kit. ---------- */
.vp-tab::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
  width: 16px;
  height: 9px;
  background-color: var(--vp-coral);
  clip-path: polygon(50% 100%, 0% 0%, 100% 0%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--vp-ease);
}
.vp-tab.e--selected::after { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .vp-tab::after { transition: none !important; }
}

/* --- icon outline guard ---
   Elementor's e-svg rewrites the root <svg fill="none"> to
   fill="currentColor", which renders outline icons as solid blobs.
   Force the intended stroke-only rendering. */
.vp-glyph svg, .vp-glyph-light svg,
.vp-glyph svg *, .vp-glyph-light svg * { fill: none; }

/* --- mobile feature-grid reveal ---
   The collapsed class is added by venia-fx.js only, so a visitor
   without JS sees every card and never a dead button. */
@media (max-width: 767px) {
  .vp-mgrid.vp-collapsed > *:nth-child(n+2) { display: none; }
}