/* ============================================================
   pagehero.css — Real Estate / SME landing rework
   Ported from the "Tercero Page Sections" design save.
   Pairs with: tercero-visual.js, tool-scene.js, review-scanner.js
   Reveal-on-scroll reuses the site's existing [data-reveal].is-in.
   ============================================================ */

/* ---- animated field behind hero + tools (scoped) ----------- */
.pg-field-wrap{position:relative;overflow:hidden;isolation:isolate;}
.pg-field-wrap.dark{background:#0b141c;}
.pg-field-wrap.light{background:#f7fafb;}
.pv-bg{position:absolute;inset:0;z-index:0;pointer-events:none;}
.pv-bg tercero-visual{display:block;width:100%;height:100%;}
.pv-veil{position:absolute;inset:0;z-index:1;pointer-events:none;}
.pv-veil.dark{
  background:
    radial-gradient(120% 70% at 80% 6%,rgba(0,184,148,.14),transparent 55%),
    linear-gradient(180deg,rgba(11,20,28,.22),rgba(11,20,28,.5) 68%,rgba(11,20,28,.8));
}
.pv-veil.light{
  background:
    radial-gradient(110% 60% at 90% 4%,rgba(0,184,148,.16),transparent 55%),
    linear-gradient(180deg,rgba(247,250,251,.12),rgba(247,250,251,.38) 72%,rgba(247,250,251,.68));
}
/* everything from the hero down sits above the field */
.pg-stack{position:relative;z-index:2;}

/* ---- hero entrance ----------------------------------------- */
@keyframes heroRise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
[data-hero] > *{animation:heroRise .85s cubic-bezier(.16,1,.3,1) both;}
[data-hero] > *:nth-child(1){animation-delay:.05s;}
[data-hero] > *:nth-child(2){animation-delay:.18s;}
[data-hero] > *:nth-child(3){animation-delay:.30s;}

/* ---- hero callout (static — no fly-to-corner) -------------- */
[data-navcta]{transition:transform .4s var(--e-out),box-shadow .4s ease;}
[data-navcta] .cf{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;transition:opacity .3s ease;}
[data-navcta] .cb{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease;}
[data-navcta]:hover .cf,[data-navcta]:focus-visible .cf{opacity:0;}
[data-navcta]:hover .cb,[data-navcta]:focus-visible .cb{opacity:1;}
[data-navcta]:hover,[data-navcta]:focus-visible{transform:translateY(-2px);box-shadow:0 14px 30px -12px rgba(0,0,0,.45);}

/* ---- tool cards: hover/focus flip front -> back ------------ */
[data-tcard]{display:block;position:relative;text-decoration:none;border-radius:8px;outline:none;}
[data-tcard] [data-tfront]{transition:opacity .55s ease;}
[data-tcard]:hover [data-tfront],[data-tcard]:focus-visible [data-tfront]{opacity:0;}
[data-tcard] [data-tback]{opacity:0;transition:opacity .55s ease;pointer-events:none;}
[data-tcard]:hover [data-tback],[data-tcard]:focus-visible [data-tback]{opacity:1;}
[data-tcard]:focus-visible{box-shadow:0 0 0 2px var(--teal),0 0 0 5px rgba(0,184,148,.28);}

/* ---- daily-dashboard "apps flowing in" --------------------- */
/* bigger icons, slower loop, each enters from its own direction
   via per-icon --fx/--fy start offsets (set inline).           */
/* icons start FAR out, stream in, and finish fully behind the button
   (button has higher z-index; end transform lands on the button centre) */
@keyframes appFly2{
  0%   {opacity:0;transform:translate(calc(var(--fx,160px) * 1.7),calc(var(--fy,-120px) * 1.7)) scale(.6);}
  16%  {opacity:1;}
  84%  {opacity:1;transform:translate(calc(var(--fx,160px) * .12),calc(var(--fy,-120px) * .12)) scale(.7);}
  100% {opacity:1;transform:translate(0,0) scale(.34);}
}
.appic{
  position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:10px;
  background:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 6px 18px rgba(0,0,0,.32);
  animation:appFly2 7s cubic-bezier(.32,.66,.3,1) infinite both;
}
.appic svg{width:23px;height:23px;}

/* ---- reduced motion: calm everything ----------------------- */
@media (prefers-reduced-motion:reduce){
  [data-hero] > *{animation:none;}
  .appic{animation:none;opacity:0;}
  [data-tcard] [data-tfront]{opacity:0;}
  [data-tcard] [data-tback]{opacity:1;}
}