/* TensorTest logo: sizing, colour and a one-second header intro/replay. Markup: src/fragments/logo-lockup.svg (header) and
 * logo-mark.svg (small mark). Crossbar cells .tt-cell-1..3 are cobalt, the stem .tt-cell-4 ink, and the foot
 * .tt-cell-foot signal red. The SVG attributes carry hex fallbacks.
 * Tokens added here (logo-only): --tt-logo-h, --tt-logo-h-sm. */
:root {
  --tt-logo-h: 28px;      /* the fragment is drawn for 28 px: 8 px cells, 2 px gaps, 1 px hairlines */
  --tt-logo-h-sm: 24px;
}

.tt-lockup {
  display: block;
  height: var(--tt-logo-h);
  width: auto;
  aspect-ratio: 3091 / 560; /* src/fragments/logo-lockup.svg viewBox */
  overflow: visible;
  flex: none;
}
.tt-mark {
  display: block;
  height: 1em;
  width: auto;
  aspect-ratio: 1;
  flex: none;
}
@media (max-width: 640px) {
  .tt-lockup { height: var(--tt-logo-h-sm); }
}

/* Colour from tokens (same values as the attributes, in oklch where supported). */
.tt-word, .tt-cell-4 { fill: var(--ink, #0f131f); }
.tt-cell-1, .tt-cell-2, .tt-cell-3 { fill: var(--cobalt, #2459e2); }
.tt-cell-foot { fill: var(--signal, #e5484d); }
.tt-hair { stroke: var(--line, #dbd9d0); }

/* On the dark band or the ink footer: put .tt-night on the svg or any ancestor. */
.tt-night .tt-word, .tt-night .tt-cell-4, .tt-night.tt-lockup .tt-word, .tt-night.tt-lockup .tt-cell-4 { fill: var(--night-text, #f5f3ee); }
.tt-night .tt-cell-1, .tt-night .tt-cell-2, .tt-night .tt-cell-3 { fill: var(--night-cobalt, #5b8df9); }
.tt-night .tt-cell-foot { fill: var(--night-signal, #ff6369); }
.tt-night .tt-hair { stroke: var(--night-line, #2a2e36); }

/* The inline header hook arms this before first paint, once per session.
 * A deliberate hover or keyboard focus can replay it. Each cell builds in
 * three hard frames at 24 fps, followed by a scan bracket and a red stamp.
 * The wordmark and logo box stay fixed; every effect settles by frame 24.
 * Without JS, with Motion: Off, or under reduced motion, the complete mark
 * is visible immediately. The footer and exported brand assets stay still. */
@keyframes tt-logo-cut {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes tt-logo-verdict {
  0%, 74.99% { fill: var(--ink, #0f131f); }
  75%, 100% { fill: var(--signal, #e5484d); }
}
@keyframes tt-logo-scan {
  0%, 8% { opacity: 0; transform: translate(0, 0); }
  12%, 24% { opacity: .85; transform: translate(0, 0); }
  28%, 40% { opacity: .85; transform: translate(200px, 0); }
  44%, 56% { opacity: .85; transform: translate(400px, 0); }
  60%, 72% { opacity: .85; transform: translate(200px, 200px); }
  76%, 88% { opacity: .85; transform: translate(200px, 400px); }
  100% { opacity: 0; transform: translate(200px, 400px); }
}
@keyframes tt-logo-impact {
  0%, 100% { transform: scale(1); }
  40% { transform: scale(1.16); }
}
@keyframes tt-logo-ping {
  from { opacity: .65; transform: scale(1); }
  to { opacity: 0; transform: scale(1.7); }
}
.tt-logo-fx { pointer-events: none; }
.tt-logo-scan, .tt-logo-ring { opacity: 0; }
.tt-logo-scan { stroke: var(--cobalt, #2459e2); stroke-width: 16; }
.tt-logo-ring {
  stroke: var(--signal, #e5484d);
  stroke-width: 16;
  transform-box: fill-box;
  transform-origin: center;
}
html[data-motion="on"] .tt-intro .tt-cell {
  transform-box: fill-box;
  transform-origin: left center;
  animation: tt-logo-cut 125ms steps(3, end) both;
}
html[data-motion="on"] .tt-intro .tt-cell-1 { animation-delay: 83.333ms; }
html[data-motion="on"] .tt-intro .tt-cell-2 { animation-delay: 208.333ms; }
html[data-motion="on"] .tt-intro .tt-cell-3 { animation-delay: 333.333ms; }
html[data-motion="on"] .tt-intro .tt-cell-4 { animation-delay: 458.333ms; }
html[data-motion="on"] .tt-intro .tt-cell-foot {
  transform-origin: center;
  animation: tt-logo-cut 125ms steps(3, end) 583.333ms both,
             tt-logo-verdict 1000ms step-end backwards,
             tt-logo-impact 250ms ease-out 750ms forwards;
}
html[data-motion="on"] .tt-intro .tt-logo-scan {
  animation: tt-logo-scan 833.333ms linear both;
}
html[data-motion="on"] .tt-intro .tt-logo-ring {
  animation: tt-logo-ping 250ms ease-out 750ms forwards;
}
@media (prefers-reduced-motion: reduce) {
  .tt-intro .tt-cell, .tt-intro .tt-logo-scan, .tt-intro .tt-logo-ring { animation: none !important; }
}