/* Style Emras — About page ("من نحن"), scroll-driven storytelling.
   Everything is scoped under .ab. The pinned/animated version only applies when <html> has .ab-anim
   (added in the view's <head> unless prefers-reduced-motion; about.js removes it again if GSAP is missing).
   Without .ab-anim every section is a plain, readable, static block. Logical properties are used throughout
   so the layout mirrors on its own when the site flips to dir=ltr (English). */

.ab {
  --ab-nav: var(--nav-height, 73px);
  --ab-vh: 100vh;
  --ab-stage-h: calc(var(--ab-vh) - var(--ab-nav));
  --ab-head: var(--brand-dark);

  /* how far each pinned stage scrolls (× the stage height) — desktop */
  --ab-hero-dist: calc(var(--ab-stage-h) * .9);
  --ab-offer-dist: calc(var(--ab-stage-h) * 2.08);
  --ab-ship-dist: calc(var(--ab-stage-h) * 1.2);
  --ab-final-dist: calc(var(--ab-stage-h) * 1.4);

  position: relative;
  overflow-x: clip;
}
@supports (height: 100svh) {
  .ab { --ab-vh: 100svh; }
}
html[data-theme="dark"] .ab { --ab-head: var(--ink); }
/* theme.css paints every dark-mode heading gold-light; on this page big display type uses the softer ink tone and keeps gold for accents only */
html[data-theme="dark"] .ab :is(h1, h2) { color: var(--ab-head); }

@media (max-width: 767.98px) {
  .ab {
    --ab-hero-dist: calc(var(--ab-stage-h) * .62);
    --ab-offer-dist: calc(var(--ab-stage-h) * 1.66);
    --ab-ship-dist: calc(var(--ab-stage-h) * .9);
    --ab-final-dist: calc(var(--ab-stage-h) * 1.1);
  }
}

.ab section { position: relative; }
.ab img { display: block; }
.ab-gold { color: var(--accent-gold); }

/* ---------- shared type ---------- */
.ab-h2 {
  font-size: clamp(1.6rem, 3.3vw, 2.6rem);
  font-weight: 800;
  line-height: 1.35;
  color: var(--ab-head);
  margin: .45rem 0 0;
  text-wrap: balance;
}
.ab-nb { display: inline-block; }
.ab-lead {
  color: var(--muted);
  font-size: clamp(1rem, 1.5vw, 1.15rem);
  line-height: 2;
  max-width: 34em;
  margin: 1.2rem 0 0;
}

/* ---------- pinned stage scaffolding (animated mode only) ---------- */
.ab-anim .ab-track { position: relative; }
.ab-anim .ab-stage {
  position: sticky;
  top: var(--ab-nav);
  height: var(--ab-stage-h);
  overflow: hidden;
}
.ab-anim .ab-hero-track    { height: calc(var(--ab-stage-h) + var(--ab-hero-dist)); }
.ab-anim .ab-offer-track   { height: calc(var(--ab-stage-h) + var(--ab-offer-dist)); }
.ab-anim .ab-ship-track    { height: calc(var(--ab-stage-h) + var(--ab-ship-dist)); }
.ab-anim .ab-final-track   { height: calc(var(--ab-stage-h) + var(--ab-final-dist)); }

/* before JS runs the intro groups stay hidden; a CSS failsafe reveals them if JS never does */
.ab-anim .ab-intro {
  visibility: hidden;
  animation: abShow 0s linear 2.6s forwards;
}
@keyframes abShow { to { visibility: visible; } }

/* =========================================================
   1 — HERO
   ========================================================= */
.ab-hero-stage {
  background: var(--cream-2);
  padding: 14px 16px 16px;
  min-height: var(--ab-stage-h);
}
/* the hero content sits in a calm framed panel instead of floating on the bare page colour */
.ab-hero-panel {
  position: relative;
  min-height: calc(var(--ab-stage-h) - 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4svh, 24px);
  text-align: center;
  padding: 20px 16px 56px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
}
.ab-anim .ab-hero-panel { height: 100%; }
.ab-hero-copy { display: flex; flex-direction: column; align-items: center; gap: .6rem; }
.ab-hero-title { font-size: 1rem; line-height: 1; margin: 0; }
.ab-title-line {
  display: block;
  font-size: clamp(1.9rem, 4.2vw, 3.1rem);
  font-weight: 800;
  line-height: 1.3;
  color: var(--ab-head);
}
/* the big word: in the animated page it is drawn by feathers (about.js) and this text is only kept
   invisible for screen readers; if the canvas can't run it fades in as ordinary text */
.ab-title-word {
  display: inline-block;
  font-size: clamp(4.6rem, 13vw, 7.2rem);
  font-weight: 800;
  line-height: 1.12;
  color: var(--accent-gold);
}
.ab-anim .ab-title-word { opacity: 0; animation: abWordShow .6s ease 3.6s forwards; }
.ab-anim.ab-fw-on .ab-title-word { animation: none; opacity: 0; }
.ab-anim.ab-fw-off .ab-title-word { animation: none; opacity: 1; }
@keyframes abWordShow { to { opacity: 1; } }
/* the single feather that follows the page (below the sticky header, which is z-index 1030) */
.ab-thread { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 900; }
.ab-feathers { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 4; }
.ab-w {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  padding: .1em .05em .14em;
  margin: -.1em 0 -.14em;
}
.ab-w > span { display: inline-block; }
.ab-hero-sub {
  color: var(--muted);
  font-size: clamp(1rem, 1.8vw, 1.25rem);
  margin: 0;
  max-width: 30ch;
}
.ab-hero-product {
  position: relative;
  width: max(200px, min(80vw, 500px, calc((var(--ab-stage-h) - 440px) * 1.76)));
  aspect-ratio: 728 / 414;
}
.ab-hero-product-in {
  position: absolute;
  inset: 0;
  transform-origin: 50% 72%;
}
.ab-hero-product-in::after {           /* soft ground shadow */
  content: "";
  position: absolute;
  inset-inline: 6%;
  bottom: -14px;
  height: 22px;
  background: radial-gradient(closest-side, rgba(0, 79, 118, .22), transparent);
  filter: blur(6px);
  z-index: -1;
}
html[data-theme="dark"] .ab-hero-product-in::after {
  background: radial-gradient(closest-side, rgba(0, 0, 0, .45), transparent);
}
.ab-hero-product img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
/* the tissue lives in its own clipped copy of the image; the box in another. Scaling the tissue copy
   from the seam makes it rise out of the box without ghosting or a gap. */
.ab-tissue-base { clip-path: inset(36.5% 0 0 0); }
.ab-tissue-lift {
  clip-path: inset(0 0 62% 0);
  transform-origin: 50% 38%;
}
.ab-hero-hint {
  position: absolute;
  inset-inline-start: 50%;
  bottom: 14px;
  width: 1px;
  height: 34px;
  background: linear-gradient(var(--accent-gold), transparent);
  transform-origin: top;
  animation: abHint 2s ease-in-out infinite;
}
@keyframes abHint {
  0%   { transform: scaleY(0); opacity: 0; }
  40%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

/* =========================================================
   2 — WHO WE ARE
   ========================================================= */
.ab-who {
  z-index: 3;
  background: var(--cream);
  padding: clamp(84px, 14svh, 170px) 0 clamp(90px, 16svh, 190px);
  border-radius: 36px 36px 0 0;
}
/* the section slides up over the pinned hero */
.ab-anim .ab-who { margin-top: calc(-1 * var(--ab-hero-dist)); }

.ab-who-grid { display: grid; gap: clamp(40px, 6vw, 96px); align-items: center; }
@media (min-width: 992px) {
  .ab-who-grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
}
/* one calm still photo — the hand holding the box — so the section has a face, not just type */
.ab-who-photo {
  position: relative;
  justify-self: center;
  width: 100%;
  max-width: 440px;
  aspect-ratio: 4 / 5;
  max-height: min(72svh, 620px);
}
/* arch-shaped window with a thin gold outline set slightly off, so the photo reads as designed, not pasted */
.ab-who-photo::before {
  content: "";
  position: absolute;
  inset-block: 16px -16px;
  inset-inline: 16px -16px;
  border: 1.5px solid color-mix(in srgb, var(--accent-gold) 70%, transparent);
  border-radius: 50% 50% 26px 26px / 32% 32% 26px 26px;
  pointer-events: none;
}
.ab-who-photo-in {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 50% 50% 26px 26px / 32% 32% 26px 26px;
  box-shadow: var(--shadow-md);
  background: var(--cream-2);
}
/* the image is taller than its window so it can drift slowly while scrolling (about.js) */
.ab-who-photo-in img { position: absolute; inset-inline: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 50% 55%; }
html[data-theme="dark"] .ab-who-photo-in img { filter: brightness(.84) saturate(.92); }
html[data-theme="dark"] .ab-who-photo::before { border-color: color-mix(in srgb, var(--accent-gold-light) 45%, transparent); }
.ab-words { list-style: none; margin: clamp(26px, 4svh, 44px) 0 0; padding: 0; max-width: 30rem; }
.ab-words li {
  display: flex;
  align-items: baseline;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  padding-block: .12em .06em;
}
.ab-words li:last-child { border-bottom: 0; }
.ab-word-idx { font-size: .85rem; font-weight: 700; letter-spacing: .06em; color: var(--accent-gold); min-width: 2.2ch; }
.ab-word-mask { display: block; overflow: hidden; padding: .1em .05em .16em; }
.ab-word {
  display: block;
  font-size: clamp(2rem, 4.2vw, 3.3rem);
  font-weight: 800;
  line-height: 1.15;
  color: var(--ab-head);
}
.ab-word.ab-gold { color: var(--accent-gold); }

/* =========================================================
   4 — WHAT WE OFFER
   ========================================================= */
.ab-grid { display: grid; gap: 20px; }
.ab-offer-stage { background: var(--cream-2); display: flex; align-items: center; }
.ab-offer-stage > .container { width: 100%; }
.ab-offer-grid { grid-template-columns: minmax(0, 1fr); }
.ab-off-stage {
  position: relative;
  height: min(30svh, 280px);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
}
.ab-off-img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ab-off-img img { max-width: 62%; max-height: 62%; object-fit: contain; }

.ab-off-list { list-style: none; margin: 0; padding: 0; }
.ab-off-item { display: flex; align-items: flex-start; gap: 14px; padding-block: 6px; }
.ab-off-idx { font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--accent-gold); padding-top: .7em; min-width: 2.2ch; }
.ab-off-body { display: block; }
.ab-off-name { display: block; font-size: clamp(1.2rem, 2.5vw, 1.95rem); font-weight: 800; line-height: 1.4; color: var(--ab-head); }
/* each product line links to its catalog category — same look, just a quiet underline on hover */
a.ab-off-name { text-decoration: none; }
a.ab-off-name:hover, a.ab-off-name:focus-visible { color: var(--ab-head); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.ab-off-line { display: block; color: var(--muted); font-size: 1rem; line-height: 1.7; }

@media (min-width: 992px) {
  .ab-offer-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas: "head stage" "list stage";
    column-gap: clamp(32px, 6vw, 90px);
    row-gap: 28px;
    align-content: center;
    align-items: start;
  }
  .ab-o-head { grid-area: head; }
  .ab-off-stage { grid-area: stage; height: min(calc(var(--ab-stage-h) - 90px), 540px); }
  .ab-off-list { grid-area: list; }
  .ab-off-item { padding-block: 8px; }
}

.ab-anim .ab-off-item { opacity: .28; transition: opacity .35s ease; }
.ab-anim .ab-off-item.is-active { opacity: 1; }
.ab-anim .ab-off-line { max-height: 0; opacity: 0; overflow: hidden; transition: max-height .4s ease, opacity .4s ease; }
.ab-anim .ab-off-item.is-active .ab-off-line { max-height: 3.4em; opacity: 1; }

/* static: names + sentences visible, images become a small gallery */
html:not(.ab-anim) .ab-offer { padding: clamp(70px, 12svh, 130px) 0; background: var(--cream-2); }
html:not(.ab-anim) .ab-off-stage { height: auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; background: none; overflow: visible; }
html:not(.ab-anim) .ab-off-img { position: relative; aspect-ratio: 1; }

/* =========================================================
   5 — FROM US TO YOU
   ========================================================= */
.ab-ship-stage {
  background: var(--cream);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(8px, 2svh, 22px);
  text-align: center;
  padding: 20px 16px;
  min-height: var(--ab-stage-h);
}
.ab-ship-sub { color: var(--muted); font-size: clamp(1rem, 1.8vw, 1.25rem); margin: .6rem 0 0; max-width: 32em; }
.ab-truck {
  width: min(340px, 44svh, 72vw);
  aspect-ratio: 1;
  margin-inline: auto;
  transform: scaleX(-1);          /* the artwork drives to the right; in RTL "forward" is leftwards */
}
.ab-truck:dir(ltr) { transform: none; }
.ab-route { position: relative; width: min(720px, 92vw); padding-top: 4px; }
.ab-route-line {
  position: absolute;
  inset-inline: 12.5%;
  top: 11px;
  height: 2px;
  background: var(--line);
}
.ab-route-fill { position: absolute; inset-block: 0; inset-inline-start: 0; width: 0; background: var(--accent-gold); }
.ab-route-list { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, 1fr); }
.ab-route-list li { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.ab-route-dot {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--cream-2);
  border: 2px solid var(--line);
  transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.ab-route-label { font-size: .95rem; font-weight: 700; color: var(--muted); transition: color .3s ease; }
.ab-route-list li.is-on .ab-route-dot { background: var(--accent-gold); border-color: var(--accent-gold); transform: scale(1.2); }
.ab-route-list li.is-on .ab-route-label { color: var(--ab-head); }
html:not(.ab-anim) .ab-ship { padding: clamp(70px, 12svh, 130px) 0; background: var(--cream); }
html:not(.ab-anim) .ab-ship-stage { min-height: 0; }

/* =========================================================
   6 — FINAL
   ========================================================= */
.ab-final-stage { background: var(--cream-2); padding: 14px 16px 16px; min-height: var(--ab-stage-h); }
/* closing panel — same framed treatment as the hero, with the soft silk-and-feathers photo behind the text */
.ab-final-panel {
  position: relative;
  min-height: calc(var(--ab-stage-h) - 30px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4svh, 40px);
  text-align: center;
  padding: 24px 16px;
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  background: var(--cream);
  isolation: isolate;
}
.ab-anim .ab-final-panel { height: 100%; }
/* the photo is only a backdrop: softly blurred and veiled so it never competes with the text */
.ab-final-panel::after {
  content: "";
  position: absolute;
  inset: -14px;
  z-index: 0;
  background: url("../images/about-closing.jpg") center / cover no-repeat;
  filter: blur(3px) saturate(.92);
  opacity: .82;
  pointer-events: none;
}
.ab-final-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: color-mix(in srgb, var(--cream) 32%, transparent);
  pointer-events: none;
}
/* dark theme: same treatment as the home hero photo — the picture stays, darkened by a deep-navy scrim */
html[data-theme="dark"] .ab-final-panel::after { filter: blur(2px) brightness(.66) saturate(.85); opacity: 1; }
html[data-theme="dark"] .ab-final-panel::before {
  background: linear-gradient(to right, rgba(6, 12, 17, .42) 0%, rgba(6, 12, 17, .66) 30%, rgba(6, 12, 17, .66) 70%, rgba(6, 12, 17, .42) 100%);
}
.ab-final-panel > * { position: relative; z-index: 2; }
.ab-final-lines { display: flex; flex-direction: column; align-items: center; gap: clamp(12px, 2.6svh, 24px); }
.ab-fl { margin: 0; font-size: clamp(1.7rem, 4.6vw, 3.4rem); font-weight: 800; line-height: 1.35; color: var(--ab-head); }
.ab-fl em { font-style: normal; color: var(--accent-gold); }
.ab-fl-3 { margin: 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.4rem); max-width: 30em; }
.ab-final-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.ab-cta-kicker { font-weight: 700; color: var(--accent-gold); letter-spacing: .02em; }
.ab-cta-buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
@media (max-width: 575.98px) {
  .ab-cta-buttons { flex-direction: column; width: 100%; max-width: 300px; }
  .ab-cta-buttons .btn { width: 100%; }
}

/* the first two lines share one spot in animated mode and take turns */
.ab-anim .ab-fl-stack { display: grid; }
.ab-anim .ab-fl-stack > .ab-fl { grid-area: 1 / 1; }
html:not(.ab-anim) .ab-fl-stack { display: flex; flex-direction: column; gap: 12px; }
html:not(.ab-anim) .ab-final { padding: clamp(80px, 14svh, 150px) 0; background: var(--cream-2); }
html:not(.ab-anim) .ab-final-stage { min-height: 0; }

/* =========================================================
   Mobile refinements
   ========================================================= */
@media (min-width: 992px) and (max-height: 720px) {
  .ab-h2 { font-size: clamp(1.7rem, 3.4vw, 2.7rem); }
  .ab-off-name { font-size: clamp(1.2rem, 2.3vw, 1.9rem); }
  .ab-off-item { padding-block: 4px; }
}

@media (max-width: 767.98px) {
  .ab-title-line { font-size: clamp(1.7rem, 7.2vw, 2.5rem); }
  .ab-title-word { font-size: clamp(4rem, 19vw, 5.6rem); }
  .ab-hero-panel { padding-bottom: 48px; border-radius: 22px; }
  .ab-final-panel { border-radius: 22px; }
  .ab-final-panel::after { background-position: 6% 50%; }   /* keep the feather corner in view on the narrow crop */
  .ab-who { border-radius: 26px 26px 0 0; }
  .ab-off-item { padding-block: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  .ab-hero-hint { animation: none; opacity: .6; }
  .ab * { transition: none !important; }
}