/* PHASE 52 — SHOP IN MOTION
 *
 * The vertical 9:16 product-video rail, shared by index.html and product.html. A NEW file
 * rather than an edit to site.css, so nothing that already renders can be disturbed.
 *
 * Lemona design system only: 4px radius, hairline borders, uppercase Archivo labels,
 * Hanken Grotesk body, orange reserved for the one control a finger lands on. No
 * gradients, no shadows, no blur, no scroll animation. Colour on hover, not motion.
 *
 * Every value falls back to a literal, so the file is correct even if a token file is
 * ever served stale from cache.
 */

/* The rail. Horizontal overflow is what makes it swipeable on touch and what gives the
   SectionHead arrows something to scroll on desktop. */
.motion__rail{
  display:flex;
  gap:var(--space-3,12px);
  overflow-x:auto;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  padding-bottom:4px;
  scroll-padding-left:2px;
}
@media(min-width:768px){.motion__rail{gap:var(--space-6,24px)}}

/* Mobile: one card with the next one clearly peeking, so the gesture is discoverable. */
.motion__card{
  flex:0 0 74%;
  max-width:300px;
  min-width:0;
  margin:0;
  scroll-snap-align:start;
  display:flex;
  flex-direction:column;
  gap:var(--space-3,12px);
}
@media(min-width:560px){.motion__card{flex-basis:46%}}
@media(min-width:900px){.motion__card{flex:0 0 244px;max-width:244px}}

/* 9:16, locked. aspect-ratio + a fixed flex basis means the card geometry is reserved
   before any image or iframe arrives, so the rail never jumps as it fills. A vertical
   video is never stretched into 16:9 and the frame is never distorted. */
.motion__frame{
  position:relative;
  width:100%;
  aspect-ratio:9/16;
  overflow:hidden;
  background:var(--ink-1000,#0B0B0C);
  border-radius:var(--radius-sm,4px);
}
.motion__iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* The poster/play control. 100% of the frame is the hit area, far above the 44px floor. */
.motion__play{
  position:absolute;inset:0;
  width:100%;height:100%;
  padding:0;border:0;
  display:block;
  background:var(--ink-1000,#0B0B0C);
  cursor:pointer;
}
.motion__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.motion__poster--empty{background:var(--ink-100,#F2F3F4)}
.motion__playicon{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;
  width:56px;height:56px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--color-ink,#0B0B0C);
  transition:background 120ms cubic-bezier(.2,0,.2,1),color 120ms cubic-bezier(.2,0,.2,1);
}
.motion__play:hover .motion__playicon{background:var(--color-primary,#F38534);color:#fff}
.motion__play:focus-visible{outline:2px solid var(--color-ink,#0B0B0C);outline-offset:-4px}
@media(prefers-reduced-motion:reduce){.motion__playicon{transition:none}}

/* Caption block = the product link. */
.motion__meta{margin:0;min-width:0}
.motion__link{display:grid;gap:4px;text-decoration:none;color:var(--color-ink,#0B0B0C)}
.motion__link:focus-visible{outline:2px solid var(--color-ink,#0B0B0C);outline-offset:3px;border-radius:var(--radius-sm,4px)}
.motion__product{
  font:var(--text-label,700 .8125rem/1.3 "Archivo","Helvetica Neue",Arial,sans-serif);
  letter-spacing:var(--tracking-wider,.08em);
  text-transform:uppercase;
  color:var(--color-ink,#0B0B0C);
}
.motion__colour{font:var(--text-body-sm,400 .875rem/1.45 "Hanken Grotesk",sans-serif);color:var(--color-text-secondary,#6B7076)}
.motion__caption{font:var(--text-body-sm,400 .875rem/1.45 "Hanken Grotesk",sans-serif);color:var(--ink-800,#26262A);text-wrap:pretty}
.motion__cta{
  display:inline-flex;align-items:center;gap:6px;
  margin-top:2px;
  font:var(--text-label,700 .75rem/1.2 "Archivo","Helvetica Neue",Arial,sans-serif);
  letter-spacing:var(--tracking-wider,.08em);
  text-transform:uppercase;
  color:var(--color-text-secondary,#6B7076);
}
.motion__link:hover .motion__product,
.motion__link:hover .motion__cta{color:var(--color-primary,#F38534)}

/* Skeleton: the exact final geometry, so nothing reflows when the data lands. */
.motion__card--skel .motion__frame{background:var(--ink-100,#F2F3F4)}

/* Product page: the section already sits inside .pg, so it only needs its own vertical
   rhythm — the same 48px step the feature highlights and reviews blocks use. */
.motion__pdpsec{margin:var(--space-8,48px) 0 0}

/* ===================== PHASE 52b — VIDEO INSIDE THE PDP GALLERY =====================
 * The product's own video is a slide in the existing .pgal gallery. These rules ADD to
 * the .pgal styles in product.html; none of them override an existing image rule, and
 * none of the .motion__* rules above are touched, so the homepage rail is unaffected.
 *
 * The gallery well stays 3:4 (so the card never reflows when the slide changes) and the
 * 9:16 video is centred inside it against black — letterboxed at the sides, never
 * stretched and never cropped.
 */
.pgal__playwrap{
  position:absolute;inset:0;
  width:100%;height:100%;
  padding:0;border:0;
  display:block;
  background:var(--ink-1000,#0B0B0C);
  cursor:pointer;
}
.pgal__playwrap img{
  width:auto;height:100%;
  aspect-ratio:9/16;
  margin:0 auto;
  object-fit:cover;
  display:block;
}
.pgal__video{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  height:100%;aspect-ratio:9/16;
  max-width:100%;
  border:0;
  background:var(--ink-1000,#0B0B0C);
}
.pgal__vposter{
  display:block;
  height:100%;aspect-ratio:9/16;
  margin:0 auto;
  background:var(--ink-100,#F2F3F4);
}
.pgal__play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;
  width:56px;height:56px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--color-ink,#0B0B0C);
  transition:background 120ms cubic-bezier(.2,0,.2,1),color 120ms cubic-bezier(.2,0,.2,1);
}
.pgal__playwrap:hover .pgal__play{background:var(--color-primary,#F38534);color:#fff}
.pgal__playwrap:focus-visible{outline:2px solid var(--color-ink,#0B0B0C);outline-offset:-4px}
@media(prefers-reduced-motion:reduce){.pgal__play{transition:none}}

/* The video thumbnail carries a small play badge so it reads as a film, not a photo. */
.pgal__thumb--video{position:relative;background:var(--ink-1000,#0B0B0C)}
.pgal__thumb--video img{opacity:.82}
.pgal__thumbplay{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:grid;place-items:center;
  width:24px;height:24px;
  border-radius:999px;
  background:rgba(255,255,255,.92);
  color:var(--color-ink,#0B0B0C);
}