/* =====================================================================
   FX HOME · versão de teste · mais movimento na home
   - hero: showreel tocando sozinho no lugar do iframe do YouTube
   - faixa de peças em loop (duas fileiras que andam, aceleram com a rolagem)
   - cards de Selected Projects tocam o vídeo do trabalho
   - faixa de palavras entre seções
   ===================================================================== */

/* ---------- hero reel ---------- */
.hreel{cursor:pointer;isolation:isolate;outline:none}
.hreel video{transition:transform 1.2s var(--ease,ease),filter .6s}
.hreel:hover video{transform:scale(1.025)}
.hreel:focus-visible{box-shadow:0 0 0 3px var(--bruma)}
.hr-ui{position:absolute;inset:0;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(19,34,29,.0) 55%,rgba(19,34,29,.72) 100%)}
.hr-tag{position:absolute;left:clamp(14px,2vw,24px);top:clamp(14px,2vw,24px);display:flex;align-items:center;
  background:var(--noite);color:var(--bruma);border-radius:999px;padding:6px 14px;font-size:11px}
.hr-play{position:absolute;left:clamp(14px,2.2vw,32px);bottom:clamp(18px,2.6vw,36px);display:flex;align-items:center;gap:16px}
.hr-btn{width:clamp(48px,5.4vw,76px);aspect-ratio:1;border-radius:50%;background:var(--bruma);color:var(--noite);
  display:grid;place-items:center;padding-left:6%;position:relative;
  transition:transform .6s var(--spring,ease)}
.hr-btn::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1.5px solid var(--bruma);opacity:.6;
  animation:hrping 2.4s var(--ease,ease) infinite}
@keyframes hrping{0%{transform:scale(.8);opacity:.7}80%,100%{transform:scale(1.35);opacity:0}}
.hreel:hover .hr-btn{transform:scale(1.12)}
.hr-lbl{display:flex;flex-direction:column;gap:6px}
.hreel .hr-lbl .mono{position:static;background:none;padding:0;border-radius:0}
.hr-btn svg{width:34%;height:auto;display:block;fill:currentColor}
.hr-lbl .mono{color:var(--bruma);font-size:12px}
.hr-sub{font-size:14px;color:var(--neblina)}
.hr-prog{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(238,241,240,.15)}
.hr-prog i{display:block;height:100%;width:100%;background:var(--terra);transform-origin:0 50%;transform:scaleX(0)}
@media(max-width:560px){.hr-sub{display:none}.hr-tag{font-size:9.5px;padding:4px 10px}.hr-play{gap:10px}}

/* ---------- faixa de peças em loop ---------- */
.loopwall{background:var(--noite);padding:clamp(28px,4vw,56px) 0 clamp(36px,5vw,72px);overflow:hidden;--h:clamp(130px,17vw,240px)}
.lw-head{display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--neblina);font-size:11px;margin-bottom:20px}
.lw-head>span:first-child{display:flex;align-items:center;gap:10px}
.lw-row{position:relative;height:var(--h);margin-top:12px;overflow:hidden;touch-action:pan-y}
.lw-row:first-of-type{margin-top:0}
.lw-track{display:flex;gap:12px;height:100%;width:max-content;will-change:transform}
.lw-it{position:relative;flex:none;height:100%;aspect-ratio:var(--ar,1);border-radius:clamp(12px,1.4vw,20px);overflow:hidden;
  background:var(--ac,var(--mata));transition:transform .6s var(--ease,ease),opacity .4s}
.lw-it video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.lw-it::before{content:"";position:absolute;inset:0;background:url(assets/liquen.png) 0 0/420px;opacity:.12;mix-blend-mode:multiply}
.lw-lb{position:absolute;left:10px;bottom:10px;z-index:2;background:var(--noite);color:var(--bruma);border-radius:999px;padding:5px 10px;
  font-size:10px;white-space:nowrap;opacity:0;transform:translateY(8px);transition:opacity .35s,transform .5s var(--ease,ease)}
.lw-lb::before{content:"";display:inline-block;width:7px;height:7px;border-radius:2px;background:var(--ac);margin-right:7px;vertical-align:1px}
.lw-it:hover .lw-lb,.lw-it:focus-visible .lw-lb{opacity:1;transform:none}
.lw-row:hover .lw-it{opacity:.55}
.lw-row:hover .lw-it:hover{opacity:1;transform:scale(1.03)}
@media(hover:none){.lw-lb{opacity:1;transform:none}.lw-row:hover .lw-it{opacity:1}}
@media(max-width:560px){.lw-head .hide-m{display:none}.loopwall{--h:132px}.lw-track{gap:8px}.lw-row{margin-top:8px}.lw-lb{font-size:8.5px;left:6px;bottom:6px;padding:3px 7px}}

/* ---------- cards com vídeo ---------- */
.cd.std .sk-tile .tv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;z-index:1;
  transition:opacity .5s,transform 1s var(--ease,ease)}
.cd.std .sk-tile.playing .tv{opacity:1}
.cd.std:hover .sk-tile .tv{transform:scale(1.04)}
.sk-tile .tvd{position:absolute;right:10px;top:10px;z-index:2;width:8px;height:8px;border-radius:50%;background:var(--terra);
  opacity:0;transition:opacity .3s}
.sk-tile.playing .tvd{opacity:1;animation:blink 1.2s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}

/* ---------- faixa de palavras ---------- */
.tick{background:var(--noite);overflow:hidden;padding:clamp(18px,3vw,40px) 0;border-top:1px solid var(--mata);border-bottom:1px solid var(--mata)}
.tk-track{display:flex;width:max-content;will-change:transform}
.tk-set{display:flex;align-items:center;gap:clamp(18px,2.4vw,40px);padding-right:clamp(18px,2.4vw,40px);white-space:nowrap}
.tk-set .gro{font-size:clamp(44px,7vw,112px);color:transparent;-webkit-text-stroke:1.5px var(--nevoa)}
.tk-set .ser{font-size:clamp(50px,8vw,126px);color:var(--bruma)}
.tk-s{height:clamp(26px,3.6vw,58px);width:auto;color:var(--terra);flex:none}
.tk-set .gro:hover{color:var(--bruma);-webkit-text-stroke-color:var(--bruma)}

@media(prefers-reduced-motion:reduce){
  .lw-row{overflow-x:auto}
  .hr-btn::after{animation:none}
}

/* ---------- menos animação de entrada (mais leve) ----------
   ficam só o título do topo e os títulos de seção; textos, cards,
   vídeos, retratos e fichas aparecem direto, sem cortina/zoom/varredura */
.fx [data-rv=fade]:not(.in){opacity:1}
.fx [data-rv=fade].in{animation:none}
.fx [data-rv=card]:not(.in) :is(.cv,.ph){clip-path:none}
.fx [data-rv=card]:not(.in) .ct{opacity:1}
.fx [data-rv=card].in :is(.cv,.ph),.fx [data-rv=card].in :is(.cv,.ph) img,.fx [data-rv=card].in .ct{animation:none}
.fx [data-rv=wipe]::before{display:none}
.fx [data-rv=wipe].in video{animation:none}
.fx [data-rv=img]::after{display:none}
.fx [data-rv=line]:not(.in){background-size:100% 1px}
.fx [data-rv=line]:not(.in)>*{opacity:1}
.fx [data-rv=line].in,.fx [data-rv=line].in>*{animation:none}

/* ---------- vídeo de apresentação tocando no lugar (sem popup) ---------- */
.hreel.on .hr-ui{opacity:0;transition:opacity .3s}
.hr-player{position:absolute;z-index:40;border-radius:clamp(24px,3.2vw,44px);overflow:hidden;background:#000}
.hr-player iframe{width:100%;height:100%;border:0;display:block}
.hr-x{position:absolute;right:10px;top:10px;z-index:2;width:34px;height:34px;padding:0;border-radius:50%;background:var(--noite);color:var(--bruma);font-size:13px;letter-spacing:0;display:none;place-items:center}
.hr-player.mini{position:fixed;right:16px;bottom:16px;left:auto;top:auto;width:min(360px,calc(100vw - 32px));aspect-ratio:16/9;height:auto;border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.45);z-index:9200;animation:hrmini .45s var(--ease,ease) both}
.hr-player.mini .hr-x{display:grid}
@keyframes hrmini{from{opacity:0;transform:translateY(16px) scale(.96)}}
@media(max-width:640px){.hr-player.mini{right:12px;bottom:64px;width:62vw;border-radius:12px}}

/* ---------- nome e símbolo do topo sem animação; sem abertura ---------- */
.fx .hero h1 :is(.wi,.c){transform:none!important;animation:none!important}
.fx .hero .bang .b,.fx .hero .bang .d{transform:none!important;transition:none!important}