/* ============================================================
   depth.css — profundidade e movimento 3D (CSS puro)
   Aditivo e removível: apague o <link> e o <script defer> do
   index.html e o site volta exatamente ao que era.

   Regras que este arquivo respeita:
   - anima SOMENTE transform e opacity (sem reflow)
   - easing custom nomeado, nunca `ease` / `ease-in-out` default
   - 150ms hover · 250ms estado · 400ms revelação
   - prefers-reduced-motion desliga tudo
   ============================================================ */

:root{
  --ease-slab:cubic-bezier(.2,.8,.2,1);   /* saída rápida, assento lento — peso de pedra */
  --ease-lift:cubic-bezier(.34,1.4,.5,1); /* leve overshoot no levantar */
  --d-hover:150ms; --d-state:250ms; --d-reveal:620ms;
}

/* ---------- 1. HERO: paralaxe de profundidade ----------
   O texto e a imagem vivem em planos Z diferentes dentro de uma
   perspectiva, então o conteúdo "flutua" sobre a foto ao rolar. */
.hero{ perspective:900px; perspective-origin:50% 38%; }
.hero-slide,.hero-bg,.hero .slide{
  will-change:transform;
  transform:translate3d(0,var(--pz,0px),0) scale(var(--pscale,1));
  transition:transform 60ms linear;
}
.hero-content,.hero-inner,.hero-text{
  transform:translate3d(0,var(--tz,0px),0);
  transition:transform 60ms linear;
}

/* ---------- 2. CARDS: inclinação real sob o cursor ----------
   rotateX/rotateY vindos da posição do ponteiro. O brilho segue
   a inclinação, como luz correndo numa superfície polida. */
.svc-card,.project-item,.proj-item,.blog-card,.exp-img{
  transform-style:preserve-3d;
  will-change:transform;
  transition:transform var(--d-state) var(--ease-slab);
}
.tilt{
  transform:perspective(700px)
            rotateX(var(--rx,0deg))
            rotateY(var(--ry,0deg))
            translate3d(0,var(--ty,0px),var(--tz3,0px))
            scale(var(--tscale,1));
}
.tilt::after{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  background:linear-gradient(
    var(--sheen-angle,120deg),
    rgba(255,255,255,0) 30%,
    rgba(255,255,255,.34) 50%,
    rgba(255,255,255,0) 70%);
  opacity:var(--sheen,0);
  transition:opacity var(--d-hover) var(--ease-slab);
}
.svc-card,.project-item,.proj-item,.blog-card{ position:relative; }

/* ---------- 3. REVELAÇÃO: a placa assenta ----------
   Entra levemente girada no eixo X e desce até o plano, como uma
   peça sendo baixada no lugar. Só transform e opacity. */
.reveal{
  opacity:0;
  transform:perspective(800px) rotateX(13deg) translate3d(0,54px,0) scale(.955);
  transition:opacity var(--d-reveal) var(--ease-slab),
             transform var(--d-reveal) var(--ease-lift);
}
.reveal.in{ opacity:1; transform:none; }
.reveal.d1{ transition-delay:110ms }
.reveal.d2{ transition-delay:220ms }
.reveal.d3{ transition-delay:330ms }

/* ---------- 4. BOTÕES: pressão física ---------- */
.btn,.hero-btn,.cta,button[type="submit"]{
  transition:transform var(--d-hover) var(--ease-slab),
             background-color var(--d-hover) var(--ease-slab);
}
.btn:hover,.hero-btn:hover,.cta:hover{ transform:translate3d(0,-4px,0) scale(1.03) }
.btn:active,.hero-btn:active,.cta:active{ transform:translate3d(0,0,0) scale(.985) }

/* ---------- acessibilidade ---------- */
@media (prefers-reduced-motion:reduce){
  .hero-slide,.hero-bg,.hero .slide,.hero-content,.hero-inner,.hero-text,
  .tilt,.reveal,.btn,.hero-btn,.cta{
    transform:none!important;
    transition-duration:1ms!important;
    animation-duration:1ms!important;
  }
  .reveal{opacity:1!important}
  .tilt::after{opacity:0!important}
}

/* ---------- 5. sombra de profundidade no tilt (só opacity) ---------- */
.tilt::before{
  content:"";
  position:absolute; inset:6% 4% -8% 4%;
  z-index:-1;
  border-radius:inherit;
  background:radial-gradient(60% 60% at 50% 60%, rgba(0,0,0,.45), rgba(0,0,0,0) 72%);
  filter:blur(18px);
  opacity:var(--shadow,0);
  transition:opacity var(--d-state) var(--ease-slab);
}