/* Pagina de prezentare (login.html): scena 3D din hero, efectele la derulare și la
   mișcarea mouse-ului — 28.09.2026, cerut de user („efecte mai dinamice, 3D la
   încărcare, să reacționeze la derulare și la mouse”, plus o prezentare animată
   a fluxului PF și B2B PRO). Totul se oprește la `prefers-reduced-motion`. */

/* ── Hero ─────────────────────────────────────────────── */
.hero { --mx: 50%; --my: 40%; padding-bottom: 72px; }
.hero::before {
  background:
    radial-gradient(520px circle at var(--mx) var(--my), rgba(123,127,255,.16), transparent 60%),
    radial-gradient(ellipse 70% 60% at 15% 100%, rgba(78,84,200,0.2) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 85% 10%, rgba(123,127,255,0.15) 0%, transparent 60%);
}
.hero::after { transform: translate3d(0, calc(var(--scroll, 0) * 0.25px), 0); }
/* Textul centrat sus, cardul de autentificare dedesubt (06.10.2026; era tableta demo) */
.hero-grid { position: relative; z-index: 2; max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
/* mai puțin aer deasupra, ca la intrare să se vadă cât mai mult din card */
.hero { padding-top: 64px; }
.hero .hero-badge { margin-bottom: 18px; }
.hero .hero-sub { margin-bottom: 0; }
.hero-grid .hero-inner { max-width: 820px; margin: 0 auto; text-align: center; }

/* Intrarea textului, pe rând */
.hero-inner > * { opacity: 0; transform: translate3d(0, 24px, 0); animation: d3Sus .8s cubic-bezier(.2,.8,.2,1) forwards; }
.hero-inner > :nth-child(1) { animation-delay: .05s; }
.hero-inner > :nth-child(2) { animation-delay: .15s; }
.hero-inner > :nth-child(3) { animation-delay: .28s; }
.hero-inner > :nth-child(4) { animation-delay: .4s; }
.hero-inner > :nth-child(5) { animation-delay: .5s; }
.hero-inner > :nth-child(6) { animation-delay: .6s; }
@keyframes d3Sus { to { opacity: 1; transform: none; } }
.hero h1 em { background: linear-gradient(90deg, #8f94fb, #c4b5fd, #8f94fb); background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: d3Luciu 6s linear infinite; }
@keyframes d3Luciu { to { background-position: -200% 0; } }

/* ── Derularea: secțiunile apar în 3D ────────────────────────────────── */
.d3-apare { opacity: 0; transform: perspective(900px) rotateX(12deg) translate3d(0, 40px, 0) scale(.93); transform-origin: 50% 0;
  transition: opacity .8s ease, transform .9s cubic-bezier(.16,.84,.24,1); transition-delay: var(--intarziere, 0s); }
.d3-apare.vazut { opacity: 1; transform: none; }

/* Cardurile de funcții se înclină după cursor */
.feat-card { transform-style: preserve-3d; will-change: transform; }
.feat-card.d3-inclinat { transition: transform .12s ease-out, box-shadow .2s; }
.feat-card.d3-inclinat::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
  background: radial-gradient(260px circle at var(--cx, 50%) var(--cy, 50%), rgba(143,148,251,.14), transparent 60%); }

@media (prefers-reduced-motion: reduce) {
  .hero-inner > *, .demo3d.intrare .d3-tableta { animation: none !important; opacity: 1 !important; transform: none; }
  .d3-apare { opacity: 1; transform: none; transition: none; }
  .hero h1 em { animation: none; }
  .d3-img, .d3-card, .d3-zoom { transition: opacity .3s !important; }
  .d3-card.vizibil .d3-notif, .d3-card.vizibil .d3-bon { animation: none; }
  .d3-evid.vizibil { animation: none; }
}