/********************/
/* BASIS / FALLBACK */
/********************/

/* YES, TRIANGLES */
.triangles {
  grid-column:full;
  height:calc(var(--height-triangle) * 1.5);
  margin-bottom:clamp(1em, 4vw, 2em);
  border-bottom:none;
}

/* NO, TRIANGLES */
:root[data-setting--no-images="true"] .triangles {
  display: none;
  content-visibility: hidden;
}






/***********************/
/* TRIANGLES CONTAINER */
/***********************/

:root {
  --number-triangles:4;
  --max-width-triangles:108em;

  --width-triangle: calc( min(var(--max-width-triangles), 100vw + 4px) / var(--number-triangles) );
  --height-triangle: calc( var(--width-triangle) / .866 );

  --width-triangle--l: calc( var(--width-triangle) * 2 );
  --hgth-triangle--l: calc( var(--height-triangle) * 2 );
}

.triangles {
  --number-triangles:4;
  --max-width-triangles:108em;

  --width-triangle: calc( min(var(--max-width-triangles), 100vw + 4px) / var(--number-triangles) );
  --height-triangle: calc( var(--width-triangle) / .866 );

  --width-triangle--l: calc( var(--width-triangle) * 2 );
  --hgth-triangle--l: calc( var(--height-triangle) * 2 );
}

@container (width > 32em) {
  .triangles {
    --number-triangles:6;
  }
}

@container (width > 50em) {
  .triangles {
    --number-triangles:8;
  }
}

@container (width > 70em) {
  .triangles {
    --number-triangles:10;
  }
}

@container (width > 92em) {
  .triangles {
    --number-triangles:12;
  }
}

@container --container--body (width > 43em) {
  @media (height > 24em) {
    .triangles {
      position:sticky;
      top:8.125em;
    }

    :root[data-setting--no-images="false"] .triangles {
      top:calc( 8.125em - var(--height-triangle) * .5 );
    }
  }
}





/*********************************/
/* TRIANGLES BARS - lEFT & RIGHT */
/*********************************/


:root[data-setting--no-images="false"] .triangles::after {
  content:"";

  display:block;
  width:100%;
  height:var(--height-triangle);

  background-image:
    linear-gradient(
      to right,
      var(--triangle-color-l7, var( --triangle-color-left-middle))
        0
        calc( (100vw - var(--max-width-triangles)) * .5 + 2.5px),
      transparent 
        0 
        calc( (100vw + var(--max-width-triangles)) * .5 - 2.5px),
      var(--triangle-color-r7, var( --triangle-color-left-middle))
        0
        100%
    );
}





/********************/
/* TRIANGLES COLORS */
/********************/

/* DEFAULT COLORS */

.triangles {
  --triangle-color-left-start:var(--orange--l);
  --triangle-color-left-middle:var(--orange);
  --triangle-color-left-end:var(--orange--d);

  --triangle-color-right-start:var(--orange--l);
  --triangle-color-right-middle:var(--orange);
  --triangle-color-right-end:var(--orange--d);
}

/* LOTTERY COLORS */

:root[data-triangle-color-left-lottery="2"] .triangles {
  --triangle-color-left-start:var(--blue--l);
  --triangle-color-left-middle:var(--blue);
  --triangle-color-left-end:var(--blue--d);
}
:root[data-triangle-color-right-lottery="2"] .triangles {
  --triangle-color-right-start:var(--blue--l);
  --triangle-color-right-middle:var(--blue);
  --triangle-color-right-end:var(--blue--d);
}


:root[data-triangle-color-left-lottery="3"] .triangles {
  --triangle-color-left-start:var(--pink--l);
  --triangle-color-left-middle:var(--pink);
  --triangle-color-left-end:var(--pink--d);
}
:root[data-triangle-color-right-lottery="3"] .triangles {
  --triangle-color-right-start:var(--pink--l);
  --triangle-color-right-middle:var(--pink);
  --triangle-color-right-end:var(--pink--d);
}

:root[data-triangle-color-left-lottery="4"] .triangles {
  --triangle-color-left-start:var(--yellow--l);
  --triangle-color-left-middle:var(--yellow);
  --triangle-color-left-end:var(--yellow--d);
}
:root[data-triangle-color-right-lottery="4"] .triangles {
  --triangle-color-right-start:var(--yellow--l);
  --triangle-color-right-middle:var(--yellow);
  --triangle-color-right-end:var(--yellow--d);
}

:root[data-triangle-color-left-lottery="5"] .triangles {
  --triangle-color-left-start:var(--green--l);
  --triangle-color-left-middle:var(--green);
  --triangle-color-left-end:var(--green--d);
}
:root[data-triangle-color-right-lottery="5"] .triangles {
  --triangle-color-right-start:var(--green--l);
  --triangle-color-right-middle:var(--green);
  --triangle-color-right-end:var(--green--d);
}





/**********************/
/* TRIANGLES PATTERNS */
/**********************/

.triangles {
  /* LEFT BARS */

  --triangles-pattern-left-bars:
    linear-gradient(
      30deg, 
      transparent calc(100% * 1/3),
      var(--triangle-color-l7, var(--triangle-color-left-middle)) 0 calc(100% * 2/3),
      var(--triangle-color-l6, var(--triangle-color-left-middle)) 0
    ),
    linear-gradient(
      30deg, 
      transparent calc(100% * 1/3),
      var(--triangle-color-l6, var(--triangle-color-left-middle)) 0 calc(100% * 2/3),
      var(--triangle-color-l5, var(--triangle-color-left-middle)) 0
    ),
    linear-gradient(
      30deg, 
      transparent calc(100% * 1/3),
      var(--triangle-color-l5, var(--triangle-color-left-middle)) 0 calc(100% * 2/3),
      var(--triangle-color-l4, var(--triangle-color-left-middle)) 0
    ),
    linear-gradient(
      30deg, 
      transparent calc(100% * 1/3),
      var(--triangle-color-l4, var(--triangle-color-left-middle)) 0 calc(100% * 2/3),
      var(--triangle-color-l3, var(--triangle-color-left-middle)) 0
    ),
    linear-gradient(
      30deg, 
      transparent calc(100% * 1/3),
      var(--triangle-color-l3, var(--triangle-color-left-middle)) 0 calc(100% * 2/3),
      var(--triangle-color-l2, var(--triangle-color-left-middle)) 0
    ),
    linear-gradient(
      30deg, 
      transparent calc(100% * 1/3),
      var(--triangle-color-l2, var(--triangle-color-left-middle)) 0 calc(100% * 2/3),
      var(--triangle-color-l1, var(--triangle-color-left-middle)) 0
    );
  
  /* left bars pos */
  --triangles-pattern-left-bars-pos: 
    calc(50vw - var(--width-triangle) * 7 + 2px) bottom,
    calc(50vw - var(--width-triangle) * 6 + 1.67px) bottom,
    calc(50vw - var(--width-triangle) * 5 + 1.33px) bottom,
    calc(50vw - var(--width-triangle) * 4 + 1px) bottom,
    calc(50vw - var(--width-triangle) * 3 + 0.67px) bottom,
    calc(50vw - var(--width-triangle) * 2 + 0.33px) bottom;
  


  /* RIGHT BARS */

  --triangles-pattern-right-bars:
    linear-gradient(
      -30deg, 
      transparent calc(100% * 1/3),
      var(--triangle-color-r7, var(--triangle-color-right-middle)) 0 calc(100% * 2/3),
      var(--triangle-color-r6, var(--triangle-color-right-middle)) 0
    ),
    linear-gradient(
      -30deg, 
      transparent calc(100% * 1/3),
      var(--triangle-color-r6, var(--triangle-color-right-middle)) 0 calc(100% * 2/3),
      var(--triangle-color-r5, var(--triangle-color-right-middle)) 0
    ),
    linear-gradient(
      -30deg, 
      transparent calc(100% * 1/3),
      var(--triangle-color-r5, var(--triangle-color-right-middle)) 0 calc(100% * 2/3),
      var(--triangle-color-r4, var(--triangle-color-right-middle)) 0
    ),
    linear-gradient(
      -30deg, 
      transparent calc(100% * 1/3),
      var(--triangle-color-r4, var(--triangle-color-right-middle)) 0 calc(100% * 2/3),
      var(--triangle-color-r3, var(--triangle-color-right-middle)) 0
    ),
    linear-gradient(
      -30deg, 
      transparent calc(100% * 1/3),
      var(--triangle-color-r3, var(--triangle-color-right-middle)) 0 calc(100% * 2/3),
      var(--triangle-color-r2, var(--triangle-color-right-middle)) 0
    ),
    linear-gradient(
      -30deg, 
      transparent calc(100% * 1/3),
      var(--triangle-color-r2, var(--triangle-color-right-middle)) 0 calc(100% * 2/3),
      var(--triangle-color-r1, var(--triangle-color-right-middle)) 0
    );
  
  /* right bars pos */
    --triangles-pattern-right-bars-pos:
      calc(50vw + var(--width-triangle) * 5 - 2px) bottom,
      calc(50vw + var(--width-triangle) * 4 - 1.67px) bottom,
      calc(50vw + var(--width-triangle) * 3 - 1.33px) bottom,
      calc(50vw + var(--width-triangle) * 2 - 1px) bottom,
      calc(50vw + var(--width-triangle) * 1 - 0.67px) bottom,
      calc(50vw + var(--width-triangle) * 0 - 0.33px) bottom;
  


  /* LEFT ARROWS */

    --triangles-pattern-left-arrows:
      conic-gradient( from -60deg, transparent 0 300deg, var(--triangle-color-l7, var(--triangle-color-left-middle)) 0 ),
      conic-gradient( from -60deg, transparent 0 300deg, var(--triangle-color-l6, var(--triangle-color-left-middle)) 0 ),
      conic-gradient( from -60deg, transparent 0 300deg, var(--triangle-color-l5, var(--triangle-color-left-middle)) 0 ),
      conic-gradient( from -60deg, transparent 0 300deg, var(--triangle-color-l4, var(--triangle-color-left-middle)) 0 ),
      conic-gradient( from -60deg, transparent 0 300deg, var(--triangle-color-l3, var(--triangle-color-left-middle)) 0 ),
      conic-gradient( from -60deg, transparent 0 300deg, var(--triangle-color-l2, var(--triangle-color-left-middle)) 0 ), 
      
      conic-gradient( from 60deg at left, var(--triangle-color-l6, var(--triangle-color-left-middle)) 0 60deg, transparent 0 ), 
      conic-gradient( from 60deg at left, var(--triangle-color-l5, var(--triangle-color-left-middle)) 0 60deg, transparent 0 ), 
      conic-gradient( from 60deg at left, var(--triangle-color-l4, var(--triangle-color-left-middle)) 0 60deg, transparent 0 ),  
      conic-gradient( from 60deg at left, var(--triangle-color-l3, var(--triangle-color-left-middle)) 0 60deg, transparent 0 ),  
      conic-gradient( from 60deg at left, var(--triangle-color-l2, var(--triangle-color-left-middle)) 0 60deg, transparent 0 ),
      conic-gradient( from 60deg at left, var(--triangle-color-l1, var(--triangle-color-left-middle)) 0 60deg, transparent 0 );

  /* left arrows pos */
    --triangles-pattern-left-arrows-pos:
      calc(50vw - var(--width-triangle) * 6 + 2px) bottom,
      calc(50vw - var(--width-triangle) * 5 + 1.67px) bottom,
      calc(50vw - var(--width-triangle) * 4 + 1.33px) bottom,
      calc(50vw - var(--width-triangle) * 3 + 1px) bottom,
      calc(50vw - var(--width-triangle) * 2 + .67px) bottom,
      calc(50vw - var(--width-triangle) * 1 + .33px) bottom, 
      
      calc(50vw - var(--width-triangle) * 7 + 2px) bottom,
      calc(50vw - var(--width-triangle) * 6 + 1.67px) bottom,
      calc(50vw - var(--width-triangle) * 5 + 1.33px) bottom,
      calc(50vw - var(--width-triangle) * 4 + 1px) bottom,
      calc(50vw - var(--width-triangle) * 3 + 0.67px) bottom,
      calc(50vw - var(--width-triangle) * 2 + 0.33px) bottom;



  /* RIGHT ARROWS */

    --triangles-pattern-right-arrows:
      conic-gradient( from 60deg, var(--triangle-color-r7, var(--triangle-color-right-middle)) 0 60deg, transparent 0 ),
      conic-gradient( from 60deg, var(--triangle-color-r6, var(--triangle-color-right-middle)) 0 60deg, transparent 0 ),
      conic-gradient( from 60deg, var(--triangle-color-r5, var(--triangle-color-right-middle)) 0 60deg, transparent 0 ),
      conic-gradient( from 60deg, var(--triangle-color-r4, var(--triangle-color-right-middle)) 0 60deg, transparent 0 ),
      conic-gradient( from 60deg, var(--triangle-color-r3, var(--triangle-color-right-middle)) 0 60deg, transparent 0 ),
      conic-gradient( from 60deg, var(--triangle-color-r2, var(--triangle-color-right-middle)) 0 60deg, transparent 0 ), 
      
      conic-gradient( from -60deg at right, transparent 0 300deg, var(--triangle-color-r6, var(--triangle-color-right-middle)) 0 ),
      conic-gradient( from -60deg at right, transparent 0 300deg, var(--triangle-color-r5, var(--triangle-color-right-middle)) 0 ),
      conic-gradient( from -60deg at right, transparent 0 300deg, var(--triangle-color-r4, var(--triangle-color-right-middle)) 0 ),
      conic-gradient( from -60deg at right, transparent 0 300deg, var(--triangle-color-r3, var(--triangle-color-right-middle)) 0 ),
      conic-gradient( from -60deg at right, transparent 0 300deg, var(--triangle-color-r2, var(--triangle-color-right-middle)) 0 ),
      conic-gradient( from -60deg at right, transparent 0 300deg, var(--triangle-color-r1, var(--triangle-color-right-middle)) 0 );

  /* right arrows pos */
    --triangles-pattern-right-arrows-pos:
      calc(50vw + var(--width-triangle) * 4 - 2px) bottom,
      calc(50vw + var(--width-triangle) * 3 - 1.67px) bottom,
      calc(50vw + var(--width-triangle) * 2 - 1.33px) bottom,
      calc(50vw + var(--width-triangle) * 1 - 1px) bottom,
      calc(50vw + var(--width-triangle) * 0 - 0.67px) bottom,
      calc(50vw + var(--width-triangle) * -1 - 0.33px) bottom, 
      
      calc(50vw + var(--width-triangle) * 5 - 2px) bottom,
      calc(50vw + var(--width-triangle) * 4 - 1.67px) bottom,
      calc(50vw + var(--width-triangle) * 3 - 1.33px) bottom,
      calc(50vw + var(--width-triangle) * 2 - 1px) bottom,
      calc(50vw + var(--width-triangle) * 1 - 0.67px) bottom,
      calc(50vw + var(--width-triangle) * 0 - 0.33px) bottom;
}

/* DEFAULT PATTERNS */

.triangles {
  --triangles-pattern-left:var(--triangles-pattern-left-arrows);
  --triangles-pattern-left-pos:var(--triangles-pattern-left-arrows-pos);
  --triangles-pattern-right:var(--triangles-pattern-right-arrows);
  --triangles-pattern-right-pos:var(--triangles-pattern-right-arrows-pos);

  background-color:transparent;
  background-image:
    var(--triangles-pattern-left),
    var(--triangles-pattern-right);
  background-position:
    var(--triangles-pattern-left-pos),
    var(--triangles-pattern-right-pos);
  background-size:var(--width-triangle--l) var(--hgth-triangle--l);
  background-repeat:no-repeat;
}

:root[data-triangle-pattern-left-lottery="2"] .triangles {
  --triangles-pattern-left:var(--triangles-pattern-left-bars);
  --triangles-pattern-left-pos:var(--triangles-pattern-left-bars-pos);
}
:root[data-triangle-pattern-right-lottery="2"] .triangles {
  --triangles-pattern-right:var(--triangles-pattern-right-bars);
  --triangles-pattern-right-pos:var(--triangles-pattern-right-bars-pos);
}





/***********************/
/* TRIANGLES KEYFRAMES */
/***********************/

/* check if Houdini Properties and Values API are supported */
/* https://web.dev/articles/at-property */
@supports (background: paint(something)) {

  /* cust prop declarations */
  @property --triangle-color-l1 { syntax: "<color>"; inherits:true; initial-value:red; }
  @property --triangle-color-r1 { syntax: "<color>"; inherits:true; initial-value:red; }

  @property --triangle-color-l2 { syntax: "<color>"; inherits:true; initial-value:red; }
  @property --triangle-color-r2 { syntax: "<color>"; inherits:true; initial-value:red; }

  @property --triangle-color-l3 { syntax: "<color>"; inherits:true; initial-value:red; }
  @property --triangle-color-r3 { syntax: "<color>"; inherits:true; initial-value:red; }

  @property --triangle-color-l4 { syntax: "<color>"; inherits:true; initial-value:red; }
  @property --triangle-color-r4 { syntax: "<color>"; inherits:true; initial-value:red; }

  @property --triangle-color-l5 { syntax: "<color>"; inherits:true; initial-value:red; }
  @property --triangle-color-r5 { syntax: "<color>"; inherits:true; initial-value:red; }

  @property --triangle-color-l6 { syntax: "<color>"; inherits:true; initial-value:red; }
  @property --triangle-color-r6 { syntax: "<color>"; inherits:true; initial-value:red; }

  @property --triangle-color-l7 { syntax: "<color>"; inherits:true; initial-value:red; }
  @property --triangle-color-r7 { syntax: "<color>"; inherits:true; initial-value:red; }


  /* cust prop animations */
  /* keyframes for every color in the pattern */
  @keyframes --ani-triangle-l1 { 
    0% { --triangle-color-l1: var(--triangle-color-left-start);} 
    14% { --triangle-color-l1: var(--triangle-color-left-middle);} 
    100% { --triangle-color-l1: var(--triangle-color-left-end); }
  }
  @keyframes --ani-triangle-l2 { 
    0% { --triangle-color-l2: var(--triangle-color-left-start);} 
    14% { --triangle-color-l2: var(--triangle-color-left-middle);} 
    100% { --triangle-color-l2: var(--triangle-color-left-end); }
  }
  @keyframes --ani-triangle-l3 { 
    0% { --triangle-color-l3: var(--triangle-color-left-start);} 
    14% { --triangle-color-l3: var(--triangle-color-left-middle);} 
    100% { --triangle-color-l3: var(--triangle-color-left-end); }
  }
  @keyframes --ani-triangle-l4 { 
    0% { --triangle-color-l4: var(--triangle-color-left-start);} 
    14% { --triangle-color-l4: var(--triangle-color-left-middle);} 
    100% { --triangle-color-l4: var(--triangle-color-left-end); }
  }
  @keyframes --ani-triangle-l5 { 
    0% { --triangle-color-l5: var(--triangle-color-left-start);} 
    14% { --triangle-color-l5: var(--triangle-color-left-middle);} 
    100% { --triangle-color-l5: var(--triangle-color-left-end); }
  }
  @keyframes --ani-triangle-l6 { 
    0% { --triangle-color-l6: var(--triangle-color-left-start);} 
    14% { --triangle-color-l6: var(--triangle-color-left-middle);} 
    100% { --triangle-color-l6: var(--triangle-color-left-end); }
  }
  @keyframes --ani-triangle-l7 { 
    0% { --triangle-color-l7: var(--triangle-color-left-start);} 
    14% { --triangle-color-l7: var(--triangle-color-left-middle);} 
    100% { --triangle-color-l7: var(--triangle-color-left-end); }
  }

  @keyframes --ani-triangle-r1 { 
    0% { --triangle-color-r1: var(--triangle-color-right-start);} 
    14% { --triangle-color-r1: var(--triangle-color-right-middle);} 
    100% { --triangle-color-r1: var(--triangle-color-right-end); }
  }
  @keyframes --ani-triangle-r2 { 
    0% { --triangle-color-r2: var(--triangle-color-right-start);} 
    14% { --triangle-color-r2: var(--triangle-color-right-middle);} 
    100% { --triangle-color-r2: var(--triangle-color-right-end); }
  }
  @keyframes --ani-triangle-r3 { 
    0% { --triangle-color-r3: var(--triangle-color-right-start);} 
    14% { --triangle-color-r3: var(--triangle-color-right-middle);} 
    100% { --triangle-color-r3: var(--triangle-color-right-end); }
  }
  @keyframes --ani-triangle-r4 { 
    0% { --triangle-color-r4: var(--triangle-color-right-start);} 
    14% { --triangle-color-r4: var(--triangle-color-right-middle);} 
    100% { --triangle-color-r4: var(--triangle-color-right-end); }
  }
  @keyframes --ani-triangle-r5 { 
    0% { --triangle-color-r5: var(--triangle-color-right-start);} 
    14% { --triangle-color-r5: var(--triangle-color-right-middle);} 
    100% { --triangle-color-r5: var(--triangle-color-right-end); }
  }
  @keyframes --ani-triangle-r6 { 
    0% { --triangle-color-r6: var(--triangle-color-right-start);} 
    14% { --triangle-color-r6: var(--triangle-color-right-middle);} 
    100% { --triangle-color-r6: var(--triangle-color-right-end); }
  }
  @keyframes --ani-triangle-r7 { 
    0% { --triangle-color-r7: var(--triangle-color-right-start);} 
    14% { --triangle-color-r7: var(--triangle-color-right-middle);} 
    100% { --triangle-color-r7: var(--triangle-color-right-end); }
  }





  /***********************/
  /* TRIANGLE ANIMATIONS */
  /***********************/


  /* BASE - 4 TRIANGLES PATTERN */

  .triangles {
    --ani-triangle-duration:48s;

    animation-name:
        --ani-triangle-l1,
        --ani-triangle-r1,   
        --ani-triangle-l2,
        --ani-triangle-r2,
        --ani-triangle-l3,
        --ani-triangle-r3,
        --ani-triangle-l4,
        --ani-triangle-r4,
        --ani-triangle-l5,
        --ani-triangle-r5,
        --ani-triangle-l6,
        --ani-triangle-r6,
        --ani-triangle-l7,
        --ani-triangle-r7;

    animation-duration:var( --ani-triangle-duration);

    animation-delay: 
      calc(var( --ani-triangle-duration) * 0),
      calc(var( --ani-triangle-duration) * 0),

      calc(var( --ani-triangle-duration) * -.5),
      calc(var( --ani-triangle-duration) * -.5),
      
      calc(var( --ani-triangle-duration) * -1),
      calc(var( --ani-triangle-duration) * -1);

    animation-timing-function:linear;
    animation-iteration-count:infinite;
    animation-direction:alternate;
    animation-play-state:paused;
  }

  [data-reduced-motion="no-preference"] .triangles {
    animation-play-state:running;
  }


  /* 6 TRIANGLES PATTERN */

  @container (width > 32em) {
    .triangles {
      --ani-triangle-duration:60s;
      
      animation-delay: 
        calc(var( --ani-triangle-duration) * 0),
        calc(var( --ani-triangle-duration) * 0),

        calc(var( --ani-triangle-duration) * -.33),
        calc(var( --ani-triangle-duration) * -.33),

        calc(var( --ani-triangle-duration) * -.67),
        calc(var( --ani-triangle-duration) * -.67),

        calc(var( --ani-triangle-duration) * -1),
        calc(var( --ani-triangle-duration) * -1);
    }
  }

  /* 8 TRIANGLES PATTERN */

  @container (width > 50em) {
    .triangles {
      --ani-triangle-duration:72s;
      
      animation-delay: 
        calc(var( --ani-triangle-duration) * 0),
        calc(var( --ani-triangle-duration) * 0),

        calc(var( --ani-triangle-duration) * -.25),
        calc(var( --ani-triangle-duration) * -.25),

        calc(var( --ani-triangle-duration) * -.5),
        calc(var( --ani-triangle-duration) * -.5),

        calc(var( --ani-triangle-duration) * -.75),
        calc(var( --ani-triangle-duration) * -.75),

        calc(var( --ani-triangle-duration) * -1),
        calc(var( --ani-triangle-duration) * -1);
    }
  }


  /* 10 TRIANGLES PATTERN */

  @container (width > 70em) {
    .triangles {
      --ani-triangle-duration:84s;
      
      animation-delay: 
        calc(var( --ani-triangle-duration) * 0),
        calc(var( --ani-triangle-duration) * 0),

        calc(var( --ani-triangle-duration) * -.2),
        calc(var( --ani-triangle-duration) * -.2),

        calc(var( --ani-triangle-duration) * -.4),
        calc(var( --ani-triangle-duration) * -.4),

        calc(var( --ani-triangle-duration) * -.6),
        calc(var( --ani-triangle-duration) * -.6),

        calc(var( --ani-triangle-duration) * -.8),
        calc(var( --ani-triangle-duration) * -.8),

        calc(var( --ani-triangle-duration) * -1),
        calc(var( --ani-triangle-duration) * -1);
    }
  }


  /* 12 TRIANGLES PATTERN */

  @container (width > 92em) {
    .triangles {
      --ani-triangle-duration:96s;
        
      animation-delay: 
        calc(var( --ani-triangle-duration) * 0),
        calc(var( --ani-triangle-duration) * 0),

        calc(var( --ani-triangle-duration) * -.17),
        calc(var( --ani-triangle-duration) * -.17),

        calc(var( --ani-triangle-duration) * -.33),
        calc(var( --ani-triangle-duration) * -.33),

        calc(var( --ani-triangle-duration) * -.5),
        calc(var( --ani-triangle-duration) * -.5),

        calc(var( --ani-triangle-duration) * -.67),
        calc(var( --ani-triangle-duration) * -.67),

        calc(var( --ani-triangle-duration) * -.83),
        calc(var( --ani-triangle-duration) * -.83),

        calc(var( --ani-triangle-duration) * -1),
        calc(var( --ani-triangle-duration) * -1);
    }
  }
}