/* ==========================================================================
   TFE BROADCAST UI · الألغاز الخمسة · The Five Enigmas
   --------------------------------------------------------------------------
   TFE-01  Ribbon        .tfe-ribbon[data-variant="option" | "title"]
   TFE-02  ChoiceBoard   .tfe-board  (title ribbon + equal-width option ribbons)
   v0.4

   Runtime: tfe-ui.js (window.TFE). Target: Chromium (Chrome kiosk, CEF,
   CasparCG HTML producer, OBS browser source). Stage: 1920 × 1080.
   ========================================================================== */

/* ---- Fonts ---------------------------------------------------------------
   Broadcast text = TT Neoris Pro (brand secondary). The files shipped here are
   the TRIAL cut — replace with the licensed woff2 before air. */
@font-face { font-family: "TT Neoris Pro"; font-weight: 500; font-display: block;
  src: local("TT Neoris Pro Medium"), url("../fonts/TTNeorisPro-Medium.woff2") format("woff2"); }
@font-face { font-family: "TT Neoris Pro"; font-weight: 600; font-display: block;
  src: local("TT Neoris Pro DemiBold"), url("../fonts/TTNeorisPro-DemiBold.woff2") format("woff2"); }
@font-face { font-family: "TT Neoris Pro"; font-weight: 700; font-display: block;
  src: local("TT Neoris Pro Bold"), url("../fonts/TTNeorisPro-Bold.woff2") format("woff2"); }
@font-face { font-family: "TT Neoris Pro"; font-weight: 800; font-display: block;
  src: local("TT Neoris Pro ExtraBold"), url("../fonts/TTNeorisPro-ExtraBold.woff2") format("woff2"); }

/* ---- Animation channels (driven by tfe-ui.js) ---------------------------- */
@property --tfe-p     { syntax: "<number>"; inherits: true; initial-value: 0; } /* caps spread 0→1      */
@property --tfe-flare { syntax: "<number>"; inherits: true; initial-value: 0; } /* facet bloom on caps  */

/* ---- Tokens -------------------------------------------------------------- */
:root {
  /* Brand palette (brand book · Colours) */
  --tfe-saffron-gold: #ffc03a;
  --tfe-sand-beige:   #dcc099;
  --tfe-peach-cream:  #ffdba9;
  --tfe-midnight-navy:#0a1733;
  --tfe-broadcast-blue:#1f60b5;
  --tfe-sky-blue:     #33a6de;
  --tfe-deep-navy:    #070a16;
  --tfe-white:        #ffffff;

  /* Metal — sampled from the endcap PNG */
  --tfe-gold-900: #5e3c0e;
  --tfe-gold-800: #6e4813;
  --tfe-gold-700: #8a5d1f;
  --tfe-gold-600: #a8793a;
  --tfe-gold-500: #c49449;
  --tfe-gold-400: #dcb066;
  --tfe-gold-300: #efcd8c;
  --tfe-gold-200: #f8e2b4;
  --tfe-gold-100: #fcf4e1;
  --tfe-light:    255, 242, 214;          /* warm light, used as rgba(var(--tfe-light), a) */

  --tfe-font: "TT Neoris Pro", "Cairo", "Tajawal", sans-serif;
  --tfe-cap-ratio: 0.6469;                /* endcap PNG: 414 × 640 */
}

/* ==========================================================================
   TFE-01 · RIBBON
   Width:  automatic from its text (+ margins), or any explicit width.
   Height: --h. Caps, rails, text and margins all scale from it.
   ========================================================================== */
.tfe-ribbon {
  --h: 146px;
  --cw: calc(var(--h) * var(--tfe-cap-ratio));   /* cap width                     */
  --tuck: 0.4;                                   /* body tucked under each cap    */
  --text: 0.4;                                   /* text size × --h               */
  --weight: 700;
  --margin: 1.1;                                 /* breathing room × --h, per side */

  position: relative;
  display: block;
  width: max-content;
  height: var(--h);
  direction: rtl;
  user-select: none;
  -webkit-font-smoothing: antialiased;
}

/* Invisible copy of the label: gives the ribbon its natural width. */
.tfe-ribbon__sizer {
  display: block;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  white-space: nowrap;
  font: var(--weight) calc(var(--h) * var(--text)) / 1 var(--tfe-font);
  padding-inline: calc(var(--cw) * 0.85 + var(--h) * var(--margin));
}

/* Everything visible lives in the frame — it fades/scales as one object. */
.tfe-ribbon__frame {
  position: absolute;
  inset: 0;
  container-type: inline-size;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: opacity, transform;
}

/* Body = rails + panel, revealed by a clip that rides exactly under the caps. */
.tfe-ribbon__body {
  position: absolute;
  inset: 0;
  z-index: 1;
  clip-path: inset(0 calc(50% - (50% - var(--cw)) * var(--tfe-p) - var(--cw) * var(--tuck)));
}

/* ---- Panel: option (navy) ------------------------------------------------ */
.tfe-ribbon__panel {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--h) * 0.05);
  bottom: calc(var(--h) * 0.05);
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    /* soft side falloff (fixed length, so it reads the same at any width) */
    linear-gradient(90deg,
      rgba(3, 8, 20, 0.55) 0,
      rgba(3, 8, 20, 0) calc(var(--h) * 1.6),
      rgba(3, 8, 20, 0) calc(100% - var(--h) * 1.6),
      rgba(3, 8, 20, 0.55) 100%),
    /* broadcast-blue lift along the upper third */
    radial-gradient(70% 95% at 50% 18%, rgba(31, 96, 181, 0.26) 0%, rgba(31, 96, 181, 0.08) 45%, rgba(31, 96, 181, 0) 75%),
    /* vertical body: lit top → deep navy floor */
    linear-gradient(180deg,
      #0a1a3b 0%, #0c1f45 16%, #0a1a3a 34%,
      #081530 52%, #061024 72%, #050c1d 100%);
  box-shadow:
    inset 0 calc(var(--h) * 0.03) calc(var(--h) * 0.07) rgba(0, 0, 0, 0.45),
    inset 0 calc(var(--h) * -0.03) calc(var(--h) * 0.07) rgba(0, 0, 0, 0.5);
}

/* ---- Panel: title (soft gold) -------------------------------------------- */
.tfe-ribbon[data-variant="title"] {
  --text: 0.5;
  --weight: 800;
  --margin: 0.38;
}
.tfe-ribbon[data-variant="title"] .tfe-ribbon__panel {
  background:
    radial-gradient(55% 85% at 50% 38%, rgba(var(--tfe-light), 0.42) 0%, rgba(var(--tfe-light), 0.12) 50%, rgba(var(--tfe-light), 0) 78%),
    linear-gradient(180deg,
      #8d6025 0%, #b98640 7%, #dcb169 22%,
      #ebc888 38%, #e2ba74 55%, #cf9f55 74%,
      #b5843f 90%, #8f6226 100%);
  box-shadow:
    inset 0 calc(var(--h) * 0.025) calc(var(--h) * 0.05) rgba(90, 55, 12, 0.35),
    inset 0 calc(var(--h) * -0.025) calc(var(--h) * 0.05) rgba(80, 48, 8, 0.4);
}

/* ---- Rails --------------------------------------------------------------- */
.tfe-ribbon__rail {
  position: absolute;
  left: 0; right: 0;
  height: calc(var(--h) * 0.05);
  overflow: hidden;
  isolation: isolate;
  z-index: 2;
  background:
    linear-gradient(90deg,
      rgba(70, 40, 5, 0.28) 0%, rgba(255, 240, 205, 0) 12%,
      rgba(255, 242, 210, 0.16) 30%, rgba(255, 240, 205, 0) 46%,
      rgba(70, 40, 5, 0.12) 60%, rgba(255, 242, 210, 0.14) 78%,
      rgba(255, 240, 205, 0) 90%, rgba(70, 40, 5, 0.28) 100%),
    linear-gradient(180deg,
      var(--tfe-gold-700) 0%, var(--tfe-gold-300) 20%, var(--tfe-gold-100) 34%,
      var(--tfe-gold-400) 54%, var(--tfe-gold-600) 78%, var(--tfe-gold-900) 100%);
}
.tfe-ribbon__rail--top    { top: calc(var(--h) * 0.012); }
.tfe-ribbon__rail--bottom { bottom: calc(var(--h) * 0.01); filter: brightness(0.9); }

/* ---- Endcaps (PNG) ------------------------------------------------------- */
.tfe-ribbon__cap {
  position: absolute;
  top: 0;
  width: var(--cw);
  height: 100%;
  z-index: 3;
  background: center / 100% 100% no-repeat;
  -webkit-mask: center / 100% 100% no-repeat;
          mask: center / 100% 100% no-repeat;
  will-change: transform;
}
.tfe-ribbon__cap--r {
  left: 50%;
  background-image: url("../assets/endcap-right.png");
  -webkit-mask-image: url("../assets/endcap-right.png");
          mask-image: url("../assets/endcap-right.png");
  transform: translateX(calc((50cqw - var(--cw)) * var(--tfe-p)));
}
.tfe-ribbon__cap--l {
  right: 50%;
  background-image: url("../assets/endcap-left.png");
  -webkit-mask-image: url("../assets/endcap-left.png");
          mask-image: url("../assets/endcap-left.png");
  transform: translateX(calc((50cqw - var(--cw)) * var(--tfe-p) * -1));
}
/* Specular layer: light only lands on the facets that already face the light. */
.tfe-ribbon__spec {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask: center / 100% 100% no-repeat;
          mask: center / 100% 100% no-repeat;
}
.tfe-ribbon__cap--r .tfe-ribbon__spec { -webkit-mask-image: url("../assets/endcap-right-spec.png"); mask-image: url("../assets/endcap-right-spec.png"); }
.tfe-ribbon__cap--l .tfe-ribbon__spec { -webkit-mask-image: url("../assets/endcap-left-spec.png");  mask-image: url("../assets/endcap-left-spec.png"); }
.tfe-ribbon__flare {
  position: absolute;
  inset: 0;
  opacity: var(--tfe-flare);
  background: radial-gradient(120% 70% at 50% 45%, rgba(var(--tfe-light), 1) 0%, rgba(var(--tfe-light), 0.75) 60%, rgba(var(--tfe-light), 0.45) 100%);
}

/* ---- Label ---------------------------------------------------------------
   Reveal = real blur clearing + fade + gentle rise. The rise/scale lives on
   the outer .tfe-ribbon__text (compositor transform); the blur and fade live
   on the inner .tfe-ribbon__label, which never moves inside its own layer —
   so the glyphs are never re-rasterised at shifting sub-pixel positions and
   cannot shake. */
.tfe-ribbon__text {
  position: relative;
  z-index: 3;
  display: block;
  font: var(--weight) calc(var(--h) * var(--text)) / 1.25 var(--tfe-font);
  color: var(--tfe-white);
  white-space: nowrap;
  padding: 0.12em 0.3em;
  margin-top: -0.04em;                 /* optical centring for Arabic */
  text-align: center;
  transform: translateY(0.32em) scale(1.03);
  will-change: transform;
}
.tfe-ribbon__label {
  display: block;
  opacity: 0;
  filter: blur(0.2em);
  will-change: opacity, filter;
  text-shadow: 0 0.03em 0.12em rgba(0, 0, 0, 0.45);
}
.tfe-ribbon[data-variant="title"] .tfe-ribbon__label {
  text-shadow:
    0 0.025em 0 rgba(120, 76, 18, 0.55),
    0 0.05em 0.1em rgba(80, 46, 6, 0.55),
    0 0.08em 0.35em rgba(70, 40, 4, 0.45);
}

/* ==========================================================================
   LIGHT — idle gleam (tfe-ui.js runs it with the Web Animations API,
   transform + opacity only → compositor thread, perfectly smooth)
   · From the centre of each ribbon, two soft bands travel outward, one to
     each endcap. They start almost invisible (no flash where they meet) and
     grow stronger as they reach the gold caps, then fade past the ends.
   · Rows ripple top → bottom. On the caps, the lit facets catch the light
     through a specular map and the rest of the cap warms in gold.
   · Between passes the cap facets breathe very softly.
   · .tfe-light wrappers carry the master fade (in on idle, out on close).
   Navy never carries light — every layer sits inside a gold surface.
   ========================================================================== */
.tfe-light {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  will-change: opacity;
}
.tfe-gleam {
  --peak: 0.7;
  --glow: 255, 246, 222;                 /* warm white */
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: var(--tfe-band, 700px);
  opacity: 0;
  transform: translateX(-99999px);
  will-change: transform, opacity;
  background: linear-gradient(90deg,
    rgba(var(--glow), 0) 0%,
    rgba(var(--glow), calc(var(--peak) * 0.06)) 12%,
    rgba(var(--glow), calc(var(--peak) * 0.22)) 24%,
    rgba(var(--glow), calc(var(--peak) * 0.52)) 36%,
    rgba(var(--glow), calc(var(--peak) * 0.86)) 45%,
    rgba(var(--glow), var(--peak)) 50%,
    rgba(var(--glow), calc(var(--peak) * 0.86)) 55%,
    rgba(var(--glow), calc(var(--peak) * 0.52)) 64%,
    rgba(var(--glow), calc(var(--peak) * 0.22)) 76%,
    rgba(var(--glow), calc(var(--peak) * 0.06)) 88%,
    rgba(var(--glow), 0) 100%);
}
.tfe-ribbon__rail  .tfe-gleam          { --peak: 1; }
.tfe-ribbon__cap   > .tfe-light .tfe-gleam { --peak: 0.64; --glow: 255, 205, 120; }  /* whole cap warms, golden */
.tfe-ribbon__spec  .tfe-gleam          { --peak: 1;    --glow: 255, 236, 190; }  /* lit facets catch it    */
.tfe-ribbon__panel > .tfe-light        { z-index: 1; }
.tfe-ribbon__panel .tfe-gleam          { --peak: 0.62; --glow: 255, 240, 205; }  /* title gold */

.tfe-ribbon__breath {
  position: absolute;
  inset: 0;
  opacity: 0;
  will-change: opacity;
  background: rgba(var(--tfe-light), 0.85);
}

/* Title: on landing the light swells from inside the gold, like the logo's core. */
.tfe-ribbon__bloom {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: calc(var(--tfe-flare) * 0.9);
  background: radial-gradient(45% 80% at 50% 45%, rgba(255, 248, 228, 0.7) 0%, rgba(255, 244, 214, 0.25) 50%, rgba(255, 244, 214, 0) 80%);
}

/* ==========================================================================
   TFE-02 · CHOICE BOARD
   Options share one grid column → always the same width (the widest label
   wins). Title sizes to its own label.
   ========================================================================== */
.tfe-board {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--tfe-title-gap, 20px);
}
.tfe-board__options {
  display: grid;
  grid-template-columns: minmax(var(--tfe-min-w, 0px), max-content);
  justify-content: center;
  gap: var(--tfe-gap, 22px);
}
.tfe-board > .tfe-ribbon[data-variant="title"] { --h: var(--tfe-title-h, 168px); }
.tfe-board__options > .tfe-ribbon { --h: var(--tfe-option-h, 146px); width: auto; }