.prop { position: absolute; opacity: 0; }

/* milestone emoji pop (js/hud.js) */
.pop {
  transform: translateX(-50%); font-size: calc(var(--u) * 5); line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0,0,0,.2));
}

/* meeting */
.bubble {
  left: 50%; bottom: calc(var(--feet) + var(--u) * 37); transform: translateX(-50%);
  font-size: calc(var(--u) * 7); animation: beat 1s ease-in-out infinite;
}
@keyframes beat { 50% { transform: translateX(-50%) scale(1.2); } }

/* forever */
.infinity {
  left: 50%; top: 30%; transform: translateX(-50%);
  font: 500 calc(var(--u) * 16)/1 'Playfair Display', Georgia, serif; color: #fff;
  text-shadow: 0 0 18px #ff9fd0, 0 0 40px #ff5c8a;
  animation: glow 2.4s ease-in-out infinite;
}
@keyframes glow { 50% { text-shadow: 0 0 30px #ffc2e2, 0 0 70px #ff5c8a; } }

/* prologue: the maple tree on the mountain (js/scenes/intro.js) */
.pro { inset: 0; overflow: hidden; background: #000; }
.pro svg { width: 100%; height: 100%; display: block; }
.pro-wind { stroke-dasharray: 160 900; animation: proWind 2s linear infinite; }
@keyframes proWind { from { stroke-dashoffset: 1060; } to { stroke-dashoffset: 0; } }

/* the long fall the camera follows */
.fall { left: 0; right: 0; top: 0; height: 400vh; will-change: transform; }
.fall-sky { position: absolute; inset: 0; background: linear-gradient(#0a0c2a 0%, #141a46 18%, #1d2557 34%, #1c2c45 50%, #1f3a46 66%, #24443f 82%, #22412f 100%); }
.fstar { position: absolute; border-radius: 50%; background: #fff; animation: twinkle 3s infinite ease-in-out; }
.fmoon { position: absolute; left: 74%; top: 8vh; width: 11vmin; height: 11vmin; border-radius: 50%; background: #fff8dc; box-shadow: 0 0 40px 14px rgba(255, 248, 220, .35); }
.fband { position: absolute; left: 0; width: 100%; display: block; }
.fgrass { position: absolute; left: 0; right: 0; top: 365vh; bottom: 0; background: linear-gradient(#2c5a4e, #1d4234); }
.fgrass svg { position: absolute; left: 0; bottom: 100%; width: 100%; height: 6vh; margin-bottom: -1px; }
.leaf-fall {
  top: 0; width: 16vmin; transform-origin: 50% 92%;
  filter: drop-shadow(0 0 2.5vmin rgba(255, 150, 60, .55));
}
.leaf-fall svg { width: 100%; display: block; overflow: visible; }

/* birth: top-down close-up of the leaf and the sleeping baby */
.closeup { inset: 0; overflow: hidden; }
.closeup svg { width: 100%; height: 100%; display: block; }
.cworld { transform-origin: 800px 500px; transform-box: view-box; }
.firefly { animation: twinkle 2.6s infinite ease-in-out; }

/* a ball tossed between two kids (home + school): JS sets left, bottom and --span */
.toss { width: var(--span, 10vw); height: 0; transition: opacity .4s; }
.toss-x { position: absolute; left: 0; bottom: 0; animation: tossX 1.6s ease-in-out infinite alternate; }
.toss-y {
  width: calc(var(--u) * 3); height: calc(var(--u) * 3); margin-left: calc(var(--u) * -1.5); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff 0 12%, #ff7aa8 13% 48%, #ffd36b 49% 60%, #ff5c8a 61%);
  box-shadow: 0 3px 6px rgba(0,0,0,.25);
  animation: tossY .8s ease-in-out infinite alternate;
}
@keyframes tossX { from { transform: translateX(0); } to { transform: translateX(var(--span, 10vw)); } }
@keyframes tossY { from { transform: translateY(0); } to { transform: translateY(calc(var(--u) * -12)); } }

/* the rented car (trips: Rakchham + Chitkul) */
.car {
  bottom: calc(var(--feet) - var(--u) * 1.2); width: calc(var(--u) * 40); transform: translateX(-50%);
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.18));
}
.car svg { width: 100%; display: block; overflow: visible; }
.car .car-heads { transition: opacity .4s; }
.car.driving .car-wheel { animation: spin .5s linear infinite; }
.car.driving svg { animation: rumble .25s ease-in-out infinite alternate; }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rumble { to { transform: translateY(-1.5px); } }

/* the SPOT (js/scenes/spot.js) */
.spot { inset: 0; overflow: hidden; }
.spot svg, .sdoodle svg { width: 100%; height: 100%; display: block; }
.sdoodle { inset: 0; overflow: hidden; }
.snacks { bottom: calc(var(--feet) - var(--u) * 0.6); width: calc(var(--u) * 11); transform: translateX(-50%); }
.snacks.left { left: 37.5%; }
.snacks.right { left: 62%; }
.snacks svg { width: 100%; display: block; overflow: visible; }
.snacks .sn { transform-box: fill-box; transform-origin: 50% 100%; }
.sbubble {
  bottom: calc(var(--feet) + var(--u) * 27); transform: translateX(-50%);
  min-width: calc(var(--u) * 7); padding: calc(var(--u) * 1) calc(var(--u) * 1.6);
  background: #fff; border-radius: calc(var(--u) * 3); text-align: center;
  font-size: calc(var(--u) * 4); line-height: 1.1; box-shadow: 0 6px 18px rgba(60, 30, 20, .2);
}
.sbubble::after { content: ''; position: absolute; bottom: calc(var(--u) * -1.4); right: 22%; border: calc(var(--u) * .9) solid transparent; border-top-color: #fff; border-right-color: #fff; }
.sbubble.right::after { right: auto; left: 22%; border-right-color: transparent; border-left-color: #fff; }
.snotes { left: 55.5%; bottom: calc(var(--feet) + var(--u) * 26); width: calc(var(--u) * 12); height: calc(var(--u) * 18); }
.snotes span {
  position: absolute; bottom: 0; font-size: calc(var(--u) * 5); font-weight: 700; color: #fff;
  text-shadow: 0 0 10px #ff9fd0, 0 2px 6px rgba(60, 20, 60, .4);
  animation: noteUp 3.2s ease-in-out infinite; opacity: 0;
}
@keyframes noteUp { 0% { transform: translate(0, 0) rotate(-8deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translate(calc(var(--u) * -6), calc(var(--u) * -16)) rotate(12deg); opacity: 0; } }
.uheart { transform: translateX(-50%); font-size: calc(var(--u) * 3.4); animation: glow 2.4s ease-in-out infinite; filter: drop-shadow(0 0 8px rgba(255, 120, 170, .8)); }

/* trips: the bike, the camel, the night by the fire, the ferry, the divers (js/tripart.js) */
.tprop { transform: translateX(-50%); filter: drop-shadow(0 4px 6px rgba(0,0,0,.16)); }
.tprop svg { width: 100%; display: block; overflow: visible; }
.tprop.bike   { bottom: calc(var(--feet) - var(--u) * 1); width: calc(var(--u) * 46); }
.tprop.camel  { bottom: calc(var(--feet) - var(--u) * 1); width: calc(var(--u) * 44); }
.tprop.night  { bottom: calc(var(--feet) - var(--u) * 4); width: calc(var(--u) * 110); filter: none; }
.tprop.ferry  { bottom: calc(var(--feet) - var(--u) * 6); width: calc(var(--u) * 64); filter: none; }
.tprop.divers { bottom: calc(var(--feet) + var(--u) * 12); width: calc(var(--u) * 46); filter: none; }
.tprop .dust { opacity: 0; }
.tprop.moving .wheel { animation: spin .45s linear infinite; }
.tprop.bike.moving svg { animation: rumble .2s ease-in-out infinite alternate; }
.tprop.bike.moving .dust { opacity: 1; animation: dust .6s ease-out infinite; }
@keyframes dust { from { transform: translateX(0); opacity: .9; } to { transform: translateX(-24px); opacity: 0; } }
.tprop.camel .cleg { transform-box: view-box; }
.tprop.camel.moving .cleg { animation: cstep .9s ease-in-out infinite alternate; }
.tprop.camel.moving svg { animation: camelSway .9s ease-in-out infinite alternate; }
@keyframes cstep { from { transform: rotate(-13deg); } to { transform: rotate(13deg); } }
@keyframes camelSway { from { transform: translateY(0) rotate(-.6deg); } to { transform: translateY(-1.5%) rotate(.6deg); } }
.tprop.night .fireglow { animation: fireglow .5s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 80%; }
@keyframes fireglow { from { opacity: .85; transform: scale(.97); } to { opacity: 1; transform: scale(1.03); } }
.tprop.night .spark { animation: spark 2.5s linear infinite; }
@keyframes spark { from { transform: translate(0, 0); opacity: 1; } to { transform: translate(12px, -90px); opacity: 0; } }
.tprop.ferry svg { animation: ferryBob 2.6s ease-in-out infinite alternate; }
@keyframes ferryBob { from { transform: translateY(0) rotate(-.7deg); } to { transform: translateY(-2%) rotate(.7deg); } }
.tprop.ferry .flag { animation: flag 1s ease-in-out infinite alternate; transform-box: view-box; }
.tprop.ferry .wake, .tprop.ferry .bow { animation: foam 1.4s ease-in-out infinite alternate; }
.tprop.divers svg { animation: diveBob 3.4s ease-in-out infinite alternate; }
@keyframes diveBob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-5%) rotate(2deg); } }
.tprop.divers .kick { transform-box: view-box; animation: kick .9s ease-in-out infinite alternate; }
@keyframes kick { from { transform: rotate(-10deg); } to { transform: rotate(10deg); } }
.tprop.divers .float { animation: kelp 2.4s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 100% 30%; }
.tprop.divers .bub { animation: bub 1.8s linear infinite; }
@keyframes bub { from { transform: translateY(0); opacity: .9; } to { transform: translateY(-70px); opacity: 0; } }

/* trips: the bubble for our little moments, and the apple I balanced on my head at Kalpa */
.tbubble { bottom: calc(var(--feet) + var(--u) * 37); }
.tapple { width: calc(var(--u) * 4.2); transform: translateX(-50%); transform-origin: 50% 100%; filter: drop-shadow(0 2px 2px rgba(0,0,0,.2)); }
.tapple svg { width: 100%; display: block; }

/* Maggi, Moonlight & Exams (js/scenes/nights.js) */
.nights { inset: 0; overflow: hidden; }
.nights svg { width: 100%; height: 100%; display: block; }
.nights .nsteam { animation: steam 2s ease-out infinite; }
@keyframes steam { from { transform: translateY(0); opacity: .6; } to { transform: translateY(-30px); opacity: 0; } }
.nights .nline { animation: flow 1.2s linear infinite; }
.nights .nperson { transform-box: fill-box; transform-origin: 50% 100%; }
.nights .n-giggle { animation: giggle .32s ease-in-out infinite alternate; }
.nights .n-hop { animation: hop .62s cubic-bezier(.3, 0, .4, 1) infinite; }
.nights .n-shiver { animation: shiver .09s linear infinite alternate; }
.nights .n-pace { animation: pace 2.4s ease-in-out infinite alternate; }
@keyframes pace { from { transform: translateX(-40px); } to { transform: translateX(40px); } }

/* Home, Sweet Home (js/scenes/familytime.js); also uses the .nights person/play styles */
.nights .n-rub { animation: rub .45s ease-in-out infinite alternate; }
@keyframes rub { from { transform: translateX(-3px) rotate(-1deg); } to { transform: translateX(3px) rotate(1deg); } }
.familytime .ftz { animation: ftz 2.4s ease-out infinite; }
@keyframes ftz { from { transform: translateY(0); opacity: 0; } 30% { opacity: 1; } to { transform: translateY(-40px); opacity: 0; } }
.familytime .ftfw { transform-box: fill-box; transform-origin: center; animation: ftfw 1.8s ease-out infinite; }
@keyframes ftfw { 0% { transform: scale(.1); opacity: 0; } 15% { opacity: 1; } 70% { opacity: .9; } 100% { transform: scale(1.25); opacity: 0; } }