/* ==========================================================================
 Our works carousel
 A flat row of the shop's photos that scrolls sideways with the browser's own scrolling (owner, 2026-11-07: smooth on
 phones, no rotating photos). On a phone the row follows the finger exactly and stops on one photo per swipe
 (scroll-snap-stop), as the owner asked on 2026-11-05. js/works-carousel.js adds the caption, the dots, the arrows,
 mouse dragging and the keys. Without the script it is still a working swipeable row.
 Only transforms and opacity animate.
 ========================================================================== */

/* A lit showroom: chrome silver at the top where the dark car animation ends, a white spotlight behind the open
   photo with a soft blue glow on the floor beneath it, and a faint diagonal reflection, like light across paint */
.works {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.5) 46%, transparent 62%),
    radial-gradient(40% 34% at 50% 58%, rgba(255, 255, 255, 0.9), transparent 72%),
    radial-gradient(60% 46% at 50% 72%, rgba(42, 93, 154, 0.14), transparent 70%),
    radial-gradient(50% 60% at 0% 0%, rgba(141, 180, 224, 0.22), transparent 60%),
    linear-gradient(180deg, var(--silver) 0%, var(--mist) 26%, var(--pearl) 60%, var(--mist) 100%);
}
.works::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.35;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .55 0 0 0 0 .62 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The deeper red and darker grey keep AA contrast on the silver */
.works :is(.works-head .kicker, .carousel-counter) {
  color: var(--red-dark);
}
.works :is(.carousel-caption p, .carousel-text) {
  color: var(--ink-2);
}
.works-head {
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  margin-bottom: 40px;
}
/* A soft sky blue at the very top of the section that fades out by the end of the description (owner, 2026-11-07).
   It spans the full width of the screen and starts above the head, at the top edge of the section */
.works-head::before {
  content: '';
  position: absolute;
  z-index: -1;
  top: -64px;
  bottom: 0;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background: linear-gradient(180deg, #d4e6f7 0%, rgba(212, 230, 247, 0.6) 45%, rgba(212, 230, 247, 0) 100%);
}
@media (min-width: 768px) {
  .works-head::before {
    top: -84px;
  }
}
/* Centred, the label sits between two tapered lines, as "CAR ACCESSORIES" does in the logo */
.works-head .kicker {
  gap: 14px;
}
.works-head .kicker::after {
  content: '';
  flex: none;
  width: 32px;
  height: 2px;
  border-radius: 2px;
  background: var(--accent-line);
}
.works-head h2 {
  margin-top: 16px;
  font-size: clamp(64px, 12vw, 148px);
  line-height: 0.92;
  letter-spacing: -0.04em;
  color: var(--ink);
}
.works-head h2 em {
  font-style: normal;
  color: var(--accent-ink);
}
.works-head .lead {
  margin-top: 24px;
  max-width: 32em;
  color: var(--ink-2);
}
@media (min-width: 768px) {
  .works-head {
    margin-bottom: 56px;
  }
}

/* Sizes live here. On a phone the open photo leaves room either side, so the next photo (and the one before)
   clearly peeks in and visitors can see there are more to swipe (owner, 2026-11-07). The open photo never outgrows
   the screen height left with the browser's bars showing (svh), so the photo, caption and buttons fit in view
   together on iPhone too */
.carousel {
  --carousel-photo-size: max(220px, min(100vw - 136px, 64vh));
  --carousel-gap: 10px;
  --carousel-radius: 16px;
  --carousel-print-size: calc(var(--carousel-photo-size) * 0.92);
  position: relative;
  display: grid;
  /* One column exactly as wide as the screen: without minmax(0, …) the column would grow to the whole row of photos,
     and the row could not scroll */
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 28px;
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
@supports (height: 100svh) {
  .carousel {
    --carousel-photo-size: max(220px, min(100vw - 136px, 100svh - 330px));
  }
}
@media (min-width: 768px) {
  .carousel {
    --carousel-photo-size: max(320px, min(100vw - 200px, 66vh, 560px));
    --carousel-gap: 28px;
    --carousel-radius: 18px;
  }
}
.carousel:focus-visible {
  box-shadow: 0 0 0 2px var(--blue);
}
.carousel-stage {
  position: relative;
  width: 100%;
  min-width: 0;
}

/* The row: native sideways scrolling that snaps each photo to the centre. Padding either side lets the first and last
   photos reach the centre too. It always runs left to right, in Arabic as well, so the order matches the dots */
.carousel-strip {
  position: relative;
  display: flex;
  gap: var(--carousel-gap);
  direction: ltr;
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: 10px 30px;
  padding-inline: calc(50% - var(--carousel-photo-size) / 2);
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc(50% - var(--carousel-photo-size) / 2);
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.carousel-strip::-webkit-scrollbar {
  display: none;
}
/* While the mouse drags the row, snapping waits until it is let go */
.carousel-strip.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
}
.carousel-slot {
  flex: none;
  width: var(--carousel-photo-size);
  scroll-snap-align: center;
  scroll-snap-stop: always;
}
/* The photo nearest the centre is full size; its neighbours sit a little smaller and softer, and grow as they arrive.
   js/works-carousel.js moves .is-active as the row scrolls */
.carousel-fold {
  width: 100%;
  height: var(--carousel-photo-size);
  transform: scale(0.94);
  opacity: 0.82;
  transition:
    transform 0.5s var(--ease-spring),
    opacity 0.5s var(--ease-spring);
}
.carousel-slot.is-active .carousel-fold,
.carousel:not(.is-ready) .carousel-fold {
  transform: none;
  opacity: 1;
}
.carousel-photo {
  position: relative;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--carousel-radius);
  overflow: hidden;
  cursor: pointer;
  background:
    radial-gradient(70% 40% at 50% 96%, rgba(42, 93, 154, 0.16), transparent 70%),
    radial-gradient(90% 70% at 50% 30%, #fff, #eef2f7);
  box-shadow:
    inset 0 0 0 1px rgba(42, 93, 154, 0.08),
    0 4px 20px rgba(42, 93, 154, 0.12),
    0 18px 44px rgba(20, 45, 80, 0.12);
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) {
  .carousel-strip {
    cursor: grab;
  }
  .carousel-slot:not(.is-active) .carousel-photo:hover {
    box-shadow:
      inset 0 0 0 1px rgba(42, 93, 154, 0.16),
      0 8px 26px rgba(42, 93, 154, 0.18),
      0 22px 50px rgba(20, 45, 80, 0.16);
  }
}
.carousel-photo:active {
  box-shadow:
    inset 0 0 0 1px rgba(42, 93, 154, 0.12),
    0 2px 10px rgba(42, 93, 154, 0.12);
}
/* Each photo is shown whole and unedited, like a print on a mount: its width and height in the HTML give its shape,
   and photos taller than they are wide carry class="is-tall" so they fit by height instead */
.carousel-photo img {
  display: block;
  width: var(--carousel-print-size);
  height: auto;
  max-width: none;
  border-radius: calc(var(--carousel-radius) - 6px);
  box-shadow:
    0 2px 6px rgba(20, 45, 80, 0.12),
    0 10px 28px rgba(42, 93, 154, 0.14);
  pointer-events: none;
  -webkit-user-drag: none;
}
.carousel-photo img.is-tall {
  width: auto;
  height: var(--carousel-print-size);
}
.carousel-photo::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(42, 93, 154, 0.1);
  pointer-events: none;
}
.carousel-photo:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 4px;
}
/* The viewfinder: a fine dark frame that stays in the centre while the photos pass beneath it */
.carousel-frame {
  position: absolute;
  left: 50%;
  top: 10px;
  width: calc(var(--carousel-photo-size) + 16px);
  height: calc(var(--carousel-photo-size) + 16px);
  margin: -8px 0 0 calc(var(--carousel-photo-size) / -2 - 8px);
  border: 2px solid rgba(16, 26, 41, 0.86);
  border-radius: calc(var(--carousel-radius) + 4px);
  pointer-events: none;
  z-index: 2;
}

.carousel-caption {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 104px;
  padding-inline: 20px;
  text-align: center;
}
.carousel-caption > * {
  animation: carousel-caption-in 0.4s var(--ease-spring) both;
}
.carousel-caption p {
  animation-delay: 0.05s;
}
.carousel-counter {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}
.carousel-caption h3 {
  font-size: clamp(30px, 4vw, 44px);
  line-height: 1.05;
}
.carousel-caption p {
  max-width: 30em;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}
@keyframes carousel-caption-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* The controls: a frosted pill holding two plain arrows and the dots. The open photo's dot stretches into a short bar.
   Its neighbours make room at once and the bar grows by transform, so only transforms animate */
.carousel-controls {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px;
  border-radius: 999px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.62);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow:
    inset 0 0 0 1px rgba(16, 26, 41, 0.1),
    0 1px 3px rgba(16, 26, 41, 0.08),
    0 10px 28px -12px rgba(16, 26, 41, 0.22);
}
.carousel-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  color: inherit;
  background: transparent;
  transition:
    transform 0.2s var(--ease-spring),
    background-color 0.2s ease,
    opacity 0.2s ease;
}
.carousel-button svg {
  width: 22px;
  height: 22px;
}
.carousel-button:hover:not(:disabled) {
  background: rgba(16, 26, 41, 0.07);
  transform: translateY(-1px);
}
.carousel-button:active:not(:disabled) {
  transform: scale(0.88);
  background: rgba(16, 26, 41, 0.12);
}
.carousel-button:disabled {
  opacity: 0.3;
  cursor: default;
}
.carousel-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 132px;
}
.carousel-dot {
  position: relative;
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: currentColor;
  opacity: 0.3;
  cursor: pointer;
  transition:
    opacity 0.3s ease,
    transform 0.3s var(--ease-spring);
}
.carousel-dot::after {
  content: '';
  position: absolute;
  inset: -12px -4px;
}
.carousel-dot:hover {
  opacity: 0.6;
}
.carousel-dot:active {
  transform: scale(0.8);
}
/* 8px stretched to 26px: 9px of room either side */
.carousel-dot[aria-current] {
  margin-inline: 9px;
  opacity: 1;
  transform: scaleX(3.25);
}
.carousel-dot[aria-current]:active {
  transform: scaleX(3);
}
:is(.carousel-button, .carousel-dot):focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* Without the script: the same swipeable row, each job's text under its photo */
.carousel:not(.is-ready) :is(.carousel-frame, .carousel-caption, .carousel-controls) {
  display: none;
}
.carousel.is-ready .carousel-text {
  display: none;
}
.carousel-text {
  max-width: var(--carousel-photo-size);
  margin-top: 12px;
  color: var(--muted);
  font-size: 15px;
}
.carousel-text strong {
  display: block;
  color: var(--ink);
}
@media (prefers-reduced-motion: reduce) {
  :is(.carousel-fold, .carousel-dot, .carousel-button) {
    transition: none !important;
  }
  .carousel-caption > * {
    animation: none;
  }
}