/* ========================================================================
   AT-EXTRAS — micro-interações globais · aplicado 07/07/2026
   1 Magnetic CTA · 2 Curtain transition · 3 Kinetic titles · 4 Ripple retrato
   (5 Carbono boost vive no próprio carbono.js)
   Tudo: desktop only + prefers-reduced-motion respeitado
   ======================================================================== */

/* ── 2. CURTAIN — transição de página ── */
.at-curtain {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: linear-gradient(135deg, #1a1108, #221710);
  transform: scaleY(0);
  transform-origin: top;
  pointer-events: none;
}
.at-curtain::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #CE9D62, transparent);
  opacity: 0;
}
/* Chave da marca — aparece de leve no centro da cortina */
.at-curtain::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  width: 96px; height: 160px;
  background: #CE9D62;
  -webkit-mask: url('/assets/logo/chave.svg') no-repeat center / contain;
  mask: url('/assets/logo/chave.svg') no-repeat center / contain;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.9);
  transition: opacity .22s ease, transform .5s cubic-bezier(0.22, 1, 0.36, 1);
}
.at-curtain.is-in::before {
  opacity: .22;
  transform: translate(-50%, -50%) scale(1);
  transition-delay: .1s;
}
.at-curtain.is-out::before {
  opacity: 0;
  transform: translate(-50%, -50%) scale(1.04);
  transition: opacity .16s ease, transform .3s ease;
}
.at-curtain.is-in {
  transform: scaleY(1);
  transition: transform .34s cubic-bezier(0.76, 0, 0.24, 1);
}
.at-curtain.is-in::after { opacity: 1; transition: opacity .18s ease .08s; }
.at-curtain.is-out {
  transform: scaleY(0);
  transform-origin: bottom;
  transition: transform .46s cubic-bezier(0.76, 0, 0.24, 1) .08s;
}

/* View Transitions API REMOVIDA — snapshot da página com canvas fullscreen
   causava jank. Curtain opaca cobre a navegação e esconde o boot do carbono. */

/* ── 3. KINETIC TITLES — palavras entram com stagger ── */
.at-kinetic .at-w {
  display: inline-block;
  opacity: 0;
  transform: translateY(.55em);
  filter: blur(7px);
  transition: opacity .6s cubic-bezier(0.22,1,0.36,1),
              transform .6s cubic-bezier(0.22,1,0.36,1),
              filter .55s ease;
  transition-delay: var(--at-d, 0s);
  will-change: transform, filter;
}
.at-kinetic.is-in .at-w {
  opacity: 1;
  transform: none;
  filter: blur(0);
}

/* ── 1. MAGNETIC CTA ── */
.btn.at-magnet {
  transition: transform .3s cubic-bezier(0.22,1,0.36,1),
              background .35s cubic-bezier(0.22,1,0.36,1),
              border-color .35s cubic-bezier(0.22,1,0.36,1),
              box-shadow .35s cubic-bezier(0.22,1,0.36,1),
              color .35s cubic-bezier(0.22,1,0.36,1);
  will-change: transform;
}

/* Kill-switch geral */
@media (prefers-reduced-motion: reduce) {
  .at-kinetic .at-w { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
  .at-curtain { display: none !important; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none !important; }
}