:root {
  --ease: cubic-bezier(0.12, 0, 0.39, 0);
  --ease-out: cubic-bezier(0.61, 1, 0.88, 1);
  --elastic-ease: cubic-bezier(0.34, 1.56, 0.64, 1),

}

html::view-transition-group(*),
html::view-transition-old(*),
html::view-transition-new(*) {
  animation-fill-mode: both !important;
  animation-timing-function: var(--ease);
}

/* 1. setting view-transition names if user has no preference for reduced motion */
@media (prefers-reduced-motion: no-preference) {
  [style*='--vt'] {
    view-transition-name: var(--vt);
  }

  /* 2. set view-transition-names and class for title and talk title */
  .title {
    view-transition-name: title;
  }

  .talk-title {
    view-transition-name: talk-title;
  }

  .large-titles .title,
  .large-titles .talk-title {
    view-transition-class: text-animation;
  }


  /* 3. speaker cards stuff: */
  .speaker-card,
  .speaker-header-image img {
    view-transition-class: speaker-card;
  }

  /* 4. code string stuff: */
  .date {
    @media (min-width: 1025px) {
      [style*='--vt'] {
        view-transition-class: code-prop-value;
      }
    }

    [style*='--vt: code-semicolon'],
    [style*='--vt: code-colon'],
    [style*='--vt: code-open-bracket'] {
      view-transition-class: code-character;
    }
  }

}

/* 1. We're setting a mask on the group using mask-image */
&::view-transition-group(.text-animation) {
  mask-image: linear-gradient(to bottom, transparent, black 15%, black calc(100% - 15%), transparent);
}

/* 2. We're setting some defaults for the animation */
&::view-transition-old(.text-animation),
&::view-transition-new(.text-animation) {
  animation-duration: 0.3s;
}

/* 3. The new item needs to animate from bottom in */
&::view-transition-new(.text-animation) {
  animation-name: bottom-in;
}

/* 4. The old item needs to animate to top out */
&::view-transition-old(.text-animation) {
  animation-name: top-out;
}

/* we're creating styles that are only active when the view transition type is title-animation */
html:active-view-transition-type(title-animation) {

  /* 5. By default the view transition pseudo element causes the page to be unclickable, for this specific transition we want to keep it clickable */
  &::view-transition {
    pointer-events: none;
  }

  /* 6. We need to disable the root view transitions and all the other view transitions on the page to make the page remain responsive */
  &:root,
  [style*='--vt'] {
    view-transition-name: none !important;
  }
}

@keyframes bottom-in {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@keyframes top-out {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(-100%);
  }
}

/* 1. set view transition @rule so page transitions can be animated */
@view-transition {
  navigation: auto;
}



/* 1. styles only active when view transition type is overview-to-speaker or speaker-to-overview */
html:active-view-transition-type(overview-to-speaker),
html:active-view-transition-type(speaker-to-overview) {

  /* 2. setting defaults for speaker card group */
  &::view-transition-group(.speaker-card) {
    animation-duration: 0.6s;
  }

  &::view-transition-old(.speaker-card),
  &::view-transition-new(.speaker-card) {
    animation: none;
  }

  /* 3. when the old speaker card is an only child it means it wasn't clicked, so we need to animate them out */
  &::view-transition-old(.speaker-card):only-child {
    animation-name: scale-out;
    animation-duration: 0.3s;
    animation-delay: calc(var(--index) * 0.03s);
  }

  /* 4. when the new speaker card is an only child it means it wasn't active on the previous page, so we need to animate them in */
  &::view-transition-new(.speaker-card):only-child {
    animation-name: scale-in;
    animation-duration: 0.3s;
    animation-delay: calc(var(--index) * 0.03s + 0.35s);
  }

  /* 5. setting defaults and delays for text animation group */
  &::view-transition-group(.text-animation) {
    animation-delay: 0.3s;
  }

  /* CODE */
  /* transform animation to 0s with a delay of 0.4s */
  &::view-transition-group(.code-prop-value) {
    animation-delay: calc(var(--delay) + 0.4s);
    animation-duration: 0s;
  }

  /* Very quickly animate the punctiation marks: */
  &::view-transition-group(.code-character) {
    animation-delay: calc(var(--delay) + 0.4s);
    animation-duration: 0.05s;
  }


  /* Thanks Jake! 🙏 https://jakearchibald.com/2024/view-transitions-handling-aspect-ratio-changes/ */
  &::view-transition-old(.code-prop-value),
  &::view-transition-new(.code-prop-value) {
    height: 100%;
    object-fit: none;
    overflow: clip;
    object-position: left;
    animation-duration: 0.4s;
  }

  &::view-transition-new(.code-prop-value) {
    animation-name: clip-to-right;
    animation-delay: calc(var(--delay) + 0.4s);
  }

  &::view-transition-old(.code-prop-value) {
    animation-name: clip-from-right;
    animation-delay: var(--delay);
  }

}

/* exceptions for overview-to-speaker */
html:active-view-transition-type(overview-to-speaker) {
  &::view-transition-group(.speaker-card) {
    animation-duration: 0.6s;
    animation-delay: calc(var(--index) * 0.05s + 0.1s);
  }

  &::view-transition-old(.text-animation),
  &::view-transition-new(.text-animation) {
    animation: none;
  }
}

/* exceptions for speaker-to-overview */
html:active-view-transition-type(speaker-to-overview) {
  --ease: var(--ease-out);
}

html:active-view-transition-type(dialog-drag) {
  [style*='--vt'],
  .title,
  .talk-title {
    view-transition-name: none !important;
  }

  &::view-transition-group(dialog) {
    z-index: 1;
    animation-timing-function: var(--elastic-ease);
    animation-name: -ua-view-transition-group-anim-dialog, elastic-scale;
  }

  &::view-transition-group(dialog-trigger) {
    animation-timing-function: var(--elastic-ease);
  }

  &::view-transition-old(dialog-trigger) {
    display: none;
  }

  &::view-transition-new(dialog-trigger) {
    animation-name: elastic-feel-open;
    animation-duration: 0.3s;
  }
}

html:active-view-transition-type(dialog-closing) {
  &::view-transition-new(dialog-trigger) {
    animation-name: elastic-feel-close;
    animation-duration: 0.3s;
  }
}

@keyframes elastic-scale {
  70% {
    scale: 1.1 1;
  }

  100% {
    scale: 1 1;
  }
}

@keyframes elastic-feel-open {
  70% {
    transform: translateY(-1rem);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes elastic-feel-close {
  70% {
    transform: translateY(0.5rem);
  }

  100% {
    transform: translateY(0);
  }
}

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

@keyframes scale-in {
  from {
    scale: 0;
  }

  to {
    scale: 1;
    opacity: 1;
  }
}

@keyframes clip-to-right {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes clip-from-right {
  from {
    clip-path: inset(0 0 0 0);
  }

  to {
    clip-path: inset(0 100% 0 0);
  }
}






/* The nasty stuff 🤡 */
/* Would love to be able to do this with sibling index somehow 😎 */
::view-transition-group(stephen-hay) {
  --index: 0;
}

::view-transition-group(rachel-andrew) {
  --index: 1;
}

::view-transition-group(ahmad-shadeed) {
  --index: 2;
}

::view-transition-group(adam-argyle) {
  --index: 3;
}

::view-transition-group(brad-frost) {
  --index: 4;
}

::view-transition-group(tim-nguyen) {
  --index: 5;
}

::view-transition-group(john-allsopp) {
  --index: 6;
}

::view-transition-group(ian-frost) {
  --index: 7;
}

::view-transition-group(amit-sheen) {
  --index: 8;
}

::view-transition-group(miriam-suzanne) {
  --index: 9;
}

::view-transition-group(bramus-van-damme) {
  --index: 10;
}

::view-transition-group(ana-rodrigues) {
  --index: 11;
}

::view-transition-group(cyd-stumpel) {
  --index: 12;
}

::view-transition-group(chris-coyier) {
  --index: 13;
}

::view-transition-group(hidde-de-vries) {
  --index: 14;
}

::view-transition-group(brecht-de-ruyte) {
  --index: 15;
}

::view-transition-group(bruce-lawson) {
  --index: 16;
}

/* More nasty stuff: 🤡 */

&::view-transition-group(code-class),
&::view-transition-group(code-open-bracket) {
  --delay: 0.05s;
}

&::view-transition-group(code-property-1),
&::view-transition-group(code-value-1),
&::view-transition-group(code-colon-1),
&::view-transition-group(code-semicolon-1) {
  --delay: 0.05s;
}

&::view-transition-group(code-property-2),
&::view-transition-group(code-value-2),
&::view-transition-group(code-colon-2),
&::view-transition-group(code-semicolon-2) {
  --delay: 0.1s;
}

&::view-transition-group(code-property-3),
&::view-transition-group(code-value-3),
&::view-transition-group(code-colon-3),
&::view-transition-group(code-semicolon-3) {
  --delay: 0.15s;
}