/* Home hero bull (2026-11-07): the PayPilot street bull dissolves into the page behind the terminal and phone,
   tinted violet to magenta so it blends with the site colours. No smoke, no motion. */
.hero--blend{position:relative;isolation:isolate;overflow:hidden}
.hero--blend .bull-blend,.hero--blend .bull-tint{position:absolute;z-index:-1;pointer-events:none;inset:-8% -6% -10% 34%;
  -webkit-mask-image:radial-gradient(ellipse 62% 78% at 66% 50%,#000 30%,transparent 74%);mask-image:radial-gradient(ellipse 62% 78% at 66% 50%,#000 30%,transparent 74%)}
.hero--blend .bull-blend{background:url(/assets/img/bull/paypilot-bull-street.jpg) 76% center/cover no-repeat;opacity:.32;mix-blend-mode:lighten;filter:saturate(1.1) contrast(1.05)}
.hero--blend .bull-tint{background:linear-gradient(110deg,#7C5CF0 10%,#8B5CF6 40%,#C850E0 80%);mix-blend-mode:color;opacity:.35}
html[data-theme=light] .hero--blend .bull-blend{mix-blend-mode:multiply;opacity:.14;filter:saturate(1.3)}
html[data-theme=light] .hero--blend .bull-tint{mix-blend-mode:screen;opacity:.35}
/* Stacked layout (phones, tablets): the copy fills the width, so the bull gets its own spot above the devices: its head and
   horns show over the phone, which overlaps its body. */
@media (max-width:980px){
  .hero--blend>.bull-blend,.hero--blend>.bull-tint{display:none}
  .hero--blend .showcase{isolation:isolate;margin-top:150px}
  .hero--blend .showcase::before,.hero--blend .showcase::after{content:'';position:absolute;z-index:-1;pointer-events:none;left:-24px;right:-24px;top:-210px;height:520px;
    -webkit-mask-image:radial-gradient(ellipse 58% 50% at 60% 46%,#000 40%,transparent 80%);mask-image:radial-gradient(ellipse 58% 50% at 60% 46%,#000 40%,transparent 80%)}
  .hero--blend .showcase::before{background:url(/assets/img/bull/paypilot-bull-street-900.jpg) 90% 40%/cover no-repeat;opacity:.6;mix-blend-mode:lighten}
  .hero--blend .showcase::after{background:linear-gradient(110deg,#7C5CF0 10%,#8B5CF6 40%,#C850E0 80%);mix-blend-mode:color;opacity:.35}
  html[data-theme=light] .hero--blend .showcase::before{mix-blend-mode:multiply;opacity:.3}
  html[data-theme=light] .hero--blend .showcase::after{mix-blend-mode:screen}
}