/* ============================================================
   ERA TUNNEL  —  PROTOTYPE
   Shared "dive through" warp transition played when travelling
   between eras of computing (Win95 → Win11 → …). The eras
   themselves live in their own modules; this is just the wormhole.
   ============================================================ */

#eraWarp{
  position:fixed; inset:0; z-index:9500;
  background:#000; opacity:0; pointer-events:none;
}
/* fade to black → hold → fade back in (the swap happens at full black) */
#eraWarp.active{ animation:era-fade .86s ease both; }
body.sml-system-running{ overflow:hidden!important; overscroll-behavior:none; }
@keyframes era-fade{
  0%{ opacity:0; }
  46%{ opacity:1; }
  56%{ opacity:1; }
  100%{ opacity:0; }
}

/* shared affordance chips reused across eras */
.era-dive-hint{
  position:absolute; left:50%; transform:translateX(-50%);
  font-family:"Segoe UI",system-ui,sans-serif; font-size:12px; letter-spacing:.14em;
  color:#eafff4; text-shadow:0 1px 4px rgba(0,0,0,.8);
  opacity:.9; pointer-events:none; z-index:40;
  display:flex; align-items:center; gap:8px;
}
.era-dive-hint.bottom{ bottom:64px; }
.era-dive-hint.top{ top:22px; }
.era-dive-hint.clickable{ pointer-events:auto; cursor:pointer; }
.era-dive-hint.clickable:hover{ opacity:1; text-shadow:0 0 10px rgba(150,240,255,.7); }
.era-dive-hint .chev{ animation:era-chev 1.4s ease-in-out infinite; }
@keyframes era-chev{ 0%,100%{ transform:translateY(0); opacity:.55 } 50%{ transform:translateY(3px); opacity:1 } }