/* ============================================================================
   STRATA — "Ghosts in the Strata" v2  ·  DBRanked seamless cinematic bands
   Cinematic mercs that bleed off the viewport edge and dissolve into the
   page's own darkness. No borders, no cards. Feathered to transparent so the
   page glows + grid show THROUGH the seam. Desaturated into the navy world,
   backlit by a class-accent halo, resolved by a one-pass signal scan.
   Self-contained + namespaced (.strata*). Safe to drop on any page.
   Extends the original merc-v1.css language (--mx/--my parallax preserved).
   ========================================================================== */

.strata{
  position:relative;
  display:flex;
  align-items:center;
  min-height:clamp(440px,52vw,604px);
  overflow:hidden;                       /* contain the bleed, no h-scroll   */
  isolation:isolate;
  --acc:49,231,255;                      /* accent rgb (cyan default)        */
  --accS:#31e7ff;                        /* accent solid                     */
}
.strata--cyan  {--acc:49,231,255;  --accS:#31e7ff}
.strata--red   {--acc:255,64,88;   --accS:#ff4058}
.strata--gold  {--acc:255,209,102; --accS:#ffd166}
.strata--sunset{--acc:255,150,70;  --accS:#ff9a46}

/* ---- the ghost figure: absolute, bleeds off one viewport edge ------------ */
.strata__fig{
  position:absolute; top:0; bottom:0; left:0;
  width:min(60%,880px);
  z-index:0;
  display:flex; align-items:center;
  transform:translate3d(calc(var(--mx,0)*11px),calc(var(--my,0)*8px),0);
  transition:transform .25s cubic-bezier(.2,.7,.2,1);
}
.strata--right .strata__fig{left:auto; right:0;
  transform:translate3d(calc(var(--mx,0)*-11px),calc(var(--my,0)*8px),0)}

/* backlit class-accent halo */
.strata__fig::before{
  content:""; position:absolute; z-index:-1; inset:4% 6% 4% -12%;
  background:radial-gradient(56% 56% at 46% 44%,rgba(var(--acc),.34),transparent 72%);
  filter:blur(16px);
}
.strata--right .strata__fig::before{inset:4% -12% 4% 6%;
  background:radial-gradient(56% 56% at 54% 44%,rgba(var(--acc),.34),transparent 72%)}

/* the image — navy grade + dual-edge feather (inner edge + top/bottom) */
.strata__fig img{
  display:block; width:100%; height:auto;
  filter:saturate(.58) brightness(.84) contrast(1.08) blur(10px);
  opacity:0; transform:scale(1.03);
  transition:opacity 1.05s ease,filter 1.05s ease,transform 1.4s cubic-bezier(.2,.7,.2,1);
  -webkit-mask-image:linear-gradient(to right,#000 0 58%,transparent 97%),
                     linear-gradient(to bottom,transparent,#000 7%,#000 85%,transparent);
  -webkit-mask-composite:source-in; mask-composite:intersect;
          mask-image:linear-gradient(to right,#000 0 58%,transparent 97%),
                     linear-gradient(to bottom,transparent,#000 7%,#000 85%,transparent);
}
.strata--right .strata__fig img{
  -webkit-mask-image:linear-gradient(to left,#000 0 58%,transparent 97%),
                     linear-gradient(to bottom,transparent,#000 7%,#000 85%,transparent);
          mask-image:linear-gradient(to left,#000 0 58%,transparent 97%),
                     linear-gradient(to bottom,transparent,#000 7%,#000 85%,transparent);
}
.strata.is-live .strata__fig img{filter:saturate(.62) brightness(.86) contrast(1.08) blur(0);opacity:1;transform:scale(1)}

/* signal-lock corner ticks */
.strata__tick{position:absolute; width:18px; height:18px; z-index:1; pointer-events:none;
  border:2px solid rgba(var(--acc),.5); opacity:0; transition:opacity .5s ease .35s}
.strata.is-live .strata__tick{opacity:1}
.strata__tick.tl{top:13%; left:20px; border-right:0; border-bottom:0}
.strata__tick.bl{bottom:16%; left:20px; border-right:0; border-top:0}
.strata--right .strata__tick.tl{left:auto; right:20px; border-left:0; border-right:2px solid rgba(var(--acc),.5); border-bottom:0}
.strata--right .strata__tick.bl{left:auto; right:20px; border-left:0; border-right:2px solid rgba(var(--acc),.5); border-top:0}

/* one-pass signal scan-line on reveal */
.strata__scan{position:absolute; left:0; right:6%; top:0; height:2px; z-index:1; pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(var(--acc),.9),transparent);
  box-shadow:0 0 18px rgba(var(--acc),.7); opacity:0}
.strata--right .strata__scan{left:6%; right:0}
.strata.is-live .strata__scan{animation:strataScan 2.4s cubic-bezier(.4,0,.2,1) .15s 1 forwards}
@keyframes strataScan{0%{opacity:0;transform:translateY(0)}9%{opacity:.95}90%{opacity:.95}100%{opacity:0;transform:translateY(560px)}}

/* ---- copy column: lives in the centred container, opposite the figure ---- */
.strata__wrap{position:relative; z-index:2; max-width:1320px; margin:0 auto; padding:0 16px; width:100%}
.strata__copy{width:min(46%,560px); margin-left:auto}
.strata--right .strata__copy{margin-left:0; margin-right:auto}

.strata__over{display:flex; align-items:center; gap:11px; font-family:"Chakra Petch",sans-serif;
  color:var(--accS); letter-spacing:.2em; text-transform:uppercase; font-weight:700; font-size:12px;
  text-shadow:0 0 18px rgba(var(--acc),.4)}
.strata__over::before{content:""; width:28px; height:2px; background:var(--accS); box-shadow:0 0 10px var(--accS)}
.strata__title{font-family:"Chakra Petch",sans-serif; font-size:clamp(30px,4.4vw,56px); line-height:.94;
  margin:14px 0; text-transform:uppercase; letter-spacing:.02em; color:#eef7ff}
.strata__title .s{color:var(--accS); text-shadow:0 0 22px rgba(var(--acc),.45)}
.strata__lead{font-family:"Rajdhani",sans-serif; font-size:20px; line-height:1.4; color:#aab8ca; margin:0}
.strata__chips{display:flex; gap:10px; flex-wrap:wrap; margin-top:22px}
.strata__chip{font-family:"Chakra Petch",sans-serif; font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--accS); padding:9px 13px; border:1px solid rgba(var(--acc),.3); background:rgba(var(--acc),.05);
  clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.strata__chip b{display:block; color:#fff; font-size:14px; margin-top:3px; letter-spacing:.04em}
.strata__cta{display:inline-flex; align-items:center; gap:9px; margin-top:24px; font-family:"Chakra Petch",sans-serif;
  text-transform:uppercase; letter-spacing:.12em; font-size:13px; font-weight:700; color:#04060c;
  padding:12px 18px; background:var(--accS); box-shadow:0 0 26px rgba(var(--acc),.4);
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
.strata__cta:hover{filter:brightness(1.12)}

/* ---- COVER variant: full-bleed atmospheric band (about closer) ----------- */
.strata--cover{align-items:stretch}
.strata--cover .strata__fig{position:absolute; inset:0; width:100%}
.strata--cover .strata__fig::before{display:none}
.strata--cover .strata__fig img{width:100%; height:100%; object-fit:cover; object-position:72% 40%;
  filter:saturate(.72) brightness(.78) contrast(1.06) blur(10px);
  -webkit-mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 84%,transparent);
          mask-image:linear-gradient(to bottom,transparent,#000 12%,#000 84%,transparent)}
.strata--cover.is-live .strata__fig img{filter:saturate(.78) brightness(.8) contrast(1.06) blur(0)}
.strata--cover .strata__copy{width:min(50%,540px); margin:0; padding:40px 0}
.strata--cover .strata__copy::before{content:""; position:absolute; z-index:-1; inset:-30px -40px -30px -50vw;
  background:linear-gradient(90deg,#04050a 40%,rgba(4,5,10,.74) 72%,transparent)}

/* ---- AMBIENT variant: a ghost faintly behind a page header --------------- */
.strata-ambient{position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden}
.strata-ambient img{position:absolute; right:-4%; top:50%; transform:translateY(-50%);
  width:min(64%,820px); height:auto; opacity:.16;
  filter:saturate(.4) brightness(.7) contrast(1.1);
  -webkit-mask-image:linear-gradient(to left,#000 0 22%,transparent 82%),linear-gradient(to bottom,transparent,#000 14%,#000 80%,transparent);
  -webkit-mask-composite:source-in; mask-composite:intersect;
          mask-image:linear-gradient(to left,#000 0 22%,transparent 82%),linear-gradient(to bottom,transparent,#000 14%,#000 80%,transparent)}

/* ---- responsive: stack, image on top dissolving into the copy ------------ */
@media(max-width:920px){
  .strata{display:block; min-height:0; padding-bottom:8px}
  .strata__fig{position:relative; width:100%; transform:none!important}
  .strata__fig::before{inset:-2% -4% -6% -4%; filter:blur(20px)}
  .strata__fig img{filter:saturate(.62) brightness(.82) contrast(1.08);opacity:1;transform:none;
    -webkit-mask-image:linear-gradient(to bottom,#000 0 64%,transparent 99%)!important;
            mask-image:linear-gradient(to bottom,#000 0 64%,transparent 99%)!important}
  .strata__tick{display:none}
  .strata__wrap{padding:0}
  .strata__copy,.strata--right .strata__copy{width:auto; margin:0; padding:6px 16px 36px}
  .strata--cover .strata__fig{position:absolute; inset:0}
  .strata--cover .strata__fig img{height:100%;object-fit:cover}
  .strata--cover .strata__copy{width:auto;padding:90px 16px 48px}
  .strata--cover .strata__copy::before{inset:-20px -16px -20px -16px;background:linear-gradient(180deg,rgba(4,5,10,.5),rgba(4,5,10,.85))}
  .strata-ambient img{width:130%;right:-30%;opacity:.1}
}

/* ---- motion safety ------------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .strata__fig{transform:none!important; transition:none}
  .strata__fig img{opacity:1; transform:none; filter:saturate(.62) brightness(.86) contrast(1.08); transition:none}
  .strata__scan{display:none}
  .strata__tick{opacity:1; transition:none}
}

/* host helper: raise a page-header's own content above an ambient ghost */
.strata-hostinner{position:relative; z-index:2}

/* defensive: never let a page's global img{max-width} cap a ghost */
.strata img,.strata-ambient img{max-width:none}