/* =====================================================================
   NESAM — media.css
   Section background imagery from the Sep-26 rev4 profile, the brand
   marks, partner logos and the automation illustrations.

   Backgrounds are real <img> elements inside a clipping layer rather
   than background-attachment:fixed — fixed backgrounds stutter badly on
   iOS and Android. Depth comes from a GPU transform driven by the same
   scroll loop everything else uses, so it stays smooth.
   ===================================================================== */

/* ===================================================================
   1. BACKGROUND LAYER
   =================================================================== */
.has-bg{ position:relative; isolation:isolate; overflow:hidden; }
.has-bg > .container,
.has-bg > *:not(.secbg){ position:relative; z-index:2; }

.secbg{
  position:absolute; inset:-12% 0; z-index:0; margin:0;
  overflow:hidden; pointer-events:none; user-select:none;
}
.secbg img{
  width:100%; height:100%; object-fit:cover; object-position:var(--pos,center);
  display:block;
  /* Parallax rides on `transform` (the scroll loop writes --py) while the
     slow zoom rides on the independent `scale` property, so the two never
     overwrite each other. */
  transform:translate3d(0,var(--py,0px),0);
  scale:1.14;
  opacity:0;
  filter:blur(9px);
  transition:opacity 1.4s var(--ease-out), filter 1.4s var(--ease-out), scale 2.6s var(--ease-out);
  will-change:transform, scale, opacity;
}
.secbg.is-in img{
  scale:1;
  opacity:var(--strength,.3);
  filter:blur(0);
}

/* Readability scrim — tuned per theme, painted above the photo */
.secbg::after{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%),
    linear-gradient(90deg, var(--scrim-a) 0%, var(--scrim-b) 55%, transparent 100%);
}
[data-theme="dark"]{ --scrim-a:rgba(6,13,12,.88); --scrim-b:rgba(6,13,12,.55); }
[data-theme="light"]{ --scrim-a:rgba(238,241,238,.90); --scrim-b:rgba(238,241,238,.62); }

/* Strength presets */
.secbg--hero  { --strength:.95; }
.secbg--strong{ --strength:.72; }
.secbg--soft  { --strength:.30; }
.secbg--faint { --strength:.16; }

/* A full-bleed brand gradient needs no scrim and no dimming */
.secbg--flood{ --strength:1; }
.secbg--flood::after{
  background:linear-gradient(180deg, rgba(0,0,0,.20), transparent 30%, transparent 70%, rgba(0,0,0,.20));
}

/* Sections sitting on a dark image force light type regardless of theme */
.on-image, .on-image .sec-title, .on-image h2, .on-image h3{ color:#f4faf8; }
.on-image .sec-lead, .on-image p{ color:#c2d6d3; }
.on-image .kicker{ color:#7fe8e2; }
.on-image .kicker__dia{ background:#7fe8e2; }
.on-image .statement__lead{ color:#fff; }
.on-image .statement__body h3{ color:#7fe8e2; }
.on-image .why-card{ background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16); color:#eafffe; backdrop-filter:blur(6px); }
.on-image .why-card__ic{ background:rgba(255,255,255,.14); color:#fff; }
.on-image .banner{ background:rgba(0,0,0,.22); border-color:rgba(255,255,255,.14); }
.on-image .terms__row span:first-child{ color:#a9c4c0; }
.on-image .terms__table{ border-color:rgba(255,255,255,.16); background:rgba(4,14,13,.45); backdrop-filter:blur(8px); }
.on-image .terms__row:nth-child(even){ background:rgba(255,255,255,.045); }
.on-image .terms__row:not(:last-child){ border-bottom-color:rgba(255,255,255,.12); }
.on-image .terms__row span:first-child{ border-inline-end-color:rgba(255,255,255,.12); }
.on-image .promise{ background:rgba(4,14,13,.42); border-color:rgba(255,255,255,.14); backdrop-filter:blur(8px); }
.on-image .jstep__body p{ color:#bdd2ce; }
.on-image .jstep__n{ background:rgba(4,14,13,.55); border-color:rgba(255,255,255,.28); color:#d7e6e3; backdrop-filter:blur(4px); }
.on-image .jstep__line{ background:rgba(255,255,255,.16); }
.on-image .scene{ background:rgba(4,14,13,.5); border-color:rgba(255,255,255,.13); backdrop-filter:blur(8px); }
.on-image .loop__caption p{ color:#bdd2ce; }
.on-image .lstep__dot{ background:rgba(4,14,13,.62); border-color:rgba(255,255,255,.26); color:#cfe3e0; backdrop-filter:blur(4px); }
.on-image .lstep__lbl b{ color:#eafffe; }
.on-image .lstep__lbl span{ color:#9bb5b1; }
.on-image .loop__svg .loop-path{ stroke:rgba(255,255,255,.28); }
.on-image .caption{ color:rgba(226,240,238,.6); }

/* ===================================================================
   2. STATEMENT over the stadium plate
   =================================================================== */
.statement.has-bg{ background:transparent; }
.statement.has-bg .statement__dots{ opacity:.32; }

/* ===================================================================
   3. AUTOMATION SCENE ILLUSTRATIONS
   The artwork is drawn for a light ground, so its card stays light in
   both themes — exactly as the printed profile presents it.
   =================================================================== */
.scene__fig{
  display:block; margin:-6px -6px 16px; border-radius:var(--radius-sm);
  background:linear-gradient(170deg,#ffffff,#eef5f4);
  overflow:hidden; aspect-ratio:16/9;
}
.scene__fig img{
  width:100%; height:100%; object-fit:contain; padding:6px;
  transition:transform 1.1s var(--ease-out), opacity .9s var(--ease-out);
  transform:scale(.94); opacity:0;
}
.scene.is-in .scene__fig img, .scene.in .scene__fig img{ transform:none; opacity:1; }
.scene:hover .scene__fig img{ transform:scale(1.04); }
.on-image .scene__fig{ background:linear-gradient(170deg,#f7fbfa,#e6efee); }

/* ===================================================================
   4. PARTNER LOGOS
   Real marks on a light card so every brand keeps its own colours and
   stays legible in either theme.
   =================================================================== */
.pcard{ background:#fff; border-color:rgba(12,40,38,.10); }
[data-theme="dark"] .pcard{ background:rgba(255,255,255,.94); border-color:rgba(255,255,255,.14); }
.pcard__logo{
  display:grid; place-items:center; width:100%; height:clamp(38px,5vw,54px);
  transition:transform .5s var(--ease-out);
}
.pcard__logo img{
  max-height:100%; max-width:78%; width:auto; height:auto; object-fit:contain;
  opacity:0; transform:translateY(10px) scale(.96);
  transition:opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay:var(--d,0ms);
}
.pcard.is-in .pcard__logo img, .pcard.in .pcard__logo img{ opacity:1; transform:none; }
.pcard:hover .pcard__logo{ transform:scale(1.06); }
.pcard span{ color:#5e716d; margin-top:10px; }
[data-theme="dark"] .pcard span{ color:#5e716d; }
.pcard::after{ background:radial-gradient(120% 90% at 50% 0%, rgba(0,128,129,.10), transparent 70%); }

/* ===================================================================
   5. BRAND MARKS — the rev4 logo
   =================================================================== */
.brand__mark{
  width:112px; height:calc(112px / 1.86);
  -webkit-mask-image:url(../img/brand/nesam-lockup-mask.svg);
  mask-image:url(../img/brand/nesam-lockup-mask.svg);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
.brand__mark--lg{ width:164px; height:calc(164px / 1.86); }
.hero__logo{
  width:min(300px,54vw); height:calc(min(300px,54vw) / 1.86);
  -webkit-mask-image:url(../img/brand/nesam-lockup-mask.svg);
  mask-image:url(../img/brand/nesam-lockup-mask.svg);
  -webkit-mask-size:contain; mask-size:contain;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
}
/* The AI-core hubs carry the symbol rather than the word */
.core__center span, .cmp__hub b{ position:relative; }
.core__center::before, .cmp__hub::before{
  content:""; display:block; width:46%; aspect-ratio:1.72; margin:0 auto 6px;
  background-color:#fff;
  -webkit-mask:url(../img/brand/nesam-symbol-mask.svg) center/contain no-repeat;
  mask:url(../img/brand/nesam-symbol-mask.svg) center/contain no-repeat;
}
.cmp__hub::before{ width:52%; margin-bottom:2px; }

/* ===================================================================
   6. RESPONSIVE / MOTION SAFETY
   =================================================================== */
@media (max-width:760px){
  .secbg{ inset:-6% 0; }
  .secbg--soft{ --strength:.22; }
  .secbg--strong{ --strength:.6; }
  .brand__mark{ width:96px; height:calc(96px / 1.86); }
}
@media (prefers-reduced-motion: reduce){
  .secbg img{ --k:1 !important; scale:1 !important; transform:none !important; filter:none !important; }
  .scene__fig img{ transform:none !important; opacity:1 !important; }
  .pcard__logo img{ opacity:1 !important; transform:none !important; }
}

/* ===================================================================
   7. REVIEW FIXES
   =================================================================== */

/* The teal→blue gradient text disappears against a teal plate */
.on-image .grad{
  background:linear-gradient(95deg,#ffffff,#a7f3ec);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}

/* A solid near-black card punches a hole in the gradient — glass instead,
   matching how the printed profile treats these two cards */
.on-image .vm-card--dark{
  background:rgba(4,20,19,.38);
  border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  color:#eafffe;
}
.on-image .vm-card--dark h3{ color:#8ff0e8; }
.on-image .vm-card--teal{
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}

/* A tall mark (OODA World) was spilling over its caption */
/* Percentage heights on a centred grid item are unreliable in Chromium — a
   squarer mark (OODA World) kept resolving to its intrinsic height and
   overflowing. An absolutely positioned box removes the ambiguity: the slot
   is exact and object-fit does the scaling. */
.pcard__logo{ position:relative; display:block; min-height:0; width:100%; }
.pcard__logo img{
  position:absolute; inset:0; margin:auto;
  width:82%; height:100%; max-width:82%; max-height:100%;
  object-fit:contain; object-position:center;
}

/* The statement's copy sits on the bright side of the stadium plate, so the
   directional scrim alone is not enough — add an even veil underneath it */
.secbg--strong::after{
  background:
    var(--veil),
    linear-gradient(180deg, var(--bg) 0%, transparent 26%, transparent 74%, var(--bg) 100%),
    linear-gradient(90deg, var(--scrim-a) 0%, var(--scrim-b) 60%, transparent 100%);
}
[data-theme="dark"]{ --veil:linear-gradient(rgba(6,13,12,.42), rgba(6,13,12,.42)); }
[data-theme="light"]{ --veil:linear-gradient(rgba(8,26,24,.38), rgba(8,26,24,.38)); }
/* the statement reads as a dark plate in both themes, so light type throughout */
[data-theme="light"] .statement.has-bg .statement__body p{ color:#c2d6d3; }