/* -------------------- BASIC SETUP BEHAVIOR -------------------- */

* {
    /* Fixing the box-sizing issue */
    /* Explanation: https://www.w3schools.com/css/css3_box-sizing.asp */
    box-sizing: border-box;

    /* Setting all default margin and padding to 0, because elements have pretty arbitary initial settings */
    margin: 0;
    padding: 0;

    /* Smooth scrolliing when anchor links pressed */
    scroll-behavior: smooth;
}

a {
  text-decoration: none;
  color: inherit;
}

    /* -------------------- ROOT SET UP (VARIABLES ETC.) -------------------- */



        :root {
    --gradient-angle: 0deg;
    --gradient-angle-back: 60deg;
    --box-border-color: #6547ff;
    --box-border-gradient: linear-gradient(var(--gradient-angle), #1a0a12 0%, #6547ff 50%, #1a0a12 100%);
    --box-border-gradient-back: linear-gradient(var(--gradient-angle-back), #1a0a12 0%, #6547ff 50%, #1a0a12 100%);
    --specimen-button-gradient: linear-gradient(90deg, #1a0a12 0%, #6547ff 100%);
    --box-border-width: 2px;
    --posX: 20px;
    --posY: 20px;
    --scaleX: 1;
    --scaleY: 1;
    animation: rotateGradient 20s linear infinite;
}



    /* -------------------- PROPERTIES FOR ANIMATION (NEED TO BE CALLED EARLY SO THAT VALUE IS READ)-------------------- */

@property --grow {
  syntax: "<number>";
  inherits: true;
  initial-value: 1;
}

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

    /* -------------------- GRADIENT ANIMATION -------------------- */

@keyframes rotateGradient {
  to {
    --gradient-angle: 360deg;
    --gradient-angle-back: 420deg;
  }
}

    /* -------------------- FONTS -------------------- */

@font-face {
    font-family: 'caltrop';
    src: url('../fonts/Caltrop-VariableVF.ttf') format('truetype-variations');
}

@font-face {
    font-family: 'brescia';
    src: url('../fonts/Brescia-PictoRippleVF.ttf') format('truetype-variations');
}

@font-face {
    font-family: 'prismatic';
    src: url('...assets/fonts/Prismatic-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'ronzino';
    src: url('../fonts/Ronzino-Bold.woff2') format('woff2');
    font-weight: 700;
}

    /* -------------------- BODY -------------------- */

    body {
    background-color: #1a0a12;
    color: #7cd68c;
    margin: 0;
    padding: 0;
    /* background-image: 
    linear-gradient(#ffffff 1px, transparent 1px),
    linear-gradient(90deg, #ffffff 1px, transparent 1px); */
     /* grid size */
  /* background-size: 40px 40px;
  background-position-x: left;
  background-position-y: top; */
}

    /* -------------------- MENU STYLES -------------------- */

    .menu-box {
 /* background-color: aqua;
 border: 2px white; */
    display: flex;
    gap: 40px;
    height: 30vh;
    padding: 40px;
}

.menu-column {
    /* background-color: red; */
    display: flex;
    flex: 2;
    flex-direction: column;
    width: 100%;
    height: 100%;
     transition: flex 0.3s ease;
}

.menu-column:hover {
flex: 4;
}

.menu-subcolumn {
        /* background-color: rgb(255, 0, 208); */
    display: flex;
    flex-direction: column;
    /* width: 100%; */
    flex: 1;
    /* padding: 10px; */
    gap: 40px;
     transition: flex 0.3s ease;
}

.menu-subcolumn:hover {
    flex: 2;
}

.menu-subitem{
/* background-color: rgb(0, 255, 8); */
    display: flex;
    flex-direction: column;
    flex: 1;
    /* width: 100%; */
    /* margin: 10px; */
     transition: flex 0.3s ease;
}

.menu-subitem:hover {
    flex: 3;
}

.menu-box,
.menu-column,
.menu-subcolumn,
.menu-subitem {
  min-height: 0;
}

    /* -------------------- BOX STYLES -------------------- */

    .corner {
    stroke: var(--box-border-color);
    stroke-width: var(--box-border-width);
    vector-effect: non-scaling-stroke;
    position: absolute;
    overflow: visible;
}

.corner-tl {
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    transform: scale(var(--scaleX, 1), var(--scaleY, 1));
    transform-origin: top left;
    overflow: visible;
}

.corner-tr {
    top: 0;
    left: 100%;
    height: 20px;
    width: 20px;
    transform: scale(var(--scaleX, 1), var(--scaleY, 1));
    transform-origin: top left;
}

.corner-bl {
    top: 100%;
    left: 100%;
    width: 20px;
    height: 20px;
    transform: scale(var(--scaleX, 1), var(--scaleY, 1));
    /* background-color: turquoise; */
    transform-origin: top left;
}

.corner-br {
    top: 100%;
    left: 0;
    height: 20px;
    width: 20px;
    transform: scale(var(--scaleX, 1), var(--scaleY, 1));
    transform-origin: top left;
}

.box-content {
    position: relative;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    left: calc(var(--posX)*.5);
    top: calc(var(--posY)*.5);
    width: 100%;
    height: 100%;
    z-index: 2;
    overflow: visible;
    pointer-events: auto;
    white-space: normal;
    word-break: break-word;
}

.box {
    position: relative;
    align-items: center;
    /* left: calc(var(--posX)/-1.5);
        top:  calc(var(--posY)/-1.5); */
        min-height: 100%; 
    height: auto;   
    width: 100%;
    padding: 20px;
    border: var(--box-border-width) solid transparent;
    border-image: var(--box-border-gradient) 1;
    background: #ffffff00;
    overflow: visible;
    pointer-events: none;
}

.box-background {
    position: absolute;
    left: var(--posX);
    top: var(--posY);
    width: 100%;
        min-height: 100%; 
    height: auto;  
    border: var(--box-border-width) solid transparent;
    border-image: var(--box-border-gradient-back) 1; 
    /* https://www.w3schools.com/css/css3_border_images.asp? */
    z-index: -1;
    overflow: visible;
    background-color: #6647ff00;
    /* box-shadow: #6547ff33 10px 10px 10px 0px; */
    pointer-events: none;
    animation: rotateGradient 6s linear infinite;
}

.corners,
.box-background {
    pointer-events: none;
}

.corners {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    overflow: visible;
    stroke-linecap: round;
}

.corner {
    stroke: var(--box-border-color);
    stroke-width: var(--box-border-width);
    position: absolute;
    /* background-color: var(--border-color); */
    overflow: visible;
}

.corner::after {
    content: '';
    position: absolute;
    inset: 0;
    /* barely understand what some of this svg stuff means had to ask the AI */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0%' y1='0%' x2='100%' y2='100%'%3E%3Cstop offset='0%' stop-color='%23000000'/%3E%3Cstop offset='50%' stop-color='%236547ff'/%3E%3Cstop offset='100%' stop-color='%23000000'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,0 L20,20' stroke='url(%23g)' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");

    background-size: 100% 100%;
}

    /* -------------------- BOX OVERIDE FOR MENU (TO MAKE FLEX WORK) -------------------- */
.menu-box .box {
  height: 100% !important;      /* I think I need the important, wasn't working before*/
  width: 100%;
  padding: 0;
  pointer-events: auto; 
}

    /* -------------------- SPECIMEN STYLES -------------------- */

.specimen-box {
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    gap: 40px;
    min-height: 100vh;  /* base height */
    height: auto;       /* allow growth if content needs more */
    padding: 40px;
}

.specimen-headfoot {
    /* background-color: rgb(0, 255, 21); */
    display: flex;
    gap: 40px;
    --grow: 1;
    flex: 1;
    flex-direction: row;
    width: 100%;
    height: 100%;
transition: flex 0.3s ease, --grow 0.3s ease;
}

.specimen-row {
    /* background-color: red; */
    display: flex;
    flex: 4;
    --grow: 1;
    gap: 40px;
    flex-direction: row;
    min-width: 100%;
    width: auto;
    min-height: 100%; 
    height: auto;   
   transition: flex 0.3s ease, --grow 0.3s ease;
          
}

.specimen-column {
    /* background-color: rgb(47, 0, 255); */
    display: flex;
    flex: 1;
    --grow: 1;
    flex-direction: row;
    width: 100%;
    min-height: 100%; 
    height: auto;      
     transition: flex 0.3s ease, --grow 0.3s ease;
}


.specimen-headfoot:hover {
    flex: 2;
    --grow: 2;
}

.specimen-row:hover {
    flex: 8;
      --grow: 1.5;
}

.specimen-column:hover {
    flex: 2;
    --grow: 2;
}

.specimen-button:hover {
    flex: 2;
}

/* .specimen-box,
.specimen-headfoot,
.specimen-row,
.specimen-column,
.specimen-button {
  min-height: 0;
} */

    /* -------------------- SPECIMEN TEXT STYLES -------------------- */
    /* (PRISMTIC GETS SPECIAL CONTAINER) */

    .specimen-text {
  --base-size: 3vw;

  font-family: system-ui, sans-serif;
  font-size: calc(var(--base-size) * var(--grow));
  line-height: 1.2;

  display: block;
  width: 100%;
  color: #ffffff;

  /* overflow: hidden; */
  word-break: break-word;
  text-wrap: balance;
    }

            .specimen-text-button {
  font-family: ronzino;
                display: flex;
  align-items: center;       
  justify-content: center; 
  text-align: center;
  color: #6547ff;
  font-weight: 400;
  --base-size: 3.5vw;
  line-height: 1;
  padding: 0 40px 0 0;

    /* ANIMATION */
    animation-name: button-animation;
    animation-duration: .5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
        }

          @keyframes button-animation {

    0%,
    100% {
        color: #6547ff;
    }

    50% {
        color: #ff7490;
    }
}

    /* -------------------- SPECIMEN IMAGE STYLES -------------------- */

.specimen-image {
--base-size: 40vw;

display: block;
width: calc(var(--base-size) * var(--grow));
height: auto;
object-fit: contain; /* fill stretches and fit crops */
/* transform: scale(var(--grow)); scale image using grow variable */
/* transition: width 0.3s ease; */ /* this makes scaliong look weird */
}

    /* -------------------- PRISMATIC SPECIMEN IMAGE STYLES -------------------- */

    .specimen-image-prismatic-header {
        --base-size: 40vw;
    }

        .specimen-image-prismatic-xl {
        --base-size: 30vw;
    }

            .specimen-image-prismatic-l {
        --base-size: 25vw;
    }

                .specimen-image-prismatic-m {
        --base-size: 60vw;
    }

    /* -------------------- FONT SPECIFIC SPECIMEN TEXT STYLES -------------------- */
        /* -------------------- CALTROP -------------------- */

        .specimen-text-caltrop-header {
    font-family: "caltrop";
    font-variation-settings: "POKE" 50, "SHAR" 50, "SPIN" 0, "wdth" 0;
    font-weight: 400;
  --base-size: 5vw;
}

    .specimen-text-caltrop-xl {
    font-family: "caltrop";
    font-variation-settings: "POKE" 50, "SHAR" 50, "SPIN" 0, "wdth" 0;
    font-weight: 400;
  --base-size: 10vw;
  /* ANIMATION */
    animation-name: caltrop-animation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

    .specimen-text-caltrop-l {
    font-family: "caltrop";
    font-variation-settings: "POKE" 50, "SHAR" 50, "SPIN" 0, "wdth" 0;
    font-weight: 400;
  --base-size: 3vw;
}

    .specimen-text-caltrop-m {
    font-family: "caltrop";
    font-variation-settings: "POKE" 50, "SHAR" 50, "SPIN" 0, "wdth" 0;
    font-weight: 400;
  --base-size: 1.5vw;
    }

            /* -------------------- CALTROP ANIMATION-------------------- */

    @keyframes caltrop-animation {

    0%,
    100% {
        font-variation-settings: "POKE" 50, "SHAR" 50, "SPIN" 0, "wdth" 0;
        color: #6547ff;
    }

    25% {
        font-variation-settings: "POKE" 100, "SHAR" 100, "SPIN" 100, "wdth" 0;
        color: #ff7490;
    }

    50% {
        font-variation-settings: "POKE" 0, "SHAR" 0, "SPIN" 0, "wdth" 100;
        color: #ff7490;
    }

    75% {
        font-variation-settings: "POKE" 50, "SHAR" 50, "SPIN" 0, "wdth" 0;
        color: #ff7490;
    }
}

        /* -------------------- PRISMATIC -------------------- */

        
    .specimen-text-prismatic-header {
    font-family: "prismatic";
    font-weight: 400;
    text-transform: uppercase;
  --base-size: 5vw;
}

    .specimen-text-prismatic-xl {
    font-family: "prismatic";
    font-weight: 400;
    text-transform: uppercase;
  --base-size: 10vw;
}

    .specimen-text-prismatic-l {
    font-family: "prismatic";
    font-weight: 400;
    text-transform: uppercase;
  --base-size: 3vw;
}

    .specimen-text-prismatic-m {
    font-family: "prismatic";
    font-weight: 400;
    text-transform: uppercase;
  --base-size: 1.5vw;
    }

        /* -------------------- BRESCIA -------------------- */

        .specimen-text-brescia-header {
    font-family: "brescia";
    font-variation-settings: "RIPP" 0;
    font-weight: 400;
  --base-size: 5vw;
}

    .specimen-text-brescia-xl {
    font-family: "brescia";
    font-variation-settings: "RIPP" 0;
    font-weight: 400;
  --base-size: 10vw;
}

    .specimen-text-brescia-l {
    font-family: "brescia";
    font-variation-settings: "RIPP" 0;
    font-weight: 400;
  --base-size: 3vw;

    /* ANIMATION */
    animation-name: brescia-animation;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

    .specimen-text-brescia-m {
    font-family: "brescia";
    font-variation-settings: "RIPP" 0;
    font-weight: 400;
    text-transform: uppercase;
  --base-size: 1.5vw;
    }

            /* -------------------- BRESCIA ANIMATION-------------------- */

   @keyframes brescia-animation {

    0%,
    100% {
        font-variation-settings: "RIPP" 0;
        color: #6547ff;
    }

    50% {
        font-variation-settings: "RIPP" 100;
        color: #ff7490;
    }
}

    /* -------------------- VIDEO STYLES -------------------- */

.hvy-video {
  width: 100%;
  height: 120%;
  display: block;
  object-fit: fill;
  pointer-events: none;

}