/* Parallax Effect Styles for SketchParty TV Banner */

/* Reference height for percentage-based calculations */
:root {
  --reference-height: 100vh; /* Use viewport height as reference */
  --banner-height: 100vh; /* Banner takes full viewport height */
  --banner-content-height: 85%; /* Content takes percentage of full banner height */
}

/* Multi-layered parallax effect */
#bannerContent {
  position: relative;
  height: min(var(--banner-content-height), 680px);
  overflow: hidden;
  z-index: 2;
}

/* Background layer - bannerContent (backmost) */
#bannerContent {
  z-index: 2;
}

/* TV - background element */
#bannerContent #TV {
  z-index: 10;
  transform: translateY(0);
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
  transition: transform 0.1s ease-out;
  /* Percentage-based sizing */
  height: 32.5%; /* 307px / 942px ≈ 32.5% */
  top: 6%;
}

/* Middle ground elements */
#bannerContent #DrawCallout {
  z-index: 3;
  transform: translateY(0);
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
  transition: transform 0.1s ease-out;
  /* Percentage-based sizing */
  width: 24.4%; /* 230px / 942px ≈ 24.4% */
  height: 7.2%; /* 68px / 942px ≈ 7.2% */
  left: 14%;
  top: 35%;
}

#bannerContent #SeeCallout {
  z-index: 3;
  transform: translateY(0);
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
  transition: transform 0.1s ease-out;
  /* Percentage-based sizing */
  width: 24.4%; /* 230px / 942px ≈ 24.4% */
  height: 7.2%; /* 68px / 942px ≈ 7.2% */
  right: 15%;
  top: 34%;
}

/* Foreground element - iPadWithPencil */
#bannerContent #iPadWithPencil {
  z-index: 20;
  transform: translateY(0);
  will-change: transform;
  backface-visibility: hidden;
  perspective: 1000px;
  transition: transform 0.1s ease-out;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  /* Percentage-based sizing */
  height: 64%; /* 461px / 942px ≈ 48.9% */
}

#bannerContent #appStoreDownload {
  transform: translateY(0);
  will-change: transform;
  backface-visibility: hidden;
  transition: transform 0.1s ease-out;
  perspective: 1000px;
  bottom: 60px;
}

/* Ensure banner container supports parallax */
#banner-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  z-index: 1;
  height: min(var(--banner-height), 848px);
}

/* Ensure content scrolls over the banner */
#middle {
  position: relative;
  z-index: 3;
  margin-top: min(var(--banner-content-height), 768px); /* Use actual banner height, capped at max-height */
}

/* Responsive adjustments for parallax - Tablet */
@media only screen and (min-width: 481px) and (max-width: 1024px) {
  :root {
    --banner-height: 660px;
  }

  #banner-bg {
    /* height: min(var(--banner-height), 680px); */
    height: 560px;
  }

  #banner {
    height: 460px;
  }

  #bannerContent {
    height: min(var(--banner-content-height), 561px);
  }
  
  #bannerContent #TV {
    z-index: 10;
    transform: translateY(0);
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
    transition: transform 0.1s ease-out;
    /* Percentage-based sizing for tablet */
    height: 36.4%; /* 240px / 660px ≈ 36.4% */
    top: 1%;
  }

  #bannerContent #iPadWithPencil {
    z-index: 20;
    transform: translateY(0);
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
    transition: transform 0.1s ease-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Percentage-based sizing for tablet */
    height: 60.6%; /* 400px / 660px ≈ 60.6% */
  }

  #middle {
    margin-top: min(var(--banner-content-height), 560px);
  }

  #banner #appStoreDownload {
    width: 140px;
    height: 42px;
    left: 20px;
    bottom: 40px;
  }
}

/* Responsive adjustments for parallax - Mobile */
@media only screen and (max-width: 480px) {
  :root {
    --banner-height: 100vh;
  }
  
  #bannerContent #TV {
    z-index: 10;
    transform: translateY(0);
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
    transition: transform 0.1s ease-out;
    /* Percentage-based sizing for mobile */
    height: 40%; /* 70px / 720px ≈ 9.7% */
    top: 1%;
  }

  #bannerContent #iPadWithPencil {
    z-index: 20;
    transform: translateY(0);
    will-change: transform;
    backface-visibility: hidden;
    perspective: 1000px;
    transition: transform 0.1s ease-out;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    /* Percentage-based sizing for mobile */
    height: 60.2%; /* 160px / 720px ≈ 22.2% */
  }

  #banner {
    width: 100%;
    height: 320px;
    position: relative;
    z-index: 2;
  }

  #banner #appStoreDownload {
    display: none;
  }

  #banner-bg {
    height: min(var(--banner-height), 480px);
  }

  #bannerContent {
    height: min(var(--banner-content-height), 480px);
  }

  #middle {
    margin-top: min(var(--banner-content-height), 480px);
  }
}