:root {
    /* Inset a little to try and control subpixel aliasing */
    --elur-clip-box: polygon(0.1% 0.1%, 99.9% 0.1%, 99.9% 99.9%, 0.1% 99.9%);
    --elur-line-radius: 24px;
    --elur-line-width: 2px;
    --elur-line-track: #333333;
    --elur-line-move-n: translateY(calc(-50% + calc(var(--elur-line-width) / 2)));
    --elur-line-move-s: translateY(calc(50% - calc(var(--elur-line-width) / 2)));
    --elur-line-move-w: translateX(calc(-50% + calc(var(--elur-line-width) / 2)));
    --elur-line-move-e: translateX(calc(50% - calc(var(--elur-line-width) / 2)));
	--elur-button-y-padding: 0.25em;
	--elur-button-font-size: 1.4rem;
	--elur-button-height: calc(var(--elur-button-font-size) + (var(--elur-button-y-padding) * 2) + (var(--wx-border-width) * 2));
	--elur-line-segment-minimum-size: 40px;
}

/* body {
    background-color: green !important;
} */

.elur-line {

    > div {
        
        /* Rounding everywhere is to try and control subpixel aliasing */
        width: round(100%, 1px);
        height: round(100%, 1px);
        background-color: black;
        position: relative;
        overflow: clip;
        clip-path: var(--elur-clip-box);
        min-width: var(--elur-line-segment-minimum-size);
        min-height: var(--elur-line-segment-minimum-size);
        
        /* This will hold the white line on a black background, but only draw over the content below if lighter */
        mix-blend-mode: screen;

        /* The shine effect is a fixed element, set as ::before with a transform on it.  This is basically all an iPhone workaround. */
        .elur-shine-effect {

            position: absolute;
            display: block;
            overflow: clip;
            top: 0px;
            left: 0px;
            width: round(100%, 1px);
            height: round(100%, 1px);
            mix-blend-mode: darken;
            clip-path: var(--elur-clip-box);
            
            /* iPhone has a lot of trouble with fixed elements. It's trying to save GPU. */
            /* We are going to draw a copy of the fixed background, full screen, in every line section, but clip it to this box */
            /* All other platforms would be OK with background-position: fixed */

            &::before {
                content: '';
                background-image: linear-gradient(2deg, var(--elur-line-track) 45%, white 49%, white 51%, var(--elur-line-track) 59%);
                position: fixed;
                top: 0px;
                left: 0px;
                width: round(100%, 1px);
                height: round(100%, 1px);
                transform: translate3d(0, 0, 0);
            }
        }
        
        .elur-line-wrapper {

            position: absolute;
            top: 0px;
            left: 0px;
            width: round(100%, 1px);
            height: round(100%, 1px);
            background-color: black;
            clip-path: var(--elur-clip-box);
            outline: none;
            
            .elur-line-line {

                border-style: solid;
                border-width: 0px;
                border-color: black;
                position: absolute;
                top: 0px;
                left: 0px;
                width: round(100%, 1px);
                height: round(100%, 1px);
                background-color: black;
                outline: none;
                
                &.elur-line-round-nw { border-top-left-radius: var(--elur-line-radius);  }
                &.elur-line-round-ne { border-top-right-radius: var(--elur-line-radius); }
                &.elur-line-round-sw { border-bottom-left-radius: var(--elur-line-radius); }
                &.elur-line-round-se { border-bottom-right-radius: var(--elur-line-radius); }
                &.elur-line-border-n { border-top-width: var(--elur-line-width); border-top-color: white; }
                &.elur-line-border-s { border-bottom-width: var(--elur-line-width); border-bottom-color: white; }
                &.elur-line-border-w { border-left-width: var(--elur-line-width); border-left-color: white; }
                &.elur-line-border-e { border-right-width: var(--elur-line-width); border-right-color: white; }
                &.elur-line-move-n { transform: var(--elur-line-move-n); }
                &.elur-line-move-s { transform: var(--elur-line-move-s); }
                &.elur-line-move-w { transform: var(--elur-line-move-w); }
                &.elur-line-move-e { transform: var(--elur-line-move-e); }
                &.elur-line-move-ne { transform: var(--elur-line-move-n) var(--elur-line-move-e); }
                &.elur-line-move-se { transform: var(--elur-line-move-s) var(--elur-line-move-e); }
                &.elur-line-move-nw { transform: var(--elur-line-move-n) var(--elur-line-move-w); }
                &.elur-line-move-sw { transform: var(--elur-line-move-s) var(--elur-line-move-w); }
            }
        }
    }
}

.elur-line-regular-only {
    display: none;
}

.elur-line-compact-only {
    display: flex;
}

@media screen and (min-width: 799px) {
    
    .elur-line-regular-only {
        display: flex;
    }
    
    .elur-line-compact-only {
        display: none;
    }
    
    .elur-card {
        flex-direction: column;
    }
}

.elur-heading {
    
	text-transform: uppercase;
	
	em {
		font-family: "Iberra Real Nova";
		text-transform: none;
		font-weight: 400;
		color: var(--wx-brand);
	}
	
    &.elur-heading-small {
            
        font-size: 1.2em;
        line-height: 1.2em;
        
        span {
            font-weight: 400;
        }
    }
	
    &.elur-heading-extra-large {
        font-size: 3em;
        line-height: 1em;
    }
    
    &::after {
        content: '';
        display: block;
        height: var(--wx-border-width);
        margin-top: var(--wx-heading-border-spacing);
        background: white;
    }
    
    &.elur-heading-brand em {
        color: var(--wx-brand);
    }
    
    &.elur-heading-accent em {
        color: var(--wx-accent);
    }
	
    &.elur-heading-accent-2 em {
        color: var(--wx-accent-2);
    }
    
    &.elur-heading-brand::after {
        background: linear-gradient(90deg, var(--wx-brand) 0%, transparent 100%);
    }
    
    &.elur-heading-accent::after {
        background: linear-gradient(90deg, var(--wx-accent) 0%, transparent 100%);
    }
	
    &.elur-heading-accent-2::after {
        background: linear-gradient(90deg, var(--wx-accent-2) 0%, transparent 100%);
    }
}

#main-menu-panel {
    .brx-offcanvas-inner {
        transition: opacity 0.25s;
        transform: none;
        opacity: 0;
        background: #000000cc;
        box-shadow: inset 0 0 20vh 20vh #000000cc;
    }
  
    &.brx-open .brx-offcanvas-inner {
        opacity: 1;
    }
}

.elur-button {

    border-width: 0px;
    border-radius: 1000px;
    color: white;
    position: relative;
    cursor: pointer;
    display: flex;
    text-transform: uppercase;
    padding: 0px;
    background: black;
    box-shadow: var(--elur-gentle-glow);
    font-size: var(--elur-button-font-size);
    transition: transform var(--wx-transition-duration);
    transition-timing-function: ease-in-out;
    
	&.elur-button-background-transparent {
		mix-blend-mode: screen;
	}

    * {
        border-radius: 1000px;
    }

    div {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        min-width: 0px;
        min-height: 0px;
        transition: opacity var(--wx-transition-duration);
        background-clip: border-box;
    }

    div:first-of-type {
        animation: 8s rotate linear infinite;
        animation-timing-function: ease-in;
        background-image: linear-gradient(
            var(--angle),
            var(--elur-line-track),
            var(--wx-accent),
            var(--elur-line-track)
        );
    }

    div:last-of-type {
        opacity: 0;
        animation-timing-function: ease-out;
        animation: 2s rotate linear infinite;
        background-image: linear-gradient(
            var(--angle),
            var(--elur-line-track),
            var(--wx-brand),
            var(--elur-line-track)
        );
    }

    span {
        display: block;
        position: relative;
        z-index: 1;
        background-color: black;
        padding: var(--elur-button-y-padding) 2em;
        margin: var(--wx-border-width);
    }

    &:hover {
        
        transform: scale(1.05);

        div:first-of-type {
            opacity: 0;
        }

        div:last-of-type {
            opacity: 1;
        }
    }
}

@keyframes rotate {
    to {
      --angle: 360deg;
    }
}

@property --angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
} 

#elur-top-menu-mask {
	background: #00000066;
	opacity: 0;
	visibility: hidden;
	transition-property: opacity, visibility;
	transition-delay: 0s, var(--wx-transition-duration);
	transition-duration: var(--wx-transition-duration), 0s;
	pointer-events: none;
}

body.scroll #elur-top-menu-mask {
	opacity: 1;
	visibility: visible;
	transition-property: opacity, visibility;
	transition-delay: 0s, 0s;
	transition-duration: var(--wx-transition-duration), 0s;
}

#elur-main-menu-toggle {
	
	display: flex;
	align-items: center;
	gap: var(--wx-space-s);
	
	&::before {
		font-size: 2.4rem;
	    content: "Menu";
    }
}