.stanisland-glitch-hero{
    --sg-image:none;
    --sg-intensity:5;
    --sg-speed:4.5s;
    --sg-static:.3;
    --sg-overlay:.18;
    --sg-text:#fff;
    --sg-position:50% 50%;
    position:relative;
    width:100vw;
    height:100svh;
    min-height:600px;
    margin-left:calc(50% - 50vw)!important;
    margin-right:calc(50% - 50vw)!important;
    overflow:hidden;
    isolation:isolate;
    background:#050505;
}

.stanisland-glitch-hero .sg-link{
    position:absolute;
    inset:0;
    display:block;
    color:inherit;
    text-decoration:none;
}
.stanisland-glitch-hero a.sg-link{cursor:pointer}
.stanisland-glitch-hero a.sg-link:focus-visible{outline:3px solid currentColor;outline-offset:-6px}
.stanisland-glitch-hero .sg-base,
.stanisland-glitch-hero .sg-glitch{
    position:absolute;
    inset:-2%;
    background-image:var(--sg-image);
    background-size:cover;
    background-position:var(--sg-position);
    background-repeat:no-repeat;
    will-change:transform,filter,clip-path,opacity;
}
.stanisland-glitch-hero .sg-base{z-index:0;transform:scale(1.025)}
.stanisland-glitch-hero .sg-glitch{z-index:1;opacity:0;pointer-events:none}
.stanisland-glitch-hero.sg-has-rgb .sg-glitch-a{filter:contrast(1.08) saturate(1.15) drop-shadow(calc(var(--sg-intensity) * 1px) 0 0 rgba(255,0,70,.7))}
.stanisland-glitch-hero.sg-has-rgb .sg-glitch-b{filter:contrast(1.08) saturate(1.15) drop-shadow(calc(var(--sg-intensity) * -1px) 0 0 rgba(0,215,255,.7))}
.stanisland-glitch-hero .sg-glitch-a{animation:sg-tear-a var(--sg-speed) steps(1,end) infinite}
.stanisland-glitch-hero .sg-glitch-b{animation:sg-tear-b calc(var(--sg-speed) * 1.31) steps(1,end) infinite reverse}
.stanisland-glitch-hero.sg-mode-aggressive .sg-glitch-a{animation-duration:calc(var(--sg-speed) * .58)}
.stanisland-glitch-hero.sg-mode-aggressive .sg-glitch-b{animation-duration:calc(var(--sg-speed) * .73)}

.stanisland-glitch-hero .sg-static{
    position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
    background-image:
      repeating-radial-gradient(circle at 17% 31%, rgba(255,255,255,.75) 0 1px, transparent 1px 3px),
      repeating-linear-gradient(90deg, rgba(255,255,255,.2) 0 1px, rgba(0,0,0,.18) 1px 2px, transparent 2px 4px);
    background-size:7px 7px,5px 100%;
    mix-blend-mode:screen;
}
.stanisland-glitch-hero.sg-has-static .sg-static{animation:sg-static calc(var(--sg-speed) * .82) steps(2,end) infinite}
.stanisland-glitch-hero.sg-mode-aggressive.sg-has-static .sg-static{animation-duration:calc(var(--sg-speed) * .35)}

.stanisland-glitch-hero.sg-has-scanlines:after{
    content:"";position:absolute;inset:0;z-index:3;pointer-events:none;
    background:repeating-linear-gradient(to bottom,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.18) 3px,rgba(255,255,255,.025) 4px);
    background-size:100% 4px;
    opacity:.62;
}
.stanisland-glitch-hero .sg-shade{position:absolute;inset:0;z-index:4;background:rgba(0,0,0,var(--sg-overlay));pointer-events:none}
.stanisland-glitch-hero.sg-has-flicker .sg-base{animation:sg-flicker calc(var(--sg-speed) * 1.7) steps(1,end) infinite}

.stanisland-glitch-hero .sg-inner{
    position:relative;z-index:5;height:100%;box-sizing:border-box;
    display:flex;flex-direction:column;justify-content:flex-end;
    padding:clamp(28px,6vw,96px);color:var(--sg-text);pointer-events:auto;
}
.stanisland-glitch-hero .sg-title{color:inherit;margin:0;max-width:1100px;font-size:clamp(3rem,8vw,9rem);line-height:.88;letter-spacing:-.045em;text-wrap:balance}
.stanisland-glitch-hero .sg-deck{color:inherit;margin:1.2rem 0 0;max-width:760px;font-size:clamp(1rem,1.7vw,1.55rem);line-height:1.35}
.stanisland-glitch-hero .sg-align-center{align-items:center;text-align:center}.stanisland-glitch-hero .sg-align-center .sg-deck{margin-left:auto;margin-right:auto}
.stanisland-glitch-hero .sg-align-right{align-items:flex-end;text-align:right}.stanisland-glitch-hero .sg-align-right .sg-deck{margin-left:auto}

@keyframes sg-tear-a{
  0%,70%,78%,100%{opacity:0;clip-path:inset(0 0 100% 0);transform:translate3d(0,0,0) scale(1.025)}
  71%{opacity:.88;clip-path:inset(12% 0 70% 0);transform:translate3d(calc(var(--sg-intensity) * 1.1px),calc(var(--sg-intensity) * -.2px),0) scale(1.035)}
  72%{opacity:.55;clip-path:inset(54% 0 31% 0);transform:translate3d(calc(var(--sg-intensity) * -1.5px),0,0) scale(1.025)}
  73%{opacity:.82;clip-path:inset(78% 0 8% 0);transform:translate3d(calc(var(--sg-intensity) * .8px),0,0) scale(1.04)}
  74%{opacity:0}
  76%{opacity:.65;clip-path:inset(33% 0 55% 0);transform:translate3d(calc(var(--sg-intensity) * -1px),0,0) scale(1.03)}
  77%{opacity:0}
}
@keyframes sg-tear-b{
  0%,42%,48%,93%,100%{opacity:0;clip-path:inset(100% 0 0 0);transform:translate3d(0,0,0) scale(1.025)}
  43%{opacity:.65;clip-path:inset(6% 0 84% 0);transform:translate3d(calc(var(--sg-intensity) * -1.2px),0,0) scale(1.03)}
  44%{opacity:.8;clip-path:inset(66% 0 18% 0);transform:translate3d(calc(var(--sg-intensity) * 1.6px),0,0) scale(1.04)}
  45%{opacity:0}
  94%{opacity:.5;clip-path:inset(44% 0 48% 0);transform:translate3d(calc(var(--sg-intensity) * .7px),0,0) scale(1.03)}
  95%{opacity:0}
}
@keyframes sg-static{
  0%,67%,74%,100%{opacity:0;transform:translate(0,0)}
  68%{opacity:calc(var(--sg-static) * .28);transform:translate(-1%,1%)}
  69%{opacity:calc(var(--sg-static) * .72);transform:translate(1%,-1%)}
  70%{opacity:calc(var(--sg-static) * .35);transform:translate(0,1%)}
  71%{opacity:0}
  73%{opacity:calc(var(--sg-static) * .58);transform:translate(-1%,0)}
}
@keyframes sg-flicker{
  0%,63%,65%,89%,91%,100%{filter:brightness(1)}
  64%{filter:brightness(.84) contrast(1.08)}
  90%{filter:brightness(1.08) contrast(1.02)}
}

@media (max-width:782px){
 .stanisland-glitch-hero{min-height:520px}
 .stanisland-glitch-hero .sg-glitch{animation-duration:calc(var(--sg-speed) * 1.4)}
 .stanisland-glitch-hero .sg-static{opacity:0!important}
 .stanisland-glitch-hero.sg-has-scanlines:after{opacity:.35}
 .stanisland-glitch-hero .sg-inner{padding:28px 20px 36px}
}
@media (prefers-reduced-motion:reduce){
 .stanisland-glitch-hero .sg-base,.stanisland-glitch-hero .sg-glitch,.stanisland-glitch-hero .sg-static{animation:none!important}
 .stanisland-glitch-hero .sg-glitch,.stanisland-glitch-hero .sg-static{display:none!important}
}
