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

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

:root {
  --accent-color: #119594;
  --color: #111;
  --background: #fff;
  --padding: clamp(0.75rem, 1.6vw, 1.5rem);
  --design-size: 1440;
  --oof-bezier: cubic-bezier(0.7, 0, 0.3, 1);
}

body {
  padding: 0;
  font-family: 'Mona Sans', sans-serif;
}

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: max(1.5rem, calc(72 / var(--design-size) * 100vw));
  font-weight: 400;
  font-variation-settings:
    'wght' 350,
    'wdth' 100;
  line-height: 1.1;
}

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

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

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

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

/* HEADER */

.header {
  min-height: 300svh;
  background-color: var(--accent-color);
  color: var(--background);
  overflow: clip;
  --scroll-height: 200svh;
  /* actual height - viewport height */

  &:has(.navigation.is-active) {
    .top .left {
      opacity: 0.1;
    }
  }

  span:has(svg) {
    width: auto;
    height: 1em;
    display: inline-block;
    vertical-align: middle;

    svg {
      width: auto;
      height: 100%;
    }
  }

  &.header--locations {
    background-color: var(--background);
    color: var(--accent-color);

    .text {
      color: var(--accent-color);
      align-self: start;
      padding-top: 1vh;
    }

    .media {
      grid-row: 2 / 4;
    }

    .bottom {
      display: flex;
      mask-image: linear-gradient(to right,
          transparent 0,
          black 0,
          black 80vw,
          transparent);

      .text-slider {
        display: flex;
        width: max-content;
        gap: 1rem;

        .slide-title {
          width: 80vw;
          white-space: nowrap;
          margin: 0;
        }
      }
    }

    nav {
      transform: translateY(-1lh);
    }

    button {
      translate: 0 0.85lh;
    }
  }

  &.header--speaker {
    background-color: var(--background-color);
    height: 200svh;
    transition: background-color 0.5s ease-in-out;
    --scroll-height: 100svh;

    /* actual height - viewport height */
    &:has(.next-speaker:hover) {
      background-color: var(--next-speaker-color);
    }

    &:has(.prev-speaker:hover) {
      background-color: var(--prev-speaker-color);
    }

    .inner {
      max-height: 100svh;
      grid-template-rows:
        auto 20svh 20svh 25svh auto;
    }

    .media {
      display: block;

      @media (max-width: 750px) {
        grid-column: 2 / -2;
      }

      .prev-speaker,
      .next-speaker,
      .speaker-image {
        margin: auto;
        width: unset;
        max-height: 100%;
        aspect-ratio: 3/4;
        rotate: var(--rotate);
      }
    }

    .navigation {
      &.is-active {
        transform: translateX(min(-6rem, calc(-150 / var(--design-size) * 100vw)));
      }

      p {
        width: max(110px, 30vw);
        white-space: nowrap;
      }
    }


    .prev-speaker,
    .next-speaker {
      grid-column: span 4;
      position: absolute;
      top: 0;
      left: -30svh;
      width: 100%;
      height: 100%;
      z-index: 1;
      scale: 0.7;
      transition: translate 0.5s ease-out;

      @media (max-width: 750px) {
        left: -40svh;
        scale: 0.5;
      }
    }

    .next-speaker {
      left: unset;
      right: -30svh;

      @media (max-width: 750px) {
        right: -40svh;
      }
    }

    .next-speaker {
      --rotate: 2deg;

      &:hover {
        translate: -2em 0;
      }
    }

    .prev-speaker {
      --rotate: -2deg;

      &:hover {
        translate: 2em 0;
      }
    }

  }

  .inner {
    position: sticky;
    top: 0;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows:
      auto max(0.25rem, calc(48 / var(--design-size) * 100vw)) 1fr max(0.25rem, calc(48 / var(--design-size) * 100vw)) auto;

    @media (max-width: 1024px) {
      grid-template-rows: auto 0.25rem 1fr 1rem auto;
    }

    height: 100svh;
    padding: var(--padding);
    gap: var(--padding);
  }

  .top,
  .bottom {
    grid-column: 1 / -1;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
  }

  .top {
    grid-row: 1 / 3;

    h1+a {
      display: block;
      margin-top: 0.4em;
    }

    .left {
      transition: opacity 0.5s ease-in-out;
    }
  }

  .bottom {
    grid-row: 4 / 6;
    display: grid;
    grid-template-columns: subgrid;
    gap: var(--padding);
    align-items: last baseline;

    .left {
      grid-column: 1 / 8;
      flex-shrink: 0;
    }

    .right {
      text-wrap: balance;
      grid-column: 8 / span 5;
      text-align: right;
    }
  }

  .media {
    grid-column: 1 / -1;
    grid-row: 2 / 5;
    gap: var(--padding);
    display: grid;
    grid-template-columns: subgrid;

    .img,
    .speaker-image {
      position: relative;
      grid-column: 4 / span 6;

      aspect-ratio: 5/3;

      grid-row: 1 / -1;

      @media (max-width: 1024px) {
        grid-column: 2 / -2;
      }
    }

    img {
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .text {
    grid-column: 4 / span 6;
    grid-row: 3 / 5;
    text-align: center;
    align-self: center;

    @media (max-width: 750px) {
      grid-column: 1 / -1;
    }
  }

  .navigation {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: baseline;
    gap: 1rem;
    margin-right: min(-2rem, calc(-50 / var(--design-size) * 100vw));
    transition: transform 0.5s ease-in-out;

    &:has(button:hover) {
      li {
        transform: translateX(calc(100% - (var(--total-items) - var(--index)) * 15%));
        --delay: calc(var(--index) * 0.1s);
        transition:
          transform 0.5s ease-in-out var(--delay),
          opacity 0.5s ease-in-out var(--delay);
      }
    }

    &.is-active {
      transform: translateX(min(-2rem, calc(-50 / var(--design-size) * 100vw)));

      li {
        transform: translateX(0) !important;
        --delay: calc(var(--index) * 0.1s);
        transition:
          transform 0.5s ease-in-out var(--delay),
          opacity 0.5s ease-in-out var(--delay);
      }
    }

    &.is-active button {
      transform: rotate(45deg) !important;
    }

    button {
      background: none;
      border: none;
      color: inherit;
      font-size: inherit;
      font-family: inherit;
      padding: 0;
      cursor: pointer;
      transition: transform 0.5s ease-in-out;
      view-transition-name: nav-button;

      &:hover {
        transform: rotate(5deg);
      }
    }

    a {
      text-decoration-thickness: 0.06em;
      text-underline-offset: 0.08em;
    }

    ul {
      list-style-type: '';
      padding: 0;

      li {
        transform: translateX(100%);
        opacity: 0.7;
        --delay: calc(var(--total-items) * 0.1s - var(--index) * 0.1s);
        transition:
          transform 0.5s ease-in-out var(--delay),
          opacity 0.5s ease-in-out var(--delay);

        &.show {
          transform: translateX(0);
          opacity: 0.2;
        }
      }
    }

    sup {
      display: inline-flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      font-size: 0.25em;
      letter-spacing: 0;
      margin-left: -1em;
      transform: translateY(-0.5em);
      background-color: var(--background);
      color: var(--accent-color);
      height: 1.2em;
      aspect-ratio: 1 / 1;
      font-variation-settings:
        'wght' 500,
        'wdth' 100;
    }
  }
}

/* ================================ */
/* SPEAKERS */
/* ================================ */

.speakers {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--padding);
  padding: var(--padding);

  .speaker-card {
    grid-column: span 3;

    @media (max-width: 1024px) {
      grid-column: span 6;
    }
  }
}

.speaker-card {
  position: relative;

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

  a {
    text-decoration: none;

    &::before {
      content: '';
      position: absolute;
      inset: 0;
    }
  }
}




.speaker-detail {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--padding);
  padding: var(--padding);

  .speaker-info {
    grid-column: 4 / span 5;
  }

  h2,
  h3 {
    &+* {
      margin-top: 0.25em;
    }
  }

  .speaker-bio {
    line-height: 1.5;
    margin-top: 1em;
  }

  .speaker-links {
    margin-top: 1em;
  }
}


.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%);
}