/* ==========================================================================
   TFE-03 · PARTICIPANT CARD · بطاقة المشارك
   Portrait in Assim's faceted gold ring (PNG, turning slowly while on air),
   the participant's name on a navy ribbon (the headline), their affiliation
   on a small gold ribbon underneath. Load after tfe-ui.css.

   .tfe-participant
     .tfe-portrait                    ring box (--tfe-portrait-d)
       .tfe-portrait__frame           fades / scales as one object
         .tfe-portrait__body          structure: opens out (transform)
           .tfe-portrait__photo       circular window behind the ring, navy
             .tfe-portrait__iris      opens (clip-path)
               .tfe-portrait__zoom    settles (transform)
                 .tfe-portrait__img   focus + fade (filter / opacity)
           .tfe-portrait__spin        spin-in / spin-out (transform)
             .tfe-portrait__turn      slow idle rotation (transform, infinite)
               .tfe-portrait__ring    the PNG (focus = filter, never moved itself)
               .tfe-portrait__lit     light, masked to the ring's bright facets
                 .tfe-light > .tfe-portrait__still > .tfe-portrait__arc × 2
               .tfe-portrait__flare   landing glint (same facet mask)
     [data-tfe-name]  → TFE-01 Ribbon, variant "option" (navy)
     [data-tfe-role]  → TFE-01 Ribbon, variant "title"  (gold)

   Ring asset: assets/portrait-ring.png (1024², centred on the ring's true
   centre, so it turns without wobble). Inner edge = 82.2–83.6 % of the box,
   so the photo window is 85 % and tucks under the ring all the way round.
   ========================================================================== */
.tfe-participant {
  --tfe-portrait-d: 580px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ---- Portrait --------------------------------------------------------------- */
.tfe-portrait {
  --d: var(--tfe-portrait-d);
  position: relative;
  z-index: 0;
  width: var(--d);
  height: var(--d);
  flex: none;
}
.tfe-portrait__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(0.965);
  will-change: opacity, transform;
}
.tfe-portrait__body {
  position: absolute;
  inset: 0;
  transform: scale(0.72);
  will-change: transform;
}
/* soft contact shadow under the ring (never turns, so it stays below) */
.tfe-portrait__body::before {
  content: "";
  position: absolute;
  inset: 4% 3% -2%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5) 72%, rgba(0, 0, 0, 0) 100%);
  transform: translateY(2.5%);
  filter: blur(calc(var(--d) * 0.03));
}

/* Photo window */
.tfe-portrait__photo {
  position: absolute;
  inset: 7.5%;
  z-index: 1;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 38%, #0f2446 0%, #070f1e 75%);
}
.tfe-portrait__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  box-shadow: inset 0 calc(var(--d) * 0.018) calc(var(--d) * 0.05) rgba(0, 0, 0, 0.5);
}
.tfe-portrait__iris { position: absolute; inset: 0; clip-path: circle(0% at 50% 50%); }
.tfe-portrait__zoom { position: absolute; inset: 0; transform: scale(1.14); will-change: transform; }
.tfe-portrait__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
  opacity: 0;
  filter: blur(14px);
  will-change: opacity, filter;
}

/* Ring */
.tfe-portrait__spin,
.tfe-portrait__turn {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.tfe-portrait__spin { z-index: 2; transform: rotate(-120deg); }
.tfe-portrait__ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: blur(8px);
  will-change: filter;
}
.tfe-portrait__lit,
.tfe-portrait__flare {
  position: absolute;
  inset: 0;
  -webkit-mask: url("../assets/portrait-ring-spec.png") center / 100% 100% no-repeat;
          mask: url("../assets/portrait-ring-spec.png") center / 100% 100% no-repeat;
}
.tfe-portrait__lit > .tfe-light { border-radius: 50%; }
.tfe-portrait__still { position: absolute; inset: 0; will-change: transform; }

/* Idle light: two warm arcs leave the top and run down both sides. Kept soft:
   the ring already turns, and the mask puts it only on the bright facets. */
.tfe-portrait__arc {
  --peak: 0.7;
  --glow: 255, 222, 160;
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: transform, opacity;
  background: conic-gradient(
    rgba(var(--glow), var(--peak)) 0deg,
    rgba(var(--glow), calc(var(--peak) * 0.55)) 10deg,
    rgba(var(--glow), calc(var(--peak) * 0.16)) 22deg,
    rgba(var(--glow), 0) 36deg,
    rgba(var(--glow), 0) 324deg,
    rgba(var(--glow), calc(var(--peak) * 0.16)) 338deg,
    rgba(var(--glow), calc(var(--peak) * 0.55)) 350deg,
    rgba(var(--glow), var(--peak)) 360deg);
}
.tfe-portrait__flare {
  opacity: 0;
  will-change: opacity;
  background: rgba(var(--tfe-light), 0.85);
}

/* ---- Name (navy, the headline) and role (gold, small) --------------------- */
.tfe-participant > .tfe-ribbon { position: relative; }
.tfe-participant > .tfe-ribbon[data-tfe-name] {
  --h: var(--tfe-name-h, 172px);
  --text: 0.47;
  --weight: 800;
  --margin: 0.9;
  z-index: 2;
  min-width: var(--tfe-name-min-w, 860px);
  margin-top: calc(var(--h) * -0.18);       /* nameplate just overlaps the ring's foot */
}
.tfe-participant > .tfe-ribbon[data-tfe-role] {
  --h: var(--tfe-role-h, 88px);
  --text: 0.44;
  --weight: 700;
  --margin: 0.5;
  z-index: 1;
  margin-top: var(--tfe-role-gap, 14px);
}