/* ============================================================
   WUJI KUNG FU — animations.css
   Scroll reveal · Partículas · Neblina · Microinterações
   Filosofia: nada exagerado. Movimento sereno, como fumaça.
   ============================================================ */

/* ---------- Scroll Reveal ---------- */
[data-reveal]{
  opacity:0;transform:translateY(38px);
  transition:opacity 1s var(--slow),transform 1s var(--slow);
  will-change:opacity,transform;
}
[data-reveal].in{opacity:1;transform:none}
[data-reveal="left"]{transform:translateX(-44px)}
[data-reveal="right"]{transform:translateX(44px)}
[data-reveal="scale"]{transform:scale(.94)}
[data-reveal].in{transform:none}

/* Stagger — atraso incremental via --i */
[data-reveal][style*="--i"]{transition-delay:calc(var(--i) * .09s)}

/* ---------- Hero — entrada cinematográfica ---------- */
@keyframes riseIn{
  from{opacity:0;transform:translateY(46px)}
  to{opacity:1;transform:none}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes breath{
  0%,100%{transform:scale(1);opacity:.85}
  50%{transform:scale(1.04);opacity:1}
}
@keyframes floatUp{
  0%{transform:translateY(0);opacity:0}
  10%{opacity:.5}
  90%{opacity:.3}
  100%{transform:translateY(-120vh);opacity:0}
}
@keyframes drift{
  0%{transform:translate(0,0) scale(1)}
  50%{transform:translate(40px,-30px) scale(1.15)}
  100%{transform:translate(0,0) scale(1)}
}
@keyframes spinSlow{to{transform:rotate(360deg)}}
@keyframes shimmer{
  0%{background-position:-200% 0}
  100%{background-position:200% 0}
}

.hero-anim-1{animation:riseIn 1.2s var(--slow) .1s both}
.hero-anim-2{animation:riseIn 1.2s var(--slow) .3s both}
.hero-anim-3{animation:riseIn 1.2s var(--slow) .5s both}
.hero-anim-4{animation:riseIn 1.2s var(--slow) .7s both}

/* ---------- Partículas (pontos de brasa / poeira dourada) ---------- */
.particles{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.particle{
  position:absolute;bottom:-10px;border-radius:50%;
  background:radial-gradient(circle,var(--dourado),transparent 70%);
  animation:floatUp linear infinite;
}

/* ---------- Neblina / Fumaça ---------- */
.fog{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0}
.fog span{
  position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;
  animation:drift ease-in-out infinite;
}
.fog span:nth-child(1){width:50vw;height:50vw;left:-10vw;top:5vh;background:radial-gradient(circle,rgba(160,30,40,.18),transparent 65%);animation-duration:26s}
.fog span:nth-child(2){width:44vw;height:44vw;right:-8vw;top:20vh;background:radial-gradient(circle,rgba(194,161,90,.14),transparent 65%);animation-duration:32s;animation-delay:-6s}
.fog span:nth-child(3){width:38vw;height:38vw;left:25vw;bottom:-10vh;background:radial-gradient(circle,rgba(120,90,40,.12),transparent 65%);animation-duration:38s;animation-delay:-12s}

/* ---------- Símbolo respirando ---------- */
.breathe{animation:breath 7s var(--slow) infinite}
.spin-slow{animation:spinSlow 40s linear infinite}

/* ---------- Indicador de scroll ---------- */
.scroll-cue{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--cinza-fraco);
  font-size:.66rem;letter-spacing:.32em;text-transform:uppercase}
.scroll-cue .line{width:1px;height:46px;background:linear-gradient(var(--dourado),transparent);position:relative;overflow:hidden}
.scroll-cue .line::after{content:"";position:absolute;top:0;left:0;right:0;height:40%;
  background:var(--dourado-claro);animation:cueMove 2.2s var(--ease) infinite}
@keyframes cueMove{0%{transform:translateY(-100%)}100%{transform:translateY(300%)}}

/* ---------- Microinterações ---------- */
.link-underline{position:relative}
.link-underline::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;
  background:var(--dourado);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.link-underline:hover::after{transform:scaleX(1);transform-origin:left}

.gold-shimmer{
  background:linear-gradient(90deg,var(--dourado) 20%,var(--dourado-claro) 40%,#fff 50%,var(--dourado-claro) 60%,var(--dourado) 80%);
  background-size:200% auto;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:shimmer 6s linear infinite;
}

/* ---------- Reduced motion ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  [data-reveal]{opacity:1!important;transform:none!important}
}