/* ============================================================================
   MCT CHEMICALS — WEBSITE 2.0
   FILE 4 of N: ENGINEERING-LAYER VIEWER  (styles)  — the signature interaction
   ----------------------------------------------------------------------------
   Depends on design-system.css + hero.css. Pairs with js/layer-viewer.js.

   What it does when a hotspot is activated:
     1. the rest of the building dims + desaturates      (overlay opacity)
     2. the stage "camera" pushes toward the zone         (transform scale/translate)
     3. a construction cross-section builds in            (staggered transforms)
     4. each layer is a real button -> detail rail        (products/downloads/etc.)
     5. close -> everything reverses, URL restored

   Cost model: only transform/opacity animate. No layout, no WebGL.
   prefers-reduced-motion: no camera move, layers appear at rest, labelled.
   ========================================================================== */

/* CAMERA: the push is applied to the building PLANES + light only, never the
   whole stage — otherwise the viewer UI (which lives inside the stage) would
   scale too. The planes wrapper carries the transform. */
.hero__planes { transition: transform var(--dur-slow) var(--ease-emphasis); will-change: transform; }
.hero__planes.is-zoomed { /* transform set inline by JS per-zone (origin + scale) */ }
.hero__light { transition: transform var(--dur-slow) var(--ease-emphasis); }

/* dim/desaturate overlay for the rest of the building while a zone is open */
.hero__dim {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: rgba(6, 12, 20, 0.62);
  opacity: 0; transition: opacity var(--dur-base) var(--ease-standard);
}
.hero.is-exploring .hero__dim { opacity: 1; pointer-events: auto; }
/* click the dim to close */
.hero.is-exploring .hero__dim { cursor: zoom-out; }

/* the exploded viewer sits above the dim */
.layer-viewer {
  position: absolute; inset: 0; z-index: 5;
  display: grid; grid-template-columns: minmax(340px, 1fr) minmax(300px, 340px);
  gap: var(--space-5); padding: var(--space-6);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur-base) var(--ease-standard),
              visibility 0s linear var(--dur-base);
}
.hero.is-exploring .layer-viewer {
  opacity: 1; visibility: visible; transition-delay: 0s;
}
@media (max-width: 820px) {
  .layer-viewer { grid-template-columns: 1fr; grid-template-rows: auto auto;
    overflow-y: auto; padding: var(--space-4); }
}

/* ----------------------------------------------------------------------------
   LEFT: the exploded cross-section
---------------------------------------------------------------------------- */
.layer-stage {
  position: relative; align-self: center;
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--space-4);
}
.layer-stage__title { margin-bottom: var(--space-2); }
.layer-stage__title h2 { color: var(--text-on-dark); font-size: var(--type-h2); }
.layer-stage__title p { color: var(--c-slate-300); font-size: var(--type-small); }

/* one layer slab */
.layer {
  position: relative; display: flex; align-items: center; gap: var(--space-3);
  width: 100%; text-align: left; cursor: pointer;
  padding: 0; border: 0; background: transparent;
  /* explode animation: start collapsed toward centre, fade in */
  opacity: 0; transform: translateY(var(--from, 0));
  transition: opacity var(--dur-base) var(--ease-emphasis),
              transform var(--dur-base) var(--ease-emphasis);
}
.hero.is-exploring .layer { opacity: 1; transform: translateY(0); }
/* stagger via inline --i (index) * --stagger, set by JS */
.hero.is-exploring .layer { transition-delay: calc(var(--i, 0) * var(--stagger)); }

.layer__swatch {
  flex: none; width: 96px; height: 34px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: var(--shadow-sm);
  position: relative; overflow: hidden;
}
/* hatch texture hint for the concrete/substrate layer */
.layer__swatch--hatch::after {
  content: ""; position: absolute; inset: 0; opacity: 0.5;
  background: repeating-linear-gradient(45deg, transparent 0 5px, rgba(0,0,0,0.25) 5px 6px);
}
.layer__label { min-width: 0; flex: 1; }
.layer__label b { display: block; color: var(--text-on-dark); font-size: var(--type-small); font-weight: var(--fw-semibold); white-space: nowrap; }
.layer__label span { display: block; color: var(--c-slate-400); font-size: var(--type-small);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.layer__product {
  margin-left: auto; flex: none; color: var(--accent);
  font-size: var(--type-small); font-weight: var(--fw-semibold);
  opacity: 0; transform: translateX(-4px);
  transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
}
.layer:hover .layer__product, .layer:focus-visible .layer__product,
.layer.is-active .layer__product { opacity: 1; transform: none; }

.layer:hover .layer__swatch, .layer:focus-visible .layer__swatch { border-color: var(--accent); }
.layer.is-active .layer__swatch { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }
.layer:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--radius-sm); }

/* (a decorative connector line was removed here — it was fragile across widths
   and added little; the swatch stack already reads as an engineering section) */

/* ----------------------------------------------------------------------------
   RIGHT: detail rail for the selected layer
---------------------------------------------------------------------------- */
.layer-detail {
  align-self: stretch; display: flex; flex-direction: column;
  background: var(--glass-fill);
  -webkit-backdrop-filter: blur(var(--glass-blur)); backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: var(--space-5); box-shadow: var(--shadow-panel);
  color: var(--text-on-dark); overflow-y: auto;
}
.layer-detail__eyebrow { color: var(--accent); }
.layer-detail__title { color: var(--text-on-dark); font-size: var(--type-h3); margin: var(--space-2) 0; }
.layer-detail__role { color: var(--c-slate-300); font-size: var(--type-small); margin-bottom: var(--space-4); }

.layer-detail__section + .layer-detail__section { margin-top: var(--space-4); padding-top: var(--space-4); border-top: 1px solid rgba(255,255,255,0.12); }
.layer-detail__section h3 { color: var(--c-slate-400); font-size: var(--type-overline);
  text-transform: uppercase; letter-spacing: var(--tracking-overline); margin-bottom: var(--space-2); }

.layer-detail__product {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-3); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.10);
}
.layer-detail__product b { font-size: var(--type-small); color: var(--text-on-dark); }
.layer-detail__product span { font-size: var(--type-small); color: var(--c-slate-400); }

.layer-detail__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.layer-detail__links a {
  font-size: var(--type-small); color: var(--text-on-dark);
  padding: var(--space-2) var(--space-3); border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
.layer-detail__links a:hover, .layer-detail__links a:focus-visible { background: rgba(255,255,255,0.12); }

.layer-detail__cta { margin-top: auto; padding-top: var(--space-4); }

/* close button */
.layer-viewer__close {
  position: absolute; top: var(--space-4); right: var(--space-4); z-index: 6;
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: var(--radius-pill); cursor: pointer;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16);
  color: var(--text-on-dark);
}
.layer-viewer__close:hover { background: rgba(255,255,255,0.16); }
.layer-viewer__close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ----------------------------------------------------------------------------
   REDUCED MOTION: no camera, no stagger — everything at rest, fully labelled
---------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__planes { transition: none; }
  .hero__planes.is-zoomed { transform: none !important; }
  .layer { transition: none; opacity: 1; transform: none; }
  .hero.is-exploring .layer { transition-delay: 0s; }
  .layer__product { opacity: 1; transform: none; }
}

/* ============================================================================
   PROMPT 004 ADDITIONS — build-sequence player + teaching content
   ========================================================================== */

/* --- guided build-sequence control (sits under the layer stack) --- */
.layer-seq { margin-top: var(--space-4); }
.layer-seq__play { width: 100%; }
.layer-seq__caption {
  margin-top: var(--space-3); min-height: 1.4em;
  font-size: var(--type-small); color: var(--accent);
  transition: opacity var(--dur-fast) var(--ease-standard);
}

/* --- layer states during the sequence --- */
/* not yet built: recede + desaturate so the "under construction" reads clearly */
.layer.is-pending { opacity: 0.32; filter: saturate(0.4); }
.layer.is-pending .layer__product { opacity: 0; }
/* just built: settle in */
.layer.is-built { opacity: 1; filter: none; }
/* the currently-building layer: swatch pulses once via accent ring (already
   handled by .is-active), plus a subtle scale to draw the eye */
.layer.is-active .layer__swatch { transform: scale(1.04); transition: transform var(--dur-fast) var(--ease-emphasis); }

@media (prefers-reduced-motion: reduce) {
  .layer.is-pending { opacity: 1; filter: none; }   /* no build-up illusion; show all */
  .layer.is-active .layer__swatch { transform: none; }
}

/* --- teaching blocks in the detail rail --- */
.layer-detail__teach {
  font-size: var(--type-small); color: var(--c-slate-300); line-height: 1.5;
  padding-left: var(--space-3); border-left: 2px solid rgba(255,255,255,0.18);
}
.layer-detail__teach--fail { border-left-color: var(--signal-danger);
  color: color-mix(in srgb, var(--signal-danger) 30%, var(--c-slate-300)); }
.layer-detail__teach--best { border-left-color: var(--signal-verified);
  color: color-mix(in srgb, var(--signal-verified) 30%, var(--c-slate-300)); }

/* --- system complete summary --- */
.layer-complete__claims {
  list-style: none; display: grid; gap: var(--space-2);
  margin: var(--space-3) 0 var(--space-2);
}
.layer-complete__claims li {
  display: flex; align-items: center; gap: var(--space-2);
  font-size: var(--type-body); font-weight: var(--fw-semibold); color: var(--text-on-dark);
}
.layer-complete__claims li span {
  display: grid; place-items: center; width: 22px; height: 22px; flex: none;
  border-radius: var(--radius-pill); background: var(--signal-verified);
  color: #06210F; font-size: 13px; font-weight: 700;
}

/* ============================================================================
   PROMPT 006 ADDITIONS — platform: pending states, knowledge graph, failure sim
   ========================================================================== */

/* controls group under the layer stack */
.layer-controls { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.layer-controls .btn { width: 100%; }

/* --- PENDING STATES (honest placeholders; never fabricated data) --- */
.pending {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--type-small); font-weight: var(--fw-semibold);
  color: var(--c-slate-300);
  padding: 2px 10px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.05);
  border: 1px dashed rgba(255,255,255,0.28);
}
.pending::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--signal-warning);
}
.pending-inline { padding: 2px 0; }
.pending-panel { padding: var(--space-4); border-radius: var(--radius-md);
  background: rgba(255,255,255,0.04); border: 1px dashed rgba(255,255,255,0.2); }
.layer-detail__teach.is-pending { border-left-color: var(--signal-warning); opacity: 0.9; }
/* draft badge on the layer row product slot when pending */
.layer__product .pending { font-size: 11px; padding: 1px 8px; }

/* --- KNOWLEDGE GRAPH edges --- */
.kg { display: grid; gap: var(--space-3); }
.kg__group { display: grid; gap: 6px; }
.kg__label { font-size: var(--type-small); color: var(--c-slate-400); }
.kg__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.kg__chip {
  font-size: var(--type-small); color: var(--text-on-dark);
  padding: 4px 10px; border-radius: var(--radius-pill);
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
}
a.kg__chip:hover, a.kg__chip:focus-visible { background: var(--accent-weak); color: var(--accent); border-color: var(--accent); }

/* --- FAILURE SIMULATOR states --- */
.layer.is-removable { cursor: pointer; }
.layer.is-removable::after {
  content: "Remove"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: var(--fw-semibold); color: var(--signal-danger);
  padding: 2px 8px; border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--signal-danger) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--signal-danger) 40%, transparent);
  opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard);
}
.layer.is-removable:hover::after, .layer.is-removable:focus-visible::after { opacity: 1; }
.layer.is-removed { opacity: 0.28; }
.layer.is-removed .layer__swatch { border-color: var(--signal-danger); box-shadow: 0 0 0 2px var(--signal-danger);
  filter: grayscale(0.6); }
.layer.is-removed .layer__label b { text-decoration: line-through; text-decoration-color: var(--signal-danger); }

/* the failure visual — a small animated diagram of the consequence.
   Purely CSS; effect classes tint/animate differently per failure type. */
.failure-visual {
  position: relative; height: 76px; border-radius: var(--radius-md);
  margin-bottom: var(--space-4); overflow: hidden;
  background: repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 8px, transparent 8px 16px), #16273A;
  border: 1px solid rgba(255,255,255,0.1);
}
.failure-visual span { position: absolute; left: 0; right: 0; height: 33%; }
.failure-visual span:nth-child(1) { top: 0; background: rgba(255,255,255,0.05); }
.failure-visual span:nth-child(2) { top: 33%; background: rgba(255,255,255,0.03); }
.failure-visual span:nth-child(3) { top: 66%; background: rgba(255,255,255,0.02); }
/* leak: water drips downward */
.failure-visual.fx-leak::after, .failure-visual.fx-substrate::after {
  content: ""; position: absolute; left: 20%; top: -10px; width: 4px; height: 14px;
  background: var(--signal-danger); border-radius: 0 0 4px 4px;
  animation: drip 1.4s var(--ease-standard) infinite;
}
@keyframes drip { 0% { top: -14px; opacity: 0; } 30% { opacity: 1; } 100% { top: 80px; opacity: 0; } }
/* crack: a jagged line */
.failure-visual.fx-crack::after {
  content: ""; position: absolute; left: 40%; top: 10%; width: 2px; height: 80%;
  background: var(--signal-danger);
  clip-path: polygon(0 0, 100% 10%, 0 22%, 100% 34%, 0 46%, 100% 58%, 0 70%, 100% 82%, 0 100%);
  animation: growcrack 1.2s var(--ease-standard) forwards;
}
@keyframes growcrack { from { height: 0; } to { height: 80%; } }
/* delamination / puncture / uv: a peeling / breaking corner */
.failure-visual.fx-delamination::after, .failure-visual.fx-puncture::after, .failure-visual.fx-uv::after {
  content: ""; position: absolute; right: 12%; top: 8%; width: 30px; height: 30px;
  border-top: 3px solid var(--signal-danger); border-right: 3px solid var(--signal-danger);
  transform-origin: top right; animation: peel 1.6s var(--ease-standard) infinite;
}
@keyframes peel { 0%,100% { transform: rotate(0deg); } 50% { transform: rotate(18deg); } }

@media (prefers-reduced-motion: reduce) {
  .failure-visual::after { animation: none !important; }
}

/* ============================================================================
   STEP 2 — hide the lighting switcher while the engineering panel is open so it
   doesn't overlap panel content (most noticeable on mobile). Restored on close.
   ========================================================================== */
.hero.is-exploring .hero-lighting { opacity: 0; pointer-events: none; transition: opacity .2s ease; }