/* Original compact credit styles, adapted for the standalone dark footer. */
@font-face {
  font-family: "EW Studio Credit Manrope";
  src: url('./fonts/manrope-latin-400-normal.woff2') format('woff2');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

.ew-studio-credit {
  --ew-credit-ink: #ebeee0;
  --ew-credit-accent: #d2ff00;
  --ew-credit-width: 104px;
  --ew-credit-type: 11px;
  --ew-credit-gap: 12px;
  display: flex;
  align-items: center;
  gap: var(--ew-credit-gap);
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  padding: 6px 0;
  margin-inline: auto 0;
  border-radius: 5px;
  color: var(--ew-credit-ink);
  font-family: "EW Studio Credit Manrope", sans-serif;
  font-size: var(--ew-credit-type);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.5;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.ew-studio-credit:focus-visible { outline: 2px solid var(--ew-credit-accent); outline-offset: 6px; }
.ew-studio-credit__label { flex: none; white-space: nowrap; }
.ew-studio-credit__divider { flex: none; width: 1px; height: 24px; background: currentColor; opacity: .36; }
.ew-studio-credit__identity { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ew-studio-credit__logo { display: block; width: var(--ew-credit-width); max-width: 100%; min-width: 0; line-height: 0; }
.ew-studio-credit__motion {
  display: grid;
  place-items: center;
  flex: none;
  width: 21px;
  height: 21px;
  border: 1px solid currentColor;
  border-radius: 50%;
  color: var(--ew-credit-ink);
  opacity: .55;
  transition: color 180ms ease, opacity 180ms ease;
}
.ew-studio-credit:is(:hover, :focus-visible) .ew-studio-credit__motion,
.ew-studio-credit[data-playing='true'] .ew-studio-credit__motion { color: var(--ew-credit-accent); opacity: 1; }
@media (max-width: 360px) {
  .ew-studio-credit { --ew-credit-gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .ew-studio-credit__motion { transition: none; visibility: hidden; }
}

/* The agency's approved Editorial animation, scoped to this compact credit. */
.ew-studio-credit .animated-brand-logo {
  --abl-ink: #ebeee0;
  --abl-accent: #d2ff00;
  --abl-isotype-accent: #d2ff00;
  --abl-dot-final: translate(862px, 167px);
  position: relative;
  display: inline-block;
  width: 100%;
  aspect-ratio: 640 / 200;
  vertical-align: middle;
  color: var(--abl-ink);
  isolation: isolate;
  line-height: 0;
}

.ew-studio-credit .abl-artwork {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.ew-studio-credit .abl-script {
  fill: none;
  stroke: var(--abl-accent);
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ew-studio-credit .abl-hand-pressure { fill: var(--abl-accent); stroke: none; }
.ew-studio-credit .abl-hand-reveal { stroke: #fff; fill: none; }
.ew-studio-credit .abl-dot { fill: var(--abl-accent); }
.ew-studio-credit .abl-hand-stroke { stroke-dasharray: 1; stroke-dashoffset: 0; }
.ew-studio-credit :is(.abl-lowercase, .abl-principal-origin, .abl-principal-studio) { opacity: 0; }
.ew-studio-credit .abl-dot-anchor { transform: var(--abl-dot-final); }
.ew-studio-credit .abl-origin-e { transform: translate(330px, 171px); }
.ew-studio-credit .abl-origin-w { transform: translate(413px, 171px); }

.ew-studio-credit :is(.abl-full, .abl-compact) {
  opacity: 0;
  transition: opacity 220ms ease;
  pointer-events: none;
}
.ew-studio-credit [data-visible='true'] { opacity: 1; }
.ew-studio-credit [data-state='returning'] :is(.abl-full, .abl-compact) { transition-duration: 420ms; }
.ew-studio-credit [data-state='returning'] .abl-full { transition-timing-function: ease-out; }
.ew-studio-credit [data-state='returning'] .abl-compact { transition-timing-function: ease-in; }

.ew-studio-credit [data-running='true'] .abl-principal-origin { animation: abl-a-origin-depart 3600ms ease both; }
.ew-studio-credit [data-running='true'] .abl-origin-e { animation: abl-a-e-move 3600ms cubic-bezier(.4,.02,.25,1) both; }
.ew-studio-credit [data-running='true'] .abl-origin-w { animation: abl-a-w-hop 3600ms linear both; }
.ew-studio-credit [data-running='true'] .abl-principal-studio { animation: abl-a-studio-reorganize 3600ms cubic-bezier(.4,.02,.25,1) both; }
.ew-studio-credit [data-running='true'] .abl-principal-estudio { animation: abl-a-estudio-arrive 3600ms cubic-bezier(.26,.66,.26,1) both; }
.ew-studio-credit [data-running='true'] .abl-dot-anchor { animation: abl-a-dot-move 3600ms cubic-bezier(.4,.02,.25,1) both; }

.ew-studio-credit [data-running='true'] .abl-dot {
  animation: abl-a-dot-arrive 3600ms ease both;
  transform-box: fill-box;
  transform-origin: center;
}

.ew-studio-credit [data-running='true'] .abl-lowercase { animation: abl-lowercase 3600ms ease both; }
.ew-studio-credit [data-running='true'] .abl-uppercase { animation: abl-uppercase 3600ms ease both; }

.ew-studio-credit [data-running='true'] .abl-hand-stroke {
  stroke-dashoffset: 1;
  animation: abl-a-write var(--abl-stroke-duration) cubic-bezier(.4,.08,.4,.95) var(--abl-stroke-delay) both;
}

/* Original pen timings live in this stylesheet so the SVG works under style-src self. */
.ew-studio-credit [data-abl-stroke="0"] { --abl-stroke-delay: 800ms; --abl-stroke-duration: 206ms; }
.ew-studio-credit [data-abl-stroke="1"] { --abl-stroke-delay: 997ms; --abl-stroke-duration: 108ms; }
.ew-studio-credit [data-abl-stroke="2"] { --abl-stroke-delay: 1105ms; --abl-stroke-duration: 47ms; }
.ew-studio-credit [data-abl-stroke="3"] { --abl-stroke-delay: 1147ms; --abl-stroke-duration: 122ms; }
.ew-studio-credit [data-abl-stroke="4"] { --abl-stroke-delay: 1255ms; --abl-stroke-duration: 160ms; }
.ew-studio-credit [data-abl-stroke="5"] { --abl-stroke-delay: 1405ms; --abl-stroke-duration: 75ms; }
.ew-studio-credit [data-abl-stroke="6"] { --abl-stroke-delay: 1476ms; --abl-stroke-duration: 141ms; }
.ew-studio-credit [data-abl-stroke="7"] { --abl-stroke-delay: 1607ms; --abl-stroke-duration: 33ms; }
.ew-studio-credit [data-abl-stroke="8"] { --abl-stroke-delay: 1700ms; --abl-stroke-duration: 410ms; }
.ew-studio-credit [data-abl-stroke="9"] { --abl-stroke-delay: 1940ms; --abl-stroke-duration: 220ms; }
.ew-studio-credit [data-abl-stroke="10"] { --abl-stroke-delay: 2100ms; --abl-stroke-duration: 370ms; }
.ew-studio-credit [data-abl-stroke="11"] { --abl-stroke-delay: 2420ms; --abl-stroke-duration: 540ms; }

@media (prefers-reduced-motion: reduce) {
  .ew-studio-credit .animated-brand-logo,
  .ew-studio-credit .animated-brand-logo * {
    animation: none !important;
    transition: none !important;
  }
}

@keyframes abl-a-write {
  from { stroke-dashoffset: 1; opacity: 0; }
  1% { opacity: 1; }
  to { stroke-dashoffset: 0; opacity: 1; }
}
@keyframes abl-a-origin-depart {
  0%, 70% { opacity: 1; }
  81%, 100% { opacity: 0; }
}
@keyframes abl-a-e-move {
  0%, 9% { transform: translate(330px,171px); }
  24%, 60% { transform: translate(60px,174px); }
  70%, 100% { transform: translate(43px,174px); }
}
@keyframes abl-a-w-hop {
  0%, 9.72% { transform: translate(413px,171px) rotate(0); opacity: 1; }
  11.81% { transform: translate(417.34px,168.08px) rotate(-1.55deg); }
  13.89% { transform: translate(429.12px,160.34px) rotate(-2.94deg); }
  15.97% { transform: translate(446.48px,149.32px) rotate(-4.05deg); }
  18.06% { transform: translate(467.56px,136.57px) rotate(-4.76deg); }
  20.14% { transform: translate(490.5px,123.63px) rotate(-5deg); }
  22.22% { transform: translate(513.44px,112.03px) rotate(-4.76deg); }
  24.31% { transform: translate(534.52px,103.33px) rotate(-4.05deg); }
  26.39% { transform: translate(551.88px,99.06px) rotate(-2.94deg); }
  28.47% { transform: translate(563.66px,100.77px) rotate(-1.55deg); }
  30.56% { transform: translate(568px,110px) rotate(0); }
  32.64% { transform: translate(567.23px,123.09px) rotate(0); }
  34.72% { transform: translate(565.19px,135.19px) rotate(0); }
  36.81% { transform: translate(562.3px,146.07px) rotate(0); }
  38.89% { transform: translate(559px,155.5px) rotate(0); }
  40.97% { transform: translate(555.7px,163.24px) rotate(0); }
  41% { opacity: 1; }
  43.06% { transform: translate(552.81px,169.06px) rotate(0); }
  45.14% { transform: translate(550.77px,172.73px) rotate(0); }
  47.22% { transform: translate(550px,174px) rotate(0); }
  48%, 100% { transform: translate(550px,174px) rotate(0); opacity: 0; }
}
@keyframes abl-a-studio-reorganize {
  0% { transform: translate(165px,60px) scale(.86); opacity: 1; }
  47.22% { transform: translate(165px,60px) scale(.86); }
  61.67% { transform: translate(145px,60px) scale(.86); opacity: 1; }
  67.22%, 100% { transform: translate(145px,60px) scale(.86); opacity: 0; }
}
@keyframes abl-a-estudio-arrive {
  0%, 70% { opacity: 0; }
  80.56%, 100% { opacity: 1; }
}
@keyframes abl-a-dot-move {
  0%, 10% { transform: translate(548px,130px); }
  60%, 100% { transform: var(--abl-dot-final); }
}
@keyframes abl-a-dot-arrive {
  0% { opacity: 0; transform: scale(.75); fill: var(--abl-isotype-accent); }
  7%, 10% { opacity: 1; transform: scale(1); fill: var(--abl-isotype-accent); }
  /* Change to the wordmark palette while the travelling point is invisible. */
  16% { opacity: 0; transform: scale(.85); fill: var(--abl-isotype-accent); }
  17%, 81% { opacity: 0; transform: scale(.85); fill: var(--abl-accent); }
  86%, 100% { opacity: 1; transform: scale(1); fill: var(--abl-accent); }
}
@keyframes abl-lowercase {
  0%, 10% { opacity: 1; }
  20%, 100% { opacity: 0; }
}
@keyframes abl-uppercase {
  0%, 11% { opacity: 0; }
  23%, 100% { opacity: 1; }
}