/* eggs: the secret being inked at the bottom of the water, and Turri's whisper. Built by js/modules/eggs/stage.js. */
.egg {
  position: fixed;
  left: 50%;
  bottom: max(26px, env(safe-area-inset-bottom));
  z-index: 38;                                   /* over the page, under the swap overlay and the cursor */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: max-content;
  max-width: calc(100vw - 32px);
  transform: translateX(-50%);
  color: var(--fg);
  pointer-events: none;
  visibility: hidden;
}
.egg.is-on { visibility: visible; }
.egg__defs { position: absolute; width: 0; height: 0; }
.egg__ink { fill: var(--ink); }
.egg__cream { fill: var(--cream); }
.egg__violet { fill: var(--field); }

/* ---- the glyph row ---- */
.egg__row {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .12em;
  height: 1.15em;
  font-size: clamp(30px, 2.9vw, 44px);
}
.egg__g {
  position: relative;
  display: block;
  width: .86em;
  height: 1em;
  flex: none;
  color: var(--cream);
  animation: egg-in .82s var(--ease-jelly) both;
  animation-delay: var(--d, 0ms);
}
.egg__g--ch { width: auto; min-width: .5em; }
.egg__gi {
  display: block;
  width: 100%;
  height: 100%;
  animation: egg-bob 2.6s var(--ease-in-out) infinite alternate;
  animation-delay: calc(var(--i, 0) * -.37s);
}
.egg__arrow { display: block; width: 100%; height: 100%; overflow: visible; fill: currentColor; }
.egg__ch {
  display: block;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.3em;
  line-height: .78;
  text-align: center;
  font-variation-settings: "opsz" 144, "wght" 560, "SOFT" 100, "WONK" 1;
  animation: egg-breathe 2.2s var(--ease-in-out) infinite alternate;
  animation-delay: calc(var(--i, 0) * -.45s);
}
.egg__brain { display: block; width: 100%; height: 100%; overflow: visible; }

/* wrong key: sink into the dark */
.egg__g.is-sink { animation: egg-sink .95s var(--ease-sink) both; animation-delay: var(--sd, 0ms); }
/* konami: pop into a brain, then rise */
.egg__g.is-brainy .egg__gi { animation: egg-pop .52s var(--ease-jelly) both; }
.egg__g.is-brainy { width: 1.1em; transition: width .4s var(--ease-jelly); }
/* "brain": somersault with the jelly */
.egg__g.is-flip .egg__gi { animation: egg-flip 1.05s var(--ease-jelly) both; animation-delay: var(--fd, 0ms); transform-origin: 50% 55%; }
.egg__g.is-rise { animation: egg-rise 2.3s var(--ease-out) both; animation-delay: var(--sd, 0ms); }

@keyframes egg-in {
  0% { opacity: 0; filter: blur(8px); transform: translateY(18px) scale(1.32) rotate(var(--r0, -8deg)); }
  35% { opacity: 1; filter: blur(2px); }
  100% { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes egg-bob {
  from { transform: translateY(2px) rotate(-2.5deg); }
  to { transform: translateY(-4px) rotate(2.5deg); }
}
@keyframes egg-breathe {
  from { font-variation-settings: "opsz" 144, "wght" 430, "SOFT" 100, "WONK" 1; }
  to { font-variation-settings: "opsz" 144, "wght" 700, "SOFT" 30, "WONK" 1; }
}
@keyframes egg-sink {
  to { opacity: 0; filter: blur(3px); transform: translateY(46px) rotate(var(--r1, 12deg)) scale(.86); }
}
@keyframes egg-pop {
  0% { transform: scale(.6); opacity: .4; }
  45% { transform: scale(1.38); opacity: 1; }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes egg-flip {
  0% { transform: none; }
  45% { transform: translateY(-.9em) rotate(190deg) scale(1.08); }
  100% { transform: rotate(360deg); }
}
@keyframes egg-rise {
  0% { opacity: 1; transform: none; }
  100% { opacity: 0; transform: translate(var(--dx, 0px), -38vh) rotate(var(--r1, 20deg)) scale(.72); }
}

/* ---- the whisper ---- */
.egg__say {
  display: flex;
  align-items: center;
  gap: 22px;
  margin-top: 14px;
  max-width: min(560px, calc(100vw - 32px));
  opacity: 0;
}
.egg__say.is-in, .egg__say.is-out { opacity: 1; }
.egg__who {
  flex: none;
  width: 34px;
  height: 28px;
  margin-top: 1px;
  opacity: 0;
  transform: translateY(8px) scale(.7);
  transition: opacity .6s var(--ease-out), transform .9s var(--ease-jelly);
}
.egg__who .hj-mark { width: 100%; height: 100%; }
.egg__say.is-in .egg__who.has-mark { opacity: 1; transform: none; }
.egg__say.is-out .egg__who { opacity: 0; transform: translateY(10px) scale(.8); transition: opacity .7s var(--ease-sink), transform .7s var(--ease-sink); }
.egg__line { position: relative; isolation: isolate; display: flex; flex-direction: column; min-width: 0; color: var(--cream); }
.egg__blot {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  overflow: visible;
  fill: var(--ink);
  transform-origin: 0% 60%;
  opacity: 0;
  transform: scale(.35, .3);
  filter: blur(6px);
}
.egg__row.is-inked .egg__blot--row { opacity: 1; transform: none; filter: blur(0); transition: opacity .35s var(--ease-out), transform .85s var(--ease-jelly), filter .6s var(--ease-out); }
.egg__blot--row { transform-origin: 8% 60%; transition: opacity .4s var(--ease-out), transform .6s var(--ease-sink), filter .4s var(--ease-out); }
.egg__say.is-in .egg__blot { opacity: 1; transform: none; filter: blur(0); transition: opacity .35s var(--ease-out), transform .85s var(--ease-jelly), filter .6s var(--ease-out); }
.egg__say.is-out .egg__blot { opacity: 0; transform: translateY(14px) scale(.92, .8); filter: blur(4px); transition: opacity .8s var(--ease-sink), transform .9s var(--ease-sink), filter .8s var(--ease-sink); }
.egg__text {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.3;
  letter-spacing: .004em;
  font-variation-settings: "opsz" 24, "wght" 460, "SOFT" 100, "WONK" 1;
  text-wrap: balance;
}
.egg__w { display: inline-block; opacity: 0; }
.egg__say.is-in .egg__w { animation: egg-bleed .95s var(--ease-out) both; animation-delay: var(--wd, 0ms); }
.egg__say.is-out .egg__w { opacity: 1; animation: egg-out .8s var(--ease-sink) both; }
.egg__tide {
  display: none;
  height: 22px;
  margin: 2px 0 -6px;
  overflow: visible;
  fill: currentColor;
  opacity: 0;
  transition: opacity .5s var(--ease-out);
}
.egg__say.has-tide .egg__tide { display: block; }
.egg__say.is-tide .egg__tide { opacity: 1; }
.egg__say.is-out .egg__tide { opacity: 0; }

@keyframes egg-bleed {
  0% { opacity: 0; filter: blur(7px); transform: translateY(.32em) scale(1.08); font-variation-settings: "opsz" 24, "wght" 800, "SOFT" 100, "WONK" 1; }
  40% { opacity: 1; filter: blur(1.6px); }
  100% { opacity: 1; filter: blur(0); transform: none; font-variation-settings: "opsz" 24, "wght" 460, "SOFT" 100, "WONK" 1; }
}
@keyframes egg-out {
  to { opacity: 0; filter: blur(4px); transform: translateY(12px); }
}

@media (max-width: 720px) {
  .egg { bottom: max(18px, env(safe-area-inset-bottom)); }
  .egg__who { width: 28px; height: 23px; }
}

@media (prefers-reduced-motion: reduce) {
  .egg__gi, .egg__ch { animation: none; }
  .egg__w { opacity: 1; }
}