/*
 * Movement: between pages, and the small things that move within one. All of
 * it is left out for whoever has asked their device for less motion.
 */

@layer site {
  /* ---- Between pages ---- */

  /* Every page opts in, so the browser crosses over from one to the next
     instead of blanking the screen. The header stays where it is. */
  @view-transition {
    navigation: auto;
  }

  .site-header { view-transition-name: header; }
  .ridge--band { view-transition-name: panorama; }
  #main-content { view-transition-name: content; }
  .site-footer { view-transition-name: footer; }

  /* The pictogram on a group's tile and at the top of its page is one
     picture, so it moves from the one place to the other. transition.js
     names each one from its data-morph; the class gathers them here. */
  .icon--morph { view-transition-class: morph; }

  ::view-transition-group(*) {
    animation-duration: 380ms;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  /* The content slides the way the menu goes: a page further right in the
     menu comes in from the right. transition.js sets the direction. */
  ::view-transition-old(content) { animation: 220ms ease both page-out-left; }
  ::view-transition-new(content) { animation: 340ms 60ms cubic-bezier(0.2, 0.7, 0.2, 1) both page-in-right; }

  html:active-view-transition-type(back) {
    &::view-transition-old(content) { animation-name: page-out-right; }
    &::view-transition-new(content) { animation-name: page-in-left; }
  }

  /* The view pans, as if the camera turned: from Misvær to Vestvatn the
     valley comes in from the side the menu goes to. */
  ::view-transition-old(panorama) { animation: 420ms cubic-bezier(0.4, 0, 0.2, 1) both pan-out-left; }
  ::view-transition-new(panorama) { animation: 520ms cubic-bezier(0.2, 0.7, 0.2, 1) both pan-in-right; }

  html:active-view-transition-type(back) {
    &::view-transition-old(panorama) { animation-name: pan-out-right; }
    &::view-transition-new(panorama) { animation-name: pan-in-left; }
  }

  /* A morphing pictogram goes in a gentle arc, not a straight line. */
  ::view-transition-group(*.morph) {
    animation-duration: 460ms;
    animation-timing-function: cubic-bezier(0.3, 1.2, 0.4, 1);
  }

  @keyframes page-out-left { to { opacity: 0; translate: -2.5rem 0; } }
  @keyframes page-out-right { to { opacity: 0; translate: 2.5rem 0; } }
  @keyframes page-in-right { from { opacity: 0; translate: 2.5rem 0; } }
  @keyframes page-in-left { from { opacity: 0; translate: -2.5rem 0; } }
  @keyframes pan-out-left { to { opacity: 0; translate: -30% 0; } }
  @keyframes pan-out-right { to { opacity: 0; translate: 30% 0; } }
  @keyframes pan-in-right { from { opacity: 0; translate: 30% 0; } }
  @keyframes pan-in-left { from { opacity: 0; translate: -30% 0; } }

  @media (prefers-reduced-motion: reduce) {
    @view-transition {
      navigation: none;
    }
  }

  /* ---- Within a page ---- */

  @media (prefers-reduced-motion: no-preference) {
    /* A news item or a meeting grows to its height when it opens, instead
       of jumping, and its text fades in as it does. */
    :root {
      interpolate-size: allow-keywords;
    }

    .news-item::details-content {
      block-size: 0;
      overflow-y: clip;
      transition: block-size 320ms cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 320ms allow-discrete;
    }

    .news-item[open]::details-content {
      block-size: auto;
    }

    .news-item[open] .news-item__content {
      animation: row-open 360ms 80ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
    }

    /* The red line under a heading draws itself as it scrolls into view. */
    @supports (animation-timeline: view()) {
      .front-section__head h2::after {
        transform-origin: left;
        animation: draw-line linear both;
        animation-timeline: view();
        animation-range: entry 10% entry 90%;
      }
    }

    /* While the next page is on its way, a short red stretch runs along
       the horizon, over and over. Without motion the whole line is shown. */
    .is-navigating .site-header__horizon path {
      stroke-dasharray: 0.16 0.84;
      animation: horizon-run 1.6s linear infinite;
    }

    /* The pictograms come alive under the pointer, with a little spring. */
    .group-tile__icon svg {
      transition:
        rotate 420ms linear(0, 0.6 25%, 1.08 50%, 0.98 75%, 1),
        translate 420ms linear(0, 0.6 25%, 1.08 50%, 0.98 75%, 1);
    }

    .group-tile:hover .group-tile__icon svg {
      rotate: -10deg;
      translate: 3px -2px;
    }
  }

  @keyframes horizon-run { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
  @keyframes row-open { from { opacity: 0; translate: 0 -0.5rem; } }
  @keyframes draw-line { from { scale: 0 1; } to { scale: 1 1; } }
}