/* Tapp The Button - the atmosphere pass (see js/aaa.js). Loaded last. Adds only. */

/* the air: shafts, pollen, flare, cloud shadows - over the world, under the HUD */
#aaa-air { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
#aaa-tint { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 2s; mix-blend-mode: multiply; }
#aaa-tint.night { background: linear-gradient(180deg, #2a3a7a 0%, #4a5aa0 45%, #6a8a9a 54%, #5a8a6a 100%); }
#aaa-tint.dusk { background: linear-gradient(180deg, #ffb070 0%, #ffd0a0 44%, #ffe0c0 54%, #d8d8a0 100%); mix-blend-mode: multiply; }
#aaa-stars { position: absolute; inset: 0 0 50% 0; z-index: 1; pointer-events: none; opacity: 0; transition: opacity 2s; mix-blend-mode: screen;
  background-image: radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 32%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 41% 12%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 26%, #fff 50%, transparent 51%), radial-gradient(1.3px 1.3px at 66% 9%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 74% 36%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 88% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 8% 44%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 35% 48%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 93% 40%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 20% 6%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 60% 42%, #fff 50%, transparent 51%);
  animation: twinkle 4s ease-in-out infinite alternate; }
@keyframes twinkle { from { filter: brightness(.8); } to { filter: brightness(1.3); } }

/* the press: a one-frame kick of the whole widget */
#app.aaa-shake { animation: aaa-shake .16s ease-out; }
@keyframes aaa-shake { 0% { transform: translate(0, 2px) scale(1.004); } 40% { transform: translate(-1px, -1px); } 100% { transform: none; } }

/* parallax: the sky drifts least, the props most, all from the pointer */
#app { --px: 0; --py: 0; }
#app .scene { transform: translate(calc(var(--px) * -6px), calc(var(--py) * -3px)); }
#app #scene-gl { transform: translate(calc(var(--px) * -5px), calc(var(--py) * -3px)) scale(1.02); }
#app #decor-layer { transform: translate(calc(var(--px) * 5px), calc(var(--py) * 3px)); }
#app .side-btn, #app .crawl-door { translate: calc(var(--px) * 8px) calc(var(--py) * 4px); }

/* depth: a soft vignette and a glossy bezel on the widget */
#app::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 100% at 50% 40%, transparent 60%, rgba(20, 30, 40, .22) 100%); mix-blend-mode: multiply; }
#app { box-shadow: 0 30px 60px rgba(0, 0, 0, .35), 0 10px 26px rgba(0, 0, 0, .22), inset 0 1px 0 rgba(255, 255, 255, .5); }

/* the HUD: glass with a specular edge, buttons with a lit top */
#app .chip, #app .adslot, #app .modes, #app .giveaway-bar, #app .status-strip {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55) inset, 0 -1px 0 rgba(0, 0, 0, .08) inset, 0 6px 18px rgba(0, 0, 0, .18);
}
#app .mode-btn.is-on, #app .primary-btn, #app .buy-btn, #app .mini-btn, #app .adslot-cta {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .35) 0%, rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, .06) 100%);
  background-blend-mode: overlay;
}
#app .primary-btn, #app .buy-btn, #app .adslot-cta, #app .mini-btn { transition: transform .08s ease, filter .08s ease; }
#app .primary-btn:active, #app .buy-btn:active, #app .adslot-cta:active, #app .mini-btn:active { transform: translateY(2px) scale(.98); filter: brightness(.95); }
#app .chip--premium b, #app .chip--coins b { text-shadow: 0 1px 0 rgba(255, 255, 255, .5); }

/* Tapp himself: a warmer, breathing glow under the disc */
#app .tapp-glow { animation: aaa-breathe 3.4s ease-in-out infinite; }
@keyframes aaa-breathe { 0%, 100% { filter: brightness(1) saturate(1); } 50% { filter: brightness(1.18) saturate(1.15); } }

/* overlays: a deeper blur and a lift for the sheet */
#app .overlay { backdrop-filter: blur(8px) saturate(1.2); -webkit-backdrop-filter: blur(8px) saturate(1.2); }
#app .overlay.open .panel { box-shadow: 5px 6px 0 var(--shadow), inset 0 2px 0 rgba(255, 255, 255, .7), 0 30px 60px rgba(0, 0, 0, .35); }

/* the intro column: the title catches light */
.tapp-intro .intro-title { background: linear-gradient(180deg, #ffffff 0%, #dff3ff 55%, #9ad0ea 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .35)); }
.tapp-intro .intro-kicker { text-shadow: 0 0 12px rgba(255, 255, 255, .25); }

@media (prefers-reduced-motion: reduce) {
  #aaa-stars, #app .tapp-glow { animation: none; }
  #app .scene, #app #scene-gl, #app #decor-layer { transform: none; } #app .side-btn, #app .crawl-door { translate: none; }
}