/* ========================================================================== BNE motion layer Page transitions, scroll reveals, press feedback and image fade-ins, on top of bne-redesign-2026.css. Everything here is progressive: - reveals only hide content once bne-motion.js has marked with .bne-motion, so a failed or blocked script never leaves content invisible; - prefers-reduced-motion switches all of it off (last block in this file). ========================================================================== */ :root { --bne-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --bne-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); } /* ---- Cross-document page transitions (Chrome 126+, Safari 18.2+) -------- */ @view-transition { navigation: auto; } ::view-transition-old(root) { animation: bne-vt-out 180ms var(--bne-ease-out) both; } ::view-transition-new(root) { animation: bne-vt-in 320ms var(--bne-ease-out) both; } @keyframes bne-vt-out { to { opacity: 0; transform: translateY(-6px); } } @keyframes bne-vt-in { from { opacity: 0; transform: translateY(10px); } } /* ---- Scroll reveal ------------------------------------------------------ */ .bne-motion [data-bne-reveal] { opacity: 0; transform: translateY(18px) scale(0.985); transition: opacity 560ms var(--bne-ease-out), transform 720ms var(--bne-ease-out); transition-delay: calc(var(--bne-reveal-i, 0) * 60ms); } .bne-motion [data-bne-reveal].is-in { opacity: 1; transform: none; } /* ---- Images fade in once decoded instead of popping in ------------------ */ .bne-motion img[data-bne-fade] { opacity: 0; transition: opacity 480ms var(--bne-ease-out); } .bne-motion img[data-bne-fade].is-loaded { opacity: 1; } /* ---- Event cards: slow poster zoom and pointer tilt --------------------- */ .bne-card-poster { transition: transform 900ms var(--bne-ease-out), opacity 480ms var(--bne-ease-out); } a.bne-card:hover .bne-card-poster, a.bne-card:focus-visible .bne-card-poster { transform: scale(1.045); } @media (hover: hover) and (pointer: fine) { a.bne-card.is-tilting .bne-card-inner { transform: perspective(900px) rotateX(var(--bne-tilt-x, 0deg)) rotateY(var(--bne-tilt-y, 0deg)) translateY(-3px); transition: transform 120ms linear, border-color var(--bne-med), box-shadow var(--bne-med); } /* Soft light that follows the pointer across the poster. */ a.bne-card .bne-card-inner::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; background: radial-gradient( 420px circle at var(--bne-glare-x, 50%) var(--bne-glare-y, 50%), rgba(255, 255, 255, 0.10), transparent 55% ); transition: opacity 240ms var(--bne-ease-out); } a.bne-card.is-tilting .bne-card-inner::after { opacity: 1; } } /* ---- Press feedback: every tappable thing gives under the finger -------- */ .bne-auth-submit, .bne-auth-ghost, .bne-mobile-cta-btn, .bne-filter-chip, .bne-share-btn, .bne-seat-quickpick-btn, .bne-seat-zoom-btn, .bne-home-empty-reset, .bne-event-related-item, .bne-profile-subnav-item { transition: transform 160ms var(--bne-ease-spring), background-color var(--bne-med, 200ms), border-color var(--bne-med, 200ms), color var(--bne-med, 200ms), opacity var(--bne-med, 200ms); -webkit-tap-highlight-color: transparent; } .bne-auth-submit:active, .bne-auth-ghost:active, .bne-mobile-cta-btn:active, .bne-filter-chip:active, .bne-share-btn:active, .bne-seat-quickpick-btn:active, .bne-seat-zoom-btn:active, .bne-home-empty-reset:active, .bne-profile-subnav-item:active { transform: scale(0.965); } .bne-event-related-item:active { transform: scale(0.985); } a.bne-card:active .bne-card-inner { transform: scale(0.98); transition-duration: 120ms; } /* ---- Navigation progress bar ------------------------------------------- */ .bne-nav-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9999; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); opacity: 0; background: linear-gradient(90deg, transparent, var(--bne-accent, #7d9bbe) 30%, #fff); } .bne-nav-progress.is-active { opacity: 1; animation: bne-nav-progress 2.4s var(--bne-ease-out) forwards; } @keyframes bne-nav-progress { 0% { transform: scaleX(0); } 30% { transform: scaleX(0.45); } 100% { transform: scaleX(0.9); } } /* ---- Mobile web polish -------------------------------------------------- */ @media (max-width: 760px) { html { -webkit-tap-highlight-color: transparent; } body { overscroll-behavior-y: none; } /* Keep fixed bottom bars clear of the home indicator. */ .bne-mobile-cta-inner { padding-bottom: max(12px, env(safe-area-inset-bottom)); } } /* ---- Skeleton shimmer for async regions (add .bne-skeleton) ------------ */ .bne-skeleton { position: relative; overflow: hidden; background: var(--bne-bg-card, #181b21); border-radius: var(--bne-radius-sm, 6px); } .bne-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.06), transparent); animation: bne-skeleton 1.4s ease-in-out infinite; } @keyframes bne-skeleton { to { transform: translateX(100%); } } /* ---- Reduced motion: everything above collapses to instant ------------- */ @media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } .bne-motion [data-bne-reveal], .bne-motion img[data-bne-fade] { opacity: 1 !important; transform: none !important; transition: none !important; } a.bne-card.is-tilting .bne-card-inner, a.bne-card:hover .bne-card-poster { transform: none !important; } .bne-nav-progress, .bne-skeleton::after { animation: none !important; } .bne-auth-submit, .bne-auth-ghost, .bne-mobile-cta-btn, .bne-filter-chip, .bne-share-btn, .bne-seat-quickpick-btn, .bne-seat-zoom-btn, .bne-home-empty-reset, .bne-event-related-item, .bne-profile-subnav-item, a.bne-card .bne-card-inner { transition: none !important; } .bne-auth-submit:active, .bne-auth-ghost:active, .bne-mobile-cta-btn:active, .bne-filter-chip:active, .bne-share-btn:active, .bne-seat-quickpick-btn:active, .bne-seat-zoom-btn:active, .bne-home-empty-reset:active, .bne-event-related-item:active, .bne-profile-subnav-item:active, a.bne-card:active .bne-card-inner { transform: none !important; } }