/* =================================================================== pepe.fail — motion layer Loaded AFTER styles.css (and after glass.css). Rules of this file: - only transform and opacity are animated; - state changes ease in over ~250ms rather than snapping; - nothing loops, nothing moves without a user action (the single exception is the loading skeleton); - the pre-reveal state (opacity: 0) is NEVER set here on its own: it only applies together with the .is-revealing class that anim.js adds, so content stays visible if the script fails. =================================================================== */ :root { --ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); /* soft settle: slower tail, so hovers read as gliding rather than snapping */ --ease-soft: cubic-bezier(0.25, 0.6, 0.2, 1); --dur-fast: 200ms; --dur-base: 260ms; --dur-reveal: 300ms; --dur-page: 260ms; } /* =========================== PAGE TRANSITION =========================== anim.js sets .pg-ready on as soon as it runs, and .pg-leaving just before navigating away. Without the script nothing is hidden, so a JS failure can never leave a blank page. */ html.pg-anim body { opacity: 0.001; } html.pg-anim.pg-ready body { opacity: 1; transform: none; transition: opacity var(--dur-page) var(--ease-soft), transform var(--dur-page) var(--ease-soft); } html.pg-anim.pg-leaving body { opacity: 0.001; transition: opacity 190ms var(--ease-soft), transform 190ms var(--ease-soft); } /* =========================== SCROLL REVEAL =========================== .is-revealing : set by anim.js right before observing the element. .is-revealed : set when the element enters the scroll container. Both classes are removed once the transition is over, which leaves the element in its plain, untouched state. */ [data-reveal].is-revealing { opacity: 0; transform: translateY(8px); transition: opacity var(--dur-reveal) var(--ease-out), transform var(--dur-reveal) var(--ease-out); transition-delay: var(--reveal-delay, 0ms); } [data-reveal].is-revealing.is-revealed { opacity: 1; transform: none; } /* =========================== GAME CARDS =========================== Replaces the `transition: 0.2s` shorthand (which resolves to `transition: all`) with an explicit property list. */ .game { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .game:hover, .game:focus-visible { transform: translateY(-4px); border-color: var(--gold); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 200, 40, 0.28); } /* The icon leans in slightly with the card. */ .game__icon { transition: transform var(--dur-base) var(--ease-soft); } .game:hover .game__icon, .game:focus-visible .game__icon { transform: scale(1.06); } /* Poster tiles: the artwork breathes instead of the icon. */ .game__poster { transition: transform 320ms var(--ease-soft); } .game:hover .game__poster, .game:focus-visible .game__poster { transform: scale(1.04); } /* The caption drifts left as the card lifts. The provider line trails the title slightly, which is what makes the move read as motion rather than as a jump. */ .game__name, .game__prov { transition: transform 300ms var(--ease-soft), color 300ms var(--ease-soft); } .game__prov { transition-delay: 40ms; } .game:hover .game__name, .game:focus-visible .game__name { transform: translateX(-4px); color: var(--gold); } .game:hover .game__prov, .game:focus-visible .game__prov { transform: translateX(-4px); } .game:active { transform: translateY(-1px); } .game__play { transition: opacity var(--dur-fast) var(--ease-out); } .game:focus-visible .game__play { opacity: 1; } /* The halo behind the icon is a static background: it must not react to hover, and it never pulses. */ .game__art::after { transition: none; } /* =========================== BUTTONS =========================== Hover eases in over ~260ms; the press is deliberately quicker, because a click has to feel answered immediately. */ .btn { transition: transform var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft), background-color var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft), filter var(--dur-base) var(--ease-soft); } .btn:hover { transform: translateY(-2px); } .btn:active { transform: translateY(1px); transition-duration: 80ms; } .icon-btn, .section__nav button, .nav__item, .section__all, .sfoot__col a { transition: transform var(--dur-base) var(--ease-soft), background-color var(--dur-base) var(--ease-soft), border-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft); } .icon-btn:hover, .section__nav button:hover { transform: translateY(-2px); } .icon-btn:active, .section__nav button:active { transform: translateY(1px); transition-duration: 80ms; } /* Section tabs: the icon cross-fades into the padlock rather than popping. */ .seg__tab { transition: background-color var(--dur-base) var(--ease-soft), color var(--dur-base) var(--ease-soft), box-shadow var(--dur-base) var(--ease-soft); } .seg__ico, .seg__lock { transition: opacity var(--dur-base) var(--ease-soft); } /* Menu rows and footer links slide a touch on hover, same language as the game captions. */ .nav__item:hover { transform: translateX(2px); } .sfoot__col a:hover { transform: translateX(2px); } .section__all:hover { transform: translateX(2px); } /* =========================== PANELS =========================== Sidebar figures and the bottom CTA answer the pointer too. */ .stat, .promo-card, .cta-strip { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out); } .stat:hover, .promo-card:hover { transform: translateY(-2px); border-color: var(--line-2); } .cta-strip:hover { border-color: rgba(255, 200, 40, 0.28); } /* =========================== OTHER SURFACES =========================== Same treatment: explicit properties instead of `all`. */ .hero-card, .pcard, .vip, .tile { transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); } .hero-card:hover, .pcard:hover { transform: translateY(-3px); } .vip:hover, .tile:hover { transform: translateY(-2px); } .hero-card:active, .pcard:active, .vip:active, .tile:active { transform: translateY(-1px); } /* Controls: colour/border feedback only, no movement. */ .nav__item, .icon-btn, .seg button, .bet__tabs button, .chips button, .filters button, .section__nav button, .input-wrap .mini, .section__all { transition: color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out); } .nav__item svg { transition: color var(--dur-fast) var(--ease-out); } /* =========================== FOCUS =========================== */ a:focus-visible, button:focus-visible, input:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: var(--radius-sm); } /* =========================== LOADING =========================== */ .is-loading { background: var(--bg-700); border-color: transparent; box-shadow: none; color: transparent; pointer-events: none; user-select: none; animation: pepe-skeleton 1.4s ease-in-out infinite; } .is-loading > * { visibility: hidden; } /* Standalone placeholder block (text line, thumbnail, panel...). */ .skeleton { display: block; background: var(--bg-700); border-radius: var(--radius-sm); animation: pepe-skeleton 1.4s ease-in-out infinite; } .skeleton--text { height: 12px; margin-bottom: 8px; } .skeleton--title { height: 20px; margin-bottom: 12px; } .skeleton--card { aspect-ratio: 3 / 4; border-radius: var(--radius); } @keyframes pepe-skeleton { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } } /* =========================== REDUCED MOTION =========================== Everything becomes static, layout untouched. */ @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal].is-revealing, [data-reveal].is-revealing.is-revealed { opacity: 1 !important; transform: none !important; transition: none !important; animation: none !important; } .game, .game:hover, .game:focus-visible, .game:active, .game__play, .game__icon, .game:hover .game__icon, .game__poster, .game:hover .game__poster, .game__name, .game__prov, .game:hover .game__name, .game:hover .game__prov, .nav__item:hover, .sfoot__col a, .sfoot__col a:hover, .section__all:hover, .seg__tab, .seg__ico, .seg__lock, .btn, .btn:hover, .btn:active, .icon-btn:hover, .icon-btn:active, .section__nav button:hover, .section__nav button:active, .stat, .stat:hover, .promo-card, .promo-card:hover, .cta-strip, .cta-strip:hover, .hero-card, .hero-card:hover, .pcard, .pcard:hover, .vip, .vip:hover, .tile, .tile:hover, .nav__item, .icon-btn, .seg button, .bet__tabs button, .chips button, .filters button, .section__nav button, .input-wrap .mini, .section__all { transform: none !important; transition: none !important; } .is-loading, .skeleton, .live-dot, .win-card { animation: none !important; opacity: 1 !important; } }