*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

.hero{
    background:#111;
    font-family:Arial, Helvetica, sans-serif;
}

.hero{
    position:relative;
    height:100vh;
    overflow:hidden;
}

.hero-bg{
    position:absolute;
    inset:0;

    background-image:url("../images/back.jpg");
    background-size:cover;
    background-position:center;
    transform:scale(1.1);
}

.hero-title{
    --blur-x:50%;
    --blur-y:50%;
    --field-rx:250px;
    --field-ry:180px;
    --field-strength:0;
    --field-blur:14px;
    --morph-x:0px;
    --morph-y:0px;

    position:absolute;
    left:50%;
    top:49%;

    transform:translate(-50%,-50%) scaleX(.72);
    transform-origin:center;

    font-family:Arial, Helvetica, sans-serif;
     
    font-weight:900;
    line-height:.78;

    color:#ce1b28;

    z-index:2;

    letter-spacing:-.065em;
    white-space:nowrap;

    user-select:none;

    display:flex;
    padding:90px 130px;

    backface-visibility:hidden;
    -webkit-font-smoothing:antialiased;
    text-rendering:geometricPrecision;
    font-size: clamp(9rem, 25vw, 22rem) !important;
}

.hero-title span{
    display:inline-block;

    cursor:pointer;
}

.hero-title-morph{
    pointer-events:none;
    color:#ce1b28;
    opacity:calc(var(--field-strength) * var(--morph-opacity, .5));
    filter:blur(var(--morph-blur, 12px));
    transform:
        translate(-50%,-50%)
        scaleX(.72)
        translate3d(
            var(--layer-x, 0px),
            var(--layer-y, 0px),
            0
        );
    will-change:transform, filter, opacity, mask-image;

    -webkit-mask-image:radial-gradient(
        ellipse var(--field-rx) var(--field-ry) at var(--blur-x) var(--blur-y),
        #000 0,
        rgba(0,0,0,.98) 22%,
        rgba(0,0,0,.78) 48%,
        rgba(0,0,0,.38) 72%,
        transparent 100%
    );
    mask-image:radial-gradient(
        ellipse var(--field-rx) var(--field-ry) at var(--blur-x) var(--blur-y),
        #000 0,
        rgba(0,0,0,.98) 22%,
        rgba(0,0,0,.78) 48%,
        rgba(0,0,0,.38) 72%,
        transparent 100%
    );
}

.hero-title:not(.hero-title-blur).is-blurring{
    -webkit-mask-image:radial-gradient(
        ellipse var(--field-rx) var(--field-ry) at var(--blur-x) var(--blur-y),
        transparent 0,
        transparent 24%,
        rgba(0,0,0,.035) 34%,
        rgba(0,0,0,.14) 46%,
        rgba(0,0,0,.38) 60%,
        rgba(0,0,0,.7) 76%,
        rgba(0,0,0,.9) 89%,
        #000 100%
    );
    mask-image:radial-gradient(
        ellipse var(--field-rx) var(--field-ry) at var(--blur-x) var(--blur-y),
        transparent 0,
        transparent 24%,
        rgba(0,0,0,.035) 34%,
        rgba(0,0,0,.14) 46%,
        rgba(0,0,0,.38) 60%,
        rgba(0,0,0,.7) 76%,
        rgba(0,0,0,.9) 89%,
        #000 100%
    );
}

.hero-title-blur{
    pointer-events:none;
    filter:blur(var(--field-blur));
    opacity:var(--field-strength);
    will-change:filter, opacity, mask-image, transform;

    -webkit-mask-image:radial-gradient(
        ellipse var(--field-rx) var(--field-ry) at var(--blur-x) var(--blur-y),
        #000 0,
        #000 18%,
        rgba(0,0,0,.96) 34%,
        rgba(0,0,0,.76) 52%,
        rgba(0,0,0,.42) 70%,
        rgba(0,0,0,.16) 86%,
        transparent 100%
    );
    mask-image:radial-gradient(
        ellipse var(--field-rx) var(--field-ry) at var(--blur-x) var(--blur-y),
        #000 0,
        #000 18%,
        rgba(0,0,0,.96) 34%,
        rgba(0,0,0,.76) 52%,
        rgba(0,0,0,.42) 70%,
        rgba(0,0,0,.16) 86%,
        transparent 100%
    );
}

.hero-title-color{
    pointer-events:none;
    color:transparent;
    opacity:calc(var(--field-strength) * .5);
    filter:blur(14px);
    will-change:opacity, mask-image, background-position;

background: radial-gradient(
    ellipse var(--field-rx) var(--field-ry) at var(--blur-x) var(--blur-y),
    #ff6b76 0,
    #f54855 18%,
    #e72f3c 38%,
    #ce1b28 61%,
    #a11420 86%
);
    -webkit-background-clip:text;
    background-clip:text;

    -webkit-mask-image:radial-gradient(
        ellipse var(--field-rx) var(--field-ry) at var(--blur-x) var(--blur-y),
        #000 0,
        rgba(0,0,0,.96) 20%,
        rgba(0,0,0,.82) 38%,
        rgba(0,0,0,.56) 58%,
        rgba(0,0,0,.28) 76%,
        transparent 100%
    );
    mask-image:radial-gradient(
        ellipse var(--field-rx) var(--field-ry) at var(--blur-x) var(--blur-y),
        #000 0,
        rgba(0,0,0,.96) 20%,
        rgba(0,0,0,.82) 38%,
        rgba(0,0,0,.56) 58%,
        rgba(0,0,0,.28) 76%,
        transparent 100%
    );
}

.hero-character{
    position:absolute;

    left:50%;
    top:50%;

    transform:translate(-50%,-50%);

    z-index:3;

    transform-style:preserve-3d;
    perspective:1000px;
    will-change:transform;
}

.hero-character img{
    width:400px;
    max-width:34vw;
    display:block;

    filter:drop-shadow(
        0 40px 60px rgba(0,0,0,.4)
    );
}

.hero-cta{
    position:absolute;
    left:50%;
    bottom:6.5vh;
    z-index:4;
    transform:translateX(-50%);
}

.hero-button{
    width:clamp(180px,13vw,250px);
    height:clamp(58px,7.4vh,82px);

    display:flex;
    align-items:center;
    justify-content:center;

    border:1.5px solid #111;
    background:rgba(255,255,255,.08);

    color:#111;
    font-size:clamp(1rem,1.25vw,1.5rem);
    font-weight:500;
    line-height:1;
    text-decoration:none;

    backdrop-filter:blur(2px);
    -webkit-backdrop-filter:blur(2px);

    transition:
        color .35s ease,
        background-color .35s ease;
}

.hero-button:hover,
.hero-button:focus-visible{
    color:#fff;
    background:#111;
}

.hero-button:focus-visible{
    outline:2px solid #fff;
    outline-offset:4px;
}

@media (max-width:700px){
    .hero-title{
        font-size:21vw;
        transform:translate(-50%,-50%) scaleX(.72);
        padding:65px 90px;
    }

    .hero-character img{
        width:62vw;
        max-width:none;
    }

    .hero-cta{
        bottom:7vh;
    }
}