/* ═══════════════════════════════════════════════════════════════
   TEMPLUXO — ANIMATIONS & RESPONSIVE
   Keyframes, entrance animations, card transitions, media queries
   ═══════════════════════════════════════════════════════════════ */

/* ── Keyframes ── */
@keyframes grid-drift       { 0%    { transform: translateY(0); }    100% { transform: translateY(60px); } }
@keyframes gradient-shift   { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
@keyframes text-shimmer     { 0%   { background-position: 0% 50%; }  50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes dot-pulse        { 0%,100% { box-shadow: 0 0 8px var(--neon), 0 0 20px var(--neon-glow); } 50% { box-shadow: 0 0 4px var(--neon), 0 0 10px var(--neon-glow); } }
@keyframes border-rotate    { 0%   { transform: rotate(0deg); }      100% { transform: rotate(360deg); } }
@keyframes float-frame      { 0%,100% { transform: translateY(0px) rotate(0deg); }       33% { transform: translateY(-8px) rotate(.3deg); }  66% { transform: translateY(-4px) rotate(-.2deg); } }
@keyframes float-badge-a    { 0%,100% { transform: translateY(0px) translateX(0px); }    40% { transform: translateY(-7px) translateX(3px); }   70% { transform: translateY(-3px) translateX(-2px); } }
@keyframes float-badge-b    { 0%,100% { transform: translateY(0px) translateX(0px); }    35% { transform: translateY(-5px) translateX(-3px); }  65% { transform: translateY(-8px) translateX(2px); } }
@keyframes pulse-ring       { 0%   { box-shadow: 0 0 0 0px rgba(0,255,136,.6), 0 0 6px var(--green); } 70% { box-shadow: 0 0 0 10px rgba(0,255,136,0), 0 0 6px var(--green); } 100% { box-shadow: 0 0 0 0px rgba(0,255,136,0), 0 0 6px var(--green); } }
@keyframes orb-drift-a      { 0%,100% { transform: translate(0,0) scale(1); }             33% { transform: translate(35px,-25px) scale(1.05); }    66% { transform: translate(-25px,20px) scale(.97); } }
@keyframes orb-drift-b      { 0%,100% { transform: translate(0,0) scale(1); }             40% { transform: translate(-30px,22px) scale(1.04); }   75% { transform: translate(22px,-15px) scale(.98); } }
@keyframes orb-drift-c      { 0%,100% { transform: translate(0,0) scale(1); }             45% { transform: translate(25px,-18px) scale(1.06); }   80% { transform: translate(-18px,12px) scale(.96); } }
@keyframes fade-up          { from { opacity: 0; transform: translateY(32px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes fade-in          { from { opacity: 0; }                               to { opacity: 1; } }
@keyframes slide-right      { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: translateX(0); } }
@keyframes shimmer-move     { from { transform: translateX(-100%) skewX(-15deg); } to { transform: translateX(200%) skewX(-15deg); } }
@keyframes card-pop         { 0%   { opacity: 0; transform: scale(.94) translateY(14px); } 100% { opacity: 1; transform: scale(1) translateY(0); } }
@keyframes glow-pulse       { 0%,100% { filter: drop-shadow(0 0 30px rgba(0,240,255,.3)); } 50% { filter: drop-shadow(0 0 50px rgba(0,240,255,.5)) drop-shadow(0 0 80px rgba(139,92,246,.3)); } }
@keyframes marquee          { 0%   { transform: translateX(0); }                 100% { transform: translateX(-50%); } }

/* ── Hero entrance animations ── */
.hero__copy .pill          { animation: fade-up .6s ease both; animation-delay: .1s; }
.hero__copy h1             { animation: fade-up .7s ease both; animation-delay: .2s; }
.hero__copy .lead          { animation: fade-up .7s ease both; animation-delay: .35s; }
.hero__copy .hero__cta     { animation: fade-up .7s ease both; animation-delay: .45s; }
.hero__copy .hero__stats   { animation: fade-up .7s ease both; animation-delay: .55s; }
.hero__copy .trust         { animation: fade-up .7s ease both; animation-delay: .65s; }
.hero__copy h1 .glow       { animation: glow-pulse 3s ease-in-out infinite, text-shimmer 5s ease infinite; }
.frame                     { animation: float-frame 7s ease-in-out infinite; will-change: transform; }
.float--a                  { animation: float-badge-a 5.5s ease-in-out infinite; will-change: transform; }
.float--b                  { animation: float-badge-b 6.2s ease-in-out infinite; will-change: transform; }
.stack .stack__card:nth-child(1) { animation: slide-right .6s ease both; animation-delay: .60s; }
.stack .stack__card:nth-child(2) { animation: slide-right .6s ease both; animation-delay: .72s; }
.stack .stack__card:nth-child(3) { animation: slide-right .6s ease both; animation-delay: .84s; }
.hero__visual .frame       { animation: fade-in .8s ease both, float-frame 7s ease-in-out 1s infinite; }

/* ── Scroll reveal ── */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }
.reveal-delay-4 { transition-delay: .45s; }

/* Card filter transitions */
.card { transition: opacity .3s ease, transform .35s cubic-bezier(.4,0,.2,1), border-color .25s ease, box-shadow .35s ease; }
.card.is-hiding   { opacity: 0; transform: scale(.95); pointer-events: none; }
.card.is-appearing { animation: card-pop .4s ease both; }

/* Logo entrance */
.logos__row .logo { opacity: 0; transform: translateY(10px); transition: opacity .5s ease, transform .5s ease, border-color .25s, background .25s, box-shadow .3s; }
.logos__row.is-visible .logo:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: .05s; }
.logos__row.is-visible .logo:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: .12s; }
.logos__row.is-visible .logo:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: .19s; }
.logos__row.is-visible .logo:nth-child(4) { opacity: 1; transform: translateY(0); transition-delay: .26s; }
.logos__row.is-visible .logo:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: .33s; }
.logos__row.is-visible .logo:nth-child(6) { opacity: 1; transform: translateY(0); transition-delay: .40s; }

/* Process entrance */
.process-step { opacity: 0; transform: translateY(22px); transition: opacity .5s ease, transform .5s ease, border-color .25s, box-shadow .35s; }
.process-steps.is-visible .process-step:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: .05s; }
.process-steps.is-visible .process-step:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: .18s; }
.process-steps.is-visible .process-step:nth-child(5) { opacity: 1; transform: translateY(0); transition-delay: .31s; }
.process-steps.is-visible .process-step:nth-child(7) { opacity: 1; transform: translateY(0); transition-delay: .44s; }

/* Testimonials entrance */
.testi-card { opacity: 0; transform: translateY(20px); transition: opacity .5s ease, transform .5s ease, border-color .25s, box-shadow .35s; }
.testi-grid.is-visible .testi-card:nth-child(1) { opacity: 1; transform: translateY(0); transition-delay: .08s; }
.testi-grid.is-visible .testi-card:nth-child(2) { opacity: 1; transform: translateY(0); transition-delay: .2s; }
.testi-grid.is-visible .testi-card:nth-child(3) { opacity: 1; transform: translateY(0); transition-delay: .32s; }

/* Section head */
.section__head { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
.section__head.is-visible { opacity: 1; transform: translateY(0); }

/* ═══════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 980px) {
  .hero__grid { grid-template-columns: 1fr; gap: 30px; }
  .hero { padding-top: 50px; }
  .two { grid-template-columns: 1fr; }
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stack { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .nav {
    position: fixed; inset: 64px 16px auto 16px;
    display: none; flex-direction: column; padding: 14px;
    border-radius: var(--radius); border: 1px solid rgba(0,240,255,.15);
    background: rgba(5,5,16,.92); backdrop-filter: blur(20px); box-shadow: var(--shadow);
  }
  .nav.is-open { display: flex; }
  .burger { display: block; }
  .grid { grid-template-columns: 1fr; }
  .hero__stats { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__cols { grid-template-columns: 1fr; }
  .section__head { flex-direction: column; align-items: flex-start; }
  .marquee-strip { display: none; }
  .lang-toggle__sep,
  .lang-toggle__code:last-of-type { display: none; }

  /* Card actions — stack Demo / Detalii / Cumpara vertically on mobile */
  .card__actions {
    flex-direction: column;
    gap: 8px;
  }
  .card__actions .btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}
@media (max-width: 700px) {
  .process-steps { flex-direction: column; }
  .process-step__arrow { display: none; }
  .process-step { min-width: unset; }
  .pricing { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}