/* The egg adventure (js/hatch.js): Nimbus brings the egg, the child picks or paints it, warms it, knocks back, and
   it hatches. */

/* Nimbus: asleep in the middle before the first tap, then the guide in the corner who bobs while she talks */
.guide { position: absolute; z-index: 5; left: 50%; top: 42%; width: clamp(220px, 46vmin, 480px); translate: -50% -50%;
  transition: left 1.2s cubic-bezier(.4, 0, .2, 1), top 1.2s cubic-bezier(.4, 0, .2, 1), width 1.2s cubic-bezier(.4, 0, .2, 1); }
.guide img { width: 100%; display: block; filter: drop-shadow(0 16px 18px rgba(120, 90, 190, .25)); animation: float 5s ease-in-out infinite; }
.guide.asleep img { animation: snooze 3.2s ease-in-out infinite; }
.guide.asleep::after { content: "z z z"; position: absolute; right: 12%; top: -4%; font-weight: 900; font-size: clamp(26px, 5vmin, 46px); color: #fff;
  -webkit-text-stroke: 1.5px #8663c3; letter-spacing: .15em; animation: zzz 2.6s ease-in-out infinite; pointer-events: none; }
.guide.asleep::before { content: ""; position: absolute; inset: -8%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 245, 200, .7), rgba(255, 245, 200, 0));
  animation: beckon 2.4s ease-in-out infinite; z-index: -1; }
@keyframes snooze { 0%, 100% { scale: 1 1; } 50% { scale: 1.03 .97; } }
@keyframes zzz { 0% { opacity: 0; translate: 0 10px; } 30% { opacity: 1; } 100% { opacity: 0; translate: 16px -34px; } }
@keyframes beckon { 50% { scale: 1.12; opacity: .6; } }
.guide.corner { left: calc(100% - clamp(80px, 13vmin, 150px) - var(--safe-r)); top: calc(var(--safe-t) + clamp(60px, 10vmin, 110px)); width: clamp(130px, 22vmin, 240px); }
body[data-talking] .guide.corner img { animation: talk .5s ease-in-out infinite alternate, float 5s ease-in-out infinite; }
@keyframes talk { to { transform: scale(1.04, .97) rotate(-2deg); } }

/* the egg in its cloud nest */
/* the egg and its nest (1.5x the egg's width) always fit: capped by the screen's height and by its width */
.egg-stage { position: absolute; left: 50%; top: 44%; translate: -50% -50%; height: min(52vh, 60vw * 1.365); aspect-ratio: 750 / 1024;
  transition: transform 1.1s cubic-bezier(.3, 1.3, .5, 1), opacity .6s; }
.egg-stage.away { transform: translateY(-80vh) scale(.6); opacity: 0; }
.egg-stage.landing { animation: settle 1.1s cubic-bezier(.3, 1.4, .5, 1); }
@keyframes settle { 70% { scale: 1.06 .94; } }
/* the nest in two layers: its back rim behind the egg, its front rim in front, so the egg sits inside it */
.egg-stage .nest { position: absolute; left: -26%; width: 152%; bottom: -17%; pointer-events: none; }
.egg-stage .nest.back { z-index: 0; filter: drop-shadow(0 16px 18px rgba(110, 80, 180, .25)); }
.egg-stage .nest.front { z-index: 2; -webkit-mask: linear-gradient(to bottom, transparent 42%, #000 60%); mask: linear-gradient(to bottom, transparent 42%, #000 60%); }
.egg { position: absolute; inset: 0 0 4% 0; touch-action: none; transform-origin: 50% 92%; z-index: 1; }
.egg img, .egg canvas, .egg svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: contain; }
.egg .shell { filter: drop-shadow(0 18px 18px rgba(110, 80, 180, .3)); }
/* the paint sits on the shell (masked to its outline), with the shell's shading laid back over it and a soft gloss */
.egg .paint { -webkit-mask: url(../assets/art/ui/egg.webp) center / 100% 100% no-repeat; mask: url(../assets/art/ui/egg.webp) center / 100% 100% no-repeat; }
.egg .shade { mix-blend-mode: multiply; opacity: .35; pointer-events: none; }
.egg .gloss { mix-blend-mode: soft-light; opacity: .6; pointer-events: none; }
.egg.designed .shade, .egg.designed .gloss { display: none; }
.egg .crack { pointer-events: none; overflow: visible; }
.egg .crack polyline { fill: none; stroke: #5b3b7a; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, .9)); opacity: 0; clip-path: inset(0 100% 0 0); transition: clip-path .35s ease-out, opacity .1s; }
.egg.c1 .crack .c1, .egg.c2 .crack .c1, .egg.c2 .crack .c2 { opacity: 1; clip-path: inset(0 0 0 0); }
.egg.giggle { animation: eggle .6s ease-in-out; }
@keyframes eggle { 20% { rotate: -6deg; scale: 1.03 .97; } 45% { rotate: 5deg; } 70% { rotate: -3deg; } }
.egg.inside { animation: inside .7s ease-in-out; }
@keyframes inside { 15% { translate: 0 -3%; rotate: -4deg; } 30% { translate: 0 0; rotate: 0deg; } 45% { translate: 0 -3%; rotate: 4deg; } 60% { translate: 0 0; rotate: 0deg; } }
.egg.knock { animation: knock .45s ease-in-out; }
@keyframes knock { 25% { rotate: -8deg; scale: 1.04 .96; } 60% { rotate: 7deg; } }
.egg.ready { animation: shiver .28s ease-in-out infinite; }
@keyframes shiver { 25% { rotate: -2.5deg; } 75% { rotate: 2.5deg; } }
.egg.glowing .shell { filter: drop-shadow(0 0 26px #ffe9a8) drop-shadow(0 0 60px rgba(255, 180, 120, .7)); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { filter: drop-shadow(0 0 40px #fff2c6) drop-shadow(0 0 90px rgba(255, 180, 120, .85)); } }
/* warmth: a golden glow behind the egg that grows as the child rubs it */
.warmth { position: absolute; left: 50%; top: 50%; width: 190%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; pointer-events: none; z-index: 0;
  background: radial-gradient(closest-side, rgba(255, 236, 170, .95), rgba(255, 190, 150, .55) 45%, rgba(255, 170, 210, 0));
  opacity: var(--w, 0); scale: calc(.4 + var(--w, 0) * .7); transition: opacity .3s, scale .3s; }
.heart-float { position: fixed; z-index: 55; width: clamp(28px, 5vmin, 48px); pointer-events: none; filter: drop-shadow(0 4px 4px rgba(200, 60, 120, .25)); }

.shard { position: absolute; inset: 0 0 4% 0; width: 100%; height: 96%; z-index: 3; pointer-events: none; object-fit: contain; filter: drop-shadow(0 8px 8px rgba(110, 80, 180, .3)); }
.hatch-rays { position: absolute; left: 50%; top: 55%; width: 280%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; z-index: 0; pointer-events: none;
  background: repeating-conic-gradient(rgba(255, 244, 190, .85) 0 9deg, rgba(255, 244, 190, 0) 9deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%); mask: radial-gradient(circle, #000 18%, transparent 62%);
  animation: rays 9s linear infinite, rays-in .5s ease-out; transition: opacity 1.4s ease; }
.hatch-rays.fade { opacity: 0; }
@keyframes rays-in { from { opacity: 0; scale: .3; } }
.newborn { position: absolute; left: 50%; bottom: 6%; width: 96%; translate: -50% 0; transform-origin: 50% 60%; z-index: 4; filter: drop-shadow(0 14px 14px rgba(110, 80, 180, .3)); }
.newborn.in { animation: born 1s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes born { from { scale: .2; opacity: 0; } to { scale: 1; opacity: 1; } }
.flash { position: fixed; inset: 0; z-index: 60; pointer-events: none; background: radial-gradient(circle at 50% 45%, #fff 0 20%, rgba(255, 255, 255, 0) 60%); animation: flash 1s ease-out forwards; }
@keyframes flash { from { opacity: 0; scale: .4; } 25% { opacity: 1; } to { opacity: 0; scale: 1.6; } }

/* the tray: pretty eggs to pick (and the palette), or the brushes, stickers and colours */
.tray { position: absolute; left: 50%; bottom: calc(var(--safe-b) + 2.5vh); translate: -50% 0; z-index: 6; max-width: calc(100vw - 16px);
  display: flex; flex-direction: column; align-items: center; gap: clamp(6px, 1.4vmin, 14px); transition: transform .5s cubic-bezier(.3, 1.3, .5, 1), opacity .4s; }
.tray.away { transform: translateY(140%); opacity: 0; pointer-events: none; }
.tray.choose { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; padding: 10px 12px; gap: clamp(6px, 1.6vmin, 16px); scrollbar-width: none; }
.tray .row { display: flex; gap: clamp(6px, 1.4vmin, 14px); justify-content: center; flex-wrap: wrap; }
.mini-egg { flex: none; width: clamp(46px, 8.5vmin, 86px); aspect-ratio: 3 / 4; transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); animation: tile-in .5s cubic-bezier(.3, 1.5, .5, 1) both; }
.mini-egg:nth-child(2n) { animation-delay: .05s; } .mini-egg:nth-child(3n) { animation-delay: .1s; }
.mini-egg img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 6px 6px rgba(110, 80, 180, .3)); }
.mini-egg.on { transform: translateY(-12%) scale(1.15); }
.mini-egg.on img { filter: drop-shadow(0 0 10px #fff6c8) drop-shadow(0 6px 6px rgba(110, 80, 180, .3)); }
.tool { --s: clamp(46px, 8.5vmin, 80px); flex: none; width: var(--s); height: var(--s); border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .72); border: 3px solid #fff; box-shadow: 0 5px 0 rgba(124, 111, 208, .16), 0 10px 18px rgba(124, 111, 208, .18);
  transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.tool img { width: 74%; height: 74%; object-fit: contain; pointer-events: none; }
.tool.on { transform: translateY(-12%) scale(1.14); background: #fff8d8; }
.tool.palette { --s: clamp(60px, 11vmin, 104px); background: radial-gradient(circle at 35% 30%, #fff, #ffe9f5); }
.tool.palette { animation: beckon-tool 1.6s ease-in-out infinite; }
@keyframes beckon-tool { 50% { transform: scale(1.08); } }
.bubble { --s: clamp(38px, 7.2vmin, 70px); width: var(--s); height: var(--s); border-radius: 50%; position: relative; flex: none;
  background: radial-gradient(circle at 34% 30%, rgba(255, 255, 255, .95) 0 9%, rgba(255, 255, 255, 0) 22%),
              radial-gradient(circle at 50% 60%, var(--c) 0 55%, color-mix(in srgb, var(--c) 72%, #3a2458) 100%);
  box-shadow: 0 5px 0 color-mix(in srgb, var(--c) 60%, #3a2458), 0 8px 16px rgba(90, 60, 150, .28), inset 0 -6px 10px rgba(58, 36, 88, .18);
  border: 3px solid #fff; transition: transform .2s cubic-bezier(.3, 1.6, .5, 1); }
.bubble.on { transform: translateY(-14%) scale(1.18); }
.done { position: absolute; right: calc(var(--safe-r) + 4vmin); top: 50%; translate: 0 -50%; width: clamp(84px, 15vmin, 150px); z-index: 6; }
.done img { width: 100%; display: block; filter: drop-shadow(0 10px 12px rgba(200, 140, 40, .35)); animation: kg-bounce 1.6s ease-in-out infinite; }
@media (orientation: portrait) {
  .egg-stage { top: 42%; }
  .done { top: auto; bottom: calc(var(--safe-b) + 24vh); translate: none; }
}