/* START_SECTION:roamwear-intro-popup (INDEX:65) */
.roamwear-intro-popup {

  /* Popup Container */
  &.modal--popup {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ip-background-color);
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    z-index: 99999 !important;

    &.active {
      visibility: visible;
      opacity: 1;
    }
  }

  .intro-popup-overlay {
    background: transparent;
    pointer-events: none;
    z-index: 1;
  }

  .intro-popup-inner {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 100vw;
    max-height: 100vh;
    z-index: 2;
  }

  /* Images Burst Animation */
  .intro-images {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    pointer-events: none;
  }

  .intro-image-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
    width: var(--ip-image-size);
    height: var(--ip-image-size);
    border-radius: var(--ip-image-border-radius);
    overflow: hidden;
    animation: burstOut var(--animation-duration) ease-out forwards;
    animation-delay: calc(var(--burst-delay) + (var(--position) * var(--ip-stagger-delay)));
    will-change: transform, opacity;
    backface-visibility: hidden;

    /* Dynamic Position System - Creating a ring around center content */
    /* Top Row - Left to Right */
    &[data-position="1"] { 
      --position: 0; 
      --end-x: -42vw; 
      --end-y: -38vh;
      --rotation: -12deg;
    }

    &[data-position="2"] { 
      --position: 1; 
      --end-x: -28vw; 
      --end-y: -40vh;
      --rotation: 5deg;
    }

    &[data-position="3"] { 
      --position: 2; 
      --end-x: -14vw; 
      --end-y: -38vh;
      --rotation: -8deg;
    }

    &[data-position="4"] { 
      --position: 3; 
      --end-x: 0vw; 
      --end-y: -40vh;
      --rotation: 3deg;
    }

    &[data-position="5"] { 
      --position: 4; 
      --end-x: 14vw; 
      --end-y: -38vh;
      --rotation: -6deg;
    }

    &[data-position="6"] { 
      --position: 5; 
      --end-x: 28vw; 
      --end-y: -40vh;
      --rotation: 10deg;
    }

    &[data-position="7"] { 
      --position: 6; 
      --end-x: 42vw; 
      --end-y: -38vh;
      --rotation: -4deg;
    }

    /* Middle Rows - Left and Right Sides Only */
    &[data-position="8"] { 
      --position: 7; 
      --end-x: -44vw; 
      --end-y: -12vh;
      --rotation: 8deg;
    }

    &[data-position="9"] { 
      --position: 8; 
      --end-x: 44vw; 
      --end-y: -12vh;
      --rotation: -7deg;
    }

    &[data-position="10"] { 
      --position: 9; 
      --end-x: -44vw; 
      --end-y: 12vh;
      --rotation: -9deg;
    }

    &[data-position="11"] { 
      --position: 10; 
      --end-x: 44vw; 
      --end-y: 12vh;
      --rotation: 11deg;
    }

    /* Bottom Row - Left to Right */
    &[data-position="12"] { 
      --position: 11; 
      --end-x: -42vw; 
      --end-y: 38vh;
      --rotation: 6deg;
    }

    &[data-position="13"] { 
      --position: 12; 
      --end-x: -28vw; 
      --end-y: 40vh;
      --rotation: -10deg;
    }

    &[data-position="14"] { 
      --position: 13; 
      --end-x: -14vw; 
      --end-y: 38vh;
      --rotation: 7deg;
    }

    &[data-position="15"] { 
      --position: 14; 
      --end-x: 0vw; 
      --end-y: 40vh;
      --rotation: -5deg;
    }

    &[data-position="16"] { 
      --position: 15; 
      --end-x: 14vw; 
      --end-y: 38vh;
      --rotation: 9deg;
    }

    &[data-position="17"] { 
      --position: 16; 
      --end-x: 28vw; 
      --end-y: 40vh;
      --rotation: -11deg;
    }

    &[data-position="18"] { 
      --position: 17; 
      --end-x: 42vw; 
      --end-y: 38vh;
      --rotation: 13deg;
    }
  }

  .intro-image,
  .intro-image-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .intro-image-placeholder {
    background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
  }

  /* Content Container - Single Cohesive Block with Logo */
  .intro-content {
    position: absolute;
    top: 50%;
    bottom: auto;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    text-align: center;
    opacity: 0;
    max-width: 70rem;
    animation: contentFadeIn 1s ease-out forwards;
    animation-delay: var(--content-delay);
    will-change: transform, opacity;
    backface-visibility: hidden;
    z-index: 1000;
    pointer-events: auto;
  }

  /* Content Block - Visual Container */
  .intro-content-block {
    background-color: var(--content-bg);
    background-color: color-mix(in srgb, var(--content-bg) calc(var(--content-bg-opacity) * 100%), transparent);
    padding: var(--ip-content-padding-vertical) var(--ip-content-padding-horizontal);
    border-radius: var(--ip-content-border-radius);
    backdrop-filter: blur(var(--ip-content-blur));
    -webkit-backdrop-filter: blur(var(--ip-content-blur));
    border: var(--ip-content-border-width) solid var(--ip-content-border-color);
    position: relative;
    z-index: 1001;
  }

  /* Logo inside content block */
  .intro-logo {
    margin-bottom: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .logo-image {
    max-width: var(--ip-logo-size);
    height: auto;
    display: block;
  }

  .logo-text {
    font-size: var(--ip-logo-text-size);
    font-weight: var(--ip-logo-font-weight);
    color: var(--ip-logo-color);
    letter-spacing: var(--ip-logo-letter-spacing);
    margin: 0;
    white-space: nowrap;
  }

  .intro-title {
    font-size: var(--ip-title-size);
    font-weight: var(--ip-title-weight);
    color: var(--ip-text-color);
    margin-bottom: 1.6rem;
    letter-spacing: -0.02em;
    line-height: 1.2;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .intro-description {
    font-size: var(--ip-description-size);
    color: var(--ip-text-color);
    opacity: 0.9;
    line-height: 1.6;
    margin-bottom: 2.4rem;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .intro-button {
    font-size: var(--ip-button-font-size);
    padding: var(--ip-button-padding-vertical) var(--ip-button-padding-horizontal);
    border-radius: var(--ip-button-border-radius);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1002;
    pointer-events: auto;
    margin-top: 0;

    &:hover {
      transform: translateY(-2px);
      box-shadow: 0 0.8rem 2.4rem rgba(0,0,0,0.2);
    }
  }
}

/* Keyframes */
@keyframes burstOut {
  0% { 
    transform: translate(-50%, -50%) scale(0) rotate(0deg); 
    opacity: 0; 
  }
  30% { 
    opacity: 1; 
  }
  50% { 
    transform: translate(calc(-50% + var(--end-x) * 0.25), calc(-50% + var(--end-y) * 0.25)) scale(1.15) rotate(calc(var(--rotation) * 0.4)); 
  }
  100% { 
    transform: translate(calc(-50% + var(--end-x)), calc(-50% + var(--end-y))) scale(1) rotate(var(--rotation)); 
    opacity: 1;
  }
}

@keyframes contentFadeIn {
  0% { 
    opacity: 0; 
    transform: translateX(-50%) translateY(30px); 
  }
  100% { 
    opacity: 1; 
    transform: translateX(-50%) translateY(-50%); 
  }
}

/* Responsive - Tablet */
@media screen and (max-width: 1024px) and (min-width: 750px) {
  .roamwear-intro-popup {
    .intro-image-wrapper {
      width: calc(var(--ip-image-size) * 0.75);
      height: calc(var(--ip-image-size) * 0.75);

      &[data-position="1"] { --end-x: -43vw; --end-y: -40vh; }
      &[data-position="2"] { --end-x: -29vw; --end-y: -42vh; }
      &[data-position="3"] { --end-x: -15vw; --end-y: -40vh; }
      &[data-position="4"] { --end-x: 0vw; --end-y: -42vh; }
      &[data-position="5"] { --end-x: 15vw; --end-y: -40vh; }
      &[data-position="6"] { --end-x: 29vw; --end-y: -42vh; }
      &[data-position="7"] { --end-x: 43vw; --end-y: -40vh; }
      &[data-position="8"] { --end-x: -45vw; --end-y: -13vh; }
      &[data-position="9"] { --end-x: 45vw; --end-y: -13vh; }
      &[data-position="10"] { --end-x: -45vw; --end-y: 13vh; }
      &[data-position="11"] { --end-x: 45vw; --end-y: 13vh; }
      &[data-position="12"] { --end-x: -43vw; --end-y: 40vh; }
      &[data-position="13"] { --end-x: -29vw; --end-y: 42vh; }
      &[data-position="14"] { --end-x: -15vw; --end-y: 40vh; }
      &[data-position="15"] { --end-x: 0vw; --end-y: 42vh; }
      &[data-position="16"] { --end-x: 15vw; --end-y: 40vh; }
      &[data-position="17"] { --end-x: 29vw; --end-y: 42vh; }
      &[data-position="18"] { --end-x: 43vw; --end-y: 40vh; }
    }

    .logo-image { 
      max-width: calc(var(--ip-logo-size) * 0.75); 
    }

    .logo-text { 
      font-size: calc(var(--ip-logo-text-size) * 0.75); 
    }

    .intro-content { 
      bottom: 15vh; 
      max-width: 65rem;
    }

    .intro-content-block {
      padding: calc(var(--ip-content-padding-vertical) * 0.9) calc(var(--ip-content-padding-horizontal) * 0.9);
    }

    .intro-logo {
      margin-bottom: 2rem;
    }
  }
}

/* Responsive - Mobile */
@media screen and (max-width: 749px) {
  .roamwear-intro-popup {
    .intro-image-wrapper {
      width: calc(var(--ip-image-size) * 0.55);
      height: calc(var(--ip-image-size) * 0.55);

      &[data-position="1"] { --end-x: -37vw; --end-y: -39vh; }
      &[data-position="2"] { --end-x: -15vw; --end-y: -42vh; }
      &[data-position="3"] { --end-x: 12vw; --end-y: -42vh; }
      &[data-position="4"] { --end-x: 37vw; --end-y: -40vh; }
      &[data-position="5"] { --end-x: -16vw; --end-y: -24vh; }
      &[data-position="6"] { --end-x: 13vw; --end-y: -25vh; }
      &[data-position="7"] { --end-x: -38vw; --end-y: -19vh; }
      &[data-position="8"] { --end-x: 37vw; --end-y: -20vh; }
      &[data-position="9"] { --end-x: -38vw; --end-y: 20vh; }
      &[data-position="10"] { --end-x: 35vw; --end-y: 20vh; }
      &[data-position="11"] { --end-x: -13vw; --end-y: 23vh; }
      &[data-position="12"] { --end-x: -37vw; --end-y: 40vh; }
      &[data-position="13"] { --end-x: -14vw; --end-y: 42vh; }
      &[data-position="14"] { --end-x: 11vw; --end-y: 41vh; }
      &[data-position="15"] { --end-x: 10vw; --end-y: 25vh; }
      &[data-position="16"], 
      &[data-position="17"] { 
        display: none; 
      }
      &[data-position="18"] { 
        --end-x: 42vw; 
        --end-y: 42vh; 
        opacity: 0; 
        pointer-events: none; 
      }
    }

    .logo-image { 
      max-width: calc(var(--ip-logo-size) * 0.6); 
    }

    .logo-text { 
      font-size: calc(var(--ip-logo-text-size) * 0.6);
      letter-spacing: calc(var(--ip-logo-letter-spacing) * 0.6);
    }

    .intro-content {
      bottom: auto;
      top: 50%;
      transform: translate(-50%, -50%);
      max-width: 90%;
      width: 90%;
    }

    .intro-content-block {
      padding: calc(var(--ip-content-padding-vertical) * 0.85) calc(var(--ip-content-padding-horizontal) * 0.75);
    }

    .intro-logo {
      margin-bottom: 1.8rem;
    }

    .intro-title { 
      font-size: calc(var(--ip-title-size) * 0.7);
      margin-bottom: 1.2rem;
      line-height: 1.2;
    }

    .intro-description { 
      font-size: calc(var(--ip-description-size) * 0.85);
      margin-bottom: 2rem;
      line-height: 1.5;
    }

    .intro-button {
      font-size: calc(var(--ip-button-font-size) * 1);
      padding: calc(var(--ip-button-padding-vertical) * 1.15) calc(var(--ip-button-padding-horizontal) * 0.95);
      min-width: 16rem;
      display: inline-block;
    }
  }
}

/* Responsive - Small Mobile */
@media screen and (max-width: 390px) {
  .roamwear-intro-popup {
    .intro-image-wrapper {
      width: calc(var(--ip-image-size) * 0.42);
      height: calc(var(--ip-image-size) * 0.42);

      &[data-position="1"] { --end-x: -40vw; --end-y: -38vh; }
      &[data-position="2"] { --end-x: -22vw; --end-y: -42vh; }
      &[data-position="3"] { --end-x: 0vw; --end-y: -42vh; }
      &[data-position="4"] { --end-x: 22vw; --end-y: -42vh; }
      &[data-position="5"] { --end-x: 44vw; --end-y: -40vh; }
      &[data-position="6"] { 
        opacity: 0; 
        pointer-events: none; 
        --end-x: 2vw; 
        --end-y: -24vh; 
      }
      &[data-position="7"] { --end-x: -38vw; --end-y: -22vh; }
      &[data-position="8"] { --end-x: 38vw; --end-y: -22vh; }
      &[data-position="9"] { --end-x: -36vw; --end-y: 23vh; }
      &[data-position="10"] { --end-x: 35vw; --end-y: 22vh; }
      &[data-position="11"] { --end-x: -44vw; --end-y: 40vh; }
      &[data-position="12"] { --end-x: -22vw; --end-y: 42vh; }
      &[data-position="13"] { --end-x: 0vw; --end-y: 42vh; }
      &[data-position="14"] { --end-x: 22vw; --end-y: 42vh; }
      &[data-position="15"] { --end-x: 40vw; --end-y: 41vh; }
      &[data-position="16"] { --end-x: 2vw; --end-y: 23vh; }
      &[data-position="17"],
      &[data-position="18"] { 
        opacity: 0; 
        pointer-events: none; 
      }
    }

    .logo-image { 
      max-width: calc(var(--ip-logo-size) * 0.5); 
    }

    .logo-text { 
      font-size: calc(var(--ip-logo-text-size) * 0.5);
    }

    .intro-title { 
      font-size: calc(var(--ip-title-size) * 0.6);
    }

    .intro-description { 
      font-size: calc(var(--ip-description-size) * 0.8);
    }

    .intro-content {
      width: 88%;
    }

    .intro-content-block {
      padding: calc(var(--ip-content-padding-vertical) * 0.7) calc(var(--ip-content-padding-horizontal) * 0.65);
    }

    .intro-logo {
      margin-bottom: 1.5rem;
    }
  }
}

/* Hide page content while popup is active */
body:has(.roamwear-intro-popup.active) {
  overflow: hidden;
  height: 100vh;
}
/* END_SECTION:roamwear-intro-popup */