/* Styles used by case study when doing SPA transition. */

:root {
  --d-assets: 1.63s;
  --d-divider: 2.03s;
  --de-divider: 2.63s;
  --d-headline: 1.68s;
  --de-headline: 2.63s;
  --de-details: 3.47s;
  --o-work-label: 0.2;
  --d-label: 1.33s;
  --d-details: 1.34s;
}

/**
 * Case study transitions
 */

#cs-container {
  display: none;
  height: 100vh;
  left: 0;
  pointer-events: none !important; /* Note: overwrites data-status */
  position: fixed;
  top: 0;
  width: 100vw;
  z-index: 2;
}

#cs-container video {
  bottom: 0;
  height: 100%;
  left: 0;
  object-fit: cover;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
  visibility: visible;
  width: 100%;
}

@media only screen and (min-width: 768px) {
  #cs-container .work-label-item {
    filter: blur(0px) !important;
  }

  #cs-container .work-label-item > span {
    transform: translate(0px, -50px) !important;
  }

  #cs-container .work-label-item > span:nth-child(even) {
    transform: translate(0px, 50px) !important;
  }

  /**
   * Videos (`video`) should match `case-study-image-container-1` values so it
   * overlaps allowing a smooth animation.
   */
  #cs-container video[data-video-label='unreal-engine'] {
    height: calc(398 * 100vw / var(--page-width));
    left: calc(101 * 100vw / var(--page-width));
    opacity: 1;
    overflow: hidden;
    top: 50vh;
    transform: translate(0, calc(-168 * 100vw / var(--page-width)));
    width: calc(620 * 100vw / var(--page-width));
  }

  #cs-container video[data-video-label='brooks-running'] {
    height: calc(378 * 100vw / var(--page-width));
    left: calc(140 * 100vw / var(--page-width));
    opacity: 1;
    overflow: hidden;
    top: 50vh;
    transform: translate(0, calc(-25 * 100vw / var(--page-width)));
    width: calc(567 * 100vw / var(--page-width));
  }

  #cs-container video[data-video-label='twinmotion'] {
    height: calc(560 * 100vw / var(--page-width));
    left: calc(140 * 100vw / var(--page-width));
    opacity: 1;
    overflow: hidden;
    top: 50vh;
    transform: translate(0, calc(-179 * 100vw / var(--page-width)));
    width: calc(293 * 100vw / var(--page-width));
  }

  #cs-container video[data-video-label='sothebys'] {
    height: calc(342 * 100vw / var(--page-width));
    left: calc(209 * 100vw / var(--page-width));
    opacity: 1;
    overflow: hidden;
    top: 50vh;
    transform: translate(0, calc(-383 * 100vw / var(--page-width)));
    width: calc(455 * 100vw / var(--page-width));
  }
}

@keyframes fade-out {
  0% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

/**
 * Small viewport:
 *
 * 1. All elements fade out
 * 2. The video fades in full bleed and plays
 * 3. The video fades in full bleed and plays 3-4 sec
 * 4. The Video fades out
 * 5. The title loads (new page)
 * 6. Rest of info loads in (new page)
 */
@media only screen and (max-width: 767px) {
  [data-transition] #cs-container .cs-content {
    animation-delay: 0s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-name: fade-out;
    animation-timing-function: linear;
    opacity: 1;
  }

  [data-transition] #cs-container video {
    animation-delay: 1s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-name: fade-in;
    animation-timing-function: linear;
    opacity: 0;
  }

  [data-transition] #cs-container {
    animation-delay: 3s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-name: fade-out;
    animation-timing-function: linear;
    opacity: 1;
  }
}

/**
 * Large viewport
 *
 * 1.a Counter fades out
 * 1.b Label fades out
 * 1.c Video fills screen
 * 1.d Other assets exit screen
 */

@keyframes exit-right {
  /* Not specifying initial value to avoid creating a @keyframe for each 
    case study. */

  100% {
    left: 100vw;
  }
}

@keyframes work-label {
  0% {
    opacity: var(--o-work-label);
  }

  100% {
    opacity: 0;
  }
}

@keyframes main-asset {
  /* Not specifying initial value to avoid creating a @keyframe for each 
    case study. */

  57% {
    height: 100vh;
    left: 0;
    opacity: 1;
    top: 0;
    transform: translate(0, 0);
    width: 100vw;
  }

  100% {
    height: 100vh;
    left: 0;
    opacity: 0;
    top: 0;
    transform: translate(0, 0);
    width: 100vw;
  }
}

@keyframes title-label-position {
  /* Not specifying initial value to reduce code size since setting an
    initial value would require an animation per element. */

  100% {
    left: 0;
    top: 0;
    transform: translate(
      calc(140 * 100vw / var(--page-width)),
      calc(246 * 100vw / var(--page-width))
    );
  }
}

@keyframes title-headline-reset {
  /* Not specifying initial value to reduce code size since setting an
    initial value would require an animation per element. */

  100% {
    transform: translate(0, 0);
  }
}

@keyframes title-subheadline-reset {
  /* Not specifying initial value to reduce code size since setting an
    initial value would require an animation per element. */

  100% {
    transform: translate(0, calc(49 * 100vw / var(--page-width)));
  }
}

@keyframes title-color-light-to-dark {
  0% {
    color: #fff;
  }

  100% {
    color: #000;
  }
}

@keyframes scale-up {
  0% {
    height: 100%;
    left: 0;
    opacity: 0;
    top: 0;
    transform: none;
    width: 100%;
  }

  100% {
    height: 100%;
    left: 0;
    opacity: 1;
    top: 0;
    transform: none;
    width: 100%;
  }
}

@keyframes divider {
  0% {
    width: 0;
  }

  100% {
    width: 100%;
  }
}

@media only screen and (min-width: 768px) {
  [data-transition] #cs-container {
    background-color: transparent !important;
    transition: background-color 0s 2s;
  }

  [data-transition] #cs-container .work-case-study-headline {
    animation-delay: var(--de-headline);
    animation-duration: var(--d-headline);
    animation-fill-mode: forwards;
    animation-name: title-label-position;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
    pointer-events: none;
  }

  [data-transition='brooks-running'] #cs-container .work-case-study-headline {
    animation-delay: 0s, var(--de-headline);
    animation-duration: 1s, var(--d-headline);
    animation-fill-mode: forwards, forwards;
    animation-name: title-color-light-to-dark, title-label-position;
    animation-timing-function: linear, cubic-bezier(0.65, 0, 0.35, 1);
    color: #fff;
  }

  [data-transition] #cs-container [data-case-study='sothebys'] .headline-1,
  [data-transition] #cs-container .headline-2,
  [data-transition] #cs-container .headline-3,
  [data-transition] #cs-container .subheadline {
    animation-delay: var(--de-headline);
    animation-duration: var(--d-headline);
    animation-fill-mode: forwards;
    animation-name: title-headline-reset;
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }

  [data-transition] #cs-container .subheadline {
    animation-name: title-subheadline-reset;
  }

  [data-transition] #cs-container .case-study-image-container-2,
  [data-transition] #cs-container .case-study-image-container-3,
  [data-transition] #cs-container .case-study-image-container-4,
  [data-transition] #cs-container .case-study-image-container-5 {
    animation-duration: var(--d-assets);
    animation-fill-mode: forwards;
    animation-name: exit-right;
    animation-timing-function: cubic-bezier(0.2, 0.7, 0.5, 1);
  }

  [data-transition] #cs-container .work-label {
    animation-duration: var(--d-assets);
    animation-fill-mode: forwards;
    animation-name: work-label;
    animation-timing-function: ease-out;
  }

  [data-transition] #cs-container .case-study-counters {
    animation-delay: 0s;
    animation-duration: var(--d-label);
    animation-fill-mode: forwards;
    animation-name: fade-out;
    animation-timing-function: linear;
    opacity: 1;
  }

  /* Video displayed instead of container-1 */
  [data-transition] #cs-container .case-study-image-container-1 {
    display: none;
  }

  [data-transition] #cs-container video {
    animation-duration: 3.77s; /* 1.63 + 2.14 */
    animation-fill-mode: forwards;
    animation-name: main-asset;
    animation-timing-function: cubic-bezier(0, 0.8, 0.5, 1);
  }

  /* TODO: see if animating the background adds value or display none is fine */
  [data-transition] #cs-container .case-study-image-container-bg {
    animation-delay: 1.66s;
    animation-duration: 0s;
    animation-fill-mode: forwards;
    animation-name: fade-out;
    animation-timing-function: linear;
    opacity: 1;
  }

  /**
   * Element on case study page.
   * use [data-transition='[case label]'] for specific case study rules.
   */

  .case-study-header .header-asset {
    opacity: 0;
    transition: opacity 1s 3s ease-out;
  }

  [data-transition='brooks-running'] .case-study-header .header-asset {
    opacity: 1;
  }

  [data-transition] .case-study-header::after {
    animation-delay: var(--de-divider);
    animation-duration: var(--d-divider);
    animation-fill-mode: forwards;
    animation-name: divider;
    animation-timing-function: ease-out;
    opacity: 1;
    width: 0;
  }

  [data-transition] .case-study-header .t4,
  [data-transition] .case-study-header .h1,
  [data-transition] .case-study-header .t2 {
    animation-delay: 4.31s;
    animation-duration: 0s;
    animation-fill-mode: forwards;
    animation-name: fade-in;
    animation-timing-function: linear;
    opacity: 0;
  }

  [data-transition] .case-study-header .case-study-headline-summary .t1,
  [data-transition] .case-study-header .case-study-headline-summary .t3,
  [data-transition] .case-study-header .p-container-01,
  [data-transition] .case-study-header .p-container-02,
  [data-transition] .case-study-header .header-video,
  [data-transition='sothebys'] .sothebys-results-awards-text-details {
    animation-delay: var(--de-details);
    animation-duration: var(--d-details);
    animation-fill-mode: forwards;
    animation-name: fade-in;
    animation-timing-function: ease-out;
    opacity: 0;
  }

  [data-transition] .case-study-header .case-study-headline-summary .t3 {
    animation-delay: 3.57s;
  }

  [data-transition]
    .case-study-header
    .case-study-headline-summary
    .t3
    + [data-transition]
    .case-study-header
    .case-study-headline-summary
    .t3,
  [data-transition='sothebys'] .sothebys-results-awards-text-details {
    animation-delay: 3.57s;
  }

  [data-transition='brooks-running'] .case-study-details {
    background-color: #fff;
  }

  [data-transition='twinmotion'] .case-study-details {
    background-color: #0b0e0f;
  }

  [data-transition] .case-study-details > * {
    animation-delay: 4s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-name: fade-in;
    animation-timing-function: linear;
    opacity: 0;
  }

  /* Twinmotion details section handles background differently from other case
     studies requiring a custom overwrite on how to display items in this
     section. */
  [data-transition='twinmotion'] .case-study-details > * {
    animation-name: none;
    opacity: 1;
  }

  [data-transition='twinmotion']
    .case-study-details
    .case-study-details-home
    > * {
    animation-delay: 4s;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    animation-name: fade-in;
    animation-timing-function: linear;
    opacity: 0;
  }
}