/* Header and content fill at least the first screen, so the footer always
   starts just below the fold and shows after a little scroll. The content
   grows so the language switcher sits at the bottom of that screen */
.layout__screen {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

/* The page's content sits above the pyonen, so it scrolls over it, and below
   the header (header.css). Only the content itself catches clicks: the empty
   rest of this layer would otherwise cover what's under it */
.layout__main {
  position: relative;
  z-index: 1;
  flex: 1;
  pointer-events: none;
}

.layout__main > * {
  pointer-events: auto;
}

/* Moving between pages, what every page shares (header, footer, language
   switch, pyonen) has its own view-transition-name and stays put; the rest
   fades out, then the next page's fades in. Browsers without cross-document
   view transitions, and visitors who ask for less motion, get a plain load */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
}

::view-transition-old(root) {
  animation: 200ms ease-in both layout-fade-out;
}

::view-transition-new(root) {
  animation: 250ms ease-out 200ms both layout-fade-in;
}

@keyframes layout-fade-out {
  to {
    opacity: 0;
  }
}

@keyframes layout-fade-in {
  from {
    opacity: 0;
  }
}

/* The video that plays moving between main pages (assets/js/snippets/layout.js).
   It has its own transparency (WebM or HEVC with alpha), so the page shows
   through. Only the one picked for this move is shown */
.layout__transition {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}

.layout__transition[hidden] {
  display: none;
}

.layout__transition-video[hidden] {
  display: none;
}

.layout__transition-video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The cookie banner's buttons (site/plugins/consent). Arielvetica leaves more
   room under the baseline than above its capitals, so labels sat high: the
   line is trimmed to the capitals and the baseline and padded evenly. Without
   text-box, the padding is shifted down instead. Doubled class: the plugin's
   stylesheet loads after this one */
.consent .consent__button {
  padding: 0.75em 1rem;
  text-box: trim-both cap alphabetic;
}

@supports not (text-box: trim-both cap alphabetic) {
  .consent .consent__button {
    padding: 0.66em 1rem 0.33em;
  }
}