/* SS-402: a living hero. The messy table breathes, and scraps of the story fly along the arrow into the finished post.
   Idle sway uses the individual translate/rotate properties so each element keeps its own transform tilt. */

/* 1. Paper craft: washi tape holds the photo and the sticky note. */
.source-photo::before,
.source-note::before {
  content: "";
  position: absolute;
  z-index: 1;
  width: 74px;
  height: 22px;
  background: repeating-linear-gradient(135deg, #ffb65c33 0 6px, #ffb65c1f 6px 12px), #f5f3ef8c;
  box-shadow: 0 1px 3px #0004;
  clip-path: polygon(3% 0, 97% 4%, 100% 50%, 96% 100%, 2% 96%, 0 48%);
  pointer-events: none;
}
.source-photo::before {
  top: -14px;
  left: 50%;
  translate: -50% 0;
  rotate: 6deg;
}
.source-note::before {
  top: -12px;
  left: 30px;
  width: 64px;
  rotate: -9deg;
  background: repeating-linear-gradient(90deg, #dbe9ff59 0 5px, #dbe9ff33 5px 10px), #f5f3ef80;
}

/* 2. The table breathes: slow, small, out of phase. */
@keyframes sway-a {
  from {
    translate: 0 0;
    rotate: 0deg;
  }
  to {
    translate: 2px -6px;
    rotate: 1.6deg;
  }
}
@keyframes sway-b {
  from {
    translate: 0 0;
    rotate: 0deg;
  }
  to {
    translate: -3px 4px;
    rotate: -1.8deg;
  }
}
@keyframes bob {
  from {
    translate: 0 0;
  }
  to {
    translate: 0 -7px;
  }
}
@keyframes stamp-nudge {
  0%,
  78%,
  100% {
    rotate: 0deg;
    scale: 1;
  }
  84% {
    rotate: -5deg;
    scale: 1.06;
  }
  90% {
    rotate: 3deg;
    scale: 1;
  }
}
.source-photo {
  animation: sway-a 6.4s ease-in-out -1.2s infinite alternate;
}
.source-note {
  animation: sway-b 7.2s ease-in-out -3s infinite alternate;
}
.source-chat {
  animation: bob 3.6s ease-in-out -0.8s infinite alternate;
}
.source-label {
  animation: sway-b 5.8s ease-in-out -2.4s infinite alternate;
}
.voice:first-child {
  animation: sway-a 5.4s ease-in-out -2s infinite alternate;
}
.voice:last-child {
  animation: bob 4.4s ease-in-out -1.5s infinite alternate;
}
.hero-input .mascot-messy {
  animation: bob 2.6s ease-in-out infinite alternate;
}
.hero-art {
  animation: bob 6s ease-in-out -2s infinite alternate;
}
.hero-output::before {
  animation: sway-a 8s ease-in-out -4s infinite alternate;
}
.hero-character .mascot-ready {
  animation: bob 3.2s ease-in-out -1s infinite alternate;
}
.result-stamp {
  animation: stamp-nudge 5.6s ease-in-out 2.4s infinite;
}

/* 3. Scraps of the story ride the arrow into the post. The layer sits on the arrow's grid cell
   (absolute grid children do not take a cell), so the path follows the arrow at every width. */
.story-scraps {
  position: absolute;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
  inset: 0;
  /* Below the post (z 2) so scraps slip in behind it, above the sticky note they leave. */
  z-index: 1;
  pointer-events: none;
}
.story-scraps i {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 26px;
  height: 24px;
  margin: -12px 0 0 -13px;
  opacity: 0;
  background: #fff0c6;
  box-shadow: 0 6px 12px #0009;
  clip-path: polygon(0 4%, 100% 0, 96% 70%, 88% 82%, 94% 100%, 6% 96%, 0 60%);
  animation: scrap-fly 6s cubic-bezier(0.45, 0.05, 0.4, 1) infinite;
}
.story-scraps i:nth-child(2) {
  width: 14px;
  height: 34px;
  background: repeating-linear-gradient(180deg, transparent 0 5px, #17120b2e 5px 6px), #f5f3ef;
  clip-path: polygon(0 0, 100% 0, 100% 92%, 80% 100%, 60% 92%, 40% 100%, 20% 92%, 0 100%);
  animation-delay: -1.5s;
}
.story-scraps i:nth-child(3) {
  width: 30px;
  height: 18px;
  background: #dbe9ff;
  border-radius: 9px 9px 9px 2px;
  clip-path: none;
  animation-delay: -3s;
}
.story-scraps i:nth-child(4) {
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 55% 50%, #3b2416 0 30%, #8a5a3a 31% 55%, #c69a76 56%);
  border: 3px solid #f5f3ef;
  clip-path: none;
  animation-delay: -4.5s;
}
@keyframes scrap-fly {
  0% {
    opacity: 0;
    transform: translate(-105px, -20px) rotate(-30deg) scale(0.8);
  }
  10% {
    opacity: 1;
  }
  45% {
    transform: translate(-15px, -105px) rotate(150deg) scale(1.1);
  }
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(115px, -35px) rotate(330deg) scale(0.6);
  }
}

/* Tablets: the arrow column is narrow, so shrink the path to keep scraps off the note's words. */
@media (min-width: 720px) and (max-width: 1099px) {
  .story-scraps {
    scale: 0.7;
  }
}
/* Phones: the scene stacks, so scraps fall from the story down through the arrow into the post. */
@media (max-width: 719px) {
  .story-scraps {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
  }
  .story-scraps i {
    animation-name: scrap-fall;
  }
  .story-scraps i:nth-child(4) {
    display: none;
  }
  .source-photo::before {
    width: 54px;
    height: 16px;
    top: -10px;
  }
  .source-note::before {
    width: 48px;
    height: 16px;
    left: 18px;
    top: -9px;
  }
}
@keyframes scrap-fall {
  0% {
    opacity: 0;
    transform: translate(-70px, -120px) rotate(-30deg) scale(0.8);
  }
  10% {
    opacity: 1;
  }
  45% {
    transform: translate(70px, -40px) rotate(150deg) scale(1.05);
  }
  82% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(10px, 70px) rotate(330deg) scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .source-photo,
  .source-note,
  .source-chat,
  .source-label,
  .voice:first-child,
  .voice:last-child,
  .hero-input .mascot-messy,
  .hero-art,
  .hero-output::before,
  .hero-character .mascot-ready,
  .result-stamp {
    animation: none;
  }
  .story-scraps {
    display: none;
  }
}