/* =========================================================
   Parallax Hero – Final CSS (smooth scrim load)
   - Layers paint immediately (no flashing)
   - Uses JS to add .is-ready and fade .load-scrim
   - Desktop parallax; tablet/mobile = cover + top focus
   ========================================================= */

/* ---------- Tunables ---------- */
:root{
  /* Dots */
  --dot-color: rgba(0,0,0,0.5);
  --dot-size: 1.25px;
  --dot-gap: 3px;

  /* Heights (desktop hard-cap 480; tablet/mobile are shallower) */
  --h-desktop: clamp(360px, 34vw, 480px);
  --h-tablet:  clamp(260px, 30vw, 360px);
  --h-mobile:  clamp(150px, 32vw, 220px);

  --content-max: 1140px;

  /* Per-page */
  --bg-img: none;                  /* url('...') */
  --desktop-position: top;         /* top | center | bottom | calc(10% + 30px) */

  /* SVG overlay (single layer) */
  --overlay-img: url("https://www.sodapopmedia.com/wp-content/uploads/abstract-banner-image-overlay.svg");
  --overlay-size-desktop: clamp(300px, 100%, 1570px);
  --overlay-size-tablet:  clamp(260px, 62vw, 960px);
}

/* Kill any theme-injected overlays/toolbars to prevent duplicates/artifacts */
.top-scroll-overlay{ display:none !important; background:none !important; }
.mk-toolbar-resposnive-icon svg,
.mk-header .mk-shoping-cart-link svg{ display:none !important; }

/* ---------- Container ---------- */
.parallax-container{
  position:relative;
  isolation:isolate;
  width:100%;
  min-height:var(--h-desktop);   /* desktop baseline (capped at 480px) */
  overflow:hidden;

  /* Base dark gradient (fixed on desktop for subtle parallax) */
  background-image: linear-gradient(rgba(0,0,0,.37), rgba(0,0,0,.77));
  background-size: 100% 100%;
  background-position: center top;
  background-repeat:no-repeat;
  background-attachment: fixed;
}

/* White scrim to ensure buttery load; JS toggles .is-ready on the container */
.load-scrim{
  position:absolute; inset:-1px; background:#fff; z-index:999; pointer-events:none;
  opacity:1; transition: opacity .25s ease-in-out;
}
.parallax-container.is-ready .load-scrim{ opacity:0; }

/* Background photo (parallax on desktop) */
.bg-photo{
  position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image: var(--bg-img);
  background-repeat:no-repeat;
  background-size: cover;
  background-position: 50% var(--desktop-position);
  background-attachment: fixed;
  will-change: background-position;
}

/* Greyscale overlay (doesn’t break fixed) */
.desat{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:#fff; mix-blend-mode: saturation;
}

/* Dots over the photo */
.dots{
  position:absolute; inset:0; z-index:2; pointer-events:none;
  background-image: radial-gradient(var(--dot-color) var(--dot-size), transparent var(--dot-size));
  background-size: var(--dot-gap) var(--dot-gap);
  background-repeat:repeat; background-position:top left;
  background-attachment: fixed;
}

/* 3-color gradient overlay + darken layer (fixed on desktop) */
.color-overlay{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:
    /* darken a bit */
    linear-gradient(rgba(0,0,0,0.39), rgba(0,0,0,0.39)),
    /* tuned color gradient (fixed rgba syntax) */
    linear-gradient(
      135deg,
      rgba(197,225,5,0.7)   0%,
      rgba(15,119,195,0.7)  30%,
      rgba(177,28,137,0.7)  77%,
      rgba(255,17,0,0.7)    100%
    );
  background-attachment: fixed;
}

/* SINGLE SVG OVERLAY (simple image layer) */
.overlay-img{
  position:absolute; inset:0; z-index:5; pointer-events:none;
  background-image: var(--overlay-img);
  background-repeat:no-repeat;
  background-size: var(--overlay-size-desktop) auto;  /* desktop */
  background-position: right bottom;
}

/* Particles — desktop/tablet only (mobile off for smoothness) */
#particle-canvas{
  position:absolute; left:0; bottom:-10%; width:100%; height:60%;
  z-index:6; pointer-events:none;
}

/* Text */
.parallax-content{
  position:absolute; inset:0; z-index:8; display:flex; align-items:center;
}
.parallax-inner{
  width:100%; max-width:var(--content-max);
  margin:0 auto; padding:0 clamp(16px, 4vw, 28px); text-align:left;
}
.parallax-inner h1{
  font-size: clamp(2.6rem, 4.2vw, 4.1rem)!important;
  line-height:100%!important; color:#fff!important;
  text-shadow:2px 3px 5px rgba(0,0,0,.3);
  margin:0 0 10px 0;
  /* subtle text fade remains okay */
  opacity:0; animation: fadeIn .22s ease-out .08s forwards;
}
.parallax-inner h2{
  line-height:120%!important; color:#ffcb01!important;
  text-shadow:2px 3px 5px rgba(0,0,0,.3);
  opacity:0; animation: fadeIn .22s ease-out .12s forwards;
}

/* Desktop: larger H2 in the hero */
@media (min-width:1141px){
  .parallax-container .parallax-inner h2{
    font-size: clamp(1.25rem, 1.8vw, 2rem) !important;
  }
}

/* ---------- Tablet (768–1140px): cover + center/top, no fixed ---------- */
@media (min-width:768px) and (max-width:1140px){
  .parallax-container{ min-height: var(--h-tablet); background-attachment: scroll; }
  .bg-photo{
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: 50% 0% !important;
  }
  .dots, .color-overlay{ background-attachment: scroll !important; }

  .overlay-img{ background-size: var(--overlay-size-tablet) auto; }

  .parallax-inner h1{ font-size: clamp(2.0rem, 4vw, 3.0rem)!important; margin-bottom:8px; }
  .parallax-inner h2{ font-size: clamp(1.0rem, 1.6vw, 1.2rem)!important; }
}

/* ---------- Mobile (<768px): cover + center/top, overlay fills full width ---------- */
@media (max-width:768px){
  :root{
    /* Shallow hero on phones; adjust max lower/higher to taste */
    --h-mobile: clamp(150px, 30vw, 220px);
  }

  .parallax-container{
    min-height: var(--h-mobile);
    background-attachment: scroll;
  }

  .bg-photo{
    background-attachment: scroll !important;
    background-size: cover !important;       /* fill width, no side gaps */
    background-position: 50% 0% !important;  /* top focus to protect heads */
  }

  .dots,
  .color-overlay{
    background-attachment: scroll !important;
  }

  /* SVG overlay fills full phone width */
  .overlay-img{
    background-size: 100% auto !important;   /* full width */
    background-position: right bottom !important;
  }

  /* Top | left/right | bottom — improves spacing vs header and bottom gap */
  .parallax-inner{
    padding: clamp(12px, 5vw, 22px) clamp(14px, 4.5vw, 18px) clamp(6px, 3vw, 10px) !important;
  }

  /* Mobile type sizing */
  .parallax-inner h1{
    font-size: clamp(1.2rem, 5.2vw, 1.55rem) !important;
    margin-bottom: 6px;
  }
  .parallax-inner h2{
    font-size: clamp(.9rem, 3.8vw, 1.05rem) !important;
  }

  /* Particles off on phones for smoothness */
  #particle-canvas{ display: none !important; }
}

/* iOS fallback */
@supports (-webkit-touch-callout: none){
  .parallax-container{ background-attachment: scroll; }
  .bg-photo, .dots, .color-overlay{ background-attachment: scroll !important; }
}

/* Fades (used for headings only) */
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }