:root {
  --cycle: 7s; /* one full lap through the tiers */
}

.tier-cycle::before {
  content: "";
  display: inline-block;
  background-image: url("/static/img/👏.png");
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  animation: tierCycle var(--cycle) steps(1, end) forwards;
  width: 1.5em;
  height: 1.5em;

}
@keyframes tierCycle {
  0%     { background-image: url("/static/img/👏.png"); }
  60.00% { background-image: url("/static/img/🙌.png"); }
  65.00% { background-image: url("/static/img/🫶.png"); }
  70.00% { background-image: url("/static/img/🎉.png"); }
  75.00% { background-image: url("/static/img/👍.png"); }
  100%   { background-image: url("/static/img/👏.png"); }
}

.wordmark {
  background: linear-gradient(
    90deg,

    #d3869b 0%,   /* purple */
    #d8a657 10%,    /* idle: warm anchor */
    #e9b872 30%,   /* idle window ends here — this is what shows at rest */
    #fb4934 35%,   /* into the bright band: red */
    #fe8019 42%,   /* orange */
    #fabd2f 50%,   /* yellow */
    #b8bb26 58%,   /* green */
    #83a598 66%,   /* blue */
    #d3869b 80%,   /* purple */
    #d8a657 90%,   /* back down to the warm anchor */
    #e9b872 100%   /* idle window again — mirrors the start exactly */
  );
  background-size: 400% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: wordmarkSweep var(--cycle) ease-in-out 1 forwards;
}

@keyframes wordmarkSweep {
  0%, 75% { background-position: 0% 50%; }   /* idle, holding the warm window */
  100%    { background-position: 100% 50%; } /* lands on the mirrored warm window, same instant 👏 returns */
}

.cycle-sentence {
display: inline-flex;
align-items: center;
gap: 0.4em;
white-space: nowrap;
flex-wrap: nowrap;
min-width: 0;
}

/* Fixed-width stage so surrounding text never reflows */
.cycle-stage {
position: relative;
display: inline-block;
width: 20ch;
height: 1.2em;
}

.cycle-item {
position: absolute;
left: 0;
top: 0;
width: 100%;
opacity: 0;
transform: translateY(0.3em);
animation: cycleFade var(--cycle-duration, 18s) infinite;
}

/* Each item gets a negative delay staggered by its index,
 via inline --i custom property set in HTML (see below) */
.cycle-item {
animation-delay: calc(var(--cycle-duration, 18s) / var(--count, 9) * var(--i, 0) * -1);
}

@keyframes cycleFade {
0%   { opacity: 0; transform: translateY(0.3em); }
4%   { opacity: 1; transform: translateY(0); }
8%   { opacity: 1; transform: translateY(0); }
12%  { opacity: 0; transform: translateY(-0.3em); }
100% { opacity: 0; }
}

.homepage-url,
.homepage-kickback {
  display: block;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  white-space: nowrap;
}

.homepage-url {
  animation: urlCycle 12s infinite;
}

.homepage-kickback {
  animation: kickbackCycle 12s infinite;
}

@keyframes urlCycle {
  0%   { opacity: 0; max-height: 0;   transform: translateY(0.3em); }
  30%  { opacity: 0; max-height: 0; }
  35%  { opacity: 1; max-height: 2em; transform: translateY(0); }
  65%  { opacity: 1; max-height: 2em; transform: translateY(0); }
  70%  { opacity: 0; max-height: 0;   transform: translateY(-0.3em); }
  100% { opacity: 0; max-height: 0; }
}

@keyframes kickbackCycle {
  0%   { opacity: 0; max-height: 0;   transform: translateY(0.3em); }
  44%  { opacity: 0; max-height: 0; }
  48%  { opacity: 1; max-height: 2em; transform: translateY(0); }
  57%  { opacity: 1; max-height: 2em; transform: translateY(0); }
  61%  { opacity: 0; max-height: 0;   transform: translateY(-0.3em); }
  100% { opacity: 0; max-height: 0; }
}

.applause-demo-area {
  aspect-ratio: 9 / 13;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-top: 6rem;
}

@media (max-width: 500px) {
  .applause-demo-area {
    aspect-ratio: auto;
    max-width: 15rem;
    width: 100%;
    min-height: 15.5rem;
    padding-top: 0rem;
    margin-left: auto;
    margin-right: auto;


  }
}