/*
 * Avecas modern layer v1 - progressive enhancement (2026-10-19).
 * Every rule is scoped to html[data-next], which the mu-plugin sets only for previewers
 * (?avnext=1 on, ?avnext=0 off) until the layer is switched live. Nothing here is required
 * for the site to work: browsers without support simply skip a rule. Motion respects
 * prefers-reduced-motion. Delete wp-content/mu-plugins/avecas-modern.php to remove.
 */

html[data-next] {
  color-scheme: light;
  -webkit-font-smoothing: antialiased;
}

/* ---- Typography: balanced headings, no orphaned last words (Baseline / progressive) ---- */
html[data-next] main :is(h1, h2, h3) {
  text-wrap: balance;
}
html[data-next] main :is(p, li, blockquote, figcaption) {
  text-wrap: pretty;
}

/* ---- Selection + one consistent keyboard focus ring ---- */
html[data-next] ::selection {
  background: #cfe0fb;
  background: color-mix(in srgb, #075bd8 24%, #fff);
  color: #152332;
}
html[data-next] :where(a, button, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 2px solid #0068d8;
  outline-offset: 3px;
}
html[data-next] :where(.avs-cinematic, .avs-footer, .avs-cta-premium) :where(a, button, summary):focus-visible {
  outline-color: #fff;
}
@media (forced-colors: active) {
  html[data-next] :focus-visible {
    outline-color: Highlight;
  }
}

/* ---- Motion: only for people who have not asked for reduced motion ---- */
@media (prefers-reduced-motion: no-preference) {
  /* Cards, steps and article tiles rise gently into view (scroll-driven, no JavaScript). */
  @supports (animation-timeline: view()) {
    html[data-next] :is(.avs-photo-card, .avs-editorial-card, .avs-section article, .avs-solutions-section article, .avs-tk-home li) {
      animation: avs-rise linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 36%;
    }
    @keyframes avs-rise {
      from {
        opacity: 0;
        translate: 0 26px;
      }
      to {
        opacity: 1;
        translate: 0 0;
      }
    }
  }

  /* The sticky header gains a soft shadow once the page scrolls. */
  @supports (animation-timeline: scroll()) {
    html[data-next] .avs-header {
      animation: avs-header-lift linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90px;
    }
    @keyframes avs-header-lift {
      to {
        box-shadow: 0 1px 0 rgb(21 35 50 / 0.06), 0 12px 32px -20px rgb(21 35 50 / 0.4);
      }
    }
  }

  /* Cross-page transitions (opt-in rule is injected by the mu-plugin): keep the header still, fade the page. */
  html[data-next] .avs-header {
    view-transition-name: avs-header;
  }
  html[data-next]::view-transition-group(avs-header) {
    animation-duration: 0s;
  }
  html[data-next]::view-transition-old(avs-header) {
    display: none;
  }
  html[data-next]::view-transition-new(avs-header) {
    animation: none;
  }
  html[data-next]::view-transition-old(root),
  html[data-next]::view-transition-new(root) {
    animation-duration: 0.22s;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }
}