/* ============================================
     CSS VARIABLES - ADJUST THESE TO CUSTOMIZE
     ============================================ */
  :root {
    /* Grid dimensions */
    --square-size: 6px;
    --border-size: 1px;
    /*--grid-height: 200px;*/
    /*--grid-height: 320px;*/
    --grid-height: 152px; 
    
    /* Colors - change these to any color you want */
    --color-blue: #4FC3F7;
    --color-red: #EF5350;
    --color-white: #FFFFFF;
    --border-color: transparent;
    --background-color: #1a1a1a;
    
    /* Animation timing (in milliseconds) */
    --flash-duration: 400; /* How long the color shows (0.6s) */
    --pause-duration: 1000; /* Pause between moves (2s) */
    
    /* Color ratios (must add up to 100) */
    --ratio-blue: 50;
    --ratio-white: 35;
    --ratio-red: 15;
    
    /* Visibility ratio - what fraction of total squares are visible */
    /* 3 means 1/3 of squares show colors at once, 4 means 1/4, etc */
    --visibility-divisor: 24;
  }
  
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  #portfolio-details.hrsaots {
    position: relative;
    height: 500px;
    min-height: 500px;
    background-image: 
      /*url("../img/wave2.png"),*/
      url("../img/portfolio/portfolio-page-hero-hrsaots.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: -260px center;;
    background-blend-mode: normal;
    background-color: #000;
  }

  /* Container that you'll control */
  .grid-wrapper {
    width: 80%;
    height: var(--grid-height);
    overflow: hidden;
    position: relative;
  }
  
  /* Grid container */
  .grid-container {
    /*margin-top: 80px;*/
    /*margin-top: 10px;*/
    margin-top: 255px;
    width: 100%;
    /*height: 100%;*/
    /*height: 200px;*/
    /*height: 320px;*/
    height: 152px;
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--square-size));
    gap: var(--border-size);
    background-color: rgba(255, 255, 255, .1);
    border-top: 1px solid #ffffff2c;
    border-bottom: 1px solid #ffffff2c;
  }
  
  /* Individual grid square */
  .grid-square {
    width: var(--square-size);
    height: var(--square-size);
    background: var(--border-color);
    position: relative;
  }
  
  /* Colored block that animates */
  .color-block {
    position: absolute;
    width: var(--square-size);
    height: var(--square-size);
    opacity: 0;
    transition: all 0.6s ease; /* Smooth transition for position and opacity */
    pointer-events: none;
    z-index: 10;
  }
  
  .color-block.active {
    opacity: .2;
  }
  
  .color-block.blue {
    background: var(--color-blue);
  }
  
  .color-block.red {
    background: var(--color-red);
  }
  
  .color-block.white {
    background: var(--color-white);
  }

  /* Trail square that shows the L-path */
  .trail-square {
    position: absolute;
    width: var(--square-size);
    height: var(--square-size);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 5; /* Below the main block (z-index: 10) */
  }

  .trail-square.active {
    opacity: 0.1; /* Half opacity for trail */
  }

  .trail-square.blue {
    background: var(--color-blue);
  }

  .trail-square.red {
    background: var(--color-red);
  }

  .trail-square.white {
    background: var(--color-white);
  }


/*--------------------------------------------------------------
# Media Queries - Desktop Large
--------------------------------------------------------------*/

@media (min-width: 1280px) {
  #portfolio-details.hrsaots {
    height: 50px;
    min-height: 400px;
    background-position: center 20px;
  }
}

@media (min-width: 1601px) {
  #portfolio-details.hrsaots {
    height: 500px;
    min-height: 500px;
    background-position: center -40px;
  }
}

@media (min-width: 1801px) {
    #portfolio-details.hrsaots {
        height: 460px;
        min-height: 460px;
        background-position: center -110px;
    }
}