/* ==========================================================================
   Movimento e efeitos de tecnologia
   - imagens entram por trás de uma cortina dourada, com zoom suave
   - fundo do hero com movimento lento (ken burns)
   - títulos entram palavra por palavra; chamadas "decodificam" (tecnologia.js)
   - brilho que segue o ponteiro nos cartões; barra de progresso de leitura
   ========================================================================== */

/* ---------- Imagens: cortina dourada ---------- */

.img-reveal { position: relative; overflow: hidden; }
.img-reveal::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold) 60%, var(--gold-hi));
  transform: scaleX(0); transform-origin: left;
}
.img-reveal.in::after { animation: cortina 1.15s var(--ease) var(--d, 0s) forwards; }
.img-reveal img, .img-reveal video { transition: clip-path .01s linear calc(var(--d, 0s) + .5s), transform 1.6s var(--ease) calc(var(--d, 0s) + .45s), filter .5s; }
.js .img-reveal:not(.in) img { clip-path: inset(0 100% 0 0); transform: scale(1.18); }
@keyframes cortina {
  0% { transform: scaleX(0); transform-origin: left; }
  45% { transform: scaleX(1); transform-origin: left; }
  55% { transform: scaleX(1); transform-origin: right; }
  100% { transform: scaleX(0); transform-origin: right; }
}

/* linha de varredura que atravessa a imagem uma vez, depois da cortina */
.img-reveal::before {
  content: ''; position: absolute; left: 0; right: 0; top: -20%; height: 20%; z-index: 3; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, var(--glow) 80%, var(--gold-hi));
  mix-blend-mode: screen;
}
.img-reveal.in::before { animation: varre 1.4s ease-in-out calc(var(--d, 0s) + 1.1s) 1; }
@keyframes varre { 0% { top: -20%; opacity: 1; } 100% { top: 110%; opacity: 0; } }

/* ---------- Hero: fundo em movimento lento ---------- */

.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, var(--ink) 0%, var(--veil) 45%, transparent 80%),
    radial-gradient(60% 70% at 100% 0%, var(--glow) 0%, transparent 62%),
    url('../img/site/bg-juliana.jpg') right center / cover no-repeat;
  transform-origin: 80% 40%;
  animation: kenburns 22s ease-in-out infinite alternate;
}
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09) translateX(-1.5%); } }

/* ---------- Ícones: entram girando ---------- */

.ico { transition: transform .7s cubic-bezier(.3, 1.6, .5, 1) calc(var(--d, 0s) + .25s), opacity .4s calc(var(--d, 0s) + .25s); }
.js .reveal:not(.in) .ico { opacity: 0; transform: scale(.4) rotate(-25deg); }
.tech__item:hover .ico, .dif:hover .ico { transform: scale(1.08) rotate(-6deg); transition-delay: 0s; }

/* ---------- Títulos: palavra por palavra ---------- */

.w {
  display: inline-block;
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
  transition-delay: calc(var(--d, 0s) + .12s + var(--n, 0) * .055s);
}
.js .reveal:not(.in) .w { opacity: 0; transform: translateY(.5em); filter: blur(6px); }

/* ---------- Chamadas: texto decodificando ---------- */

.kicker.decod { color: var(--gold-hi); }
.sec--paper .kicker.decod { color: var(--gold); }

/* ---------- Brilho que segue o ponteiro ---------- */

[data-spot], [data-spot]:hover {
  background-image: radial-gradient(280px circle at var(--mx, -999px) var(--my, -999px), var(--glow-spot), transparent 70%);
}

/* ---------- Botão dourado: reflexo ao passar o mouse ---------- */

.btn { position: relative; overflow: hidden; }
.btn--gold::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, var(--shine), transparent); transform: skewX(-20deg);
}
.btn--gold:hover::after { left: 130%; transition: left .75s var(--ease); }

/* ---------- Barra de progresso de leitura ---------- */

.progresso {
  position: fixed; left: 0; top: 0; z-index: 70; width: 100%; height: 2px; pointer-events: none;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-hi));
  box-shadow: 0 0 10px var(--glow); transform: scaleX(var(--p, 0)); transform-origin: left;
}

/* depois da entrada, a imagem volta a responder rápido ao mouse */
.img-reveal.pronto img, .img-reveal.pronto video { transition: transform .8s var(--ease), filter .5s; }