/*

// Custom Properties

*/

:root {

    /* Coffee-inspired Color Palette */
    
    --primary-h: 25;
    --primary-s: 60%;
    --primary-l: 35%;
    
    --primary: hsl(25, 60%, 35%);
    --primary-text: white;
    
    --secondary-h: 30;
    --secondary-s: 75%;
    --secondary-l: 50%;
    
    --secondary: hsl(30, 75%, 75%);
    --secondary-text: var(--dark);
    
    --dark: hsl(20, 25%, 10%);
    --light: hsl(35, 50%, 95%);
    
    --canvas: hsl(35, 25%, 98%);
    --canvas-border: hsla(25, 50%, 60%, 0.5);
    
    /* Typography */
    
    --body-font-family: 'Lato', sans-serif;
    --header-font-family: 'Young Serif', serif;
    --button-font-family: var(--header-font-family);

    --banner-headline-font-weight: var(--font-weight-bold);
    
    /* --body-line-height: 1.6; */
    --header-line-height: 1.1;
    
    --base-font-size: 0.9rem;
    --type-scale: 1.25;
    
    /* Spacing and Layout */
    
    --container-padding-x: var(--spacer-3);
    --button-border-radius: 0.25rem;
    --card-border-radius: 0.5rem;
    
    /* Backdrop Heights */
    
    --backdrop-hero-height: 1000px;
    --backdrop-section-height: 500px;
    
    /* Shadows */
    
    --box-shadow-warm: 0 4px 20px hsla(25, 50%, 30%, 0.75);
    --text-shadow-warm: 0 2px 4px hsla(25, 50%, 10%, 0.5);
}

/*

// Responsive Typography

*/

@media screen and (max-width: 768px) {
    :root {
        --type-scale: 1.175;
        --spacer-base: 0.875rem;
    }
}

/*

// Hero Section

*/

.aspect-ratio-1x2 {
    aspect-ratio: 1/2;
}

.backdrop:is(#hero, #about)  {
    --backdrop-fixed-height: var(--backdrop-hero-height);
    
    /* .backdrop:has([class*="-vignette"]) {
        outline: 4px solid red;
    } */
}

.puffy-text {
    /* text-shadow: var(--text-shadow-warm); */
   
    background: linear-gradient(
        -135deg,
        var(--secondary) 0%,
        var(--light) 50%,
        var(--secondary) 100%
    );

    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: hsla(30, 50%, 85%, 0.675);

}

/*

// Section Styling

*/

/* #blends .card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: var(--box-shadow-warm);
}

#blends .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px hsla(25, 50%, 30%, 0.2);
} */

#process {
  .backdrop__media {
    img {
      transition: transform 0.3s ease;

      .backdrop:hover & {
        transform: scale(1.2);
      }
    }
  }
}

/*

// Process Section Grid

*/

#process .grid {
    gap: var(--spacer-3);
}

@media screen and (min-width: 768px) {
    #process .grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/*

// Star Rating

*/

[class*="icon-star"] {
    color: var(--primary);
    font-size: 1.2em;
}

/*

// Scroll Animations

*/

@media (prefers-reduced-motion: no-preference) {

    .card,
    .backdrop {
        animation: fadeInUp 0.6s ease-out;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(1em);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media screen and (max-width: 768px) {}