/* ==========================================================
   RPBRC effects layer
   Loaded after styles.css. Everything here is additive.
   ========================================================== */

/* ---------- Interactive light field (canvas sits behind the page) ---------- */
#fx{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.scroll-progress{position:fixed;left:0;top:0;right:0;height:2px;z-index:40;pointer-events:none}
.scroll-progress i{display:block;height:100%;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,#fff0,#dfe5f0 35%,#fff);box-shadow:0 0 14px #ffffff70}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Header ---------- */
.site-header{transition:background .35s;animation:head-in .9s cubic-bezier(.2,.7,.2,1) backwards}
.nav-shell{transition:height .4s cubic-bezier(.2,.7,.2,1)}
.site-header.scrolled{background:#090a0ce6}
.site-header.scrolled .nav-shell{height:62px}
.nav-right{display:flex;align-items:center;gap:10px}
.nav-youtube,.nav-discord{display:inline-flex;align-items:center;gap:8px;border:1px solid #ffffff2c;border-radius:100px;padding:8px 15px;font-size:.8rem;font-weight:600;color:#f1f1f2;background:linear-gradient(165deg,#ffffff16,#ffffff05);translate:var(--tx,0px) var(--ty,0px);transition:border-color .2s,background .2s,translate .3s cubic-bezier(.2,.7,.2,1)}
.nav-youtube:hover,.nav-discord:hover{border-color:#ffffff70;background:#ffffff1e}
.nav-youtube svg,.nav-discord svg,.button svg.dc,.button svg.yt{width:17px;height:17px;fill:currentColor;flex:none}

/* ---------- Music toggle ---------- */
.nav-music{display:inline-flex;align-items:center;gap:9px;height:35px;border:1px solid #ffffff1f;border-radius:100px;padding:0 14px;font-size:.8rem;color:#c0c3c8;background:#ffffff04;transition:border-color .2s,background .2s,color .2s}
.nav-music[hidden]{display:none}
.nav-music:hover{border-color:#ffffff55;color:#fff}
.nav-music[aria-pressed="true"]{color:#fff;border-color:#ffffff50;background:#ffffff10}
.eq{display:flex;align-items:flex-end;gap:2px;height:13px}
.eq i{display:block;width:2px;height:50%;border-radius:2px;background:currentColor;transform-origin:50% 100%}
.nav-music[aria-pressed="true"] .eq i{animation:eq 1s ease-in-out infinite alternate}
.nav-music[aria-pressed="true"] .eq i:nth-child(2){animation-duration:.72s;animation-delay:-.3s}
.nav-music[aria-pressed="true"] .eq i:nth-child(3){animation-duration:.88s;animation-delay:-.55s}
.nav-music[aria-pressed="true"] .eq i:nth-child(4){animation-duration:.66s;animation-delay:-.15s}
@keyframes eq{from{height:25%}to{height:100%}}

/* ---------- Hero: banner at true aspect ratio, never upscaled ---------- */
.hero-visual{isolation:auto}
.hero-image{
  transform:translate3d(0,var(--py,0px),0);opacity:var(--hf,1);
  mix-blend-mode:lighten;will-change:transform,opacity;
  animation:banner-in 1.6s ease-out backwards;
  user-select:none;-webkit-user-drag:none
}
.hero{user-select:none}
@media(min-width:1873px){
  .hero-image{
    -webkit-mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,#000 82%,transparent);
    mask-image:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,#000 82%,transparent);
    -webkit-mask-composite:source-in;mask-composite:intersect
  }
}
.hero-actions{margin-top:0}
.hero-actions .intro-label{animation:rise .9s cubic-bezier(.2,.7,.2,1) .55s backwards}
.hero-actions .button-row{flex-wrap:wrap;animation:rise .9s cubic-bezier(.2,.7,.2,1) .7s backwards}
.hero-hint{margin-top:22px;font-size:.78rem;color:#7d828b;transition:opacity .7s,translate .7s;animation:rise .9s cubic-bezier(.2,.7,.2,1) .95s backwards}
.hero-hint.gone{opacity:0;translate:0 6px}
.hero-baseline{animation:rise 1s ease-out 1.1s backwards}
.button{translate:var(--tx,0px) var(--ty,0px);transition:transform .22s,border-color .22s,box-shadow .22s,background .22s,translate .3s cubic-bezier(.2,.7,.2,1)}
@keyframes banner-in{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
@keyframes head-in{from{opacity:0;translate:0 -16px}to{opacity:1;translate:0 0}}

/* ---------- Feature marquee (speed and skew follow scroll) ---------- */
.marquee{position:relative;overflow:hidden;padding:54px 0 48px;border-bottom:1px solid var(--line);user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.marquee-row{display:block;white-space:nowrap;will-change:transform}
.marquee-row+.marquee-row{margin-top:4px}
.marquee-track{display:inline-flex;align-items:center;font-size:clamp(2.3rem,5.2vw,4.8rem);will-change:transform}
.marquee-track span{font-weight:650;letter-spacing:-.06em;line-height:1.08;color:#c9ccd3;padding-right:.3em;font-weight:600}
.marquee-track i{flex:none;width:.13em;height:.13em;margin-right:.3em;border:1px solid #ffffff55;transform:rotate(45deg)}
.marquee-row.outline .marquee-track span{color:transparent;-webkit-text-stroke:1px #ffffff30}

/* ---------- Scroll reveals ---------- */
.motion-enabled .reveal{opacity:0;transform:none;translate:0 26px;filter:blur(4px);transition:opacity 1s cubic-bezier(.2,.7,.2,1),translate 1s cubic-bezier(.2,.7,.2,1),filter .9s ease-out}
.motion-enabled .reveal.visible{opacity:1;transform:none;translate:0 0;filter:none}

/* Headings rise line by line out of a mask */
.line{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.line-in{display:block}
.motion-enabled .line-in{translate:0 118%;transition:translate 1.3s cubic-bezier(.16,.8,.1,1) calc(.1s + var(--i,0) * .1s)}
.motion-enabled .reveal.visible .line-in{translate:0 0}
.motion-enabled .section-heading.reveal{opacity:1;translate:none;filter:none}
.motion-enabled .section-heading .eyebrow,.motion-enabled .section-heading>p{opacity:0;translate:0 14px;transition:opacity .9s ease .3s,translate .9s cubic-bezier(.2,.7,.2,1) .3s}
.motion-enabled .section-heading.visible .eyebrow,.motion-enabled .section-heading.visible>p{opacity:1;translate:0 0}
.motion-enabled .section-heading.visible>p{transition-delay:.55s}

/* ---------- Product cards: staggered entrance + 3D tilt ---------- */
.product-grid{perspective:1400px}
.product-card:nth-child(3n+2){--d:.1s}
.product-card:nth-child(3n){--d:.2s}
.product-card:before{background:radial-gradient(300px circle at var(--mx,50%) var(--my,0%),#ffffff10,transparent 65%);opacity:0;transition:opacity .35s}
.product-card:hover:before{opacity:1}
.motion-enabled .product-card.reveal{
  transform:perspective(900px) rotateX(0deg) rotateY(0deg) translateY(0);
  translate:0 34px;
  transition:opacity 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),translate 1s cubic-bezier(.2,.7,.2,1) var(--d,0s),filter .9s ease-out var(--d,0s),transform .3s ease-out,border-color .3s,box-shadow .3s
}
.motion-enabled .product-card.reveal.visible{translate:0 0}
.motion-enabled .product-card.reveal.visible:hover{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-4px)}

/* ---------- Released app panel ---------- */
.release-feature:after{content:"";position:absolute;inset:0;background:radial-gradient(440px circle at var(--mx,80%) var(--my,30%),#ffffff10,transparent 60%);pointer-events:none}
.release-copy,.release-preview{position:relative;z-index:1}
.release-preview{perspective:800px}
.release-preview:before{content:"";position:absolute;top:10px;width:230px;height:230px;border-radius:50%;background:radial-gradient(circle,#ffffff1e,transparent 66%);animation:breathe 5s ease-in-out infinite alternate;pointer-events:none}
.release-preview img{position:relative;transform:translate3d(0,var(--fy,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out}
.release-preview:hover img{transform:translate3d(0,var(--fy,0px),0) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.release-feature .feature-chips li{transition:color .5s,border-color .5s,background .5s,box-shadow .5s}
.release-feature .feature-chips li.lit{color:#fff;border-color:#ffffff6e;background:#ffffff15;box-shadow:0 0 26px #ffffff1c}
@keyframes breathe{from{opacity:.35;scale:.9}to{opacity:1;scale:1.08}}

/* ---------- Status table ---------- */
.motion-enabled .status-panel.visible tbody tr{animation:row-in .85s cubic-bezier(.2,.7,.2,1) backwards}
.status-panel tbody tr:nth-child(1){animation-delay:.15s}
.status-panel tbody tr:nth-child(2){animation-delay:.22s}
.status-panel tbody tr:nth-child(3){animation-delay:.29s}
.status-panel tbody tr:nth-child(4){animation-delay:.36s}
.status-panel tbody tr:nth-child(5){animation-delay:.43s}
.status-panel tbody tr:nth-child(6){animation-delay:.5s}
@keyframes row-in{from{opacity:0;translate:-16px 0}to{opacity:1;translate:0 0}}

/* ---------- Discord ---------- */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
.discord-section{padding-top:110px;padding-bottom:110px}
.discord-card{position:relative;display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:40px;padding:68px 68px;border-radius:24px;background:radial-gradient(ellipse at 85% 50%,#ffffff0b,transparent 60%),linear-gradient(140deg,#17181b,#0b0c0e);overflow:hidden;isolation:isolate}
.discord-card:before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;background:conic-gradient(from var(--ang),#ffffff12,#ffffff80 7%,#9fb8ff55 13%,#ffffff12 30%,#ffffff12 68%,#ffb4a048 80%,#ffffff12);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;}
.discord-card:after{content:"";position:absolute;inset:0;background:radial-gradient(460px circle at var(--mx,70%) var(--my,30%),#ffffff0f,transparent 60%);pointer-events:none;z-index:-1}
.discord-copy h2{margin-top:18px;font-size:clamp(2.2rem,4vw,3.4rem)}
.discord-copy>p{margin-top:20px;max-width:420px;color:#9fa4ac;font-size:.98rem;line-height:1.7}
.discord-actions{display:flex;align-items:center;flex-wrap:wrap;gap:18px;margin-top:34px}
.invite-url{font-size:.85rem;color:#80858e}
@keyframes spin-border{to{--ang:360deg}}

/* ---------- Footer ---------- */
.footer-links{display:flex;align-items:center;gap:26px}
.footer-links a{font-size:.8rem;color:#b0b4bc;transition:color .2s}
.footer-links a:hover{color:#fff}

/* ---------- Responsive ---------- */
@media(max-width:1050px){
  .discord-card{padding:52px 44px;gap:24px}
}
@media(max-width:700px){
  .nav-right{gap:8px}
  .nav-music{width:35px;padding:0;justify-content:center}
  .music-label{display:none}
  .site-header nav a:nth-child(2){display:none}
  .nav-shell{gap:16px}
  .site-header nav{gap:18px;margin-right:4px}
  .site-header nav a:nth-child(3){display:none}
  .nav-youtube,.nav-discord{padding:9px}
  .nav-youtube span,.nav-discord span{display:none}
  .marquee{padding:44px 0 40px}
  .discord-section{padding-top:70px;padding-bottom:70px}
  .discord-card{grid-template-columns:1fr;padding:38px 24px 30px;gap:26px}
  .discord-tile{width:78px;height:78px;border-radius:22px}
  .discord-tile svg{width:38px;height:38px}
  .discord-actions{gap:14px}
  .footer-links{gap:20px}
  .site-footer p{order:3}
}
@media(prefers-reduced-motion:reduce){
  #fx,.scroll-progress,.hero-hint{display:none}
  .marquee-track,.marquee-row{transform:none!important}
  .hero-image{transform:none;opacity:1}
  .line-in,.motion-enabled .line-in{translate:none}
}

/* Vivid cyan / violet / amber particles without blocking controls. */
body{isolation:isolate}
#fx{z-index:1;pointer-events:none}
.hero-actions,.hero-baseline,.section,.marquee,.site-footer{position:relative;z-index:2}
@media(prefers-reduced-motion:reduce){#fx{display:none}}

.nav-youtube{display:inline-flex;align-items:center;gap:8px;border:1px solid #ffffff2c;border-radius:100px;padding:8px 15px;font-size:.8rem;font-weight:600;color:#f1f1f2;background:linear-gradient(165deg,#ffffff16,#ffffff05);translate:var(--tx,0px) var(--ty,0px);transition:border-color .2s,background .2s,translate .3s cubic-bezier(.2,.7,.2,1)}
.nav-youtube svg,.button svg.yt{width:17px;height:17px;fill:currentColor;flex:none}.nav-youtube:hover{border-color:#ff6b6b80;background:#ff303014}.discord-actions{flex-wrap:wrap}.discord-actions .button.ghost{margin-left:4px}
@media(max-width:900px){.nav-youtube{padding:9px}.nav-youtube span{display:none}}

/* Calm community/video layout: no expanding circles or flashing border. */
.discord-section{display:grid;gap:24px}.discord-card{grid-template-columns:1fr}.discord-card:before{background:linear-gradient(90deg,#ffffff10,#ffffff55,#ffffff10);animation:none}.video-feature{border:1px solid #ffffff20;border-radius:24px;background:linear-gradient(145deg,#151619,#0b0c0e);padding:28px;overflow:hidden}.video-heading{display:flex;align-items:end;justify-content:space-between;gap:24px;margin-bottom:20px}.video-heading h3{font-size:clamp(1.35rem,2.5vw,2rem);font-weight:580;letter-spacing:-.035em}.video-frame{position:relative;aspect-ratio:16/9;overflow:hidden;border-radius:16px;background:#050608;box-shadow:0 18px 60px #0008}.video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:700px){.video-feature{padding:15px;border-radius:18px}.video-heading{display:block}.video-heading h3{margin-top:8px}.video-frame{border-radius:11px}}

/* ---------- Stacked theme banners (instant swap) ---------- */
.hero-stack{position:absolute;inset:0;transform:translate3d(0,var(--py,0px),0);opacity:var(--hf,1);filter:brightness(1);mix-blend-mode:lighten;will-change:transform,opacity;animation:banner-in 1.6s ease-out backwards}
.hero-stack .hero-image{position:absolute;inset:0;width:100%;height:100%;transform:none;opacity:0;mix-blend-mode:normal;will-change:auto;animation:none;transition:opacity .16s linear;z-index:0}
.hero-stack .hero-image.prev{opacity:1;transition:none;z-index:1}
.hero-stack .hero-image.on{opacity:1;z-index:2}

/* ---------- Interactive 3D point-cloud R ---------- */
.rmark{position:relative;height:clamp(500px,82vh,760px);overflow:hidden;background:radial-gradient(ellipse 42% 58% at 50% 50%,rgba(var(--accent-rgb,140,170,255),.055),transparent 72%),linear-gradient(180deg,var(--page,#090a0c),var(--surface-3,#08090b));border-bottom:1px solid rgba(var(--theme-line,255,255,255),.11);user-select:none;touch-action:pan-y}
.rmark:before{content:"DRAG TO ROTATE";position:absolute;left:50%;bottom:28px;translate:-50% 0;z-index:3;color:rgba(var(--theme-line),.38);font:600 .61rem/1 monospace;letter-spacing:.18em;pointer-events:none}
.rmark-points{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:grab;touch-action:pan-y}.rmark-points.dragging{cursor:grabbing;touch-action:none}
.rmark-words{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:0 max(40px,9vw);pointer-events:none}.rmark-word{margin:0;font-size:clamp(2.1rem,4.6vw,3.9rem);line-height:1.04;letter-spacing:-.05em;font-weight:560;color:#f4f5f7;text-shadow:0 0 30px rgba(var(--accent-rgb),.15)}.rmark-word.right{text-align:right}
@media(max-width:700px){.rmark{height:clamp(430px,70vh,600px)}.rmark-words{align-items:flex-end;padding:0 22px 45px}.rmark-word{font-size:1.55rem}.rmark:before{bottom:18px}}
@media(prefers-reduced-motion:reduce){.rmark:before{display:none}}