html,
  body {
    min-height: 100%;
  }
  body {
    transition: background-color 2600ms ease, color 1800ms ease;
  }
  body.egg-armed {
    background: #fbfbf8;
  }
  .home-single img {
    display: block;
    margin: 0 auto;
    width: 800px;
    max-width: 100%;
    height: auto;
  }
  .home-diptych {
    width: 800px;
    max-width: 100%;
    margin: 0 auto;
    display: flex;
    gap: 35px;
    justify-content: center;
    align-items: flex-start;
  }
  .home-diptych img {
    width: calc((100% - 35px) / 2);
    height: auto;
    display: block;
    background: #000;
  }
  .home-video video {
    display: block;
    margin: 0 auto;
    width: 1080px;
    max-width: 100%;
    height: auto;
    background: #000;
  }
  #wrapper_thumb {
    position: relative;
    transition: opacity 1800ms ease;
  }
  .egg-trigger-area {
    position: relative;
  }
  .egg-fade-target {
    transition:
      opacity 2300ms ease,
      filter 3200ms ease,
      transform 3400ms ease,
      color 1800ms ease;
    transition-delay: var(--egg-delay, 0s);
    will-change: opacity, filter, transform;
  }
  .egg-media-source img,
  .egg-media-source video {
    transition:
      opacity 3000ms ease,
      filter 3600ms ease,
      transform 3600ms ease;
    will-change: opacity, filter, transform;
  }
  body.egg-active .egg-fade-target {
    opacity: 0.08;
    filter: grayscale(1) saturate(0) brightness(1.22) blur(1.5px);
    transform: translateY(-2px);
  }
  body.egg-active .egg-media-source img,
  body.egg-active .egg-media-source video {
    opacity: 0.06;
    filter: grayscale(1) saturate(0) brightness(1.32) contrast(0.62) blur(2px);
    transform: scale(1.012);
  }
  .egg-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0;
    background:
      radial-gradient(circle at 50% 42%, rgba(255, 255, 255, 0.58) 0%, rgba(251, 251, 248, 0.88) 42%, rgba(248, 248, 244, 0.98) 100%);
    transition: opacity 2600ms ease, background-color 2600ms ease;
    overflow: hidden;
    cursor: default;
  }
  body.egg-active .egg-overlay {
    opacity: 1;
    pointer-events: auto;
  }
  .egg-fragment {
    position: absolute;
    left: 0;
    top: 0;
    color: rgba(35, 35, 35, 0.78);
    letter-spacing: 0.22em;
    white-space: nowrap;
    transform: translate3d(0, 14px, 0);
    opacity: 0;
    transition: opacity 1400ms ease, transform 3000ms ease;
    animation: egg-fragment-float 8s ease-in-out infinite alternate;
    user-select: none;
  }
  .egg-fragment.is-ghost {
    color: rgba(45, 45, 45, 0.16);
    letter-spacing: 0.35em;
  }
  .egg-fragment.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  .egg-fragment.is-main {
    color: rgba(25, 25, 25, 0.72);
  }
  .egg-char {
    display: inline-block;
    opacity: 0;
    transform: translate3d(0, 12px, 0);
    filter: blur(3px);
    transition: opacity 700ms ease, transform 1700ms ease, filter 1600ms ease;
  }
  .egg-char.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
    filter: blur(0);
  }
  .egg-click-note {
    position: fixed;
    z-index: 10001;
    pointer-events: none;
    color: rgba(30, 30, 30, 0.68);
    letter-spacing: 0.18em;
    white-space: nowrap;
    opacity: 0;
    transform: translate3d(-50%, -50%, 0);
    transition: opacity 180ms ease;
  }
  .egg-click-note.is-visible {
    opacity: 1;
  }
  .egg-fragment.is-fading {
    opacity: 0;
    transform: translate3d(0, -8px, 0);
  }
  @keyframes egg-fragment-float {
    from { transform: translate3d(0, 0, 0); }
    to { transform: translate3d(0, -10px, 0); }
  }