/* ==========================================================================
   Prototype: 3D orchestration stage
   Prototype-only CSS. Reuses the site's variables/fonts/colours from
   styles.css (linked before this file in prototype-3d.html) by
   reference (var(--...)) - nothing here is copied or edited from it.
   ========================================================================== */

.proto3d-main {
  padding-top: var(--nav-height);
  background: var(--color-bg);
}

/* ---- Entry/exit padding blocks ---- */

.proto3d-pad {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.proto3d-pad__label {
  font-size: 0.85rem;
  color: var(--color-text-subtle);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---- The pinned scroll section ----
   Height drives how long the pin lasts (~2.6 screens); the inner
   sticky element is what actually stays put while the page scrolls
   past it - plain CSS position: sticky, no JS scroll-locking, so
   wheel/trackpad input is never intercepted and normal page scroll
   is untouched. */
.proto3d-scroll {
  position: relative;
  height: 382vh;
}

.proto3d-scroll__inner {
  position: sticky;
  top: var(--nav-height);
  height: calc(100vh - var(--nav-height));
  display: grid;
  grid-template-columns: 40% 60%;
  align-items: stretch;
  gap: 2rem;
  padding: 0 2rem;
  overflow: hidden;
}

/* ---- Left column: text blocks, one visible at a time ---- */

.proto3d-text {
  position: relative;
  display: flex;
  align-items: flex-start;
}

/* All three blocks share the same top anchor (no per-block offset
   needed - they all start flush with the column's own top, so their
   headings land at the same position by construction) instead of
   each being vertically centred by its own, different content
   height. */
.proto3d-block {
  position: absolute;
  left: 0;
  right: 0;
  box-sizing: border-box;
  padding-top: 95px;
  padding-left: 0;
  padding-right: 0;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.5s var(--ease-out, ease-out), transform 0.5s var(--ease-out, ease-out);
  pointer-events: none;
}

.proto3d-block.is-active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.proto3d-block.is-past {
  transform: translateY(-24px);
}

/* Logo under the "INTEROPER connects them." heading only - a plain
   child of that one .proto3d-block, so it fades in/out with the rest
   of that block's existing opacity transition automatically, with no
   separate timing of its own. */
.proto3d-connects-logo {
  display: block;
  margin-top: 32px;
  margin-left: auto;
  margin-right: auto;
  width: 256px;
  height: auto;
  pointer-events: none;
}

/* Centred here, unlike the original left-aligned narrow rail - the
   heading spans the full column width (its own text still wraps
   naturally), the lede stays capped at 440px but is centred under it. */
.proto3d-text .section__heading {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.proto3d-text .section__lede {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 440px;
  /* Matches index.html's #how-it-works lede (.section__lede--intro,
     styles.css) at a 1440px viewport: its font-size clamp(18px, 1vw +
     14px, 24px) resolves to 24px there (1vw=14.4px -> 28.4px, clamped
     down to the 24px ceiling); line-height is unitless 1.7 from the
     base .section__lede rule, unchanged by --intro. */
  font-size: 24px;
  line-height: 1.7;
}

/* "One layer above every fleet." only (data-block="2", the one block
   with a lede) - the heading-to-lede gap is the heading's own margin-
   bottom (.section__heading: margin: 0 0 1rem, 16px; the lede itself
   has margin: 0, no margin-top), so adding 16px here makes it 32px
   total. Scoped to this one block only - the problem block's cards
   and the "INTEROPER connects them." block (neither has a lede) are
   unaffected. */
.proto3d-block[data-block="2"] .section__heading {
  margin-bottom: calc(1rem + 32px);
}

/* ---- Block 0's cards: copied look (not markup) from index.html's
   #the-problem cards - background/border/radius/fonts/colours/
   spacing, including the top edge-glow line those cards actually
   render with (.card + .edge-glow together make the base background/
   border invisible - !important - leaving just this top line/glow,
   so that, not a plain filled card, is "the existing look"). Every
   value below is read from styles.css's own shared custom properties
   by reference only (same convention this whole file already uses),
   never copied as literal numbers and never written back - nothing
   in styles.css or on index.html is touched. ---- */
.proto3d-problem-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: var(--heading-gap);
  margin-left: auto;
  margin-right: auto;
  max-width: 440px;
}

.proto3d-problem-card {
  position: relative;
  border-radius: var(--edge-radius);
  padding: 22px 28px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.proto3d-problem-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: var(--edge-side-fade);
  border: 1px solid #fff;
  border-bottom: none;
  border-top-left-radius: var(--edge-radius);
  border-top-right-radius: var(--edge-radius);
  /* --card-glow-x/--card-glow-boost: same custom properties, same
     fallbacks (50%/1), same card-glow.js script as the ordinary cards
     and the Platform page's FAQ rows (styles.css) - reused here rather
     than invented again, so a card looks exactly as it does today if
     the script never runs. This file's own opacity() fade-in/out
     (prototype-3d.js) sets this element's inline opacity every frame;
     card-glow.js reads that same inline value to skip updating the
     glow while a card is faded out, and never touches opacity/
     transform/pointer-events itself, so none of the scroll section's
     own fade/pin logic is affected. */
  -webkit-mask-image: radial-gradient(ellipse 50% 100% at var(--card-glow-x, 50%) 0%,
      rgba(0, 0, 0, calc(var(--edge-line-centre-opacity) * var(--card-glow-boost, 1))) 0%,
      rgba(0, 0, 0, calc(var(--edge-line-corner-opacity) * var(--card-glow-boost, 1))) 100%,
      transparent 142%);
  mask-image: radial-gradient(ellipse 50% 100% at var(--card-glow-x, 50%) 0%,
      rgba(0, 0, 0, calc(var(--edge-line-centre-opacity) * var(--card-glow-boost, 1))) 0%,
      rgba(0, 0, 0, calc(var(--edge-line-corner-opacity) * var(--card-glow-boost, 1))) 100%,
      transparent 142%);
  pointer-events: none;
}

.proto3d-problem-card::after {
  content: "";
  position: absolute;
  top: 0;
  left: var(--card-glow-x, 50%);
  width: var(--edge-glow-width);
  height: var(--edge-glow-height);
  transform: translateX(-50%);
  background: radial-gradient(ellipse at top, rgba(255, 255, 255, calc(var(--edge-glow-opacity) * var(--card-glow-boost, 1))) 0%, transparent 70%);
  pointer-events: none;
}

.proto3d-problem-card-title {
  margin: 0 0 0.6rem;
  font-size: 1.1rem;
  font-weight: var(--font-weight-headline-sm);
  letter-spacing: var(--font-letter-spacing-headline-sm);
  color: var(--color-text);
}

.proto3d-problem-card-text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* ---- Right column: the 3D stage ---- */

.proto3d-stage-col {
  position: relative;
  min-width: 0;
}

.proto3d-stage {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #0a0a0a;
  border: 1px solid var(--color-border);
  cursor: grab;
}

.proto3d-stage:active {
  cursor: grabbing;
}

.proto3d-canvas {
  display: block;
  width: 100%;
  height: 100%;
  /* Rotating drags the camera (see prototype-3d.js); this just stops
     the browser's own touch-scroll/selection gestures from fighting
     that drag on the stage itself - it has no effect on wheel input. */
  touch-action: none;
}

.proto3d-hub-logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: auto;
  opacity: 0;
  pointer-events: none;
  will-change: transform;
}

.proto3d-hint {
  position: absolute;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  margin: 0;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.5);
  border: 1px solid var(--color-border);
  font-size: 0.8rem;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity 0.6s ease-out;
  pointer-events: none;
}

.proto3d-hint.is-visible {
  opacity: 1;
}

/* ---- Static fallback (narrow/touch/reduced-motion/no-WebGL) ---- */

.proto3d-fallback {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  text-align: center;
  padding: 2rem;
  background: linear-gradient(165deg, #0d0d0e 0%, #000000 100%);
}

.proto3d-fallback__box {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--hub-accent-a);
}

.proto3d-fallback__text {
  max-width: 320px;
  margin: 0;
  font-size: 0.9rem;
  color: var(--color-text-muted);
}

/* ---- Fallback mode (added to <body> by prototype-3d.js when narrow/
   touch/reduced-motion/no-WebGL): no pin, no drag - the text blocks
   stack normally and the static placeholder replaces the canvas. ---- */
body.proto3d--fallback .proto3d-scroll {
  height: auto;
}

body.proto3d--fallback .proto3d-scroll__inner {
  position: static;
  height: auto;
  grid-template-columns: 1fr;
  padding: 3.5rem 1.5rem;
  overflow: visible;
}

body.proto3d--fallback .proto3d-text {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
}

body.proto3d--fallback .proto3d-block {
  position: static;
  opacity: 1;
  transform: none;
  pointer-events: auto;
  transition: none;
}

body.proto3d--fallback .proto3d-stage-col {
  margin-top: 2rem;
}

body.proto3d--fallback .proto3d-stage {
  height: 360px;
}

body.proto3d--fallback .proto3d-canvas {
  display: none;
}

body.proto3d--fallback .proto3d-fallback {
  display: flex;
}

body.proto3d--fallback .proto3d-hint {
  display: none;
}

body.proto3d--fallback .proto3d-hub-logo {
  display: none;
}

body.proto3d--fallback .proto3d-pad {
  min-height: 20vh;
}

@media (max-width: 899px) {
  .proto3d-scroll__inner {
    grid-template-columns: 1fr;
  }
}