@import "tailwindcss/theme";
@import "../variables/theme.css";

.timeline {
  @apply relative text-white;

  background: #222 url("../../images/bg-timeline-sm.png") 0 0 /100% 100%
    no-repeat;
  box-shadow: 0 2px 0 0 #222;
  will-change: scroll-position;

  @variant lg {
    @apply sticky top-0 h-dvh overflow-hidden;

    /* min-height: 600px; */
    background-image: url("../../images/bg-timeline-lg.png");
  }
}

&:has(.header) .timeline {
  @variant lg {
    top: 120px;
    height: calc(100dvh - 120px);
  }
}

&:has(.pageSectionNavigation--slideUp) .timeline {
  @variant lg {
    top: 58px;
    height: calc(100dvh - 58px);
  }
}

.timeline-scrollContainer {
  @apply touch-pan-y will-change-contents;

  padding-block: var(--spacing-80);

  @variant md {
    padding-top: var(--spacing-120);
    padding-bottom: var(--spacing-96);
  }

  @variant lg {
    @apply flex w-screen items-center overflow-x-auto py-0 will-change-scroll;

    gap: var(--spacing-120);
    height: calc(100% + 20px);
    padding-inline: var(--container-margin-lg);
    margin-left: calc(var(--container-margin-lg) * -1);
  }
}

.timeline-description {
  @variant lg {
    @apply flex-none;

    width: 690px;
  }
}

.timeline-control {
  @apply sticky z-20 overflow-hidden text-center;

  width: calc(100% + var(--container-margin) * 2);
  height: 43px;
  margin-top: var(--spacing-56);
  margin-bottom: var(--spacing-32);
  margin-left: calc(var(--container-margin) * -1);
  background: #222 url("../../images/bg-timeline-sm.png") center
    var(--timeline-control-bg-position-y) / 100%
    var(--timeline-sticky-bg-size-y) no-repeat;
  transition:
    transform 0.3s ease-in-out,
    opacity 0.6s ease-in-out;
  will-change: opacity;

  @variant md {
    width: calc(100% + var(--container-margin-md) * 2);
    margin-left: calc(var(--container-margin-md) * -1);
  }

  @variant lg {
    @apply absolute top-auto left-0 m-0 flex w-full;

    bottom: 32px;
    gap: var(--spacing-64);
    background: transparent;
    transform: none;
  }
}

.timeline-control--fixed {
  @apply sticky opacity-100;

  top: calc(100dvh - 86px);
  padding-bottom: env(safe-area-inset-bottom, 0);
  transform: translateY(100%);
}

.timeline-control--end {
  transform: translateY(250%);
  transition-duration: 0s;
}

.timeline-control--transition {
  @apply opacity-0;

  transform: translateY(250%);
}

.timeline-scrollRemind {
  @apply hidden;

  @media (width >=1200px) and (pointer: fine) {
    @apply flex flex-none items-center;

    gap: var(--spacing-16);
    padding-left: var(--container-margin-lg);
  }
}

.timeline-scrollRemindIcon {
  width: 22px;
  height: 40px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px var(--color-white);

  &::before {
    @apply mx-auto block bg-white;

    width: 12px;
    height: 12px;
    content: "";
    border-radius: 100%;
    transform: translateY(6px);
    animation: mouse 2s 0.3s ease-in-out infinite;
  }
}

@keyframes mouse {
  100% {
    opacity: 0;
    transform: translateY(32px);
  }
}

.timeline-controlScrollContainer {
  @apply flex-auto overflow-x-auto text-center;

  @variant lg {
    height: calc(100% + 20px);

    @variant pointer-fine {
      @apply cursor-grab;

      &:active {
        @apply cursor-grabbing;
      }
    }
  }
}

.timeline-controlContainer {
  @apply inline-flex justify-center;

  gap: 33px;
  padding-inline: var(--container-margin);

  @variant md {
    padding-inline: var(--container-margin-md);
  }

  @variant md {
    padding-inline: var(--container-margin-lg);
  }
}

.timeline-yearControl {
  @apply flex items-center text-neutral-300;

  padding: var(--spacing-8);
  font: var(--t3-medium);

  > * {
    @apply cursor-pointer;
  }

  + *::before {
    @apply w-1;

    height: var(--spacing-24);
    content: "";
    background: #d9d9d9;
    transform: translateX(calc(var(--spacing-24) * -1));
  }
}

.timeline-yearControl--active {
  @apply text-neutral-100;
}

.timeline-yearGroup {
  @variant lg {
    @apply relative grid;

    gap: var(--spacing-40);
    transform: translateY(calc(var(--spacing-40) * -1));
  }
}

.timeline-yearDescription {
  @apply sticky top-0 z-10;

  width: calc(100% + var(--container-margin) * 2);
  padding-inline: var(--container-margin);
  padding-top: var(--spacing-80);
  padding-bottom: var(--spacing-16);
  margin-left: calc(var(--container-margin) * -1);
  background: #222 url("../../images/bg-timeline-sm.png") center
    var(--timeline-year-desc-bg-position-y) / 100%
    var(--timeline-sticky-bg-size-y) no-repeat;

  @variant md {
    width: calc(100% + var(--container-margin-md) * 2);
    padding-inline: var(--container-margin-md);
    margin-left: calc(var(--container-margin-md) * -1);
  }

  @variant lg {
    @apply m-0 w-screen py-0;

    @media (height <= 600px) {
      @apply opacity-0;
    }

    left: 0;
    background: transparent;
  }

  > * {
    @apply hidden;

    @variant lg {
      @apply inline;
    }
  }
}

&:has(.header) .timeline-yearDescription {
  top: 43px;
}

&:has(.pageSectionNavigation--slideUp) .timeline-yearDescription {
  top: 0;
}

.timeline-yearList {
  @apply relative z-0 grid;

  gap: var(--spacing-56);
  padding-top: var(--spacing-64);

  @variant md {
    gap: var(--spacing-64);
  }

  @variant lg {
    @apply flex pt-0;

    gap: var(--spacing-24);
    min-height: 397px;
  }
}

.timeline-year {
  @variant lg {
    @apply flex items-start;
  }
}

.timeline-visual {
  @apply relative z-0;

  width: 240px;
  aspect-ratio: 240/160;
  transform: translateX(var(--spacing-40));

  @variant md {
    width: 288px;
    transform: translateX(var(--spacing-64));
  }

  @variant lg {
    width: 300px;
    transform: translateX(var(--spacing-24));
  }
}

.timeline-date {
  @apply relative z-10;

  margin-top: calc(var(--spacing-28) * -1);

  @variant lg {
    @apply flex items-center;

    margin-top: calc(var(--spacing-20) * -1);
  }

  &::after {
    @apply h-1 w-full;

    content: "";
    border-bottom: 1px dashed var(--color-white);
    transform: translateY(1px);

    @variant lg {
      @apply block;
    }
  }
}

.timeline-storyList {
  @apply grid;

  gap: var(--spacing-24);
  margin-top: var(--spacing-20);
  margin-left: var(--spacing-14);
  border-left: 1px dashed var(--color-white);

  @variant lg {
    @apply relative z-0 m-0 flex h-full border-none;

    margin-left: calc(var(--spacing-8) * -1);
  }

  &::after {
    @apply absolute hidden h-1 w-full;

    z-index: -1;
    content: "";
    border-bottom: 1px dashed var(--color-white);
    transform: translateY(220px);

    @variant lg {
      @apply block;
    }
  }
}

.timeline-story {
  @apply relative flex items-center;

  gap: var(--spacing-8);
  padding-left: 7px;

  @variant lg {
    @apply flex-col text-center;

    @media (height <= 600px) {
      width: 450px;
    }

    gap: var(--spacing-4);
    width: 240px;
    padding-inline: var(--spacing-16);
  }

  &::before {
    @apply bg-white;

    width: var(--spacing-12);
    height: 1px;
    content: "";

    @variant lg {
      @apply w-1 flex-none;

      height: 60px;
    }
  }

  &::after {
    @apply flex-none;
  }
}

.timeline-story--aia {
  font: var(--t3-medium);

  @variant lg {
    @apply justify-end;

    height: 236px;
    font: var(--t3-bold);
  }

  &::before {
    @variant lg {
      @apply order-2;
    }
  }

  &::after {
    @apply absolute bg-white;

    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    content: "";
    border-radius: 100%;
    transform: translate(-50%, -50%);

    @variant lg {
      @apply static order-3 transform-none;

      margin: 10px;
    }
  }
}

.timeline-story--ai {
  @apply text-neutral-400;

  font: var(--t4-medium);

  @variant lg {
    @apply justify-start self-end;

    height: 192px;
  }

  > * {
    @apply order-3;
  }

  &::before {
    @variant lg {
      @apply order-2;
    }
  }

  &::after {
    @apply absolute bg-white/10;

    top: 50%;
    left: 0;
    width: 10px;
    height: 10px;
    content: "";
    border-radius: 100%;
    box-shadow: 0 0 0 1px var(--color-white);
    backdrop-filter: blur(5px);
    transform: translate(-50%, -50%);
    will-change: backdrop-filter;

    @variant lg {
      @apply static order-1 transform-none;

      margin: 10px;
    }
  }
}

.timeline-observerLine {
  @apply pointer-events-none absolute left-0 h-1 w-full opacity-0;
}

.timeline-observerLine--yearGroup {
  transform: translateY(-155px);
}

.timeline-observerLine--endLine {
  @apply bottom-0;
}