/* PRE logo trace loader, driven by assets/js/logo-trace.js (data-phase: loop, closingOutline, fadingFill, done). */
.pre-logo-trace {
  --plt-size: 48px;
  --plt-loop: 1.4s;
  --plt-close: .56s;
  --plt-fade: .5s;
  --plt-ghost: .18;
  display: inline-block;
  flex: none;
  inline-size: var(--plt-size);
  block-size: var(--plt-size);
  color: var(--accent, #9fd8ff);
  line-height: 0;
  vertical-align: middle;
}

.pre-logo-trace__svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

.pre-logo-trace__ghost {
  opacity: var(--plt-ghost);
  transition: opacity var(--plt-fade) ease;
}

.pre-logo-trace__loop {
  stroke-dasharray: .16 .84;
  stroke-dashoffset: 0;
  animation: pre-logo-trace-loop var(--plt-loop) linear infinite;
}

.pre-logo-trace__closer {
  stroke-dasharray: 1 1;
  stroke-dashoffset: .84;
  opacity: 0;
  transition: stroke-dashoffset var(--plt-close) cubic-bezier(.33, 0, .2, 1), opacity var(--plt-fade) ease;
}

.pre-logo-trace__fill {
  opacity: 0;
  transition: opacity var(--plt-fade) ease;
}

/* Closing: the loop hands over to the closer, which grows from the same segment to the full outline. */
.pre-logo-trace:not([data-phase="loop"]) .pre-logo-trace__loop {
  animation: none;
  opacity: 0;
}

.pre-logo-trace[data-phase="closingOutline"] .pre-logo-trace__closer {
  opacity: 1;
  transition: stroke-dashoffset var(--plt-close) cubic-bezier(.33, 0, .2, 1);
}

/* Fading and done: the filled ring (the header circle) fades in as the trace strokes fade out. */
.pre-logo-trace:is([data-phase="fadingFill"], [data-phase="done"]) .pre-logo-trace__fill {
  opacity: 1;
}

.pre-logo-trace:is([data-phase="fadingFill"], [data-phase="done"]) :is(.pre-logo-trace__ghost, .pre-logo-trace__closer) {
  opacity: 0;
}

.pre-logo-trace:is([data-phase="fadingFill"], [data-phase="done"]) .pre-logo-trace__closer {
  stroke-dashoffset: 0;
}

@keyframes pre-logo-trace-loop {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1; }
}

/* Reduced motion: the final mark, no loop, no fades. */
.pre-logo-trace[data-reduced="true"] :is(.pre-logo-trace__ghost, .pre-logo-trace__loop, .pre-logo-trace__closer) {
  animation: none;
  opacity: 0;
  transition: none;
}

.pre-logo-trace[data-reduced="true"] .pre-logo-trace__fill {
  opacity: 1;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  .pre-logo-trace .pre-logo-trace__loop { animation: none; opacity: 0; }
  .pre-logo-trace :is(.pre-logo-trace__ghost, .pre-logo-trace__closer) { opacity: 0; transition: none; }
  .pre-logo-trace .pre-logo-trace__fill { opacity: 1; transition: none; }
}