/* index.html — CSS-only parallax sections (no scroll JS) */

/* --- Shared parallax background layer --- */
html[data-index-page] [data-parallax-bg].background-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  /* Fill full width + height of the media container */
  background-size: cover;
  background-attachment: scroll;
  z-index: 0;
  opacity: 1;
  transform: none;
  transition: opacity 1.5s ease-in-out;
}

@media (min-width: 981px) {
  html[data-index-page] [data-parallax-bg].background-image {
    background-attachment: fixed !important;
    background-size: cover !important;
    top: 0;
    height: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html[data-index-page] [data-parallax-bg].background-image {
    background-attachment: scroll !important;
    background-size: cover;
  }
}

/* --- Service section (banner5) --- */
html[data-index-page] section.service-section--parallax {
  position: relative !important;
  overflow: hidden !important;
  min-height: 75vh !important;
  padding-top: 80px !important;
  padding-bottom: 112px !important;
  margin-bottom: 0 !important;
  contain: layout style paint;
}

html[data-index-page] section.service-section--parallax .service-section__media {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 10px;
  z-index: 0;
}

/* Space between parallax and story section */
html[data-index-page] section.service-section--parallax + section.story__section {
  padding-top: 260px !important;
  margin-top: 0 !important;
}

html[data-index-page] section.service-section--parallax .shadow-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 10%, transparent 80%);
  z-index: 1;
  pointer-events: none;
}

html[data-index-page] section.service-section--parallax > div.canabis__content {
  color: #ffffff !important;
  font-size: 3rem !important;
  font-weight: 700 !important;
  text-align: center !important;
  user-select: text !important;
  max-width: 50px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
  line-height: 1.2 !important;
  position: relative;
  z-index: 2;
}

@media (max-width: 768px) {
  html[data-index-page] section.service-section--parallax > div.canabis__content {
    font-size: 2rem !important;
  }
}

/* 2026-06-12 first parallax matched to home banner glass tint */
html[data-index-page] section.service-section--parallax .service-parallax-glass-card {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: fit-content;
  max-width: 98vw;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 1.1vw, 14px) clamp(10px, 1.4vw, 18px);
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.38);
  background:
    linear-gradient(215deg, rgba(0, 0, 0, 0.2) 0%, rgba(0, 0, 0, 0) 46%),
    linear-gradient(145deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.34) 52%, rgba(0, 0, 0, 0.28) 100%);
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

html[data-index-page] section.service-section--parallax .service-parallax-glass-card img {
  display: block;
  width: min(96vw, 1726px);
  height: auto;
  max-height: clamp(188px, 20vw, 304px);
  object-fit: contain;
  filter:
    drop-shadow(2px 0 0 #2c0e53)
    drop-shadow(-2px 0 0 #2c0e53)
    drop-shadow(0 2px 0 #2c0e53)
    drop-shadow(0 -2px 0 #2c0e53)
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.38));
}


@media (max-width: 768px) {
  html[data-index-page] section.service-section--parallax .service-parallax-glass-card {
    width: fit-content;
    max-width: 98vw;
    min-height: 0;
    padding: 7px 9px;
  }

  html[data-index-page] section.service-section--parallax .service-parallax-glass-card img {
    width: min(94vw, 1244px);
    max-height: clamp(132px, 36vw, 224px);
  }
}

/* --- Emergency CTA section (banner6) --- */
html[data-index-page] section.background-cycle-section--parallax {
  position: relative !important;
  overflow: hidden !important;
  /* 250px padding + 25% */
  padding-top: calc(250px * 1.25) !important;
  padding-bottom: calc(250px * 1.25) !important;
  background-image: none !important;
  background-attachment: scroll !important;
  contain: layout style paint;
}

html[data-index-page] section.background-cycle-section--parallax .background-cycle-section__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
}

html[data-index-page] section.background-cycle-section--parallax .shadow-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.2) 45%, transparent 80%);
  z-index: 1;
  pointer-events: none;
}

html[data-index-page] section.background-cycle-section--parallax .container {
  position: relative !important;
  z-index: 2 !important;
}

html[data-index-page] section.background-cycle-section--parallax .canabis__content h2 {
  color: #ffffff !important;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.45);
}

/* 2026-06-12 home body CTA matched to home banner glass tint */
html[data-index-page] .background-cycle-section .canabis__content h2 {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: fit-content;
  max-width: min(100%, 920px);
  margin-left: auto;
  margin-right: auto;
  padding: clamp(17px, 2.5vw, 28px) clamp(22px, 3.2vw, 38px) !important;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.38) !important;
  background: rgba(44, 14, 83, 0.86) !important;
  color: #ffffff !important;
  text-shadow: 0 3px 18px rgba(0, 0, 0, 0.58) !important;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.42),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* 2026-06-12 first parallax logo locked to parallax plane */
html[data-index-page] section.service-section--parallax .service-parallax-glass-card {
  inset: 0;
  left: 0;
  top: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  transform: none;
}

html[data-index-page] section.service-section--parallax .service-parallax-glass-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: image-set(url('../img/parallax/3_Parallax_Logo-1726.webp') type('image/webp'), url('../img/parallax/3_Parallax_Logo.webp') type('image/png'));
  background-repeat: no-repeat;
  background-position: center 85%;
  background-size: auto clamp(188px, 20vw, 304px);
  background-attachment: scroll;
  filter:
    drop-shadow(2px 0 0 #2c0e53)
    drop-shadow(-2px 0 0 #2c0e53)
    drop-shadow(0 2px 0 #2c0e53)
    drop-shadow(0 -2px 0 #2c0e53)
    drop-shadow(0 8px 16px rgba(0, 0, 0, 0.38));
}

@media (min-width: 981px) {
  html[data-index-page] section.service-section--parallax .service-parallax-glass-card::before {
    background-attachment: fixed;
  }
}

html[data-index-page] section.service-section--parallax .service-parallax-glass-card img {
  opacity: 0;
  visibility: hidden;
}

@media (max-width: 768px) {
  html[data-index-page] section.service-section--parallax .service-parallax-glass-card::before {
    background-size: auto clamp(132px, 36vw, 224px);
  }
}