.fashion-transition[hidden] { display:none; }
.fashion-arriving [data-page-content] { visibility:hidden; }
.fashion-arriving .fashion-transition[hidden] { display:block; }
.fashion-transition {
  --frog-size:clamp(180px,23vw,290px);
  position:fixed; inset:0; z-index:1000; overflow:hidden;
  background:#000; color:#f5f5f5; color-scheme:dark;
  opacity:1; transition:opacity 180ms cubic-bezier(.23,1,.32,1);
  font-family:Arial,Helvetica,sans-serif;
}
.fashion-transition.is-leaving { opacity:0; pointer-events:none; }
.travel-brand { position:absolute; top:36px; left:clamp(24px,5vw,80px); font-size:11px; letter-spacing:.24em; }
.travel-runner {
  position:absolute; bottom:34%; left:0; width:var(--frog-size); aspect-ratio:330/250;
  animation:frog-forward var(--run-duration,3200ms) linear var(--run-delay,0s) infinite;
  will-change:transform;
}
.travel-frog {
  position:absolute; inset:0;
  transform-origin:50% 85%;
  animation:frog-hop var(--hop-duration,800ms) linear var(--hop-delay,0s) infinite;
  will-change:transform;
}
.frog-puppet { display:block; width:100%; height:100%; overflow:visible; }
.frog-puppet g { transform-box:view-box; }
.frog-body-motion { transform-origin:155px 180px; animation:frog-body var(--hop-duration,800ms) linear var(--hop-delay,0s) infinite; }
.frog-thigh-joint { transform-origin:100px 137px; animation:frog-thigh var(--hop-duration,800ms) linear var(--hop-delay,0s) infinite; }
.frog-knee-joint { transform-origin:121px 163px; animation:frog-knee var(--hop-duration,800ms) linear var(--hop-delay,0s) infinite; }
.frog-ankle-joint { transform-origin:69px 169px; animation:frog-ankle var(--hop-duration,800ms) linear var(--hop-delay,0s) infinite; }
.frog-shoulder-joint { transform-origin:181px 129px; animation:frog-shoulder var(--hop-duration,800ms) linear var(--hop-delay,0s) infinite; }
.frog-elbow-joint { transform-origin:171px 156px; animation:frog-elbow var(--hop-duration,800ms) linear var(--hop-delay,0s) infinite; }
.frog-far-arm-joint { transform-origin:219px 128px; animation:frog-far-arm var(--hop-duration,800ms) linear var(--hop-delay,0s) infinite; }
.frog-hind-far { filter:brightness(.75); }
.travel-shadow {
  position:absolute; left:20%; right:12%; bottom:13%; height:8px;
  border-radius:50%; background:#000; filter:blur(5px);
  animation:frog-shadow var(--hop-duration,800ms) linear var(--hop-delay,0s) infinite;
}
.travel-message { position:absolute; top:73%; left:20px; right:20px; text-align:center; }
.travel-caption { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.fashion-transition.failed .travel-caption { position:static; width:auto; height:auto; margin:0; overflow:visible; clip-path:none; white-space:normal; font-size:12px; line-height:1.6; }
.fashion-return { margin-top:25px; min-height:44px; padding:10px 8px; border:0; border-bottom:1px solid currentColor; background:none; color:inherit; font:inherit; font-size:14px; cursor:pointer; }
.fashion-return:focus-visible { outline:2px solid #d8aa54; outline-offset:5px; }
.fashion-transition.failed .travel-runner,.fashion-transition.failed .travel-runner * { animation-play-state:paused; }
.fashion-transition.is-settled .travel-runner,.fashion-transition.is-settled .travel-runner * { animation-play-state:paused; }
.fashion-transition.is-instant { transition:none; }
.fashion-transition.is-instant .travel-runner { left:calc(50% - var(--frog-size)/2); }
.fashion-transition.is-instant .travel-runner,.fashion-transition.is-instant .travel-runner * { animation:none; }
@keyframes frog-forward {
  0%,4% { transform:translateX(calc(.12 * var(--frog-size))); }
  20%,29% { transform:translateX(calc(25vw + .12 * var(--frog-size))); }
  45%,54% { transform:translateX(calc(50vw + .12 * var(--frog-size))); }
  70%,79% { transform:translateX(calc(75vw + .12 * var(--frog-size))); }
  95%,100% { transform:translateX(calc(100vw + .12 * var(--frog-size))); }
}
@keyframes frog-hop {
  0%,16%,80%,100% { transform:translateY(0); }
  30% { transform:translateY(-38px); }
  44% { transform:translateY(-62px); }
  52% { transform:translateY(-65px); }
  64% { transform:translateY(-49px); }
  74% { transform:translateY(-20px); }
}
@keyframes frog-body {
  0%,100% { transform:rotate(0); }
  16% { transform:translateY(7px) rotate(3deg); }
  30% { transform:rotate(-14deg); }
  48% { transform:rotate(-10deg); }
  65% { transform:rotate(0); }
  80% { transform:rotate(8deg); }
  88% { transform:translateY(5px) rotate(3deg); }
}
/* Unfold the hind legs at the knee as the thigh drives backwards. */
@keyframes frog-thigh {
  0%,100% { transform:rotate(0); }
  16% { transform:rotate(-12deg); }
  30%,44% { transform:rotate(123deg); }
  58% { transform:rotate(90deg); }
  74% { transform:rotate(10deg); }
  84% { transform:rotate(-8deg); }
}
@keyframes frog-knee {
  0%,100% { transform:rotate(0); }
  16% { transform:rotate(12deg); }
  30%,44% { transform:rotate(-122deg); }
  58% { transform:rotate(-96deg); }
  74% { transform:rotate(-20deg); }
  84% { transform:rotate(8deg); }
}
@keyframes frog-ankle {
  0%,16%,100% { transform:rotate(0); }
  30%,44% { transform:rotate(133deg); }
  58% { transform:rotate(108deg); }
  74%,84% { transform:rotate(0); }
}
@keyframes frog-shoulder {
  0%,100% { transform:rotate(0); }
  16% { transform:rotate(12deg); }
  30%,48% { transform:rotate(-65deg); }
  66% { transform:rotate(-42deg); }
  80% { transform:rotate(-8deg); }
  88% { transform:rotate(12deg); }
}
@keyframes frog-elbow {
  0%,100% { transform:rotate(0); }
  16% { transform:rotate(18deg); }
  30%,48% { transform:rotate(36deg); }
  66% { transform:rotate(-22deg); }
  80% { transform:rotate(-6deg); }
  88% { transform:rotate(14deg); }
}
@keyframes frog-far-arm {
  0%,100% { transform:rotate(0); }
  16% { transform:rotate(10deg); }
  30%,48% { transform:rotate(-52deg); }
  66% { transform:rotate(-32deg); }
  80% { transform:rotate(-5deg); }
  88% { transform:rotate(10deg); }
}
@keyframes frog-shadow {
  0%,16%,100% { transform:scaleX(1); opacity:.13; }
  50% { transform:scaleX(.5); opacity:.04; }
  80%,88% { transform:scaleX(1.12); opacity:.15; }
}
@media (prefers-reduced-motion:reduce) {
  .travel-runner { animation:none; left:calc(50% - var(--frog-size)/2); }
  .travel-frog,.travel-shadow,.frog-puppet g { animation:none; }
  .fashion-transition { transition:none; }
}