/* =====================================================================
   NESAM — pages.css
   Multi-page layer: the teal page-transition curtain, inner-page heroes,
   the Home "explore" cards, the partner marquee and the CTA band.
   ===================================================================== */

/* ===================================================================
   1. PAGE-TRANSITION CURTAIN
   Two teal panels sweep across (the brighter one a beat behind the
   darker), the Nesam symbol and the destination name sit in the
   middle, then on the next page the panels carry on off the far side.
   --pt-p: -1 = parked before the screen, 0 = covering, 1 = parked past it.
   --pt-dir flips the sweep for Arabic so it follows reading direction.
   =================================================================== */
.pt{
  position:fixed; inset:0; z-index:10000;
  pointer-events:none; visibility:hidden;
  --pt-dir:1;
}
html[dir="rtl"] .pt{ --pt-dir:-1; }

.pt__panel{
  position:absolute; inset:0;
  --pt-p:-1;
  transform:translate3d(calc(var(--pt-p) * 101% * var(--pt-dir)),0,0);
  will-change:transform;
}
/* deepened so the teal logo tile reads against it — on the old bright
   gradient the mark all but disappeared */
.pt__panel--a{ background:#021a1a; }
.pt__panel--b{
  background:
    radial-gradient(90% 70% at 50% 45%, rgba(22,166,164,.26), transparent 70%),
    linear-gradient(135deg,#06433f 0%,#042f2e 45%,#02191a 100%);
}

.pt__center{
  position:absolute; inset:0; display:grid; place-content:center; justify-items:center; gap:18px;
  opacity:0; transform:scale(.9);
}
/* the curtain carries the logo itself, not the bare swoosh */
.pt__mark{
  width:clamp(84px,9vw,112px); aspect-ratio:1;
  background:url(../img/brand/nesam-logo.svg) center/contain no-repeat;
  filter:drop-shadow(0 14px 30px rgba(0,0,0,.42));
}
.pt__label{
  font-family:var(--font); font-weight:600; font-size:.8rem;
  letter-spacing:.32em; text-transform:uppercase; color:rgba(243,242,236,.86);
  min-height:1.2em;
}
.pt__label::before{ content:var(--pt-label,""); }
html[lang="ar"] .pt__label{ letter-spacing:0; font-size:1.05rem; text-transform:none; }
.pt__bar{ width:120px; height:2px; border-radius:2px; background:rgba(255,255,255,.18); overflow:hidden; }
.pt__bar::after{ content:""; display:block; height:100%; background:#f3f2ec; transform:scaleX(0); transform-origin:left center; }
html[dir="rtl"] .pt__bar::after{ transform-origin:right center; }

/* visible while leaving (pt--on) or while arriving covered (html.pt-in) */
.pt.pt--on, html.pt-in .pt{ visibility:visible; pointer-events:auto; }

/* arriving: already covering at first paint, no animation */
html.pt-in .pt__panel{ --pt-p:0; }
html.pt-in .pt__center{ opacity:1; transform:none; }
html.pt-in .pt__bar::after{ transform:scaleX(1); }

/* leaving: sweep in, then the browser navigates */
.pt.pt--cover .pt__panel{ --pt-p:0; transition:transform .5s cubic-bezier(.77,0,.18,1); }
.pt.pt--cover .pt__panel--b{ transition-delay:.07s; }
.pt.pt--cover .pt__center{ opacity:1; transform:none; transition:opacity .3s ease .26s, transform .5s var(--ease-out) .26s; }
.pt.pt--cover .pt__bar::after{ transform:scaleX(1); transition:transform .55s ease .2s; }

/* arrived: sweep away past the far edge */
.pt.pt--reveal .pt__panel{ --pt-p:1; transition:transform .62s cubic-bezier(.77,0,.18,1); }
.pt.pt--reveal .pt__panel--a{ transition-delay:.08s; }
.pt.pt--reveal .pt__center{ opacity:0; transform:scale(1.05); transition:opacity .22s ease, transform .4s ease; }

/* the page itself gives way and settles, for depth */
#main{ transition:transform .9s var(--ease-out), opacity .6s ease; }
html.pt-leaving #main{ transform:translate3d(calc(-3vw * var(--pt-dir-page,1)),0,0); opacity:.55; transition:transform .55s cubic-bezier(.77,0,.18,1), opacity .45s ease; }
html[dir="rtl"]{ --pt-dir-page:-1; }
html.pt-hold #main{ transform:translate3d(0,26px,0); }

@media (prefers-reduced-motion: reduce){
  .pt__panel{ transform:none !important; transition:none !important; }
  .pt__panel--b, .pt__center{ display:none; }
  .pt.pt--on .pt__panel--a, html.pt-in .pt__panel--a{ opacity:1; }
  .pt.pt--reveal{ opacity:0; transition:opacity .2s ease; }
  #main, html.pt-leaving #main, html.pt-hold #main{ transform:none !important; }
}

/* The brand intro only plays on the first visit of a session */
html.no-intro #intro{ display:none !important; }

/* ===================================================================
   2. INNER-PAGE HERO
   =================================================================== */
.phero{
  position:relative; display:flex; align-items:flex-end;
  min-height:clamp(440px,64vh,640px);
  padding:calc(72px + clamp(64px,9vw,120px)) 0 clamp(52px,7vw,88px);
  background:#061211; color:#fff;
}
.phero .secbg{ --strength:.92; }
.phero .secbg--flood{ --strength:1; }
.phero .secbg::after{
  background:
    linear-gradient(180deg, rgba(4,12,11,.62) 0%, rgba(4,12,11,.18) 38%, rgba(4,12,11,.86) 100%),
    linear-gradient(90deg, rgba(4,12,11,.72) 0%, rgba(4,12,11,.2) 62%, transparent 100%);
}
html[dir="rtl"] .phero .secbg::after{
  background:
    linear-gradient(180deg, rgba(4,12,11,.62) 0%, rgba(4,12,11,.18) 38%, rgba(4,12,11,.86) 100%),
    linear-gradient(270deg, rgba(4,12,11,.72) 0%, rgba(4,12,11,.2) 62%, transparent 100%);
}
.phero__inner{ position:relative; z-index:2; }
.crumbs{
  display:flex; flex-wrap:wrap; align-items:center; gap:.7em; margin-bottom:22px;
  font-family:var(--font); font-size:.76rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
  color:#8fe9e2;
}
.crumbs a{ color:rgba(234,255,254,.62); transition:color var(--t-fast); }
.crumbs a:hover{ color:#fff; }
.crumbs i{ width:6px; height:6px; background:currentColor; opacity:.55; transform:rotate(45deg); display:inline-block; }
html[dir="rtl"] .crumbs{ letter-spacing:0; font-size:.9rem; }
.phero__title{
  font-size:clamp(2.3rem,6.4vw,4.6rem); font-weight:800; line-height:1.03; letter-spacing:-.025em;
  color:#fff; max-width:21ch;
}
.phero__title > span{ display:block; }
.phero__lead{ max-width:58ch; margin-top:22px; color:#c7dcd9; font-size:clamp(1rem,1.7vw,1.18rem); }
.phero__rule{
  display:block; width:72px; height:3px; border-radius:3px; margin-top:28px;
  background:linear-gradient(90deg,var(--teal-bright),var(--blue));
  transform:scaleX(0); transform-origin:left center; transition:transform 1s var(--ease-out) .45s;
}
html[dir="rtl"] .phero__rule{ transform-origin:right center; }
.phero.is-lit .phero__rule{ transform:scaleX(1); }
html:not(.js-motion) .phero__rule{ transform:scaleX(1); }

/* ===================================================================
   3. HOME — EXPLORE CARDS
   =================================================================== */
.explore{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.xcard{
  position:relative; display:flex; flex-direction:column; isolation:isolate; overflow:hidden;
  border-radius:var(--radius); background:var(--surface); border:1px solid var(--border);
  color:var(--text);
  transition:transform .55s var(--ease-out), box-shadow .55s var(--ease-out), border-color var(--t-fast);
}
.xcard__img{ position:relative; display:block; aspect-ratio:16/9; overflow:hidden; background:#0b1816; }
.xcard__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  scale:1.04; transition:scale 1.4s var(--ease-out), filter .6s ease; filter:saturate(.9);
}
.xcard__img::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(4,20,19,.55) 100%);
}
.xcard__n{
  position:absolute; z-index:2; top:14px; inset-inline-start:16px;
  font-family:var(--font); font-weight:800; font-size:.78rem; letter-spacing:.16em; color:#fff;
  background:rgba(4,20,19,.45); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:.35em .7em; border-radius:999px; border:1px solid rgba(255,255,255,.2);
}
.xcard__body{ display:flex; flex-direction:column; gap:8px; padding:22px 24px 24px; flex:1; }
.xcard__t{ font-family:var(--font); font-size:1.35rem; font-weight:700; color:var(--heading); }
.xcard__d{ color:var(--muted); font-size:.95rem; line-height:1.55; }
.xcard__go{
  margin-top:auto; padding-top:10px; display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--font); font-weight:600; font-size:.9rem; color:var(--teal-bright);
}
.xcard__go svg{ width:18px; height:18px; transition:transform .4s var(--ease-out); }
html[dir="rtl"] .xcard__go svg{ transform:scaleX(-1); }
.xcard:hover, .xcard:focus-visible{
  transform:translateY(-6px); box-shadow:var(--shadow-lg);
  border-color:color-mix(in srgb, var(--teal-bright) 45%, transparent);
}
.xcard:hover .xcard__img img, .xcard:focus-visible .xcard__img img{ scale:1.12; filter:saturate(1.05); }
.xcard:hover .xcard__go svg{ transform:translateX(6px); }
html[dir="rtl"] .xcard:hover .xcard__go svg{ transform:scaleX(-1) translateX(6px); }
.xcard:focus-visible{ outline:2px solid var(--teal-bright); outline-offset:3px; }

/* ===================================================================
   4. HOME — PARTNER MARQUEE
   Two identical groups side by side; the track slides exactly one group
   width, so the loop is seamless. Logos are not text, so the strip keeps
   one direction in both languages.
   =================================================================== */
.marquee{
  position:relative; overflow:hidden; direction:ltr; padding-block:6px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.marquee__track{ display:flex; width:max-content; animation:marquee 42s linear infinite; }
.marquee:hover .marquee__track, .marquee:focus-within .marquee__track{ animation-play-state:paused; }
.marquee__group{ display:flex; gap:18px; padding-inline-end:18px; }
.mlogo{
  flex:none; width:clamp(150px,16vw,210px); height:clamp(74px,8vw,96px);
  display:flex; align-items:center; justify-content:center;
  border-radius:16px; background:#fff; border:1px solid rgba(12,40,38,.10);
  transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
[data-theme="dark"] .mlogo{ background:rgba(255,255,255,.94); border-color:rgba(255,255,255,.12); }
.mlogo img{ max-width:74%; max-height:46%; width:auto; height:auto; object-fit:contain; }
.mlogo:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
@keyframes marquee{ to{ transform:translate3d(-50%,0,0); } }
.strip__more{ display:flex; justify-content:center; margin-top:30px; }

@media (prefers-reduced-motion: reduce){
  .marquee{ -webkit-mask-image:none; mask-image:none; }
  .marquee__track{ animation:none; width:auto; justify-content:center; }
  .marquee__group{ flex-wrap:wrap; justify-content:center; padding-inline-end:0; }
  .marquee__group[aria-hidden="true"]{ display:none; }
}

/* ===================================================================
   5. CTA BAND (end of every inner page)
   =================================================================== */
.section--band{ padding-block:clamp(48px,7vw,96px); }
.ctaband{
  position:relative; isolation:isolate; overflow:hidden; text-align:center;
  border-radius:calc(var(--radius) + 6px);
  padding:clamp(44px,6vw,80px) clamp(22px,5vw,64px);
  background:
    radial-gradient(90% 120% at 0% 0%, rgba(22,166,164,.9) 0%, transparent 60%),
    radial-gradient(80% 110% at 100% 100%, rgba(42,159,214,.35) 0%, transparent 60%),
    linear-gradient(135deg,#0a6e6f 0%,#064746 100%);
  color:#fff; box-shadow:0 40px 90px -50px rgba(0,80,80,.8);
}
/* drifting symbol watermark + dot field */
.ctaband::before{
  content:""; position:absolute; z-index:-1; width:min(560px,80%); aspect-ratio:1.72;
  inset-inline-end:-8%; top:50%; translate:0 -50%;
  background-color:rgba(255,255,255,.07);
  -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;
  animation:drift 14s ease-in-out infinite alternate;
}
.ctaband::after{
  content:""; position:absolute; z-index:-1; inset:0; opacity:.35;
  background-image:radial-gradient(circle, rgba(255,255,255,.35) 1.2px, transparent 1.3px);
  background-size:22px 22px;
  -webkit-mask-image:radial-gradient(circle at 15% 85%, #000, transparent 55%);
  mask-image:radial-gradient(circle at 15% 85%, #000, transparent 55%);
}
@keyframes drift{ from{ transform:translate3d(0,0,0) rotate(-4deg); } to{ transform:translate3d(-30px,-10px,0) rotate(3deg); } }
.ctaband .kicker{ color:#bff5f0; justify-content:center; }
.ctaband .kicker__dia{ background:#bff5f0; }
.ctaband h2{ color:#fff; font-size:clamp(1.7rem,3.8vw,2.7rem); max-width:22ch; margin:0 auto .45em; }
.ctaband p{ color:#d2ecea; max-width:56ch; margin:0 auto 28px; font-size:clamp(1rem,1.6vw,1.1rem); }
.ctaband__btns{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn--light{ background:#fff; color:#075a5a; box-shadow:0 14px 30px -12px rgba(0,0,0,.45); }
.btn--light:hover{ transform:translateY(-2px); box-shadow:0 20px 38px -12px rgba(0,0,0,.5); }
.btn--ghost-light{ border:1.5px solid rgba(255,255,255,.45); color:#fff; }
.btn--ghost-light:hover{ transform:translateY(-2px); border-color:#fff; }
@media (prefers-reduced-motion: reduce){ .ctaband::before{ animation:none; } }

/* ===================================================================
   6. NAV — current page
   =================================================================== */
.nav__links a[aria-current="page"]{ color:var(--text); }
.nav__links a[aria-current="page"]::after{ transform:scaleX(1); }

/* ===================================================================
   7. RESPONSIVE
   =================================================================== */
@media (max-width:980px){ .explore{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px){
  .explore{ grid-template-columns:1fr; gap:16px; }
  .phero{ min-height:clamp(380px,70vh,520px); padding-top:calc(64px + 56px); }
  .phero__title{ font-size:clamp(2rem,9.5vw,2.8rem); }
  .ctaband__btns .btn{ width:100%; }
}