/* =========================================================================
   TEMP IA — Biblioteca de animações
   Keyframes reutilizáveis + primitivas 3D + revelação por scroll.
   ========================================================================= */

/* ---------------------------------------------------------- KEYFRAMES --- */

@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-16px); }
}

/* Flutuação pela propriedade independente `translate`.
   Use esta variante em qualquer elemento que já tenha um `transform` 3D
   estático — animar `transform` apagaria a rotação/profundidade dele. */
@keyframes float-t {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 var(--fl, -14px); }
}

/* Pulso só de opacidade, para elementos com transform 3D fixo */
@keyframes glow-o {
  0%, 100% { opacity: .34; }
  50%      { opacity: .78; }
}

/* Anéis da galeria: mantêm a centralização e a inclinação enquanto giram */
@keyframes ring-spin {
  from { transform: translate(-50%, -50%) rotateX(76deg) rotateZ(0deg); }
  to   { transform: translate(-50%, -50%) rotateX(76deg) rotateZ(360deg); }
}
@keyframes ring-spin-rev {
  from { transform: translate(-50%, -50%) rotateX(76deg) rotateZ(360deg); }
  to   { transform: translate(-50%, -50%) rotateX(76deg) rotateZ(0deg); }
}

@keyframes float-soft {
  0%, 100% { transform: translate3d(0, 0, 0); }
  33%      { transform: translate3d(10px, -14px, 0); }
  66%      { transform: translate3d(-8px, 8px, 0); }
}

@keyframes drift {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(4%, -6%, 0) scale(1.12); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes spin      { to { transform: rotate(360deg); } }
@keyframes spin-rev  { to { transform: rotate(-360deg); } }

@keyframes spin3d {
  0%   { transform: rotateX(-22deg) rotateY(0deg); }
  100% { transform: rotateX(-22deg) rotateY(360deg); }
}

@keyframes tumble {
  0%   { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  50%  { transform: rotateX(180deg) rotateY(180deg) rotateZ(12deg); }
  100% { transform: rotateX(360deg) rotateY(360deg) rotateZ(0deg); }
}

@keyframes pulse-glow {
  0%, 100% { opacity: .55; transform: scale(1); }
  50%      { opacity: 1;   transform: scale(1.075); }
}

@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
  50%      { box-shadow: 0 0 0 14px transparent; }
}

@keyframes gradient-shift {
  0%   { background-position:   0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position:   0% 50%; }
}

@keyframes scanline {
  0%   { transform: translateY(-110%); opacity: 0; }
  8%   { opacity: .85; }
  92%  { opacity: .85; }
  100% { transform: translateY(110%); opacity: 0; }
}

@keyframes shimmer {
  0%   { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(280%)  skewX(-18deg); }
}

@keyframes grid-move {
  0%   { transform: perspective(520px) rotateX(66deg) translateY(0); }
  100% { transform: perspective(520px) rotateX(66deg) translateY(64px); }
}

@keyframes marquee-x {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(-50%, 0, 0); }
}

@keyframes dash-in {
  from { stroke-dashoffset: 400; }
  to   { stroke-dashoffset: 0; }
}

@keyframes blink {
  0%, 45%   { opacity: 1; }
  50%, 95%  { opacity: .15; }
  100%      { opacity: 1; }
}

@keyframes beam-sweep {
  0%   { transform: translateX(-100%); opacity: 0; }
  35%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

@keyframes rise-fade {
  from { opacity: 0; transform: translateY(34px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Órbitas: o anel gira em Z sobre um plano inclinado; cada chip roda o
   inverso exato (mesma duração e timing) para continuar de frente e legível.
   Os dois anéis usam inclinações diferentes para não empilhar os rótulos. */
@keyframes orbit-a {
  from { transform: rotateX(60deg) rotateZ(0deg); }
  to   { transform: rotateX(60deg) rotateZ(360deg); }
}
@keyframes counter-orbit-a {
  from { transform: rotateZ(0deg) rotateX(-60deg); }
  to   { transform: rotateZ(-360deg) rotateX(-60deg); }
}
@keyframes orbit-b {
  from { transform: rotateX(74deg) rotateZ(360deg); }
  to   { transform: rotateX(74deg) rotateZ(0deg); }
}
@keyframes counter-orbit-b {
  from { transform: rotateZ(-360deg) rotateX(-74deg); }
  to   { transform: rotateZ(0deg) rotateX(-74deg); }
}

@keyframes ripple-out {
  0%   { transform: scale(.6); opacity: .55; }
  100% { transform: scale(2.1); opacity: 0; }
}

@keyframes flicker {
  0%, 100%   { opacity: 1; }
  41%, 43%   { opacity: .78; }
  45%        { opacity: 1; }
  62%, 64%   { opacity: .86; }
}

/* ------------------------------------------------------- AMPULHETA --- */
/* Respiro da marca no preloader — pulsa o brilho sem mexer na arte */
@keyframes logo-breathe {
  0%, 100% { transform: scale(1);     filter: drop-shadow(0 0 26px rgba(1, 213, 252, .35)); }
  50%      { transform: scale(1.045); filter: drop-shadow(0 0 46px rgba(1, 250, 191, .65)); }
}

/* Ampulheta volumétrica do hero: lâminas em leque girando no eixo Y */
@keyframes hg3d-spin {
  from { transform: rotateX(-8deg) rotateY(0deg); }
  to   { transform: rotateX(-8deg) rotateY(360deg); }
}
@keyframes hg3d-fall {
  0%   { top: 0;    opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

@keyframes trace-border { to { --ang: 360deg; } }

@property --ang {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}

/* ---------------------------------------------- REVELAÇÃO POR SCROLL --- */

.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity .85s var(--e-out),
    transform .85s var(--e-out);
  transition-delay: var(--rd, 0ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

/* Título dividido em linhas — cada linha sobe de trás de uma máscara */
.line {
  display: block;
  overflow: hidden;
}
.line > .line__in {
  display: block;
  transform: translateY(105%) rotate(3deg);
  opacity: 0;
  transition:
    transform 1.05s var(--e-out),
    opacity .7s var(--e-out);
  transition-delay: var(--ld, 0ms);
}
.is-in > .line__in,
.line.is-in > .line__in { transform: none; opacity: 1; }

/* ------------------------------------------------------ PRIMITIVAS 3D --- */

.tilt {
  transform-style: preserve-3d;
  transition: transform .45s var(--e-out), box-shadow .45s var(--e-out);
  will-change: transform;
}
.tilt > * { transform: translateZ(0.01px); }

/* Brilho holográfico que atravessa o card */
.holo { position: relative; overflow: hidden; }
.holo::after {
  content: '';
  position: absolute;
  top: -60%; left: 0;
  width: 45%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .11), transparent);
  transform: translateX(-130%) skewX(-18deg);
  pointer-events: none;
}
.holo:hover::after { animation: shimmer 1.1s var(--e-out); }

/* Borda cônica animada */
.trace {
  position: relative;
  isolation: isolate;
}
.trace::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  padding: 1px;
  background: conic-gradient(from var(--ang), transparent 0deg, var(--accent) 60deg, var(--c2) 130deg, transparent 200deg, transparent 360deg);
  -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;
  opacity: 0;
  transition: opacity var(--t-base);
  z-index: -1;
}
.trace:hover::before {
  opacity: 1;
  animation: trace-border 3.6s linear infinite;
}

/* ---------------------------------------------- CLASSES UTILITÁRIAS --- */

.anim-float       { animation: float-y 6.5s var(--e-inout) infinite; }
.anim-spin-slow   { animation: spin 28s linear infinite; }
.anim-pulse       { animation: pulse-glow 3.4s var(--e-inout) infinite; }

/* -------------------------------------------------- REDUÇÃO DE MOVIMENTO */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .reveal { opacity: 1 !important; transform: none !important; }
  .line > .line__in { opacity: 1 !important; transform: none !important; }
}