/* Avanza Methods, motion and the ambient motif.
   This file is the only one permitted a gradient. It does not use one. */

/* ---------- Reveal ----------
   The hidden state applies only when JavaScript is running, so the page reads
   correctly with scripting disabled. Fires on the Movement, not its children. */

.js .reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Stagger, capped at four children and 70ms apart. */
.js .reveal.is-visible > .stagger:nth-child(1) { transition-delay: 0ms; }
.js .reveal.is-visible > .stagger:nth-child(2) { transition-delay: 70ms; }
.js .reveal.is-visible > .stagger:nth-child(3) { transition-delay: 140ms; }
.js .reveal.is-visible > .stagger:nth-child(4) { transition-delay: 210ms; }

.js .reveal > .stagger {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}

.js .reveal.is-visible > .stagger {
  opacity: 1;
  transform: none;
}

/* ---------- Ambient motif ----------
   The mark itself, whole and legible, as a large quiet silhouette. The brand
   sheet permits the mark as a standalone watermark and texture treatment, and
   a silhouette of the real geometry is more faithful than any redrawing of it.
   Colour follows the logo, never the accent: Dark Sea on light surfaces, Wispy
   Clouds on inverted ones. Always behind content, never behind body copy.
   At most twice per page, once at full presence and once reduced. */

.motif {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  color: var(--ink);
  opacity: 0.08;
}

.section--ink .motif,
.section--sea .motif {
  color: var(--paper);
  opacity: 0.10;
}

/* Reduced presence, for the single mid page appearance. */
.motif--quiet { opacity: 0.05; }
.section--ink .motif--quiet,
.section--sea .motif--quiet { opacity: 0.07; }

/* Below this width there is no room to the right of the reading column, and a
   large mark would end up sitting behind body copy, which the brand sheet does
   not allow. It is withheld rather than shrunk into the text. */
@media (max-width: 999px) {
  .motif { display: none; }
}

.motif svg {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-end: -8%;
  width: min(620px, 42%);
  height: auto;
  transform: translateY(-50%);
  transform-origin: 100% 50%;
  animation: motif-drift 74s var(--ease) infinite alternate;
  will-change: transform;
}

.motif path { fill: currentColor; }

/* Slow, continuous, transform only. One animated element on screen at a time. */
@keyframes motif-drift {
  from { transform: translateY(-50%) scale(1); }
  to   { transform: translateY(-53%) scale(1.05); }
}

/* ---------- Reduced motion ----------
   All content visible at rest, no transforms, motif static. */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .reveal,
  .js .reveal > .stagger,
  .js .reveal.is-visible,
  .js .reveal.is-visible > .stagger {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .motif svg {
    animation: none;
    transform: translateY(-50%);
  }

  /* Every transition in this project is declared on a class below, so the
     specific rules above are enough. No blanket override, and no important. */
  .cta,
  .link,
  .nav__link,
  .footer-nav a,
  .field__control,
  .skip-link {
    transition: none;
  }
}