/* Component styles — .stt-logo-transition */
.stt-logo-transition {
  --stt-logo-width: min(28rem, 72vw);
  --stt-logo-stroke: #8b6fc9;
  display: inline-block;
  inline-size: var(--stt-logo-width);
  position: relative;
  isolation: isolate;
  vertical-align: middle;
}

/* The new logo sets the component dimensions. */
.stt-logo-transition__new {
  display: block;
  inline-size: 100%;
  block-size: auto;
  position: relative;
  z-index: 1;
}

/* The legacy mark shares the same frame without being distorted. */
.stt-logo-transition__old {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  object-fit: contain;
  object-position: left center;
  opacity: 0;
  z-index: 0;
}

/* Prepared: old logo is visible; every new-logo shape is hidden. */
.stt-logo-transition.is-prepared .stt-logo-transition__old {
  opacity: 1;
}

.stt-logo-transition.is-prepared .stt-lt__shape {
  fill-opacity: 0;
  stroke: var(--stt-logo-stroke);
  stroke-opacity: 0;
  stroke-width: 1.65;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  will-change: stroke-dashoffset, stroke-opacity, fill-opacity;
}

/* 1. The legacy identity recedes softly. */
.stt-logo-transition.is-playing .stt-logo-transition__old {
  animation: stt-logo-old-out 520ms cubic-bezier(.4, 0, .2, 1) forwards;
}

/* 2–3. Soft-purple outlines draw, one source shape at a time. */
.stt-logo-transition.is-playing .stt-lt__shape {
  animation:
    stt-logo-stroke-in 200ms cubic-bezier(.33, 0, .2, 1) var(--stroke-delay) both,
    stt-logo-fill-in 130ms cubic-bezier(.42, 0, .8, .8) var(--fill-delay) forwards;
}

.stt-logo-transition.is-playing #L1 { --stroke-delay:  520ms; --fill-delay: 1440ms; }
.stt-logo-transition.is-playing #L2 { --stroke-delay:  620ms; --fill-delay: 1530ms; }
.stt-logo-transition.is-playing #L3 { --stroke-delay:  720ms; --fill-delay: 1620ms; }
.stt-logo-transition.is-playing #S  { --stroke-delay:  820ms; --fill-delay: 1710ms; }
.stt-logo-transition.is-playing #T1 { --stroke-delay:  920ms; --fill-delay: 1800ms; }
.stt-logo-transition.is-playing #T2 { --stroke-delay: 1020ms; --fill-delay: 1890ms; }
.stt-logo-transition.is-playing #GD { --stroke-delay: 1120ms; --fill-delay: 1980ms; }
.stt-logo-transition.is-playing #C  { --stroke-delay: 1220ms; --fill-delay: 2070ms; }

/* 4. The native logo colours fade in after the completed outline pass. */

@keyframes stt-logo-old-out {
  from { opacity: 1; filter: blur(0); transform: scale(1); }
  to   { opacity: 0; filter: blur(4px); transform: scale(1.025); }
}

@keyframes stt-logo-stroke-in {
  from { stroke-dashoffset: 1; stroke-opacity: 0; }
  to   { stroke-dashoffset: 0; stroke-opacity: 1; }
}

@keyframes stt-logo-fill-in {
  from { fill-opacity: 0; stroke-opacity: 0; stroke-dashoffset: 0; }
  to   { fill-opacity: 1; stroke-opacity: 0; stroke-dashoffset: 0; }
}

/* A single, low-key finish after the native colours have settled. */
.stt-logo-transition__sheen {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background: linear-gradient(105deg, transparent 43%, rgba(255,255,255,.56) 50%, transparent 57%);
  background-size: 260% 100%;
  background-position: 150% 0;
  mix-blend-mode: soft-light;
}
.stt-logo-transition.is-playing .stt-logo-transition__sheen {
  animation: stt-logo-sheen 360ms ease-out 1840ms forwards;
}
@keyframes stt-logo-sheen {
  0% { opacity: 0; background-position: 150% 0; }
  25%, 72% { opacity: .75; }
  100% { opacity: 0; background-position: -50% 0; }
}

/* Reduced motion — show the supplied new logo immediately. */
@media (prefers-reduced-motion: reduce) {
  .stt-logo-transition.is-prepared .stt-lt__shape {
    fill-opacity: 1;
    stroke: none;
    stroke-dashoffset: 0;
  }
  .stt-logo-transition.is-prepared .stt-logo-transition__old { opacity: 0; }
  .stt-logo-transition__sheen { display: none; }
  .stt-logo-transition *,
  .stt-logo-transition *::before,
  .stt-logo-transition *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}