.clock-layout {
  --event-handoff-progress: 0;
}

.clock-stories {
  background: #0d1011;
}

.clock-phase-track,
.clock-handoff {
  display: none;
}

.has-js .clock-layout.is-clock-ready .clock-story-stage {
  position: sticky;
  top: var(--header-height);
  height: calc(100svh - var(--header-height));
  overflow: hidden;
}

.has-js .clock-layout.is-clock-ready .clock-story {
  position: absolute;
  inset: 0;
  height: 100%;
  min-height: 0;
  border-top: 0;
  border-bottom: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(24px);
  visibility: hidden;
  transition:
    opacity 440ms ease,
    transform 680ms var(--ease),
    visibility 0s linear 680ms;
}

.has-js .clock-layout.is-clock-ready .clock-story.is-current {
  z-index: 10;
  opacity: calc(1 - var(--event-handoff-progress) * 0.55);
  pointer-events: auto;
  transform: translateY(0);
  visibility: visible;
  transition:
    opacity 520ms ease,
    transform 760ms var(--ease),
    visibility 0s;
}

.clock-room {
  transform: scale(calc(1 - var(--event-handoff-progress) * 0.018));
  transform-origin: center;
}

.clock-room::after {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: #080a0b;
  content: "";
  opacity: calc(var(--event-handoff-progress) * 0.46);
  pointer-events: none;
}

.clock-room {
  transition: transform 700ms var(--ease);
}

.has-js .clock-layout.is-clock-ready .clock-phase-track {
  display: block;
  height: calc(2 * (100svh - var(--header-height)));
}

.has-js .clock-layout.is-clock-ready .clock-handoff {
  display: block;
  height: clamp(120px, 18svh, 200px);
  background: linear-gradient(180deg, #0d1011, #080a0b);
}

.selected-work {
  background: #080a0b;
}

.has-js .selected-work {
  padding-top: clamp(38px, 5vw, 72px);
}

.has-js .selected-work .case-stage {
  position: relative;
  opacity: 0;
  transform: translate3d(0, 58px, 0) scale(0.986);
  transform-origin: center top;
  transition:
    opacity 620ms ease,
    transform 1250ms var(--ease);
  will-change: opacity, transform;
}

.has-js .selected-work .case-scene::before {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: #080a0b;
  content: "";
  pointer-events: none;
  transform: scaleX(1);
  transform-origin: right center;
  transition: transform 1450ms var(--ease) 90ms;
  will-change: transform;
}

.has-js .selected-work .case-scene img {
  transform: scale(1.065);
  transition: transform 1800ms var(--ease) 80ms;
  will-change: transform;
}

.has-js .selected-work .case-overview {
  opacity: 0;
  transform: translate3d(0, 30px, 0);
  transition:
    opacity 760ms ease 320ms,
    transform 1080ms var(--ease) 320ms;
  will-change: opacity, transform;
}

.has-js .selected-work .case-scene figcaption,
.has-js .selected-work .case-sequence {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 620ms ease 430ms,
    transform 900ms var(--ease) 430ms;
  will-change: opacity, transform;
}

.has-js .selected-work.is-revealed .case-stage {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}

.has-js .selected-work.is-revealed .case-scene::before {
  transform: scaleX(0);
}

.has-js .selected-work.is-revealed .case-scene img {
  transform: scale(1.02);
}

.has-js .selected-work.is-revealed .case-overview,
.has-js .selected-work.is-revealed .case-scene figcaption,
.has-js .selected-work.is-revealed .case-sequence {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

@media (max-width: 820px) {
  .has-js .clock-layout.is-clock-ready .clock-story-stage {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }

  .has-js .clock-layout.is-clock-ready .clock-story,
  .has-js .clock-layout.is-clock-ready .clock-story.is-current {
    position: relative;
    inset: auto;
    height: auto;
    opacity: 1;
    pointer-events: auto;
    transform: none;
    visibility: visible;
  }

  .has-js .clock-layout.is-clock-ready .clock-phase-track,
  .has-js .clock-layout.is-clock-ready .clock-handoff {
    display: none;
  }

  .has-js .selected-work .case-stage,
  .has-js .selected-work.is-revealed .case-stage {
    opacity: 1;
    transform: none;
  }

  .has-js .selected-work .case-scene::before {
    transform: scaleX(0);
  }

  .has-js .selected-work .case-scene img,
  .has-js .selected-work.is-revealed .case-scene img {
    transform: scale(1.02);
  }

  .has-js .selected-work .case-overview,
  .has-js .selected-work .case-scene figcaption,
  .has-js .selected-work .case-sequence {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .has-js .clock-layout.is-clock-ready .clock-story-stage {
    position: relative;
    top: auto;
    height: auto;
    overflow: visible;
  }

  .has-js .clock-layout.is-clock-ready .clock-story,
  .has-js .clock-layout.is-clock-ready .clock-story.is-current {
    position: relative;
    inset: auto;
    height: auto;
    opacity: 1;
    transform: none;
    visibility: visible;
  }

  .has-js .clock-layout.is-clock-ready .clock-phase-track,
  .has-js .clock-layout.is-clock-ready .clock-handoff {
    display: none;
  }

  .clock-room,
  .clock-story,
  .has-js .selected-work .case-stage,
  .has-js .selected-work .case-scene::before,
  .has-js .selected-work .case-scene img,
  .has-js .selected-work .case-overview,
  .has-js .selected-work .case-scene figcaption,
  .has-js .selected-work .case-sequence {
    transition: none;
  }

  .has-js .selected-work .case-stage,
  .has-js .selected-work .case-overview,
  .has-js .selected-work .case-scene figcaption,
  .has-js .selected-work .case-sequence {
    opacity: 1;
    transform: none;
  }

  .has-js .selected-work .case-scene::before {
    transform: scaleX(0);
  }
}