/* Azul elétrico substitui todos os destaques verde-limão da identidade. */
:root {
  --lime: #67b7ff;
}

.brand-seal { width: 35px; height: 46px; object-fit: contain; filter: drop-shadow(0 0 10px rgba(103, 183, 255, .18)); }

/* Tratamento holográfico da foto: menos “foto solta”, mais leitura de sensor urbano. */
.hero-visual .data-window { transform: translate(var(--parallax-x, 0), var(--parallax-y, 0)) rotate(-2deg); border-color: rgba(103, 183, 255, .6); box-shadow: 18px 22px 0 rgba(2, 8, 18, .3), 0 0 80px rgba(103, 183, 255, .16); }
.city-image { background: #102a43; border-bottom: 1px solid rgba(103, 183, 255, .28); }
.city-image img { object-position: center 53%; filter: grayscale(.88) saturate(.72) contrast(1.2) brightness(.8); mix-blend-mode: normal; opacity: .9; }
.image-shade { background: linear-gradient(135deg, rgba(4, 18, 36, .2), rgba(5, 29, 54, .12) 42%, rgba(2, 10, 23, .88)), linear-gradient(0deg, rgba(103, 183, 255, .13), transparent 60%), repeating-linear-gradient(90deg, transparent 0 39px, rgba(103, 183, 255, .1) 40px 41px); }
.city-image:before { content: ''; position: absolute; z-index: 2; inset: 13px; border: 1px solid rgba(179, 239, 255, .28); pointer-events: none; clip-path: polygon(0 0, 20px 0, 20px 1px, 0 1px, 0 20px, 1px 20px, 1px 0, 100% 0, 100% 20px, calc(100% - 1px) 20px, calc(100% - 1px) 0, 100% 0, 100% 100%, calc(100% - 20px) 100%, calc(100% - 20px) calc(100% - 1px), 100% calc(100% - 1px), 100% calc(100% - 20px), calc(100% - 1px) calc(100% - 20px), calc(100% - 1px) 100%, 0 100%, 0 calc(100% - 20px), 1px calc(100% - 20px), 1px 100%, 0 100%); }
.image-kicker, .image-signal { position: absolute; z-index: 3; top: 21px; color: #b3eaff; font: 7px var(--mono); letter-spacing: .1em; }.image-kicker { left: 23px; }.image-signal { right: 23px; color: var(--lime); }.image-signal i { display: inline-block; width: 5px; height: 5px; margin-left: 4px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; }
.city-image p { z-index: 3; text-shadow: 0 2px 12px #031121; }

.orb-one {
  background: radial-gradient(circle at 40% 40%, rgba(103, 183, 255, .24), rgba(101, 227, 225, .07) 40%, transparent 66%);
}

/* Entrada em camadas + microinterações da interface. */
body:not(.motion-ready) .site-header,
body:not(.motion-ready) .hero-copy,
body:not(.motion-ready) .hero-visual,
body:not(.motion-ready) .hero-bottom,
body:not(.motion-ready) .marquee {
  opacity: 0;
}

body.motion-ready .topline { animation: slide-down .65s cubic-bezier(.2,.8,.2,1) both; }
body.motion-ready .site-header { animation: slide-down .8s .08s cubic-bezier(.2,.8,.2,1) both; }
body.motion-ready .hero-copy { animation: hero-in .9s .28s cubic-bezier(.2,.8,.2,1) both; }
body.motion-ready .hero-visual { animation: visual-in 1.1s .4s cubic-bezier(.16,.8,.2,1) both; }
body.motion-ready .hero-bottom { animation: fade-in .8s 1s both; }
body.motion-ready .marquee { animation: fade-in .8s 1.15s both; }

.hero-copy .eyebrow { animation: tracking-in .8s .55s both; }
.hero-copy h1 { animation: text-rise .8s .66s both; }
.hero-copy .hero-description { animation: text-rise .8s .78s both; }
.hero-copy .hero-cta { animation: text-rise .8s .9s both; }
.hero-copy .hero-meta { animation: text-rise .8s 1.02s both; }
.data-window:after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.13) 50%, transparent 62%); transform: translateX(-130%); animation: scan 3.8s 1.7s ease-in-out infinite; }
.floating-tag { animation: bob 4.5s ease-in-out infinite; }
.tag-two { animation-delay: -1.7s; }
.initiative-card:after { content: ''; position: absolute; top: 0; left: -90%; width: 55%; height: 100%; transform: skewX(-18deg); background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transition: left .65s ease; }
.initiative-card:hover { transform: translateY(-9px) perspective(700px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
.event-row:hover, .small-news:hover, .featured-news:hover { transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); }
.initiative-card:hover:after { left: 140%; }
.button-primary, .button-dark, .nav-portal { position: relative; overflow: hidden; }
.button-primary:after, .button-dark:after, .nav-portal:after { content: ''; position: absolute; top: 0; bottom: 0; left: -55%; width: 25%; transform: skewX(-20deg); background: rgba(255,255,255,.3); transition: left .45s ease; }
.button-primary:hover:after, .button-dark:hover:after, .nav-portal:hover:after { left: 135%; }

@keyframes slide-down { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: none; } }
@keyframes hero-in { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: none; } }
@keyframes visual-in { from { opacity: 0; transform: translate(30px, 20px) scale(.92) rotate(1deg); } to { opacity: 1; transform: none; } }
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tracking-in { from { opacity: 0; letter-spacing: .32em; } to { opacity: 1; letter-spacing: .14em; } }
@keyframes text-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes scan { 0%, 20% { transform: translateX(-130%); } 56%, 100% { transform: translateX(130%); } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }

@media (prefers-reduced-motion: reduce) {
  *, *:before, *:after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
  body:not(.motion-ready) .site-header, body:not(.motion-ready) .hero-copy, body:not(.motion-ready) .hero-visual, body:not(.motion-ready) .hero-bottom, body:not(.motion-ready) .marquee { opacity: 1; }
}

/* Fundo holográfico do hero — imagem estilo código/futurista. */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  pointer-events: none;
  opacity: .6;
  filter: blur(2px);
  transform: scale(1.03);
}

.hero-bg:after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(7, 17, 31, .6) 0%, rgba(7, 17, 31, .3) 42%, rgba(7, 17, 31, 0) 70%);
}

@media (max-width: 850px) {
  .hero-bg { opacity: .45; }
}