/* Live effects: aurora canvas, tilt cards, beat rings, kinetic type, glows. */
.fx-aurora { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; pointer-events: none; }
.fx-stars { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; pointer-events: none; opacity: 0.8; }
.has-fx { position: relative; isolation: isolate; }
.has-fx > *:not(canvas) { position: relative; z-index: 2; }
/* Decorative glow stays a background layer: it must never take flex space beside the phone. */
.has-fx > .glow-stage { position: absolute; z-index: 0; }

.tilt { transform-style: preserve-3d; will-change: transform; position: relative; }
.tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; mix-blend-mode: screen; }

.kinetic .kw { display: inline-block; opacity: 0; transform: translateY(24px) rotateX(-30deg); animation: kw .7s var(--ease) forwards; transform-origin: 50% 100%; }
@keyframes kw { to { opacity: 1; transform: none; } }

.beat-ring { position: absolute; inset: -6px; border-radius: inherit; border: 2px solid rgba(182, 255, 59, 0.7); pointer-events: none; animation: beat-ring .6s ease-out forwards; z-index: 6; }
.beat-ring.strong { border-color: rgba(255, 79, 163, 0.9); border-width: 3px; animation: beat-ring-strong .9s ease-out forwards; }
@keyframes beat-ring { from { opacity: 0.9; transform: scale(1); } to { opacity: 0; transform: scale(1.06); } }
@keyframes beat-ring-strong { from { opacity: 1; transform: scale(1); box-shadow: 0 0 40px rgba(255,79,163,0.5); } to { opacity: 0; transform: scale(1.12); box-shadow: 0 0 0 rgba(255,79,163,0); } }
.phone-frame.on-beat { animation: beat-bump .18s var(--spring); }
@keyframes beat-bump { 0% { transform: scale(1); } 40% { transform: scale(1.012); } 100% { transform: scale(1); } }
.phone-frame.on-drop::after { content: ''; position: absolute; inset: 0; background: rgba(255,255,255,0.22); animation: drop-flash .32s ease-out forwards; pointer-events: none; z-index: 5; }
@keyframes drop-flash { from { opacity: 1; } to { opacity: 0; } }

.glow-stage { position: absolute; width: 70%; height: 60%; left: 15%; top: 20%; border-radius: 50%; background: radial-gradient(closest-side, rgba(139,108,255,0.22), rgba(255,79,163,0.10) 55%, transparent 72%); z-index: 0; pointer-events: none; }

.magnetic { transition: transform .2s var(--spring); }
.stagger > * { animation: rise .55s var(--ease) both; }
.stagger > *:nth-child(1) { animation-delay: 0ms; } .stagger > *:nth-child(2) { animation-delay: 45ms; } .stagger > *:nth-child(3) { animation-delay: 90ms; }
.stagger > *:nth-child(4) { animation-delay: 135ms; } .stagger > *:nth-child(5) { animation-delay: 180ms; } .stagger > *:nth-child(6) { animation-delay: 225ms; }
.stagger > *:nth-child(7) { animation-delay: 270ms; } .stagger > *:nth-child(8) { animation-delay: 315ms; } .stagger > *:nth-child(n+9) { animation-delay: 360ms; }

.grain::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.05; z-index: 1; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)' opacity='0.6'/></svg>"); }

.holo { position: relative; overflow: hidden; }
.holo::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, rgba(139,108,255,0.55), rgba(255,79,163,0.45) 55%, rgba(255,138,61,0.35)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; }

.ai-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.anim-pop { animation: cap-pop .32s var(--spring) both; }
.anim-rise { animation: cap-rise .34s var(--ease) both; }
.anim-fade { animation: cap-fade .3s ease both; }
.anim-none { animation: none; }
.tl-canvas-wrap { position: relative; flex: 1; min-height: 0; }
.float { animation: float 7s ease-in-out infinite; }
.pulse-dot { position: relative; }
.pulse-dot::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid currentColor; opacity: 0; animation: ring 1.6s ease-out infinite; }
@keyframes ring { from { opacity: 0.8; transform: scale(0.6); } to { opacity: 0; transform: scale(1.6); } }
.tab-body > * { animation: rise .35s var(--ease) both; }
.shot-pop { animation: pop .3s var(--spring) both; }
@keyframes pop { from { opacity: 0; transform: scale(0.94); } to { opacity: 1; transform: none; } }
.hidden-mobile { display: none !important; }
@media (min-width: 1101px) { .hidden-mobile { display: flex !important; } }