/* Profile Productions. Brand tokens from the guideline: Recording #DA3A38,
   Filming #221F20, Sand #E2CDB9. The canvas is the sting's own ground so the
   video edges vanish into the page. */
:root {
  --sc-canvas:     #1C191F;
  --sc-surface:    #221F20;
  --sc-ink:        #F4EEE8;
  --sc-ink-soft:   #BFB2A6;
  --sc-accent:     #DA3A38;
  --sc-accent-ink: #FFFFFF;
  --sc-font-display: "Ablaj", "Readex Pro", system-ui, sans-serif;
  --sc-font-text:    "Ablaj", "Readex Pro", system-ui, sans-serif;

  --sand: #E2CDB9;
  --film: #221F20;
  --strip: #2B2729;
  --gate:  #141216;
}

/* Brand face. Uses Ablaj where installed; Readex Pro carries both scripts until
   licensed webfonts exist. To ship Ablaj, add url("fonts/Ablaj-*.woff2") after
   each local() and drop the files in fonts/. */
@font-face { font-family: "Ablaj"; src: local("Ablaj"), local("Ablaj Regular"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Ablaj"; src: local("Ablaj Medium"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Ablaj"; src: local("Ablaj Bold"); font-weight: 700; font-display: swap; }

html[lang="ar"] body { line-height: 1.85; letter-spacing: 0; }
html[lang="ar"] .f-title, html[lang="ar"] .hero__h, html[lang="ar"] .peak__h { letter-spacing: 0; line-height: 1.25; }
/* Arabic sets smaller at the same nominal size; one step up for the prose. */
html[lang="ar"] .f-body { font-size: clamp(16px, 2.2cqi, 22px); line-height: 1.8; }
html[lang="ar"] .hero__p, html[lang="ar"] .peak__p { font-size: var(--sc-t-lg); }

.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip {
  position: fixed; inset-block-start: 0.75rem; inset-inline-start: 0.75rem; z-index: 99;
  padding: 0.6rem 1rem; background: var(--sc-accent); color: #fff; border-radius: var(--sc-r-sm);
  transform: translateY(-160%); transition: transform 160ms var(--sc-ease-out);
}
.skip:focus-visible { transform: none; }

/* ---------------------------------------------------------------- bar -- */
.bar {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(0.9rem, 2.2vh, 1.4rem) var(--sc-gutter);
  pointer-events: none;
}
.bar > * { pointer-events: auto; }
.bar__mark { display: block; width: 30px; color: var(--sc-accent); }
.bar__mark svg { width: 100%; height: auto; }
.bar__nav { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); }
.lang {
  background: none; border: 0; padding: 0.5rem 0.25rem; cursor: pointer;
  color: var(--sc-ink); font-size: var(--sc-t-sm); font-weight: 500;
  text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--sc-ink) 35%, transparent);
  text-underline-offset: 0.35em; transition: text-decoration-color 160ms var(--sc-ease-out);
}
.lang:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) { .lang:hover { text-decoration-color: var(--sc-accent); } }

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: 0.7rem 1.35rem; white-space: nowrap;
  background: var(--sc-accent); color: var(--sc-accent-ink);
  font-weight: 500; font-size: var(--sc-t-sm); letter-spacing: 0.01em;
  text-decoration: none; border-radius: 2px;
  box-shadow: var(--sc-e1);
  transition: background-color 160ms var(--sc-ease-out), transform 120ms var(--sc-ease-out);
}
.cta:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .cta:hover { background: #C8302E; } }
.cta--bar { min-height: 2.5rem; padding: 0.55rem 1.05rem; }

/* --------------------------------------------------------------- hero -- */
.hero { max-width: min(40rem, 86vw); }
.hero__h {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(2.1rem, 1.3rem + 3vw, 4.1rem);
  line-height: 1.04; letter-spacing: var(--sc-track-tight);
  text-wrap: balance; max-width: 16ch;
}
.hero__p { margin: var(--sc-4) 0 var(--sc-6); max-width: 40ch; color: var(--sc-ink-soft); text-wrap: pretty; }
.hero-scrim { opacity: 0; }
/* The engine anchors lead copy physically (left). Arabic reads from the right. */
[dir="rtl"] .sc-copy--lead.hero { left: auto; right: var(--sc-gutter); }
[dir="rtl"] .hero-scrim { transform: scaleX(-1); }

.peak {
  position: absolute; inset-inline: var(--sc-gutter); top: clamp(5.5rem, 15vh, 10rem);
  text-align: center;
}
.peak__h {
  margin: 0 auto; font-weight: 500; font-size: var(--sc-t-2xl);
  line-height: 1.06; letter-spacing: var(--sc-track-snug); text-wrap: balance; max-width: 22ch;
}
.peak__p { margin: var(--sc-3) auto 0; color: var(--sc-ink-soft); max-width: 44ch; text-wrap: pretty; }

/* ---------------------------------------------------------------- cam --
   Everything below is the world. site.js owns the transforms; the sizes are
   CSS variables it writes once per resize: --W --H --G --B (px), --dir. */
.cam { position: absolute; inset: 0; z-index: 130; pointer-events: none; }

/* The 3D opening sits between the engine's legs and the DOM reel. It fades in
   once the model has loaded, over the poster still that painted first. */
.stage3d {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 125;
  opacity: 0; transition: opacity 600ms var(--sc-ease-out);
}
.stage3d.is-ready { opacity: 1; }
.stage3d.is-failed { display: none; }

/* Frame 0: the sting, projected. */
.f-sting { background: #1C191F; }
.f-sting__v { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.cam__ground { position: absolute; inset: 0; background: var(--sc-canvas); opacity: 0; }

.strip { position: absolute; left: 0; top: 0; transform-origin: 0 0; opacity: 0; }
.strip__band {
  position: absolute; top: calc(var(--H) / -2 - var(--B));
  height: calc(var(--H) + var(--B) * 2);
  left: var(--band-x, 0px); width: var(--band-w, 100px);
  background-color: var(--strip);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='11' y='13' width='18' height='14' rx='3' fill='%231C191F'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40'%3E%3Crect x='11' y='13' width='18' height='14' rx='3' fill='%231C191F'/%3E%3C/svg%3E");
  background-repeat: repeat-x, repeat-x;
  background-size: var(--B) var(--B), var(--B) var(--B);
  background-position: 0 0, 0 100%;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.06), inset 0 -1px 0 rgb(0 0 0 / 0.35), 0 30px 60px -20px rgb(8 6 10 / 0.7);
}

.frame {
  position: absolute; margin: 0;
  left: calc(var(--dir) * var(--i) * (var(--W) + var(--G)) - var(--W) / 2);
  top: calc(var(--H) / -2);
  width: var(--W); height: var(--H);
  background: var(--gate); color: var(--sc-ink);
  overflow: hidden; container-type: size;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.03);
  --lit: 0;
}
/* The projector lamp. Only a frame that is locked in the gate gets it. */
.frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(70% 80% at 50% 45%, rgb(255 236 214 / 0.11), transparent 70%);
  opacity: var(--lit);
}
.frame a { pointer-events: auto; }
.frame__in { position: absolute; inset: 7cqh 6cqi; display: flex; flex-direction: column; gap: 0; }

.f-title {
  margin: 0; font-family: var(--sc-font-display); font-weight: 500;
  font-size: clamp(26px, 7cqi, 76px); line-height: 1.02; letter-spacing: var(--sc-track-tight);
  text-wrap: balance; max-width: 14ch;
}
.f-title--xl { font-size: clamp(30px, 9.5cqi, 104px); max-width: 11ch; }
.f-body {
  margin: clamp(10px, 2.4cqh, 22px) 0 0; max-width: 38ch;
  font-size: clamp(15px, 1.95cqi, 20px); line-height: 1.6; color: var(--sc-ink-soft); text-wrap: pretty;
}

/* Who */
.f-who .frame__in { justify-content: flex-end; }
.f-who .f-body { max-width: 46ch; }
/* The brand logomark, exactly as the guideline draws it: never mirrored, and
   in the same corner in both languages. */
.f-who__mark { position: absolute; top: 7cqh; right: 6cqi; width: clamp(30px, 6cqi, 56px); color: var(--sc-accent); }
.f-who__mark svg { width: 100%; height: auto; }

/* Crafts: one frame each, composed differently so the reel never repeats a shot. */
.f-svc--red { background: var(--sc-accent); color: #fff; }
.f-svc--red .f-body { color: #fff; }
.f-svc--red .frame__in { justify-content: flex-end; }
.f-svc--red::after { background: radial-gradient(70% 80% at 50% 45%, rgb(255 255 255 / 0.10), transparent 70%); }

.f-svc--top .frame__in { justify-content: space-between; }
.f-svc--top .f-body { align-self: flex-end; text-align: end; }

.f-svc--mid .frame__in { justify-content: center; align-items: center; text-align: center; }
.f-svc--mid .f-title { max-width: none; }

.f-svc--sand { background: var(--sand); color: #1C191F; }
.f-svc--sand .f-body { color: #3A3236; }
.f-svc--sand .frame__in { justify-content: flex-end; align-items: flex-end; text-align: end; }
.f-svc--sand::after { background: radial-gradient(70% 80% at 50% 45%, rgb(255 255 255 / 0.22), transparent 70%); }

.f-svc--end .frame__in { align-items: flex-end; text-align: end; }

.f-svc--low .frame__in { justify-content: flex-end; }
.f-svc--low { background: radial-gradient(120% 90% at 85% 15%, #2A2024 0%, var(--gate) 60%); }

/* Clients */
.f-client { display: grid; place-items: center; }
/* Sized by area (--sa = sqrt of the logo's aspect, from build.py) so every
   client reads at the same weight; --oy is the per-logo nudge from content.json. */
.f-client img {
  width: min(68cqi, calc(var(--sa, 1) * 56cqmin)); height: auto;
  max-width: none; max-height: 66cqh; object-fit: contain; opacity: 0.94;
  transform: translateY(calc(var(--oy, 0) * 100%));
}

/* Listen */
.f-listen .frame__in { justify-content: center; }
.f-listen .f-title { color: var(--sc-ink); }
.f-listen .f-title::after { content: ""; display: block; width: 2.2ch; height: 0.12em; margin-top: 0.32em; background: var(--sc-accent); }

/* Close: the empty frame, lit. */
.f-close { overflow: visible; background: #0F0D10; }
/* The lamp is pushed to the trailing edge (it sits mid-frame in the still),
   so the headline has a dark ground of its own. */
.f-close__lamp {
  position: absolute; top: 0; inset-inline-start: 26%; width: 100%; height: 100%; max-width: none;
  object-fit: cover; object-position: 50% 50%;
  -webkit-mask-image: linear-gradient(to right, transparent 8%, #000 48%);
          mask-image: linear-gradient(to right, transparent 8%, #000 48%);
  opacity: 0.9;
}
[dir="rtl"] .f-close__lamp { transform: scaleX(-1); }
.f-close .frame__in { justify-content: center; align-items: flex-start; }
.f-close .f-title { max-width: 12ch; margin-bottom: clamp(16px, 4cqh, 32px); }
.f-contact { list-style: none; margin: clamp(16px, 4.5cqh, 36px) 0 0; padding: 0; display: grid; gap: 4px; font-size: clamp(14px, 1.75cqi, 17px); color: var(--sc-ink-soft); }
.f-contact a { color: var(--sc-ink); text-decoration: none; }
.f-contact a:hover { text-decoration: underline; }
.f-foot {
  position: absolute; top: calc(100% + var(--B) + clamp(14px, 3vh, 28px)); inset-inline: 0;
  display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap;
  font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
}
.f-foot a { color: var(--sc-ink); pointer-events: auto; }
.f-social { display: flex; flex-wrap: wrap; gap: 0.35rem 1rem; }
.f-foot small { font-size: inherit; margin-inline-start: auto; }
.f-foot__logo { display: block; width: 76px; color: var(--sc-ink); }
.f-foot__logo svg { width: 100%; height: auto; }
.f-foot__logo--ar { display: none; }
[lang="ar"] .f-foot__logo--ar { display: block; }
[lang="ar"] .f-foot__logo--en { display: none; }

/* The gate: a soft lamp and vignette around the locked frame. */
.gate {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 55% at 50% 50%, transparent 55%, rgb(12 10 14 / 0.55) 100%);
  opacity: 0;
}

/* -------------------------------------------------------------- mobile -- */
@media (max-width: 760px) {
  .hero { inset-inline: var(--sc-gutter); bottom: clamp(2rem, 7vh, 4rem); }
  .hero__h { font-size: clamp(1.9rem, 1.2rem + 3.6vw, 2.5rem); }
  .hero__p { font-size: var(--sc-t-sm); margin-block: var(--sc-3) var(--sc-5); }
  .peak { top: clamp(4.75rem, 11vh, 7rem); }
  .peak__h { font-size: clamp(1.7rem, 1.2rem + 2.6vw, 2.2rem); }
  .frame__in { inset: 8cqh 8cqi; }
  .f-title { font-size: clamp(28px, 11cqi, 48px); }
  .f-title--xl { font-size: clamp(32px, 13cqi, 56px); }
  .f-body { font-size: 15px; }
  html[lang="ar"] .f-body { font-size: 16px; }
  .f-close .frame__in { justify-content: flex-end; }
  /* Portrait frame: the lamp takes the top half, the type the bottom. */
  .f-close__lamp {
    inset: 0 0 auto 0; height: 52%; object-position: 47% 50%;
    -webkit-mask-image: linear-gradient(to top, transparent 0%, #000 45%);
            mask-image: linear-gradient(to top, transparent 0%, #000 45%);
  }
  .f-foot { gap: 0.75rem 1rem; }
  .f-foot small { margin-inline-start: 0; flex-basis: 100%; }
  .cta--bar { padding-inline: 0.85rem; }
}

/* ------------------------------------------------------ reduced motion --
   The camera does not travel. Frames stack in the gate and dissolve. */
.rm .strip__band { display: none; }
.rm .frame { left: calc(var(--W) / -2); }
.rm .f-foot { top: calc(100% + clamp(14px, 3vh, 28px)); }