feat(mailbox): Implement cinematic UX and user tiers

- Added Spatie roles (free, pro, enterprise, admin) and access scopes
- Implemented delayed, cinematic mailbox provisioning animation
- Fixed GSAP and SVG collision issues on creation overlay
- Improved component sync with livewire refresh
- Added feature tests for tier systems and fixed RegistrationTest

resources/views/components/bento/logo.blade.php

@@ -24,15 +24,16 @@
             <!-- Subtle Mesh Background -->
             <div class="absolute inset-0 bg-[radial-gradient(circle_at_50%_0%,rgba(236,72,153,0.1),transparent)]"></div>
             
+            @php $gradientId = 'logo-gradient-' . Str::random(6); @endphp
             <!-- Stylized "Z" / Envelope Fold -->
             <svg class="{{ $dimensions['icon'] }} text-transparent" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                 <defs>
-                    <linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+                    <linearGradient id="{{ $gradientId }}" x1="0%" y1="0%" x2="100%" y2="100%">
                         <stop offset="0%" style="stop-color:#ec4899" />
                         <stop offset="100%" style="stop-color:#be185d" />
                     </linearGradient>
                 </defs>
-                <path d="M4 19L20 5M4 19H14M20 5H10" stroke="url(#logo-gradient)" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
+                <path d="M4 19L20 5M4 19H14M20 5H10" stroke="url(#{{ $gradientId }})" stroke-width="3.5" stroke-linecap="round" stroke-linejoin="round"/>
                 <path d="M4 5L20 19" stroke="white" stroke-opacity="0.1" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
             </svg>