/* Hero: the system window flies in, blends into the background and the headline, then keeps moving. */

.hero-copy{position:relative;z-index:3}
.hero-copy h1,.hero-copy .lede{text-shadow:0 2px 24px rgba(5,7,44,.85)}

@media (min-width:1041px){
  .hero-grid{grid-template-columns:minmax(0,.78fr) minmax(0,1.42fr)}
  /* a big window: it starts behind the headline (its left side melts into the dark background) and leaves the content column on the right */
  .hero-visual{margin-left:-24%;width:133%;z-index:1}
  .hero{padding-top:118px}
}
/* the sale chip sits above the window now, away from the headline */
@media (min-width:1041px){
  .hero .chip-a{left:46%;top:-7%}
  .hero .chip-c{left:14%;bottom:-4%}
}
@media (min-width:1041px) and (max-width:1320px){
  .hero-visual{margin-left:-18%;width:122%}
}

.hero-visual{translate:0 calc(var(--sy,0) * -0.14px)}
.hero-visual.hero-in-visual{
  opacity:0;
  transform:perspective(1500px) translateX(220px) translateY(60px) rotateY(-26deg) rotateX(12deg) scale(.82);
  filter:blur(16px);
  animation:screenFly 1.7s cubic-bezier(.16,.85,.22,1) var(--d,.35s) forwards,idleFloat 9s ease-in-out calc(var(--d,.35s) + 1.7s) infinite;
}
@keyframes screenFly{
  60%{filter:blur(2px);opacity:1}
  to{opacity:1;transform:perspective(1500px) none;filter:blur(0)}
}
@keyframes idleFloat{
  0%,100%{transform:perspective(1500px) translateY(0) rotateY(0) rotateX(0)}
  50%{transform:perspective(1500px) translateY(-14px) rotateY(-2.5deg) rotateX(1.2deg)}
}

/* blend: transparent on the left and at the bottom, solid in the middle */
.erp-window-hero{
  position:relative;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.28) 9%,#000 36%),linear-gradient(180deg,#000 74%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.28) 9%,#000 36%),linear-gradient(180deg,#000 74%,transparent 100%);
  mask-composite:intersect;
  box-shadow:none;
}
/* a band of light sweeping across the screen */
.erp-window-hero:after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 38%,rgba(255,255,255,.2) 50%,transparent 62%);transform:translateX(-130%);animation:screenSweep 6s ease-in-out 3s infinite}
@keyframes screenSweep{0%,55%{transform:translateX(-130%)}100%{transform:translateX(130%)}}

/* the glow that the window casts (the mask would cut a box-shadow) */
.hero-visual:before{content:"";position:absolute;inset:6% -4% 10% 8%;border-radius:40px;background:radial-gradient(ellipse at 55% 50%,rgba(52,110,255,.55),rgba(52,110,255,0) 68%);filter:blur(40px);z-index:-1;animation:glowPulse 5s ease-in-out infinite}
@keyframes glowPulse{0%,100%{opacity:.55;transform:scale(.97)}50%{opacity:1;transform:scale(1.04)}}

/* rings that spread behind the window */
.hero-rings{position:absolute;inset:0;pointer-events:none;z-index:-1}
.hero-rings i{position:absolute;left:58%;top:46%;width:300px;height:300px;margin:-150px 0 0 -150px;border-radius:50%;border:1.5px solid rgba(121,162,255,.35);opacity:0;animation:ring 7s ease-out infinite}
.hero-rings i:nth-child(2){animation-delay:2.3s}.hero-rings i:nth-child(3){animation-delay:4.6s}
@keyframes ring{0%{transform:scale(.4);opacity:.7}100%{transform:scale(2.6);opacity:0}}

/* a cursor that moves around the menu and clicks */
.hero-cursor{position:absolute;left:12%;top:24%;width:30px;height:30px;z-index:4;pointer-events:none;filter:drop-shadow(0 6px 10px rgba(0,0,0,.45));opacity:0;animation:cursorTour 11s ease-in-out 3.2s infinite}
.hero-cursor svg{width:100%;height:100%;fill:#fff;stroke:#0b132b;stroke-width:1.5;stroke-linejoin:round}
.hero-cursor:after{content:"";position:absolute;left:-6px;top:-6px;width:20px;height:20px;border-radius:50%;border:2px solid #79a2ff;opacity:0;animation:click 11s ease-out 3.2s infinite}
@keyframes cursorTour{
  0%{opacity:0;transform:translate(260px,-60px)}
  8%{opacity:1;transform:translate(260px,-60px)}
  22%{transform:translate(62px,150px)}
  30%{transform:translate(62px,150px) scale(.88)}
  34%{transform:translate(62px,150px)}
  55%{transform:translate(120px,260px)}
  63%{transform:translate(120px,260px) scale(.88)}
  67%{transform:translate(120px,260px)}
  88%{opacity:1;transform:translate(430px,40px)}
  100%{opacity:0;transform:translate(430px,40px)}
}
@keyframes click{0%,28%{opacity:0;transform:scale(.4)}30%{opacity:1;transform:scale(.6)}38%{opacity:0;transform:scale(2.4)}61%{opacity:0;transform:scale(.4)}63%{opacity:1;transform:scale(.6)}71%{opacity:0;transform:scale(2.4)}100%{opacity:0}}

@media (max-width:1040px){
  .hero-visual,.hero-visual.hero-in-visual{margin-left:0;width:auto}
  .erp-window-hero{-webkit-mask-image:linear-gradient(180deg,#000 76%,transparent 100%);mask-image:linear-gradient(180deg,#000 76%,transparent 100%)}
  .hero-cursor{display:none}
}
@media (max-width:640px){
  .hero-visual.hero-in-visual{transform:translateY(60px) scale(.9)}
  .hero-rings{display:none}
}
@keyframes softIn{from{opacity:0;filter:blur(14px)}to{opacity:1;filter:blur(0)}}
@media (prefers-reduced-motion:reduce){
  .hero-visual.hero-in-visual{transform:none!important;filter:none;animation:softIn 1.4s var(--d,.35s) both!important}
  .erp-window-hero:after,.hero-cursor,.hero-cursor:after{animation:none!important}
  .hero-cursor{display:none}
  .hero-visual{translate:none}
}