/* =========================================================
   OUR MEMORIES — VERY SLOW AUTO LOOP + MANUAL SCROLL
   ========================================================= */

.memory-loop {
  --memory-gap: 16px;
  --memory-height: clamp(155px, 20vw, 245px);

  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-bottom: 2.25rem;
  padding: 12px 0 18px;

  overflow: hidden;
  isolation: isolate;

  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );

  mask-image: linear-gradient(
    to right,
    transparent 0%,
    #000 6%,
    #000 94%,
    transparent 100%
  );
}

/* =========================================================
   SIDE FADE
   ========================================================= */

.memory-loop::before {
  content: "";
  position: absolute;
  inset: 0;

  z-index: 5;
  pointer-events: none;

  background: linear-gradient(
    to right,
    var(--color-bg, #0b1020) 0%,
    transparent 8%,
    transparent 92%,
    var(--color-bg, #0b1020) 100%
  );

  opacity: 0.72;
}

/* =========================================================
   ROW
   ========================================================= */

.memory-loop__row {
  display: flex;
  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  padding: 8px 0 12px;

  white-space: nowrap;

  /*
    Allows mouse wheel / touchpad / touchscreen
    horizontal scrolling.
  */
  scroll-behavior: smooth;
  overscroll-behavior-x: contain;

  /*
    Hide default scrollbar.
    We create our own visible scrollbar below.
  */
  scrollbar-width: none;
}

.memory-loop__row::-webkit-scrollbar {
  display: none;
}

.memory-loop__row + .memory-loop__row {
  margin-top: 4px;
}

/* =========================================================
   TRACK
   ========================================================= */

.memory-loop__track {
  display: flex;
  align-items: center;

  width: max-content;

  gap: var(--memory-gap);

  flex-shrink: 0;

  will-change: transform;

  /*
    VERY SLOW.
    Larger number = slower movement.
  */
  animation: memories-forward 180s linear infinite;
}

/* Reverse row */

.memory-loop__row--reverse .memory-loop__track {
  animation-name: memories-reverse;
  animation-duration: 205s;
}

/* =========================================================
   PHOTO
   ========================================================= */

.memory-loop__photo {
  position: relative;

  display: block;
  flex: 0 0 auto;

  width: clamp(190px, 25vw, 330px);
  height: var(--memory-height);

  overflow: hidden;

  border-radius: 18px;

  background: #111827;

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.15);

  transform:
    translateZ(0)
    rotate(var(--tilt, 0deg));

  transition:
    transform 0.5s cubic-bezier(.2, .75, .2, 1),
    box-shadow 0.5s ease;
}

/* Natural photo angles */

.memory-loop__photo:nth-child(7n) {
  --tilt: -0.7deg;
}

.memory-loop__photo:nth-child(11n) {
  --tilt: 0.55deg;
}

.memory-loop__photo:nth-child(15n) {
  --tilt: -0.4deg;
}

/* =========================================================
   IMAGE
   ========================================================= */

.memory-loop__photo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  filter:
    saturate(0.96)
    contrast(1.02);

  transition:
    transform 0.7s cubic-bezier(.2, .75, .2, 1),
    filter 0.5s ease;
}

/* Photo shine */

.memory-loop__photo::after {
  content: "";

  position: absolute;
  inset: 0;

  background: linear-gradient(
    135deg,
    rgba(255,255,255,.12),
    transparent 35%,
    rgba(0,0,0,.12)
  );

  pointer-events: none;
}

/* =========================================================
   HOVER
   ========================================================= */

.memory-loop__photo:hover {
  z-index: 10;

  transform:
    translateY(-7px)
    rotate(0deg)
    scale(1.035);

  box-shadow:
    0 20px 45px rgba(0,0,0,.28);
}

.memory-loop__photo:hover img {
  transform: scale(1.08);

  filter:
    saturate(1.08)
    contrast(1.04);
}

/* =========================================================
   AUTO LOOP
   ========================================================= */

@keyframes memories-forward {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(
      calc(-50% - (var(--memory-gap) / 2)),
      0,
      0
    );
  }
}

@keyframes memories-reverse {
  from {
    transform: translate3d(
      calc(-50% - (var(--memory-gap) / 2)),
      0,
      0
    );
  }

  to {
    transform: translate3d(0, 0, 0);
  }
}

/* =========================================================
   PAUSE AUTO SCROLL WHEN USER INTERACTS
   ========================================================= */

.memory-loop:hover .memory-loop__track {
  animation-play-state: paused;
}

.memory-loop__row:active .memory-loop__track {
  animation-play-state: paused;
}

/* =========================================================
   MANUAL SCROLLBAR
   ========================================================= */

.memory-loop__row {
  scrollbar-width: thin;
  scrollbar-color:
    rgba(255,255,255,.45)
    rgba(255,255,255,.08);
}

/* Chrome / Edge / Safari */

.memory-loop__row::-webkit-scrollbar {
  display: block;
  height: 7px;
}

.memory-loop__row::-webkit-scrollbar-track {
  background: rgba(255,255,255,.07);

  border-radius: 999px;

  margin: 0 8%;
}

.memory-loop__row::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,.38);

  border-radius: 999px;

  transition: background .3s ease;
}

.memory-loop__row::-webkit-scrollbar-thumb:hover {
  background: rgba(255,255,255,.65);
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 901px) {

  .memory-loop__row {
    cursor: grab;
  }

  .memory-loop__row:active {
    cursor: grabbing;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .memory-loop {
    --memory-gap: 13px;
    --memory-height: 175px;
  }

  .memory-loop__photo {
    width: 240px;
    border-radius: 16px;
  }

  .memory-loop__track {
    animation-duration: 170s;
  }

  .memory-loop__row--reverse .memory-loop__track {
    animation-duration: 190s;
  }
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 700px) {

  .memory-loop {
    --memory-gap: 10px;
    --memory-height: 145px;
    width: 100% !important;
    margin-left: 0 !important;

    padding-bottom: 16px;
  }

  .memory-loop__row {
    padding: 6px 0 10px;
  }

  .memory-loop__photo {
    width: 205px;
    height: 145px;

    border-radius: 14px;
  }

  /*
    Still VERY slow on mobile.
  */

  .memory-loop__track {
    animation-duration: 165s;
  }

  .memory-loop__row--reverse .memory-loop__track {
    animation-duration: 185s;
  }

  .memory-loop__row::-webkit-scrollbar {
    height: 6px;
  }

  .memory-loop__row::-webkit-scrollbar-track {
    margin: 0 10%;
  }
}

/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 420px) {

  .memory-loop {
    --memory-gap: 8px;
    --memory-height: 125px;
  }

  .memory-loop__photo {
    width: 175px;
    height: 125px;

    border-radius: 12px;
  }

  .memory-loop__track {
    animation-duration: 155s;
  }

  .memory-loop__row--reverse .memory-loop__track {
    animation-duration: 175s;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .memory-loop__track {
    animation: none !important;
    transform: translate3d(0, 0, 0);
  }

  .memory-loop__row {
    scroll-behavior: auto;
  }

  .memory-loop__photo,
  .memory-loop__photo img {
    transition: none;
  }
}