@import 'view-transition.css';
@import 'scroll-driven-animations.css';

* {
  box-sizing: border-box;
  margin: 0;
}

/* Variables: */
:root {
  --accent-color: firebrick;
  --color: #fff;
  --background: var(--accent-color);
  --padding: clamp(0.75rem, 1.6vw, 1.5rem);
  --padding-small: 0.5rem;
  --design-size: 1440;
  --ease: cubic-bezier(0.45, 0, 0.55, 1);
}

body {
  padding: 0;
  font-family: 'Source Code Pro', monospace;
  background-color: var(--background);
  color: var(--color);
}

/* Typography: */
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
button {
  text-wrap: pretty;
  letter-spacing: -0.04em;
}

a,
button {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

.xlarge-heading {
  font-size: clamp(2rem, calc(96 / var(--design-size) * 100vw), 8rem);
  font-weight: 400;
  font-variation-settings:
    'wght' 400;
  line-height: 1.1;
}

.large-heading {
  font-size: clamp(1.1rem, calc(60 / var(--design-size) * 100vw), 5rem);
  font-weight: 400;
  font-variation-settings:
    'wght' 350;
  line-height: 1.1;
}

.medium-heading {
  font-size: clamp(1.5rem, calc(32 / var(--design-size) * 100vw), 2.7rem);
  font-weight: 400;
  font-variation-settings:
    'wght' 350;
  line-height: 1.1;
}

.large-body {
  font-size: clamp(1.2rem, calc(24 / var(--design-size) * 100vw), 2rem);
  font-weight: 400;
  font-variation-settings:
    'wght' 350;
  line-height: 1.1;
}

.medium-body {
  font-size: clamp(1.1rem, calc(18 / var(--design-size) * 100vw), 1.5rem);
  font-weight: 400;
  font-variation-settings:
    'wght' 350;
  line-height: 1.5;
}

.small-body {
  font-size: clamp(0.8rem, calc(16 / var(--design-size) * 100vw), 1.33rem);
  font-weight: 400;
  font-variation-settings:
    'wght' 350;
  line-height: 1.5;
}

p+p {
  margin-top: 1em;
}

/* Utility classes: */
.sr-only {
  position: absolute;
  white-space: nowrap;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  /* for IE only */
  clip-path: inset(50%);
}

.speakers {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--padding);
  overflow: clip;

  padding: var(--padding-small);
  width: 100%;

  @media (max-width: 1280px) {
    gap: var(--padding);
  }

  @media (max-width: 1024px) {
    position: relative;
    padding: 0;
  }
}

.speakers-left {
  position: sticky;
  z-index: 10;
  top: var(--padding-small);
  min-height: calc(100svh - var(--padding-small) * 2);
  padding: var(--padding);

  @media (max-width: 1024px) {
    pointer-events: none;
    position: fixed;
    inset: 0;
  }

  .date {
    width: max-content;
    max-width: 100%;
  }

  .speaker-info {

    width: 20%;
    flex-grow: 1;

    @media (max-width: 1024px) {
      width: 100%;
    }
  }
}

.large-titles {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 80vw;
  padding: var(--padding) var(--padding) calc(var(--padding) * 2);
  pointer-events: none;

  @media (max-width: 1024px) {
    width: 100%;
  }

  .title {
    padding-bottom: 1rem;
  }

  .talk-title {
    padding-bottom: 1rem;
  }
}

.speakers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--padding-small);
  width: 50vw;
  view-timeline-name: --speakers-grid;

  @media (max-width: 1024px) {
    padding: var(--padding-small);
  }

  @media (max-width: 1024px) {
    width: 100%;
  }

  &:has(.speaker-card:hover) {
    .speaker-card img {
      opacity: 0.5;
    }
  }

}

.column {
  display: flex;
  flex-direction: column;
  gap: var(--padding-small);
  /* I tried using sibling index but it didn't work 🤷🏻‍♀️: */
  --column-delay: 0.1s;
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: --speakers-grid) {
      &:nth-child(2) {
        position: sticky;
        animation-timeline: --speakers-grid;
        animation-name: parallax;
        animation-range: entry 100lvh cover calc(100% - 100lvh);
        animation-fill-mode: both;
        --column-delay: 0.2s;
      }
      &:nth-child(3) {
        --column-delay: 0.3s;
      }
    }
  }
}

.speaker-card {
  position: relative;
  transition: opacity 0.4s ease-out;
  overflow: clip;

  @media (prefers-reduced-motion: no-preference) {
    --stagger: calc(sibling-index() * .05s);
    transition: transform 0.4s var(--ease), opacity 0.4s var(--ease);
    transition-delay: calc(var(--stagger) + var(--column-delay));

    @starting-style {
      transform: translateY(4vw);
      opacity: 0;
      pointer-events: none;
    }
  }

  &:hover {
    img {
      opacity: 1 !important;
    }
  }

  img {
    display: block;
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover;
    transition: opacity 0.4s var(--ease);
  }

  a {
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
}

@keyframes scale-opacity-in {

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes parallax {
  from {
    transform: translateY(0);
  }

  to {
    transform: translateY(calc(100% / 6));
  }
}


.speaker-header {
  display: flex;
  flex-wrap: wrap;
  padding: var(--padding-small);
  width: 100%;

  @media (max-width: 1024px) {
    grid-template-columns: 1fr;
    padding: 0;
  }

  .speaker-header-info {
    position: sticky;
    top: var(--padding-small);
    z-index: 1;

    height: calc(100svh - var(--padding-small) * 2);
    width: 50%;
    padding: var(--padding);

    @media (max-width: 1024px) {
      width: 100%;
      height: auto;
      display: flex;
      flex-direction: column-reverse;
    }

    .speaker-info {
      max-width: 800px;
      margin-top: 2em;

      @media (max-width: 1024px) {
        order: -1;
      }

      >*+* {
        margin-top: 0.75em;
      }
    }

  }

  .speaker-header-text {
    z-index: 1;
    padding: var(--padding) var(--padding) calc(var(--padding) * 2 - var(--padding-small));

    @media (max-width: 1024px) {
      position: relative;
      padding: 0;
    }

    .title {
      view-transition-name: title;
      padding-bottom: 1rem;
    }

    .talk-title {
      view-transition-name: talk-title;
      padding-bottom: 1rem;
    }
  }

  .speaker-header-image {
    width: 50%;
    height: auto;


    img {
      display: block;
      width: 100%;
      object-fit: cover;
      aspect-ratio: 3/4;
    }

    @media (max-width: 1024px) {
      order: -1;
      width: 100%;
      height: unset;
      padding: var(--padding-small);

      img {
        aspect-ratio: 1;
      }
    }
  }
}

pre {
  @media (max-width: 1024px) {
    overflow-x: auto;
  }
}



.info-trigger {
  width: max-content;
  background-color: var(--color);
  color: var(--background);
  border: none;
  border-radius: 0.5rem 0.5rem 0 0;
  padding: 0.5rem 1rem 5rem;
  
  transition: transform 0.3s ease;
  cursor: grab;
  transform: translateY(4.5rem);
  view-transition-name: dialog-trigger;

  &:hover {
    transform: translateY(4rem);
  }
}

html.grabbing {
  cursor: grabbing;
  user-select: none;
}
dialog {
  position: fixed;
  bottom: 0;
  z-index: 11;
  view-transition-name: dialog;
  
  width: 100%;
  height: max-content;
  max-width: unset;
  max-height: unset;
  transform: translateY(calc(100% - 6.7em));
  padding: 0;
  background: none;
  border: none;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  align-self: end;
  &::backdrop {
    background-color: rgba(0, 0, 0, 0.5);
  }

  &[open] {
    transform: translateY(0);
  }
  section {
    position: relative;
    z-index: 1;
    padding: var(--padding);
    background-color: var(--color);
    color: var(--background);
    > * {
      max-width: 500px;
    }
  }
}