/* ============================================================
   GERADOR.CSS — AGÊNCIA ORION
   Estilos exclusivos da página /gerarimagem.
   Só o que o Tailwind não resolve sozinho: animações, shimmer,
   accordion e lightbox. Nenhuma outra página carrega este arquivo.
   ============================================================ */

/* --- Fundo aurora do hero da ferramenta --- */
.gi-aurora {
  position: relative;
  isolation: isolate;
}
.gi-aurora::before,
.gi-aurora::after {
  content: "";
  position: absolute;
  border-radius: 9999px;
  filter: blur(90px);
  pointer-events: none;
  z-index: -1;
}
.gi-aurora::before {
  width: 460px; height: 460px;
  top: -140px; right: -120px;
  background: rgba(98, 27, 238, 0.16);
}
.gi-aurora::after {
  width: 380px; height: 380px;
  bottom: -180px; left: -140px;
  background: rgba(168, 85, 247, 0.10);
}
.dark .gi-aurora::before { background: rgba(98, 27, 238, 0.26); }
.dark .gi-aurora::after  { background: rgba(168, 85, 247, 0.16); }

/* --- Grade técnica sutil atrás do card do gerador --- */
.gi-grid {
  background-image:
    linear-gradient(to right,  rgba(98, 27, 238, 0.055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(98, 27, 238, 0.055) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 100%);
}
.dark .gi-grid {
  background-image:
    linear-gradient(to right,  rgba(168, 85, 247, 0.09) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(168, 85, 247, 0.09) 1px, transparent 1px);
}

/* --- Textarea: barra de foco roxa --- */
.gi-textarea {
  transition: border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}
.gi-textarea:focus {
  outline: none;
  border-color: #621BEE;
  box-shadow: 0 0 0 4px rgba(98, 27, 238, 0.12);
}

/* --- Chips de opção (formato / estilo / qualidade / exemplos) --- */
.gi-chip { transition: all .18s ease; }
.gi-chip:hover { transform: translateY(-1px); }
.gi-chip[aria-pressed="true"],
.gi-chip.is-active {
  border-color: #621BEE;
  background: rgba(98, 27, 238, 0.07);
  color: #4900BE;
  box-shadow: 0 2px 10px rgba(98, 27, 238, 0.12);
}
.dark .gi-chip[aria-pressed="true"],
.dark .gi-chip.is-active {
  border-color: #8B45F0;
  background: rgba(98, 27, 238, 0.18);
  color: #CDBDFF;
  box-shadow: none;
}

/* --- Botão principal de geração --- */
.gi-generate {
  position: relative;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
}
.gi-generate:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(98, 27, 238, 0.42);
}
.gi-generate:active:not(:disabled) { transform: translateY(0); }
.gi-generate:disabled { opacity: .5; cursor: not-allowed; transform: none; }
/* varredura de brilho no hover */
.gi-generate::after {
  content: "";
  position: absolute;
  top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.28), transparent);
  transform: skewX(-18deg);
  transition: left .55s ease;
}
.gi-generate:hover:not(:disabled)::after { left: 130%; }

/* --- Shimmer do estado de carregamento --- */
.gi-shimmer {
  background: linear-gradient(
    100deg,
    rgba(98, 27, 238, 0.05) 20%,
    rgba(98, 27, 238, 0.16) 42%,
    rgba(168, 85, 247, 0.20) 52%,
    rgba(98, 27, 238, 0.16) 62%,
    rgba(98, 27, 238, 0.05) 84%
  );
  background-size: 220% 100%;
  animation: giShimmer 1.9s linear infinite;
}
.dark .gi-shimmer {
  background: linear-gradient(
    100deg,
    rgba(98, 27, 238, 0.10) 20%,
    rgba(98, 27, 238, 0.28) 42%,
    rgba(168, 85, 247, 0.34) 52%,
    rgba(98, 27, 238, 0.28) 62%,
    rgba(98, 27, 238, 0.10) 84%
  );
  background-size: 220% 100%;
  animation: giShimmer 1.9s linear infinite;
}
@keyframes giShimmer {
  0%   { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}

/* --- Barra de progresso indeterminada --- */
.gi-progress-bar {
  width: 40%;
  height: 100%;
  border-radius: 9999px;
  background: linear-gradient(90deg, #621BEE, #A855F7, #621BEE);
  animation: giProgress 1.6s cubic-bezier(.65,.05,.36,1) infinite;
}
@keyframes giProgress {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

/* --- Partículas discretas do loading --- */
.gi-spark {
  position: absolute;
  width: 5px; height: 5px;
  border-radius: 9999px;
  background: #A855F7;
  opacity: 0;
  animation: giSpark 3.2s ease-in-out infinite;
}
@keyframes giSpark {
  0%   { opacity: 0;   transform: translateY(14px) scale(.5); }
  35%  { opacity: .85; transform: translateY(-6px) scale(1); }
  70%  { opacity: .3;  transform: translateY(-26px) scale(.8); }
  100% { opacity: 0;   transform: translateY(-44px) scale(.4); }
}

/* --- Entrada suave do resultado --- */
.gi-reveal { animation: giReveal .55s cubic-bezier(.22,.75,.3,1) both; }
@keyframes giReveal {
  from { opacity: 0; transform: scale(.97) translateY(10px); filter: blur(6px); }
  to   { opacity: 1; transform: none; filter: none; }
}

/* --- Ícone pulsante do estado vazio --- */
.gi-idle-pulse { animation: giIdlePulse 3.4s ease-in-out infinite; }
@keyframes giIdlePulse {
  0%, 100% { opacity: .45; transform: scale(1); }
  50%      { opacity: .8;  transform: scale(1.06); }
}

/* --- Galeria: hover elegante --- */
.gi-gal-item img { transition: transform .55s cubic-bezier(.22,.75,.3,1); }
.gi-gal-item:hover img { transform: scale(1.06); }
.gi-gal-item .gi-gal-veil { transition: opacity .35s ease; }
.gi-gal-item:hover .gi-gal-veil { opacity: 1; }

/* --- FAQ accordion --- */
.gi-faq-panel {
  overflow: hidden;
  max-height: 0;
  transition: max-height .38s cubic-bezier(.4,0,.2,1), opacity .28s ease;
  opacity: 0;
}
.gi-faq-item.is-open .gi-faq-panel { opacity: 1; }
.gi-faq-icon { transition: transform .3s ease, color .3s ease; }
.gi-faq-item.is-open .gi-faq-icon { transform: rotate(45deg); color: #621BEE; }

/* --- Card de plano em destaque --- */
.gi-plan { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.gi-plan:hover { transform: translateY(-4px); }

/* --- Lightbox da galeria --- */
#gi-lightbox { transition: opacity .25s ease; }
#gi-lightbox.is-open { opacity: 1; pointer-events: auto; }
#gi-lightbox img { animation: giReveal .4s ease both; }

/* --- Toast --- */
#gi-toast {
  transition: transform .35s cubic-bezier(.22,.75,.3,1), opacity .3s ease;
  transform: translateY(24px);
  opacity: 0;
  pointer-events: none;
}
#gi-toast.is-visible { transform: translateY(0); opacity: 1; }

/* --- Respeita redução de movimento --- */
@media (prefers-reduced-motion: reduce) {
  .gi-shimmer, .gi-progress-bar, .gi-spark, .gi-idle-pulse { animation: none; }
  .gi-reveal { animation: none; }
  .gi-generate::after { display: none; }
  .gi-gal-item img { transition: none; }
  .gi-faq-panel { transition: none; }
}

/* ============================================================
   MODO LEGENDA — adicionado na etapa 2
   ============================================================ */

/* --- Alternador imagem | legenda --- */
.gi-mode-btn {
  color: #494456;
  transition: color .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.dark .gi-mode-btn { color: rgba(255,255,255,.45); }
.gi-mode-btn:hover { color: #621BEE; }
.gi-mode-btn[aria-selected="true"] {
  background: #ffffff;
  color: #4900BE;
  box-shadow: 0 2px 10px -2px rgba(28,27,27,.14);
}
.dark .gi-mode-btn[aria-selected="true"] {
  background: #16161a;
  color: #CDBDFF;
  box-shadow: 0 2px 10px -2px rgba(0,0,0,.5);
}

/* --- Área de upload da foto --- */
.gi-dropzone { transition: border-color .2s ease, background-color .2s ease, transform .2s ease; }
.gi-dropzone:hover { border-color: rgba(98,27,238,.55); background: rgba(98,27,238,.035); }
.gi-dropzone.is-dragover {
  border-color: #621BEE;
  background: rgba(98,27,238,.08);
  transform: scale(1.01);
}
.dark .gi-dropzone:hover     { background: rgba(98,27,238,.12); }
.dark .gi-dropzone.is-dragover { background: rgba(98,27,238,.2); }

/* --- Cartões de legenda --- */
.gi-cap-card { transition: border-color .2s ease, box-shadow .2s ease; }
.gi-cap-card:hover {
  border-color: rgba(98,27,238,.45);
  box-shadow: 0 8px 24px -14px rgba(98,27,238,.5);
}
.gi-cap-card .gi-cap-copy { transition: all .18s ease; }
.gi-cap-card:hover .gi-cap-copy { border-color: #621BEE; color: #621BEE; }
.gi-cap-card.is-copied .gi-cap-copy {
  background: #621BEE;
  border-color: #621BEE;
  color: #fff;
}

/* --- Entrada escalonada das opções de legenda --- */
.gi-cap-card { animation: giReveal .45s cubic-bezier(.22,.75,.3,1) both; }
.gi-cap-card:nth-child(2) { animation-delay: .07s; }
.gi-cap-card:nth-child(3) { animation-delay: .14s; }

@media (prefers-reduced-motion: reduce) {
  .gi-cap-card { animation: none; }
  .gi-dropzone { transition: none; }
}