/* Efeitos premium do site institucional (spec visual premium §5–§7).
   Melhoria progressiva: sem este arquivo o site funciona inteiro. Tudo some ou fica estático com
   prefers-reduced-motion e em alto contraste. */

@property --beam-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Lenis 1.3.26 (dist/lenis.css, obrigatório) + o site usa scroll-behavior: smooth no <html>, que briga
   com o scrollTo que o Lenis faz a cada quadro: com o Lenis ligado, o scroll nativo fica "auto". */
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* SplitText assume a entrada do título quando carregou a tempo (senão vale a revelação por linha). */
html.fx-split .hero h1 .line > span { transform: none !important; transition: none !important; }

/* Spotlight: brilho que segue o cursor; tilt de 3° nos cartões marcados. */
.fx-spot { position: relative; }
.fx-spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(169, 212, 106, .24), transparent 62%);
  transition: opacity .35s;
}
.fx-spot:hover::after { opacity: 1; }
.fx-tilt { transition: transform .5s cubic-bezier(.16, 1, .3, 1); will-change: transform; }

/* Shimmer: uma passada de luz a cada 6 s nos botões principais. */
.fx-shimmer { position: relative; overflow: hidden; isolation: isolate; }
.fx-shimmer::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .42) 50%, transparent 65%);
  transform: translateX(-130%);
}
html.motion-ok .fx-shimmer::before { animation: fx-shimmer 6s ease-in-out 2.4s infinite; }
@keyframes fx-shimmer { 0%, 72% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }

/* Border beam: feixe correndo na borda, só no CTA principal. */
.fx-beam { position: relative; }
.fx-beam::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; pointer-events: none;
  background: conic-gradient(from var(--beam-a), transparent 0 68%, var(--lime) 80%, #fff 87%, transparent 95%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude;
}
html.motion-ok .fx-beam::after { animation: fx-beam 4.5s linear infinite; }
@keyframes fx-beam { to { --beam-a: 360deg; } }

/* Dock: o próprio <nav> do cabeçalho ganha magnificação perto do cursor (ramo 8: continua um nav de links). */
.fx-dock a { transform: translateY(calc((var(--s, 1) - 1) * -14px)) scale(var(--s, 1)); transform-origin: 50% 100%; transition: transform .16s ease-out; }

/* Símbolo em vidro (troféu do kit): dois triângulos sobre o quadrado vermelho, reflexo ao mouse. */
.vidro {
  position: absolute; right: clamp(8px, 3vw, 40px); top: clamp(4px, 1.5vw, 20px); width: 68px; height: 68px;
  border-radius: 16px; overflow: hidden; transform: rotate(-7deg);
  background: linear-gradient(135deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .05));
  border: 1px solid rgba(255, 255, 255, .38); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 24px 44px -20px rgba(0, 0, 0, .6);
  -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
}
.vidro i { position: absolute; inset: 13px; }
.vidro i:nth-child(1) { background: rgba(229, 37, 33, .78); }
.vidro i:nth-child(2) { background: rgba(169, 212, 106, .92); clip-path: polygon(0 0, 100% 50%, 0 50%); }
.vidro i:nth-child(3) { background: rgba(111, 154, 46, .92); clip-path: polygon(0 50%, 100% 50%, 0 100%); }
.vidro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70px circle at var(--rx, 30%) var(--ry, 20%), rgba(255, 255, 255, .55), transparent 60%);
  mix-blend-mode: screen;
}
@media (max-width: 900px) { .vidro { display: none; } }
html[data-contrast="high"] .vidro { display: none; }

/* FeyCards: peças do kit em leque, dirigidas pelo scroll; cada uma abre no padrão Apple Card. */
.fey { margin: 6px 0 clamp(36px, 5vw, 60px); overflow-x: clip; }
.fey__stage { position: relative; height: clamp(250px, 32vw, 430px); }
.fey__card {
  position: absolute; left: 50%; top: 44%; width: min(44%, 430px); aspect-ratio: 16 / 9; padding: 0; border: 0;
  border-radius: 18px; overflow: hidden; cursor: pointer; background: var(--surface);
  box-shadow: 0 24px 60px -24px rgba(15, 43, 51, .5); transition: box-shadow .3s;
}
.fey__card img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fey__card:nth-child(1) { z-index: 1; transform: translate(-50%, -50%) translateX(-92%) translateY(8%) rotate(-18deg); }
.fey__card:nth-child(2) { z-index: 2; transform: translate(-50%, -50%) translateX(-46%) translateY(4%) rotate(-9deg); }
.fey__card:nth-child(3) { z-index: 3; transform: translate(-50%, -50%); }
.fey__card:nth-child(4) { z-index: 2; transform: translate(-50%, -50%) translateX(46%) translateY(4%) rotate(9deg); }
.fey__card:nth-child(5) { z-index: 1; transform: translate(-50%, -50%) translateX(92%) translateY(8%) rotate(18deg); }
.fey__card:hover, .fey__card:focus-visible { z-index: 4; outline: none; box-shadow: 0 30px 70px -20px rgba(15, 43, 51, .55), 0 0 0 3px var(--lime); }
.fey__frase { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; text-align: center; font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: clamp(1rem, 2.2vw, 1.5rem); color: var(--petrol); }
.fey__frase span:nth-child(2) { color: var(--green-text); }
@media (max-width: 640px) {
  .fey__stage { height: 250px; }
  .fey__card { width: 58%; }
  /* Leque mais fechado (fator 0,4), igual ao que o efeitos.js aplica em telas < 600 px. */
  .fey__card:nth-child(1) { transform: translate(-50%, -50%) translateX(-36.8%) translateY(8%) rotate(-18deg); }
  .fey__card:nth-child(2) { transform: translate(-50%, -50%) translateX(-18.4%) translateY(4%) rotate(-9deg); }
  .fey__card:nth-child(4) { transform: translate(-50%, -50%) translateX(18.4%) translateY(4%) rotate(9deg); }
  .fey__card:nth-child(5) { transform: translate(-50%, -50%) translateX(36.8%) translateY(8%) rotate(18deg); }
}
html[data-contrast="high"] .fey__card { border: 2px solid #FFFF00; }

/* Card das peças (mesmo padrão Apple Card do card do município). */
.pcard .mcard__inner { padding: 0; border-left: 0; }
.pcard .mcard__inner::before { display: none; }
.pcard img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pcard__body { padding: clamp(20px, 3vw, 32px); }
.pcard h3 { margin: 0 48px 8px 0; font-size: clamp(1.5rem, 3vw, 2rem); }
.pcard p { margin: 0; color: var(--muted); }
.pcard .mcard__close { background: rgba(255, 255, 255, .9); }

/* AnimateGrid: parceiros em grade com perspectiva, plana em reduced-motion e alto contraste. */
.parceiros { margin-top: clamp(40px, 5vw, 64px); perspective: 1100px; }
.parceiros .kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font-weight: 500; }
.agrid {
  list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px;
  transform: rotateX(8deg) rotateY(-6deg); transform-style: preserve-3d; transition: transform .9s cubic-bezier(.16, 1, .3, 1);
}
.parceiros:hover .agrid, .parceiros:focus-within .agrid { transform: rotateX(3deg) rotateY(-2deg); }
.agrid li { display: grid; place-items: center; height: 104px; padding: 16px 20px; background: #fff; border: 1px solid var(--line); border-radius: 14px; transition: transform .4s cubic-bezier(.16, 1, .3, 1), border-color .3s, box-shadow .4s; }
.agrid li:hover { transform: translateZ(26px); border-color: var(--lime); box-shadow: 0 18px 40px -20px rgba(111, 154, 46, .7); }
.agrid img { display: block; max-width: 100%; max-height: 60px; width: auto; height: auto; object-fit: contain; }
@media (max-width: 640px) { .agrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .agrid, .parceiros:hover .agrid { transform: none; } }
html[data-contrast="high"] .agrid { transform: none; }
html[data-contrast="high"] .agrid li { border: 2px solid #FFFF00; }

/* Aurora: fundo vivo no fecho (contato), 8 % de presença, estático sem movimento. */
.fx-aurora { position: relative; isolation: isolate; overflow: hidden; }
.fx-aurora::before {
  content: ""; position: absolute; inset: -30%; z-index: -1; pointer-events: none; opacity: .55; filter: blur(40px);
  background:
    radial-gradient(40% 35% at 20% 30%, rgba(147, 200, 62, .22), transparent 70%),
    radial-gradient(35% 30% at 80% 20%, rgba(111, 154, 46, .16), transparent 70%),
    radial-gradient(45% 40% at 60% 85%, rgba(169, 212, 106, .2), transparent 70%);
}
html.motion-ok .fx-aurora::before { animation: fx-aurora 24s ease-in-out infinite alternate; }
@keyframes fx-aurora { to { transform: translate3d(6%, -4%, 0) rotate(8deg) scale(1.08); } }
html[data-contrast="high"] .fx-aurora::before { display: none; }

@media (prefers-reduced-motion: reduce) {
  .fx-tilt { transform: none !important; }
  .fx-dock a { transform: none !important; }
}
