/* Animated Grace logo (see logo.js). Adapted from the livestream overlay
   HTML/obs-grace-logo.html: same shapes, sizes and timings, but the idle
   effects run once and then the logo holds still. Needs the Figtree and
   Gabarito @font-face rules from styles.css / pastor.css. */

.grace-logo { --gl-navy: #140a64; --gl-red: #d70000; --gl-white: #fff; }

.grace-logo img,
.grace-logo svg {
  display: block;
  width: 100%;
  height: auto;
}
.grace-logo svg {
  overflow: visible;
  visibility: hidden;            /* shown once fonts are ready (logo.js) */
}
.grace-logo svg.play,
.grace-logo svg.still { visibility: visible; }

.grace-logo svg * { transform-box: fill-box; }

/* ---------- shapes ---------- */
.grace-logo .letter {
  font-family: "Figtree", "Segoe UI", Arial, sans-serif;
  fill: var(--gl-navy);
  stroke: var(--gl-white);
  stroke-width: 6.5;
  stroke-linejoin: round;
  paint-order: stroke;
}
.grace-logo .big   { font-size: 200px;   font-weight: 750; }
.grace-logo .small { font-size: 57.14px; font-weight: 700; }
.grace-logo .gab-g { font-family: "Gabarito", "Figtree", sans-serif; font-size: 205.58px; font-weight: 625; }

.grace-logo .red-shape {
  fill: var(--gl-red);
  stroke: var(--gl-white);
  stroke-width: 10;
  stroke-linejoin: round;
  paint-order: stroke;
}
.grace-logo .line,
.grace-logo .line-outline { fill: none; stroke-linejoin: round; stroke-dasharray: 1; }
.grace-logo .line         { stroke: var(--gl-red);   stroke-width: 19; }
.grace-logo .line-outline { stroke: var(--gl-white); stroke-width: 29; }

.grace-logo .pulse {
  fill: none;
  stroke: var(--gl-white);
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
}
.grace-logo .gl-pulse-cross { stroke-dasharray: 0.25 2; stroke-dashoffset: -1; }
.grace-logo .pulse-line     { stroke-dasharray: 0.08 2; stroke-dashoffset: -1; }
.grace-logo .gl-shine       { opacity: 0; }

.grace-logo .gl-head-l { transform-origin: 100% 50%; }
.grace-logo .gl-head-r { transform-origin: 0% 50%; }
.grace-logo .gl-A      { transform-origin: 50% 100%; }

/* ---------- intro (about 3.4 s) ---------- */
.grace-logo .play .gl-cross-group { animation: gl-drop 0.9s cubic-bezier(.22, 1.25, .36, 1) 0.1s both; }
.grace-logo .play .gl-A { animation: gl-grow 0.6s cubic-bezier(.22, 1.25, .36, 1) 0.8s both; }
.grace-logo .play .gl-R { --dx: 130px;  animation: gl-spread 0.7s cubic-bezier(.22, 1, .36, 1) 1.05s both; }
.grace-logo .play .gl-C { --dx: -140px; animation: gl-spread 0.7s cubic-bezier(.22, 1, .36, 1) 1.05s both; }
.grace-logo .play .gl-G { --dx: 265px;  animation: gl-spread 0.8s cubic-bezier(.22, 1, .36, 1) 1.15s both; }
.grace-logo .play .gl-E { --dx: -280px; animation: gl-spread 0.8s cubic-bezier(.22, 1, .36, 1) 1.15s both; }
.grace-logo .play .line,
.grace-logo .play .line-outline { animation: gl-draw 0.8s cubic-bezier(.45, 0, .55, 1) 1.7s both; }
.grace-logo .play .head  { animation: gl-grow 0.3s ease-out 2.42s both; }
.grace-logo .play .small { animation: gl-rise 0.5s ease-out calc(2.5s + var(--d)) both; }

/* ---------- one pass of the overlay's idle effects, then still ----------
   Same keyframes as the overlay's 7 s loop, played once. Pulses use
   "forwards" (not "both") so they stay invisible until their turn. */
.grace-logo .play .gl-pulse-cross { animation: gl-run-cross 7s linear 3.9s 1 forwards; }
.grace-logo .play .pulse-line     { animation: gl-run-line 7s 3.9s 1 forwards; }
.grace-logo .play .gl-shine       { opacity: 1; animation: gl-sweep 7s ease-in-out 6s 1 both; }

@keyframes gl-drop {
  from { transform: translateY(-160px); opacity: 0; }
  to   { transform: translateY(0);      opacity: 1; }
}
@keyframes gl-grow {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
@keyframes gl-spread {
  from { transform: translateX(var(--dx)); opacity: 0; }
  to   { transform: translateX(0);         opacity: 1; }
}
@keyframes gl-draw {
  from { stroke-dashoffset: 1; }
  to   { stroke-dashoffset: 0; }
}
@keyframes gl-rise {
  from { transform: translateY(24px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
@keyframes gl-run-cross {
  0%       { stroke-dashoffset: 0.25; opacity: 0.6; }
  5%       { opacity: 0.6; }
  8%, 100% { stroke-dashoffset: -1;   opacity: 0; }
}
@keyframes gl-run-line {
  0%, 9%    { stroke-dashoffset: 0.08; opacity: 0.6; animation-timing-function: linear; }
  22%       { opacity: 0.6; animation-timing-function: linear; }
  28%, 100% { stroke-dashoffset: -1;   opacity: 0; }
}
@keyframes gl-sweep {
  0%        { transform: translateX(-260px); }
  20%, 100% { transform: translateX(820px); }
}