/* ==========================================================================
   Gas Processing — the 3D scene
   Loaded on /gas-processing/scene.

   The plant is a fixed WebGL canvas; the chrome is DOM on top. Layout follows
   the reference: stage rail down the left, stream legend top-right, a
   picture-in-picture plate, the unit name set large, two key facts beneath.
   ========================================================================== */

.gpx--scene {
  --sc-ground: #3A342D;
  --sc-ink: #F1F5F7;
  --sc-muted: #9FB0BB;
  --sc-faint: #6C7D88;
  --sc-line: rgba(159, 176, 187, .18);
  --sc-amber: #E0A03C;
  --sc-raw: #93A7B3;
  --sc-sales: #4FC3D7;
  --sc-ngl: #E0A03C;
  --sc-lpg: #E4633A;

  background: var(--sc-ground);
  color: var(--sc-ink);
}

/* --- The plant ----------------------------------------------------------- */

.sc { position: relative; }
.sc-stagehost { position: fixed; inset: 0; z-index: 0; }
.sc-canvas { display: block; width: 100%; height: 100%; }
.sc-vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(to top, rgba(9,13,18,.92) 0%, rgba(9,13,18,.55) 26%, transparent 52%),
    radial-gradient(120% 100% at 66% 44%, transparent 34%, rgba(9,13,18,.34) 100%),
    linear-gradient(to right, rgba(9,13,18,.86) 0%, rgba(9,13,18,.5) 24%, rgba(9,13,18,.12) 46%, transparent 60%);
}
/* In Arabic the copy sits on the right, so the scrim and the plant swap sides. */
.sc[data-locale="ar"] .sc-vignette {
  background:
    linear-gradient(to top, rgba(9,13,18,.92) 0%, rgba(9,13,18,.55) 26%, transparent 52%),
    radial-gradient(120% 100% at 34% 44%, transparent 34%, rgba(9,13,18,.34) 100%),
    linear-gradient(to left, rgba(9,13,18,.86) 0%, rgba(9,13,18,.5) 24%, rgba(9,13,18,.12) 46%, transparent 60%);
}

/* Without WebGL the canvas host is pointless and the note stands in. */
.sc:not(.sc--3d) .sc-stagehost,
.sc:not(.sc--3d) .sc-vignette,
/* Nothing marks a stage active without the 3D path, so the insets would only be
   eight invisible downloads. And a fixed strip and a stream legend over a plain
   document are just furniture sitting on the words. */
.sc:not(.sc--3d) .sc-flow,
.sc:not(.sc--3d) .sc-legend,
.sc:not(.sc--3d) .sc-pip,
.sc:not(.sc--3d) .sc-tags { display: none; }
/* Without WebGL the backdrop is a photograph of the real plant rather than a
   flat colour behind the text. */
.sc-poster { position: fixed; inset: 0; z-index: 0; }
.sc-poster picture { display: block; width: 100%; height: 100%; }
.sc-poster img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.5) brightness(.3); }
.sc--3d .sc-poster { display: none; }

.sc-nowebgl {
  position: relative; z-index: 4; margin: 0;
  padding: 210px clamp(1.25rem, 5vw, 4rem) 1.5rem;
  font-family: ui-monospace, Menlo, monospace; font-size: 11px;
  letter-spacing: .08em; color: var(--sc-faint); max-width: 60ch;
}
.sc--3d .sc-nowebgl { display: none; }

/* Past the last stage the site footer takes over. The pinned chrome has to stand
   down or it floats over the footer's text — but the plant itself stays, because
   the footer is opaque and paints over it, and hiding it left a flat rectangle
   of background colour above the footer instead of the view. The vignette does
   have to go: it sits a layer higher than the footer and greys out its text. */
.sc--3d:not(.sc--live) .sc-vignette,
.sc--3d:not(.sc--live) .sc-legend,
.sc--3d:not(.sc--live) .sc-flow,
.sc--3d:not(.sc--live) .sc-pip,
.sc--3d:not(.sc--live) .sc-tags,
.sc--3d:not(.sc--live) .sc-copy {
  opacity: 0 !important; pointer-events: none;
  transition: opacity 260ms ease;
}

/* --- Stream legend, top right ------------------------------------------- */

.sc-legend {
  position: fixed; z-index: 5;
  inset-block-start: 250px; inset-inline-end: clamp(1rem, 3vw, 2.5rem);
  display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; letter-spacing: .16em; color: var(--sc-muted);
}
.sc-legend-lede {
  width: 100%; text-align: end; color: var(--sc-faint); font-size: 9.5px; letter-spacing: .2em;
  text-transform: uppercase; margin-block-end: 2px;
}
.sc-legend-item {
  display: inline-flex; align-items: center; gap: 7px;
  /* The three product entries are buttons: pressing one follows that product's
     route through the plant. Reset the UA button styling to match the spans. */
  appearance: none; background: none; border: 0; margin: 0;
  padding: 3px 8px; border-radius: 999px;
  font: inherit; letter-spacing: inherit; color: inherit;
}
button.sc-legend-item { cursor: pointer; transition: background 180ms ease, color 180ms ease; }
button.sc-legend-item:hover { background: rgba(159,176,187,.16); color: var(--sc-ink); }
button.sc-legend-item:focus-visible { outline: 2px solid var(--sc-amber); outline-offset: 2px; }
button.sc-legend-item.is-on { background: var(--c, var(--sc-amber)); color: #0B1015; }
button.sc-legend-item.is-on i { background: #0B1015; }
.sc-legend-item i { width: 8px; height: 8px; border-radius: 50%; background: var(--c, var(--sc-raw)); }
.sc-legend-item.is-raw { --c: var(--sc-raw); }
.sc-legend-item.is-sales { --c: var(--sc-sales); }
.sc-legend-item.is-ngl { --c: var(--sc-ngl); }
.sc-legend-item.is-lpg { --c: var(--sc-lpg); }
@media (max-width: 860px) { .sc-legend { inset-block-start: 128px; gap: 4px 8px; font-size: 9.5px; } }

/* --- Process strip, along the foot -------------------------------------- */

/* The whole flow in miniature, with the current stage lit. This replaced a
   vertical rail of bare numbers: eleven digits down the left edge said which
   stage you were on but nothing about the process or where the stage sits in
   it, which is the one thing a plant diagram is for. */
.sc-flow {
  position: fixed; z-index: 6;
  inset-block-end: 14px; inset-inline: 0;
  display: flex; justify-content: center;
  pointer-events: none;
}
.sc-flow ol {
  display: flex; align-items: center;
  margin: 0; padding: 5px 8px; list-style: none;
  max-width: min(94vw, 1120px); overflow-x: auto; scrollbar-width: none;
  border-radius: 999px;
  background: rgba(9, 13, 18, .74);
  border: 1px solid rgba(159, 176, 187, .2);
  backdrop-filter: blur(8px);
  pointer-events: auto;
}
.sc-flow ol::-webkit-scrollbar { display: none; }
.sc-flow-item { display: flex; align-items: center; flex: none; }
.sc-flow-item + .sc-flow-item::before {
  content: ''; width: 10px; height: 1px; flex: none;
  background: rgba(159, 176, 187, .3);
}
/* Where the liquids leave the main train, in the NGL colour from the legend. */
.sc-flow-item.is-fork::before { width: 18px; height: 2px; background: var(--sc-ngl); }
.sc-flow-item a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 9px; border-radius: 999px;
  text-decoration: none; color: var(--sc-faint);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .12em;
  transition: background 200ms ease, color 200ms ease;
}
.sc-flow-item a:hover { color: var(--sc-ink); background: rgba(159, 176, 187, .14); }
.sc-flow-item a:focus-visible { outline: 2px solid var(--sc-amber); outline-offset: 2px; }
.sc-flow-item b { font-weight: 500; }
.sc-flow-name {
  text-transform: uppercase; letter-spacing: .14em; white-space: nowrap;
  max-width: 0; overflow: hidden; opacity: 0;
  transition: max-width 380ms cubic-bezier(.16, .84, .3, 1), opacity 260ms ease;
}
.sc-flow-item.is-on a { background: var(--sc-amber); color: #0B1015; }
.sc-flow-item.is-on .sc-flow-name { max-width: 26ch; opacity: 1; }
.sc-flow-item.is-route a { color: var(--sc-ink); background: rgba(224, 160, 60, .18); }
@media (max-width: 860px) {
  .sc-flow { inset-block-end: 8px; }
  .sc-flow-item a { padding: 4px 7px; font-size: 9px; gap: 5px; }
  .sc-flow-item.is-on .sc-flow-name { max-width: 14ch; }
}

/* --- Stage panels ------------------------------------------------------- */

/* Each section is nothing but a viewport of scroll distance for its stage. The
   copy inside it is pinned, because letting eleven tall text blocks scroll past
   put two stages' words on screen at once and slid them under the fixed site
   nav. Only the camera moves; the words cross-fade in place. */
.sc-stages { position: relative; z-index: 4; }
/* The end-of-scene marker: no size, no paint, just a position to observe. */
.sc-end { position: absolute; inset-block-start: 0; inset-inline: 0; height: 1px; }

/* Without WebGL there is no camera to move and nothing to pin against: the
   eleven stages are simply a document, and they have to read as one. */
.sc:not(.sc--3d) .sc-stage {
  padding: 0 clamp(1.25rem, 5vw, 4rem) clamp(3rem, 6vh, 4.5rem);
  max-width: 62ch;
}
.sc:not(.sc--3d) .sc-stages { padding-block-start: 1.5rem; }
.sc:not(.sc--3d) .sc-nowebgl { padding-block-end: 0; }

/* With WebGL, each section is nothing but a viewport of scroll distance for its
   stage, and the copy is pinned. Letting eleven tall text blocks scroll past put
   two stages' words on screen at once and slid them under the fixed site nav. */
.sc--3d .sc-stage { min-height: 100vh; min-height: 100svh; }
.sc--3d .sc-copy {
  position: fixed; z-index: 4;
  /* Clear of the process strip along the foot. */
  inset-block-end: clamp(5rem, 9vh, 7rem);
  inset-inline-start: clamp(1.5rem, 6vw, 6.5rem);
  max-width: min(48ch, 44vw);
  opacity: 0; transform: translateY(16px); pointer-events: none;
  /* Out fast, in slow and slightly delayed, so the outgoing stage has cleared
     before the incoming one arrives and the two never ghost over each other. */
  transition: opacity 240ms ease, transform 240ms ease;
}
.sc--3d .sc-stage.is-on .sc-copy {
  opacity: 1; transform: none;
  transition: opacity 560ms ease 200ms, transform 640ms cubic-bezier(.16,.84,.3,1) 200ms;
}
@media (max-width: 860px) {
  /* One column, so the copy and the plant share the screen rather than the copy
     lying on top of it: the words get the lower half on their own scrim, and the
     camera is biased to put the equipment in the upper half. */
  .sc--3d .sc-copy {
    max-width: none; inset-inline: 0; inset-block-end: 0;
    padding: 2.5rem clamp(1.25rem, 5vw, 2rem) 4.25rem;
    background: linear-gradient(to top, rgba(9,13,18,.97) 0%, rgba(9,13,18,.94) 55%, rgba(9,13,18,.72) 82%, transparent 100%);
  }
  .sc--3d .sc-body { font-size: 13px; line-height: 1.62; }
  .sc--3d .sc-facts { gap: 8px 28px; margin-block-start: 18px; }
}

.sc-kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--sc-amber); margin: 0 0 16px;
}
/* The reference sets the unit name large, tight and uppercase. Montserrat is
   not a condensed face, so this is as close as the brand family goes — a
   condensed grotesque would need adding to the site. */
.sc-title {
  font-family: 'Montserrat', sans-serif; font-weight: 600;
  font-size: clamp(1.875rem, 4.4vw, 3.5rem); line-height: 1.0;
  letter-spacing: -.035em; text-transform: uppercase;
  color: var(--sc-ink); margin: 0 0 18px; text-wrap: balance;
}
/* The establishing shot's panel: the only place the page says what it is. */
.sc-title--page { font-size: clamp(2.25rem, 5.4vw, 4.5rem); }
.sc-stage--open .sc-lead { max-width: 46ch; color: var(--sc-muted); }

.sc-lead {
  font-family: 'Roboto', sans-serif; font-size: clamp(1rem, 1.5vw, 1.1875rem);
  line-height: 1.45; color: var(--sc-ink); margin: 0 0 14px; max-width: 42ch;
}
.sc-body {
  font-family: 'Roboto', sans-serif; font-size: 13.5px; line-height: 1.7;
  color: var(--sc-muted); margin: 0; max-width: 54ch;
}

.sc-facts { display: flex; flex-wrap: wrap; gap: 10px 46px; margin: 26px 0 0; }
.sc-fact { display: flex; flex-direction: column; gap: 5px; }
.sc-fact dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--sc-faint);
}
.sc-fact dd {
  margin: 0; font-family: 'Roboto', sans-serif; font-size: 14px;
  color: var(--sc-ink); max-width: 26ch;
}

/* --- Unit tags ---------------------------------------------------------- */

/* One label per unit, positioned every frame by the client. Without them the
   equipment either side of the one you are reading about is anonymous. */
.sc-tags { position: fixed; inset: 0; z-index: 2; pointer-events: none; }
.sc-tag {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 3px 8px; border-radius: 3px;
  background: rgba(9,13,18,.62); border: 1px solid rgba(159,176,187,.2);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--sc-ink); white-space: nowrap;
  opacity: 0; transition: opacity 200ms ease; will-change: transform, opacity;
}
.sc-tag b { color: var(--sc-amber); font-weight: 500; }
/* The stage being read about: the one label that should be unmissable. */
.sc-tag.is-on {
  background: rgba(9, 13, 18, .88);
  border-color: rgba(224, 160, 60, .6);
  color: #fff;
  padding: 4px 10px;
  box-shadow: 0 0 0 1px rgba(224, 160, 60, .12), 0 6px 18px rgba(0, 0, 0, .45);
}
@media (max-width: 860px) { .sc-tags { display: none; } }

/* --- Picture in picture ------------------------------------------------- */

.sc-pip {
  position: fixed; z-index: 3;
  inset-block-start: 336px; inset-inline-end: clamp(1rem, 3vw, 2.5rem);
  width: clamp(200px, 26vw, 380px); aspect-ratio: 16 / 9;
  border: 1px solid var(--sc-line); border-radius: 3px; overflow: hidden;
  opacity: 0; transform: translateY(10px);
  transition: opacity 480ms ease, transform 480ms ease;
  pointer-events: none;
}
.sc-stage.is-on .sc-pip { opacity: 1; transform: none; }
.sc-pip picture { display: block; width: 100%; height: 100%; }
.sc-pip img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.8) brightness(.7); }
.sc-pip-tag {
  position: absolute; inset-inline: 0; inset-block-end: 0;
  padding: 7px 10px; background: rgba(7,11,15,.72);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9px; letter-spacing: .14em; color: var(--sc-muted);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 860px) { .sc-pip { display: none; } }

/* --- Performance readout, on ?perf only --------------------------------- */

.sc-perf {
  position: fixed; z-index: 90;
  inset-block-start: 150px; inset-inline-start: 50%;
  transform: translateX(-50%);
  padding: 6px 14px; border-radius: 999px;
  background: rgba(0, 0, 0, .82); border: 1px solid rgba(224, 160, 60, .5);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; letter-spacing: .06em; color: #FFD9A0;
  white-space: nowrap; pointer-events: none;
}

/* --- The ending --------------------------------------------------------- */

/*
 * A block in normal flow that scrolls up over the fixed canvas on its own
 * ground. Without it the last stage simply ran out and the site footer slid
 * over a half-cut 3D view, which reads as the page breaking rather than the
 * process finishing. The gradient at its head is what makes the plant sink
 * under it instead of being sliced off.
 */
.sc-outro {
  position: relative; z-index: 5;
  /* The head padding is deliberate room: the chrome stands down as this block
     appears, and this is the distance over which the gradient takes the plant
     down before any of its own words arrive. */
  padding: clamp(11rem, 27vh, 18rem) clamp(1.25rem, 5vw, 4rem) clamp(4rem, 9vh, 7rem);
  background: linear-gradient(to bottom, rgba(9, 13, 18, 0) 0%, rgba(9, 13, 18, .85) 26%, var(--sc-ground) 62%, var(--sc-ground) 100%);
}
.sc-outro .sc-title { margin-block-end: 20px; }
.sc-out-inner { max-width: 74rem; margin-inline: auto; }
.sc-out-inner .sc-lead { max-width: 56ch; margin-block-end: 44px; }

.sc-out-list {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.sc-out-card {
  padding: 22px 22px 24px;
  border: 1px solid rgba(159, 176, 187, .18);
  border-block-start: 2px solid var(--c, var(--sc-muted));
  border-radius: 4px;
  background: rgba(9, 13, 18, .42);
}
.sc-out-card[data-color="export"] { --c: var(--sc-sales); }
.sc-out-card[data-color="lpg"] { --c: var(--sc-lpg); }
.sc-out-card[data-color="ngl"] { --c: var(--sc-ngl); }
.sc-out-card h3 {
  margin: 0 0 6px;
  font-family: 'Montserrat', sans-serif; font-weight: 600;
  font-size: 1.0625rem; letter-spacing: .02em; text-transform: uppercase;
  color: var(--sc-ink);
}
.sc-out-dest {
  margin: 0 0 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--c, var(--sc-amber));
}
.sc-out-desc {
  margin: 0; font-family: 'Roboto', sans-serif;
  font-size: 13.5px; line-height: 1.65; color: var(--sc-muted);
}

/* Without WebGL there is no plant to sink under it, so it is just the last
   block of the document. */
.sc:not(.sc--3d) .sc-outro { background: none; padding-block-start: clamp(2rem, 6vh, 4rem); }

/* --- Following one product --------------------------------------------- */

/* Pinned exactly where the stage copy sits, because it replaces it. */
.sc-trace {
  position: fixed; z-index: 6;
  inset-block-end: clamp(5rem, 9vh, 7rem);
  inset-inline-start: clamp(1.5rem, 6vw, 6.5rem);
  max-width: min(46ch, 42vw);
}
.sc-trace[hidden] { display: none; }
.sc-trace-dest {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sc-amber); margin: 0 0 20px;
}
.sc-trace-head {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--sc-faint); margin: 0 0 8px;
}
.sc-trace-list {
  margin: 0 0 22px; padding: 0; list-style: none;
  display: flex; flex-wrap: wrap; gap: 4px 6px;
  font-family: 'Roboto', sans-serif; font-size: 12.5px; color: var(--sc-ink);
}
.sc-trace-list li {
  padding: 3px 9px; border-radius: 999px;
  background: rgba(159,176,187,.12); border: 1px solid rgba(159,176,187,.18);
}
/* An arrow between the stops, so it reads as a route and not a set. */
.sc-trace-list li + li::before {
  content: '→'; margin-inline-end: 6px; color: var(--sc-faint);
}
.sc[data-locale="ar"] .sc-trace-list li + li::before { content: '←'; }
.sc-trace-clear {
  appearance: none; cursor: pointer;
  padding: 8px 18px; border-radius: 999px;
  background: var(--sc-amber); border: 0; color: #0B1015;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
}
.sc-trace-clear:focus-visible { outline: 2px solid var(--sc-ink); outline-offset: 3px; }

/* While a product is followed the stage track stands aside entirely. */
.sc--tracing .sc-copy,
.sc--tracing .sc-pip,
/* The per-frame tag pass returns early while tracing, so the labels would
   otherwise hold whatever opacity they had when it started. */
.sc--tracing .sc-tags { opacity: 0 !important; pointer-events: none; }

@media (max-width: 860px) {
  .sc-trace {
    inset-inline: 0; inset-block-end: 0; max-width: none;
    padding: 2.5rem clamp(1.25rem, 5vw, 2rem) 3.25rem;
    background: linear-gradient(to top, rgba(9,13,18,.97) 0%, rgba(9,13,18,.94) 55%, rgba(9,13,18,.72) 82%, transparent 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .sc-copy, .sc-pip, .sc-flow-name, .sc-flow-item a { transition: none; }
  .sc-stage.is-on .sc-copy { transform: none; }
}