/* ============================================================
   v2-motion.css — Amnon Bahar V2 | Visual Richness Foundation
   Motion system, premium card, count-up styling, ambient depth
   Brandbook tokens: sea/sky luminous palette, calm easing
   ============================================================ */

/* ─── 1. REVEAL SYSTEM V2 ──────────────────────────────────── */
/*
  Directional entrances. Add data-reveal="up|left|right|scale"
  to any element. Add data-stagger to a container to cascade
  its direct children 60–80ms apart.
  Once-only: JS removes the class/attr after first trigger.
*/

[data-reveal] {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity  var(--v2-dur-reveal, 600ms) var(--v2-ease-calm, cubic-bezier(0.25, 0.46, 0.45, 0.94)),
    transform var(--v2-dur-reveal, 600ms) var(--v2-ease-calm, cubic-bezier(0.25, 0.46, 0.45, 0.94));
}

[data-reveal="up"]    { transform: translateY(28px); }
[data-reveal="down"]  { transform: translateY(-28px); }
[data-reveal="left"]  { transform: translateX(-28px); }
[data-reveal="right"] { transform: translateX(28px); }
[data-reveal="scale"] { transform: scale(0.93); }
[data-reveal="fade"]  { transform: none; }

/* revealed state — JS adds .v2-revealed */
[data-reveal].v2-revealed {
  opacity: 1;
  transform: none !important;
}

/* stagger delays — set by JS on each child via style attribute */
/* Fallback static delays for no-JS / pre-JS render */
[data-stagger] > *:nth-child(1)  { transition-delay: 0ms;   }
[data-stagger] > *:nth-child(2)  { transition-delay: 70ms;  }
[data-stagger] > *:nth-child(3)  { transition-delay: 140ms; }
[data-stagger] > *:nth-child(4)  { transition-delay: 210ms; }
[data-stagger] > *:nth-child(5)  { transition-delay: 280ms; }
[data-stagger] > *:nth-child(6)  { transition-delay: 350ms; }
[data-stagger] > *:nth-child(7)  { transition-delay: 420ms; }
[data-stagger] > *:nth-child(8)  { transition-delay: 490ms; }

/* ─── 2. PREMIUM CARD .v2-card ─────────────────────────────── */
/*
  Replaces plain .card with premium sea-tinted depth:
  gradient hairline border via pseudo-element, hover lift.
  Usage: add .v2-card alongside (or instead of) .card
  Modifiers: .v2-card--flagship .v2-card--glass .v2-card--amber
*/

.v2-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius-card, 20px);
  /* sea-tinted shadow depth */
  box-shadow:
    0 1px 3px  rgba(26, 135, 168, 0.06),
    0 4px 16px rgba(26, 135, 168, 0.10);
  /* gradient hairline border via outline trick — avoids border consuming layout */
  border: 1px solid transparent;
  background-clip: padding-box;
  transition:
    box-shadow  250ms cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform   250ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  overflow: hidden;
}

/* gradient hairline border as a pseudo — sea 200 → sky 200 → transparent */
.v2-card::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    135deg,
    rgba(26, 135, 168, 0.22) 0%,
    rgba(26, 155, 140, 0.16) 50%,
    rgba(26, 135, 168, 0.08) 100%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  z-index: 0;
}

/* Hover: lift + ambient shadow bloom */
.v2-card:hover {
  transform: translateY(-4px);
  box-shadow:
    0 2px 6px  rgba(26, 135, 168, 0.08),
    0 8px 24px rgba(26, 135, 168, 0.14),
    0 24px 64px rgba(26, 135, 168, 0.10);
}

/* Flagship modifier — amber top-line accent + sea gradient fill */
.v2-card--flagship {
  background: linear-gradient(160deg, #fff 0%, var(--sea-50, #EBF6FA) 100%);
}
.v2-card--flagship::after {
  content: '';
  position: absolute;
  top: 0; right: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sea-500, #1A87A8), var(--amber-400, #F0B429), var(--sky-400, #27AFA0));
  border-radius: 0;
  z-index: 1;
  pointer-events: none;
}

/* Glass modifier — frosted surface for tool cards */
.v2-card--glass {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(12px) saturate(1.4);
  -webkit-backdrop-filter: blur(12px) saturate(1.4);
}

/* Amber modifier — warm highlight card */
.v2-card--amber {
  background: linear-gradient(160deg, var(--amber-50, #FEF9EE) 0%, #fff 100%);
}
.v2-card--amber::before {
  background: linear-gradient(
    135deg,
    rgba(240, 180, 41, 0.28) 0%,
    rgba(26, 135, 168, 0.10) 100%
  );
}

/* Dark modifier — sea-800 surface for proof/CTA sections */
.v2-card--dark {
  background: var(--sea-800, #063E52);
  color: #fff;
}
.v2-card--dark::before {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.12) 0%,
    rgba(26, 155, 140, 0.20) 100%
  );
}

/* ─── 3. COUNT-UP NUMBER STYLING ──────────────────────────── */
/*
  Tabular mono figures for financial data precision.
  Apply .v2-count to any element that will be animated.
  JS targets [data-count-to] to trigger the count.
*/

[data-count-to],
.v2-count {
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: 500;
  line-height: 1;
  /* smooth number transitions via counter animation */
  transition: color 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Sizes */
.v2-count--xl { font-size: 3rem;    }
.v2-count--lg { font-size: 1.75rem; }
.v2-count--md { font-size: 1.25rem; }

/* Active (counting) pulse — subtle amber warmth while animating */
[data-count-to].v2-counting { color: var(--sea-600, #116E8B); }
[data-count-to].v2-counted  { color: inherit; }

/* ─── 4. AMBIENT DEPTH UTILITIES ──────────────────────────── */
/*
  Gradient-mesh + faint grain on section backgrounds.
  Very low opacity — kills flatness without competing with content.
*/

/* Sea gradient mesh — for white/light sections */
.v2-mesh-sea {
  position: relative;
}
.v2-mesh-sea::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 90% 10%, rgba(26, 135, 168, 0.055) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 10% 80%, rgba(26, 155, 140, 0.04)  0%, transparent 55%);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.v2-mesh-sea > * { position: relative; z-index: 1; }

/* Sky gradient mesh — for tool result / success sections */
.v2-mesh-sky {
  position: relative;
}
.v2-mesh-sky::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 20%, rgba(26, 155, 140, 0.06) 0%, transparent 55%),
    radial-gradient(ellipse 50% 60% at 85% 75%, rgba(26, 135, 168, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.v2-mesh-sky > * { position: relative; z-index: 1; }

/* Amber accent mesh — for CTA panels, flagship cards */
.v2-mesh-amber {
  position: relative;
}
.v2-mesh-amber::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 40% at 95% 5%,  rgba(240, 180, 41, 0.07) 0%, transparent 50%),
    radial-gradient(ellipse 40% 50% at 5%  90%, rgba(26,  135, 168, 0.05) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.v2-mesh-amber > * { position: relative; z-index: 1; }

/* Dark mesh — sea-800 dark sections */
.v2-mesh-dark {
  position: relative;
}
.v2-mesh-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 80% 0%,  rgba(26, 155, 140, 0.18) 0%, transparent 55%),
    radial-gradient(ellipse 60% 70% at 20% 100%,rgba(240, 180, 41, 0.09) 0%, transparent 50%);
  pointer-events: none;
  z-index: 0;
  border-radius: inherit;
}
.v2-mesh-dark > * { position: relative; z-index: 1; }

/* Grain overlay — SVG data-URI noise texture, very subtle */
.v2-grain {
  position: relative;
}
.v2-grain::after {
  content: '';
  position: absolute;
  inset: 0;
  /* base64-encoded tiny SVG noise — no external request */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
  mix-blend-mode: overlay;
  opacity: 0.5;
}

/* ─── 5. NAV ENHANCEMENTS ──────────────────────────────────── */

/* Logo draw-in on first load — stroke-dashoffset animation for SVG paths */
.nav-logo-svg svg path,
.nav-logo-svg svg line {
  stroke-dasharray: 200;
  stroke-dashoffset: 200;
  animation: v2-logo-draw 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
/* stagger A vs B glyphs */
.nav-logo-svg svg path:nth-child(3),
.nav-logo-svg svg path:nth-child(4),
.nav-logo-svg svg line:nth-child(5) {
  animation-delay: 0ms;
}
.nav-logo-svg svg path:nth-child(6),
.nav-logo-svg svg path:nth-child(7),
.nav-logo-svg svg path:nth-child(8) {
  animation-delay: 150ms;
}
/* The rect fill fades in */
.nav-logo-svg svg rect {
  opacity: 0;
  animation: v2-logo-fade 0.4s ease forwards;
  animation-delay: 0ms;
}

@keyframes v2-logo-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes v2-logo-fade {
  to { opacity: 1; }
}

/* Scroll-spy active link — the .nav-active class applied by JS */
.nav-links a.nav-active {
  color: var(--primary-button, #116E8B);
  background: rgba(17, 110, 139, 0.07);
  font-weight: 600;
}
.nav-links a.nav-active::after {
  transform: scaleX(1);
}

/* CTA sheen — a soft white shimmer passes left→right (RTL aware) */
.nav-cta {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.nav-cta::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  right: -60%;
  width: 40%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.22) 50%,
    transparent 100%
  );
  transform: skewX(-15deg);
  animation: v2-cta-sheen 3.5s ease-in-out 1.2s infinite;
  pointer-events: none;
}
@keyframes v2-cta-sheen {
  0%    { right: -60%; opacity: 0; }
  10%   { opacity: 1; }
  40%   { right: 110%; opacity: 1; }
  41%,
  100%  { opacity: 0; right: -60%; }
}

/* Magnetic hover — 1px shift on hover (CSS-only approximation;
   the JS helper provides full cursor-tracking magnetic effect) */
.nav-cta:hover {
  transform: translateY(-1px) translateX(0.5px);
}

/* Mobile menu items — stagger their entrance */
.nav-mobile-menu.open a {
  opacity: 0;
  transform: translateX(-16px);
  animation: v2-menu-item-in 250ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.nav-mobile-menu.open a:nth-child(1) { animation-delay: 30ms;  }
.nav-mobile-menu.open a:nth-child(2) { animation-delay: 80ms;  }
.nav-mobile-menu.open a:nth-child(3) { animation-delay: 130ms; }
.nav-mobile-menu.open a:nth-child(4) { animation-delay: 180ms; }
.nav-mobile-menu.open a:nth-child(5) { animation-delay: 230ms; }
.nav-mobile-menu.open a:nth-child(6) { animation-delay: 280ms; }
.nav-mobile-menu.open a:nth-child(7) { animation-delay: 330ms; }

@keyframes v2-menu-item-in {
  to { opacity: 1; transform: translateX(0); }
}

/* ─── 6. ICON ANIMATION HOOKS ──────────────────────────────── */
/*
  .v2-icon-wrap — container for duotone SVG icons.
  On reveal/hover, the icon gets a subtle scale-in.
*/
.v2-icon-wrap {
  transition: transform 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.v2-card:hover .v2-icon-wrap,
.v2-card:focus-visible .v2-icon-wrap {
  transform: scale(1.12);
}

/* Draw-on for shield / checkmark icons via stroke-dashoffset */
.v2-icon-draw path,
.v2-icon-draw circle,
.v2-icon-draw polyline {
  stroke-dasharray: 80;
  stroke-dashoffset: 80;
  transition: stroke-dashoffset 600ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.v2-revealed .v2-icon-draw path,
.v2-revealed .v2-icon-draw circle,
.v2-revealed .v2-icon-draw polyline,
[data-reveal].v2-revealed .v2-icon-draw path {
  stroke-dashoffset: 0;
}

/* Chip pulse — for .hero-objectivity-chip-dot and similar */
.v2-pulse {
  animation: v2-pulse-ring 2.4s ease-out infinite;
}
@keyframes v2-pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(39, 175, 160, 0.55); }
  60%  { box-shadow: 0 0 0 8px rgba(39, 175, 160, 0); }
  100% { box-shadow: 0 0 0 0   rgba(39, 175, 160, 0); }
}

/* Animated gradient underline — for .hero-h1 em emphasis */
.v2-underline-animated {
  position: relative;
}
.v2-underline-animated::after {
  content: '';
  position: absolute;
  bottom: 2px;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--sea-400, #2E9DC0), var(--sky-400, #27AFA0), var(--amber-400, #F0B429));
  background-size: 200% 100%;
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 800ms cubic-bezier(0.25, 0.46, 0.45, 0.94) 300ms;
  animation: v2-gradient-flow 3s linear infinite paused;
}
.v2-revealed .v2-underline-animated::after,
.v2-underline-animated.v2-revealed::after {
  transform: scaleX(1);
  animation-play-state: running;
}
@keyframes v2-gradient-flow {
  0%   { background-position: 0%   50%; }
  100% { background-position: 200% 50%; }
}

/* Bar fill animation — for .why-visual bars
   NOTE: no !important — JS sets width via inline style (bar.style.width).
   Using !important here would override the inline style and break the animation. */
.v2-bar-fill {
  width: 0%;
  transition: width 900ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.v2-bar-fill.v2-bar-animated {
  /* width set via inline style by JS */
}

/* ─── 7. BTN SHEEN (for primary buttons site-wide) ──────────── */
.btn-primary,
.btn-white {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.btn-primary::after,
.btn-white::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  right: -60%;
  width: 36%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.18) 50%,
    transparent 100%
  );
  transform: skewX(-15deg);
  pointer-events: none;
  opacity: 0;
  transition: opacity 150ms ease;
}
.btn-primary:hover::after,
.btn-white:hover::after {
  opacity: 1;
  animation: v2-btn-sheen 600ms ease forwards;
}
@keyframes v2-btn-sheen {
  from { right: -60%; }
  to   { right: 110%; }
}

/* ─── 8. FOOTER TOP-BORDER GRADIENT ────────────────────────── */
.footer::before {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(
    90deg,
    var(--sea-600, #116E8B) 0%,
    var(--sky-400, #27AFA0) 40%,
    var(--amber-400, #F0B429) 70%,
    var(--sea-500, #1A87A8) 100%
  );
  background-size: 200% 100%;
  animation: v2-footer-border 6s linear infinite;
}
@keyframes v2-footer-border {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ─── 9. PREFERS-REDUCED-MOTION FULL OFF-SWITCH ────────────── */
/*
  All motion disabled. Reveals still happen (opacity),
  but transforms are removed. Animations paused.
  This is the complete guardrail block.
*/
@media (prefers-reduced-motion: reduce) {
  /* Reveal system: no transform, instant opacity */
  [data-reveal],
  [data-reveal="up"],
  [data-reveal="down"],
  [data-reveal="left"],
  [data-reveal="right"],
  [data-reveal="scale"],
  [data-reveal="fade"] {
    transform: none !important;
    transition: opacity 200ms ease !important;
  }

  /* Stagger delays cancelled */
  [data-stagger] > * {
    transition-delay: 0ms !important;
  }

  /* Card hover: no transform */
  .v2-card:hover {
    transform: none !important;
  }

  /* Logo draw: instant show */
  .nav-logo-svg svg path,
  .nav-logo-svg svg line,
  .nav-logo-svg svg rect {
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
    animation: none !important;
  }

  /* CTA sheen: off */
  .nav-cta::after,
  .btn-primary::after,
  .btn-white::after {
    animation: none !important;
    opacity: 0 !important;
  }

  /* CTA magnetic: no transform */
  .nav-cta:hover {
    transform: none !important;
  }

  /* Mobile menu: no stagger */
  .nav-mobile-menu.open a {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }

  /* Icon animations: off */
  .v2-icon-wrap,
  .v2-icon-wrap:hover {
    transform: none !important;
    transition: none !important;
  }
  .v2-icon-draw path,
  .v2-icon-draw circle,
  .v2-icon-draw polyline {
    stroke-dashoffset: 0 !important;
    transition: none !important;
  }

  /* Chip pulse: off */
  .v2-pulse {
    animation: none !important;
    box-shadow: 0 0 0 2px rgba(39, 175, 160, 0.35) !important;
  }

  /* Gradient underline: instant visible, no flow */
  .v2-underline-animated::after {
    transform: scaleX(1) !important;
    animation: none !important;
    transition: none !important;
  }
  .v2-revealed .v2-underline-animated::after {
    transform: scaleX(1) !important;
    animation: none !important;
  }

  /* Bar fills: instant */
  .v2-bar-fill {
    transition: none !important;
  }

  /* Footer border: static */
  .footer::before {
    animation: none !important;
    background-position: 0% 50%;
  }

  /* Count-up: disabled (JS checks matchMedia) */
  [data-count-to].v2-counting,
  [data-count-to].v2-counted {
    transition: none !important;
  }

  /* General: no hero wave animation */
  .hero-wave svg,
  .hero-slide {
    animation: none !important;
    transition: none !important;
  }
}


/* ═══════════════════════════════════════════════════════════════
   PERFORMANCE OVERRIDES (2026-06-23) — V2 was choking machines.
   Kills continuous repaints + GPU-heavy compositing. Entrance
   reveals (transitions) + hover still work; only the costly
   always-running effects are disabled.
   ═══════════════════════════════════════════════════════════════ */
*, *::before, *::after {
  animation-iteration-count: 1 !important;     /* no infinite/looping animations */
  backdrop-filter: none !important;            /* frosted glass re-blurs every scroll frame */
  -webkit-backdrop-filter: none !important;
  will-change: auto !important;                /* release persistent GPU layers */
}
/* Kill grain ONLY on its own layers — never on host elements.
   ⚠ The footer carries `.v2-grain`, so [class*="grain"]{display:none}
   nuked the whole footer (2026-06-23 fix). Target the pseudo + the
   dedicated overlay div instead. */
.v2-grain::after { display: none !important; } /* grain pseudo-overlay (footer etc.) — host stays visible */
.soft-cta-grain  { display: none !important; } /* dedicated grain overlay div */
.hero-slide, .hero-slide.is-active { animation: none !important; } /* stop Ken-Burns zoom on big bg images (crossfade via opacity transition stays) */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }