@import url('fonts.css');

body {
    margin: 0;
    padding: 0;
    height: 100vh; 
    height: 100dvh;    
    font-family: 'Antenna', Arial, sans-serif;
    position: relative;
    background-color: rgb(0, 0, 0);
    overflow: hidden;
}

/* Keyframes for animations */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleX {
    from { 
        transform: scaleX(0); 
    }
    to { 
        transform: scaleX(1); 
    }
}

.logo {
    position: absolute;
    top: 45%;
    left: 50%;
    /* Adjust this value to scale the logo up or down (e.g. 0.75 is 75%, 0.9 is 90%, 1.0 is 100%) */
    --logo-scale: 1.2;
    /* Pure CSS scaling unit! Acts as 1px, dynamically scaled based on logo-scale */
    --px: calc(min(0.1vw, 0.125vh) * var(--logo-scale));
    transform: translate(-50%, -50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    --logo-color: rgb(255, 255, 255);

    -webkit-user-select: none; /* Safari */
    -webkit-touch-callout: none;
    -ms-user-select: none;      /* Internet Explorer/Edge */
    user-select: none;          /* Standard syntax */
}


.groups {
    display: flex;
    margin-bottom: calc(20 * var(--px));
}

.group {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-right: calc(43 * var(--px));
        width: fit-content;
}

.machinegroup {
    opacity: 0; 
    animation: fadeIn 1.3s 0.6s forwards; /* MACHINE word fades in after 2 seconds, duration 1s */
}

.mediagroup {
    opacity: 0; 
    animation: fadeIn 1.3s 1.2s forwards; /* MEDIA word fades in after 2.5 seconds, duration 1s */
}


.group:last-child {
    margin-right: 0;
}

.bars {
    display: flex;
    align-items: flex-end;
    margin-bottom: calc(24 * var(--px));
    width: 100%;
    gap: calc(39 * var(--px));
}

.machinebars {
    margin-left: 3%;
    transform: scaleX(1) translateX(calc(0 * var(--px)));
}

.mediabars {
    margin-right: 3%;
    margin-left: 3%;
    transform: scaleX(1) translateX(calc(0 * var(--px)));
}


.bar { 
    background-color: var(--logo-color);
    height: calc(280 * var(--px));
    flex: 0.5;
}



.machinebars .bar {
    transform-origin: left; /* Or 'left' if you want them to grow outward */
    animation: scaleX 1.5s 0.2s forwards;
}

/* Media Bars grow with the Media text */
.mediabars .bar {
    transform-origin: left;
    animation: scaleX 1.5s 0.7s forwards;
}



.text {
    font-size: calc(46 * var(--px));
    color: var(--logo-color);
    line-height: 1;
    margin-top: calc(5 * var(--px));
    transform: scaleY(100);
}

.machinetext {
    font-weight: 600; /* Maps to Antenna_Bold.woff2 */
    margin-left: calc(-0 * var(--px));
    margin-right: calc(-7 * var(--px));
    letter-spacing: 0.03em;
    transform: scaleX(1.0) scaleY(1.1) translateX(calc(0 * var(--px)));
}

.mediatext {
    font-family: 'Antenna', sans-serif;
    font-weight: 300; /* Maps to Antenna_Light.woff2 */
    margin-left: calc(-4 * var(--px));
    margin-right: calc(-6 * var(--px));
    letter-spacing: 0.07em; /* A little extra breathing room for the Light weight */
    transform: scaleX(1.0) scaleY(1.1) translateX(calc(0 * var(--px)));
}




.contact {
    opacity: 0;
}


.contact {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 18px;
    color: white;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 20px;
    border-radius: 5px;
    animation: fadeIn 1.5s 2.5s forwards;   
}

.contact a {
    color: white;
    text-decoration: none;
}