/* Card fan (template-parts/home/card-fan.php): a hand of product photos fanned out from a worn
   photo in the middle, on the page colour like the product rows around it. Each card carries its
   slot (--i, -2 to 2) and its distance from the middle (--a); the fan is drawn from those with
   transforms only. home.js marks the deck .hg-reveal-pending, which hides the cards until it
   adds .hg-revealed and they are dealt out; without JavaScript or with reduced motion the fan
   shows open and still. assets/js/home-card-fan.js lifts a card (.is-lifted) and keeps the one
   going back in front of its neighbours while it settles (.is-settling), and on a touch screen
   turns the hand by rewriting each card's --i and --a (.is-turned). Per-instance values arrive as
   inline custom properties (--hg-fan-*). */

.hg-fan {
  --hg-fan-w: clamp(180px, 25vw, 340px);
  --hg-fan-step: 0.6;
  --hg-fan-drop: 0.06;
  --hg-fan-tilt: 5deg;
  --hg-fan-turn: 10deg;
  --hg-fan-shrink: 0.1;
  --hg-fan-spread: 1;
  --hg-fan-dir: 1;
  --hg-fan-ease: cubic-bezier(0.22, 0.75, 0.25, 1);
  --hg-fan-time: 0.6s;
  position: relative;
  overflow: clip;
  padding-block: var(--hg-fan-pad-top, 72px) var(--hg-fan-pad-bottom, 72px);
  background-color: var(--hg-fan-bg, transparent);
  color: var(--hg-fan-text, var(--hg-text));
}
.hg-fan:dir(rtl) { --hg-fan-dir: -1; }

.hg-fan__inner {
  box-sizing: border-box;
  max-width: 1300px;
  margin-inline: auto;
  padding-inline: 20px;
}

/* Head: at the start, like the product rows above and below. */
.hg-fan .hg-fan__eyebrow {
  margin-block-end: 10px;
  color: var(--hg-fan-accent, var(--hg-accent));
  font-family: var(--hg-font-heading);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.hg-fan__accent { color: var(--hg-fan-accent, var(--hg-accent)); }
.hg-fan .hg-fan__text {
  max-width: 60ch;
  margin: 12px 0 0;
  color: inherit;
  font-size: 15px;
  line-height: 1.6;
}

/* Deck: every card shares one grid cell and is moved into its place in the fan. The padding
   above leaves room for a lifted card. Below, the outer cards' drop and tilt hang beside the
   caption, which is no wider than the centre card, so the padding only clears the cards next to
   the centre one. Vertical swipes still scroll the page; horizontal ones turn the hand. */
.hg-fan .hg-fan__deck {
  display: grid;
  place-items: end center;
  margin: 0;
  padding: calc(var(--hg-fan-w) * 0.1) 0 calc(var(--hg-fan-w) * 0.05);
  list-style: none;
  perspective: 1800px;
  touch-action: pan-y pinch-zoom;
}
.hg-fan__deck.is-pointer { --hg-fan-spread: 1.06; }
.hg-fan__card {
  --hg-fan-x: calc(var(--i) * var(--hg-fan-w) * var(--hg-fan-step) * var(--hg-fan-spread) * var(--hg-fan-dir));
  --hg-fan-y: calc(var(--a) * var(--hg-fan-w) * var(--hg-fan-drop) * var(--hg-fan-spread));
  --hg-fan-r: calc(var(--i) * var(--hg-fan-tilt) * var(--hg-fan-spread) * var(--hg-fan-dir) * var(--hg-fan-k, 1));
  --hg-fan-ry: calc(var(--i) * var(--hg-fan-turn) * var(--hg-fan-dir) * var(--hg-fan-k, 1) * -1);
  --hg-fan-s: calc((1 - var(--a) * var(--hg-fan-shrink)) * var(--hg-fan-pop, 1));
  position: relative;
  z-index: calc(10 - var(--a));
  grid-area: 1 / 1;
  min-width: 0;
  width: var(--hg-fan-w);
  transform:
    translate3d(var(--hg-fan-x), calc(var(--hg-fan-y) - var(--hg-fan-lift, 0px)), 0)
    rotate(var(--hg-fan-r))
    rotateY(var(--hg-fan-ry))
    scale(var(--hg-fan-s));
  transform-origin: 50% 100%;
  transition: transform var(--hg-fan-time) var(--hg-fan-ease);
}
/* While the hand is in play the cards stay on the compositor, so a card going back is not
   repainted halfway; at rest they are not promoted. */
.hg-fan__deck:is(.is-pointer, .is-turned, :focus-within) .hg-fan__card,
.hg-fan__card:is(.is-lifted, .is-settling) { will-change: transform; }

/* Dealt from a stack when the deck scrolls into view, middle card first. */
.hg-fan__deck.hg-reveal-pending:not(.hg-revealed) .hg-fan__card { opacity: 0; }
.hg-fan__deck.hg-revealed .hg-fan__card {
  animation: hg-fan-deal 0.9s var(--hg-fan-ease) backwards;
  animation-delay: calc(var(--a) * 110ms + 60ms);
}
/* Turning the hand rewrites --a, which the deal's delay reads; the deal must not run again. */
.hg-fan__deck.is-turned .hg-fan__card { animation: none; }
@keyframes hg-fan-deal {
  from {
    opacity: 0;
    transform: translate3d(0, 48px, 0) scale(0.84);
  }
}

/* The lifted card stands up, faces forward and comes to the front, as large as the centre card
   wherever it sits (owner, 2026-10-19). Without the script, keyboard focus still lifts a card. */
.hg-fan__card.is-lifted,
.hg-fan__card:has(.hg-fan__link:focus-visible) {
  --hg-fan-shrink: 0;
  --hg-fan-k: 0.2;
  --hg-fan-lift: calc(var(--hg-fan-w) * 0.05);
  --hg-fan-pop: 1.04;
  z-index: 20;
}
.hg-fan__card.is-settling { z-index: 15; }

/* Card face: the photo alone, framed like the product cards. */
.hg-fan .hg-fan__link {
  position: relative;
  display: block;
  border-radius: var(--hg-radius);
  color: inherit;
  text-decoration: none;
  box-shadow: 0 1px 2px rgb(26 24 22 / 0.1), 0 16px 30px -18px rgb(26 24 22 / 0.45);
  backface-visibility: hidden;
}
/* The deeper shadow of a lifted card fades in rather than animating box-shadow. */
.hg-fan .hg-fan__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  box-shadow: 0 30px 50px -22px rgb(26 24 22 / 0.5);
  opacity: 0;
  transition: opacity var(--hg-fan-time) ease;
  pointer-events: none;
}
.hg-fan__card:is(.is-lifted, :has(.hg-fan__link:focus-visible)) .hg-fan__link::after { opacity: 1; }
.hg-fan .hg-fan__link:focus-visible {
  outline: 2px solid var(--hg-text);
  outline-offset: 3px;
}
.hg-fan__media {
  display: block;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  border-radius: inherit;
  background: var(--hg-card-media-bg);
}
.hg-fan .hg-fan__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Caption: the lifted card's name and price, in the product cards' text face. */
.hg-fan__caption {
  display: grid;
  justify-items: center;
  margin-block-start: 6px;
}
.hg-fan .hg-fan__caption-item {
  display: grid;
  grid-area: 1 / 1;
  align-content: start;
  justify-items: center;
  gap: 5px;
  max-width: min(100%, 44ch, var(--hg-fan-w));
  margin: 0;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.hg-fan .hg-fan__caption-item.is-shown { opacity: 1; }
.hg-fan__name {
  font-size: 14px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.hg-fan__price {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.hg-fan__price ins {
  order: -1;
  text-decoration: none;
}
.hg-fan__price del {
  color: inherit;
  font-size: 12px;
  font-weight: 400;
  opacity: 0.7;
}

.hg-fan__actions {
  margin-block-start: 14px;
  text-align: center;
}

/* Phones: a bigger centre card and a tighter hand, the outer cards bleeding off the edges. */
@media (max-width: 749px) {
  .hg-fan {
    --hg-fan-w: 52vw;
    --hg-fan-step: 0.42;
    --hg-fan-tilt: 4deg;
    --hg-fan-turn: 8deg;
    --hg-fan-shrink: 0.12;
    padding-block: var(--hg-fan-pad-top-m, 48px) var(--hg-fan-pad-bottom-m, 48px);
  }
  /* The caption may run wider than the centre card here, over the next cards' drop. */
  .hg-fan .hg-fan__deck { padding-block-end: calc(var(--hg-fan-w) * 0.1); }
  .hg-fan .hg-fan__caption-item { max-width: min(100%, 44ch); }
  .hg-fan .hg-fan__text { font-size: 14px; }
  .hg-fan__name { line-height: 1.28; }
  .hg-fan__actions { margin-block-start: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .hg-fan__card,
  .hg-fan .hg-fan__link::after,
  .hg-fan .hg-fan__caption-item { transition: none; }
  .hg-fan__deck.hg-revealed .hg-fan__card { animation: none; }
}
/* Lite devices (html.hg-lite): the hand shows open, without the deal. */
.hg-lite .hg-fan__deck.hg-revealed .hg-fan__card { animation: none; }