/* Camada única de movimento. A paleta e os tamanhos permanecem no tema. */
:root {
  --motion-ease:cubic-bezier(.16,1,.3,1);
  --motion-spring:cubic-bezier(.22,1.15,.36,1);
}
:where(button, .side-brand) { position:relative; isolation:isolate; overflow:hidden; }
button, .side-brand {
  transition:background-color 180ms ease, color 180ms ease, border-color 180ms ease,
    box-shadow 460ms var(--motion-ease), translate 420ms var(--motion-spring), scale 280ms var(--motion-ease);
}
button:active:not(:disabled), .side-brand:active { scale:.965; }
button:disabled { scale:1; translate:none; }
.click-wave { position:absolute; z-index:10; display:block; border-radius:50%; background:currentColor; opacity:0; pointer-events:none; }
@media (hover:hover) {
  :is(.btn,.pcbtn,.iconbtn,.ibtn,.folder-delete,.fart-set,.favbtn,.playbtn,.goto,.preset,.nudge):hover:not(:disabled) { translate:0 -2px; }
  .btn.primary:hover:not(:disabled), .pcbtn.blue:hover:not(:disabled) { box-shadow:0 8px 22px #1F5BFF30; }
  .nav-item:hover { translate:3px 0; }
}
.nav-item::before { content:''; position:absolute; left:0; top:25%; height:50%; width:3px; border-radius:4px; background:var(--blue); opacity:0; transform:scaleY(.3); transition:opacity 220ms,transform 650ms var(--motion-spring); }
.nav-item[aria-current=page]::before { opacity:1; transform:scaleY(1); }
.seg { transition:background-color 240ms,color 240ms,box-shadow 240ms,scale 280ms; }
.seg.on { box-shadow:0 2px 7px #1F5BFF14; }
.favbtn svg,.ibtn svg,.folder-delete svg,.mico svg { transition:transform 280ms var(--motion-spring); }
.favbtn.on svg,.ibtn.on svg { transform:scale(1.16); }
.input,.select,.search,.tinput { transition:border-color 180ms,box-shadow 220ms,background-color 220ms; }
.input:focus,.select:focus,.tinput:focus { box-shadow:0 0 0 3px var(--blue-tint); }
.fcard,.gcard { transition:transform 650ms var(--motion-spring),box-shadow 600ms var(--motion-ease),border-color 200ms; }
/* As entradas antigas não devem disputar transform com o hover ou com snapshots. */
.fcard,.gcard,.group { animation:none; }
.view.entering { animation:screen-enter 900ms var(--motion-ease) backwards; }
#home.entering > *,#folder.entering > * { animation:section-enter 950ms var(--motion-ease) backwards; }
#home.entering > :nth-child(1),#folder.entering > :nth-child(1) { animation-delay:0ms; }
#home.entering > :nth-child(2),#folder.entering > :nth-child(2) { animation-delay:110ms; }
#home.entering > :nth-child(3),#folder.entering > :nth-child(3) { animation-delay:200ms; }
#home.entering > :nth-child(4),#folder.entering > :nth-child(4) { animation-delay:290ms; }
.editor.entering .details { animation:details-enter 1000ms var(--motion-ease) backwards; }
@keyframes screen-enter { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }
@keyframes section-enter { from { opacity:0; transform:translateY(15px); } to { opacity:1; transform:none; } }
@keyframes details-enter { from { opacity:0; transform:translateX(18px); } to { opacity:1; transform:none; } }

/* O navegador mantém uma imagem da tela anterior durante a entrada da próxima. */
.view:not(.lock) { view-transition-name:workspace; }
::view-transition { pointer-events:none; }
::view-transition-group(root) { animation-duration:0s; }
::view-transition-old(root),::view-transition-new(root) { animation:none; mix-blend-mode:normal; }
::view-transition-group(workspace) { animation-duration:950ms; animation-timing-function:var(--motion-ease); }
::view-transition-old(workspace) { animation:workspace-out 440ms ease both; mix-blend-mode:normal; }
::view-transition-new(workspace) { animation:workspace-in 950ms var(--motion-ease) both; mix-blend-mode:normal; }
@keyframes workspace-out { 0% { opacity:1; transform:none; } 35% { opacity:.75; } 100% { opacity:0; transform:translateY(-26px) scale(.975); } }
@keyframes workspace-in { 0% { opacity:0; transform:translateY(38px) scale(.965); } 22% { opacity:0; } 72% { opacity:1; transform:translateY(-3px) scale(1.003); } 100% { opacity:1; transform:none; } }
dialog.dlg[open] { animation:dialog-enter 680ms var(--motion-ease) backwards; }
dialog.dlg[open]::backdrop { animation:backdrop-enter 520ms ease both; }
dialog.dlg[data-closing] { pointer-events:none; }
dialog.dlg[data-closing]::backdrop { animation:backdrop-leave 360ms ease both; }
@keyframes dialog-enter { 0% { opacity:0; transform:perspective(1000px) translateY(38px) rotateX(-7deg) scale(.94); } 65% { opacity:1; transform:perspective(1000px) translateY(-4px) rotateX(1deg) scale(1.012); } 100% { opacity:1; transform:none; } }
@keyframes backdrop-enter { from { opacity:0; } to { opacity:1; } }
@keyframes backdrop-leave { from { opacity:1; } to { opacity:0; } }
.progressbar { border-radius:8px; }
#progress-fill { transition:width 300ms var(--motion-ease); }
.toast { transition:transform 700ms var(--motion-spring),opacity 240ms; }

/* Camadas independentes: o cabeçalho chega antes dos painéis e das coleções. */
.home-intro,.lib-head { view-transition-name:page-heading; }
#home .pc { view-transition-name:pc-panel; }
#home .inbox { view-transition-name:inbox-panel; }
#home .block:has(#grid-games) { view-transition-name:game-collection; }
#home .block:has(#grid-media) { view-transition-name:file-collection; }
#folder .groups,.editor .stage { view-transition-name:page-content; }
.editor .details { view-transition-name:editor-details; }
::view-transition-group(page-heading),::view-transition-group(pc-panel),::view-transition-group(inbox-panel),
::view-transition-group(game-collection),::view-transition-group(file-collection),
::view-transition-group(page-content),::view-transition-group(editor-details) {
  animation-duration:950ms; animation-timing-function:var(--motion-ease);
}
::view-transition-old(page-heading),::view-transition-old(pc-panel),::view-transition-old(inbox-panel),
::view-transition-old(game-collection),::view-transition-old(file-collection),
::view-transition-old(page-content),::view-transition-old(editor-details) {
  animation:layer-out 400ms ease both; mix-blend-mode:normal;
}
::view-transition-new(page-heading),::view-transition-new(pc-panel),::view-transition-new(inbox-panel),
::view-transition-new(game-collection),::view-transition-new(file-collection),
::view-transition-new(page-content),::view-transition-new(editor-details) {
  animation:layer-in 850ms var(--motion-ease) both; mix-blend-mode:normal;
}
::view-transition-new(page-heading) { animation-delay:60ms; }
::view-transition-new(pc-panel),::view-transition-new(page-content) { animation-delay:140ms; }
::view-transition-new(inbox-panel),::view-transition-new(editor-details) { animation-delay:220ms; }
::view-transition-new(game-collection) { animation-delay:290ms; }
::view-transition-new(file-collection) { animation-delay:370ms; }
@keyframes layer-out {
  to { opacity:0; transform:translateY(-20px) scale(.98); }
}
@keyframes layer-in {
  0% { opacity:0; transform:perspective(1400px) translateY(34px) rotateX(3deg) scale(.97); }
  65% { opacity:1; transform:perspective(1400px) translateY(-3px) rotateX(0deg) scale(1.004); }
  100% { opacity:1; transform:none; }
}
/* Revelação em sequência também no fallback sem View Transitions. */
.view.entering .fcard,.view.entering .gcard {
  animation:card-arrive 850ms var(--motion-ease) backwards;
  animation-delay:calc(140ms + min(var(--i,0),7) * 65ms);
}
@keyframes card-arrive {
  from { opacity:0; transform:perspective(900px) translateY(24px) rotateX(5deg) scale(.96); }
  to { opacity:1; transform:none; }
}
dialog.dlg[open] form > * { animation:dialog-content 600ms var(--motion-ease) backwards; }
dialog.dlg[open] form > :nth-child(2) { animation-delay:90ms; }
dialog.dlg[open] form > :nth-child(3) { animation-delay:150ms; }
dialog.dlg[open] form > :nth-child(n+4) { animation-delay:210ms; }
@keyframes dialog-content { from { opacity:0; translate:0 12px; } to { opacity:1; translate:0 0; } }
.btn.primary::after,.pcbtn.blue::after {
  content:''; position:absolute; inset:-50% -25%; pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,#ffffff35 50%,transparent 65%);
  transform:translateX(-110%); transition:transform 850ms var(--motion-ease);
}
@media (hover:hover) {
  .btn.primary:hover::after,.pcbtn.blue:hover::after { transform:translateX(110%); }
  .fcard:hover,.gcard:hover { transform:perspective(1400px) translateY(-6px) rotateX(1deg); box-shadow:0 18px 34px #0A0B0D20; }
  .fcard.game:hover .fhead::after { transform:translate(-8px,6px) rotate(-12deg); }
}
.fhead::after { transition:transform 1000ms var(--motion-ease); }
.fart,.thumb .shot { transition:opacity 700ms,transform 1100ms var(--motion-ease); }

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation:none !important; transition:none !important; }
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*) { animation:none !important; }
}