/* ============================================================
   ORO TALENT — hologram stage + development data card
   Reskinned to the academy's gold-on-black palette. The three
   STATUS colours stay distinct from brand gold on purpose —
   they carry meaning, so they must never read as decoration.
   ============================================================ */

.holo-wrap{
  display:grid;
  grid-template-columns:minmax(240px,360px) 1fr;
  gap:34px;
  align-items:stretch;
}
@media(max-width:900px){ .holo-wrap{ grid-template-columns:1fr; gap:24px } }

/* ---------------- stage ---------------- */
.holo-stage{
  position:relative;
  border:1px solid var(--line);
  border-radius:18px;
  overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% 100%, rgba(212,175,55,.14), rgba(10,10,10,0) 62%),
    linear-gradient(180deg,#0d0c09,#080807);
  min-height:440px;
  display:flex; flex-direction:column; justify-content:flex-end;
}
/* faint holo-deck grid */
.holo-stage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(212,175,55,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(212,175,55,.055) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:radial-gradient(80% 70% at 50% 60%,#000 30%,transparent 100%);
  -webkit-mask-image:radial-gradient(80% 70% at 50% 60%,#000 30%,transparent 100%);
}
.holo-tag{
  position:absolute;top:12px;left:14px;z-index:2;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.2em;
  font-size:.62rem;color:var(--gold);opacity:.85;
}
.holo-name{
  position:relative;z-index:2;padding:0 16px 14px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;
  font-size:.95rem;color:#ece7da;
  display:flex;align-items:baseline;gap:10px;
}
.holo-name span{ color:var(--gold);font-size:.8rem }

.holo-fig{ position:relative;z-index:1 }
.oh-svg{ display:block;width:100%;height:auto;position:relative;z-index:1 }

/* ---------------- the mannequin ----------------
   opacity on .oh-seg / .oh-ball is written per-frame as an
   ATTRIBUTE (the far side of the body dims with depth). Never set
   it here — CSS beats a presentation attribute and would flatten
   the whole rig. */
.oh-skin{ fill:rgba(212,175,55,.085); stroke:var(--gold-lite); stroke-width:1.1 }
.oh-seg{  fill:rgba(212,175,55,.10);  stroke:var(--gold-lite); stroke-width:1.1 }
/* the ball joints are the mannequin's tell — brighter than the
   volumes they connect, so the eye reads "jointed dummy" at once */
.oh-ball{ fill:rgba(246,226,122,.22); stroke:#fff4c4; stroke-width:1.15 }
/* the kit — denser and brighter-edged than skin, so the training top,
   shorts, sleeves and socks read as worn over the build */
.oh-kit{ fill:rgba(212,175,55,.155); stroke:#fff4c4; stroke-width:1.25 }
.oh-wordmark{
  fill:#fff8dc; font-family:var(--cond); font-weight:700;
  letter-spacing:.16em; paint-order:stroke;
  stroke:rgba(10,10,10,.55); stroke-width:.7;
}
.oh-ring{ fill:none; stroke:rgba(246,226,122,.38); stroke-width:.85 }
.oh-heart{ fill:var(--gold-lite); animation:oh-pulse 2.4s ease-in-out infinite }
.oh-figure{ animation:oh-float 6s ease-in-out infinite, oh-flicker 3.7s steps(1,end) infinite;
            transform-origin:50% 100% }
.oh-cone{ fill:rgba(212,175,55,.05) }

/* ---------------- LOCKED: the unrevealed player ----------------
   Solid black body. The gold edge is NOT drawn on the parts — it is
   the union's own alpha, dilated and flooded gold behind the fill
   (see the `rim` filter in oro-hologram.js). Give the parts a stroke
   here and every overlapping limb would show its seam through the
   silhouette. */
/* MUST be fully opaque: the gold rim is flooded behind this fill, so
   any alpha here lets it bleed through and the body goes tan. */
.oh-sil{ fill:#080806; stroke:none }
.oh-qmark{ fill:var(--gold-lite); font-family:var(--head); letter-spacing:0 }
.oh-figure-locked{ animation:oh-float 6s ease-in-out infinite }   /* no flicker */

/* a black figure on a black stage needs a pool of light behind it,
   or only the rim survives and the body reads as a hole */
.holo-stage.locked{
  background:
    radial-gradient(62% 46% at 50% 44%, rgba(212,175,55,.16), rgba(10,10,10,0) 72%),
    radial-gradient(120% 70% at 50% 100%, rgba(212,175,55,.10), rgba(10,10,10,0) 60%),
    linear-gradient(180deg,#100e0a,#070706);
}

.dev-card.locked{ background:linear-gradient(180deg,rgba(212,175,55,.07),#0c0b08) }
.dev-verify.lock{
  background:rgba(212,175,55,.08); border:1px solid rgba(212,175,55,.42); color:var(--gold-lite);
}
.st-lock{ color:var(--gold); border-color:rgba(212,175,55,.5); background:rgba(212,175,55,.09) }
.dev-row.is-locked .dev-delta{ color:var(--muted) }
/* the redacted value — hatched gold, so it reads as withheld
   rather than as an empty row someone forgot to fill */
.lockbar{
  display:inline-block; height:11px; border-radius:3px;
  border:1px solid rgba(212,175,55,.30);
  background:repeating-linear-gradient(135deg,
    rgba(212,175,55,.30) 0 5px, rgba(212,175,55,.08) 5px 10px);
}

/* ---------------- the projection itself ----------------
   scan banding, a roll bar, and an occasional horizontal tear —
   the beam, not the body. All CSS, so the geometry never pays. */
.oh-scan{ pointer-events:none; opacity:.5 }
.oh-roll{ pointer-events:none; opacity:.26; animation:oh-rollbar 3.6s linear infinite }
.oh-glitch{ animation:oh-tear 7.3s steps(1,end) infinite }

@keyframes oh-rollbar{ from{ transform:translateY(0) } to{ transform:translateY(560px) } }
/* mostly still, with two brief tears — a clean sine reads as a
   wobble, not a broken transmission */
@keyframes oh-tear{
  0%,41%   { transform:translateX(0) }
  42%      { transform:translateX(2.5px) }
  43%,78%  { transform:translateX(0) }
  79%      { transform:translateX(-3px) }
  80%,100% { transform:translateX(0) }
}
@keyframes oh-flicker{
  0%,17%   { opacity:1 }
  18%      { opacity:.72 }
  19%,54%  { opacity:1 }
  55%      { opacity:.84 }
  56%,88%  { opacity:1 }
  89%      { opacity:.66 }
  90%,100% { opacity:1 }
}

/* ---------------- pedestal ---------------- */
.oh-plate{ fill:rgba(212,175,55,.07); stroke:rgba(212,175,55,.22); stroke-width:1 }
.oh-dash{ fill:none; stroke:var(--gold); stroke-width:1.4; stroke-dasharray:10 14; opacity:.75 }
.oh-dash-a{ animation:oh-spin 9s linear infinite }
.oh-dash-b{ animation:oh-spin 6s linear infinite reverse }
.oh-dash-c{ animation:oh-spin 4s linear infinite }
.oh-core{ fill:var(--gold-lite); opacity:.5; animation:oh-pulse 2.4s ease-in-out infinite }

@keyframes oh-float{ 0%,100%{transform:translateY(0)} 50%{transform:translateY(-9px)} }
@keyframes oh-spin{ to{ stroke-dashoffset:-240 } }
@keyframes oh-pulse{ 0%,100%{opacity:.45} 50%{opacity:1} }

/* the rotation itself is stopped in JS (reduceMotion → a static
   three-quarter view); this only quiets the CSS-driven motion */
@media (prefers-reduced-motion:reduce){
  .oh-figure,.oh-dash-a,.oh-dash-b,.oh-dash-c,.oh-heart,.oh-core,
  .oh-roll,.oh-glitch{ animation:none }
  .oh-roll{ opacity:0 }
}

/* ---------------- hero: the half with no photos ----------------
   The photo wall runs from left:30% to the right edge. This fills
   the empty left half, sitting UNDER the headline (.hero-in is
   z-index 2) but OVER the feather gradient — which is why it is
   placed after .hero-scrim in the markup rather than before it. */
.hero-holo{
  position:absolute;z-index:1;left:0;top:0;bottom:0;
  width:min(52%,700px);
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,#000 62%,transparent 100%);
  mask-image:linear-gradient(90deg,#000 62%,transparent 100%);
}
.hero-holo .oh-svg{ width:auto;height:92%;max-width:100% }
@media(max-width:900px){ .hero-holo{ opacity:.18;width:100% } }

/* ---------------- data card ---------------- */
.dev-card{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg,rgba(212,175,55,.05),#0d0c0a);
  padding:24px 24px 20px;
}
.dev-head{ display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap }
.dev-head h3{ font-family:var(--head);font-size:1.5rem;line-height:1.15;margin:4px 0 0;letter-spacing:.01em }
.dev-head h3 .g{ color:var(--gold) }
.dev-since{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.16em;font-size:.68rem;
  color:var(--muted);border:1px solid var(--line);border-radius:40px;padding:5px 12px;white-space:nowrap;
}

.dev-verify{
  margin:16px 0 0;padding:9px 13px;border-radius:9px;
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;
}
.dev-verify.ok{ background:rgba(61,220,151,.09);border:1px solid rgba(61,220,151,.4);color:#8ef0c4 }
.dev-verify.pend{ background:rgba(224,138,60,.09);border:1px solid rgba(224,138,60,.4);color:#f0b98a }

.dev-note{ margin:14px 0 0;color:#cfc8b8;font-size:.94rem;line-height:1.65 }

.dev-rows{ margin-top:18px;border-top:1px solid var(--line) }
.dev-row{
  display:grid;
  grid-template-columns:1fr auto auto;
  grid-template-areas:"k v d" "s s s";
  gap:4px 14px;align-items:center;
  padding:13px 0;border-bottom:1px solid var(--line);
}
.dev-k{ grid-area:k;font-family:var(--cond);text-transform:uppercase;letter-spacing:.1em;font-size:.86rem;color:#ece7da;display:flex;align-items:center;gap:8px;flex-wrap:wrap }
.dev-vals{ grid-area:v;display:flex;align-items:center;gap:9px;white-space:nowrap }
.dev-vals .bv{ color:var(--muted);font-size:.9rem;text-decoration:line-through;text-decoration-color:rgba(154,146,127,.45) }
.dev-vals .ar{ color:var(--gold);font-size:.85rem }
.dev-vals .nv{ color:#fff;font-weight:700;font-size:1rem }
.dev-delta{ grid-area:d;font-family:var(--cond);letter-spacing:.08em;font-size:.78rem;min-width:52px;text-align:right;color:var(--muted) }
.dev-delta.up{ color:#3ddc97 }
.dev-delta.down{ color:#e0603a }
.dev-src{ grid-area:s;font-size:.7rem;color:var(--muted);letter-spacing:.03em }
.dev-src.none{ opacity:.55;font-style:italic }

@media(max-width:560px){
  .dev-row{ grid-template-columns:1fr auto;grid-template-areas:"k d" "v v" "s s" }
  .dev-vals{ margin-top:2px }
}

/* status chips — three distinct meanings, never brand gold */
.st{
  font-family:var(--cond);text-transform:uppercase;letter-spacing:.12em;
  font-size:.56rem;padding:2px 7px;border-radius:4px;border:1px solid;line-height:1.5;
}
.st-ok{ color:#3ddc97;border-color:rgba(61,220,151,.5);background:rgba(61,220,151,.08) }
.st-mod{ color:#6aa8ff;border-color:rgba(106,168,255,.5);background:rgba(106,168,255,.08) }
.st-pend{ color:#e08a3c;border-color:rgba(224,138,60,.5);background:rgba(224,138,60,.08) }

.dev-legend{ margin:16px 0 0;font-size:.72rem;color:var(--muted);line-height:2 }