/* NXXS Flow - the Cold Room direction.
   Bright, sterile, chrome and ice. This sheet re-bases the token set from the
   dark vault to the clean room; because every rule in nxxs-flow.css and
   nxxs-woo.css reads its colours through var(), redeclaring :root here flips
   the whole site without touching a single component rule.

   The specimen coverflow overlaps slides in Z, so its elements are positioned
   inside one bounded stage. The animated mark is a real-element backdrop, not
   a pseudo-element. No CSS grid is used, and every value below is declared once
   and referenced with var(). */

:root {
  /* ---- Colour: white, chrome, ice, navy -------------------------------- */
  --c-bg:            #fbfcfe;
  --c-surface:       #ffffff;
  --c-raised:        #ffffff;
  --c-sunken:        #f2f6fc;
  --c-line:          #dfe6f0;
  --c-line-strong:   #c3d2e6;
  --c-text:          #10203a;
  --c-text-2:        #4e5d75;
  --c-text-3:        #64748b;
  --c-action:        #16326f;
  --c-action-hover:  #244984;
  --c-cold:          #2b62c4;
  --c-metal:         var(--c-text-3);
  --c-plate:         #ffffff;
  --c-plate-edge:    #e3eaf4;
  --c-ok:            #17794a;
  --c-wait:          #8a6410;
  --c-off:           #64748b;
  --c-focus:         #2b62c4;
  --c-on-action:     #ffffff;
  --c-scrim-0:       rgba(251, 252, 254, 0);
  --c-scrim-1:       rgba(251, 252, 254, 0.42);
  --c-scrim-2:       rgba(251, 252, 254, 0.84);
  --c-scrim-3:       rgba(251, 252, 254, 0.97);
  --c-header-bg:     rgba(255, 255, 255, 0.93);

  /* Chrome and glass, used by the specimen stage. */
  --c-chrome:        #dbe3ee;
  --c-chrome-lit:    #f4f7fb;
  --c-glass:         rgba(255, 255, 255, 0.72);
  --c-glass-edge:    rgba(255, 255, 255, 0.9);
  --c-halo:          rgba(43, 98, 196, 0.14);
  --c-mark-stage:    rgba(43, 98, 196, 0.32);
  --c-stage-glass:   rgba(255, 255, 255, 0.56);
  --c-stage-glass-front: rgba(255, 255, 255, 0.76);
  --blur-stage-glass: 4px;
  --op-stage-mark-out: 0.38;
  --c-floor:         rgba(16, 32, 58, 0.1);

  /* ---- Type: one sterile grotesque, one mono for numbers --------------- */
  --font-display: "Geist", "Helvetica Neue", "Arial", sans-serif;
  --font-body:    "Geist", "Helvetica Neue", "Arial", sans-serif;
  --font-mono:    "Geist Mono", "IBM Plex Mono", "Courier New", monospace;

  /* ---- Shape: controls are pills, surfaces are soft, inputs are tight -- */
  --radius:       14px;
  --radius-input: 8px;
  --radius-pill:  999px;

  /* ---- Elevation: tinted to the ink, never pure black ------------------ */
  --shadow-1: 0 1px 2px rgba(16, 32, 58, 0.05);
  --shadow-2: 0 10px 30px rgba(16, 32, 58, 0.07);
  --shadow-3: 0 26px 60px rgba(16, 32, 58, 0.13);
  --shadow-lit: 0 18px 44px rgba(43, 98, 196, 0.16);

  /* ---- The specimen stage --------------------------------------------- */
  --ar-vault:      1.24;
  --perspective:   1180px;
  --origin-y:      44%;
  --w-slide:       58%;
  --x-near:        56%;
  --x-far:         94%;
  --z-near:        -190px;
  --z-far:         -350px;
  --ry-near:       27deg;
  --ry-far:        34deg;
  --sc-near:       0.86;
  --sc-far:        0.72;
  --op-near:       0.94;
  --op-far:        0.7;
  --blur-far:      2px;
  --blur-glass:    6px;
  --tilt-max:      5deg;
  --h-slide-plate: 128px;
  --h-floor:       18px;
  --w-floor:       62%;
  --lift-slide:    -6px;

  --z-slide-0: 3;
  --z-slide-1: 2;
  --z-slide-2: 1;

  --t-vault: 620ms;
  --t-tilt:  240ms;
  --ease-vault: cubic-bezier(0.22, 0.72, 0.13, 1);

  --d-reveal: 18px;
  --t-reveal: 560ms;

  /* Runtime pointer tilt. JS writes these; they start neutral. */
  --tilt-x: 0deg;
  --tilt-y: 0deg;
}

/* ---- Page ground ------------------------------------------------------- */

body {
  background-color: var(--c-bg);
  color: var(--c-text);
}

/* The dark build painted a photograph behind the hero. The clean room is a
   stage inside the hero now, so the hero itself is plain white. */
.stage-hero {
  background-color: var(--c-bg);
  background-image: none;
  animation: none;
}

.stage-surface { background-color: var(--c-sunken); }

.site-header { border-bottom: var(--bw-1) solid var(--c-line); }
.announce-bar {
  background-color: var(--c-sunken);
  color: var(--c-text-2);
  border-bottom: var(--bw-1) solid var(--c-line);
}

.brand-name { color: var(--c-action); }
.brand-sub  { color: var(--c-text-3); }

/* ---- Controls are pills. Surfaces are soft. Inputs are tight. ---------- */

.button-primary,
.button-secondary,
.button-quiet,
.chip,
.tool-button,
.icon-button,
.deck-tab,
.size-add,
.stage-woo .button,
.stage-woo button.button,
.stage-woo input.button,
.stage-woo a.button,
.stage-woo .woocommerce-Button,
.woocommerce-MyAccount-navigation li a,
.stage-woo .woocommerce-tabs ul.tabs li a,
.wc-block-components-button,
.wc-block-cart__submit-button,
.wc-block-components-checkout-place-order-button {
  border-radius: var(--radius-pill);
}

.stage-woo input[type="text"],
.stage-woo input[type="email"],
.stage-woo input[type="tel"],
.stage-woo input[type="url"],
.stage-woo input[type="password"],
.stage-woo input[type="number"],
.stage-woo input[type="search"],
.stage-woo textarea,
.stage-woo select,
.wc-block-components-text-input input,
.wc-block-components-combobox input {
  border-radius: var(--radius-input);
  background-color: var(--c-surface);
}

.panel,
.tile,
.split-half,
.hero-card,
.bundle,
.stat,
.notice,
.summary,
.woocommerce-Address,
.woocommerce-form,
.woocommerce-form-login,
.woocommerce-form-register,
.woocommerce-EditAccountForm,
.woocommerce-address-fields,
.wc-block-components-panel,
.wc-block-components-totals-wrapper,
.wc-block-components-order-summary {
  border-radius: var(--radius);
}

.button-secondary {
  background-color: var(--c-surface);
  border-color: var(--c-line-strong);
  color: var(--c-action);
}

.button-secondary:hover { background-color: var(--c-sunken); }

.tool-button { color: var(--c-text-2); }
.tool-count {
  background-color: var(--c-action);
  color: var(--c-on-action);
}

.tile,
.split-half,
.panel {
  background-color: var(--c-surface);
  border-color: var(--c-line);
  box-shadow: var(--shadow-1);
}

.tile:hover { box-shadow: var(--shadow-2); }

/* Colour on white needs its own contrast, so the state chips are restated. */
.chip {
  background-color: var(--c-sunken);
  border-color: var(--c-line);
  color: var(--c-text-2);
}
.chip-ok     { color: var(--c-ok); }
.chip-wait   { color: var(--c-wait); }
.chip-off    { color: var(--c-text-2); }
.chip-sample { color: var(--c-text-2); }

.tile-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-3);
}

.tile-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.size-add {
  flex: 0 1 auto;
  flex-direction: row;
  align-items: center;
  gap: var(--s-2);
  min-height: var(--h-tap);
  padding-inline: var(--s-4);
  background-color: var(--c-surface);
  border-color: var(--c-line-strong);
  box-shadow: var(--shadow-1);
}

.size-add:hover,
.size-add:focus-visible {
  background-color: var(--c-chrome-lit);
  border-color: var(--c-cold);
  box-shadow: var(--shadow-2);
}

.size-dot { align-self: center; flex: 0 0 auto; }

.size-label,
.size-money,
.size-money .woocommerce-Price-amount { white-space: nowrap; }

.tile-plate,
.hero-plate,
.stage-woo div.product .woocommerce-product-gallery {
  background-color: var(--c-plate);
  border: var(--bw-1) solid var(--c-plate-edge);
  box-shadow: var(--shadow-1);
}

.deck-bar {
  background-color: var(--c-surface);
  border-bottom: var(--bw-1) solid var(--c-line);
}

.deck-tab { color: var(--c-text-3); }
.deck-tab[aria-selected="true"] {
  background-color: var(--c-sunken);
  color: var(--c-action);
}

.site-footer {
  background-color: var(--c-surface);
  border-top: var(--bw-1) solid var(--c-line);
}

.ruo-band {
  background-color: var(--c-sunken);
  border-radius: var(--radius);
  color: var(--c-text-2);
}

/* ========================================================================
   The specimen stage: a real 3D coverflow over the disintegrating NXXS mark.
   ===================================================================== */

.vault {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1 1 100%;
  min-width: 0;
}

.vault-room {
  /* Scoped exception 1: the slides overlap in Z inside this box. */
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--ar-vault);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-sunken);
  background-image: none;
  box-shadow: var(--shadow-3);
  perspective: var(--perspective);
  perspective-origin: 50% var(--origin-y);
}

/* Keep the mark readable through the stage without fading product labels. */
.vault-room {
  --c-glass: var(--c-stage-glass);
  --blur-glass: var(--blur-stage-glass);
}

.vault-room .dust {
  --c-dust: var(--c-mark-stage);
  --op-dust-out: var(--op-stage-mark-out);
  pointer-events: none;
}

.vault-room .slide[data-pos="0"] { background-color: var(--c-stage-glass-front); }
.vault-room .slide-plate { background-color: transparent; }
.vault-room .slide-plate img { mix-blend-mode: multiply; }

@media (prefers-reduced-transparency: reduce) {
  .vault-room .slide,
  .vault-room .slide[data-pos="0"] { background-color: var(--c-surface); }
}

.vault-rail {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
  transition: transform var(--t-tilt) var(--ease);
}

.slide {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--w-slide);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-3);
  border: var(--bw-1) solid var(--c-glass-edge);
  border-radius: var(--radius);
  background-color: var(--c-glass);
  backdrop-filter: blur(var(--blur-glass));
  box-shadow: var(--shadow-3);
  transform-origin: center center;
  transform: translate(-50%, -50%);
  transition:
    transform var(--t-vault) var(--ease-vault),
    opacity var(--t-vault) var(--ease-vault),
    filter var(--t-vault) var(--ease-vault);
}

.slide-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--h-slide-plate);
  border-radius: var(--radius-input);
  background-color: var(--c-plate);
  overflow: hidden;
}

.slide-plate img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.slide-tag {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
}

.slide-name {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--c-text);
  margin: var(--s-0);
}

.slide-size {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-2);
}

.slide-lot {
  font-family: var(--font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  color: var(--c-text-3);
  margin: var(--s-0);
}

/* The floor reflection under the active specimen, a real element. */
.slide-floor {
  display: block;
  width: var(--w-floor);
  height: var(--h-floor);
  margin-inline: auto;
  border-radius: var(--radius-pill);
  background-image: radial-gradient(ellipse at center, var(--c-floor), var(--c-scrim-0) 72%);
}

/* Coverflow positions. JS only writes data-pos; every value lives here. */

.slide[data-pos="0"] {
  transform: translate(-50%, -50%) translateZ(var(--s-0)) rotateY(var(--s-0));
  opacity: 1;
  filter: none;
  z-index: var(--z-slide-0);
}

.slide[data-pos="1"] {
  transform: translate(-50%, -50%) translateX(var(--x-near)) translateZ(var(--z-near)) rotateY(calc(var(--ry-near) * -1)) scale(var(--sc-near));
  opacity: var(--op-near);
  filter: blur(var(--s-0));
  z-index: var(--z-slide-1);
}

.slide[data-pos="-1"] {
  transform: translate(-50%, -50%) translateX(calc(var(--x-near) * -1)) translateZ(var(--z-near)) rotateY(var(--ry-near)) scale(var(--sc-near));
  opacity: var(--op-near);
  filter: blur(var(--s-0));
  z-index: var(--z-slide-1);
}

.slide[data-pos="2"] {
  transform: translate(-50%, -50%) translateX(var(--x-far)) translateZ(var(--z-far)) rotateY(calc(var(--ry-far) * -1)) scale(var(--sc-far));
  opacity: var(--op-far);
  filter: blur(var(--blur-far));
  z-index: var(--z-slide-2);
}

.slide[data-pos="-2"] {
  transform: translate(-50%, -50%) translateX(calc(var(--x-far) * -1)) translateZ(var(--z-far)) rotateY(var(--ry-far)) scale(var(--sc-far));
  opacity: var(--op-far);
  filter: blur(var(--blur-far));
  z-index: var(--z-slide-2);
}

.slide[data-pos="far"] {
  transform: translate(-50%, -50%) translateZ(var(--z-far)) scale(var(--sc-far));
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-slide-2);
}

.vault-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.vault-dots { display: flex; gap: var(--s-1); }

.vault-dot {
  width: var(--s-6);
  height: var(--s-1);
  padding: var(--s-0);
  border: var(--s-0);
  border-radius: var(--radius-pill);
  background-color: var(--c-line-strong);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease);
}

.vault-dot[aria-current="true"] { background-color: var(--c-action); }

/* ---- The fact panel beside the stage ----------------------------------- */

.spec {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  padding: var(--s-5);
  border: var(--bw-1) solid var(--c-line);
  border-radius: var(--radius);
  background-color: var(--c-surface);
  box-shadow: var(--shadow-2);
}

.spec-name {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-display);
  color: var(--c-text);
  margin: var(--s-0);
}

.spec-price {
  font-family: var(--font-mono);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-medium);
  color: var(--c-action);
  margin: var(--s-0);
}

.spec-lot {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--c-text-3);
  margin: var(--s-0);
}

.spec-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ---- Add feedback ------------------------------------------------------ */

.toast {
  /* Scoped exception: a toast has to sit above the page to be a toast. */
  position: fixed;
  left: 50%;
  bottom: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--radius-pill);
  background-color: var(--c-action);
  color: var(--c-on-action);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  box-shadow: var(--shadow-3);
  transform: translate(-50%, var(--s-4));
  opacity: 0;
  pointer-events: none;
  z-index: var(--z-header);
  transition: opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}

.toast[data-open="true"] {
  opacity: 1;
  transform: translate(-50%, var(--s-0));
  pointer-events: auto;
}

.toast-link {
  color: var(--c-on-action);
  font-weight: var(--fw-medium);
  text-decoration: underline;
}

.size-add[aria-busy="true"],
[data-spec-buy][aria-busy="true"] { opacity: var(--o-quiet); }

/* ---- Scroll reveal ----------------------------------------------------- */

/* The hidden state is gated on the flag JS sets at boot, so a script that
   never runs, or an observer that never fires, can never leave a section
   invisible. */
:root[data-reveal-ready] [data-reveal] {
  opacity: 0;
  transform: translateY(var(--d-reveal));
  transition: opacity var(--t-reveal) var(--ease), transform var(--t-reveal) var(--ease);
}

:root[data-reveal-ready] [data-reveal="in"] {
  opacity: 1;
  transform: translateY(var(--s-0));
}

/* ---- The access stage pairs one wide panel with a stacked pair --------- */

.split-stack {
  display: flex;
  flex-direction: column;
  gap: var(--card-gap);
  border: var(--s-0);
  background-color: transparent;
  box-shadow: none;
  padding: var(--s-0);
}

.split-stack .panel {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-5);
}

/* ---- Screens ----------------------------------------------------------- */

@media (max-width: 767px) {
  :root {
    --w-slide:  62%;
    --x-near:   48%;
    --x-far:    80%;
    --z-near:   -150px;
    --z-far:    -270px;
    --ar-vault: 1.72;
    --h-slide-plate: 96px;
  }

  /* The slide card already states name, size, lot and document state, so the
     panel below it shrinks to the two things it alone carries. */
  .stage-hero { padding-block: var(--s-6); }
  .hero-shell { gap: var(--s-5); }
  .spec { padding: var(--s-3) var(--s-4); }
  .spec-lot,
  .spec-row,
  .spec-name { display: none; }
  .spec .slide-tag { align-items: center; justify-content: flex-end; }
  .spec-price { font-size: var(--fs-xl); }

  /* The deck rail already offers Verify, so the hero keeps one action. */
  .hero-actions .button-secondary { display: none; }
}

@media (min-width: 768px) {
  :root { --ar-vault: 1.42; --h-slide-plate: 140px; }
}

@media (min-width: 1024px) {
  :root { --ar-vault: 1.52; --w-slide: 50%; --h-slide-plate: 152px; }
  .hero-shell { align-items: center; }
  .vault { flex: 1 1 var(--split-2up); }
}

@media (prefers-reduced-motion: reduce) {
  .slide,
  .vault-rail,
  [data-reveal],
  .toast { transition: none; }
  [data-reveal] { opacity: 1; transform: none; }
}

@media (prefers-reduced-transparency: reduce) {
  .slide {
    background-color: var(--c-surface);
    backdrop-filter: none;
  }
}