/* Per-memory reveal motions for the About portrait adornments.
   The base component reveals each image ~500 ms after the cloud begins appearing. */

.speech-bubble[data-person='grandmother'][data-has-adornment='1'] .cloud-adornment {
  animation: memory-singer-swing 560ms cubic-bezier(.18,.9,.3,1.16) 500ms both;
}

.speech-bubble[data-person='grandfather'][data-has-adornment='1'] .cloud-adornment {
  animation: memory-hat-tip 540ms cubic-bezier(.2,.85,.25,1.12) 500ms both;
}

.speech-bubble[data-person='dad'][data-has-adornment='1'] .cloud-adornment {
  animation: memory-tower-rise 520ms cubic-bezier(.18,.88,.3,1.08) 500ms both;
}

.speech-bubble[data-person='uncle'][data-has-adornment='1'] .cloud-adornment {
  animation: memory-reader-drift 560ms cubic-bezier(.2,.86,.25,1.08) 500ms both;
}

/* Keep the quote readable while the cutout intentionally overlaps the cloud. */
.speech-bubble[data-person='grandmother'] p { padding-right: 2.15rem; }
.speech-bubble[data-person='grandfather'] p { padding-left: 1.5rem; }
.speech-bubble[data-person='dad'] p { padding-left: 1.55rem; }
.speech-bubble[data-person='uncle'] p { padding-right: 1.75rem; }

@keyframes memory-singer-swing {
  0% {
    opacity: 0;
    filter: blur(2px) drop-shadow(0 2px 3px rgba(44,31,20,.12));
    transform: translate(12px,10px) rotate(18deg) scale(.42);
  }
  64% {
    opacity: 1;
    filter: blur(0) drop-shadow(0 5px 7px rgba(44,31,20,.25));
    transform: translate(-2px,-2px) rotate(-3deg) scale(1.06);
  }
  82% {
    transform: translate(1px,0) rotate(1deg) scale(.985);
  }
  100% {
    opacity: .96;
    filter: blur(0) drop-shadow(0 5px 8px rgba(35,25,16,.24));
    transform: translate(0,0) rotate(var(--adornment-tilt)) scale(1);
  }
}

@keyframes memory-hat-tip {
  0% {
    opacity: 0;
    filter: blur(1.6px) drop-shadow(0 2px 3px rgba(44,31,20,.12));
    transform: perspective(220px) rotateY(68deg) rotate(-13deg) scale(.58);
  }
  68% {
    opacity: 1;
    filter: blur(0) drop-shadow(0 5px 7px rgba(44,31,20,.24));
    transform: perspective(220px) rotateY(-5deg) rotate(3deg) scale(1.05);
  }
  84% {
    transform: perspective(220px) rotateY(2deg) rotate(-1deg) scale(.99);
  }
  100% {
    opacity: .96;
    filter: blur(0) drop-shadow(0 5px 8px rgba(35,25,16,.24));
    transform: perspective(220px) rotateY(0) rotate(var(--adornment-tilt)) scale(1);
  }
}

@keyframes memory-tower-rise {
  0% {
    opacity: 0;
    filter: blur(2px) drop-shadow(0 2px 3px rgba(44,31,20,.1));
    transform: translateY(22px) scale(.82,.72);
  }
  68% {
    opacity: 1;
    filter: blur(0) drop-shadow(0 5px 7px rgba(44,31,20,.22));
    transform: translateY(-3px) scale(1.03,1.06);
  }
  84% {
    transform: translateY(1px) scale(.995,.99);
  }
  100% {
    opacity: .94;
    filter: blur(0) drop-shadow(0 5px 8px rgba(35,25,16,.22));
    transform: translateY(0) rotate(var(--adornment-tilt)) scale(1);
  }
}

@keyframes memory-reader-drift {
  0% {
    opacity: 0;
    filter: blur(2px) drop-shadow(0 2px 3px rgba(44,31,20,.1));
    transform: translate(12px,9px) rotate(6deg) scale(.82);
  }
  70% {
    opacity: 1;
    filter: blur(0) drop-shadow(0 4px 6px rgba(44,31,20,.2));
    transform: translate(-2px,-1px) rotate(-1.5deg) scale(1.035);
  }
  100% {
    opacity: .92;
    filter: blur(0) drop-shadow(0 5px 8px rgba(35,25,16,.2));
    transform: translate(0,0) rotate(var(--adornment-tilt)) scale(1);
  }
}

@media (max-width: 640px) {
  .speech-bubble[data-person='grandmother'] p,
  .speech-bubble[data-person='grandfather'] p,
  .speech-bubble[data-person='dad'] p,
  .speech-bubble[data-person='uncle'] p {
    padding-left: 0;
    padding-right: 0;
    max-width: 84%;
  }

  .speech-bubble[data-person='grandmother'] p,
  .speech-bubble[data-person='uncle'] p { margin-left: -7%; }
  .speech-bubble[data-person='grandfather'] p,
  .speech-bubble[data-person='dad'] p { margin-left: 7%; }
}

@media (prefers-reduced-motion: reduce) {
  .speech-bubble[data-person][data-has-adornment='1'] .cloud-adornment {
    animation: memory-adornment-fade 180ms ease 120ms both !important;
  }

  @keyframes memory-adornment-fade {
    from { opacity: 0; transform: scale(.92) rotate(var(--adornment-tilt)); }
    to { opacity: .94; transform: scale(1) rotate(var(--adornment-tilt)); }
  }
}