/* 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;
  }
}


/* -----------------------------------------------------------------------
   Navbar integration — Clickr additions, not part of the client's R1 file.
   The component replaces `.stt-navbar-logo > img`, so the sizing and filter
   that used to target that <img> are re-applied here.
   ----------------------------------------------------------------------- */
.stt-navbar-logo .stt-logo-transition {
  --stt-logo-width: 166px;          /* matches the width the old <img> used */
  display: block;
}

/* Mirrors the behaviour the old <img> had: forced white over the hero for
   legibility, reverting to full colour on sticky / dark-theme / burger-active
   / hover. Removing the white-out was trialled, but the dark purple mark is
   not readable against the dark hero photography, so it is kept.
   Consequence: the purple/magenta gradient only shows in the reverted states. */
.stt-navbar-logo .stt-logo-transition {
  filter: drop-shadow(0 0 8px #00000080) brightness(0) invert();
}
.stt-navbar.active .stt-navbar-wrapper .stt-navbar-logo .stt-logo-transition,
.stt-navbar.is-sticky .stt-navbar-wrapper .stt-navbar-logo .stt-logo-transition,
.stt-navbar-subpage .stt-navbar-wrapper .stt-navbar-logo .stt-logo-transition,
.stt-navbar-wrapper.burger-active .stt-navbar-logo .stt-logo-transition,
.stt-navbar-desktop-dark-theme .stt-navbar-logo .stt-logo-transition,
.stt-navbar-desktop:hover .stt-navbar-logo .stt-logo-transition,
.nav-sticky.active .stt-navbar-wrapper .stt-navbar-logo .stt-logo-transition,
.nav-sticky.is-sticky .stt-navbar-wrapper .stt-navbar-logo .stt-logo-transition {
  filter: unset;
}

/* The theme's legacy rule `.stt-navbar-logo img` (descendant selector) still
   matches the old-mark <img>, but its sticky/hover overrides use
   `.stt-navbar-logo > img` (child combinator) and no longer match now that the
   img sits inside .stt-logo-transition. Result: the old mark stayed whited-out
   in every state while the new mark showed full colour, so each loop appeared
   to start white and only "gain colour" when the morph began.
   Neutralise it — the component-level filter above already handles both marks. */
.stt-navbar-logo .stt-logo-transition img {
  filter: none;
  width: 100%;
  height: 100%;
}