.tidal-easter-egg {
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}
.tidal-easter-egg-vessel {
  position: absolute;
  left: 0;
  /* The 2172px-wide PNG has 246px below its opaque waterline. */
  bottom: calc(6px - min(90vw, 1800px, 180dvh) * 246 / 2172);
  width: min(90vw, 1800px, 180dvh);
  visibility: hidden;
  transform: translateX(-100%);
}
.tidal-easter-egg-vessel img {
  display: block;
  width: 100%;
  height: auto;
  transform: scaleX(-1);
}
/* Reuse the PNG's transparent silhouette as a theme-coloured mask, without
   recolouring the source or changing the light-theme rendering. */
html[data-theme="dark"] .tidal-easter-egg-vessel img { opacity: 0; }
html[data-theme="dark"] .tidal-easter-egg-vessel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-brand-bronze);
  -webkit-mask: url("/images/easteregg.png") center / contain no-repeat;
  mask: url("/images/easteregg.png") center / contain no-repeat;
  transform: scaleX(-1);
}
html[data-theme="dark"] .tidal-easter-egg-vessel {
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--color-brand-bronze) 20%, transparent));
}
.tidal-easter-egg-vessel.is-sailing {
  visibility: visible;
  animation: tidal-easter-egg-sail 18s linear both;
}
.tidal-easter-egg-vessel.is-resting {
  visibility: visible;
  left: 50%;
  transform: translateX(-50%);
  animation: tidal-easter-egg-fade 3s ease-in-out both;
}
@keyframes tidal-easter-egg-sail {
  from { transform: translateX(-100%); }
  to { transform: translateX(100vw); }
}
@keyframes tidal-easter-egg-fade {
  0%, 100% { opacity: 0; }
  20%, 80% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .tidal-easter-egg-vessel.is-sailing {
    left: 50%;
    transform: translateX(-50%);
    animation: tidal-easter-egg-fade 3s ease-in-out both;
  }
}