/* =========================================================
   CrossMerg — Marketing Media Stack (Global)
   File: assets/themes/crossmerg/custom/css/marketing-media-stack.css
   Created: 2026-01-31 15:53 UTC

   Role:
   - Reusable layered image stack for marketing sections (hero + in-page)
   - Supports 1–10 layers with per-layer blur/opacity/scale/rotation/position
   - Includes hover lift (desktop) + accessibility-safe reduced motion
   - Provides page/section presets via modifier classes (cm-stack--*)

   Notes:
   - Keep this file marketing-shell only (load when $is_marketing_shell is true)
   - Presets are optional; you can also use inline CSS vars per layer.
   ========================================================= */

/* =========================================================
   Base tokens / knobs (safe defaults)
   ========================================================= */
:root{
  --cm-stack-radius: 18px;
  --cm-stack-shadow: 0 20px 60px rgba(0,0,0,0.18);
  --cm-stack-border: rgba(255,255,255,0.18);

  /* Hover lift (desktop) */
  --cm-stack-hover-scale: 1.012;
  --cm-stack-hover-y: -6px;

  /* Blur tuning */
  --cm-stack-blur-mult-md: 0.70; /* tablet */
  --cm-stack-blur-mult-sm: 0.55; /* phone */
}

/* =========================================================
   Stack wrapper
   ========================================================= */
.cm-media-stack{
  position: relative;
  width: 100%;
  overflow: visible;
  isolation: isolate; /* keeps blend/filters contained */
}

.cm-media-stack--hero{
  min-height: 520px;
}

.cm-media-stack--section{
  min-height: 360px;
}

/* =========================================================
   Layer item (can be <a> or <div>)
   - All positioning driven by CSS vars:
     --x, --y  = position (percent)
     --w       = width
     --z       = z-index
     --blur    = blur amount
     --op      = opacity
     --scale   = scale
     --rot     = rotation
   ========================================================= */
.cm-media-stack .cm-layer{
  position: absolute;
  left: var(--x, 50%);
  top:  var(--y, 50%);
  z-index: var(--z, 1);

  transform:
    translate(-50%, -50%)
    translate3d(0,0,0)
    scale(var(--scale, 1))
    rotate(var(--rot, 0deg));

  opacity: var(--op, 1);
  border-radius: var(--cm-stack-radius);

  display: block;
  text-decoration: none;
  cursor: pointer;

  -webkit-tap-highlight-color: transparent;

  transition:
    transform 180ms ease,
    opacity 180ms ease;
  will-change: transform, opacity;
}

.cm-media-stack .cm-layer:focus{
  outline: none;
}

.cm-media-stack .cm-layer:focus-visible{
  box-shadow: 0 0 0 3px rgba(62,121,209,0.28);
  border-radius: calc(var(--cm-stack-radius) + 2px);
}

.cm-media-stack .cm-layer img{
  width: min(var(--w, 640px), 92vw);
  height: auto;
  display: block;
  border-radius: inherit;

  filter: blur(var(--blur, 0px));
  box-shadow: var(--cm-stack-shadow);
  background: rgba(255,255,255,0.06);

  transition:
    filter 180ms ease,
    transform 180ms ease;
  will-change: filter, transform;
}

.cm-media-stack a.cm-layer{ color: inherit; }

/* =========================================================
   Hover lift (desktop only)
   ========================================================= */
@media (hover:hover) {
  .cm-media-stack .cm-layer:hover{
    opacity: calc(var(--op, 1) + 0.08);
    transform:
      translate(-50%, -50%)
      translate3d(0, var(--cm-stack-hover-y), 0)
      scale(calc(var(--scale, 1) * var(--cm-stack-hover-scale)))
      rotate(var(--rot, 0deg));
  }
  .cm-media-stack .cm-layer:hover img{
    filter: blur(max(calc(var(--blur, 0px) - 1px), 0px));
  }
}

/* =========================================================
   Responsive tuning (blur + height)
   ========================================================= */
@media (max-width: 991px){
  .cm-media-stack--hero{ min-height: 440px; }
  .cm-media-stack--section{ min-height: 320px; }
  .cm-media-stack .cm-layer img{
    filter: blur(calc(var(--blur, 0px) * var(--cm-stack-blur-mult-md)));
  }
}

@media (max-width: 600px){
  .cm-media-stack--hero{ min-height: 380px; }
  .cm-media-stack--section{ min-height: 280px; }
  .cm-media-stack .cm-layer img{
    filter: blur(calc(var(--blur, 0px) * var(--cm-stack-blur-mult-sm)));
    box-shadow: 0 16px 44px rgba(0,0,0,0.16);
  }
}

/* =========================================================
   Accessibility: reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){
  .cm-media-stack .cm-layer,
  .cm-media-stack .cm-layer img{
    transition: none !important;
  }
}

/* =========================================================
   Preset system
   ========================================================= */

/* ---- Services Hero preset (4-up like your screenshot) ---- */
.cm-stack--services-hero .cm-layer--primary{
  --x: 86%;     /* move left/right = positioning (percent)*/
  --y: 45%;     /* move up/down */
  --w: 760px;   /* size = width */
  --z: 4;       /* moves front to back = stack */
  --blur: 0px;  /* = depth cue */
  --op: 1;      /* = distance cue */
  --scale: 1;   /* controls how big the image is rendered = Size multiplier (depth cue) */
  --rot: 0deg;  /* rotates the image around its center point = Rotation (natural imperfection) */
}

.cm-stack--services-hero .cm-layer--secondary-a{
  --x: 110%;
  --y: 75%;
  --w: 360px;
  --z: 5;
  --blur: 0px;
  --op: 1;
  --scale: 0.9;
  --rot: 0deg;
}

.cm-stack--services-hero .cm-layer--secondary-b{
  --x: 74%;
  --y: 95%;
  --w: 320px;
  --z: 5;
  --blur: 0px;
  --op: 2;
  --scale: 1;
  --rot: 0deg;
}

.cm-stack--services-hero .cm-layer--accent{
  --x: 82%;
  --y: 67%;
  --w: 190px;
  --z: 5;
  --blur: 0px;
  --op: 1;
  --scale: 1.2;
  --rot: 0deg;
}

@media (max-width: 991px){
  .cm-stack--services-hero .cm-layer--primary{ --x: 52%; --y: 54%; --w: 680px; }
  .cm-stack--services-hero .cm-layer--secondary-a{ --x: 66%; --y: 62%; --w: 520px; }
  .cm-stack--services-hero .cm-layer--secondary-b{ --x: 52%; --y: 76%; --w: 500px; }
  .cm-stack--services-hero .cm-layer--accent{ --x: 74%; --y: 20%; --w: 170px; }
}

@media (max-width: 600px){
  .cm-stack--services-hero .cm-layer--primary{ --x: 50%; --y: 52%; --w: 560px; }
  .cm-stack--services-hero .cm-layer--secondary-a{ --x: 60%; --y: 63%; --w: 440px; }
  .cm-stack--services-hero .cm-layer--secondary-b{ --x: 46%; --y: 76%; --w: 420px; }
  .cm-stack--services-hero .cm-layer--accent{ --x: 70%; --y: 18%; --w: 150px; }
}