/* The Sales Boss webinar pages: shared motion and 3D effects layer. */

/* ---------- ambient layers ---------- */
.fx-layer{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.fx-front{position:relative;z-index:1}

/* faint red blueprint grid, like the framework section on the site */
.fx-grid{position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:
    linear-gradient(rgba(209,0,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(209,0,0,.05) 1px, transparent 1px);
  background-size:56px 56px;
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 75%);
  mask-image:radial-gradient(ellipse 70% 70% at 50% 40%, #000 30%, transparent 75%)}

/* ---------- floating 3D wireframe cubes (the "legos") ---------- */
.fx-cube{position:absolute;width:var(--s,72px);height:var(--s,72px);
  animation:fxFloat var(--fd,8s) ease-in-out infinite alternate;
  opacity:var(--o,.55);filter:drop-shadow(0 0 18px rgba(209,0,0,.35))}
.fx-cube .core{position:absolute;inset:0;transform-style:preserve-3d;
  animation:fxSpin var(--rd,22s) linear infinite}
.fx-cube .core i{position:absolute;inset:0;
  border:1.5px solid rgba(232,17,17,.6);background:rgba(209,0,0,.05)}
@keyframes fxSpin{
  from{transform:rotateX(12deg) rotateY(0deg)}
  to{transform:rotateX(372deg) rotateY(360deg)}}
@keyframes fxFloat{
  from{transform:translateY(-14px)}
  to{transform:translateY(14px)}}

/* ---------- drifting embers ---------- */
.fx-ember{position:absolute;bottom:-12px;border-radius:50%;
  background:radial-gradient(circle, rgba(255,80,80,.9), rgba(209,0,0,.35) 60%, transparent);
  animation:fxEmber linear infinite;opacity:0}
@keyframes fxEmber{
  0%{transform:translateY(0) translateX(0);opacity:0}
  8%{opacity:.75}
  60%{opacity:.5}
  100%{transform:translateY(-820px) translateX(var(--dx,20px));opacity:0}}

/* ---------- scroll reveal ---------- */
.reveal{opacity:0;transform:translateY(26px);
  transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

/* ---------- hero entrance (runs on load, no JS needed) ---------- */
.enter{opacity:0;animation:fxEnter .8s cubic-bezier(.2,.7,.3,1) forwards}
.enter.e2{animation-delay:.15s}
.enter.e3{animation-delay:.3s}
.enter.e4{animation-delay:.45s}
.enter.e5{animation-delay:.6s}
@keyframes fxEnter{
  from{opacity:0;transform:translateY(30px)}
  to{opacity:1;transform:none}}

/* ---------- card hover: lift, glow, tilt (tilt applied by JS) ---------- */
.fx-tilt{transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;will-change:transform}
.fx-tilt:hover{border-color:rgba(209,0,0,.55)!important;
  box-shadow:0 14px 44px rgba(0,0,0,.5), 0 0 28px rgba(209,0,0,.14)}

/* ---------- button shine sweep + arrow nudge ---------- */
.btn{position:relative;overflow:hidden}
.btn::after{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.28), transparent);
  transform:skewX(-20deg);transition:left .5s ease}
.btn:hover::after{left:130%}
.btn .arr{display:inline-block;transition:transform .2s ease}
.btn:hover .arr{transform:translateX(5px)}

/* ---------- pulsing red edge for highlighted panels ---------- */
.fx-pulseborder{animation:fxBorderPulse 2.8s ease-in-out infinite}
@keyframes fxBorderPulse{
  0%,100%{box-shadow:0 0 0 0 rgba(209,0,0,.35)}
  50%{box-shadow:0 0 26px 2px rgba(209,0,0,.28)}}

/* ---------- confirmation checkmark pop ---------- */
.fx-pop{animation:fxPop .6s cubic-bezier(.3,1.6,.4,1) both}
@keyframes fxPop{
  from{transform:scale(.3);opacity:0}
  to{transform:scale(1);opacity:1}}

/* ---------- countdown units heartbeat ---------- */
.fx-beat{animation:fxBeat 1s ease-in-out infinite}
@keyframes fxBeat{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.06)}}

/* ---------- accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-cube,.fx-cube .core,.fx-ember,.enter,.fx-beat,.fx-pulseborder{animation:none!important}
  .enter{opacity:1}
  .reveal{opacity:1;transform:none;transition:none}
}