/* Igenkänning: tankebubblor och easter egg */

.problem-grid{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 40px;
  padding-right: 50px;
}
.quote-field{
  position: relative;
  flex: 1 1 66%;
  height: 74vh;
  text-align: left;
}
.problem-headline{
  flex: 1 1 30%;
  font-family: var(--font-poster);
  text-transform: uppercase;
  color: var(--ink);
  font-size: var(--fs-statement);
  line-height: 0.92;
  text-align: right;
  transform: translateY(-48px);
}
.bubble-float{
  position: absolute;
  animation: bubbleFloat 6s ease-in-out infinite;
}
@keyframes bubbleFloat{
  0%, 100%{ transform: translateY(0); }
  50%{ transform: translateY(-8px); }
}
.quote-bubble{
  background: var(--chip);
  border-radius: 18px;
  padding: 16px 20px;
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ink-soft);
  max-width: 220px;
  box-shadow: 0 10px 22px rgba(34,30,27,0.08);
  opacity: 0;
  transform: scale(.35);
  transition: opacity .75s cubic-bezier(.34,1.2,.64,1), transform .65s cubic-bezier(.34,1.2,.64,1), box-shadow .3s ease;
}
.quote-bubble.popped{
  opacity: var(--tier-opacity, 1);
  transform: scale(1);
}
.quote-bubble.popped:hover{
  transform: translateY(-4px) scale(1.03);
  box-shadow: 0 16px 28px rgba(34,30,27,0.14);
}
.quote-bubble.qs-0{ font-size: 10px; max-width: 105px; padding: 8px 11px; color: var(--taupe); --tier-opacity: .4; box-shadow: none; filter: blur(0.5px); }
.quote-bubble.qs-1{ font-size: 12px; max-width: 140px; padding: 11px 15px; color: var(--taupe); --tier-opacity: .55; box-shadow: none; filter: blur(0.3px); }
.quote-bubble.qs-2{ font-size: 13px; max-width: 175px; padding: 13px 17px; color: var(--ink-soft); --tier-opacity: .82; }
.quote-bubble.qs-3{ font-size: 15px; max-width: 220px; padding: 16px 20px; color: var(--ink); font-weight: 500; }
.quote-bubble.qs-4{ font-size: 19px; max-width: 280px; padding: 22px 26px; color: var(--ink); font-weight: 600; box-shadow: 0 14px 30px rgba(34,30,27,0.1); }
.decor-dot{ position: absolute; border-radius: 50%; pointer-events: none; }
.decor-dot.spin{ animation: float 8s ease-in-out infinite; }

.easter-egg{ cursor: pointer; animation: eggPulse 3.6s ease-in-out infinite; }
.easter-egg.popped{ animation: eggPop .5s ease-out; }
@keyframes eggPulse{
  0%, 100%{ transform: scale(1); }
  50%{ transform: scale(1.18); }
}
@keyframes eggPop{
  0%{ transform: scale(1); }
  40%{ transform: scale(1.6); }
  100%{ transform: scale(1); }
}

@media (prefers-reduced-motion: reduce){
  .bubble-float, .decor-dot.spin{ animation: none !important; }
}