/* ===== Premium pass: reveals, glow, micro-interactions, ambient accents ===== Everything respects prefers-reduced-motion; reveals only run when modules/reveal.js tags with .js-fx (bots/no-JS see the page fully rendered). */ /* --- scroll reveal with stagger (element indexes set by reveal.js as --i) --- */ .js-fx .fx>*:not(.sheet){opacity:0;transform:translateY(16px)} .js-fx .fx.fx-in>*:not(.sheet){opacity:1;transform:none;transition:opacity .45s ease,transform .55s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0)*50ms)} .js-fx .fx.fx-in .swiper *{transition-delay:0s} /* never delay Swiper internals */ .js-fx .fx.fx-in .sh .tick{animation:tick-grow .6s cubic-bezier(.16,1,.3,1) both} @keyframes tick-grow{from{transform:scaleY(0)}to{transform:scaleY(1)}} /* the divider's tick grows the same way, along its own axis */ .js-fx .fx.fx-in.band::after,.js-fx .band.fx-in::after{animation:band-tick .6s cubic-bezier(.16,1,.3,1) both} @keyframes band-tick{from{transform:scaleX(0)}to{transform:scaleX(1)}} /* --- ambient aurora at the top of the page (very subtle, brand hue) --- */ body{background: radial-gradient(560px 340px at 12% 40px,rgba(65,69,197,.07),transparent 70%) no-repeat, radial-gradient(680px 400px at 88% 140px,rgba(106,111,221,.06),transparent 70%) no-repeat, radial-gradient(420px 300px at 55% 0,rgba(65,69,197,.03),transparent 70%) no-repeat, var(--c-bg)} /* --- live player: ambient glow + breathing LIVE ring --- */ .band--first .player{box-shadow:0 24px 70px -18px rgba(65,69,197,.4),0 10px 30px -12px rgba(30,32,93,.35)} .btn-live{position:relative} .btn-live::after{content:"";position:absolute;inset:-3px;border-radius:inherit;border:2px solid rgba(249,97,66,.5);opacity:0;animation:live-ring 2.4s ease-out infinite;pointer-events:none} @keyframes live-ring{0%{opacity:.7;transform:scale(.96)}70%{opacity:0;transform:scale(1.12)}100%{opacity:0}} .topbar .btn-live::after{border-color:rgba(255,255,255,.55)} /* --- buttons: gradient, sheen sweep, press feedback --- */ .btn-primary{position:relative;overflow:hidden;background:linear-gradient(120deg,var(--c-primary),var(--c-primary-light));box-shadow:0 8px 22px -8px rgba(65,69,197,.5);transition:transform .18s,box-shadow .18s} .btn-primary:hover{background:linear-gradient(120deg,var(--c-primary-dark),var(--c-primary));transform:translateY(-1px);box-shadow:0 12px 28px -8px rgba(65,69,197,.55)} .btn-primary:active{transform:translateY(0) scale(.97)} .btn-primary::after{content:"";position:absolute;top:0;bottom:0;left:-70%;width:45%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-18deg);transition:left .5s ease;pointer-events:none} .btn-primary:hover::after{left:120%} .btn-ghost,.chip{transition:transform .16s,background .2s,border-color .2s,color .2s} .btn-ghost:hover{transform:translateY(-1px)} .chip:active,.btn-ghost:active{transform:scale(.96)} /* --- cards: deeper hover, image zoom everywhere --- */ a.card{transition:transform .22s cubic-bezier(.16,1,.3,1),box-shadow .25s,border-color .2s} a.card:hover{transform:translateY(-4px);box-shadow:0 18px 44px -14px rgba(30,32,93,.22);border-color:color-mix(in srgb,var(--c-primary) 25%,var(--c-line-2))} .ncard__media,.hcard__media,.lrow__media,.wcard__media{overflow:hidden} .ncard__media img,.hcard__media img,.lrow__media img,.wcard__media img{transition:transform .6s cubic-bezier(.16,1,.3,1)} a.card:hover .ncard__media img,a.card:hover .hcard__media img,a.card:hover .lrow__media img,a.card:hover .wcard__media img{transform:scale(1.06)} a.card:hover .kick{letter-spacing:.14em} .kick{transition:letter-spacing .25s} /* --- shimmer on empty media placeholders + progress bars --- */ .ph:not(:has(img))::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.5) 50%,transparent 70%);background-size:220% 100%;animation:shimmer 2.2s linear infinite} .ph--dark:not(:has(img))::after{background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.08) 50%,transparent 70%);background-size:220% 100%} @keyframes shimmer{from{background-position:180% 0}to{background-position:-40% 0}} .prog span{position:relative;overflow:hidden} [data-onair-prog] span::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);animation:shimmer 1.8s linear infinite;background-size:220% 100%} [data-onair-prog] span{position:relative;overflow:hidden} /* --- breaking: badge pulse --- */ .badge-breaking{animation:breathe 2.6s ease-in-out infinite} @keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}} /* --- branded selection / focus / scrollbar --- */ /* selection / focus ring: defined once in tokens.css */ html{scrollbar-color:var(--c-primary) var(--c-bg);scrollbar-width:thin} ::-webkit-scrollbar{width:12px;height:10px} ::-webkit-scrollbar-track{background:var(--c-bg)} ::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--c-primary),var(--c-primary-light));border-radius:var(--r-xs);border:3px solid var(--c-bg)} ::-webkit-scrollbar-thumb:hover{background:var(--c-primary-dark)} ::-webkit-scrollbar-corner{background:var(--c-bg)} .tl-wrap::-webkit-scrollbar{height:9px} /* --- back-to-top pill --- */ .totop{position:fixed;right:24px;bottom:24px;z-index:60;width:46px;height:46px;border-radius:50%;border:0;background:#fff;color:var(--c-primary);box-shadow:0 12px 30px -8px rgba(30,32,93,.35);display:grid;place-items:center;padding:0;opacity:0;transform:translateY(14px);pointer-events:none;transition:opacity .25s,transform .25s} .totop svg{width:19px;height:19px} .totop.is-visible{opacity:1;transform:none;pointer-events:auto} .totop:hover{background:var(--c-primary);color:#fff} @media (max-width:991.98px){.totop{display:none}} /* phones have the tab bar */ body:has(.player.is-docked) .totop{right:468px} /* keep clear of the docked player */ /* footer watermark: footer.css owns it */ @media (prefers-reduced-motion:reduce){ .js-fx .fx>*:not(.sheet){opacity:1;transform:none} .btn-live::after,.ph:not(:has(img))::after,.prog span::after,.badge-breaking{animation:none} .btn-primary::after{display:none} }