/* ===========================
   style.css - SHADOW BOT Futurista v3 (Neon Sci-Fi)
   =========================== */

/* ---------- Variáveis ---------- */
:root {
  --bg-900: #0b0b0d;
  --bg-800: #121217;
  --panel: rgba(18,18,24,0.62);
  --glass: rgba(255,255,255,0.03);
  --accent-blue: #0d6efd;
  --accent-green: #3f971c;
  --accent-purple: #8a2be2;
  --accent-pink: #ff4fcf;
  --muted: #bfc9d9;
  --card-shadow: 0 8px 28px rgba(0,0,0,0.55);
  --topbar-height: 55px;
  --sidebar-width: 240px;
  --btn-gradient: linear-gradient(135deg, #0d6efd, #3f971c, #8a2be2, #ff4fcf);
  --neon-shadow: 0 0 8px rgba(13,110,253,0.7), 0 0 16px rgba(58,123,255,0.5);
}

/* ---------- Reset & Base ---------- */
* { box-sizing: border-box; margin:0; padding:0; }
html, body { height:100%; }
body {
  font-family: "Inter", "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, #08080a 0%, #0f0f12 100%);
  color:#e8eef8;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  padding-top: calc(var(--topbar-height) + 12px);
  overflow-x:hidden;
  animation: bgFade 8s ease-in-out infinite alternate;
}
@keyframes bgFade {
  0% { background: linear-gradient(180deg, #08080a, #0f0f12); }
  100% { background: linear-gradient(180deg, #0a0a0f, #141420); }
}

/* ---------- Partículas Interativas de Fundo ---------- */
.background {
  position:fixed; inset:0;
  z-index:-10;
  overflow:hidden;
}
.particle {
  position:absolute;
  border-radius:50%;
  background: rgba(255,255,255,0.08);
  box-shadow: 0 0 12px rgba(255,255,255,0.35), 0 0 20px rgba(255,255,255,0.15);
  animation: floatParticle linear infinite;
}
@keyframes floatParticle {
  0% { transform: translateY(0) translateX(0) scale(1); opacity:0.3; }
  50%{ opacity:0.6; }
  100%{ transform: translateY(-120vh) translateX(40vw) scale(1.3); opacity:0; }
}

/* ---------- Top Bar ---------- */
.top-bar {
  position: fixed; top:0; left:0; right:0;
  height: var(--topbar-height);
  display:flex; align-items:center; justify-content:flex-end;
  padding:0 18px; gap:12px;
  background: rgba(12,12,14,0.72);
  backdrop-filter: blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.05);
  z-index:1600;
}

#datetime {
  position: absolute;
  right: 15px;  /* fixa à direita */
  top: 97%;
  transform: translateY(-50%); /* centraliza verticalmente */
  
  color: #0d6efd;
  font-weight: 700;
  font-size: 18px;
  background: rgba(12, 12, 14, 0.9);
  padding: 6px 12px;
  border-radius: 10px;
}

.top-bar-link {
  color: var(--accent-green);
  font-size:28px;
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px;
  border-radius:12px;
  text-decoration:none;
  transition: all .28s ease-in-out;
  box-shadow: var(--neon-shadow);
}
.top-bar-link:hover {
  transform: translateY(-2px) scale(1.12) rotate(4deg);
  color: var(--accent-pink);
  text-shadow: 0 0 14px var(--accent-pink), 0 0 26px rgba(255,79,207,0.55);
}

/* ---------- Toggle Button ---------- */
.toggle-btn {
  position: fixed; top:0px; left:40px;
  width:0px; height:56px; border-radius:14px; border:none;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.01));
  box-shadow: 0 6px 20px rgba(0,0,0,0.5), 0 0 12px rgba(13,110,253,0.6);
  color: #e9f5ff; font-size:48px;
  z-index:1750;
  transition: all .28s ease-in-out;
}
.toggle-btn:hover { 
  box-shadow: 0 10px 28px rgba(0,0,0,0.65), 0 0 22px rgba(13,110,253,0.9); 
  transform: scale(1.08);
}
.toggle-btn:active { transform: scale(.96); }

/* ---------- Sidebar ---------- */
.sidebar {
  position: fixed; top:0; left:0;
  width: var(--sidebar-width); height:100vh;
  padding: calc(var(--topbar-height)+16px) 14px 24px;
  background: linear-gradient(180deg, rgba(10,10,14,0.98), rgba(18,18,24,0.98));
  box-shadow: 10px 0 40px rgba(0,0,0,0.6), 0 0 20px rgba(13,110,253,0.4);
  transform: translateX(-110%);
  transition: transform .34s cubic-bezier(.2,.9,.2,1), box-shadow .22s;
  z-index:1700; overflow:auto; -webkit-overflow-scrolling:touch;
}
.sidebar.active { transform: translateX(0); }
.sidebar-title {
  color: var(--accent-blue);
  font-weight:800; text-align:center; margin:6px 0 18px;
  font-size:1.2rem; letter-spacing:1px; text-shadow:0 0 14px rgba(13,110,253,0.8);
}
.sidebar .nav-link {
  display:flex; align-items:center; gap:10px;
  color: var(--muted);
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  font-weight:600;
  transition: all .28s ease-in-out;
}
.sidebar .nav-link:hover {
  background: rgba(255,255,255,0.06);
  color:#fff;
  transform: translateX(6px) scale(1.05);
  text-shadow:0 0 12px rgba(255,255,255,0.4);
}
.sidebar .menu-icon { font-size:20px; color:var(--accent-blue); }
.sidebar .menu-title { flex:1; font-size:.95rem; letter-spacing:.6px; }
.sub-menu .nav-link { padding-left:14px; font-weight:500; color:#cbd6e6; }
.sub-menu .nav-link:hover { background: rgba(15,20,30,0.7); }
.menu-arrow { margin-left:8px; opacity:.85; transition: transform .24s; }
.menu-arrow.open { transform: rotate(90deg); }

/* ---------- Overlay ---------- */
.overlay {
  position:fixed; inset:0;
  background: rgba(2,2,4,0.55);
  backdrop-filter: blur(4px);
  opacity:0; visibility:hidden;
  transition: opacity .24s ease, visibility .24s;
  z-index:1650;
}
.overlay.active { opacity:1; visibility:visible }

/* ---------- Header / Title Neon ---------- */
.header {
  max-width:1200px; margin:6px auto 6px; padding:18px 20px;
  text-align:center; position:relative; z-index:1;
}
.title {
  font-weight:900; font-size:3rem; letter-spacing:3px; line-height:1;
  color: transparent;
  background: linear-gradient(90deg, #0d6efd, #3f971c, #8a2be2, #ff4fcf);
  -webkit-background-clip: text; background-clip: text;
  animation: neonGradient 6s ease infinite;
  text-shadow: 0 0 14px #0d6efd, 0 0 28px #3f971c, 0 0 34px #8a2be2, 0 0 44px #ff4fcf;
}
@keyframes neonGradient {
  0%, 100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}
.wave-text span {
  display:inline-block; animation:wave .9s ease-in-out infinite;
  transition: transform .3s;
}
.wave-text span:hover { transform: translateY(-10px) rotate(-4deg) scale(1.1); }
.wave-text span:nth-child(odd) { animation-duration:1s; transform-origin:center; }
@keyframes wave { 0%{transform:translateY(0)}50%{transform:translateY(-6px)}100%{transform:translateY(0)} }

/* ---------- Search Sections Neon ---------- */
.search-section {
  max-width:980px; margin:18px auto;
  background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  border-radius:20px; padding:26px;
  box-shadow: 0 14px 44px rgba(0,0,0,0.78), 0 0 14px rgba(13,110,253,0.6);
  backdrop-filter: blur(14px);
  transition: all .28s ease-in-out;
}
.search-section:hover { 
  transform: translateY(-6px) scale(1.02); 
  box-shadow: 0 20px 55px rgba(0,0,0,0.82), 0 0 28px rgba(255,79,207,0.6); 
}
.search-section h2 { 
  font-size:1.2rem; 
  color: var(--accent-pink); 
  margin-bottom:16px; 
  letter-spacing:0.8px; 
  text-shadow:0 0 8px rgba(255,79,207,0.6);
}

/* Inputs & Botões Neon */
.ff-search-container {
  display:flex; gap:12px; flex-wrap:wrap; align-items:center;
}
.ff-search-container input {
  flex:1; min-width:200px; padding:16px 20px;
  border-radius:18px; border:1px solid rgba(255,255,255,0.04);
  background: rgba(255,255,255,0.05); color:#e6f0ff;
  outline:none; transition: all .35s ease;
}
.ff-search-container input:focus {
  box-shadow: 0 0 26px rgba(255,79,207,0.7), 0 0 38px rgba(138,43,226,0.4);
  border-color: var(--accent-pink);
  transform: scale(1.04);
}
.ff-search-container button {
  padding:16px 22px; border-radius:18px; border:none;
  background: linear-gradient(270deg, #0d6efd, #3f971c, #8a2be2, #ff4fcf);
  background-size: 400% 400%;
  color:#fff; font-weight:700; cursor:pointer;
  animation: btnGradient 4s ease infinite;
  transition: all .35s ease;
  position: relative;
  overflow: hidden;
}
.ff-search-container button::after {
  content:""; position:absolute; inset:0;
  background: radial-gradient(circle, rgba(255,255,255,0.35) 10%, transparent 40%);
  opacity:0; transition: opacity .3s;
}
.ff-search-container button:hover::after { opacity:1; }
.ff-search-container button:hover {
  transform: translateY(-4px) scale(1.09);
  box-shadow: 0 14px 30px rgba(0,0,0,0.7), 0 0 28px rgba(255,79,207,0.55);
}
@keyframes btnGradient {
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ---------- Resultado Neon ---------- */
.ff-result {
  margin-top:16px; padding:20px;
  border-radius:18px; background: rgba(8,8,12,0.72);
  border:1px solid rgba(255,255,255,0.05);
  color:#dfe9fb; font-size:0.97rem;
  box-shadow: 0 8px 28px rgba(0,0,0,0.6), 0 0 14px rgba(138,43,226,0.35);
  transition: all .3s ease-in-out;
}
.ff-result:hover { 
  transform: translateY(-5px); 
  box-shadow: 0 16px 44px rgba(0,0,0,0.75), 0 0 26px rgba(255,79,207,0.5); 
  filter: brightness(1.1); 
}

/* ---------- Hidden & Erro ---------- */
.hidden { display:none !important; }
.error-message { color:#ff7b7b; font-weight:700; text-shadow:0 0 4px #ff7b7b, 0 0 8px rgba(255,123,123,0.3); }

/* ---------- Gallery Neon ---------- */
.gallery-section {
  max-width: 1100px;
  margin: 18px auto 20px;
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
}
.media-card {
  background: rgba(255,255,255,0.02);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0,0,0,0.7), 0 0 14px rgba(13,110,253,0.5);
  transition: all .3s ease-in-out;
  max-width: 480px; width: 100%;
}
.media-card:hover {
  transform: translateY(-10px) scale(1.06);
  box-shadow: 0 22px 55px rgba(0,0,0,0.82), 0 0 32px rgba(255,79,207,0.6);
  filter: brightness(1.15);
}
.media-card iframe { width: 100%; height:280px; border:0; display:block; }
.site-card img { width: 100%; display: block; transition: all .4s ease; }
.site-card img:hover { transform: scale(1.06); filter: brightness(1.12); }
.site-caption {
  padding: 12px 14px; text-align:center;
  background: rgba(255,255,255,0.03);
  font-weight:600; transition: all .35s ease;
}
.site-caption:hover {
  background: rgba(255,255,255,0.08);
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.38), 0 0 14px rgba(138,43,226,0.35);
}

/* ---------- Footer ---------- */
.footer { 
  text-align:center; padding:30px 18px; color:#9aa8c7; 
  border-top:1px solid rgba(255,255,255,0.02); margin-top:30px; 
  text-shadow:0 0 4px rgba(0,0,0,0.4);
  transition: color .3s ease;
}
.footer:hover { color:#c7d4f2; }

/* ---------- Responsividade ---------- */
@media (max-width:900px){
  .title{ font-size:2rem }
  .sidebar{ width:78%; max-width:320px }
  body{ padding-top: calc(var(--topbar-height) + 14px); }
  .toggle-btn{ left:10px }
  .ff-search-container{ flex-direction:column; align-items:stretch }
  .media-card iframe{ height:240px }
}
@media (max-width:480px){
  .title{ font-size:1.7rem }
  .top-bar-link{ font-size:24px }
  .toggle-btn{ width:50px; height:50px; font-size:22px }
  body{ padding-top: calc(var(--topbar-height) + 16px); }
}