/* APOLLO NETWORKS — FASE 21 — Sistema de animações premium
   Microinterações, reveal, hover, loading, transições, galeria, uploads e feedback.
   Tudo é discreto e respeita prefers-reduced-motion.
*/
:root{
  --pl21-ease:cubic-bezier(.22,1,.36,1);
  --pl21-spring:cubic-bezier(.2,.85,.25,1.25);
  --pl21-duration:520ms;
}

/* Página */
html.pl-page-ready body{opacity:1;transform:none}
html:not(.pl-page-ready) body{opacity:0}
body.pl-page-leaving{opacity:0;transform:translateY(4px);transition:opacity 180ms ease,transform 180ms ease}

/* Reveal on scroll */
.pl21-reveal{opacity:0;transform:translate3d(0,24px,0);transition:opacity var(--pl21-duration) var(--pl21-ease),transform var(--pl21-duration) var(--pl21-ease),filter var(--pl21-duration) var(--pl21-ease);filter:blur(3px)}
.pl21-reveal.pl21-visible{opacity:1;transform:none;filter:none}
.pl21-stagger > .pl21-reveal:nth-child(1){transition-delay:40ms}
.pl21-stagger > .pl21-reveal:nth-child(2){transition-delay:90ms}
.pl21-stagger > .pl21-reveal:nth-child(3){transition-delay:140ms}
.pl21-stagger > .pl21-reveal:nth-child(4){transition-delay:190ms}
.pl21-stagger > .pl21-reveal:nth-child(5){transition-delay:240ms}
.pl21-stagger > .pl21-reveal:nth-child(6){transition-delay:290ms}

/* Hero */
.f20-hero h1,.f20-hero-subtitle,.f20-search{opacity:0;transform:translateY(18px);animation:pl21HeroIn .8s var(--pl21-ease) forwards}
.f20-hero h1{animation-delay:100ms}
.f20-hero-subtitle{animation-delay:220ms}
.f20-search{animation-delay:360ms}
.f20-hero-gradient{background-size:200% 100%;animation:pl21Gradient 7s ease-in-out infinite}
@keyframes pl21HeroIn{to{opacity:1;transform:none}}
@keyframes pl21Gradient{0%,100%{background-position:0 50%}50%{background-position:100% 50%}}

/* Pequenos brilhos decorativos */
.pl21-sparkle{position:absolute;width:5px;height:5px;border-radius:50%;background:#e879f9;box-shadow:0 0 18px rgba(217,70,239,.85);pointer-events:none;animation:pl21Sparkle 3.8s ease-in-out infinite}
@keyframes pl21Sparkle{0%,100%{opacity:.2;transform:scale(.7) translateY(0)}50%{opacity:.95;transform:scale(1.15) translateY(-8px)}}

/* Header */
.f20-header-shell,.site-header,.admin-header{transition:box-shadow 280ms ease,border-color 280ms ease,background 280ms ease,transform 280ms var(--pl21-ease)}
.pl21-scrolled .f20-header-shell{box-shadow:0 14px 40px rgba(0,0,0,.24),0 0 30px rgba(168,85,247,.08)}
.f20-header-action,.site-header a,.admin-nav-link{transition:transform 180ms var(--pl21-ease),background 180ms ease,border-color 180ms ease,color 180ms ease,box-shadow 180ms ease}
.f20-header-action:hover{transform:translateY(-2px) scale(1.035)}
.f20-header-action:active{transform:translateY(0) scale(.96)}

/* Busca */
.f20-search,.f20-sticky-search{transition:box-shadow 260ms ease,border-color 260ms ease,transform 260ms var(--pl21-ease)}
.f20-search:focus-within,.f20-sticky-search:focus-within{box-shadow:0 0 0 1px rgba(217,70,239,.35),0 0 34px rgba(168,85,247,.14)}
.f20-search button,.f20-sticky-search button{transition:transform 180ms var(--pl21-spring),box-shadow 220ms ease,filter 220ms ease}
.f20-search button:hover,.f20-sticky-search button:hover{transform:scale(1.07);filter:brightness(1.08);box-shadow:0 0 24px rgba(217,70,239,.3)}
.f20-search button:active,.f20-sticky-search button:active{transform:scale(.92)}

/* Botões gerais / ripple */
button,.btn,a[role="button"],.f10-link,.primary-btn,.secondary-btn{transition:transform 180ms var(--pl21-ease),box-shadow 220ms ease,filter 180ms ease,border-color 180ms ease,background 180ms ease}
button:hover,.btn:hover,.primary-btn:hover,.secondary-btn:hover{transform:translateY(-1px)}
button:active,.btn:active,.primary-btn:active,.secondary-btn:active{transform:translateY(0) scale(.985)}
.pl21-ripple{position:absolute;border-radius:999px;pointer-events:none;transform:scale(0);background:rgba(255,255,255,.28);animation:pl21Ripple 520ms ease-out forwards}
@keyframes pl21Ripple{to{transform:scale(3.2);opacity:0}}

/* Cards */
.f10-prompt-card,.prompt-card,.f10-category-card,.category-card,.f10-creator-card,.creator-card,.collection-card,.favorite-card,.admin-card,.admin-stat-card,.stat-card,.account-card,.profile-card,.auth-card,.create-form,.create-hero,.prompt-detail,.prompt-panel,.prompt-gallery{will-change:transform}
.f10-prompt-card,.prompt-card,.f10-category-card,.category-card,.f10-creator-card,.creator-card,.collection-card,.favorite-card{transition:transform 320ms var(--pl21-ease),box-shadow 320ms ease,border-color 260ms ease,background 260ms ease}
.f10-prompt-card:hover,.prompt-card:hover,.f10-category-card:hover,.category-card:hover,.f10-creator-card:hover,.creator-card:hover,.collection-card:hover,.favorite-card:hover{transform:translateY(-5px);box-shadow:0 20px 50px rgba(0,0,0,.28),0 0 30px rgba(168,85,247,.08)}
.f10-prompt-card img,.prompt-card img,.favorite-card img,.collection-card img{transition:transform 600ms var(--pl21-ease),filter 400ms ease}
.f10-prompt-card:hover img,.prompt-card:hover img,.favorite-card:hover img,.collection-card:hover img{transform:scale(1.025);filter:saturate(1.04)}

/* Galeria */
.prompt-gallery img,.prompt-gallery-main img,.prompt-image-main img{transition:opacity 260ms ease,transform 600ms var(--pl21-ease),filter 400ms ease}
.prompt-gallery-thumb,.gallery-thumb,.prompt-thumbnail{transition:transform 180ms var(--pl21-spring),border-color 180ms ease,box-shadow 180ms ease,opacity 180ms ease}
.prompt-gallery-thumb:hover,.gallery-thumb:hover,.prompt-thumbnail:hover{transform:translateY(-2px) scale(1.025)}

/* Imagens carregando */
img.pl21-image{opacity:0;filter:blur(7px);transform:scale(1.015);transition:opacity 500ms ease,filter 650ms ease,transform 650ms var(--pl21-ease)}
img.pl21-image.pl21-loaded{opacity:1;filter:none;transform:none}

/* Favorito */
.pl-icon-heart.pl21-heart-pop{animation:pl21Heart 420ms var(--pl21-spring)}
@keyframes pl21Heart{0%{transform:scale(1)}40%{transform:scale(1.35)}75%{transform:scale(.9)}100%{transform:scale(1)}}

/* Estatísticas */
.pl21-counter{font-variant-numeric:tabular-nums}
.pl21-counting{opacity:.72}

/* Inputs */
input,textarea,select{transition:border-color 220ms ease,box-shadow 220ms ease,background 220ms ease,transform 180ms ease}
input:focus,textarea:focus,select:focus{transform:translateY(-1px)}

/* Upload */
.image-slot,.create-image-preview > *,[type="file"]{transition:border-color 220ms ease,box-shadow 220ms ease,transform 220ms var(--pl21-ease),background 220ms ease}
.image-slot:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(168,85,247,.08)}
.pl21-upload-active{border-color:#d946ef!important;box-shadow:0 0 0 2px rgba(217,70,239,.15),0 16px 36px rgba(168,85,247,.12)!important;transform:translateY(-2px)}

/* Toast */
.f10-toast,.admin-toast,#adminToast{animation-duration:320ms;animation-timing-function:var(--pl21-ease)}
.pl21-toast-in{animation:pl21ToastIn 360ms var(--pl21-ease) both}
@keyframes pl21ToastIn{from{opacity:0;transform:translate3d(0,12px,0) scale(.97)}to{opacity:1;transform:none}}

/* Loading / skeleton */
.pl21-skeleton{position:relative;overflow:hidden;background:rgba(255,255,255,.045)!important;color:transparent!important;border-color:transparent!important}
.pl21-skeleton::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);animation:pl21Shimmer 1.25s infinite}
@keyframes pl21Shimmer{100%{transform:translateX(100%)}}
.pl21-spinner{width:22px;height:22px;border:2px solid rgba(255,255,255,.18);border-top-color:#d946ef;border-right-color:#8b5cf6;border-radius:50%;animation:pl21Spin .75s linear infinite}
@keyframes pl21Spin{to{transform:rotate(360deg)}}

/* Modais */
.pl21-modal-backdrop{animation:pl21FadeIn 180ms ease both}
.pl21-modal-panel{animation:pl21ModalIn 360ms var(--pl21-ease) both}
@keyframes pl21FadeIn{from{opacity:0}to{opacity:1}}
@keyframes pl21ModalIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}

/* Botão topo */
.pl21-back-top{opacity:0;visibility:hidden;transform:translateY(10px) scale(.92);transition:opacity 220ms ease,visibility 220ms ease,transform 220ms var(--pl21-ease)}
.pl21-back-top.pl21-show{opacity:1;visibility:visible;transform:none}

/* Cursor glow desktop */
.pl21-pointer-glow{position:fixed;z-index:0;width:260px;height:260px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,rgba(168,85,247,.085),transparent 68%);transform:translate(-50%,-50%);opacity:0;transition:opacity 300ms ease;mix-blend-mode:screen}
.pl21-pointer-glow.pl21-active{opacity:1}

/* Parallax decor */
.pl21-parallax{transform:translate3d(0,var(--pl21-parallax-y,0),0);transition:transform 100ms linear}

/* Focus acessível */
:where(a,button,input,textarea,select,[tabindex]):focus-visible{outline:2px solid rgba(217,70,239,.72);outline-offset:3px}
.f20-search input:focus-visible,.f20-sticky-search input:focus-visible{outline:none}

/* Redução de movimento */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.001ms!important}
  html:not(.pl-page-ready) body{opacity:1}
  .pl21-reveal{opacity:1!important;transform:none!important;filter:none!important}
  .pl21-pointer-glow{display:none!important}
}

@media (max-width:700px){
  .pl21-pointer-glow{display:none}
  .f10-prompt-card:hover,.prompt-card:hover,.f10-category-card:hover,.category-card:hover,.f10-creator-card:hover,.creator-card:hover,.collection-card:hover,.favorite-card:hover{transform:translateY(-2px)}
}

.pl21-back-top{position:fixed;right:22px;bottom:22px;z-index:10040;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(15,11,24,.88);color:#fff;backdrop-filter:blur(16px);box-shadow:0 12px 30px rgba(0,0,0,.28),0 0 22px rgba(168,85,247,.08);display:grid;place-items:center;padding:0;cursor:pointer}
.pl21-back-top:hover{box-shadow:0 14px 34px rgba(0,0,0,.32),0 0 30px rgba(217,70,239,.16)}
.pl21-back-top .pl-icon{width:20px;height:20px}
.pl21-field-focus{transition:transform 180ms var(--pl21-ease),filter 180ms ease}
.pl21-field-focus{transform:translateY(-1px)}

/* Evita que animações criem uma camada sobre elementos interativos */
.pl21-sparkle,.pl21-pointer-glow{z-index:0}
.f20-hero > *:not(.pl21-sparkle){position:relative;z-index:1}