/* Optional edge treatments. They are previewed with ?edge=1..8. */
.hero-overview[class*="hero-edge-style-"] .hero-artwork .hero-edge-primary{z-index:1}
.hero-edge-layers{position:absolute;inset:54px 0 0;z-index:1;pointer-events:none;overflow:hidden;border-radius:0 0 7px 7px}
.hero-edge-layers>span{position:absolute;top:0;bottom:0;width:44%;background:url('/hero-edge-fog.svg') left center/250% 100% no-repeat;opacity:0}
.hero-overview[class*="hero-edge-style-"]:not(.hero-edge-style-4) .hero-edge-layers{mask-image:linear-gradient(180deg,transparent,#000 14%,#000)}
.hero-edge-left{left:0}.hero-edge-right{right:0;transform:scaleX(-1)}
.hero-edge-echo{position:absolute;inset:0;z-index:0;pointer-events:none;filter:blur(12px);opacity:.52;clip-path:inset(14px 0 0)}
.hero-edge-echo img{filter:brightness(1.18) saturate(.75)}

/* 1: Alpha fade at the outside of the artwork, without a visible fog layer. */
.hero-edge-style-1 .hero-edge-primary{mask-image:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
.hero-edge-style-1 .hero-edge-layers{display:none}

/* 2: Pale, uneven foreground fog banks. */
.hero-edge-style-2 .hero-edge-layers>span{opacity:.77;mask-image:linear-gradient(180deg,transparent,#000 14%,#000 92%,transparent)}
.hero-edge-style-2 .hero-edge-right{transform:scale(-1,-1);opacity:.62}

/* 3: Deep charcoal smoke gathers on the edges of the silhouette. */
.hero-edge-style-3 .hero-edge-primary{mask-image:linear-gradient(90deg,#0002,#000 24%,#000 76%,#0002)}
.hero-edge-style-3 .hero-edge-layers>span{width:48%;opacity:.95;filter:brightness(.19) saturate(.55);background-size:220% 125%;mask-image:linear-gradient(180deg,transparent,#000 20%,#000)}
.hero-edge-style-3 .hero-edge-right{transform:scale(-1,-1)}

/* 4: Frosted, transparent side strips blur only the content behind them. */
.hero-edge-style-4 .hero-edge-layers>span{width:24%;opacity:1;background:linear-gradient(90deg,#98c7dc30,#a5c8dc05);backdrop-filter:blur(9px) saturate(.72);mask-image:linear-gradient(90deg,#000,#0009 45%,transparent),linear-gradient(180deg,transparent,#000 16%);mask-composite:intersect}

/* 5: A blurred duplicate sits behind a dissolved primary silhouette. */
.hero-edge-style-5 .hero-edge-primary{mask-image:linear-gradient(90deg,transparent,#000 25%,#000 75%,transparent)}
.hero-edge-style-5 .hero-edge-echo{filter:blur(15px);opacity:.68;mask-image:linear-gradient(90deg,#000,transparent 35%,transparent 65%,#000)}
.hero-edge-style-5 .hero-edge-layers{display:none}

/* 6: Volumetric mist remains behind the sharp foreground hero. */
.hero-edge-style-6 .hero-edge-layers{z-index:0}
.hero-edge-style-6 .hero-edge-layers>span{width:58%;opacity:.88;filter:brightness(1.24);background-size:175% 110%;mask-image:linear-gradient(180deg,transparent,#000 15%,#000 88%,transparent)}
.hero-edge-style-6 .hero-edge-right{transform:scale(-1,-1)}

/* 7: Narrow, diagonal wisps cross the side edges. */
.hero-edge-style-7 .hero-edge-layers>span{width:39%;opacity:.9;background-image:url('/hero-edge-wisps.svg');background-size:260% 120%;filter:blur(.5px) brightness(1.08);mask-image:linear-gradient(180deg,transparent 2%,#000 21%,#000 88%,transparent)}
.hero-edge-style-7 .hero-edge-left{transform:skewY(-22deg) scaleY(1.18);transform-origin:left center}
.hero-edge-style-7 .hero-edge-right{transform:scale(-1,-1) skewY(-22deg) scaleY(1.18);transform-origin:center}
.hero-edge-style-7 .hero-edge-primary{mask-image:linear-gradient(90deg,#0005,#000 15%,#000 85%,#0005)}

/* 8: A restrained combination of smoke, edge transparency and ambient blur. */
.hero-edge-style-8 .hero-edge-primary{mask-image:linear-gradient(90deg,#0001,#000 18%,#000 82%,#0001)}
.hero-edge-style-8 .hero-edge-echo{filter:blur(10px);opacity:.36}
.hero-edge-style-8 .hero-edge-layers>span{width:36%;opacity:.47;filter:blur(2px) saturate(.7);background-size:280% 100%;mask-image:linear-gradient(180deg,transparent 3%,#000 22%,#000 90%,transparent)}
.hero-edge-style-8 .hero-edge-right{transform:scale(-1,-1)}