/* ============================================================================
   theme.css — deck "standard-title-slide"  (THE STANDARD TITLE SLIDE)

   A faithful port of an "animated grid background" reference title slide.
   Structure, layout, timing and animations are kept as-is; only two things
   change: the palette (house colours) and the typeface/weight (Segoe UI at
   weight 100, in place of the reference's Inter extralight/thin).

   The signature motion is a WORD-BY-WORD reveal (`word-appear`: blur + scale +
   rise, staggered per word), over SVG grid lines that DRAW themselves in
   (`grid-draw`), pulsing detail dots, drifting specks and a title underline that
   grows. All pure CSS, keyed off `.slide.active`, so it replays on entry.
   ============================================================================ */

:root{
  --deck-bg:        #000510;
  --deck-ink:       #f9fafb;
  --deck-ink-dim:   #9aa3b8;
  --deck-accent:    #a9c0ea;

  --ts-accent: #a9c0ea;   /* was sage-200 — lines, dots, tracked labels */
  --ts-title:  #f9fafb;   /* title */
  --ts-sub:    #aab8d6;   /* subtitle (soft) */
}

.slide--variant-technical-grid{ overflow: hidden; }

/* full-bleed cool-dark gradient (was from-sage-900 via-black to-sage-800) */
.ts-stage{
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(to bottom right, #0b1226 0%, #000208 55%, #0a1120 100%);
  /* Segoe UI (house font) — the title/body read at a very light weight */
  font-family: var(--deck-font, "Segoe UI", system-ui, sans-serif);
}

/* ---- fine static grid (the reference's <pattern>) -------------------------- */
.ts-grid{
  position: absolute; inset: 0;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cpath d='M60 0H0V60' fill='none' stroke='%23a9c0ea' stroke-opacity='0.08' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 3.2cqw 3.2cqw;
}

/* ---- animated main grid lines + detail dots (SVG) ------------------------- */
.ts-lines{ position: absolute; inset: 0; width: 100%; height: 100%; }
.ts-gl{
  stroke: var(--ts-accent); stroke-width: .5; opacity: 0;
  stroke-dasharray: 5 5; stroke-dashoffset: 1000;
}
.slide.active .ts-gl{ animation: grid-draw 2s ease-out forwards; animation-delay: var(--d, 0s); }
@keyframes grid-draw{
  0%   { stroke-dashoffset: 1000; opacity: 0; }
  50%  { opacity: calc(var(--op, .15) * 2); }
  100% { stroke-dashoffset: 0; opacity: var(--op, .15); }
}
.ts-dot{ fill: var(--ts-accent); opacity: 0; }
.slide.active .ts-dot{ animation: pulse-glow 3s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes pulse-glow{
  0%, 100% { opacity: .1; transform: scale(1); }
  50%      { opacity: .3; transform: scale(1.1); }
}

/* ---- floating corner brackets --------------------------------------------- */
.ts-corner{
  position: absolute; width: 2.9cqw; height: 2.9cqw;
  border: 1px solid rgba(169, 192, 234, .2); opacity: 0;
}
.ts-corner::before{
  content: ""; position: absolute; width: .55cqw; height: .55cqw;
  background: rgba(169, 192, 234, .3); border-radius: 50%;
}
.ts-corner--tl{ top: 4.5cqh; left: 3cqw; }        .ts-corner--tl::before{ top: 0; left: 0; }
.ts-corner--tr{ top: 4.5cqh; right: 3cqw; }       .ts-corner--tr::before{ top: 0; right: 0; }
.ts-corner--bl{ bottom: 4.5cqh; left: 3cqw; }     .ts-corner--bl::before{ bottom: 0; left: 0; }
.ts-corner--br{ bottom: 4.5cqh; right: 3cqw; }    .ts-corner--br::before{ bottom: 0; right: 0; }
.slide.active .ts-corner{ animation: word-appear 1s ease-out forwards; animation-delay: var(--d, 0s); }

/* ---- drifting specks ------------------------------------------------------- */
.ts-float{
  position: absolute; width: .16cqw; height: .16cqw; min-width: 2px; min-height: 2px;
  background: var(--ts-accent); border-radius: 50%; opacity: 0;
}
.slide.active .ts-float{ animation: float 4s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes float{
  0%, 100% { transform: translate(0, 0);        opacity: .2; }
  25%      { transform: translate(5px, -10px);  opacity: .6; }
  50%      { transform: translate(-3px, -5px);  opacity: .4; }
  75%      { transform: translate(7px, -15px);  opacity: .8; }
}

/* ---- layout: top / centre / bottom, distributed ---------------------------- */
.ts-flow{
  position: absolute; inset: 0; z-index: 10;
  display: flex; flex-direction: column; justify-content: space-between; align-items: center;
  text-align: center; padding: 11cqh 8cqw;
}

/* small supporting labels */
.ts-eyebrow, .ts-footer{
  margin: 0; color: var(--ts-accent);
  font-size: 1.2cqw; font-weight: 300; letter-spacing: 0; text-transform: uppercase;
  opacity: .8;
}
.ts-hr{
  width: 8cqw; height: 1px; margin: 1.6cqh auto 0;
  background: linear-gradient(90deg, transparent, var(--ts-accent), transparent); opacity: .3;
}
.ts-bot .ts-hr{ margin: 0 auto 1.6cqh; }

/* centre block: big title + smaller subtitle, in one heading */
.ts-mid{ position: relative; max-width: 78cqw; }
.ts-title{ margin: 0; position: relative; }
.ts-title-lead{
  display:block;
  color: var(--ts-title);
  font-size: clamp(2rem, 5cqw, 4.4rem); font-weight: 100; line-height: 1.1; letter-spacing: 0;
}
.ts-title-sub{
  margin:3cqh 0 0;
  color: var(--ts-sub);
  font-size: clamp(1.3rem, 3cqw, 2.6rem); font-weight: 100; line-height: 1.4; letter-spacing: 0;
}
/* growing underline under the centre heading */
.ts-title::after{
  content: ""; position: absolute; bottom: -1.6cqh; left: 0; width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--ts-accent), transparent);
}
.slide.active .ts-title::after{ animation: underline-grow 2s ease-out 2s forwards; }
@keyframes underline-grow{ to { width: 100%; } }

/* little side ticks either side of the centre heading */
.ts-side{ position: absolute; top: 50%; width: 2.2cqw; height: 1px; background: var(--ts-accent); opacity: 0; }
.ts-side--l{ left: -5cqw; }  .ts-side--r{ right: -5cqw; }
.slide.active .ts-side{ animation: word-appear 1s ease-out forwards; animation-delay: var(--d, 0s); }

/* three dots under the footer */
.ts-dots3{ display: flex; gap: 1cqw; justify-content: center; margin-top: 2.4cqh; opacity: 0; }
.ts-dots3 i{ width: .32cqw; height: .32cqw; min-width: 4px; min-height: 4px; border-radius: 50%; background: var(--ts-accent); }
.ts-dots3 i:nth-child(1){ opacity: .4; } .ts-dots3 i:nth-child(2){ opacity: .6; } .ts-dots3 i:nth-child(3){ opacity: .4; }
.slide.active .ts-dots3{ animation: word-appear 1s ease-out 4.5s forwards; }

/* ---- the signature per-word reveal ---------------------------------------- */
.word{ display: inline-block; margin: 0 .1em; opacity: 0; }
.slide.active .word{ animation: word-appear .8s ease-out both; animation-delay: var(--d, 0s); }
@keyframes word-appear{
  0%   { opacity: 0;  transform: translateY(30px) scale(.8);  filter: blur(10px); }
  50%  { opacity: .8; transform: translateY(10px) scale(.95); filter: blur(2px); }
  100% { opacity: 1;  transform: translateY(0)    scale(1);   filter: blur(0); }
}

@media (prefers-reduced-motion: reduce){
  .word, .ts-gl, .ts-dot, .ts-corner, .ts-float, .ts-side, .ts-dots3, .ts-title::after{
    animation: none !important;
  }
  .word{ opacity: 1; transform: none; filter: none; }
  .ts-gl{ opacity: .15; stroke-dashoffset: 0; }
  .ts-dot{ opacity: .2; }
  .ts-corner, .ts-side, .ts-dots3{ opacity: 1; }
  .ts-float{ opacity: .3; }
  .ts-title::after{ width: 100%; }
}
/* Synced-workspace EOF padding prevents stale tail bytes after short rewrites. */