/*
  vama.css: the motion layer of vama.ee's front page, over the kit (system.css, motion.css, layout.css).
  Loaded by index.html only; vama.js drives it. Everything that moves is transform or opacity; the one exception is
  the headline's weight, which follows the pointer (kinetic type) and is updated by vama.js with a lerp.
  Under prefers-reduced-motion nothing translates or scales: opacity only.
*/
:root { --v-ease-out: cubic-bezier(0.23, 1, 0.32, 1); --v-ease-io: cubic-bezier(0.77, 0, 0.175, 1); }

/* ---------------------------------------------------------------- grain: static feTurbulence, 3%, soft-light */
.v-grain {
  position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .03; mix-blend-mode: soft-light;
  background: 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='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 200px 200px repeat;
}

/* ---------------------------------------------------------------- nav: away on the way down, back on the way up */
.nav.is-hidden:not(.is-open) { transform: translateY(-100%); }

/* ---------------------------------------------------------------- hero: the lines clip in, the photograph settles from 1.08, then drifts with the scroll (vama.js); the words stay */
.hero--vama h1 .v-line { display: block; overflow: clip; padding-bottom: .14em; margin-bottom: -.14em; }
.hero--vama h1 .v-line__in { display: inline-block; }
@media (min-width: 1024px) { .hero--vama h1 .v-line__in { white-space: nowrap; } }
html.v-js:not(.v-entered) .hero .v-line__in { transform: translateY(112%); }
html.v-js:not(.v-entered) .hero :is(.hero__lead, .v-pill) { opacity: 0; }
html.v-js:not(.v-entered) .hero__bg img { transform: scale(1.08); }
html.v-entered .hero .v-line__in { transform: none; transition: transform 900ms var(--v-ease-out); }
html.v-entered .hero .v-line:nth-child(2) .v-line__in { transition-delay: 80ms; }
html.v-entered .hero :is(.hero__lead, .v-pill) { opacity: 1; transition: opacity 600ms ease, background-color 200ms ease, border-color 200ms ease, transform 160ms var(--v-ease-out); }
html.v-entered .hero .hero__lead { transition-delay: 380ms; }
html.v-entered .hero .v-pill { transition-delay: 440ms, 0ms, 0ms, 0ms; }
html.v-entered .hero__bg img { transform: none; transition: transform 1800ms var(--v-ease-out); }

/* ---------------------------------------------------------------- footer: the address waves once under the pointer */
.close__mail .v-ch { display: inline-block; }
@media (hover: hover) and (pointer: fine) {
  .close__mail > a:hover .v-ch { animation: v-wave 420ms var(--v-ease-out) calc(var(--i) * 20ms) 1 both; }
}
@keyframes v-wave { 50% { transform: translateY(-4px); } }

/* ---------------------------------------------------------------- reduced motion: opacity only */
@media (prefers-reduced-motion: reduce) {
  .nav { transition: none; }
  .nav.is-hidden:not(.is-open) { transform: none; }
  html.v-js:not(.v-entered) .hero .v-line__in { transform: none; opacity: 0; }
  html.v-js:not(.v-entered) .hero__bg img { transform: none; }
  html.v-entered .hero .v-line__in { opacity: 1; transition: opacity 500ms ease; }
  .hero__bg { inset: 0; }
  .close__mail > a:hover .v-ch { animation: none; }
  .v-pill:active { transform: none; }
}