/**
 * Prime Printing — homepage
 *
 * Hero, service ticker, shuffling wall, configurator strip, client marquee.
 * Follows prime-printing-theme-motion.html.
 *
 * Every marquee here works the same way: the row is rendered twice in the
 * markup and translated by exactly -50%, so the second copy arrives in the
 * space the first vacates and the loop has no visible seam.
 */

/* ---- Shared marquee keyframes ------------------------------------------ */
@keyframes prime-slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@keyframes prime-drift-up {
  from { transform: translateY(0); }
  to   { transform: translateY(-50%); }
}

@keyframes prime-drift-down {
  from { transform: translateY(-50%); }
  to   { transform: translateY(0); }
}

/* ---- Hero --------------------------------------------------------------- */
.prime-hero {
  position: relative;
  block-size: 100vh;
  min-block-size: 660px;
  background: var(--navy-deep);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.prime-hero__streams {
  position: absolute;
  inset: -10% -2%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  transform: rotate(-8deg) scale(1.25);
  opacity: .42;
}

.prime-hero__col {
  display: flex;
  flex-direction: column;
  gap: 14px;
  will-change: transform;
}

.prime-hero__col img {
  inline-size: 100%;
  block-size: 230px;
  object-fit: cover;
}

/* Four different durations so the columns never fall into step. */
.prime-hero__col--a { animation: prime-drift-up 42s linear infinite; }
.prime-hero__col--b { animation: prime-drift-down 52s linear infinite; }
.prime-hero__col--c { animation: prime-drift-up 60s linear infinite; }
.prime-hero__col--d { animation: prime-drift-down 46s linear infinite; }

.prime-hero__veil {
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse at center,
    rgba(8, 19, 42, .86) 0%,
    rgba(8, 19, 42, .94) 55%,
    var(--navy-deep) 100%
  );
}

.prime-hero__text {
  position: relative;
  text-align: center;
  color: var(--on-navy);
  padding-inline: var(--sp-6);
  max-inline-size: 960px;
}

.prime-hero__text .prime-eyebrow { margin-block-end: var(--sp-7); }

.prime-hero h1 {
  font-family: var(--display);
  font-weight: var(--fw-thin);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: .01em;
  color: var(--on-navy);
}

.prime-hero h1 em {
  font-style: normal;
  color: var(--sky);
}

.prime-hero__lede {
  margin: var(--sp-6) auto var(--sp-9);
  max-inline-size: 520px;
  color: var(--on-navy-soft);
  font-size: var(--fs-lead);
}

.prime-hero__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}

.prime-hero__cue {
  position: absolute;
  inset-block-end: var(--sp-8);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-xs);
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--on-navy-faint);
  text-align: center;
}

.prime-hero__cue i {
  display: block;
  inline-size: 1px;
  block-size: 34px;
  background: linear-gradient(rgba(124, 165, 196, .9), transparent);
  margin: var(--sp-3) auto 0;
}

/* ---- Service ticker ----------------------------------------------------- */
.prime-ticker {
  background: var(--navy);
  color: var(--on-navy);
  padding-block: var(--sp-5);
  overflow: hidden;
  white-space: nowrap;
  border-block-start: 1px solid rgba(255, 255, 255, .1);
}

.prime-ticker__row {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  animation: prime-slide 34s linear infinite;
  font-family: var(--display);
  font-size: var(--fs-body-lg);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-weight: var(--fw-light);
  color: rgba(255, 255, 255, .9);
}

.prime-ticker:hover .prime-ticker__row,
.prime-ticker:focus-within .prime-ticker__row { animation-play-state: paused; }

/* ---- Shuffling wall ----------------------------------------------------- */
.prime-wall-section {
  padding-block: var(--sp-12) 100px;
  background: var(--mist);
}

.prime-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Dense packing: the tall and wide tiles land in a different order after
     every shuffle, and without it the grid leaves holes that read as failed
     image loads rather than as layout. */
  grid-auto-flow: row dense;
  gap: var(--sp-4);
}

.prime-tile {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  aspect-ratio: 1 / 1;
  transition: transform .55s var(--ease-out), opacity .5s;
}

.prime-tile--tall {
  grid-row: span 2;
  aspect-ratio: 1 / 2.08;
}

.prime-tile--wide {
  grid-column: span 2;
  aspect-ratio: 2.08 / 1;
}

.prime-tile a {
  display: block;
  block-size: 100%;
}

.prime-tile img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  opacity: .8;
  transition: transform .8s var(--ease-image), opacity var(--dur-slow);
}

.prime-tile:hover img,
.prime-tile:focus-within img {
  transform: scale(1.07);
  opacity: 1;
}

.prime-tile figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-5);
  background: linear-gradient(
    to top,
    rgba(8, 19, 42, .94),
    rgba(8, 19, 42, .2) 70%,
    transparent
  );
  color: var(--on-navy);
}

.prime-tile__name {
  font-family: var(--display);
  font-size: var(--fs-lead);
  letter-spacing: var(--track-tight);
  text-transform: uppercase;
  font-weight: var(--fw-light);
  /* Tighter than the body's 1.65 — a two-line product name in a caption reads
     as one label, not as prose. */
  line-height: 1.25;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

/* Names wrap to two lines often enough (“Packaging & boxes”, “Catalogs &
   booklets”) that centring the mark against the whole block leaves it floating
   beside the gap. Pin it to the first line instead: half the difference between
   the line box and the 9px square. */
.prime-tile__name .prime-mark { margin-block-start: .32em; }

.prime-tile__price {
  display: block;
  font-size: var(--fs-nav);
  color: var(--sky);
  letter-spacing: .08em;
  margin-block-start: 5px;
  opacity: 0;
  transform: translateY(6px);
  transition: .35s;
}

.prime-tile:hover .prime-tile__price,
.prime-tile:focus-within .prime-tile__price {
  opacity: 1;
  transform: none;
}

/* WooCommerce wraps price ranges in its own markup; keep it on-brand. */
.prime-tile__price .woocommerce-Price-amount { color: inherit; }
.prime-tile__price del { opacity: .6; }
.prime-tile__price ins { text-decoration: none; }

/* The reshuffle fades the wall out, reorders, and fades it back. */
.prime-wall.is-shuffling .prime-tile {
  opacity: 0;
  transform: scale(.94);
}

.prime-wall__more {
  margin-block-start: var(--sp-10);
  text-align: center;
}

/* ---- Configurator ------------------------------------------------------- */
.prime-configurator {
  background: var(--navy-deep);
  color: var(--on-navy);
  padding-block: 92px;
}

.prime-configurator .prime-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.prime-configurator h2 {
  font-family: var(--display);
  font-weight: var(--fw-thin);
  font-size: var(--fs-cfg);
  line-height: var(--lh-heading);
  margin-block: var(--sp-5);
  color: var(--on-navy);
}

.prime-configurator__copy > p:not(.prime-eyebrow) {
  color: rgba(255, 255, 255, .68);
  max-inline-size: 420px;
  margin-block-end: var(--sp-8);
}

.prime-pillrow {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  list-style: none;
}

.prime-pill {
  border: 1px solid rgba(255, 255, 255, .22);
  padding: 9px var(--sp-4);
  font-size: var(--fs-nav);
  letter-spacing: var(--track-tight);
  color: rgba(255, 255, 255, .8);
  transition: var(--dur);
}

.prime-pill:hover {
  border-color: var(--sky);
  color: var(--on-navy);
}

.prime-calc {
  background: var(--paper);
  color: var(--ink);
  padding: var(--sp-8);
}

.prime-calc h3 {
  font-family: var(--display);
  font-weight: var(--fw-normal);
  font-size: var(--fs-body-sm);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--navy);
  margin-block-end: var(--sp-6);
  display: flex;
  align-items: center;
  gap: 10px;
}

/* The duo wrapper is itself a .prime-field, so it must not inherit the
   bottom margin twice. */
.prime-calc .prime-field--duo { margin-block-end: 0; }

.prime-calc__total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-4);
  border-block-start: 1px solid var(--line);
  padding-block-start: var(--sp-5);
  margin-block-start: var(--sp-6);
}

.prime-calc__total span {
  font-size: var(--fs-sm);
  letter-spacing: var(--track-btn);
  text-transform: uppercase;
  color: var(--ink-soft);
}

.prime-calc__total b {
  font-family: var(--display);
  font-size: 31px;
  font-weight: var(--fw-light);
  color: var(--navy);
  transition: color .2s;
  white-space: nowrap;
}

/* Flashes sky on recalculation, so the number is visibly live. */
.prime-calc__total b.is-updated { color: var(--sky); }

.prime-calc__note {
  font-size: var(--fs-nav);
  color: var(--ink-soft);
  margin-block-start: var(--sp-2);
}

.prime-calc .prime-btn { margin-block-start: var(--sp-5); }

/* ---- Client marquee ----------------------------------------------------- */
.prime-clients {
  padding-block: 64px;
  overflow: hidden;
  border-block: 1px solid var(--line);
}

.prime-clients__label {
  justify-content: center;
  margin-block-end: var(--sp-8);
}

.prime-clients__track {
  white-space: nowrap;
  overflow: hidden;
}

.prime-clients__row {
  display: inline-flex;
  align-items: center;
  gap: 64px;
  animation: prime-slide 40s linear infinite;
  white-space: nowrap;
}

.prime-clients__row img {
  block-size: 34px;
  inline-size: auto;
  filter: grayscale(1);
  opacity: .45;
  transition: .35s;
}

.prime-clients__row img:hover {
  filter: none;
  opacity: 1;
}

.prime-clients:hover .prime-clients__row { animation-play-state: paused; }

/* ---- Trailing page content --------------------------------------------- */
.prime-home__content { padding-block: var(--sp-12); }

/* ---- Breakpoints -------------------------------------------------------- */
@media (max-width: 1000px) {
  .prime-configurator .prime-wrap {
    grid-template-columns: 1fr;
    gap: 44px;
  }

  .prime-wall { grid-template-columns: repeat(2, 1fr); }
  .prime-hero__streams { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 560px) {
  .prime-hero { min-block-size: 560px; }

  .prime-wall-section { padding-block: var(--sp-10) var(--sp-11); }

  /* Two up on phones, matching the shop grid's mobile density. The tall and
     wide spans are dropped: at this width a 2-up wide tile is a full-bleed
     band and a tall one pushes the next row off-screen. */
  .prime-wall {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--sp-3);
  }

  .prime-tile--wide,
  .prime-tile--tall {
    grid-column: auto;
    grid-row: auto;
    aspect-ratio: 1 / 1;
  }

  /* Hover cannot reveal the price on touch, so it is always visible. */
  .prime-tile__price {
    opacity: 1;
    transform: none;
  }

  .prime-tile figcaption { padding: var(--sp-3); }

  .prime-tile__name {
    font-size: var(--fs-body-sm);
    gap: 6px;
  }

  .prime-tile__price { font-size: var(--fs-sm); }

  .prime-sechead {
    margin-block-end: var(--sp-6);
    gap: var(--sp-4);
  }

  .prime-shuffle { inline-size: 100%; justify-content: center; }

  .prime-configurator { padding-block: var(--sp-11); }
  .prime-calc { padding: var(--sp-5); }
  .prime-calc__total b { font-size: 26px; }

  .prime-ticker__row {
    font-size: var(--fs-body-sm);
    gap: var(--sp-6);
  }

  .prime-clients__row { gap: var(--sp-8); }
  .prime-clients__row img { block-size: 26px; }
}

/* ---- Motion preference -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .prime-hero__streams { opacity: .3; }
  .prime-wall.is-shuffling .prime-tile { opacity: 1; transform: none; }
}