/* Read-only detail fades into one stable reading area. Leaving an item returns
   to the team introduction; no hover bridge or distant button is needed. */
.hero[data-principle-system] { --principle-accent: #c490ff; }
.hero[data-principle-system] .hero-summary { position: relative; display: grid; place-items: center; width: min(980px, 100%); max-width: 980px; height: 160px; min-height: 160px; }
.hero-summary-default { width: 100%; opacity: 1; transition: opacity 190ms ease; }
.hero-principle-detail { position: absolute; inset: 0; display: grid; grid-template-rows: 26px 78px; align-content: center; align-items: start; justify-items: center; row-gap: 12px; width: min(680px, 100%); margin: 0 auto; padding-block: 4px; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 190ms ease, visibility 0s linear 190ms; }
.hero-summary[data-principle-active='true'] .hero-summary-default { opacity: 0; }
.hero-summary[data-principle-active='true'] .hero-principle-detail { opacity: 1; visibility: visible; transition-delay: 0s; }
.hero-principle-detail-heading { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 100%; color: #dedce4; font-size: 17px; line-height: 26px; white-space: nowrap; }
.hero-principle-detail-heading strong { font-weight: 600; }
.hero-principle-detail-heading svg { width: 24px; height: 24px; flex: 0 0 24px; color: var(--principle-accent); }
.hero-principle-detail-copy { margin: 0; color: #b4b0bd; font-size: 16px; line-height: 26px; }
.hero-principle-detail-copy > span { display: block; white-space: normal; }
.hero-principle-detail-heading svg, .hero-principle-symbol svg { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }

/* One native anchor covers each revealed card, including its verb. Hidden
   anchors retain geometry but cannot be read, focused or activated. */
.hero[data-principle-system] .hero-principle { display: block; padding-block: 4px; isolation: isolate; }
.hero[data-principle-system] .hero-principle::before { content: ''; position: absolute; z-index: -1; inset: -8px 8px; border-radius: 12px; background: #c490ff0d; opacity: 0; pointer-events: none; transition: opacity 190ms ease; }
.hero[data-principle-system] .hero-principle[data-active='true']::before { opacity: 1; }
.hero[data-principle-system] .hero-principle-trigger { display: grid; grid-template-rows: 24px minmax(2.8em, 1fr) 20px; align-items: start; justify-items: start; gap: 10px; width: 100%; height: 100%; padding: 0; text-align: left; color: #b4b0be; font-size: 13px; line-height: 1.4; text-decoration: none; transition: color 190ms ease; }
.hero[data-principle-system] .hero-principle-trigger::after { content: ''; position: absolute; inset: -8px 8px; border-radius: 12px; }
.hero[data-principle-system] .hero-principle-trigger[hidden] { display: grid !important; visibility: hidden; opacity: 0; pointer-events: none; }
.hero-principle-question[hidden] { display: none !important; }
.hero-principle-symbol { display: flex; align-items: center; height: 24px; color: #9c96a7; line-height: 1; transition: color 190ms ease; }
.hero-principle-symbol svg { width: 22px; height: 22px; }
.hero[data-principle-system] .hero-principle-title { min-height: 2.8em; color: inherit; font-size: 13px; line-height: 1.4; font-weight: 600; }
.hero-principle-action { align-self: end; color: #96919f; font-size: 12px; line-height: 20px; font-weight: 500; transition: color 190ms ease; }
.hero-principle-action span { display: inline-block; margin-left: 3px; }
.hero-principle[data-active='true'] .hero-principle-trigger, .hero-principle[data-active='true'] .hero-principle-symbol, .hero-principle[data-active='true'] .hero-principle-action { color: var(--principle-accent); }
.hero-principle-trigger:focus-visible { outline-color: var(--principle-accent); outline-offset: 5px; }

/* Only decoded letters can expose a lavender pixel mask. Hovering a locked
   image leaves that exact image in place until the team key reaches it. */
.hero[data-principle-system] .glyph:is(.is-active, .is-principle-active) { --violet: #c490ff; }
.hero[data-principle-system] .glyph.is-principle-active.is-unlocked .glyph-face,
.hero[data-principle-system] .glyph.is-principle-active.is-unlocked .glyph-object { opacity: 0; }
.hero[data-principle-system] .glyph.minecraft-ready.is-principle-active.is-unlocked .glyph-minecraft { opacity: 1; color: var(--principle-accent); }
.hero[data-principle-system] .glyph:not(.minecraft-ready).is-principle-active.is-unlocked .glyph-chunks { opacity: 1; color: var(--principle-accent); }
.hero[data-principle-system] .glyph:not(.minecraft-ready).is-principle-active.is-unlocked .glyph-block { opacity: 1; transform: none; }
.hero[data-principle-system] .glyph-minecraft, .hero[data-principle-system] .glyph-object, .hero[data-principle-system] .glyph-face { transition: opacity 190ms ease, color 190ms ease; }

@media (max-width: 600px) {
  .hero-principle-detail { grid-template-rows: 24px 100px; row-gap: 10px; }
  .hero-principle-detail-heading { gap: 7px; font-size: 15px; line-height: 24px; }
  .hero-principle-detail-heading svg { width: 21px; height: 21px; flex-basis: 21px; }
  .hero-principle-detail-copy { font-size: 15px; line-height: 25px; }
  .hero[data-principle-system] .hero-principle-title { font-size: 12.5px; }
  .hero[data-principle-system] .hero-principle-trigger { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-summary-default, .hero-principle-detail, .hero-principle-trigger, .hero-principle-symbol, .hero-principle-action, .hero[data-principle-system] .hero-principle::before { transition: none; }
}

/* Keep the original grid metrics; shorten only the painted separators by 10%. */
.hero[data-principle-system] .hero-principle { border-left-color: transparent; }
.hero[data-principle-system] .hero-principle::after {
  content: ''; position: absolute; left: -1px; top: 5%; bottom: 5%;
  border-left: inherit; border-left-color: #ffffff16; pointer-events: none;
}
.hero[data-principle-system] .hero-principles[data-title-layout='two-lines'] .hero-principle-title {
  inline-size: var(--hero-title-width); max-inline-size: 100%; block-size: 2.8em;
  overflow-wrap: normal; word-break: normal;
}