/* =====================================================================
   Insh Community — hidden easter-egg animations (standalone stylesheet)
   Everything is namespaced under #insh-egg (plus one .egg-armed cursor
   hint), so nothing here leaks into the host site's styling.
   Pairs with insh-easter-egg.js. See INTEGRATION.md.
   ===================================================================== */
#insh-egg { position: fixed; inset: 0; z-index: 9999; overflow: hidden; pointer-events: none; opacity: 0; }
#insh-egg .egg-msg { position: absolute; left: 50%; bottom: 16%; transform: translate(-50%, 20px); text-align: center; opacity: 0; pointer-events: none; padding: 0 1.2rem; width: min(92vw, 560px); }
#insh-egg .egg-msg h2 { font-family: var(--display, Georgia, "Times New Roman", serif); color: #fff; font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 500; margin: 0 0 .4rem; text-shadow: 0 2px 30px rgba(0,0,0,.45); }
#insh-egg .egg-msg p { color: #fdf6e8; font-size: clamp(1rem, 2.4vw, 1.2rem); margin: 0; text-shadow: 0 1px 16px rgba(0,0,0,.5); }
#insh-egg .egg-skip { position: fixed; right: 16px; bottom: 14px; pointer-events: auto; opacity: 1; background: rgba(0,0,0,.55); color: #fff; border: 1px solid rgba(255,255,255,.6); font: 600 .85rem/1 var(--body, system-ui, -apple-system, "Segoe UI", sans-serif); letter-spacing: .04em; padding: .5rem .85rem; border-radius: 999px; cursor: pointer; }
#insh-egg .egg-night-sky { position: absolute; inset: 0; background: #0a0612; opacity: 0; }
#insh-egg .egg-spot { position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; mix-blend-mode: screen; filter: blur(8px); opacity: 0; pointer-events: none; transform-origin: 50% 0%; }
#insh-egg .egg-spot.s1 { background: radial-gradient(circle, rgba(255,60,172,.55) 0%, rgba(255,60,172,0) 62%); left: 10%; top: -36vmax; }
#insh-egg .egg-spot.s2 { background: radial-gradient(circle, rgba(34,211,238,.5) 0%, rgba(34,211,238,0) 62%); left: 60%; top: -38vmax; }
#insh-egg .egg-spot.s3 { background: radial-gradient(circle, rgba(255,210,63,.5) 0%, rgba(255,210,63,0) 62%); left: 36%; top: -40vmax; }
#insh-egg .egg-spot.s4 { background: radial-gradient(circle, rgba(124,255,107,.42) 0%, rgba(124,255,107,0) 62%); left: 78%; top: -34vmax; }
#insh-egg .egg-floor { position: absolute; left: 50%; bottom: -8%; width: 150%; height: 52%; transform: translateX(-50%) perspective(640px) rotateX(64deg); display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 1fr; gap: 5px; padding: 5px; border-radius: 8px; background: rgba(255, 236, 200, .22); box-shadow: 0 -6px 60px rgba(255, 214, 150, .15), inset 0 0 24px rgba(255, 236, 200, .15); opacity: 0; }
#insh-egg .egg-tile { background: #14101f; border-radius: 3px; transition: background .18s ease, box-shadow .18s ease; }
#insh-egg .egg-ball-wrap { position: absolute; left: 50%; top: 0; transform: translateX(-50%); opacity: 0; }
#insh-egg .egg-ball-string { width: 2px; height: 9vh; margin: 0 auto; background: linear-gradient(#888,#222); }
#insh-egg .egg-ball { width: 84px; height: 84px; border-radius: 50%; margin: 0 auto; background: repeating-conic-gradient(from 0deg, #e9eefc 0deg 14deg, #aab6d6 14deg 28deg), radial-gradient(circle at 34% 30%, #ffffff, #9aa6c8); background-blend-mode: overlay; box-shadow: 0 0 40px 8px rgba(180,200,255,.5), inset -8px -10px 22px rgba(20,24,48,.6); }
#insh-egg .egg-ball-facets { position: absolute; inset: 0; border-radius: 50%; background-image: linear-gradient(rgba(255,255,255,.18) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.18) 1px, transparent 1px); background-size: 14px 14px; mix-blend-mode: overlay; }
#insh-egg .egg-dot { position: absolute; width: 10px; height: 10px; border-radius: 50%; mix-blend-mode: screen; opacity: 0; filter: blur(.5px); }
#insh-egg .egg-cat { position: absolute; bottom: 0; transform-origin: 50% 100%; opacity: 0; will-change: transform; }
#insh-egg .egg-mute { right: 96px; }
#insh-egg .egg-vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(120% 90% at 50% 42%, rgba(0,0,0,0) 40%, rgba(0,0,0,.55) 100%); }
#insh-egg .egg-glit { position: absolute; border-radius: 2px; opacity: .95; mix-blend-mode: screen; pointer-events: none; }
#insh-egg .egg-racer { position: absolute; pointer-events: none; will-change: transform; }
#insh-egg .egg-puff { position: absolute; width: 10px; height: 6px; border-radius: 50%; background: rgba(216,203,166,.5); pointer-events: none; }
#insh-egg .egg-truss { position: absolute; top: 0; left: 0; right: 0; height: 14px; background: linear-gradient(#3a3a44, #17171d); box-shadow: 0 2px 12px rgba(0,0,0,.6); opacity: 0; }
#insh-egg .egg-beam { position: absolute; top: 10px; width: 170px; height: 76vh; margin-left: -85px; transform-origin: 50% 0%; mix-blend-mode: screen; opacity: 0; pointer-events: none; clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); }
#insh-egg .egg-blackout { position: absolute; inset: 0; background: #000; opacity: 0; z-index: 500; }
#insh-egg .egg-spotcone { position: absolute; top: 0; width: 280px; height: 100vh; margin-left: -140px; transform-origin: 50% 0%; z-index: 520; opacity: 0; pointer-events: none; mix-blend-mode: screen; clip-path: polygon(46% 0, 54% 0, 92% 100%, 8% 100%); background: linear-gradient(180deg, rgba(255,240,200,.95), rgba(255,240,200,.12) 85%, transparent); }
#insh-egg .egg-skip { z-index: 1000; }