/* THE SHOWCASE, PLATE AND RAIL shared by /looks (looks-page.ts) and the homepage's "Make it yours" (home-sections.ts): the big picture, its
   name plate, the strip of every look under it, and the showcase's idle motion (SVG user units; only on the inlined showcase). Every rule is
   under `.lp`, the class both pages put on the block that holds them, so it cannot restyle the page around it (home.css has its own
   `.win`). Each page adds its own spacing after this file. */
.lp {
  --lp-oat: var(--canvas-oat);
  --fill: var(--canvas-fill);
  --faint: var(--ink-faint);
}
.lp h1,
.lp h2,
.lp h3,
.lp p,
.lp figure {
  margin: 0;
}
.lp button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* ---------- the showcase: 2.4 to 1 over the column ---------- */
.lp .showcase {
  position: relative;
  margin: 20px var(--px) 0;
  aspect-ratio: 576 / 240;
  overflow: hidden;
  border-radius: 20px;
  background: var(--fill);
}
/* Stillness's pale screens on the pale page: a soft 1px edge drawn over the picture, so the clip keeps it */
.lp .showcase::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1px solid transparent;
  pointer-events: none;
  transition: border-color 0.6s ease;
  z-index: 3;
}
.lp .showcase:has(.layer.on .shotsbox)::after {
  border-color: var(--canvas-border);
}
.lp .layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.lp .layer.on {
  opacity: 1;
  pointer-events: auto;
}
.lp .showcase-art,
.lp .showcase-art .art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.lp .showcase-art.shotsbox {
  background: var(--canvas);
}
.lp .showcase-art .shots {
  object-fit: cover;
  object-position: 50% 0;
}
.lp .plate {
  position: absolute;
  left: 24px;
  bottom: 24px;
  background: var(--canvas);
  border-radius: 14px;
  padding: 14px 20px 16px;
  display: grid;
  gap: 2px;
  max-width: 440px;
  padding-bottom: 20px;
}
.lp .layer:has(.shotsbox) .plate {
  border: 1px solid var(--canvas-border);
}
.lp .plate .name {
  font: 700 32px / 36px var(--sans);
  letter-spacing: -0.8px;
}
.lp .moodline {
  font: 400 16px / 22px var(--sans);
  color: var(--ink-secondary);
  letter-spacing: -0.2px;
}
.lp .go {
  background: var(--lp, var(--accent));
  color: #fff;
  border-radius: 14px;
  height: 52px;
  padding: 0 28px;
  display: inline-flex;
  align-items: center;
  font: 500 17px var(--sans);
  letter-spacing: -0.2px;
  text-decoration: none;
  white-space: nowrap;
}
.lp .go:hover {
  filter: brightness(0.9);
}
.lp .plate .go {
  justify-self: start;
  margin-top: 14px;
}

/* ---------- the rail ---------- */
.lp .rail {
  margin: 14px var(--px) 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 14px 10px;
}
@media (min-width: 1100px) {
  .lp .rail {
    grid-template-columns: repeat(var(--n), 1fr);
  }
}
.lp .win {
  border: 0;
  background: transparent;
  padding: 0;
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 2px;
  min-width: 0;
  transition: transform 0.2s ease, opacity 0.2s;
  outline: none;
}
.lp .win .pic {
  display: block;
  width: 100%;
  height: auto;
  align-self: start;
  aspect-ratio: 345 / 148;
  overflow: hidden;
  background: var(--canvas);
  position: relative;
  border-radius: 10px;
  box-shadow: 0 0 0 0 transparent;
  transition: box-shadow 0.15s ease;
}
.lp .win .pic img {
  position: absolute;
  display: block;
  max-width: none;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
  transition: transform 0.6s ease;
}
.lp .win .pic img.shots {
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 0 0;
}
.lp .win .wname {
  font: 600 14px / 18px var(--sans);
  letter-spacing: -0.2px;
  margin-top: 6px;
}
.lp .win .wmood {
  font: 400 12px / 16px var(--sans);
  color: var(--ink-muted);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lp .win:hover {
  transform: translateY(-3px);
}
.lp .win:hover .pic img {
  transform: scale(1.06);
  transform-origin: 50% 100%;
}
/* one active state: a ring on the picture only, following its corners; focus wears the same ring in the accent */
.lp .win.on .pic {
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink);
}
.lp .win:focus-visible {
  outline: none;
}
.lp .win:focus-visible .pic {
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--accent);
}
.lp .win.on:focus-visible .pic {
  box-shadow: 0 0 0 2px var(--canvas), 0 0 0 4px var(--ink);
}

/* ---------- the showcase's idle motion (SVG user units; only on the inlined showcase) ---------- */
.lp .art .mv > g {
  transform-box: fill-box;
}
.lp .art .mv-clouds > g {
  animation: drift 48s ease-in-out infinite alternate;
}
.lp .art .mv-mist > g {
  animation: mistdrift 26s ease-in-out infinite alternate;
}
.lp .art .mv-morpho > g {
  transform-origin: 50% 50%;
  animation: morpho 9s ease-in-out infinite alternate;
}
.lp .art .mv-toucan > g {
  transform-origin: 50% 100%;
  animation: hop 7s ease-in-out infinite;
}
.lp .art .mv-pigeon > g {
  transform-origin: 30% 100%;
  animation: peck 5s ease-in-out infinite;
}
.lp .play .art .mv-tram > g {
  animation: rollin 3.4s cubic-bezier(0.16, 0.7, 0.28, 1) both;
}
.lp .play .art .mv-riders > g {
  animation: appear 0.7s ease 3.1s both;
}
.lp .play .art .mv-van {
  animation: drivein 3.2s cubic-bezier(0.16, 0.7, 0.28, 1) both;
}
.lp .art .mv-van > g {
  animation: idle 1.8s ease-in-out 3.2s infinite alternate;
}
.lp .art .mv-roadrunner > g {
  transform-origin: 50% 100%;
  animation: dash 8s ease-in-out 1s infinite;
}
.lp .art .mv-steam > g {
  transform-origin: 50% 100%;
  animation: rise 3.2s ease-in-out infinite;
}
.lp .art .mv-smoke > g {
  transform-origin: 50% 100%;
  animation: rise 4.4s ease-in-out 0.8s infinite;
}
.lp .art .mv-rabbit > g {
  transform-origin: 50% 100%;
  animation: hop 9s ease-in-out 1.5s infinite;
}
.lp .art .mv-balloon > g {
  animation: float 9s ease-in-out infinite alternate;
}
.lp .art .mv-birds > g {
  animation: glide 14s ease-in-out infinite alternate;
}
.lp .art .mv-swallows > g {
  animation: glide 9s ease-in-out infinite alternate;
}
.lp .art .mv-sail > g {
  animation: slide 26s ease-in-out infinite alternate;
}
.lp .art .mv-scooter > g,
.lp .art .mv-rickshaw > g {
  animation: idle 1.8s ease-in-out infinite alternate;
}
.lp .art .mv-petals > g {
  animation: petals 12s ease-in-out infinite alternate;
}
.lp .art .mv-basket > g {
  transform-origin: 50% 100%;
  animation: bob 3.4s ease-in-out infinite alternate;
}
.lp .art .mv-turtle > g {
  animation: swim 16s ease-in-out infinite alternate;
}
@keyframes bob {
  from {
    transform: translateY(0) rotate(-1deg);
  }
  to {
    transform: translateY(1.6px) rotate(1deg);
  }
}
@keyframes swim {
  from {
    transform: translateX(-10px);
  }
  to {
    transform: translateX(24px);
  }
}
@keyframes mistdrift {
  from {
    transform: translateX(-14px);
  }
  to {
    transform: translateX(18px);
  }
}
@keyframes morpho {
  0% {
    transform: translate(-30px, 6px) rotate(-6deg);
  }
  50% {
    transform: translate(10px, -10px) rotate(4deg);
  }
  100% {
    transform: translate(36px, 2px) rotate(-3deg);
  }
}
@keyframes float {
  from {
    transform: translateY(2px);
  }
  to {
    transform: translate(6px, -5px);
  }
}
@keyframes glide {
  from {
    transform: translateX(-6px);
  }
  to {
    transform: translate(10px, -3px);
  }
}
@keyframes slide {
  from {
    transform: translateX(-10px);
  }
  to {
    transform: translateX(12px);
  }
}
@keyframes petals {
  from {
    transform: translate(-6px, -3px);
  }
  to {
    transform: translate(10px, 4px);
  }
}
@keyframes dash {
  0%,
  60%,
  100% {
    transform: none;
  }
  66% {
    transform: translateX(14px) rotate(-3deg);
  }
  72%,
  92% {
    transform: translateX(22px);
  }
}
@keyframes rise {
  0% {
    transform: none;
    opacity: 0.5;
  }
  50% {
    transform: translateY(-1.6px);
    opacity: 1;
  }
  100% {
    transform: translateY(-3px);
    opacity: 0.2;
  }
}
@keyframes drift {
  from {
    transform: translateX(-16px);
  }
  to {
    transform: translateX(20px);
  }
}
@keyframes hop {
  0%,
  74%,
  100% {
    transform: none;
  }
  80% {
    transform: translateY(-5px) rotate(-8deg);
  }
  86% {
    transform: none;
  }
  90% {
    transform: translateY(-2.5px) rotate(-3deg);
  }
  94% {
    transform: none;
  }
}
@keyframes peck {
  0%,
  70%,
  100% {
    transform: none;
  }
  76% {
    transform: rotate(-22deg);
  }
  80% {
    transform: none;
  }
  84% {
    transform: rotate(-22deg);
  }
  88% {
    transform: none;
  }
}
@keyframes drivein {
  from {
    transform: translateX(-460px);
  }
  to {
    transform: none;
  }
}
@keyframes idle {
  from {
    transform: none;
  }
  to {
    transform: translateY(-0.7px);
  }
}
@keyframes rollin {
  from {
    transform: translateX(440px);
  }
  to {
    transform: none;
  }
}
@keyframes appear {
  from {
    opacity: 0;
    transform: translateY(2px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1099px) and (min-width: 760px) {
  .lp .plate .name {
    font-size: 26px;
    line-height: 30px;
  }
  .lp .plate .moodline {
    font-size: 14px;
    line-height: 20px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .lp .art .mv,
  .lp .art .mv > g {
    animation: none !important;
  }
  .lp .layer,
  .lp .win,
  .lp .win .pic img,
  .lp .win .pic {
    transition: none !important;
  }
}