/*
 * "Not just a deal": a large photo with a smaller one pinned to its corner,
 * like a magazine spread, next to the words. launch.js changes the slide
 * (every 5 s, with pause, dots, arrows and swipe) and adds `is-changing`, which
 * wipes the large photo in and drops the small one onto it.
 */

.photo-story {
  align-items: center;
  background:
    radial-gradient(45% 60% at 8% 12%, rgb(210 237 136 / 34%) 0%, transparent 70%),
    radial-gradient(40% 55% at 95% 90%, rgb(237 155 134 / 22%) 0%, transparent 70%),
    linear-gradient(160deg, #fbf7ef 0%, #f1f6ec 100%);
  display: grid;
  gap: clamp(40px, 6vw, 96px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  overflow: hidden;
  padding: 110px max(5%, calc((100% - 1240px) / 2));
  position: relative;
}

/* --- the photos ---------------------------------------------------------- */

.story-media {
  justify-self: center;
  max-width: 520px;
  padding: 0 16% 14% 0;
  position: relative;
  width: 100%;
}

/* A soft disc behind the photos, so they sit on something. */
.story-media::before {
  aspect-ratio: 1;
  background: radial-gradient(circle at 35% 35%, var(--lime) 0%, rgb(210 237 136 / 0%) 70%);
  border-radius: 50%;
  content: "";
  position: absolute;
  right: -6%;
  top: -8%;
  width: 60%;
  z-index: 0;
}

.story-main {
  height: auto;
  aspect-ratio: 4 / 5;
  border-radius: 32px;
  box-shadow: 0 40px 70px -35px rgb(23 46 43 / 55%);
  display: block;
  object-fit: cover;
  position: relative;
  width: 100%;
  z-index: 1;
}

.story-inset {
  height: auto;
  aspect-ratio: 4 / 3;
  border: 8px solid #fff;
  border-radius: 24px;
  bottom: 0;
  box-shadow: 0 28px 50px -24px rgb(23 46 43 / 60%);
  object-fit: cover;
  position: absolute;
  right: 0;
  width: 52%;
  z-index: 2;
}

.story-count {
  backdrop-filter: blur(10px);
  background: rgb(6 52 47 / 58%);
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 999px;
  color: #dfeae5;
  font-size: 13px;
  left: 20px;
  letter-spacing: 0.04em;
  padding: 6px 13px;
  position: absolute;
  top: 20px;
  z-index: 3;
}

.story-count b {
  color: #fff;
}

/* --- the words ----------------------------------------------------------- */

.story-copy {
  max-width: 520px;
}

.story-copy h2 {
  color: var(--ink);
  font-size: clamp(38px, 4vw, 58px);
  line-height: 1.02;
  margin-top: 4px;
}

.story-copy h2 em {
  color: var(--teal);
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 400;
}

.story-lede {
  color: var(--muted);
  font-size: 17px;
  line-height: 1.65;
  margin: 22px 0 30px;
  max-width: 460px;
}

/* --- controls ------------------------------------------------------------ */

.photo-slider-controls {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 34px;
}

.photo-slider-controls button {
  align-items: center;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--ink);
  display: inline-flex;
  font-size: 17px;
  height: 44px;
  justify-content: center;
  transition:
    background 200ms var(--ease),
    border-color 200ms var(--ease),
    transform 200ms var(--ease);
  width: 44px;
}

.photo-slider-controls button:hover {
  border-color: var(--teal);
  transform: translateY(-2px);
}

.photo-slider-controls [data-photo-slide] {
  background: transparent;
  border: 0;
  width: 26px;
}

.photo-slider-controls [data-photo-slide] span {
  background: rgb(23 46 43 / 25%);
  border-radius: 999px;
  display: block;
  height: 8px;
  transition:
    width 300ms var(--ease),
    background 300ms var(--ease);
  width: 8px;
}

.photo-slider-controls [aria-pressed="true"] span {
  background: var(--teal);
  width: 26px;
}

#photo-play {
  background: var(--teal-deep);
  border-color: var(--teal-deep);
  color: #fff;
  font-size: 13px;
  margin-left: 6px;
}

/* --- the change ---------------------------------------------------------- */

.photo-story.is-changing .story-main {
  animation: story-wipe 900ms var(--ease) both;
}

.photo-story.is-changing .story-inset {
  animation: story-drop 800ms 150ms var(--ease) both;
}

.photo-story.is-changing .story-copy h2 {
  animation: story-rise 700ms var(--ease) both;
}

@keyframes story-wipe {
  from {
    clip-path: inset(0 0 100% 0 round 32px);
  }
  to {
    clip-path: inset(0 0 0 0 round 32px);
  }
}

@keyframes story-drop {
  from {
    opacity: 0;
    transform: translateY(24px) rotate(4deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes story-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --- narrower screens ---------------------------------------------------- */

@media (max-width: 900px) {
  .photo-story {
    gap: 44px;
    grid-template-columns: minmax(0, 1fr);
    padding: 72px 22px;
  }

  .story-media {
    max-width: 440px;
  }

  .story-copy {
    justify-self: center;
    text-align: center;
  }

  .story-lede {
    margin-inline: auto;
  }

  .photo-slider-controls {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .photo-story {
    padding: 56px 18px;
  }

  .story-copy h2 {
    font-size: 36px;
  }

  .story-lede {
    font-size: 15px;
  }

  .story-inset {
    border-width: 5px;
  }

  .photo-slider-controls {
    gap: 6px;
  }

  .photo-slider-controls button {
    height: 40px;
    width: 40px;
  }

  .photo-slider-controls [data-photo-slide] {
    width: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .photo-story.is-changing .story-main,
  .photo-story.is-changing .story-inset,
  .photo-story.is-changing .story-copy h2 {
    animation: none;
  }
}