/* Effets React Bits (vanilla) : voir rb.js */
.rb-noise{position:fixed;inset:-50%;width:200%;height:200%;pointer-events:none;z-index:9990;opacity:.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:rbN 1s steps(4) infinite}
.light .rb-noise{opacity:.035;mix-blend-mode:multiply}
.rb-noise.still{animation:none}
@keyframes rbN{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-1%,3%)}100%{transform:translate(0,0)}}
.rb-spark{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:9991}
/* Shiny */
.rb-shiny{animation:rbShine 4.5s linear infinite;-webkit-text-fill-color:transparent}
@keyframes rbShine{0%{background-position:150% 0,0 0}60%,100%{background-position:-60% 0,0 0}}
@media (prefers-reduced-motion:reduce){.rb-shiny{animation:none}}
/* Split flap */
.rb-flapwrap{margin:0 0 28px}
.rb-flap{background:#0a0a0a;border:2px solid #222;border-radius:24px;padding:22px clamp(14px,3vw,34px);text-align:center;color:#fff}
.rb-flap-k,.rb-flap-s{font:600 12px/1 Kanit,sans-serif;letter-spacing:.2em;text-transform:uppercase;color:#ff8a3d;margin:0 0 14px}
.rb-flap-s{color:#9a9a9a;margin:14px 0 0}
.rb-flap-row{display:flex;justify-content:center;gap:6px;margin:6px 0}
.rb-fl{position:relative;display:inline-grid;place-items:center;width:clamp(40px,8vw,74px);height:clamp(56px,11vw,100px);background:linear-gradient(#1c1c1c 0 49.4%,#050505 49.4% 50.6%,#161616 50.6%);border-radius:8px;font:900 clamp(30px,6.5vw,62px)/1 Kanit,sans-serif;box-shadow:inset 0 -2px 0 #000,0 6px 16px #0008;overflow:hidden}
.rb-flap-row.sm .rb-fl{width:clamp(22px,4.6vw,42px);height:clamp(34px,6.6vw,58px);font-size:clamp(18px,3.8vw,34px)}
.rb-fl i{font-style:normal;background:linear-gradient(180deg,#fff,#ffb3d9);-webkit-background-clip:text;background-clip:text;color:transparent}
.rb-fl.go i{animation:rbFlip .07s ease-out}
@keyframes rbFlip{0%{transform:rotateX(70deg);opacity:.4}100%{transform:none;opacity:1}}
/* Count up stats */
.rb-stats{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:980px;margin:40px auto 0;padding:0;position:relative;z-index:2}
.rb-stats li{background:var(--card,#151515);border:2px solid var(--jl,#222);border-radius:22px;padding:18px 14px;text-align:center}
.rb-stats b{display:block;font:900 clamp(34px,5vw,58px)/1 Kanit,sans-serif;background:linear-gradient(90deg,#ff3fa4,#a855f7,#ff8a3d);-webkit-background-clip:text;background-clip:text;color:transparent;font-variant-numeric:tabular-nums}
.rb-stats span{font-size:13px;color:var(--tx2,#aaa)}
@media (max-width:640px){.rb-stats{grid-template-columns:repeat(2,1fr)}}
/* Scroll velocity */
.rb-vel{overflow:hidden;padding:26px 0;margin:0 calc(50% - 50vw);width:100vw;border-block:1px solid #ffffff14}
.rb-vt{display:flex;white-space:nowrap;will-change:transform;font:900 clamp(38px,7vw,96px)/1.05 Kanit,sans-serif;text-transform:uppercase;letter-spacing:-.02em}
.rb-vt span{flex:0 0 auto;padding-right:.3em}
.rb-vt+.rb-vt{-webkit-text-stroke:1.5px #ff3fa4;color:transparent}
.rb-vt:first-child{background:linear-gradient(90deg,#ff3fa4,#a855f7,#ff8a3d);-webkit-background-clip:text;background-clip:text;color:transparent}
.rb-vt i{font-style:normal;font-size:.5em;vertical-align:middle;color:#ff8a3d;-webkit-text-fill-color:#ff8a3d}
/* Scroll expand */
.rb-xp{height:220vh;margin:0 calc(50% - 50vw);width:100vw;position:relative}
.rb-xp-st{position:sticky;top:0;height:100vh;display:grid;place-items:center;overflow:hidden}
.rb-xp-m{--p:0;margin:0;position:relative;width:calc(60vw + 40vw*var(--p));height:calc(48vh + 52vh*var(--p));border-radius:calc(28px*(1 - var(--p)));overflow:hidden;box-shadow:0 30px 80px #000a;contain:paint;background:#111}
.rb-xp-m img{width:100%;height:100%;object-fit:cover;display:block}
.rb-xp-m figcaption{position:absolute;left:24px;bottom:22px;color:#fff;text-shadow:0 2px 12px #000;display:flex;flex-direction:column;gap:4px}
.rb-xp-m figcaption b{font:900 clamp(26px,4vw,54px)/1 Kanit,sans-serif;text-transform:uppercase}
.rb-xp-m figcaption small{opacity:.8}
.rb-xp-h{position:absolute;bottom:20px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#888;transition:opacity .3s}
.rb-xp.full .rb-xp-h{opacity:0}
@media (max-width:700px){.rb-xp{height:180vh}.rb-xp-m{width:calc(84vw + 16vw*var(--p));height:calc(40vh + 60vh*var(--p))}}
@media (prefers-reduced-motion:reduce){.rb-xp{height:auto}.rb-xp-st{position:relative;height:auto;padding:40px 0}.rb-xp-m{width:92vw;height:56vh}}
/* Tilted card */
.rb-tilt{transition:transform .25s cubic-bezier(.2,.8,.2,1)!important;transform-style:preserve-3d;will-change:transform;position:relative}
.rb-tilt::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),#ffffff2e,transparent 55%);opacity:0;transition:opacity .25s}
.rb-tilt:hover::after{opacity:1}
/* Chroma grid */
.rb-chroma{position:relative;--x:50%;--y:50%}
.rb-chroma .icard{position:relative}
.rb-chroma .icard img{filter:grayscale(1) brightness(.85);transition:filter .5s}
.rb-chroma .icard:hover img,.rb-chroma .icard.lit img{filter:none}
.rb-chroma .icard::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;border-radius:inherit;background:radial-gradient(circle at var(--mx,50%) var(--my,50%),color-mix(in srgb,var(--cc) 35%,transparent),transparent 60%);opacity:0;transition:opacity .4s}
.rb-chroma .icard:hover::before,.rb-chroma .icard.lit::before{opacity:1}
.rb-chroma .icard:hover,.rb-chroma .icard.lit{border-color:var(--cc)!important}
.rb-chroma-ov{position:absolute;inset:0;pointer-events:none;z-index:3;border-radius:24px;opacity:0;transition:opacity .4s;background:radial-gradient(circle 300px at var(--x) var(--y),transparent 0,#0000 40%,#0006 100%)}
.rb-chroma.on .rb-chroma-ov{opacity:1}
.rb-chroma.on .icard img{filter:grayscale(.6) brightness(.8)}
.rb-chroma.on .icard:hover img{filter:none}
/* Spotlight */
.rb-spot{position:relative;isolation:isolate}
.rb-spot::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:inherit;background:radial-gradient(260px circle at var(--sx,50%) var(--sy,50%),rgba(255,63,164,.28),transparent 60%);opacity:0;transition:opacity .3s;mix-blend-mode:screen}
@media (hover:hover) and (pointer:fine){.rb-spot:hover::after{opacity:1}}
/* Masonry */
.rb-ms{margin:48px 0 0}
.rb-ms-g{columns:4 220px;column-gap:12px}
.rb-ms-i{display:block;break-inside:avoid;margin:0 0 12px;border-radius:18px;overflow:hidden;aspect-ratio:1/var(--h);transition:transform .7s cubic-bezier(.2,.8,.2,1),opacity .7s,filter .7s}
.rb-ms-i img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.rb-ms-i.pre{opacity:0;transform:translateY(60px);filter:blur(8px)}
@media (hover:hover) and (pointer:fine){.rb-ms-i:hover img{transform:scale(1.06)}}
@media (max-width:520px){.rb-ms-g{columns:2;column-gap:8px}.rb-ms-i{margin-bottom:8px;border-radius:12px}}
/* Pulse heart */
.rb-heart{display:inline-flex!important;align-items:center;gap:6px}
.rb-hz{position:relative;display:inline-grid;place-items:center;width:18px;height:18px}
.rb-hz svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;transition:transform .2s}
.rb-heart.on .rb-hz svg,.rb-heart[aria-pressed=true] .rb-hz svg{fill:currentColor;stroke:currentColor;animation:rbBeat 1.6s ease-in-out infinite}
.rb-hz em{position:absolute;inset:-6px;border-radius:50%;border:2px solid #ff3fa4;opacity:0}
.rb-heart.pop .rb-hz svg{animation:rbPop .45s cubic-bezier(.2,.8,.2,1.4)}
.rb-heart.pop .rb-hz em{animation:rbRing .5s ease-out}
@keyframes rbPop{0%{transform:scale(.6)}50%{transform:scale(1.35)}100%{transform:scale(1)}}
@keyframes rbRing{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(1.8)}}
@keyframes rbBeat{0%,100%{transform:scale(1)}15%{transform:scale(1.15)}30%{transform:scale(1)}45%{transform:scale(1.1)}}
@media (prefers-reduced-motion:reduce){.rb-hz svg{animation:none!important}}
/* Animated content */
.rb-ac{opacity:0;transform:translateY(50px);filter:blur(6px);transition:opacity .8s var(--d,0s) ease,transform .9s var(--d,0s) cubic-bezier(.2,.8,.2,1),filter .8s var(--d,0s)}
.rb-ac.rb-in{opacity:1;transform:none;filter:none}
/* Hyperspeed */
.rb-hyper{position:relative;height:clamp(220px,34vw,380px);border-radius:28px;overflow:hidden;margin:0 0 28px;background:#07040c}
.rb-hyper-c{position:absolute;inset:0;width:100%;height:100%}
.rb-hyper-t{position:absolute;left:clamp(16px,3vw,36px);bottom:clamp(16px,3vw,32px);z-index:1;color:#fff}
.rb-hyper-t b{display:block;font:900 clamp(24px,4vw,46px)/.95 Kanit,sans-serif;text-transform:uppercase;max-width:14em;text-shadow:0 4px 18px #000}
/* Aurora */
.rb-aurhost{position:relative;isolation:isolate}
.rb-aurora{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.9}
.light .rb-aurora{opacity:.45}
.rb-tilt.card-img{overflow:hidden;border-radius:24px}