/* ===========================================================================
   EverOn — Base layer
   ---------------------------------------------------------------------------
   Document defaults, typography behaviour and the scroll-triggered entrance
   animations shared by the home sections.

   Load order matters: tokens.css -> fonts.css -> base.css -> nav.css ->
   components.css -> blog.css. See app/views/partials/head.php.
   =========================================================================== */

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-page);
  font-family: var(--font-sans);
  /* Geologica exposes a SHRP (sharpness) axis; 80 is the brand setting. */
  font-variation-settings: 'SHRP' 80;
  -webkit-font-smoothing: antialiased;
}

/* Light body copy (weight 300) uses the cursive axis — this is what gives the
   lede paragraphs their distinctive slanted look. The attribute selectors are
   needed because weight is still set inline in the section markup. */
[style*="font-weight: 300"],
[style*="font-weight:300"],
.is-light-copy {
  font-variation-settings: 'CRSV' 1, 'SHRP' 0;
}

a { color: var(--c-blue-link); text-decoration: none; }
a:hover { color: var(--c-orange); }

/* Anchor targets must clear the fixed nav. */
section[id] { scroll-margin-top: var(--nav-h); }

::selection { background: var(--c-orange); color: var(--c-white); }

img, video { max-width: 100%; }

/* Visually hidden but readable by screen readers. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------------------------------------------------------------------------
   Entrance animations
   Sections get .in-view added by assets/js/site.js when they scroll into
   frame; the animation only runs at that point.
   --------------------------------------------------------------------------- */
::selection{ background:#F56604; color:#fff; }
@keyframes everon-marquee { from{ transform:translateX(0);} to{ transform:translateX(-50%);} }
@keyframes ov-line-in { from{ opacity:0; transform:translateY(45%) skewY(3deg);} to{ opacity:1; transform:none;} }
#b-overview .ov-line{ display:block; opacity:0; }
#b-overview.in-view .ov-line{ animation:ov-line-in .8s cubic-bezier(.2,.7,.2,1) forwards; }
#b-overview.in-view .ov-line:nth-child(1){ animation-delay:.05s; }
#b-overview.in-view .ov-line:nth-child(2){ animation-delay:.18s; }
@keyframes adv-item-in { from{ opacity:0; transform:translateY(28px);} to{ opacity:1; transform:none;} }
#b-advantage .adv-item{ opacity:0; }
#b-advantage.in-view .adv-item{ animation:adv-item-in .6s cubic-bezier(.2,.7,.2,1) forwards; }
#b-advantage.in-view .adv-item:nth-child(1){ animation-delay:.05s; }
#b-advantage.in-view .adv-item:nth-child(2){ animation-delay:.13s; }
#b-advantage.in-view .adv-item:nth-child(3){ animation-delay:.21s; }
.ab-title{ transition:color .18s ease; cursor:default; }
.ab-title:hover{ color:#FF9A02 !important; }

/* Respect the OS "reduce motion" setting: show everything, animate nothing. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  #b-overview .ov-line,
  #b-advantage .adv-item { opacity: 1 !important; }
}