/* FAICHAK SPORT STORE - the studio stage behind a product: catalog cards (.pcard__photo.stage) and the
   product gallery (.gallery.stage, moved by gallery.js). Drawn in CSS, no photo: a back wall with a key
   light from the right, a light pool on the floor (the shoe studio of design/site-2.pdf), film grain and a
   soft shadow under the product. Every product type has its own studio. Loaded after shop.css. */

.stage {
  --wall: #2b1512;                    /* back wall */
  --key: rgba(120, 34, 14, .62);      /* key light from the right */
  --pool: #b93d1b;                    /* light pool on the floor */
  --floor: #47160b;                   /* floor edge under the pool */
  --shade-w: 50%;                     /* floor shadow width (cards) */
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(58% 30% at 50% 100%, var(--pool), transparent),
    radial-gradient(75% 55% at 92% 34%, var(--key), transparent),
    linear-gradient(var(--wall) 35%, var(--floor));
}
/* Grain against gradient banding, and a vignette */
.stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 90% at 50% 55%, transparent 55%, rgba(0, 0, 0, .34)),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  pointer-events: none;
}
/* Floor shadow under the product (the gallery draws one per slide instead) */
.stage::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 50%;
  bottom: 18.5%;
  width: var(--shade-w);
  height: 6%;
  translate: -50% 50%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, .28) 55%, transparent);
  pointer-events: none;
}
.stage__product { position: relative; z-index: 1; user-select: none; -webkit-user-drag: none; }

/* Studios. Shoes = the design's warm red; the light pools of the others keep the same depth, so the white
   name over them stays readable */
.stage--shoes { --shade-w: 64%; }
.stage--tennis {
  --wall: #1b1a0f;
  --key: rgba(104, 98, 36, .58);
  --pool: #7a742d;
  --floor: #2c2a12;
  --shade-w: 30%;
}
/* Padel: blue glass of the court walls, with a reflection across it */
.stage--padel {
  --wall: #0c171c;
  --key: rgba(34, 96, 120, .6);
  --pool: #2a7492;
  --floor: #0d2a35;
  --shade-w: 38%;
  background:
    linear-gradient(112deg, transparent 22%, rgba(190, 232, 244, .06) 30%, rgba(190, 232, 244, .02) 38%, transparent 39%, transparent 58%, rgba(190, 232, 244, .04) 63%, transparent 68%),
    radial-gradient(58% 30% at 50% 100%, var(--pool), transparent),
    radial-gradient(75% 55% at 92% 34%, var(--key), transparent),
    linear-gradient(var(--wall) 35%, var(--floor));
}
/* Overgrips and the other small things (grips, strings, dampeners, the rest): a graphite table under a warm
   cream light, the packs bring the colour */
.stage--overgrip, .stage--grip, .stage--strings, .stage--dampener, .stage--other {
  --wall: #19171a;
  --key: rgba(96, 90, 82, .5);
  --pool: #73695c;
  --floor: #262321;
  --shade-w: 54%;
}
/* Clothing: a deep court-green fitting room */
.stage--clothing, .stage--headwear, .stage--socks, .stage--wristband {
  --wall: #0e1813;
  --key: rgba(44, 98, 72, .55);
  --pool: #3a6e55;
  --floor: #13261d;
  --shade-w: 46%;
}
/* Bags: warm leather brown */
.stage--racket-bag, .stage--backpack, .stage--sport-bag {
  --wall: #1c140f;
  --key: rgba(112, 72, 40, .55);
  --pool: #7c5332;
  --floor: #2c1d13;
  --shade-w: 62%;
}
/* Balls take the studio of their game */
.stage--balls { --wall: #1b1a0f; --key: rgba(104, 98, 36, .58); --pool: #7a742d; --floor: #2c2a12; --shade-w: 40%; }
.stage--padel-balls { --wall: #0c171c; --key: rgba(34, 96, 120, .6); --pool: #2a7492; --floor: #0d2a35; --shade-w: 40%; }

/* The price panel under a card takes its studio's tint (shop.css reads --panel) */
.pcard--shoes { --panel: rgba(95, 28, 14, .75); }
.pcard--tennis, .pcard--balls { --panel: rgba(62, 58, 22, .82); }
.pcard--padel, .pcard--padel-balls { --panel: rgba(14, 48, 62, .82); }
.pcard--overgrip, .pcard--grip, .pcard--strings, .pcard--dampener, .pcard--other { --panel: rgba(58, 53, 48, .84); }
.pcard--clothing, .pcard--headwear, .pcard--socks, .pcard--wristband { --panel: rgba(20, 54, 38, .82); }
.pcard--racket-bag, .pcard--backpack, .pcard--sport-bag { --panel: rgba(70, 44, 24, .82); }

/* Card: the product floats in a box clear of the discount mark (top left) and the name (bottom), in the box's
   middle, so a flat one (a shoe from the side, a bag) is not left low with the card empty above it (Milush 30.10:
   "кроссовки низковато находятся"). Its floor shadow rises under it: --r = the photo's height / width
   (build.py, gallery.js), a photo wider than the box is drawn 76% * 520/600 * r of the card high, not 66% */
.pcard__photo.stage .stage__product {
  position: absolute;
  top: 11%;
  left: 12%;
  width: 76%;
  height: 66%;
  object-fit: contain;
  object-position: 50% 50%;
  /* a swiped one shrinks onto its own bottom, not the box's (the box is as high as wide: 76% * 520/600 = 66%) */
  transform-origin: 50% calc(50% + min(50%, 49.9% * var(--r, 1)));
}
.pcard__photo.stage::after { bottom: calc(18.5% + max(0%, 66% - 76% * 520 / 600 * var(--r, 1)) / 2); }

/* Gallery: one stage, the products slide across it (gallery.js). Each slide carries its own floor shadow
   so the shadow leaves with its product. The product sits in the middle of its box like on a card (Milush
   30.10: "давай повыше и на карточке товара"), --lift = the room under it (gallery.js) raises its shadow */
.gallery { --r: 28px; aspect-ratio: 820 / 860; border-radius: var(--r); box-shadow: 4px 4px 18px rgba(0, 0, 0, .31); }
.gallery.stage::after { content: none; }
.gallery__viewport { position: absolute; inset: 0; z-index: 1; overflow: hidden; border-radius: inherit; touch-action: pan-y pinch-zoom; }
.gallery__viewport:focus-visible { outline: 2px solid var(--yellow); outline-offset: -6px; }
.gallery__track { display: flex; height: 100%; }
.gallery.is-ready .gallery__track { overflow: visible; scroll-snap-type: none; }
.gallery__slide { --d: 0; --a: 0; position: relative; flex: 0 0 100%; min-width: 0; height: 100%; aspect-ratio: auto; padding: 9% 11% 21%; }
.gallery__slide .stage__product {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 50%;
  transform-origin: 50% calc(100% - var(--lift, 0px));
  /* Leaving the centre: lags behind its slide, so it seems to step back into the same studio rather than
     ride away with it - shrinks, recedes up the floor and fades. No blur filter: Safari draws a filtered
     photo soft (and can leave a stray coloured line) until the filter is exactly zero */
  transform: translate(calc(var(--d) * -42%), calc(var(--a) * -7%)) scale(calc(1 - var(--a) * .32));
  opacity: clamp(0, calc(1 - var(--a) * 1.15), 1);
}
.gallery__slide::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(16.5% + var(--lift, 0px));
  width: calc(var(--pw, 40%) * .92);
  height: 6%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .6), rgba(0, 0, 0, .26) 55%, transparent);
  transform: translate(calc(-50% + var(--d) * -34%), calc(var(--a) * -90%)) scale(calc(1 - var(--a) * .36));
  opacity: clamp(0, calc(1 - var(--a) * 1.3), 1);
  pointer-events: none;
}
.gallery.is-ready .gallery__viewport { cursor: grab; }
.gallery.is-dragging .gallery__viewport { cursor: grabbing; }

/* Arrows: discs at the sides, a chevron drawn in CSS; dots under the floor */
.gallery__prev, .gallery__next {
  position: absolute;
  z-index: 2;
  top: 50%;
  display: none;
  width: 48px;
  height: 48px;
  margin-top: -24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .34);
  color: var(--cream);
  cursor: pointer;
  transition: background-color .2s, color .2s, opacity .2s;
}
.gallery.is-ready .gallery__prev, .gallery.is-ready .gallery__next { display: block; }
.gallery__prev { left: 14px; }
.gallery__next { right: 14px; }
.gallery__prev::before, .gallery__next::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 11px;
  height: 11px;
  border: solid currentColor;
  border-width: 0 0 2.5px 2.5px;
  translate: -30% -50%;
  rotate: 45deg;
}
.gallery__next::before { translate: -70% -50%; rotate: -135deg; }
.gallery__prev:hover:not(:disabled), .gallery__next:hover:not(:disabled) { background: var(--yellow); color: #000; }
.gallery__prev:disabled, .gallery__next:disabled { opacity: 0; cursor: default; }
.gallery__dots { position: absolute; z-index: 2; left: 0; right: 0; bottom: 5%; display: flex; justify-content: center; gap: 4px; }
.gallery__dot { position: relative; width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; }
.gallery__dot::before { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 4px; background: rgba(253, 248, 238, .45); transition: width .3s var(--ease), margin .3s var(--ease), background-color .3s; }
.gallery__dot:hover::before { background: var(--cream); }
.gallery__dot[aria-current]::before { width: 22px; margin-left: -11px; background: var(--yellow); }

/* A catalog card with more photos: the same gallery on the card's stage (gallery.js). At rest the product
   keeps the card's box and floor shadow; the dots sit over the name, the name and the discount mark let the
   swipe through, and so do the dots on touch screens (a finger swipes, the pointer clicks a dot) */
.pcard__photo.is-ready::after { content: none; }
.pcard__photo .gallery__track { overflow: visible; scroll-snap-type: none; }
.pcard__photo .gallery__slide { padding: 0; }
.pcard__photo .gallery__slide::after {
  bottom: calc(15.5% + max(0%, 66% - 76% * 520 / 600 * var(--r, 1)) / 2);
  width: var(--shade-w);
  background: radial-gradient(closest-side, rgba(0, 0, 0, .62), rgba(0, 0, 0, .28) 55%, transparent);
}
.pcard__photo.is-ready :is(.pcard__tag, .pcard__text) { pointer-events: none; }
.pcard__text .gallery__dots { position: static; }
@media (hover: hover) {
  .pcard__text .gallery__dots { pointer-events: auto; }
  /* The pointer on a card (or Tab on it): the product page's arrows fade in at the product's middle, the
     product rises a little off the floor and its shadow tightens (Milush 29.10: "чуть-чуть вернуть анимацию
     выделения, легкую"). A whole-pixel rise: the 27.10 lift of 2.5% left the photo soft */
  .pcard__photo.is-ready .gallery__prev, .pcard__photo.is-ready .gallery__next { display: block; top: 44%; width: 40px; height: 40px; margin-top: -20px; opacity: 0; }
  .pcard__photo .gallery__prev { left: 10px; }
  .pcard__photo .gallery__next { right: 10px; }
  .pcard__link:is(:hover, :focus-visible) .pcard__photo :is(.gallery__prev, .gallery__next) { opacity: 1; }
  .pcard__photo :is(.gallery__prev, .gallery__next):disabled { visibility: hidden; }
  .pcard__link:is(:hover, :focus-visible) .stage__product { translate: 0 -5px; }
  .pcard__link:is(:hover, :focus-visible) .pcard__photo::after,
  .pcard__link:is(:hover, :focus-visible) .gallery__slide::after { scale: .9; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .pcard__photo .stage__product, .pcard__photo::after, .pcard__photo .gallery__slide::after { transition: translate .4s var(--ease), scale .4s var(--ease); }
}

/* Phones: swipe, no arrows */
@media (hover: none) {
  .gallery.is-ready .gallery__prev, .gallery.is-ready .gallery__next { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .gallery__slide .stage__product { transform: none; opacity: 1; }
  .gallery__slide::after { transform: translateX(-50%); opacity: 1; }
  .gallery__dot::before { transition: none; }
}

/* Desktop: design pixels */
@media (min-width: 1152px) {
  .gallery { --r: calc(42 * var(--u)); box-shadow: calc(7 * var(--u)) calc(7 * var(--u)) calc(36 * var(--u)) rgba(0, 0, 0, .31); }
  .gallery__prev, .gallery__next { width: calc(62 * var(--u)); height: calc(62 * var(--u)); margin-top: calc(-31 * var(--u)); }
  .gallery__prev { left: calc(22 * var(--u)); }
  .gallery__next { right: calc(22 * var(--u)); }
  .gallery__prev::before, .gallery__next::before { width: calc(14 * var(--u)); height: calc(14 * var(--u)); border-width: 0 0 calc(3 * var(--u)) calc(3 * var(--u)); }
  .gallery__dots { gap: calc(6 * var(--u)); }
  .gallery__dot { width: calc(34 * var(--u)); height: calc(34 * var(--u)); }
  .gallery__dot::before { width: calc(10 * var(--u)); height: calc(10 * var(--u)); margin: calc(-5 * var(--u)) 0 0 calc(-5 * var(--u)); border-radius: calc(5 * var(--u)); }
  .gallery__dot[aria-current]::before { width: calc(28 * var(--u)); margin-left: calc(-14 * var(--u)); }
}