/* ============================================================================
   ASTROVE — PDP MEDIA COMPONENT + MUSEUM BLACK

   BLACK IS ARCHITECTURE.  PRODUCT IS LIGHT.  SKU COLOUR IS INSTRUMENTATION.

   This file does two things and nothing else:
     1. turns the specimen-story environment to Museum Black
     2. styles the three-shot media component that replaces the old single image

   It does NOT touch the information architecture. The index, name, lead, spec,
   assurances, commerce, lens matrix and the four overlays are untouched and keep
   their existing rules in landing.css.
   ========================================================================== */

/* --- 1. MUSEUM BLACK --------------------------------------------------------
   The bays used to carry a full-viewport SKU colour field: two accent radials
   over a linear fall to that fruit's deep tone (--field-ember, --field-orchid,
   --field-forest). That is the amber/purple/green world the direction moved
   away from, and it was also fighting the product — a warm field behind a warm
   pack leaves the pouch nothing to read against, which the __shape comment in
   landing.css had already diagnosed once.

   The ground is now neutral and IDENTICAL for all three SKUs. --specimen-accent
   is deliberately left intact so every instrumentation mark downstream — index,
   counter, hairline, active station, scan trace, focus — still resolves per SKU.
   Identity moves from the room to the object. */
.specimen-story {
  background: linear-gradient(136deg, #0a0a0d, #070709 58%, #050506);
}

/* SKU accent, corrected to the approved values. Production still carried the
   legacy tokens — jamun on --sku-jamun-bright #bb55ff (neon violet) and
   pineapple on #c9ff2b (chartreuse). Neither matches its fruit or the approved
   direction: the delivered product-truth masters average #e07f0c, #8a2345 and
   #edc064 across their opaque subject pixels, so jamun is a true wine and the
   violet was never right. Mango already resolved to #ffa50a and is unchanged.

   This is a ONE-LINE-PER-SKU token change, not a redesign. Everything that
   consumes --specimen-accent — index, counter, hairline, active station, scan
   trace, assurance marks, lens borders, CTA detail — simply resolves correctly.
   Revert these two declarations to restore the legacy palette exactly. */
.specimen-story--jamun     { --specimen-accent: #c2506f; }
.specimen-story--pineapple { --specimen-accent: #9fb840; }

/* The diagonal scan trace survives; it is a hairline, not a field. Slightly
   lifted because it now reads against black rather than against a lit bay. */
.specimen-story::after {
  opacity: 0.42;
}

/* The accent-tinted third drop-shadow measured rgb(54,37,9) beneath the pouch —
   brown — and was the single reason PURE VOID still read as a lit room in the
   dark-field lab. It and its :hover escalation to 25% are cancelled here; the
   media component sets its own neutral grounding per shot below. */
.specimen-story__visual img,
.specimen-story:hover .specimen-story__visual img {
  filter: none;
}

/* --- 2. THE MEDIA COMPONENT ------------------------------------------------
   A fixed-ratio stage holding three stacked shots. The ratio never changes and
   nothing is inserted or removed on a state change, so the stage cannot resize
   and nothing below it can move.

   `.specimen-story__visual` is a grid with place-items:center, which shrink-wraps
   its child — measured, that collapsed the whole component to 60x60. The media
   block has to be told to fill its column. */
.pdp-media {
  position: relative;
  display: grid;
  justify-self: stretch;
  align-self: center;
  width: 100%;
}

.pdp-media__stage {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
}
.pdp-media__stage:focus-visible { outline: 1px solid var(--specimen-accent); outline-offset: 6px; }

.pdp-media__shot {
  position: absolute;
  inset: 0;
  /* <figure> ships a UA margin of 1em 40px. With inset:0 that silently shrinks
     every shot inside its stage — measured 278x326 in a 358 box. */
  margin: 0;
  opacity: 0;
  visibility: hidden;
  /* `visibility` has to be transitioned too, or this is not a cross-fade.
     Transitioning opacity alone let the outgoing shot flip to hidden the instant
     it lost [data-active], so the stage went to bare Museum Black and the
     incoming shot faded UP from black — measured mean stage luminance through
     PACK->TRUTH: 83.9 steady, 26.7 during, 51.0 steady, a dip below both ends.

     visibility is a discrete property, so a 0s duration with a delay equal to
     the fade holds the outgoing shot visible for the whole 460ms and then drops
     it in one step. The active rule below cancels that delay so the INCOMING
     shot becomes visible immediately instead of waiting 460ms to appear.
     Duration and easing are unchanged; both shots are now on screen together,
     and because they share one curve their opacities sum to 1 throughout. */
  transition:
    opacity 460ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
    visibility 0s linear 460ms;
}
/* transition-delay, not the shorthand, on purpose: the shorthand would also set
   transition-property here at (0,2,0) and outrank the `transition: none` in the
   reduced-motion block below, which is only (0,1,0). Setting the delay longhand
   leaves that reset winning, so reduced motion still cuts with no fade. */
.pdp-media__shot[data-active] { opacity: 1; visibility: visible; transition-delay: 0s; }

/* <picture> is inline and sizes to its content, so height:100% on the img would
   resolve against the picture and paint past the stage. Give it a real box. */
.pdp-media__shot picture { display: block; width: 100%; height: 100% }

/* Every shot is a transparent cutout, so all three get the same treatment: no
   card, no plate, no crop. The subject may occupy a different optical area
   inside the stable stage — that is the fruit being honest, not a bug. */
/* landing.css sizes the old single pouch with a viewport-relative width clamp
   and a max-height. Those rules still match these images (same ancestor), and
   at equal specificity source order decides — this file loads after landing.css,
   so they are overridden here explicitly rather than by luck. */
.specimen-story__visual .pdp-media__shot img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  transform: none;
}

/* Grounding is per shot, matching the approved lab treatment. The pouch is an
   object standing in the room and carries both neutral shadows; the spread
   carries one; the macro is a lit specimen and carries none, because its own
   photographic falloff already reads as light. No SKU hue in any of them. */
.specimen-story__visual .pdp-media__shot[data-shot="1"] img {
  filter:
    drop-shadow(0 .6rem .3rem rgba(0, 0, 0, .22))
    drop-shadow(0 2.3rem 2.8rem rgba(0, 0, 0, .48));
}
.specimen-story__visual .pdp-media__shot[data-shot="2"] img {
  filter: drop-shadow(0 1.6rem 2.4rem rgba(0, 0, 0, .5));
}
.specimen-story__visual .pdp-media__shot[data-shot="3"] img {
  filter: none;
}
.pdp-media__stage[data-still="true"] .pdp-media__shot { transition: none }

/* --- descriptor telemetry -------------------------------------------------
   Three words at the foot of the object. It used to be absolutely positioned at
   `bottom: 7%` of the visual block; now that the block also holds the counter
   and the stations, that anchor landed on top of them. Moved into the media
   flow between the stage and the chrome, where it belongs — it describes the
   product, not the state, and never changes as the image rotates. */
.pdp-media > p {
  position: static;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin: .9rem 0 0;
  color: rgba(255, 247, 230, .55);
  font-family: var(--font-ui);
  font-size: .54rem;
  letter-spacing: .15em;
}

/* --- chrome: counter, hairline, three numerals ---------------------------- */
.pdp-media__chrome {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: .9rem;
  align-items: center;
  margin-top: 1.1rem;
}

/* --- prev / next ------------------------------------------------------------
   Instrumentation, not a carousel. They sit on the chrome rule beside the
   counter rather than floating over the pouch, because a pair of round buttons
   on top of the product is the one thing this page should never look like.

   Hairlines and a chevron: the same language as the stations and the counter.
   No fill, no shadow, no circle. */
.pdp-media__arrows {
  display: flex;
  gap: .4rem;
}
.pdp-media__arrow {
  display: grid;
  place-items: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid rgba(255, 247, 230, .18);
  background: transparent;
  color: rgba(255, 247, 230, .62);
  cursor: pointer;
  transition: color 220ms var(--ease-out, cubic-bezier(.22, 1, .36, 1)),
              border-color 220ms var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}
.pdp-media__arrow svg {
  width: .8rem;
  height: .8rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pdp-media__arrow:hover,
.pdp-media__arrow:focus-visible {
  border-color: var(--specimen-accent);
  color: var(--specimen-accent);
}
.pdp-media__arrow:focus-visible { outline: 1px solid var(--specimen-accent); outline-offset: 3px }
.pdp-media__count {
  margin: 0;
  color: var(--specimen-accent);
  font-family: var(--font-ui);
  font-size: .58rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .16em;
}
.pdp-media__track { position: relative; height: 1px; background: rgba(255, 247, 230, .16) }
.pdp-media__track i {
  position: absolute;
  inset: 0 auto 0 0;
  display: block;
  width: 100%;
  background: var(--specimen-accent);
  transform: scaleX(var(--media-progress, .3333));
  transform-origin: left;
  transition: transform 460ms var(--ease-out, cubic-bezier(.22, 1, .36, 1));
}
.pdp-media__stations {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: .75rem;
  border-top: 1px solid rgba(255, 247, 230, .16);
}
/* The station now names its state. `01` alone was a number a reader had to
   decode; `01 Pack` is a label they can act on. The numeral keeps the accent
   when active, the word stays quiet — hierarchy, not two competing labels. */
.pdp-media__stations button span { display: block }
.pdp-media__stations button em {
  display: block;
  margin-top: .18rem;
  color: rgba(255, 247, 230, .42);
  font-size: .58rem;
  font-style: normal;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.pdp-media__stations button[aria-selected="true"] em { color: rgba(255, 247, 230, .78) }

.pdp-media__stations button {
  display: block;
  padding: .7rem .2rem .5rem;
  border: 0;
  border-top: 1px solid transparent;
  margin-top: -1px;
  background: transparent;
  color: rgba(255, 247, 230, .4);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: .56rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: .14em;
  text-align: left;
}
.pdp-media__stations button[aria-selected="true"] {
  border-top-color: var(--specimen-accent);
  color: var(--specimen-accent);
}
.pdp-media__stations button:focus-visible { outline: 1px solid var(--specimen-accent); outline-offset: 3px }

/* --- touch target ----------------------------------------------------------
   The station is an instrument mark, not a button: a hairline, a number, and a
   lot of quiet. Measured 133x26 / 119x26 / 109x26 at 430 / 390 / 360 — wide
   enough, but 26px tall is under the comfortable-target guidance.

   ENLARGE THE TARGET, NOT THE CONTROL. An absolutely positioned pseudo carries
   the extra 9px above and below (26 + 18 = 44) and is out of flow, so nothing
   reflows: the stations keep their height, the media block keeps its height,
   and the visible chrome is exactly what it was. Hit-testing resolves the
   pseudo to its originating button, so no JavaScript changes.

   The 9px above sits inside the stations' own .75rem top margin, so the band
   never reaches the counter or the progress hairline; the 9px below lands in
   the gap under the media block. Horizontal inset stays 0, so neighbouring
   stations cannot overlap each other. */
/* --- mobile density --------------------------------------------------------
   The system was right and its vertical cost was not: at 390 the media block
   ran 496px of an 844px viewport, so the product name arrived at y559 and Add
   to bag at y876 -- a full screen of scrolling between seeing the pouch and
   being able to buy it.

   Only the AIR is reduced. The stage keeps its square geometry and simply caps
   its height, the descriptors, counter, hairline, arrows and PACK / PRODUCT /
   MACRO all stay, and the tap targets are untouched. */
@media (max-width: 860px) {
  /* Caps the square at 40svh. The stage keeps one stable geometry across all
     three states (nothing resizes on a state change); it is simply 6%% shorter,
     which is what brings Add to bag into the first screen. */
  .pdp-media__stage { max-height: 35svh; }
  .pdp-media > p { margin-top: .4rem }
  .pdp-media__chrome { margin-top: .5rem }
  .pdp-media__stations { margin-top: .4rem }
  .pdp-media__stations button { padding: .44rem .2rem .36rem }
  .pdp-media__stations button em { margin-top: .12rem }

  .pdp-media__stations button { position: relative; }
  .pdp-media__stations button::after {
    content: "";
    position: absolute;
    inset: -9px 0;
  }
  /* Same trick for the arrows: the visible control stays 1.9rem so the chrome
     row keeps its proportions, while the tap target grows to a comfortable
     size out of flow. Horizontal inset is -6px, not more, so the two arrows
     cannot overlap each other across their .4rem gap. */
  .pdp-media__arrow { position: relative; }
  .pdp-media__arrow::after {
    content: "";
    position: absolute;
    inset: -16px -6px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pdp-media__shot, .pdp-media__track i { transition: none }
}

/* --- desktop: equalise the stage across SKUs -------------------------------
   `.specimen-story--jamun` reverses order, which drops its visual into the
   wider 1.08fr track — measured, that gave jamun a 608px stage against 518px
   for the other two at 1280. Same asymmetry landing.css already documents for
   the old pouch, and it solved it the same way: cap against the VIEWPORT rather
   than the column, so all three SKUs present the object at one size. The
   two-column structure itself is untouched. */
@media (min-width: 861px) {
  .pdp-media {
    max-width: min(40vw, 100%);
    justify-self: center;
  }
}