/* =========================================================
     ROOMBOOM floating egg — drop-in overlay
     Upload these 13 files into the SAME folder as this page
     (or set ASSET_BASE below to point at a subfolder):
       Frame_00.png  Frame_01.png
       Frame_02_A.png Frame_02_B.png Frame_02_C.png Frame_02_D.png
       Frame_02_E.png Frame_02_F.png Frame_02_G.png
       Frame_03.png  Frame_04.png  Frame_05.png  Frame_06.png
     ========================================================= */

  .rb-stage{
    position:fixed; inset:0;          /* floats over the whole page          */
    z-index:60;
    pointer-events:none;              /* page stays clickable; only the egg isn't */
    overflow:hidden;
    background:transparent;           /* "empty" — your white site shows through */
  }
  .rb-wrap{
    position:absolute; left:50%; top:50%;
    width:clamp(200px, 24vmin, 340px);
    aspect-ratio:847/707;             /* keeps box sized before the PNG loads */
    transform:translate(-50%,-50%);
    will-change:transform;
    opacity:0;                        /* hidden until it "appears"            */
    transition:opacity .6s ease, filter .6s ease;
    line-height:0;
  }
  .rb-wrap.rb-in{ opacity:1; }
  .rb-wrap img{
    display:block; width:100%; height:100%;
    object-fit:contain;
    image-rendering:pixelated; image-rendering:crisp-edges;
    pointer-events:none; -webkit-user-drag:none; user-select:none;
  }
  /* tight-ish interactive zone over the egg (not the whole transparent box) */
  .rb-hit{
    position:absolute; left:50%; top:52%;
    width:58%; height:70%;
    transform:translate(-50%,-50%);
    pointer-events:auto; cursor:pointer;
    -webkit-tap-highlight-color:transparent; touch-action:manipulation;
  }
  @media (prefers-reduced-motion: reduce){ .rb-wrap{ transition:opacity .4s ease; } }

.rb-wrap:not(.rb-in){visibility:hidden}.rb-hit:focus-visible{outline:2px solid #111;outline-offset:4px;border-radius:50%}