.looks-motion {
  --looks-red: #c53735;
  --looks-slot: 28%;
  --looks-original-lead: calc(clamp(126px, 16svh, 200px) + 80px);
  --looks-lead: var(--home-screen-gap, var(--looks-original-lead));
  /* Preserve the trailing space when the leading space changes. */
  min-height: calc(100svh + var(--looks-lead) - var(--looks-original-lead));
  padding: var(--looks-lead) 0 clamp(48px, 6svh, 80px);
  background: #fff;
  color: #171313;
}

.looks-motion__heading {
  padding: 0 24px;
  text-align: center;
  transition: opacity .6s cubic-bezier(.17, .55, .55, 1),
    transform .6s cubic-bezier(.17, .55, .55, 1);
}

.looks-motion__heading[data-reveal-pending] {
  opacity: 0;
  transform: translateY(-28px);
}

.looks-motion__heading p,
.looks-motion__heading h2 {
  margin: 0;
  font-family: var(--fomomy-display-font);
  font-weight: 900;
}

.looks-motion__heading p {
  margin-bottom: .6em;
  font-size: clamp(15px, 1.65vw, 28px);
  line-height: 1.1;
  letter-spacing: -.025em;
}

.looks-motion__heading h2 {
  color: var(--looks-red);
  font-size: clamp(2.25rem, 5.4vw, 6rem);
  line-height: .94;
  letter-spacing: -.055em;
}

.looks-motion__viewport {
  margin-top: clamp(30px, 5svh, 72px);
  padding: 15px 0 11px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}

.looks-motion[data-enhanced] .looks-motion__viewport {
  overflow: clip;
  scroll-snap-type: none;
  touch-action: pan-y pinch-zoom;
  cursor: grab;
  user-select: none;
}

.looks-motion[data-dragging] .looks-motion__viewport,
.looks-motion[data-dragging] :is(.looks-motion__card, .looks-motion__buy) {
  cursor: grabbing;
}

.looks-motion__track {
  display: flex;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.looks-motion__slot {
  --tilt: 3deg;
  --tilt-period: 3s;
  flex: 0 0 var(--looks-slot);
  padding-inline: clamp(14px, 3.8vw, 72px);
  scroll-snap-align: center;
}

.looks-motion__slot:nth-child(4n + 2) { --tilt: -2deg; --tilt-period: 2.5s; }
.looks-motion__slot:nth-child(4n + 3) { --tilt: 4deg; --tilt-period: 3.5s; }
.looks-motion__slot:nth-child(4n + 4) { --tilt: -3deg; }

.looks-motion__look {
  width: min(100%, clamp(238px, 30svh, 368px));
  margin-inline: auto;
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .looks-motion[data-enhanced] .looks-motion__look {
    animation: looks-motion-tilt var(--tilt-period) ease-in-out infinite paused;
  }

  .looks-motion[data-swaying] .looks-motion__look {
    animation-play-state: running;
  }
}

@keyframes looks-motion-tilt {
  0%, 100% { transform: rotate(var(--tilt)); }
  50% { transform: rotate(calc(-1 * var(--tilt))); }
}

.looks-motion__media {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  border: 1px solid #ede9e7;
  border-radius: clamp(22px, 2.8vw, 42px);
  background: #f4f0ee;
}

.looks-motion__card {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: transparent;
}

.looks-motion__buy {
  position: absolute;
  inset: auto 0 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  min-height: 30%;
  padding: 12px 10px clamp(15px, 1.6vw, 25px);
  background: linear-gradient(to top, #000 0%, rgb(0 0 0 / .8) 28%, transparent 100%);
  color: #fff;
  font: 500 clamp(14px, 1.1vw, 17px)/1.2 var(--fomomy-font);
  text-decoration: none;
}

.looks-motion__buy:hover { text-decoration: underline; }

.looks-motion__card:enabled { cursor: pointer; }
.looks-motion__card:disabled { pointer-events: none; }

.looks-motion__card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.looks-motion__name {
  display: block;
  margin-top: 12px;
  color: var(--looks-red);
  font: 900 clamp(16px, 1.5vw, 24px)/1.2 var(--fomomy-display-font);
}

.looks-motion__dialog button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid #ead6d4;
  border-radius: 50%;
  background: #fff;
  color: var(--looks-red);
  cursor: pointer;
}

.looks-motion__dialog button:hover {
  background: var(--looks-red);
  color: #fff;
}

.looks-motion :focus-visible {
  outline: 2px solid var(--looks-red);
  outline-offset: 3px;
}

.looks-motion :is(.looks-motion__viewport, .looks-motion__card, .looks-motion__buy):focus-visible {
  outline-offset: -3px;
}

.looks-motion .looks-motion__buy:focus-visible { outline-color: #fff; }

.looks-motion__dialog {
  max-width: min(94vw, 900px);
  max-height: 94svh;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 22px;
  background: #151313;
}

.looks-motion__dialog::backdrop { background: rgb(20 12 12 / .78); }
.looks-motion__dialog video { display: block; max-width: 100%; max-height: 90svh; }
.looks-motion__dialog button { position: absolute; top: 10px; right: 10px; z-index: 1; font-size: 27px; }

@media (max-width: 1000px) {
  .looks-motion { --looks-slot: 37%; }
}

@media (max-width: 600px) {
  .looks-motion {
    --looks-slot: 64%;
    --looks-original-lead: calc(clamp(106px, 13svh, 144px) + 80px);
  }
  .looks-motion__heading h2 { font-size: clamp(2rem, 9vw, 3.25rem); }
  .looks-motion__slot { padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .looks-motion__heading[data-reveal-pending] { opacity: 1; transform: none; }
}

/* Keep the default editor launcher clear of the cards and heading. */
html.lens-after-active #fomoy-editor-root .fe-launcher {
  inset: auto auto max(20px, env(safe-area-inset-bottom)) 20px;
  transform: none;
}