/* The film remains in its own document; portfolio styles never reach its keys. */
.triad-case {
  --triad-source: 1;
  --triad-source-x: 75%;
  --triad-copy: 1;
  --triad-copy-y: 0px;
  --triad-support: 1;
  --triad-support-y: 0px;
  --triad-line: 1;
  position: relative;
  background: #040b10;
  color: #f1f7f9;
  scroll-margin-top: 0;
}
.triad-case__heading,
.triad-case__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px clamp(24px, 4vw, 80px);
}
.triad-case__heading {
  position: relative;
  min-height: 158px;
  padding-block: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid #20343e;
  background: #040b10;
}
.triad-case__rail {
  position: relative;
  display: grid;
  grid-template-rows: 40% 60%;
  height: clamp(64px, 7.4svh, 80px);
  padding: clamp(8px, 1svh, 12px) 2.2vw 0;
  background: #071014;
  border-bottom: 1px solid #20343e;
}
.triad-case__rail::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #151512;
  opacity: calc(1 - var(--triad-source));
  pointer-events: none;
}
.triad-case__rail-head, .triad-case__rail-items { position: relative; }
.triad-case__rail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #bac7ca;
  font-size: clamp(8px, .66vw, 13px);
  letter-spacing: .14em;
}
.triad-case__rail-head span { font-size: .78em; color: #819397; }
.triad-case__rail-items {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  align-items: center;
  border-top: 1px solid #ffffff0e;
  color: #829094;
  text-align: center;
  font-size: clamp(9px, .76vw, 14px);
}
.triad-case__rail-items > span { min-width: 0; }
.triad-case__rail-items .triad-case__current { color: #9beaf4; font-weight: 750; }
.triad-case.is-source-treasury .triad-case__source { color: #e2c273; font-weight: 750; }
.triad-case.is-source-treasury .triad-case__current { color: #829094; }
.triad-case__route { position: absolute; bottom: 0; left: 2.2vw; right: 2.2vw; height: 1px; }
.triad-case__route i {
  position: absolute;
  left: 58.333%;
  width: 16.667%;
  height: 1px;
  background: linear-gradient(90deg, #e2c273, #9beaf4);
  transform: scaleX(var(--triad-source));
  transform-origin: left;
}
.triad-case__route b, .triad-case__route strong {
  position: absolute;
  top: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}
.triad-case__route b { left: var(--triad-source-x); background: #9beaf4; box-shadow: 0 0 0 5px #9beaf411; }
.triad-case__route strong { left: 58.333%; background: #e2c273; opacity: calc(1 - var(--triad-source) * .65); }
/* Animate only the heading's contents, never an ancestor of the fixed iframe. */
.triad-case__heading-copy { opacity: var(--triad-copy); transform: translateY(var(--triad-copy-y)); }
.triad-case__heading .triad-case__eyebrow { margin: 0 0 12px; font: 500 10px/1.5 Menlo, monospace; letter-spacing: .13em; color: #a9beca; }
.triad-case__eyebrow > span { color: #9beaf4; margin-right: 14px; }
.triad-case__heading h2 {
  margin: 0;
  font: 650 clamp(28px, 2.65vw, 46px)/1.2 "Avenir Next", "PingFang SC", sans-serif;
  letter-spacing: -.015em;
}
.triad-case__heading .triad-case__description {
  display: grid;
  gap: 8px;
  margin: 0;
  color: #a9beca;
  font: 11px/1.7 "PingFang SC", sans-serif;
  letter-spacing: .04em;
  opacity: var(--triad-support);
  transform: translateY(var(--triad-support-y));
}
.triad-case__description strong { color: #e2eff4; font-size: 14px; font-weight: 500; }
.triad-case__entry-line {
  position: absolute;
  bottom: -1px;
  left: clamp(24px, 4vw, 80px);
  right: clamp(24px, 4vw, 80px);
  height: 1px;
  background: linear-gradient(90deg, #9beaf4, #20343e);
  transform: scaleX(var(--triad-line));
  transform-origin: left;
}
.triad-case__mount {
  position: relative;
  min-height: max(760px, 100svh);
  background: #040b10;
}
.triad-case__placeholder { position: absolute; inset: 0; z-index: 1; overflow: hidden; }
.triad-case__placeholder img { width: 100%; height: 100%; object-fit: contain; opacity: .65; }
.triad-case__status {
  position: absolute;
  inset: auto 24px 36px;
  text-align: center;
  font: 13px/1.8 "PingFang SC", sans-serif;
  color: #e2eff4;
}
.triad-case__status a { display: inline-block; color: #9beaf4; padding: 8px 12px; text-decoration: underline; text-underline-offset: 4px; }
.triad-case__frame {
  position: relative;
  display: block;
  width: 100%;
  height: max(760px, 100svh);
  border: 0;
  background: #040b10;
  opacity: 0;
}
.triad-case[data-ready="true"] .triad-case__frame { opacity: 1; }
.triad-case[data-presented="true"] .triad-case__placeholder { display: none; }
/* Keep the same browsing context: moving/recreating the iframe resets video. */
.triad-case__frame.is-focused {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh !important;
  z-index: 2147483000;
  opacity: 1;
}
html.triad-focus-open { overflow: hidden; }
/* This existing local-only Hero editor must not cover the product exhibition. */
body.triad-in-view .tune-panel { visibility: hidden; pointer-events: none; }
.triad-case__footer { border-top: 1px solid #20343e; }
.triad-case__footer p { margin: 0; font-size: 11px; letter-spacing: .08em; color: #a9beca; }
.triad-case__footer a { display: inline-flex; gap: 24px; align-items: center; min-height: 44px; color: #e2eff4; font-size: 12px; }
.triad-case a:focus-visible { outline: 2px solid #9beaf4; outline-offset: 4px; }
.triad-case [hidden] { display: none !important; }
.triad-case noscript { display: block; padding: 24px; text-align: center; }
@media (max-width: 700px) {
  .triad-case__rail { height: auto; min-height: 104px; grid-template-rows: 28px auto; padding: 8px 24px 0; }
  .triad-case__rail-head { font-size: 9px; }
  .triad-case__rail-head span, .triad-case__route { display: none; }
  .triad-case__rail-items { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: 8px; gap: 8px 10px; font-size: 10px; text-align: left; }
  .triad-case__heading { min-height: 176px; align-items: flex-start; flex-direction: column; gap: 18px; padding-block: 24px; }
  .triad-case__heading .triad-case__eyebrow { margin-bottom: 8px; }
  .triad-case__heading .triad-case__description { gap: 4px; }
  .triad-case__mount { min-height: 100svh; }
  .triad-case__footer { flex-wrap: wrap; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .triad-case__heading-copy, .triad-case__heading .triad-case__description { opacity: 1; transform: none; }
  .triad-case__entry-line { transform: none; }
  .triad-case__route { display: none; }
}