/* Our products: one card per BVS studio or product, routed from the hub's first screen.
   Interaction after 01.tech: tall cards side by side, the active one widens (grid columns
   animate), the others keep only their title. The art in each card is a CSS/SVG placeholder
   for the Blender renders of the sign (CLAUDE.md, Visual style). */

.pr { padding-top: clamp(64px, 8vw, 112px); }
.pr__head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: clamp(28px, 3.5vw, 44px); }
.pr__head h2 { max-width: none; }
.pr__head p { max-width: 38ch; color: var(--muted); font-size: 17px; line-height: 1.5; }

.pr__items {
  --ease: cubic-bezier(0.2, 1, 0.68, 1);
  display: flex;
  gap: 16px;
}

.pr__card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end;
  flex: 1 1 0; min-width: 0; height: clamp(460px, 44vw, 560px);
  transition: flex-grow 1.2s var(--ease);
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 24px;
  color: var(--text);
}
.pr__card:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* text: title always, description and button only on the wide card */
.pr__tag {
  position: absolute; top: clamp(22px, 2.4vw, 32px); left: clamp(22px, 2.4vw, 32px);
  font-size: 12px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 7px 12px; border-radius: 999px;
  background: color-mix(in srgb, currentColor 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}
.pr__body { position: relative; transition: padding-right 0.8s var(--ease); }
.pr__title { font-size: clamp(24px, 2.2vw, 30px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; }
.pr__desc {
  max-width: 34ch; max-height: 0; margin-top: 0; overflow: hidden;
  font-size: 16px; line-height: 1.5; color: var(--pr-muted);
  opacity: 0; transform: translateY(8px);
  transition: opacity 0.5s ease, transform 0.8s var(--ease), max-height 0.8s var(--ease), margin-top 0.8s var(--ease);
}
.pr__go {
  position: absolute; right: 0; bottom: 0;
  display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--pr-btn); color: var(--pr-btn-fg);
  opacity: 0; transform: scale(0.8);
  transition: opacity 0.5s ease, transform 0.8s var(--ease), background 0.2s;
}
.pr__go svg { width: 20px; height: 20px; }

/* which card is wide: the first by default, the hovered or focused one otherwise */
.pr__items:not(:has(> .pr__card:is(:hover, :focus-visible))) > .pr__card:first-child,
.pr__card:is(:hover, :focus-visible) { flex-grow: 2.3; }
.pr__items:not(:has(> .pr__card:is(:hover, :focus-visible))) > .pr__card:first-child :is(.pr__desc, .pr__go),
.pr__card:is(:hover, :focus-visible) :is(.pr__desc, .pr__go) { opacity: 1; transform: none; }
.pr__items:not(:has(> .pr__card:is(:hover, :focus-visible))) > .pr__card:first-child .pr__desc,
.pr__card:is(:hover, :focus-visible) .pr__desc { max-height: 10em; margin-top: 12px; }
.pr__items:not(:has(> .pr__card:is(:hover, :focus-visible))) > .pr__card:first-child .pr__body,
.pr__card:is(:hover, :focus-visible) .pr__body { padding-right: 72px; }
.pr__items:not(:has(> .pr__card:is(:hover, :focus-visible))) > .pr__card:first-child .pr__title,
.pr__card:is(:hover, :focus-visible) .pr__title { font-size: clamp(28px, 3vw, 40px); }
.pr__title { transition: font-size 0.8s var(--ease); }

.pr__art { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* ── all cards: one light studio; the dark element and the accent live on the objects ── */
.pr__card {
  --pr-muted: var(--muted);
  --pr-btn: var(--dark); --pr-btn-fg: var(--light);
  --pr-fade: #f6f7f8;
  background:
    radial-gradient(120% 70% at 65% 28%, #ffffff 0%, transparent 60%),
    linear-gradient(180deg, #dde1e4 0%, #eef0f2 62%, #f6f7f8 100%);
}
.pr__card:hover .pr__go { background: var(--accent); color: var(--on-accent); }

/* ── Design: the ultramarine machined sign ── */
.pr__card--design .pr__art::after {        /* floor shadow */
  content: ""; position: absolute; left: 50%; top: 58%; width: 40%; height: 8%;
  transform: translateX(-30%); border-radius: 50%;
  background: radial-gradient(closest-side, rgb(23 25 29 / 0.28), transparent);
  filter: blur(6px);
}
.pr__sign {
  position: absolute; left: 50%; top: 38%; width: min(50%, 250px); aspect-ratio: 1;
  transform: translate(-36%, -50%) rotate(-8deg);
  transition: transform 1.2s var(--ease);
}
.pr__card--design:hover .pr__sign { transform: translate(-36%, -53%) rotate(-4deg); }
.pr__sign svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

/* ── AI automation: a field of porcelain asset plates, a few in carbon, one lit in ultramarine ── */
.pr__plates {
  position: absolute; left: 50%; top: 36%; width: 150%;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 3.2%;
  transform: translate(-50%, -50%) rotateX(56deg) rotateZ(-38deg);
  transition: transform 1.2s var(--ease);
}
.pr__card--auto:is(:hover, :focus-visible) .pr__plates { transform: translate(-50%, -52%) rotateX(52deg) rotateZ(-34deg); }
.pr__plates i {
  aspect-ratio: 4 / 5; border-radius: 8%;
  background: linear-gradient(150deg, #ffffff 0%, #eef0f2 50%, #d9dee2 100%);
  box-shadow: inset 0 1px 0 #fff, 0 14px 22px rgb(23 25 29 / 0.14);
}
.pr__plates i:nth-child(7n+3), .pr__plates i:nth-child(11n+5) {
  background: linear-gradient(150deg, #474c55 0%, #2a2d33 50%, #17191d 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 16px 24px rgb(23 25 29 / 0.28);
}
.pr__plates i.on {
  position: relative;
  background: linear-gradient(150deg, #6f8bff 0%, #244cff 45%, #1636c9 100%);
  box-shadow: 0 0 40px rgb(36 76 255 / 0.5), 0 18px 26px rgb(23 25 29 / 0.3);
}
.pr__plates i.on svg { position: absolute; inset: 22%; width: 56%; height: 56%; fill: #ffffff; }
.pr__card--auto .pr__art::after {          /* fade the plate field into the text area */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 42%, var(--pr-fade) 86%);
}

/* ── Development with AI: a stack of layers: carbon base, ultramarine core, porcelain top ── */
.pr__stack {
  position: absolute; left: 50%; top: 34%; width: min(58%, 260px); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: transform 1.2s var(--ease);
}
.pr__card--dev:is(:hover, :focus-visible) .pr__stack { transform: translate(-50%, -54%); }
.pr__stack i {
  position: absolute; inset: 0; border-radius: 10%;
  transform: translateY(var(--y)) rotateX(58deg) rotateZ(-45deg);
  transition: transform 1.2s var(--ease);
}
.pr__stack i:nth-child(1) { --y: 34%; background: linear-gradient(135deg, #474c55 0%, #2a2d33 50%, #17191d 100%); box-shadow: 0 30px 40px rgb(23 25 29 / 0.32); }
.pr__stack i:nth-child(2) { --y: 17%; background: linear-gradient(135deg, #6f8bff 0%, #244cff 50%, #1636c9 100%); box-shadow: 0 0 46px rgb(36 76 255 / 0.45); }
.pr__stack i:nth-child(3) { --y: 0%; background: linear-gradient(135deg, #ffffff 0%, #eef0f2 50%, #d3d8dc 100%); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgb(23 25 29 / 0.05); }
.pr__card--dev:is(:hover, :focus-visible) .pr__stack i:nth-child(1) { --y: 44%; }
.pr__card--dev:is(:hover, :focus-visible) .pr__stack i:nth-child(3) { --y: -8%; }
.pr__stack svg { position: absolute; inset: 24%; width: 52%; height: 52%; fill: var(--accent); }

/* ── phones: still one row, swiped like a carousel; every card open ── */
@media (max-width: 700px) {
  .pr__items {
    margin: 0 calc(-1 * var(--gutter)); padding: 0 var(--gutter);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter);
    scrollbar-width: none;
  }
  .pr__items::-webkit-scrollbar { display: none; }
  .pr__card, .pr__card:is(:hover, :focus-visible) { flex: 0 0 86%; scroll-snap-align: start; }
  .pr__card { height: clamp(470px, 132vw, 560px); }
  .pr__card .pr__body { padding-right: 72px; }
  .pr__card .pr__desc, .pr__card .pr__go { opacity: 1; transform: none; }
  .pr__card .pr__desc { max-height: none; margin-top: 12px; }
  .pr__card .pr__title { font-size: 30px; }
  .pr__sign { top: 31%; width: 46%; }
  .pr__card--design .pr__art::after { top: 46%; }
  .pr__plates { top: 30%; }
  .pr__stack { top: 30%; width: 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .pr__card, .pr__desc, .pr__go, .pr__sign, .pr__plates, .pr__stack, .pr__stack i { transition: none; }
}