/* * premium-ux.css — Ticket Store premium scroll & interaction experience * Axes: Scroll Reveal · Hero Entrance · Navbar Compact · 3D Card Hover · Filter Counter */ /* ───────────────────────────────────────────────── 1. SCROLL REVEAL On n'applique l'invisibilité que si JS est chargé (la classe .pux-ready est ajoutée par premium-ux.js avant de brancher l'observer) ───────────────────────────────────────────────── */ .pux-ready [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1), transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); } [data-reveal] { /* Etat visible par défaut (avant que JS ajoute .pux-ready sur ) */ } .pux-ready [data-reveal].is-revealed { opacity: 1; transform: none; } /* Stagger delays via data-delay attribute */ .pux-ready [data-reveal][data-delay="1"] { transition-delay: 0.08s; } .pux-ready [data-reveal][data-delay="2"] { transition-delay: 0.15s; } .pux-ready [data-reveal][data-delay="3"] { transition-delay: 0.22s; } .pux-ready [data-reveal][data-delay="4"] { transition-delay: 0.30s; } .pux-ready [data-reveal][data-delay="5"] { transition-delay: 0.38s; } .pux-ready [data-reveal][data-delay="6"] { transition-delay: 0.46s; } /* Cards that reveal from scale */ .pux-ready [data-reveal="card"] { transform: translateY(20px) scale(0.97); } .pux-ready [data-reveal="card"].is-revealed { transform: none; } /* ───────────────────────────────────────────────── 2. HERO CINEMATIC ENTRANCE ───────────────────────────────────────────────── */ @keyframes pux-hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } @keyframes pux-hero-fade { from { opacity: 0; } to { opacity: 1; } } .pux-hero-eyebrow { animation: pux-hero-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both; } .pux-hero-title { animation: pux-hero-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both; } .pux-hero-meta { animation: pux-hero-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both; } .pux-hero-cta { animation: pux-hero-in 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; } .pux-hero-poster { animation: pux-hero-fade 0.9s ease 0.2s both; } /* ───────────────────────────────────────────────── 3. NAVBAR — COMPACT GLASS ON SCROLL ───────────────────────────────────────────────── */ .front-nav { transition: background 0.35s ease, box-shadow 0.35s ease, padding-top 0.35s ease, padding-bottom 0.35s ease; } .front-nav--compact { background: rgba(255, 255, 255, 0.88) !important; backdrop-filter: blur(20px) !important; -webkit-backdrop-filter: blur(20px) !important; box-shadow: 0 2px 24px rgba(0, 0, 0, 0.09) !important; } /* ───────────────────────────────────────────────── 4. 3D CARD HOVER ───────────────────────────────────────────────── */ .front-event-card { transition: box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.12s linear; will-change: transform; } .front-event-card:hover { box-shadow: 0 20px 56px rgba(0, 0, 0, 0.13), 0 4px 16px rgba(0, 0, 0, 0.07); } /* ───────────────────────────────────────────────── 5. FILTER COUNTER BOUNCE ANIMATION ───────────────────────────────────────────────── */ @keyframes pux-count-bounce { 0% { transform: scale(1.5); opacity: 0.4; } 60% { transform: scale(0.9); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } .pux-count-bounce { display: inline-block; animation: pux-count-bounce 0.4s cubic-bezier(0.22, 1, 0.36, 1) both; } /* ───────────────────────────────────────────────── MISC — Smooth filter card transitions ───────────────────────────────────────────────── */ .front-events-filter-card, .front-home-filter-card { transition: opacity 0.22s ease, box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1), transform 0.12s linear; } /* Cards already revealed stay visible when re-shown after filter toggle */ .pux-ready .front-events-filter-card.is-revealed:not(.hidden), .pux-ready .front-home-filter-card.is-revealed:not(.hidden) { opacity: 1; transform: none; } /* prefers-reduced-motion : désactive toutes les animations */ @media (prefers-reduced-motion: reduce) { .pux-ready [data-reveal], .pux-ready [data-reveal].is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } .pux-hero-eyebrow, .pux-hero-title, .pux-hero-meta, .pux-hero-cta, .pux-hero-poster { animation: none !important; opacity: 1 !important; transform: none !important; } } /* Stat number reveal animation */ @keyframes pux-stat-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } } .front-stat-num { animation: pux-stat-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both; animation-play-state: paused; } .front-stats-bar.is-revealed .front-stat-num { animation-play-state: running; } .front-stats-bar .front-stat-item:nth-child(1) .front-stat-num { animation-delay: 0.0s; } .front-stats-bar .front-stat-item:nth-child(2) .front-stat-num { animation-delay: 0.1s; } .front-stats-bar .front-stat-item:nth-child(3) .front-stat-num { animation-delay: 0.2s; } .front-stats-bar .front-stat-item:nth-child(4) .front-stat-num { animation-delay: 0.3s; }