/* PAGE-INTRO
--------------------------- */
@media screen {  
  :root {
    --page-intro-headline-delay: .15s;
    --page-intro-headline-duration: 1s;
    --page-intro-headline-total-duration: var(--page-intro-headline-duration) + var(--page-intro-headline-delay);

    --page-intro-cross-start-delay: calc( var(--page-intro-headline-total-duration) - .7s );
    /* --page-intro-cross-indiv-delay: .27s; */
    --page-intro-cross-indiv-delay: .45s;
    --page-intro-cross-fade-in-duration: .8s;
  }

  section.page-intro {
    --page-intro-picture-dimension-x: 235px;
    --page-intro-picture-dimension-y: 235px;
    --page-intro-image-dimension: 159px;

    --page-intro-content-width-crosses: 795px;

    background-color: var(--theme-powder);
    overflow: hidden;
    width: 100svw;

    @container main (min-width: 930px) {
      --page-intro-picture-dimension-x: 361px;
      --page-intro-picture-dimension-y: 365px;
      --page-intro-image-dimension: 244px;
    }

    @container main (min-width: 2134px) {
      --page-intro-content-width-crosses: 1005px;
    }

    & + .bg-mint,
    & + .bg-powder,
    & + .bg-yellow {
      margin-block-start: var(--theme-section-between-gap);
    }

    pint-content-width {
      position: relative;
      padding-block-start: 31px;

      @container main (min-width: 930px) {
        padding-block: clamp(52px, calc( 3.25rem + ((1vw - 9.3px) * 4.2092)), 85px);
      }
    }

    pint-grid {
      column-gap: 93px;
      grid-template-columns: 1fr;
      margin: 0;
      row-gap: 28px;

      @container main (min-width: 930px) {
        grid-template-columns: var(--page-intro-picture-dimension-x) 1fr;

        p {
          max-width: 1075px;
        }
      }
      @container main (min-width: 2134px) {
        p {
          max-width: 1300px;
        }
      }
    }

    h1 {
      animation: FADE-IN var(--page-intro-headline-duration) linear forwards;
      opacity: 0;
    }

    picture, figure {
      align-items: center;
      animation: FADE-IN var(--page-intro-headline-duration) linear forwards var(--page-intro-headline-delay);
      background-repeat: no-repeat;
      background-size: cover;
      display: flex;
      height: var(--page-intro-picture-dimension-y);
      justify-content: center;
      margin-inline: auto;
      min-height: unset;
      opacity: 0;
      padding-block-end: 4px;
      position: relative;
      width: var(--page-intro-picture-dimension-x);
      z-index: 1;

      &:not(.no-frame) {
        background-image: url('./bg-frame.svg');
      }

      @container main (min-width: 930px) {
        margin-block-end: calc( -1 * clamp(31px, calc( 1.9375rem + ((1vw - 9.3px) * 4.2092)), 64px) );
        transform: translateY(calc( -1 * clamp(31px, calc( 1.9375rem + ((1vw - 9.3px) * 4.2092)), 64px) ));
      }

      /* Image */
      &:not(.no-frame) img {
        border-radius: 50%;
        height: var(--page-intro-image-dimension);
        transform: translate(2px, 9px);
        width: var(--page-intro-image-dimension);
      }
    }
    .no-frame {
      @container main (min-width: 930px) {
        margin-block-start: calc( -1 * clamp(52px, calc( 3.25rem + ((1vw - 9.3px) * 4.2092)), 85px) );
        transform: translate(20px, calc( -1 * clamp(52px, calc( 3.25rem + ((1vw - 9.3px) * 4.2092)), 85px) + 50px ) );
      }
    }


    /* CROSSES
    --------------------------- */
    cross-container {
      display: block;
      opacity: 0;
      position: absolute;
      top: 0;
      width: 100svw;
      
      svg {
        left: 50%;
        position: absolute;

        /* Paths (fade) */
        g {
          opacity: 0;
        }

        /* LEFT
        --------------------------- */
        &.cross-left {
          top: 40px;
          transform: translateX(calc(-1 * var(--page-intro-content-width-crosses) - 100% - 45px ));

          /* Option 2 */
          @container main (min-width: 1714px) {
            &.cross-option-2-left {
              .plus-orange-2 {
                display: none;
              }
            }
          }

          /* Option 3 */
          &.cross-option-3-left {
            top: 20px;
            transform: translateX(calc(-100% + 3px));

            @container main (min-width: 930px) {
              left: 0;
              top: 38px;
              transform: translateX(-127px);
            }
            @container main (min-width: 1714px) {
              left: 50%;
              top: 35px;
              transform: translateX(calc( -1 * var(--page-intro-content-width-crosses) - 160px ));
            }
            
            .plus-white-2 {
              display: none;
            }
          }
        }


        /* RIGHT
        --------------------------- */
        &.cross-right {
          top: 40px;
          transform: translateX(var(--page-intro-content-width-crosses));

          @container main (min-width: 930px) and (max-width: 1713.95px) {
            &.cross-option-2-right {
              .x-orange-1 {
                display: none;
              }
            }
          }
        }
        

        /* MOBILE
        --------------------------- */
        &.cross-img-mobile {
          top: 20px;
          transform: translateX(-50%);

          @container main (min-width: 930px) {
            display: none;
          }

          /* Option 4 */
          &.cross-option-4-img-mobile {
            top: 44px;
            transform: translateX(calc(-50% - 90px));   

            .x-green-2 {
              display: none;
            }
          }

          /* Option 5 */
          &.cross-option-5-img-mobile {
            top: 0;
          }

          /* Option 6 */
          &.cross-option-6-img-mobile {
            top: 7px;
            transform: translateX(calc(-50% - 40px));   
          }

          /* Option 7 */
          &.cross-option-7-img-mobile {
            top: 7px;
            transform: translateX(calc(-50% - 40px));   
          }
        }

        
        /* TABLET
        --------------------------- */
        &.cross-img-tablet {
          display: none;

          @container main (min-width: 930px) {
            display: block;
            left: 0;
            top: 50px;
            transform: translateX(-14px);
          }
          @container main (min-width: 1714px) {
            left: 50%;
            transform: translateX(-845px);

            &.cross-option-2-img-tablet {
              .plus-orange-1 {
                display: none;
              }
            }
          }
          @container main (min-width: 2134px) {
            left: 50%;
            transform: translateX(-1055px);
          }
          
          /* Option 4 */
          &.cross-option-4-img-tablet {
            top: 40px;
            transform: translateX(-80px);

            @container main (min-width: 1714px) {
              left: 50%;
              transform: translateX(calc( -1 * var(--page-intro-content-width-crosses) - 110px ));
            }
            
            .plus-red-1 {
              display: none;
            }
          }
          
          /* Option 5 */
          &.cross-option-5-img-tablet {
            top: 37px;

            @container main (min-width: 1714px) {
              left: 50%;
              transform: translateX(calc( -1 * var(--page-intro-content-width-crosses) - 48px ));
            }
          }
          
          /* Option 6 */
          &.cross-option-6-img-tablet {
            top: 60px;
            transform: translateX(-64px);

            @container main (min-width: 1714px) {
              left: 50%;
              transform: translateX(calc( -1 * var(--page-intro-content-width-crosses) - 94px ));
            }
          }
          
          /* Option 7 */
          &.cross-option-7-img-tablet {
            top: 30px;
            transform: translateX(-284px);

            @container main (min-width: 1714px) {
              left: 50%;
              top: 25px;
              transform: translateX(calc( -1 * var(--page-intro-content-width-crosses) - 314px ));
            }
          }
        }


        /* DESKTOP
        --------------------------- */
        &.cross-img-sd {
          display: none;

          @container main (min-width: 1714px) and (max-width: 2133.95px) {
            display: block;

            .x-orange-1 {
              display: none;
            }
          }
        }
      }
    }
    &[data-io-inview] cross-container {
      animation: FADE-IN var(--page-intro-headline-duration) linear forwards;
    }
    
    /* Paths (fade) */
    .cross-fade-1 { animation: FADE-IN calc( var(--page-intro-cross-fade-in-duration) + .03s) linear forwards calc( var(--page-intro-cross-start-delay) + var(--page-intro-cross-indiv-delay) ); }
    .cross-fade-2 { animation: FADE-IN calc( var(--page-intro-cross-fade-in-duration) + .13s) linear forwards calc( var(--page-intro-cross-start-delay) + var(--page-intro-cross-indiv-delay) * 2 + .03s ); }
    .cross-fade-3 { animation: FADE-IN calc( var(--page-intro-cross-fade-in-duration) + .42s) linear forwards calc( var(--page-intro-cross-start-delay) + var(--page-intro-cross-indiv-delay) * 3 + .062s ); }
    .cross-fade-4 { animation: FADE-IN calc( var(--page-intro-cross-fade-in-duration) + .31s) linear forwards calc( var(--page-intro-cross-start-delay) + var(--page-intro-cross-indiv-delay) * 4 + .034s ); }
    .cross-fade-5 { animation: FADE-IN calc( var(--page-intro-cross-fade-in-duration) + .22s) linear forwards calc( var(--page-intro-cross-start-delay) + var(--page-intro-cross-indiv-delay) * 5 + .016s ); }
    .cross-fade-6 { animation: FADE-IN calc( var(--page-intro-cross-fade-in-duration) + .51s) linear forwards calc( var(--page-intro-cross-start-delay) + var(--page-intro-cross-indiv-delay) * 6 + .022s ); }
    .cross-fade-7 { animation: FADE-IN calc( var(--page-intro-cross-fade-in-duration) + .28s) linear forwards calc( var(--page-intro-cross-start-delay) + var(--page-intro-cross-indiv-delay) * 7 + .045s ); }

    /* Specific overrides */
    .cross-option-2-right {
      transform: translateX( calc( var(--page-intro-content-width-crosses) - 345px ) ) !important;
    }    

  }

  /* Show helper badge when editing the page */
  .editor-styles-wrapper section.page-intro {
    border-top-color: dodgerblue;
    
    &:before {
      background-color: dodgerblue;
      content: 'Page Intro';
    }

    cross-container {
      display: none;
    }
  }

}

@media print {}