/**
 Theme Name: Highway - Bratt
 Description: Early highway company style for Bratt LLC
 Version: 1.0.0
 Author: Jeremiah Bratton
 Tags: full-site-editing
 Text Domain: bratt-highway
 Tested up to: 6.4
 Requires at least: 6.4
 Requires php: 8.0
*/
@property --year {
     syntax: "<integer>";
     initial-value: 1981;
     inherits: false;
 }
 
:root {
    --font-family-body: bookmania, serif;
    --font-weight-body: 300;
    --font-style-body: normal;
    --font-family-heading: "glodok", sans-serif;
    --font-weight-heading: 400;
    --font-style-heading: normal;
    
    --background-color: hsl(39, 100%, 93%);
      --primary-color: hsl(34, 32%, 29%);
    
      background-color: var(--background-color);
      color: var(--primary-color);
}
/**
Form Fields
**/

.form-field {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;

    label {
        font-family: var(--font-family-body);
        font-weight: var(--font-weight-body);
        font-style: var(--font-style-body);
        position: absolute;
        top: 50%;
        transform: translate(10px, -50%);
        z-index: 1;
    }

    input {
        font-size: 1rem;
        font-family: var(--font-family-body);
        font-weight: var(--font-weight-body);
        font-style: var(--font-style-body);
        padding: 0.5rem;

        &:user-valid + label {
            transform: translate(10px, -125%);
            font-size: 0.75rem;
            transition: transform 0.3s ease;
        }
    }

    &:focus-within,
    &:has(input:user-valid),
    &:has(input:user-invalid) {
        label {
            transform: translate(10px, calc(-100% - 0.5rem));
            font-size: 0.75rem;
            transition: transform 0.3s ease, rotate 0.3s ease;
        }

        input {
            padding: 1.1rem 0.5rem 0.4rem 0.5rem;
            transition: padding-top 0.3s ease-in-out;
            &:before,&:after {
                content: '';
                position: absolute;
                border-radius: 0.25rem;
                z-index: -1;
                height: 100%;
                width: 100%;
            }
            &:before {
                content: '';
                position: absolute;
                top: 5%;
                right: 5%;
                background-color: rgb(255, 0, 0);
            }
            &:after {
                content: '';
                position: absolute;
                top: 5%;
                right: 5%;
                background-color: rgb(0, 80, 253);
            }
        }
    }
}

@keyframes spin-slam {
    0% {
        rotate: x 0deg;
        scale: 0.9;
    }

    50% {
        scale: 1.2;
    }

    100% {
        rotate: x 720deg;
        scale:1;
    }
}

@container brattco-contact-form-container (width >= 600px) {
    label {
        border: 1px solid red;
    }
}

/**
Home
**/
.home .highway-header {
    display: none;

}
.home-h1-text {
    font-family: var(--font-family-heading);
    font-weight: 400;
    position: absolute;
    transform-origin: left bottom;
    transform: rotate(90deg) translateX(-50%);
    top: 5%;
    left: 0px;
    font-size: clamp(40px, 11rem, 80vh) !important;
    margin: 0;
    line-height: 1;
    opacity: 0.3;
}

#site-title {
    position: fixed;
    z-index: 2;
    transform-origin: 10% 50%;
}

 #logo-box rect {
     stroke-dasharray:1;
     stroke-dashoffset:1;
     animation: draw 2s cubic-bezier(0.85, 0, 0.15, 1) forwards;
 }
 
 #logo-box {
     width:120px;
     height:120px;
     path {
         stroke: var(--primary-color);
         stroke-dasharray:1;
         stroke-dashoffset:1;
         animation: draw-logo-lines 2s cubic-bezier(0.85, 0, 0.15, 1) forwards;
         
         &:nth-child(3) {
              animation-delay: 0s;
              transition: stroke 0.2s ease-in-out;
            }
            
            &:nth-child(1){
              animation-delay: 0.3s;
              transition: stroke 0.2s ease-in-out;
              transition-delay:0.2s;
            }
            
            &:nth-child(2){
              animation-delay: 0.5s;
              transition: stroke 0.2s ease-in-out;
              transition-delay:0.1s;
            }
       }
       
   &:hover {
       path:nth-child(1) {
         stroke: hsl(3, 89%, 51%);
         transition: stroke 0.2s ease-in-out;
         transition-delay:0.2s;
       }
   
       path:nth-child(2) {
         stroke:hsl(220, 100%, 70%);
         transition: stroke 0.2s ease-in-out;
         transition-delay:0.1s;
       }
       
       path:nth-child(3) {
            stroke:hsl(39, 100%, 57%);
            transition: stroke 0.2s ease-in-out;
        }
     }
 }
 
 @keyframes draw {
   to {
     stroke-dashoffset:0;
   }
 }
 
 @keyframes draw-logo-lines {
   to {
     stroke-dashoffset:0;
   }
 }
 
 @keyframes scale-x-full {
     to {
         transform: scaleX(1);
     }
 }
 
 @keyframes fade-text-up {
     from {
         transform: translateY(10px);
         opacity: 0;
     }
     to {
         transform: translateY(0);
         opacity: 1;
     }
 }
 
 @keyframes year-ticker {
     from {
         --year: 1981;
     }
     to {
         --year: 2025;
     }
 }
 
 /* Footer Styles */
 #copyright-year {
     animation: year-ticker 3s cubic-bezier(0.85, 0, 0.15, 1) forwards;
     animation-delay: 0.8s;
     counter-reset: num var(--year);
     
     &:after {
         content: counter(num);
     }
 }
 
 footer {
     container-type: inline-size;
     container-name: footer;
 }
 
 #footer-container {
     display: grid;
     grid-template-columns:120px 1fr;
     max-width: 92vw;
     width: 100%;
     margin: 0 auto;
 }
 
 #footer-info {
     display: flex;
     justify-content: space-between;
     padding: 0 0 0.5rem 1rem;
     position: relative;
     align-items: flex-end;
     
     strong {
         font-size: 120%;
         animation: fade-text-up 1s cubic-bezier(0.85, 0, 0.15, 1) forwards;
         opacity: 0;
         animation-delay: 1.3s;
     }
     
     #footer-date-line {
         display:flex;
         gap:0.25rem;
          font-size: 100%;
          animation: fade-text-up 1s cubic-bezier(0.85, 0, 0.15, 1) forwards;
          opacity: 0;
          animation-delay: 1.5s;
      }
     
     &:after {
         content:'';
         background-color: #000;
         display: block;
         height: 2px;
         width: 100%;
         position: absolute;
         bottom: 0;
         right: 0;
         transform: scaleX(0);
         transform-origin: right;
         animation: scale-x-full 1.8s cubic-bezier(0.85, 0, 0.15, 1) forwards;
     }
 }
 
 svg {
     height: auto;
 }
 
 @container footer (inline-size <= 600px) {
      #footer-container {
         grid-template-columns:60px 1fr;
      }
  
     #logo-box {
         height:60px;
         width:60px;
     }
  
     #footer-info {
         flex-direction:column;
         justify-content:flex-end;
         
        &:after {
            height:1px;
        }
      
      strong {
           font-size: 90%;
       } 
       
       #footer-date-line {
           font-size:75%;
       }  
     }
  }