/* Waiting states for the Motion effects (effects.js) and page transitions.
   Everything here is scoped to html.motion, which is only set when motion is
   allowed and is removed if the effects script does not start. */

@layer motion {
  /* Hero: the photograph opens from a blade of light; the title rises. */
  .motion:not(.vt-in) [data-hero-media] {
    clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);
  }

  .motion [data-hero-fade] {
    opacity: 0;
  }

  .motion [data-split] {
    visibility: hidden;
  }

  .motion [data-split].is-split {
    visibility: visible;
  }

  .line {
    display: block;
    overflow: hidden;
    padding-bottom: 0.08em;
    margin-bottom: -0.08em;
  }

  .line__in {
    display: block;
  }

  /* Images open through the blade when they enter the screen. */
  .motion [data-blade] {
    clip-path: polygon(50% 0%, 50% 0%, 50% 100%, 50% 100%);
  }

  /* Drawings trace themselves. Once tracing starts, effects.js drives the
     stroke-dashoffset attribute, so the CSS value must step aside. */
  .motion [data-dwg] .t {
    stroke-dasharray: 1;
  }

  .motion [data-dwg]:not(.is-tracing) .t {
    stroke-dashoffset: 1;
  }

  .motion [data-dwg] [fill^="url"],
  .motion [data-dwg] .lbl,
  .motion [data-dwg] .stone,
  .motion [data-dwg] .ray,
  .motion [data-dwg] .light {
    opacity: 0;
    transition: opacity 1200ms var(--ease) 600ms;
  }

  .motion [data-dwg].is-drawn [fill^="url"],
  .motion [data-dwg].is-drawn .lbl,
  .motion [data-dwg].is-drawn .stone,
  .motion [data-dwg].is-drawn .ray,
  .motion [data-dwg].is-drawn .light {
    opacity: 1;
  }

  /* Light study: pinned while the sun crosses the room. */
  .motion .study.is-live {
    height: 340vh;
    padding-block: 0;
  }

  .motion .study.is-live .study__sticky {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    min-height: 100svh;
    padding-block: calc(var(--header-h) + var(--space-3)) var(--space-4);
  }

  .motion .study.is-live .study__clock {
    display: block;
  }

  .motion .study.is-live .study__steps {
    position: relative;
    min-height: 7.5rem;
  }

  .motion .study.is-live .study__step {
    position: absolute;
    inset: 0 0 auto;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 500ms var(--ease), transform 500ms var(--ease);
  }

  .motion .study.is-live .study__step.is-on {
    opacity: 1;
    transform: none;
  }

  /* Page transitions: the next page enters through the same blade, quickly.
     The old page only fades: animating two full-page snapshots at once was
     what made the change feel slow on a phone. On a phone the new page simply
     fades in, which the browser can do on the GPU without redrawing. */
  @media (prefers-reduced-motion: no-preference) {
    @view-transition {
      navigation: auto;
    }

    ::view-transition-group(root) {
      animation-duration: 520ms;
    }

    ::view-transition-old(root) {
      animation: vt-out 260ms ease-out both;
    }

    ::view-transition-new(root) {
      animation: vt-blade 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    @keyframes vt-blade {
      from {
        clip-path: polygon(64% 0%, 64% 0%, 36% 100%, 36% 100%);
      }

      to {
        clip-path: polygon(0% 0%, 132% 0%, 100% 100%, -32% 100%);
      }
    }

    @keyframes vt-out {
      to {
        opacity: 0;
      }
    }

    @keyframes vt-in {
      from {
        opacity: 0;
      }
    }

    @media (max-width: 767px) {
      ::view-transition-old(root) {
        animation: vt-out 180ms ease-out both;
      }

      ::view-transition-new(root) {
        animation: vt-in 280ms ease-out both;
      }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      transition-duration: 1ms !important;
      animation-duration: 1ms !important;
    }
  }
}