/* The Ant and the Grasshopper. Everything scoped under .agh-*. */

.agh-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px; }

/* the world: meadow, hill, door */
.agh-world { position: relative; width: 100%; max-width: 340px; height: 256px; border-radius: 20px; overflow: hidden;
  background: linear-gradient(#8fd3ff, #c9ecff 70%); transition: background 1.6s ease; }
.agh-world.small { height: 178px; max-width: 310px; }
.agh-world.winter { background: linear-gradient(#5d6b8c, #a9b6cf 75%); }
.agh-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; background: #6cc04a; transition: background 1.6s ease; }
.agh-world.winter .agh-ground { background: #eef3fb; }
.agh-hill { position: absolute; right: -4%; bottom: 10%; width: 58%; height: auto; overflow: visible; }
.agh-world.small .agh-hill { width: 54%; }
.agh-mound { fill: #8a5a36; }
.agh-cap { fill: #5fae3e; transition: fill 1.6s ease; }
.agh-world.winter .agh-cap { fill: #f4f8ff; }
.agh-frame { fill: #5b3a22; }
.agh-glow { fill: #ffc95a; }
.agh-leaf { fill: #b0763f; stroke: #5b3a22; stroke-width: 2; transform-box: fill-box; transform-origin: 0% 50%; transition: transform .6s cubic-bezier(.3, .8, .3, 1); }
.agh-knob { fill: #ffd76a; transition: opacity .3s; }
.agh-win { fill: #ffc95a; stroke: #5b3a22; stroke-width: 3; }
.agh-world.open .agh-leaf { transform: scaleX(.12); }
.agh-world.peek .agh-leaf { transform: scaleX(.55); }
.agh-world.peek .agh-knob { opacity: 0; }
.agh-world.open .agh-knob { opacity: 0; }

/* the characters */
.agh-world img { position: absolute; bottom: 9%; width: auto; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .3)); transition: left 1.2s ease, opacity .8s ease, transform .6s ease; }
.agh-hop, .agh-shv { left: 6%; height: 64%; }
.agh-shv { opacity: 0; }
.agh-world.winter .agh-hop { opacity: 0; }
.agh-world.winter .agh-shv { opacity: 1; }
.agh-world.atdoor .agh-hop, .agh-world.atdoor .agh-shv { left: 26%; }
.agh-world.small .agh-hop, .agh-world.small .agh-shv { height: 66%; }
.agh-ant { left: 40%; height: 34%; animation: agh-haul 3.6s ease-in-out infinite alternate; }
.agh-world.winter .agh-ant { opacity: 0; animation: none; }
@keyframes agh-haul { from { transform: translateX(-30px); } to { transform: translateX(38px); } }
.agh-world.plays .agh-shv { opacity: 0; }
.agh-world.plays .agh-hop { opacity: 1; left: 42%; }

/* the ant in the doorway */
.agh-world img.agh-dant { left: 75%; bottom: 9.5%; height: 25%; opacity: 0; transform: translateX(-50%) scale(.9); transition: opacity .35s ease, transform .35s ease; }
.agh-world.small img.agh-dant { left: 77%; }
.agh-world.open img.agh-dant, .agh-world.peek img.agh-dant { opacity: 1; transform: translateX(-50%); }
.agh-world.shut img.agh-dant { opacity: 0; transition-duration: .1s; }
.agh-world.shut .agh-shv { transform: translateY(4px) rotate(-3deg); }

/* summer notes */
.agh-notes { position: absolute; left: 16%; top: 14%; width: 30%; height: 50%; pointer-events: none; }
.agh-notes svg { position: absolute; width: 18px; height: 25px; fill: #3b2a7a; stroke: #3b2a7a; stroke-width: 2.5; stroke-linecap: round; opacity: 0; animation: agh-note 2.4s ease-out infinite; }
.agh-notes svg:nth-child(2) { left: 40%; animation-delay: .8s; }
.agh-notes svg:nth-child(3) { left: 75%; animation-delay: 1.6s; }
@keyframes agh-note { 0% { opacity: 0; transform: translateY(40px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20px) rotate(12deg); } }
.agh-world.winter .agh-notes { display: none; }
.agh-world.plays .agh-notes { display: block; left: 36%; }

/* snow */
.agh-snow { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s; }
.agh-world.winter .agh-snow { opacity: 1; }
.agh-snow i { position: absolute; top: -8px; width: 6px; height: 6px; border-radius: 50%; background: #fff; animation: agh-fall linear infinite; }
@keyframes agh-fall { to { transform: translate(14px, 260px); } }

/* the bowl */
.agh-bowl { position: absolute; left: 13%; bottom: 8%; width: 40px; opacity: 0; transform: translateY(8px); transition: opacity .5s .4s, transform .5s .4s; }
.agh-bowl svg { width: 100%; height: auto; overflow: visible; display: block; }
.agh-bowl path { fill: #ffc95a; stroke: #8a5a36; stroke-width: 1.5; }
.agh-bowl .agh-steam { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; }
.agh-world.fed .agh-bowl { opacity: 1; transform: none; left: 52%; }
.agh-world.atdoor .agh-bowl { left: 52%; }

/* speech */
.agh-bub small { display: block; font: 800 12px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #7b5cfd; }
.agh-bub { position: absolute; max-width: 58%; padding: 7px 11px; border-radius: 14px; background: #fff; color: #22183f; font: 700 14px/1.25 var(--sans); box-shadow: 0 6px 16px rgba(0, 0, 0, .25); opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .3s, transform .3s; }
.agh-bub.on { opacity: 1; transform: none; }
.agh-ba { right: 6%; top: 8%; border-bottom-right-radius: 4px; }
.agh-bg { left: 4%; top: 32%; border-bottom-left-radius: 4px; }

/* retold: the version card and the ending tiles */
.agh-card { width: 100%; max-width: 330px; padding: 10px 14px; border-radius: 16px; background: var(--raised); border: 1.5px solid var(--line); }
.agh-card.in { animation: agh-in .4s ease both; }
@keyframes agh-in { from { opacity: 0; transform: translateY(8px); } }
.agh-card b, .agh-mods p { color: var(--text); }
.agh-card b { display: block; font: 700 15px var(--sans); margin-top: 2px; }
.agh-card p { margin: 4px 0 0; font: 500 14px/1.35 var(--sans); color: var(--dim); }
.agh-when { font: 700 12px var(--sans); letter-spacing: .04em; color: var(--gold); text-transform: uppercase; }
.agh-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; max-width: 330px; }
.agh-tile { min-height: 52px; padding: 6px; border-radius: 14px; background: var(--raised); border: 1.5px solid var(--line-strong); color: var(--text); font: 700 14px/1.2 var(--sans); cursor: pointer; }
.agh-tile.right { border-color: var(--mint); background: rgba(70, 220, 160, .14); }
.agh-tile.wrong { border-color: var(--red); background: rgba(255, 90, 90, .12); }
.agh-tile.locked:not(.right):not(.wrong) { opacity: .5; }

/* modern versions */
.agh-mods { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 330px; }
.agh-mods div { padding: 7px 12px; border-radius: 14px; background: var(--raised); border: 1px solid var(--line); }
.agh-mods p { margin: 2px 0 0; font: 600 15px/1.35 var(--sans); }
.agh-mods div { padding: 10px 14px; }
.agh-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; max-width: 300px; }
.agh-who { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 6px; border-radius: 16px; background: var(--raised); border: 1.5px solid var(--line-strong); color: var(--text); font: 700 14px var(--sans); cursor: pointer; }
.agh-who img { height: 84px; width: auto; }
.agh-who.right { border-color: var(--mint); background: rgba(70, 220, 160, .14); }
.agh-who.wrong { border-color: var(--red); background: rgba(255, 90, 90, .12); }
.agh-who.lit { border-color: var(--mint); }
.agh-who.dim { opacity: .5; }

@media (max-height: 700px) {
  .agh-who img { height: 64px; }
  .agh-world { height: 210px; }
  .agh-world.small { height: 140px; }
}