/* Aku Aku — instruction coach (source-faithful CSS art) */
.plux-aku {
  --aku-size: 1.35;
  font-size: calc(var(--aku-size) * 1em + 0.6vw);
  position: relative;
  width: 6em;
  height: 10em;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 16px rgba(66, 34, 2, 0.25));
}
.plux-aku .akuaku {
  position: relative;
  left: 0.5em;
  top: 1.5em;
  font-size: 1em;
}
.plux-aku .akuaku .feather,
.plux-aku .akuaku .body,
.plux-aku .akuaku .eyebrows,
.plux-aku .akuaku .eye,
.plux-aku .akuaku .nose,
.plux-aku .akuaku .lip,
.plux-aku .akuaku .beard {
  box-sizing: border-box;
}
.plux-aku .feather {
  position: absolute;
  opacity: 0;
  animation: akuFeather 0.25s ease-in-out forwards;
}
.plux-aku .feather:nth-child(1) {
  transform: translateX(-6em) translateY(-6em) rotate(-20deg);
  left: -3em; top: -4em; width: 3em; height: 4em;
  background: #008DBB;
  clip-path: polygon(100% 40%, 0 0, 100% 100%);
  animation-delay: 0.5s;
}
.plux-aku .feather:nth-child(2) {
  transform: translateX(-3em) translateY(-6em) rotate(-10deg);
  left: 0; top: -6em; width: 2em; height: 6em;
  background: #FFBE58;
  clip-path: polygon(50% 100%, 80% 0, 0 40%);
  animation-delay: 0.75s;
}
.plux-aku .feather:nth-child(3) {
  transform: translateX(2em) translateY(-3em) rotate(20deg);
  left: 1.5em; top: -5em; width: 1.5em; height: 5em;
  background: #FE8101;
  clip-path: polygon(30% 100%, 100% 0, 0 40%);
  animation-delay: 0.85s;
}
.plux-aku .feather:nth-child(4) {
  transform: translateX(6em) translateY(-6em) rotate(20deg);
  left: 2.5em; top: -3em; width: 1em; height: 3em;
  background: #FF5D7A;
  clip-path: polygon(10% 44%, 100% 0, 60% 70%, 0 100%);
  animation-delay: 1s;
}
.plux-aku .body {
  opacity: 0;
  transform: translateY(1em);
  position: relative;
  left: -1em;
  margin-top: -0.5em;
  top: 0.8em;
  width: 4em;
  height: 7em;
  background: #422202;
  clip-path: polygon(0 0, 100% 0, 80% 100%, 20% 100%);
  animation: akuFeather 0.25s ease-in-out forwards;
  animation-delay: 1.15s;
}
.plux-aku .eyebrows {
  opacity: 0;
  transform: scale(1.2);
  position: absolute;
  top: 50%;
  left: -1em;
  width: 2em;
  height: 1em;
  background: #FE5F4C;
  z-index: 1;
  animation: akuEyes 0.25s ease-in-out forwards, akuEyebrow1 10s ease-in-out infinite;
  animation-delay: 1.25s, 3s;
}
.plux-aku .eyebrows + .eyebrows {
  top: 40%;
  left: 1em;
  width: 2.25em;
  animation: akuEyes 0.25s ease-in-out forwards, akuEyebrow2 10s ease-in-out infinite;
  animation-delay: 1.25s, 3s;
}
.plux-aku .eye {
  opacity: 0;
  transform: scale(1.2);
  position: absolute;
  top: 50%;
  left: -0.9em;
  width: 1.8em;
  height: 1.6em;
  background: #FDBE57;
  border-radius: 50%;
  border: 0.2em solid #67A858;
  animation: akuEyes 0.25s ease-in-out forwards, akuEye1 10s ease-in-out infinite;
  animation-delay: 1.25s, 3s;
}
.plux-aku .eye + .eye {
  top: 40%;
  left: 1em;
  width: 2.2em;
  height: 2.2em;
  border: 0.4em solid #67A858;
  animation: akuEyes 0.25s ease-in-out forwards, akuEye2 10s ease-in-out infinite;
  animation-delay: 1.25s, 3s;
}
.plux-aku .nose {
  opacity: 0;
  position: absolute;
  bottom: 0.8em;
  left: 0.5em;
  width: 1em;
  height: 1.5em;
  background: #FDBE57;
  clip-path: polygon(60% 0, 0 75%, 50% 100%);
  animation: akuNoseIn 0.25s ease-in-out forwards, akuNose 10s ease-in-out infinite;
  animation-delay: 1.35s, 3s;
}
.plux-aku .lip {
  opacity: 0;
  position: absolute;
  bottom: -0.5em;
  left: -1em;
  width: 4em;
  height: 2.5em;
  background: #FE5F4C;
  clip-path: polygon(49% 58%, 100% 41%, 89% 100%, 50% 97%, 10% 100%, 0 40%);
  animation: akuLip 0.25s ease-in-out forwards, akuLip1 10s ease-in-out infinite;
  animation-delay: 1.45s, 3s;
}
.plux-aku .lip + .lip {
  background: #fff;
  width: 3em;
  height: 1em;
  left: -0.5em;
  bottom: -0.15em;
  animation: akuLip 0.25s ease-in-out forwards, akuLip2 10s ease-in-out infinite;
  animation-delay: 1.45s, 3s;
}
.plux-aku .beard {
  position: absolute;
  bottom: -2.2em;
  left: -0.2em;
  width: 1.2em;
  height: 1.8em;
  background: #67A858;
  clip-path: polygon(72% 0, 100% 33%, 70% 100%, 50% 63%, 8% 86%, 26% 21%);
  opacity: 0;
  transform: translateX(-2em) translateY(3em) rotate(20deg);
  animation: akuBeard1 0.25s ease-in-out forwards;
  animation-delay: 1.55s;
}
.plux-aku .beard + .beard {
  left: 0.8em;
  transform: translateX(2em) translateY(3em) rotate(-20deg);
  clip-path: polygon(47% 0, 85% 27%, 62% 73%, 50% 100%, 34% 73%, 13% 30%);
  animation: akuBeard2 0.25s ease-in-out forwards;
  animation-delay: 1.65s;
}

@keyframes akuFeather {
  to { opacity: 1; transform: translateX(0) translateY(0) rotate(0); }
}
@keyframes akuEyes {
  to { opacity: 1; transform: scale(1); }
}
@keyframes akuNoseIn {
  from { opacity: 0; transform: translateY(0.5em); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes akuLip {
  from { opacity: 0; transform: scale(1.1); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes akuBeard1 {
  to { opacity: 1; transform: translateX(0) translateY(0) rotate(10deg); }
}
@keyframes akuBeard2 {
  to { opacity: 1; transform: translateX(0) translateY(0) rotate(-15deg); }
}
@keyframes akuEyebrow1 {
  5%, 40% { top: 44%; }
  42%, 80% { top: 50%; }
}
@keyframes akuEyebrow2 {
  5%, 40% { top: 48%; }
  42%, 65% { top: 40%; }
}
@keyframes akuEye1 {
  5%, 40% { top: 48%; }
  42%, 80% { top: 50%; }
}
@keyframes akuEye2 {
  5%, 40% { top: 48%; height: 2em; }
  42%, 80% { top: 40%; height: 2.2em; }
}
@keyframes akuNose {
  5%, 40% { transform: rotate(-13deg); }
  42%, 80% { transform: rotate(0); }
}
@keyframes akuLip1 {
  5%, 25% { transform: rotate(-5deg); }
  30%, 75% { transform: rotate(5deg); }
  77% { transform: rotate(0); }
}
@keyframes akuLip2 {
  2%, 5% { width: 3.3em; height: 1.3em; left: -0.65em; bottom: -0.2em; }
  5%, 25% { width: 3.3em; height: 1.3em; left: -0.65em; bottom: -0.2em; transform: rotate(-5deg); }
  30%, 75% { width: 3.3em; height: 1.3em; left: -0.65em; bottom: -0.2em; transform: rotate(5deg); }
  77% { width: 3em; height: 1em; left: -0.5em; bottom: -0.15em; transform: rotate(0); }
}

/* Comic typewriter stage */
.plux-story {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  min-height: min(78vh, 720px);
  padding: 20px 16px 28px;
  background:
    radial-gradient(circle at 50% 30%, #fff4cd 0%, #ffedac 55%, #ffe08a 100%);
  border-radius: 0;
  box-sizing: border-box;
}
.plux-story__row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 28px;
  width: min(920px, 100%);
}
.plux-story__bubble {
  flex: 1 1 280px;
  max-width: 520px;
  background: #fff;
  border: 3px solid #422202;
  border-radius: 22px;
  padding: 16px 18px;
  box-shadow: 8px 8px 0 rgba(66, 34, 2, 0.18);
  position: relative;
  min-height: 140px;
}
.plux-story__bubble:before {
  content: "";
  position: absolute;
  left: -14px;
  bottom: 28px;
  border: 10px solid transparent;
  border-right-color: #422202;
}
.plux-story__bubble:after {
  content: "";
  position: absolute;
  left: -8px;
  bottom: 30px;
  border: 8px solid transparent;
  border-right-color: #fff;
}
.plux-story__type {
  font-family: Fredoka, Nunito, ui-rounded, system-ui, sans-serif;
  font-weight: 750;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #422202;
  white-space: pre-wrap;
  min-height: 4.5em;
}
.plux-story__type .caret {
  display: inline-block;
  width: 0.55em;
  border-right: 3px solid #FE8101;
  animation: akuCaret 0.7s steps(1) infinite;
  margin-left: 2px;
}
@keyframes akuCaret {
  50% { opacity: 0; }
}
.plux-story__cta {
  border: 0;
  border-radius: 16px;
  padding: 14px 28px;
  font-family: Fredoka, Nunito, sans-serif;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  background: linear-gradient(180deg, #FE8101, #FE5F4C);
  box-shadow: 0 6px 0 #c2410c;
  cursor: pointer;
  opacity: 0.35;
  pointer-events: none;
  transition: transform 0.12s ease, opacity 0.2s ease;
}
.plux-story__cta.is-ready {
  opacity: 1;
  pointer-events: auto;
}
.plux-story__cta.is-ready:active {
  transform: translateY(3px);
  box-shadow: 0 3px 0 #c2410c;
}
.plux-story__skip {
  border: 0;
  background: transparent;
  color: #8a5a2b;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  text-decoration: underline;
}

@media (max-width: 600px) {
  .plux-aku { --aku-size: 1.1; font-size: calc(var(--aku-size) * 1em + 2.2vw); }
  .plux-story__bubble:before,
  .plux-story__bubble:after { display: none; }
}