/* Remandly motion layer for site.css pages (guides, campaign) and the file page. One easing. Off under reduced motion. */
:root { --m-ease: cubic-bezier(.2,.7,.2,1); }
.page-rain { position: fixed; left: 0; right: 0; top: 0; height: 72vh; z-index: -1; pointer-events: none; opacity: .45; background: #08090A url('/assets/motion/rain.webp') center / cover no-repeat; -webkit-mask: linear-gradient(#000 35%, transparent); mask: linear-gradient(#000 35%, transparent); }
.page-rain video { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 700ms var(--m-ease); }
.page-rain video.is-on { opacity: 1; }
body { position: relative; }
.guide-head { margin: 0 0 20px; aspect-ratio: 21 / 9; border-radius: 16px; overflow: hidden; background: #111214; }
.guide-head img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bloom { position: absolute; left: 0; right: 0; top: 0; height: 360px; z-index: -1; pointer-events: none; background: url('/assets/motion/bloom-640.webp') center top / cover no-repeat; opacity: .5; -webkit-mask: linear-gradient(#000 25%, transparent); mask: linear-gradient(#000 25%, transparent); }
@media (min-width: 700px) { .bloom { background-image: url('/assets/motion/bloom.webp'); height: 460px; } }
.track-card { position: relative; isolation: isolate; overflow: hidden; background: #0B0E14; border-color: transparent; color: #fff; }
.track-card .track::before { background: rgba(255,255,255,.18); } .track-card .track li { color: rgba(255,255,255,.7); } .track-card .track li strong { color: #fff; } .track-card .track li.done { color: rgba(255,255,255,.85); } .track-card .track .dot { background: #0B0E14; border-color: rgba(255,255,255,.35); }
.track-media { position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 700ms var(--m-ease); pointer-events: none; }
.track-media.is-on { opacity: 1; }
.track-media video { width: 100%; height: 100%; object-fit: cover; display: block; }
.track-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,14,20,.72), rgba(11,14,20,.45) 50%, rgba(11,14,20,.85)); }
.track li .dot { transition: box-shadow 400ms var(--m-ease); }
.track.on li .dot { animation: nodeGlow 6s var(--m-ease) infinite; }
.track.on li:nth-child(2) .dot { animation-delay: 1.2s; } .track.on li:nth-child(3) .dot { animation-delay: 2.4s; } .track.on li:nth-child(4) .dot { animation-delay: 3.6s; } .track.on li:nth-child(5) .dot { animation-delay: 4.8s; }
@keyframes nodeGlow { 0%, 22%, 100% { box-shadow: 0 0 0 0 rgba(30,94,255,0); } 8% { box-shadow: 0 0 0 6px rgba(30,94,255,.22), 0 0 18px rgba(30,94,255,.65); } }
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 700ms var(--m-ease), transform 700ms var(--m-ease); }
.reveal.is-in { opacity: 1; transform: none; }
.settle > * { animation: settle 400ms var(--m-ease) both; }
.settle > *:nth-child(2) { animation-delay: 60ms; } .settle > *:nth-child(3) { animation-delay: 120ms; } .settle > *:nth-child(4) { animation-delay: 180ms; } .settle > *:nth-child(n+5) { animation-delay: 240ms; }
@keyframes settle { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
a, button, .btn, .top-cta, .related a { transition: background 120ms var(--m-ease), color 120ms var(--m-ease), border-color 120ms var(--m-ease), transform 120ms var(--m-ease), opacity 120ms var(--m-ease); }
.btn:active, .top-cta:active, .mic:active { transform: scale(.985); }
@media (prefers-reduced-motion: reduce) { .page-rain video, .track-media { display: none; } .reveal { opacity: 1; transform: none; } .settle > * { animation: none; } .track.on li .dot { animation: none; } }

/* ---- LOUD extensions for guides, campaign, file: beam, wipes, parallax, breathing CTA, dock, carousel ---- */
#beam { position: fixed; left: 0; top: 0; width: 3px; height: 0; z-index: 90; background: linear-gradient(180deg, #7FA8FF, #1E5EFF); box-shadow: 0 0 12px #1E5EFF, 0 0 30px rgba(30,94,255,.6); pointer-events: none; }
#wipe { position: fixed; inset: 0; z-index: 95; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--x, 50%) var(--y, 50%), #9DBBFF 0%, #1E5EFF 22%, rgba(30,94,255,.9) 40%, #08090A 100%); clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); }
#wipe.go { animation: wipein .24s cubic-bezier(.2,.9,.2,1) forwards; } #wipe.off { animation: wipeout .22s ease-in forwards; }
@keyframes wipein { 0% { opacity: 1; clip-path: circle(0 at var(--x, 50%) var(--y, 50%)); } 100% { opacity: 1; clip-path: circle(160% at var(--x, 50%) var(--y, 50%)); } }
@keyframes wipeout { to { opacity: 0; } }
.page-rain { height: 100vh; inset: 0; -webkit-mask: linear-gradient(#000 25%, rgba(0,0,0,.25) 55%, #000 100%); mask: linear-gradient(#000 25%, rgba(0,0,0,.25) 55%, #000 100%); opacity: .55; }
.guide-head, .c-hero .hero-media { will-change: transform; }
.guide-head img, .guide-head video { transform: translateY(var(--py, 0)) scale(1.12); }
.img-wipe { position: relative; overflow: hidden; } .img-wipe::before { content: ""; position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, #1E5EFF, #9DBBFF); transform: translateX(-100%); pointer-events: none; }
.img-wipe.wiped::before { animation: maskwipe .8s cubic-bezier(.2,.9,.2,1) forwards; } .img-wipe img, .img-wipe video { clip-path: inset(0 100% 0 0); } .img-wipe.wiped img, .img-wipe.wiped video { animation: unclip .8s cubic-bezier(.2,.9,.2,1) forwards; }
@keyframes maskwipe { 0% { transform: translateX(-100%); } 50% { transform: translateX(0); } 100% { transform: translateX(101%); } }
@keyframes unclip { to { clip-path: inset(0 0 0 0); } }
.cta .btn, .c-btn, .top-cta { animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.03); box-shadow: 0 0 30px rgba(255,89,0,.45); } }
.btn, .c-btn, .top-cta, .mic { position: relative; overflow: hidden; }
.btn::after, .c-btn::after, .top-cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.4), rgba(255,255,255,0)); transform: skewX(-20deg); opacity: 0; pointer-events: none; }
.btn:hover::after, .c-btn:hover::after, .top-cta:hover::after, .btn:active::after, .c-btn:active::after { animation: sweep .55s ease-out; }
@keyframes sweep { 0% { left: -60%; opacity: 1; } 100% { left: 120%; opacity: 0; } }
.btn:active, .c-btn:active, .top-cta:active { transform: translateY(2px) scale(.985) !important; }
footer a:hover { text-shadow: 0 0 14px rgba(255,122,51,.9); }
#dock { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 60; width: 60px; height: 60px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; background: radial-gradient(circle at 36% 30%, rgba(255,255,255,.35) 0%, rgba(255,255,255,0) 40%), radial-gradient(circle at 50% 55%, #3D74FF 0%, #1E5EFF 50%, #0F3AB5 100%); box-shadow: 0 10px 30px -10px rgba(0,0,0,.7), 0 0 0 0 rgba(30,94,255,.6); animation: dockpulse 2s ease-out infinite; }
@keyframes dockpulse { 0% { box-shadow: 0 10px 30px -10px rgba(0,0,0,.7), 0 0 0 0 rgba(30,94,255,.6); } 100% { box-shadow: 0 10px 30px -10px rgba(0,0,0,.7), 0 0 0 16px rgba(30,94,255,0); } }
#dock .bars { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; gap: 3px; } #dock.live .bars { display: flex; } #dock.live { animation: none; }
#dock .bars i { width: 3px; height: 8px; border-radius: 2px; background: #fff; transition: height .08s; }
#dock .lbl { position: absolute; right: 68px; top: 50%; transform: translateY(-50%); white-space: nowrap; font-size: 13px; color: #F7F8F8; background: rgba(8,9,10,.85); border: 1px solid #26282E; border-radius: 999px; padding: 6px 12px; }
#dockState { position: fixed; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 60; font-size: 13px; color: #F7F8F8; background: rgba(8,9,10,.9); border: 1px solid #26282E; border-radius: 12px; padding: 8px 12px; max-width: 240px; display: none; }
#dockState.on { display: block; }
body.c-page #dock { display: none; }
.carousel { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 4px 18px; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin: 0 -16px; padding-left: 16px; padding-right: 16px; }
.carousel::-webkit-scrollbar { display: none; }
.carousel li { flex: 0 0 82%; max-width: 360px; scroll-snap-align: center; border: 1px solid #26282E !important; border-radius: 16px; overflow: hidden; background: #111214; position: relative; }
.carousel li a { display: block !important; padding: 0 !important; min-height: 0 !important; }
.carousel li a::after { content: none !important; }
.carousel .card-media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0B0E14 center / cover no-repeat; }
.carousel .card-media video, .carousel .card-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: translateX(var(--px, 0)) scale(1.1); }
.carousel .card-media video { opacity: 0; transition: opacity .6s; } .carousel .card-media video.is-on { opacity: 1; }
.carousel .card-body { padding: 14px 16px 16px; }
.carousel .card-body small { display: block; margin-top: 4px; }
.carousel li::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.25), rgba(255,255,255,0)); transform: skewX(-20deg); pointer-events: none; opacity: 0; }
.carousel li:focus-within::after, .carousel li:hover::after { animation: sweep .7s ease-out; }
.pulse-ev { animation: evpulse .9s cubic-bezier(.3,1.6,.4,1); } @keyframes evpulse { 30% { box-shadow: 0 0 0 8px rgba(30,94,255,.25), 0 0 26px rgba(30,94,255,.8); transform: scale(1.4); } }
.sound-toggle { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line, #DCE2EA); background: transparent; color: inherit; font-size: 13px; }
@media (prefers-reduced-motion: reduce) { #beam, #wipe { display: none; } .cta .btn, .c-btn, .top-cta, #dock { animation: none; } .img-wipe::before { display: none; } .img-wipe img, .img-wipe video { clip-path: none; animation: none; } .guide-head img, .guide-head video { transform: none; } .page-rain video { display: none; } }