/* SQPR Gamer Social Work — efeitos (ativos só com html.fx-on; "reduzir movimento" desliga tudo) */

/* barra de progresso da rolagem */
.fx-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:60;transform-origin:0 50%;transform:scaleX(0);
  background:linear-gradient(90deg,#FF5FA8,#FFB36B,#7C6CFF);pointer-events:none}
html:not(.fx-on) .fx-progress{display:none}

/* capa com profundidade (camadas andam em velocidades diferentes) */
.fx-on:not(.fx-gsap) .hero{--py:0;--pp:0}
.fx-on:not(.fx-gsap) .hero .sun{transform:translate(-50%,calc(-50% + var(--py) * .35px))}
.fx-on:not(.fx-gsap) .hero .stars{transform:translateY(calc(var(--py) * .2px))}
.fx-on:not(.fx-gsap) .scene .bld,.fx-on:not(.fx-gsap) .scene .win{transform:translateY(calc(var(--py) * .12px))}
.fx-on:not(.fx-gsap) .scene .pf{transform:translateY(calc(var(--py) * .2px))}
.fx-on:not(.fx-gsap) .scene .pn{transform:translateY(calc(var(--py) * -.08px)) scale(calc(1 + var(--pp) * .06));transform-origin:50% 100%;transform-box:fill-box}
.fx-on:not(.fx-gsap) .hero-in{transform:translateY(calc(var(--py) * .3px));opacity:calc(1 - var(--pp) * 1.1)}
.fx-on:not(.fx-gsap) .now-card{transform:translateY(calc(var(--py) * .15px))}
/* luz que segue o mouse */
.fx-on .hero::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(520px circle at var(--mx,70%) var(--my,30%),rgba(255,255,255,.35),transparent 60%);transition:background .1s}

/* título entra palavra por palavra */
.fx-on:not(.fx-gsap) .fx-title>*{animation:fxSobe .9s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d,0ms)}
@keyframes fxSobe{from{opacity:0;transform:translateY(.45em) skewY(4deg);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}

/* aparecer ao rolar, em cascata */
.fx-on .fx-r{opacity:0;transform:translateY(22px) scale(.985);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .7s cubic-bezier(.16,1,.3,1);transition-delay:calc(var(--i,0) * 55ms)}
.fx-on .fx-r.fx-in{opacity:1;transform:none}

/* cartões que inclinam com brilho */
.fx-on .game,.fx-on .fd-d,.fx-on .cx-card,.fx-on .ptop,.fx-on .dv-stat{--rx:0deg;--ry:0deg}
.fx-on .fx-tilt{transform:perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)) translateY(-3px) !important;transition:transform .12s ease-out !important;position:relative;z-index:1}
.fx-on .fx-r.fx-in:not(.fx-tilt){transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1)}
.fx-on .fx-tilt::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:3;
  background:radial-gradient(380px circle at var(--gx,50%) var(--gy,50%),rgba(255,255,255,.16),transparent 55%)}
.fx-on .game .g-cover img{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.fx-on .game.fx-tilt .g-cover img{transform:scale(1.06)}

/* troca de aba */
.fx-on #view.fx-troca>*{animation:fxEntra .45s cubic-bezier(.16,1,.3,1) both}
@keyframes fxEntra{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

/* botões principais: leve "pulo" ao passar o mouse */
.fx-on .btn{transition:transform .15s,box-shadow .15s,background .15s}
.fx-on .btn:hover{transform:translateY(-2px)}
.fx-on .btn:active{transform:translateY(0) scale(.98)}

@media (prefers-reduced-motion: reduce){
  .fx-on .fx-r{opacity:1;transform:none;transition:none}
}

/* ---------- navegação de baixo no celular (4 principais + Mais) ---------- */
.bnav{display:none}
@media (max-width:720px){
  body.has-bnav{padding-bottom:calc(4.25rem + env(safe-area-inset-bottom,0px))}
  body.has-bnav .tabs-scroll{display:none}           /* abas sobem para a barra de baixo */
  body.has-bnav .tabs-row{justify-content:space-between;align-items:center;min-height:3.2rem}
  body.has-bnav .tabs-row::before{content:attr(data-sec);color:#F6F2FB;font-weight:900;font-stretch:72%;text-transform:uppercase;letter-spacing:.03em;font-size:1.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  body.has-bnav .toast{bottom:calc(5rem + env(safe-area-inset-bottom,0px))}
  .bnav{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:45;
    padding:.3rem .25rem calc(.3rem + env(safe-area-inset-bottom,0px));background:rgba(11,8,18,.94);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-top:1px solid rgba(255,255,255,.12)}
  .bnav button{display:flex;flex-direction:column;align-items:center;gap:.15rem;background:none;border:0;color:rgba(246,242,251,.62);
    font:inherit;font-size:.68rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;padding:.35rem 0;border-radius:10px;min-height:3.2rem;cursor:pointer}
  .bnav button svg{width:1.45rem;height:1.45rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
  .bnav button[aria-current="page"]{color:#F6F2FB}
  .bnav button[aria-current="page"] svg{transform:translateY(-2px);stroke:#FF5FA8}
  .bnav button[aria-current="page"]::after{content:"";width:1.4rem;height:3px;border-radius:3px;background:#FF5FA8;margin-top:.05rem}
  .bnav button:focus-visible{outline:2px solid #FF5FA8;outline-offset:-2px}
  .bnav .n{position:absolute;margin:-.2rem 0 0 1.1rem;min-width:1.05rem;height:1.05rem;border-radius:99px;background:#FF5FA8;color:#0B0812;font-size:.62rem;display:grid;place-items:center;padding:0 .2rem}
}
/* folha "Mais" (de baixo para cima) */
.bsheet{position:fixed;inset:0;z-index:55;display:flex;align-items:flex-end;background:rgba(5,3,10,.6)}
.bsheet[hidden]{display:none}
.bsheet .bs-in{width:100%;max-height:78vh;overflow:auto;background:#15111F;border-top:1px solid rgba(255,255,255,.14);border-radius:16px 16px 0 0;
  padding:.6rem .75rem calc(1rem + env(safe-area-inset-bottom,0px));animation:fxFolha .28s cubic-bezier(.16,1,.3,1)}
@keyframes fxFolha{from{transform:translateY(100%)}to{transform:none}}
.bsheet .bs-alca{width:2.6rem;height:4px;border-radius:4px;background:rgba(255,255,255,.25);margin:.1rem auto .6rem}
.bsheet h3{margin:.8rem .3rem .4rem;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:rgba(246,242,251,.55)}
.bsheet .bs-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem}
.bsheet .bs-g button{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);color:#F6F2FB;border-radius:10px;padding:.8rem .3rem;
  font:inherit;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:0;cursor:pointer;min-height:3rem;overflow-wrap:normal;word-break:keep-all;hyphens:auto}
.bsheet .bs-g button[aria-current="page"]{background:#F6F2FB;color:#0B0812}
@media (prefers-reduced-motion: reduce){ .bsheet .bs-in{animation:none} }
body.locked .bnav,body.locked .bsheet{display:none!important}

/* camada GSAP: rolagem suave (Lenis) e letras dos títulos */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.fx-gsap .fx-ch{display:inline-block;will-change:transform}
.fx-gsap .ptop-c{will-change:clip-path}

/* vento nas palmeiras: tronco balança da base, a copa balança mais (com rajadas irregulares).
   Fica num grupo interno, então não briga com o parallax da capa. */
.scene .balanco,.scene .copa{transform-box:view-box;transform-origin:var(--ox) var(--oy)}
.fx-on .scene .balanco{animation:fxVentoTronco var(--vel,6s) ease-in-out var(--atraso,0s) infinite}
.fx-on .scene .copa{animation:fxVentoCopa calc(var(--vel,6s) * .55) ease-in-out var(--atraso,0s) infinite}
@keyframes fxVentoTronco{
  0%,100%{transform:rotate(0deg)}
  18%{transform:rotate(calc(var(--forca,1) * 1.1deg))}
  34%{transform:rotate(calc(var(--forca,1) * .3deg))}
  52%{transform:rotate(calc(var(--forca,1) * 1.9deg))}  /* rajada */
  70%{transform:rotate(calc(var(--forca,1) * -.4deg))}
  86%{transform:rotate(calc(var(--forca,1) * .7deg))}
}
@keyframes fxVentoCopa{
  0%,100%{transform:rotate(calc(var(--forca,1) * -1.2deg)) skewX(0deg)}
  25%{transform:rotate(calc(var(--forca,1) * 2.6deg)) skewX(calc(var(--forca,1) * 1.5deg))}
  50%{transform:rotate(calc(var(--forca,1) * .4deg)) skewX(0deg)}
  75%{transform:rotate(calc(var(--forca,1) * 3.4deg)) skewX(calc(var(--forca,1) * 2deg))}
}
@media (prefers-reduced-motion: reduce){ .fx-on .scene .balanco,.fx-on .scene .copa{animation:none} }