/* =================================================================
   GUARIP BASE
   Minimal — only what the hero needs and what is universally useful.
   ================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Lenis takes over scrolling on .lenis class wrappers; keep native fallback */
  scroll-behavior: auto;
}

html[lang="ar"], body[lang="ar"], html[dir="rtl"], body[dir="rtl"] {
  direction: rtl;
}

body {
  margin: 0;
  background: var(--g-ivory);
  color: var(--g-ink);
  font-family: var(--g-font-body-ar);
  font-size: var(--g-fs-body);
  line-height: var(--g-lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; }

::selection { background: var(--g-brass-soft); color: var(--g-ink); }

/* Lenis recommended body styles when smooth scroll is on */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: clip; }

/* ─── Brass-frame utility — recurring brand signature ───────── */
.g-frame {
  position: relative;
  isolation: isolate;
}
.g-frame > .g-frame__media,
.g-frame > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.g-frame > .g-frame__line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.g-frame > .g-frame__line rect {
  fill: none;
  stroke: var(--g-frame-color);
  stroke-width: 0.4; /* viewBox 0 0 100 60 — translates to ~1.5px on most sizes */
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 320;
  stroke-dashoffset: 320;
  transition: stroke-dashoffset var(--g-dur-cinema) var(--g-ease-out);
}
.g-frame.is-drawn > .g-frame__line rect { stroke-dashoffset: 0; }

@media (prefers-reduced-motion: reduce) {
  .g-frame > .g-frame__line rect {
    stroke-dasharray: 0;
    stroke-dashoffset: 0;
    transition: none;
  }
}

/* ─── Latin emphasis inside Arabic prose ──────────────────── */
.g-latin {
  font-family: var(--g-font-latin);
  font-weight: 500;
  font-style: italic;
  font-size: 1.05em;
  letter-spacing: 0.01em;
  color: var(--g-ink);
  direction: ltr;
  unicode-bidi: isolate;
  margin-inline: 0.12em;
}

/* ─── Container ─────────────────────────────────────────── */
.g-container {
  max-width: var(--g-container);
  margin-inline: auto;
  padding-inline: var(--g-pad-x);
}

/* ─── Eyebrow / label ───────────────────────────────────── */
.g-label {
  font-family: var(--g-font-label);
  font-size: var(--g-fs-label);
  font-weight: 500;
  letter-spacing: var(--g-ls-label);
  text-transform: uppercase;
  color: var(--g-muted);
}

/* ─── Word-split spans (set by JS for reveal) ───────────── */
.g-w {
  display: inline-block;
  will-change: transform, opacity;
}

/* ─── Editorial text-roll button (brand-wide pattern) ────
   Markup:
     <a class="g-btn ...">
       <span class="g-btn__label">
         <span class="g-btn__roll">
           <span class="g-btn__text">Hello</span>
           <span class="g-btn__text">Hello</span>
         </span>
       </span>
       <svg>...</svg>   ← icon sits outside the rolling label
     </a>
   On hover, the inner stack slides up by exactly one line-height,
   revealing the duplicate copy. Line-height locked to 1.4 so the
   roll math is exact.                                         */
.g-btn {
  position: relative;
  isolation: isolate;
  line-height: 1.4;
}
.g-btn__label {
  position: relative;
  display: inline-block;
  overflow: hidden;
  height: 1.4em;
  vertical-align: middle;
}
.g-btn__roll {
  display: flex;
  flex-direction: column;
  transition: transform 480ms cubic-bezier(0.65, 0, 0.35, 1);
  will-change: transform;
}
.g-btn__text {
  display: block;
  height: 1.4em;
  line-height: 1.4;
  white-space: nowrap;
}
.g-btn:hover .g-btn__roll,
.g-btn:focus-visible .g-btn__roll {
  transform: translateY(-1.4em);
}

@media (prefers-reduced-motion: reduce) {
  .g-btn__roll { transition: none; }
  .g-btn:hover .g-btn__roll,
  .g-btn:focus-visible .g-btn__roll { transform: none; }
}

/* ─── Focus visibility (accessible) ─────────────────────── */
:focus-visible {
  outline: 2px solid var(--g-turquoise);
  outline-offset: 3px;
  border-radius: var(--g-radius-button);
}