/* Collections: the page's eye catcher. One collection at a time fills the whole strip, and the strip takes
   its color (--band, set by script.js from the collection's data-color), or its own background art. The big
   name with arrows, and the dots under it, switch between them. Each collection starts with its own content
   (its logo stage and feature; the features are in collection-features.css) and all end with the same
   full-width looping carousel (built by script.js). Kept compact and plain, so the art does the talking */

/* The strip tucks under the tilted ribbon, which works as its top edge */
/* touch-action: fingers scroll the page up and down here, and swipe sideways to switch collections (script.js) */
.collections-section {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
  margin-top: -34px;
  padding: 96px 0 0;
  border-bottom: var(--line);
  background: var(--band);
  transition: background-color .5s ease;
}
.collections-section > .wrap { position: relative; }

/* A collection's own background art (data-background, script.js sets the src) covers the whole strip,
   carousel included. Anchored right: Pixie C0res's sparkle and the Rubians tower sit there; stacked
   layouts keep the sparkle (86% across) in view */
.collections-art { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 86% center; pointer-events: none; }

/* Dark collections (data-theme="dark", e.g. Pixie C0res on its black art): light text and outlines,
   periwinkle accents and shadows to match the art */
.collections-section.is-dark { background-color: #000; }
.is-dark .collection-name { color: var(--paper); }
.is-dark .collection-arrow { border-color: var(--paper); box-shadow: 4px 4px 0 var(--periwinkle); }
.is-dark .collection-dot { border-color: var(--paper); background: transparent; }
.is-dark .collection-dot[aria-current="true"] { background: var(--paper); }
.is-dark .collection-logo img { border-color: var(--paper); box-shadow: 9px 9px 0 var(--periwinkle); }
.is-dark .process-reel { border-color: var(--paper); box-shadow: 8px 8px 0 var(--periwinkle); }
.is-dark .process-hint { box-shadow: 3px 3px 0 var(--periwinkle); }
.is-dark .process-step[aria-current] .process-num { background: var(--periwinkle); color: var(--ink); }
.is-dark .process-steps { --step-line: var(--periwinkle-light); }
/* The shelf: mostly solid ink, so the art only shows through slightly */
.is-dark .collection-carousel { border-top-color: var(--paper); background: color-mix(in srgb, var(--ink) 82%, transparent); }

/* Switcher: eyebrow, then the collection's name between two arrows, and one dot per collection */
.collection-head { display: grid; justify-items: center; margin-bottom: 20px; text-align: center; }
.collection-head .eyebrow { margin-bottom: 10px; }
.collection-switcher { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; }
/* A fixed width, so the arrows stay put while the names change */
.collection-name { flex: 0 1 480px; min-width: 0; margin: 0; font-size: clamp(1.75rem, 5.4vw, 4rem); line-height: 1.05; animation: rise .4s cubic-bezier(.34, 1.3, .64, 1); }
.collection-arrow {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  padding: 0;
  border: var(--line);
  border-radius: 50%;
  background: var(--paper);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.collection-arrow svg { width: 22px; height: 22px; fill: none; stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.collection-arrow:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.collection-dots { display: flex; gap: 12px; margin-top: 16px; }
.collection-dot { position: relative; width: 18px; height: 18px; padding: 0; border: 2.5px solid var(--ink); border-radius: 99px; background: var(--paper); cursor: pointer; transition: width .35s cubic-bezier(.34, 1.56, .64, 1), background-color .2s; }
/* A bigger invisible hit area around each small dot */
.collection-dot::after { position: absolute; inset: -10px -6px; content: ""; }
.collection-dot[aria-current="true"] { width: 44px; background: var(--ink); }

.collection { animation: rise .45s cubic-bezier(.34, 1.3, .64, 1); }

/* Intro: the logo stage, then the collection's feature (beside it on desktop). On the stage, the logo is
   tilted; it can sit on a spinning burst with twinkling sparkles and a bobbing sticker (Rubians) */
.collection-intro { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; align-items: center; gap: 20px; }
.collection-stage { position: relative; width: min(100%, 240px); aspect-ratio: 1; }
/* The #burst symbol; its colors are set here and carry into the symbol */
.collection-burst { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: var(--color-2); stroke: var(--ink); stroke-width: 4px; stroke-linejoin: round; animation: spin 50s linear infinite; }
.collection-logo { position: absolute; inset: 17%; margin: 0; }
.collection-logo img { width: 100%; height: auto; border: var(--line); border-radius: 28px; box-shadow: 9px 9px 0 var(--ink); transform: rotate(-6deg); transition: transform .4s cubic-bezier(.34, 1.56, .64, 1); }
.collection-spark { position: absolute; animation: twinkle 2.4s ease-in-out infinite; }
.collection-spark-1 { top: 2%; right: 12%; width: 44px; }
.collection-spark-2 { bottom: 4%; left: 10%; width: 34px; animation-delay: -.8s; }
.collection-spark-3 { top: 40%; left: -2%; width: 24px; animation-delay: -1.6s; }
.collection-sticker { right: 0; bottom: 8%; width: 17%; animation: bob 4.4s ease-in-out infinite; }
.collection-feature { width: 100%; min-width: 0; }

/* Carousel: a full-width display shelf along the strip's bottom edge. script.js repeats the group to fill
   the width, then each copy slides its own width, like the ribbon. Hover or keyboard focus pauses it; on
   touch screens a finger drags it along (script.js), so it keeps only vertical scrolling for the page */
.collection-carousel { margin: 32px calc(50% - 50vw) 0; padding: 22px 0 28px; overflow: hidden; border-top: var(--line); background: color-mix(in srgb, var(--paper) 45%, transparent); touch-action: pan-y; }
.carousel-track { display: flex; width: max-content; }
.carousel-group { display: flex; flex: 0 0 auto; gap: 20px; margin: 0; padding: 0 20px 0 0; list-style: none; }
.carousel-group > li { flex: 0 0 auto; width: 160px; --tilt: -2.5deg; }
.carousel-group > li:nth-child(even) { --tilt: 2.5deg; margin-top: 12px; }
.carousel-track.is-looping .carousel-group { animation: marquee 48s linear infinite; }
/* Keyboard focus only: a tile clicked with the mouse keeps focus after the lightbox closes, and shouldn't stop the loop */
.collection-carousel:has(:focus-visible) .carousel-group { animation-play-state: paused; }

/* Hover effects only where there's a mouse: on phones a tap would leave them stuck on */
@media (hover: hover) {
  .collection-arrow:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--ink); }
  .is-dark .collection-arrow:hover { box-shadow: 6px 6px 0 var(--periwinkle); }
  .collection-arrow:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
  .collection-dot:hover { background: var(--color-1); }
  .is-dark .collection-dot:hover { background: var(--periwinkle); }
  .collection-dot[aria-current="true"]:hover { background: var(--ink); }
  .is-dark .collection-dot[aria-current="true"]:hover { background: var(--paper); }
  .collection-stage:hover .collection-logo img { transform: rotate(3deg) scale(1.06); }
  .collection-carousel:hover .carousel-group { animation-play-state: paused; }
}

@media (min-width: 681px) {
  .collections-section { padding-top: 104px; }
  .collection-head { margin-bottom: 30px; }
  .collection-switcher { gap: 24px; }
  .collection-arrow { width: 56px; height: 56px; }
  .collection-arrow svg { width: 28px; height: 28px; }
  .collection-stage { width: min(100%, 280px); }
  .collection-carousel { margin-top: 40px; padding: 26px 0 34px; }
  .carousel-group { gap: 26px; padding-right: 26px; }
  .carousel-group > li { width: 200px; }
}

/* Desktop: the logo stage beside the feature */
@media (min-width: 901px) {
  .collections-section { padding-top: 112px; }
  .collections-art { object-position: right center; }
  .collection-intro { grid-template-columns: minmax(0, 300px) minmax(0, 1fr); justify-items: normal; gap: 24px 44px; }
  .collection-stage { width: auto; }
  .collection-feature { width: auto; }
  .carousel-group > li { width: 230px; }
}

/* Without motion the carousel is a plain row to swipe or scroll */
@media (prefers-reduced-motion: reduce) {
  .collection-carousel { overflow-x: auto; }
  .carousel-group { padding-left: 30px; }
}