/* title.css
   TACTO title: layers, lights, shine, shake.
   Loaded by index.html (order matters). */

/* ============================================================
   TITLE (TACTO) — settings in TITLE_FX config
   ============================================================ */
.lc-title {
  position: absolute; left: 50%; z-index: 2;
  transform: translate(calc(-50% + var(--plx-x, 0px)), calc(-50% + var(--plx-y, 0px)));
  pointer-events: none; user-select: none;
  visibility: hidden;
}
.lc-title.is-on { visibility: visible; }
.lc-title-inner { position: relative; width: 100%; will-change: transform, filter, opacity; opacity: 0; }
.lc-title-inner img {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  -webkit-user-drag: none;
}
.lc-title-inner img.lc-t-base { position: relative; height: auto; }
/* red lights: T A C (left of the split) — blue lights: T O (right of the split) */
/* two masks combined: left/right split  AND  a level that rises from the bottom (--red-lvl / --blue-lvl) */
.lc-t-red {
  -webkit-mask-image:
    linear-gradient(to right, #000 calc(var(--split) - 0.8%), transparent calc(var(--split) + 0.8%)),
    linear-gradient(to top, #000 calc(var(--red-lvl, -20%) - var(--soft, 10%)), transparent calc(var(--red-lvl, -20%) + var(--soft, 10%)));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, #000 calc(var(--split) - 0.8%), transparent calc(var(--split) + 0.8%)),
    linear-gradient(to top, #000 calc(var(--red-lvl, -20%) - var(--soft, 10%)), transparent calc(var(--red-lvl, -20%) + var(--soft, 10%)));
  mask-composite: intersect;
}
.lc-t-blue {
  -webkit-mask-image:
    linear-gradient(to right, transparent calc(var(--split) - 0.8%), #000 calc(var(--split) + 0.8%)),
    linear-gradient(to top, #000 calc(var(--blue-lvl, -20%) - var(--soft, 10%)), transparent calc(var(--blue-lvl, -20%) + var(--soft, 10%)));
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent calc(var(--split) - 0.8%), #000 calc(var(--split) + 0.8%)),
    linear-gradient(to top, #000 calc(var(--blue-lvl, -20%) - var(--soft, 10%)), transparent calc(var(--blue-lvl, -20%) + var(--soft, 10%)));
  mask-composite: intersect;
}
/* glow lives on a wrapper OUTSIDE the mask, so it isn't cut into rectangles */
.lc-t-light { position: absolute; inset: 0; }

/* SPEAKING SHINE: the chrome letters themselves light up with the voice (no glow behind).
   --speak (0..1) follows the loudness of the voice; --sheen-pos moves a band of light across. */
.lc-t-shine, .lc-t-sheen { pointer-events: none; }
.lc-t-shine {
  opacity: calc(var(--speak, 0) * var(--shine-amount, 0.8));
  filter: brightness(var(--shine-bright, 2.2)) contrast(1.15) saturate(0.7);
}
.lc-t-sheen {
  opacity: var(--speak, 0);
  filter: brightness(var(--sheen-bright, 3.4)) saturate(0.5);
  -webkit-mask-image: linear-gradient(105deg, transparent calc(var(--sheen-pos, -20%) - var(--sheen-w, 9%)), #000 var(--sheen-pos, -20%), transparent calc(var(--sheen-pos, -20%) + var(--sheen-w, 9%)));
          mask-image: linear-gradient(105deg, transparent calc(var(--sheen-pos, -20%) - var(--sheen-w, 9%)), #000 var(--sheen-pos, -20%), transparent calc(var(--sheen-pos, -20%) + var(--sheen-w, 9%)));
}
/*.lc-t-light.red  { opacity: var(--red, 0);  filter: drop-shadow(0 0 var(--glow) var(--red-glow)); }*/
/*.lc-t-light.blue { opacity: var(--blue, 0); filter: drop-shadow(0 0 var(--glow) var(--blue-glow)); }*/
.lc-t-light.red  { opacity: var(--red, 0); }
.lc-t-light.blue { opacity: var(--blue, 0); }