/* =========================================================
   ATHAR · أثر — Home (index.html)
   Simple first (client, Oct 2026): eight short sections, one idea each, and two equal paths
   everywhere (13 Oct): adopt a tree for yourself, or give one as a gift.
     1 The mark   — the logo draws itself between «من الرمل / إلى الظل» (concept 2)
     2 The idea   — two lines and the one promise
     3 The tap    — card, phone and the living tree page, played on scroll (concept 3)
     4 Three steps · 5 Three ways to adopt (names and photos, no prices)
     6 ATHAR Zayed (the inscription band) · 7 Living map teaser · 8 Closing band
   Shared patterns (.steps, .gift-tiles, .id-form, .promise, .closing) come from
   athar.css and are only tuned here. Logical properties only, so Arabic mirrors; physical X
   offsets inside transforms are multiplied by --dir (1, or -1 in Arabic).
   ========================================================= */

body[data-page="home"] { --dir: 1; }
html[dir="rtl"] body[data-page="home"] { --dir: -1; }

.home .label { margin-block-end: .9rem; }
.home .label .ms { font-size: 1.35em; }
.home .h2 + .rule { margin-block: 1.3rem 1.2rem; }
.home .link { min-height: 44px; }

/* ---------- header over the cover: no frosted band until the page scrolls; the small logo
   waits until the big mark has left the screen (it never shows two logos at once) ---------- */
body[data-page="home"] .site-header:not(.scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
body[data-page="home"] .site-header .brand { transition: opacity .6s var(--ease), transform .6s var(--ease); }
html.js body[data-page="home"]:not(.home-mark-out) .site-header .brand { opacity: 0; transform: translateY(-6px); pointer-events: none; }
html.js body[data-page="home"]:not(.home-mark-out) .site-header .brand:focus-visible { opacity: 1; transform: none; }

/* =========================================================
   1 · THE MARK (hero)
   ========================================================= */
.home-hero {
  --mark-h: clamp(220px, calc(100vh - var(--header-h) - 340px), 600px);
  --hv: clamp(3.25rem, min(9vw, 20vh), 11.5rem);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 100vh;
  margin-block-start: calc(var(--header-h) * -1);
  padding-block-start: var(--header-h);
  padding-inline: var(--margin);
  display: grid;
  grid-template-rows: auto 1fr auto;
}
@supports (height: 100svh) {
  .home-hero {
    --mark-h: clamp(220px, calc(100svh - var(--header-h) - 340px), 600px);
    --hv: clamp(3.25rem, min(9vw, 20svh), 11.5rem);
    min-height: 100svh;
  }
}

/* the big Print-grey fingerprint bleeding off the top corner, as on the deck's cover */
.home-hero-wm {
  position: absolute; z-index: -1; pointer-events: none;
  inset-block-start: -12%; inset-inline-end: -8%;
  width: clamp(320px, 40vw, 780px); aspect-ratio: 149.6 / 189.1;
  background: url("/assets/logo/athar-mark-watermark.svg") center / contain no-repeat;
  opacity: .6;
}

.home-hero-top { display: flex; justify-content: flex-end; padding-block-start: clamp(.75rem, 2.2vh, 1.75rem); }
.home-hero-date { width: min(460px, 62%); margin-inline-end: calc(var(--margin) * -1); }
.home-hero-date::after { transform-origin: 0 50%; }
html[dir="rtl"] .home-hero-date::after { transform-origin: 100% 50%; }

.home-hero-mid { display: grid; align-content: center; justify-items: center; padding-block: clamp(.25rem, 1.4vh, 1.25rem); }

/* h1: [From sand]  [mark]  [to shade.] */
.home-cover {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  column-gap: clamp(1.5rem, 3.4vw, 4.5rem);
  width: 100%;
  max-width: 1760px;
  font-weight: 800;
}
.home-mark { position: relative; grid-column: 2; grid-row: 1; display: block; height: var(--mark-h); aspect-ratio: 214.896 / 269.236; }
.home-mark img { width: 100%; height: 100%; }
/* as the fingerprint closes, three hairline rings ripple out from its core, once */
.home-ripple { position: absolute; z-index: -1; inset-inline-start: 50%; inset-block-start: 52%; width: 0; height: 0; pointer-events: none; }
.home-ripple i { position: absolute; inset-inline-start: calc(var(--mark-h) * -.34); inset-block-start: calc(var(--mark-h) * -.34); width: calc(var(--mark-h) * .68); aspect-ratio: 1; border-radius: 50%; border: 1.5px solid rgba(104, 73, 37, .5); opacity: 0; }
.home-ripple.is-on i { animation: home-ripple 4.2s cubic-bezier(.15, .6, .25, 1) forwards; }
.home-ripple.is-on i:nth-child(2) { animation-delay: .55s; }
.home-ripple.is-on i:nth-child(3) { animation-delay: 1.1s; }
@keyframes home-ripple { 0% { opacity: 0; transform: scale(.85); } 12% { opacity: .9; } 100% { opacity: 0; transform: scale(3.6); } }

.home-word { grid-row: 1; display: flex; flex-direction: column; }
.home-w1 { grid-column: 1; align-items: end; text-align: end; }
.home-w2 { grid-column: 3; align-items: start; text-align: start; }
.home-word .lt { display: block; font-weight: 300; font-size: calc(var(--hv) * .36); line-height: 1; letter-spacing: -.01em; margin-block-end: .12em; }
.home-word .hv { display: block; font-weight: 800; font-size: var(--hv); line-height: .92; letter-spacing: -.035em; padding-block-end: .1em; }
.home-w1 .lt { color: var(--athar-green); }
.home-w1 .hv { color: var(--athar-brown); }
.home-w2 .lt { color: var(--athar-brown); }
.home-w2 .hv { color: var(--athar-green); }
html[lang="ar"] .home-word .lt, html[lang="ar"] .home-word .hv { font-family: var(--font-arabic-display); letter-spacing: 0; }
html[lang="ar"] .home-word .lt { font-weight: 400; font-size: calc(var(--hv) * .4); line-height: 1.3; }
html[lang="ar"] .home-word .hv { font-weight: 700; font-size: calc(var(--hv) * .84); line-height: 1.2; }

.home-hero-copy { display: grid; justify-items: center; text-align: center; }
.home-hero-copy .rule { margin-block: clamp(.8rem, 2.2vh, 1.5rem); }
.home-hero-lead { font-size: clamp(1.05rem, 1.25vw, 1.375rem); line-height: 1.45; color: var(--athar-green); max-width: 46ch; text-wrap: balance; }
html[lang="ar"] .home-hero-lead { line-height: 1.75; }
.home-hero-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-block-start: clamp(1rem, 2.6vh, 1.75rem); }

/* the deck's footer line: ↓ circle · tagline · hairline · "Have a card? Enter its ID" */
.home-hero-foot { display: flex; align-items: center; gap: 1rem 1.25rem; padding-block: clamp(.6rem, 1.8vh, 1.25rem) clamp(1rem, 2.6vh, 1.75rem); }
.home-hero-foot .arrow-circle { width: 48px; height: 48px; }
.home-hero-tagline { flex: none; margin: 0; }
.home-hair { flex: 1; height: 1px; background: var(--athar-brown); opacity: .4; min-width: 2rem; }
.home-id { grid-template-columns: auto minmax(0, 19rem); align-items: center; column-gap: .9rem; max-width: none; flex: none; }
.home-id > label { white-space: nowrap; }
.home-id > label .ms { color: var(--athar-green); }
.home-id .error { grid-column: 2; }
.home-id .row { background: var(--athar-ivory); }

/* ---------- cover choreography: JS adds .is-on in time with the drawing (any key, tap or wheel
   skips to the end). Without JS, or with reduced motion, everything is simply there. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js .home-hero [data-cue] {
    opacity: 0; transform: translateY(14px);
    transition: opacity 1.1s var(--ease), transform 1.1s var(--ease);
    animation: home-failsafe 0s 8s forwards; /* if the page script never runs, show everything */
  }
  .js .home-hero .home-word {
    clip-path: inset(0 0 100% 0); transform: translateY(.3em);
    transition: clip-path 1.25s cubic-bezier(.7, 0, .2, 1), transform 1.25s cubic-bezier(.2, .7, .2, 1), opacity .5s linear;
  }
  .js .home-hero .rule[data-cue] { transform: scaleX(0); transition: transform .9s cubic-bezier(.7, 0, .2, 1), opacity .3s; }
  .js .home-hero .home-hero-date[data-cue]::after { transform: scaleX(0); transition: transform 1.6s cubic-bezier(.7, 0, .2, 1) .2s; animation: home-failsafe 0s 8s forwards; }
  .js .home-hero [data-cue].is-on { opacity: 1; transform: none; }
  .js .home-hero .home-word.is-on { clip-path: inset(-12% -12% -25% -12%); }
  .js .home-hero .home-hero-date.is-on::after { transform: none; }
  .home-hero-wm { animation: home-wm 2.8s cubic-bezier(.2, .7, .2, 1) both; }
}
@keyframes home-failsafe { to { opacity: 1; transform: none; clip-path: none; } }
@keyframes home-wm { from { opacity: 0; transform: scale(1.06) rotate(-4deg); } to { opacity: .6; transform: none; } }

/* ---------- cover below 1100 px: the mark on top, the words beneath ---------- */
@media (max-width: 1099px) {
  .home-hero { --mark-h: clamp(170px, 30vh, 340px); --hv: clamp(2.6rem, min(13vw, 9vh), 6rem); }
  @supports (height: 100svh) { .home-hero { --mark-h: clamp(170px, 30svh, 340px); --hv: clamp(2.6rem, min(13vw, 9svh), 6rem); } }
  .home-cover { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; row-gap: 0; }
  .home-mark { grid-column: 1; grid-row: 1; margin-block-end: clamp(.75rem, 2.4vh, 1.5rem); }
  .home-word { grid-column: 1; flex-direction: row; align-items: baseline; justify-content: center; gap: .28em; text-align: center; }
  .home-w1 { grid-row: 2; }
  .home-w2 { grid-row: 3; }
  .home-word .lt { font-size: calc(var(--hv) * .5); margin: 0; }
  .home-word .hv { line-height: .98; padding-block-end: .06em; }
  html[lang="ar"] .home-word .lt { font-size: calc(var(--hv) * .55); }
  .home-hero-tagline, .home-hair { display: none; }
  .home-hero-foot { justify-content: space-between; }
}
@media (max-width: 760px) {
  .home-hero-foot { justify-content: center; }
  .home-hero-foot .arrow-circle { display: none; }
  .home-id { grid-template-columns: minmax(0, 1fr); row-gap: .5rem; width: min(100%, 26rem); }
  .home-id > label { justify-self: center; }
  .home-id .error { grid-column: 1; text-align: center; }
}
@media (max-width: 620px) {
  .home-hero-wm { display: none; }
  .home-hero-date { width: 78%; }
}
@media (max-width: 520px) {
  .home-hero-cta { width: 100%; flex-wrap: nowrap; gap: .6rem; }
  .home-hero-cta .btn { flex: 1 1 auto; padding-inline: .9rem; white-space: nowrap; }
}
/* the narrowest phones: "Adopt a tree" and "Give one as a gift" one above the other */
@media (max-width: 350px) {
  .home-hero-cta { flex-wrap: wrap; }
  .home-hero-cta .btn { flex-basis: 100%; }
}

/* =========================================================
   2 · THE IDEA
   ========================================================= */
.home-idea { padding-block: clamp(4rem, 8vw, 7rem); }
.home-idea-inner { max-width: 980px; display: grid; justify-items: center; text-align: center; }
.home-big { font-size: clamp(2.5rem, 5.2vw, 5rem); }
html[lang="ar"] .home-big { font-size: clamp(2.2rem, 4.4vw, 4.2rem); }
.home-idea-inner .rule { margin-inline: auto; }
.home-idea-text { font-size: clamp(1.06rem, 1.3vw, 1.25rem); line-height: 1.7; color: var(--athar-ink); max-width: 56ch; text-wrap: pretty; }
html[lang="ar"] .home-idea-text { line-height: 1.9; }
/* the promise keeps its icon beside the words: one line on wide screens, a start-aligned block
   when it wraps (centred text left the icon stranded at the edge) */
.home-idea .promise { margin-block-start: 1.75rem; margin-inline: auto; justify-content: center; text-align: start; max-width: 100%; }

/* =========================================================
   3 · THE TAP
   The stage, in phone heights (--ph), English (Arabic mirrors through logical insets and --dir):
     phone      x .06 → .54            y 0 → 1
     arch photo x .30 → 1.30           y -.11 → .93   (a sunset Ghaf: the real tree behind the page)
     card rest  x 1.02, y .54, w .30   (leans on the arch's edge)
     card tap   over the top of the phone
   Base styles are the FINAL state (no JS, reduced motion). With JS the scene waits in its
   "before" state (phone on the scan screen, no card) until it scrolls into view, then plays.
   ========================================================= */
.home-tap {
  --ph: clamp(300px, min(calc(100vh - 260px), 29vw), 600px);
  --bz: calc(var(--ph) * .017);
  --ring-y: 52.4%;
  --from-x: .12; --from-y: -1.1;
  --hov-x: -.79; --hov-y: -.615;
  --tap-x: -.80; --tap-y: -.57;
  --rest-rot: 7deg;
}
@supports (height: 100svh) { .home-tap { --ph: clamp(300px, min(calc(100svh - 260px), 29vw), 600px); } }
html[lang="ar"] .home-tap { --ring-y: 54%; }

.home-tap-grid {
  position: relative; z-index: 1;
  width: 100%; max-width: 1720px; margin-inline: auto; padding-inline: var(--margin);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  column-gap: clamp(2rem, 4vw, 5rem); align-items: center;
}
.home-tap-label { color: var(--athar-green); }
.home-tap-title { font-size: clamp(2.5rem, 4.6vw, 5.25rem); }
html[lang="ar"] .home-tap-title { font-size: clamp(2.2rem, 4vw, 4.5rem); }
.home-tap-title > span { white-space: nowrap; }
.home-tap-lead { max-width: 40ch; }
html[lang="ar"] .home-tap-lead { max-width: 42ch; }
.home-tap-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-block-start: clamp(1.5rem, 3vw, 2.25rem); }
.home-tap-fact { display: inline-flex; align-items: center; gap: .45rem; font-size: .9375rem; font-weight: 700; color: var(--athar-brown); }
html[lang="ar"] .home-tap-fact { font-size: 1rem; }
.home-tap-fact .ms { font-size: 1.2rem; color: var(--athar-green); }

.home-tap-stage { position: relative; display: grid; justify-items: center; align-content: center; padding-block: calc(var(--ph) * .13) 0; }
.tap-scene { position: relative; margin: 0; width: calc(var(--ph) * 1.4); height: var(--ph); }
.tap-scene span { display: block; }

/* the arch: a window onto the real tree */
.tap-arch, .tap-arch-line { position: absolute; z-index: 0; pointer-events: none; }
.tap-arch {
  inset-inline-start: calc(var(--ph) * .30); inset-block-start: calc(var(--ph) * -.11);
  width: var(--ph); height: calc(var(--ph) * 1.04);
  border-radius: calc(var(--ph) * .5) calc(var(--ph) * .5) calc(var(--ph) * .035) calc(var(--ph) * .035);
  overflow: hidden; isolation: isolate; background: #C98F4E;
  box-shadow: 0 calc(var(--ph) * .04) calc(var(--ph) * .1) rgba(104, 73, 37, .2);
}
.tap-arch img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
html[dir="rtl"] .tap-arch img { scale: -1 1; }
.tap-arch-line {
  inset-inline-start: calc(var(--ph) * .278); inset-block-start: calc(var(--ph) * -.132);
  width: calc(var(--ph) * 1.044); height: calc(var(--ph) * 1.084);
  border: 1px solid rgba(104, 73, 37, .32);
  border-radius: calc(var(--ph) * .522) calc(var(--ph) * .522) calc(var(--ph) * .055) calc(var(--ph) * .055);
}

/* centred on a point: inset-inline-start + translate(-50% · dir) */
.tap-wave, .tap-ground { position: absolute; border-radius: 50%; pointer-events: none; translate: calc(var(--dir) * -50%) -50%; }
.tap-wave {
  z-index: 1; inset-inline-start: calc(var(--ph) * .36); inset-block-start: calc(var(--ph) * .21);
  width: calc(var(--ph) * .24); aspect-ratio: 1;
  border: 2px solid var(--athar-green); opacity: 0;
}
.tap-wave.w2 { border-color: rgba(252, 248, 239, .95); }
.tap-wave.idle { border-color: var(--athar-tan); }
.tap-ground {
  z-index: 2; inset-inline-start: calc(var(--ph) * .30); inset-block-start: 100%;
  width: calc(var(--ph) * .44); height: calc(var(--ph) * .05);
  background: rgba(56, 40, 20, .3); filter: blur(calc(var(--ph) * .022));
}

/* the phone */
.tap-phone-pos { position: absolute; z-index: 3; inset-block: 0; inset-inline-start: calc(var(--ph) * .06); width: calc(var(--ph) * .4804); }
.tap-phone-float { height: 100%; }
.tap-phone {
  position: relative; height: 100%; padding: var(--bz);
  border-radius: calc(var(--ph) * .084); background: #24221E;
  box-shadow:
    inset 0 0 0 1.5px #615B51,
    inset 0 0 0 calc(var(--bz) * .55) #1A1916,
    0 calc(var(--ph) * .05) calc(var(--ph) * .09) rgba(56, 40, 20, .26),
    0 calc(var(--ph) * .012) calc(var(--ph) * .02) rgba(56, 40, 20, .16);
}
.tap-phone::before, .tap-phone::after { content: ""; position: absolute; width: 3px; border-radius: 2px; background: #3B3731; }
.tap-phone::before { inset-inline-end: -2px; inset-block-start: 24%; height: 10%; }
.tap-phone::after { inset-inline-start: -2px; inset-block-start: 19%; height: 13%; }
.tap-screen { position: relative; height: 100%; overflow: hidden; isolation: isolate; border-radius: calc(var(--ph) * .068); background: var(--athar-cream); }
.tap-screen img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.tap-s-tree { position: absolute; inset: 0; z-index: 2; clip-path: circle(150% at 50% var(--ring-y)); }
.tap-glow {
  position: absolute; z-index: 1; inset-inline: 0; margin-inline: auto;
  inset-block-start: calc(var(--ring-y) - var(--ph) * .105);
  width: calc(var(--ph) * .21); aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(63, 89, 59, .6), 0 0 calc(var(--ph) * .05) calc(var(--ph) * .012) rgba(63, 89, 59, .3);
  opacity: 0;
}
.tap-island { position: absolute; z-index: 3; inset-block-start: calc(var(--ph) * .011); inset-inline: 0; margin-inline: auto; width: 31%; height: calc(var(--ph) * .031); border-radius: 999px; background: #0E0E0C; }

/* the ATHAR NFC card (resting pose = final state) */
.tap-card {
  position: absolute; z-index: 4;
  width: calc(var(--ph) * .3); aspect-ratio: 54 / 85.6;
  inset-inline-start: calc(var(--ph) * 1.02); inset-block-start: calc(var(--ph) * .54);
  transform: rotate(calc(var(--dir) * var(--rest-rot)));
}
.tap-card-float, .tap-card-face { height: 100%; }
.tap-card-face {
  position: relative; display: grid !important; place-items: center; overflow: hidden;
  border-radius: calc(var(--ph) * .022);
  background: linear-gradient(155deg, #FFFCF6 0%, #F7F1E5 55%, #ECE4D3 100%);
  border: 1px solid rgba(104, 73, 37, .12);
  box-shadow: 0 calc(var(--ph) * .03) calc(var(--ph) * .06) rgba(56, 40, 20, .26), 0 2px 5px rgba(56, 40, 20, .14);
}
.tap-card-face::after {
  content: ""; position: absolute; inset: -30%;
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 42%, rgba(255, 255, 255, .8) 50%, rgba(255, 255, 255, 0) 58%);
  opacity: 0; pointer-events: none;
}
.tap-card-face img { width: 60%; height: auto; margin-block-end: 12%; }
.tap-card-nfc { position: absolute; inset-block-end: 6%; inset-inline-end: 9%; font-size: calc(var(--ph) * .034); color: var(--athar-green); }

/* floating chips: what the page tells you after the tap */
.tap-chip {
  position: absolute; z-index: 5;
  display: flex !important; align-items: center; gap: .65em;
  padding-block: .7em; padding-inline: .7em 1.15em;
  border-radius: 18px; background: rgba(255, 253, 248, .97);
  box-shadow: 0 16px 38px rgba(56, 40, 20, .18), 0 2px 6px rgba(56, 40, 20, .08);
  font-size: clamp(.75rem, calc(var(--ph) * .025), .95rem); line-height: 1.3; white-space: nowrap;
}
.tap-chip strong { display: block; color: var(--athar-green); font-weight: 800; }
.tap-chip small { display: block; color: var(--muted); font-size: .9em; }
.tap-chip-ic { width: 2.4em; height: 2.4em; border-radius: 50%; display: grid !important; place-items: center; background: var(--athar-green); color: var(--athar-cream); flex: none; }
.tap-chip-ic .ms { font-size: 1.3em; }
.tap-chip-ic.brown { background: var(--athar-brown); }
.tap-chip.ch1 { inset-inline-start: calc(var(--ph) * -.04); inset-block-start: calc(var(--ph) * .30); }
.tap-chip.ch2 { inset-inline-start: calc(var(--ph) * .68); inset-block-start: calc(var(--ph) * .05); }

.tap-replay {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  min-height: 44px; min-width: 44px; margin-block-start: calc(var(--ph) * .09); padding: .3rem 1rem;
  border-radius: var(--radius-pill); border: 1.5px solid var(--line); background: transparent;
  color: var(--athar-brown); font-weight: 700; font-size: .875rem; cursor: pointer;
  visibility: hidden; opacity: 0; transition: border-color .25s, background-color .25s;
}
.tap-replay:hover { border-color: var(--athar-brown); background: rgba(104, 73, 37, .05); }
.tap-replay .ms { font-size: 1.15rem; }

/* ---------- the choreography (only when motion is welcome; t = 0 when the stage scrolls in) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .home-tap .tap-arch img { animation: tap-zoom 3s cubic-bezier(.2, .7, .2, 1) both; }
  .home-tap .tap-card { animation: tap-card 2.7s cubic-bezier(.5, 0, .25, 1) .2s both; }
  .home-tap .tap-card-face { animation: tap-card-shadow 2.7s cubic-bezier(.5, 0, .25, 1) .2s both; }
  .home-tap .tap-card-face::after { animation: tap-sheen 1s ease-out 1.45s both; }
  .home-tap .tap-phone { animation: tap-bump .42s ease-out 1.47s both; }
  .home-tap .tap-glow { animation: tap-glow .9s ease-out 1.3s both; }
  .home-tap .tap-wave.w1 { animation: tap-wave 1.8s cubic-bezier(.1, .6, .3, 1) 1.47s; }
  .home-tap .tap-wave.w2 { animation: tap-wave 1.8s cubic-bezier(.1, .6, .3, 1) 1.65s; }
  .home-tap .tap-wave.w3 { animation: tap-wave 1.8s cubic-bezier(.1, .6, .3, 1) 1.83s; }
  .home-tap .tap-s-tree { animation: tap-reveal 1s cubic-bezier(.6, 0, .2, 1) 1.63s both; }
  .home-tap .tap-chip.ch1 { animation: tap-chip .7s cubic-bezier(.2, .9, .3, 1.2) 2.45s both, tap-bob 7s ease-in-out 3.3s infinite; }
  .home-tap .tap-chip.ch2 { animation: tap-chip .7s cubic-bezier(.2, .9, .3, 1.2) 2.8s both, tap-bob 7.5s ease-in-out 3.9s infinite; }
  /* idle life once the story has played */
  .home-tap .tap-phone-float { animation: tap-float 7s ease-in-out 3.5s infinite; }
  .home-tap .tap-card-float { animation: tap-card-float 6s ease-in-out 3.1s infinite; }
  .home-tap .tap-wave.idle { animation: tap-wave-idle 6.5s ease-out 4.9s infinite; }
  .home-tap-stage.is-on .tap-replay { animation: tap-fade .5s ease 3.2s both; }

  /* JS holds the scene until it is seen, pauses it off screen, and restarts it for "Replay" */
  .js .home-tap-stage:not(.is-on) *, .js .home-tap-stage:not(.is-on) *::after,
  .js .home-tap-stage.is-off *, .js .home-tap-stage.is-off *::after { animation-play-state: paused !important; }
  .home-tap-stage.is-reset .tap-scene *, .home-tap-stage.is-reset .tap-scene *::after { animation: none !important; }
}
@media (prefers-reduced-motion: reduce) { .tap-replay { display: none; } }

@keyframes tap-zoom { from { transform: scale(1.1); } to { transform: none; } }
/* the card glides in over the photo, hovers over the top of the phone, taps, then lifts away to lean on the arch */
@keyframes tap-card {
  0% { opacity: 0; transform: translate(calc(var(--dir) * var(--ph) * var(--from-x)), calc(var(--ph) * var(--from-y))) rotate(calc(var(--dir) * 30deg)) scale(1.1); }
  14% { opacity: 1; }
  44% { transform: translate(calc(var(--dir) * var(--ph) * var(--hov-x)), calc(var(--ph) * var(--hov-y))) rotate(calc(var(--dir) * -12deg)) scale(1.02); }
  50%, 60% { transform: translate(calc(var(--dir) * var(--ph) * var(--tap-x)), calc(var(--ph) * var(--tap-y))) rotate(calc(var(--dir) * -10deg)) scale(.93); }
  100% { opacity: 1; transform: rotate(calc(var(--dir) * var(--rest-rot))); }
}
@keyframes tap-card-shadow {
  0%, 40% { box-shadow: 0 calc(var(--ph) * .08) calc(var(--ph) * .12) rgba(56, 40, 20, .2), 0 4px 10px rgba(56, 40, 20, .1); }
  50%, 60% { box-shadow: 0 2px 6px rgba(56, 40, 20, .3), 0 0 0 rgba(56, 40, 20, 0); }
  100% { box-shadow: 0 calc(var(--ph) * .03) calc(var(--ph) * .06) rgba(56, 40, 20, .26), 0 2px 5px rgba(56, 40, 20, .14); }
}
@keyframes tap-sheen { 0% { opacity: 0; translate: calc(var(--dir) * -45%) 0; } 25% { opacity: 1; } 100% { opacity: 0; translate: calc(var(--dir) * 45%) 0; } }
@keyframes tap-bump { 0% { transform: none; } 35% { transform: translateY(3px) scale(.992); } 100% { transform: none; } }
@keyframes tap-glow { 0% { opacity: 0; transform: scale(.7); } 35% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.5); } }
@keyframes tap-wave { 0% { opacity: .9; scale: .6; } 100% { opacity: 0; scale: 6.5; } }
@keyframes tap-wave-idle { 0% { opacity: 0; scale: .8; } 8% { opacity: .55; } 45%, 100% { opacity: 0; scale: 5; } }
@keyframes tap-reveal { from { clip-path: circle(0% at 50% var(--ring-y)); } to { clip-path: circle(150% at 50% var(--ring-y)); } }
@keyframes tap-chip { from { opacity: 0; transform: translateY(14px) scale(.9); } to { opacity: 1; transform: none; } }
@keyframes tap-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes tap-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 calc(var(--ph) * -.012); } }
@keyframes tap-card-float { 0%, 100% { translate: 0 0; rotate: 0deg; } 50% { translate: 0 calc(var(--ph) * -.016); rotate: calc(var(--dir) * -1.5deg); } }
@keyframes tap-fade { from { visibility: hidden; opacity: 0; } to { visibility: visible; opacity: 1; } }

/* ---------- the tap: tablet and phone ---------- */
@media (max-width: 960px) {
  .home-tap { --ph: clamp(300px, 52vw, 520px); }
  .home-tap-grid { grid-template-columns: minmax(0, 1fr); row-gap: clamp(2.5rem, 6vw, 3.5rem); }
  .home-tap-title { font-size: clamp(2.6rem, 8vw, 4.4rem); }
  html[lang="ar"] .home-tap-title { font-size: clamp(2.3rem, 7vw, 3.9rem); }
}
@media (max-width: 620px) {
  /* phone: phone x .02 → .50 · arch x .20 → .98 · the card rests at x .70 */
  .home-tap {
    --ph: clamp(260px, calc(100vw - 2 * var(--margin)), 420px);
    --from-x: .06; --from-y: -1;
    --hov-x: -.52; --hov-y: -.615;
    --tap-x: -.53; --tap-y: -.57;
    --rest-rot: 6deg;
  }
  .home-tap-title { font-size: clamp(2.2rem, 10.4vw, 3.2rem); }
  html[lang="ar"] .home-tap-title { font-size: clamp(2rem, 9.4vw, 2.9rem); }
  .home-tap-stage { padding-block-start: calc(var(--ph) * .11); }
  .tap-scene { width: var(--ph); }
  .tap-phone-pos { inset-inline-start: calc(var(--ph) * .02); }
  .tap-ground { inset-inline-start: calc(var(--ph) * .26); }
  .tap-arch {
    inset-inline-start: calc(var(--ph) * .20); inset-block-start: calc(var(--ph) * -.08);
    width: calc(var(--ph) * .78); height: calc(var(--ph) * .98);
    border-radius: calc(var(--ph) * .39) calc(var(--ph) * .39) calc(var(--ph) * .03) calc(var(--ph) * .03);
  }
  .tap-arch-line {
    inset-inline-start: calc(var(--ph) * .182); inset-block-start: calc(var(--ph) * -.098);
    width: calc(var(--ph) * .816); height: calc(var(--ph) * 1.016);
    border-radius: calc(var(--ph) * .408) calc(var(--ph) * .408) calc(var(--ph) * .045) calc(var(--ph) * .045);
  }
  .tap-wave { inset-inline-start: calc(var(--ph) * .31); }
  .tap-card { inset-inline-start: calc(var(--ph) * .70); width: calc(var(--ph) * .27); }
  .tap-chip { font-size: .75rem; }
  .tap-chip.ch1 { inset-inline-start: calc(var(--ph) * -.02); inset-block-start: calc(var(--ph) * .30); }
  .tap-chip.ch2 { display: none !important; }
  .home-tap-cta .btn { flex: 1 1 auto; }
}

/* =========================================================
   4 · THREE STEPS  ·  5 · THREE WAYS TO ADOPT — shared section head: headline, then one line or link
   ========================================================= */
.home-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1rem clamp(2rem, 5vw, 5rem); margin-block-end: clamp(2rem, 4vw, 3.25rem); }
.home-head .rule { margin-block-end: 0; }
.home-head-link { white-space: nowrap; }
.home-head-text { max-width: 30ch; font-size: var(--fs-lead); line-height: 1.45; color: var(--athar-green); text-wrap: balance; }
html[lang="ar"] .home-head-text { line-height: 1.75; }
@media (max-width: 860px) {
  .home-head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .home-head-link { justify-self: start; }
}

/* the gift photos are product stills on cream: show each one whole, on a cream panel */
.home-tiles .gift-tile > .photo { background: var(--athar-cream); }
.home-tiles .gift-tile > .photo > img { object-fit: contain; padding: 5% 7%; }
/* no one-word last lines under the steps and the tiles */
.home-steps .steps p, .home-tiles .line { text-wrap: pretty; }
.home-gifts-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-block-start: clamp(1.75rem, 3vw, 2.5rem); padding-block-start: clamp(1.25rem, 2.5vw, 1.75rem); border-block-start: 1px solid var(--line); }
.home-gifts-foot p { color: var(--muted); font-weight: 600; }
@media (max-width: 520px) { .home-gifts-foot .btn { width: 100%; } }

/* =========================================================
   6 · ATHAR ZAYED — the heritage collection, set like an inscription.
   Client (13 Oct): «عظمو، اهتم فيو، ما متل باقي الصفحات، الكلمة كبيرة» — give it grandeur and
   care, unlike any other section; the name is big. Its own band on Earth Brown (no other home
   section uses it), centred like a monument so the name stands alone in both scripts:
     the collection line between two hairlines
     the name, fitted to the band (home.js sets --zw-fs; the clamp is the no-JS size):
       light cream "ATHAR" + heavy tan "Zayed" with the deck's fingerprint-line texture
     limited · numbered · by auction
     one line naming the three places (zayed.html shows them)
     the quote in its own quotation marks, with the deck's attribution and flag rule (slide 5)
     the two next steps, then the slide-12 tagline between two hairlines.
   No photograph (leadership images need a licence; the name is the image here), no watermark,
   no price.
   ========================================================= */
.home-zayed {
  --zw-max: 15rem;
  background: var(--athar-brown); color: var(--athar-cream);
  padding-block: clamp(4.5rem, 9vw, 8.5rem) clamp(3.5rem, 6vw, 5.5rem);
  text-align: center;
}
html[lang="ar"] .home-zayed { --zw-max: 13.5rem; }
/* no hairline between this band and its neighbours */
.home-zayed::before, .home-zayed + .section::before { content: none !important; }
.home-zayed :focus-visible { outline-color: var(--athar-cream); }

/* the collection line, and the tagline that closes the band, each between two hairlines */
.home-zayed-kicker, .home-zayed-tagline { display: flex; align-items: center; justify-content: center; gap: clamp(1rem, 2vw, 1.5rem); }
.home-zayed-kicker::before, .home-zayed-kicker::after,
.home-zayed-tagline::before, .home-zayed-tagline::after { content: ""; flex: 1 1 0; min-width: 1.5rem; height: 1px; background: var(--athar-tan); opacity: .5; }
.home-zayed-kicker { max-width: 46rem; margin-inline: auto; }
.home .home-zayed-kicker .label { flex: none; margin: 0; color: var(--athar-sand); }

/* the name */
.home-zayed-word {
  font-size: var(--zw-fs, clamp(3.25rem, 12.5vw, var(--zw-max)));
  margin-block-start: clamp(1.5rem, 3vw, 2.75rem);
  line-height: .9; white-space: nowrap; font-weight: 800;
}
.zw-fit { display: inline-block; padding-block-end: .08em; }
.zw-a, .zw-z { display: inline-block; }
.zw-a { font-weight: 300; color: var(--athar-cream); letter-spacing: -.02em; }
.zw-z {
  color: var(--athar-tan); letter-spacing: -.04em; padding-inline-end: .04em;
  /* the deck's fingerprint-line texture inside the heavy word (README §4.2) */
  background: repeating-linear-gradient(-58deg, rgba(255, 255, 255, 0) 0 .07em, rgba(255, 255, 255, .17) .07em .11em), currentColor;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.zw-z *::selection { -webkit-text-fill-color: var(--athar-brown); }
html[lang="ar"] .home-zayed-word { line-height: 1.25; }
html[lang="ar"] .zw-a, html[lang="ar"] .zw-z { font-family: var(--font-arabic-display); letter-spacing: 0; }
html[lang="ar"] .zw-a { font-weight: 300; }
html[lang="ar"] .zw-z { font-weight: 700; padding-inline-end: 0; }

/* sand, not tan: tan on Earth Brown is 3.9:1, too low for small text (it stays for the big name and the rules) */
.home-zayed-seal { margin-block-start: clamp(.9rem, 1.8vw, 1.5rem); font-weight: 800; font-size: .875rem; letter-spacing: .24em; text-transform: uppercase; color: var(--athar-sand); }
html[lang="ar"] .home-zayed-seal { letter-spacing: 0; text-transform: none; font-size: 1.0625rem; font-weight: 600; }

.home-zayed-lead { max-width: 60ch; margin: clamp(1.75rem, 3.2vw, 2.75rem) auto 0; font-size: clamp(1.125rem, 1.45vw, 1.45rem); line-height: 1.55; color: var(--athar-sand); text-wrap: balance; }
html[lang="ar"] .home-zayed-lead { max-width: 44ch; line-height: 1.9; }

/* the quote: a short tan rule above, the words in their own quotation marks, the attribution
   ("The late" light, the name bold) over the deck's flag rule, which spans exactly the name */
.home-zayed-quote { margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
.home-zayed-quote::before { content: ""; display: block; width: var(--rule-short); height: var(--rule-weight); margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); border-radius: 2px; background: var(--athar-tan); }
.home-zayed-quote blockquote { margin: 0; }
.home-zayed-quote blockquote p { max-width: 30ch; margin-inline: auto; font-weight: 800; font-size: clamp(1.9rem, 3.4vw, 3.5rem); line-height: 1.12; letter-spacing: -.02em; color: var(--athar-cream); text-wrap: balance; }
html[lang="ar"] .home-zayed-quote blockquote p { max-width: 22ch; font-family: var(--font-arabic-display); font-weight: 700; letter-spacing: 0; line-height: 1.5; font-size: clamp(1.8rem, 3vw, 3rem); }
.home-zayed-quote figcaption { display: inline-grid; justify-items: center; gap: .15rem; max-width: 100%; margin-block-start: clamp(1.5rem, 3vw, 2.25rem); }
.home-zayed-quote figcaption .lt { font-weight: 300; font-size: clamp(1.05rem, 1.4vw, 1.3rem); color: var(--athar-sand); }
.home-zayed-quote figcaption strong { font-weight: 800; font-size: clamp(1.1rem, 1.6vw, 1.5rem); line-height: 1.3; color: var(--athar-cream); }
html[lang="ar"] .home-zayed-quote figcaption .lt { font-weight: 400; }
html[lang="ar"] .home-zayed-quote figcaption strong { font-family: var(--font-arabic-display); font-weight: 700; line-height: 1.6; }
/* the UAE flag rule under the name, as on the deck (the flag keeps its own orientation) */
.home-zayed-flag { justify-self: stretch; display: grid; grid-template-columns: .55rem 1fr; height: 10px; margin-block-start: .7rem; direction: ltr; border-radius: 2px; overflow: hidden; }
.home-zayed-flag > i { display: block; background: #EF3340; }
.home-zayed-flag > b { display: grid; grid-template-rows: repeat(3, 1fr); }
.home-zayed-flag > b > i { display: block; }
.home-zayed-flag > b > i:nth-child(1) { background: #009739; }
.home-zayed-flag > b > i:nth-child(2) { background: #FFFFFF; }
.home-zayed-flag > b > i:nth-child(3) { background: #1C1C18; }

.home-zayed-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; margin-block-start: clamp(2.25rem, 4vw, 3rem); }
.home-zayed-actions .btn.cream { --fg: var(--athar-brown); }

.home-zayed-tagline { margin-block-start: clamp(2.75rem, 5vw, 4.5rem); color: var(--athar-sand); }
.home-zayed-tagline > span { flex: none; }
.home .home-zayed-tagline b { color: var(--athar-cream); }

/* choreography: site.js adds .in when the band scrolls in. The hairlines draw out from the
   collection line, the name rises out of a cut word by word, then the rest settles in reading
   order and the flag rule draws from its red band. Without JS or with reduced motion it is static.
   Each step's delay is a custom property read by its own transition (--zd for the copy, --zl for
   the hairlines), so no selector has to out-rank another to set it. */
.home-zayed-seal { --zd: .6s; }
.home-zayed-lead { --zd: .75s; }
.home-zayed-quote { --zd: .9s; }
.home-zayed-actions { --zd: 1.05s; }
.home-zayed-tagline { --zd: 1.2s; --zl: 1.3s; }
@media (prefers-reduced-motion: no-preference) {
  .js .home-zayed-stage.reveal:not(.in) { opacity: 1; transform: none; }
  .js .home-zayed-stage :is(.home-zayed-kicker, .home-zayed-tagline)::before,
  .js .home-zayed-stage :is(.home-zayed-kicker, .home-zayed-tagline)::after { transform: scaleX(0); transition: transform 1.4s cubic-bezier(.7, 0, .2, 1) var(--zl, .1s); }
  /* each hairline grows away from the words it frames */
  .js .home-zayed-stage :is(.home-zayed-kicker, .home-zayed-tagline)::before { transform-origin: 100% 50%; }
  .js .home-zayed-stage :is(.home-zayed-kicker, .home-zayed-tagline)::after { transform-origin: 0 50%; }
  html.js[dir="rtl"] .home-zayed-stage :is(.home-zayed-kicker, .home-zayed-tagline)::before { transform-origin: 0 50%; }
  html.js[dir="rtl"] .home-zayed-stage :is(.home-zayed-kicker, .home-zayed-tagline)::after { transform-origin: 100% 50%; }
  .js .home-zayed-stage :is(.zw-a, .zw-z) {
    clip-path: inset(0 -10% 100% -10%); transform: translateY(.35em);
    transition: clip-path 1.3s cubic-bezier(.7, 0, .2, 1) var(--zw-d, 0s), transform 1.3s cubic-bezier(.2, .7, .2, 1) var(--zw-d, 0s);
  }
  .js .home-zayed-stage .zw-z { --zw-d: .25s; }
  .js .home-zayed-stage :is(.home-zayed-kicker .label, .home-zayed-seal, .home-zayed-lead, .home-zayed-quote, .home-zayed-actions, .home-zayed-tagline > span) {
    opacity: 0; transform: translateY(16px);
    transition: opacity 1s var(--ease) var(--zd, 0s), transform 1s var(--ease) var(--zd, 0s);
  }
  .js .home-zayed-stage .home-zayed-flag { transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.2s cubic-bezier(.7, 0, .2, 1) 1.5s; }
  .js .home-zayed-stage.in :is(.home-zayed-kicker, .home-zayed-tagline)::before,
  .js .home-zayed-stage.in :is(.home-zayed-kicker, .home-zayed-tagline)::after,
  .js .home-zayed-stage.in .home-zayed-flag { transform: none; }
  .js .home-zayed-stage.in :is(.zw-a, .zw-z) { clip-path: inset(-20% -10% -30% -10%); transform: none; }
  .js .home-zayed-stage.in :is(.home-zayed-kicker .label, .home-zayed-seal, .home-zayed-lead, .home-zayed-quote, .home-zayed-actions, .home-zayed-tagline > span) { opacity: 1; transform: none; }
}

@media (max-width: 620px) {
  .home-zayed { --zw-max: 8rem; }
  html[lang="ar"] .home-zayed { --zw-max: 9rem; }
  /* phones: the two Latin words stack, each as wide as the screen allows; أثر زايد stays on one line */
  html[lang="en"] .zw-a, html[lang="en"] .zw-z { display: block; }
  .home-zayed-seal { font-size: .8125rem; letter-spacing: .14em; }
  .home-zayed-actions .btn { flex: 1 1 100%; }
  .home-zayed-tagline::before, .home-zayed-tagline::after { display: none; }
}

/* =========================================================
   7 · THE LIVING MAP (small)
   ========================================================= */
.home-map {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) auto; align-items: center;
  gap: clamp(1.25rem, 3vw, 3rem);
  padding: clamp(1rem, 1.6vw, 1.25rem); padding-inline-end: clamp(1.25rem, 3vw, 2.75rem);
  border-radius: 32px; background: var(--athar-ivory); box-shadow: var(--shadow-card);
}
/* a quiet map: a dot grid on sand with the three kinds of pin */
.home-map-art {
  position: relative; align-self: stretch; min-height: 180px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(circle, rgba(104, 73, 37, .22) 1.2px, transparent 1.6px) 0 0 / 18px 18px, var(--athar-sand);
}
.home-map-art .pin {
  position: absolute; inset-inline-start: var(--x); inset-block-start: var(--y);
  width: 18px; height: 18px; margin-inline-start: -9px; margin-block-start: -9px;
  border-radius: 50%; background: var(--athar-green); border: 3px solid var(--athar-ivory);
  box-shadow: 0 4px 12px rgba(28, 22, 14, .25);
}
.home-map-art .pin.adopted { background: var(--athar-brown); }
.home-map-art .pin.zayed { background: var(--athar-tan); }
.home-map-art .pin.pulse::after { content: ""; position: absolute; inset: -9px; border-radius: 50%; border: 2px solid var(--athar-green); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .home-map-art .pin.pulse::after { animation: home-pin 2.6s var(--ease) infinite; }
}
@keyframes home-pin { 0% { opacity: .8; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }
.home-map-copy { padding-block: .75rem; }
.home-map-copy .label { margin-block-end: .5rem; }
.home-map-copy .label .ms { color: var(--athar-green); }
.home-map-title { font-weight: 800; color: var(--athar-green); font-size: clamp(1.5rem, 2.3vw, 2.1rem); line-height: 1.1; letter-spacing: -.015em; }
html[lang="ar"] .home-map-title { font-family: var(--font-arabic-display); font-weight: 700; letter-spacing: 0; line-height: 1.35; }
.home-map-copy p:not(.label) { margin-block-start: .4rem; color: var(--muted); }
.home-map-btn { white-space: nowrap; }
@media (max-width: 960px) {
  .home-map { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); }
  .home-map-art { grid-row: span 2; }
  .home-map-btn { justify-self: start; }
}
@media (max-width: 620px) {
  .home-map { grid-template-columns: minmax(0, 1fr); padding-inline-end: clamp(1rem, 1.6vw, 1.25rem); }
  .home-map-art { grid-row: auto; min-height: 0; aspect-ratio: 16 / 7; }
  .home-map-copy { padding-inline: .5rem; padding-block: 0; }
  .home-map-btn { justify-self: stretch; margin: 0 .5rem .5rem; }
}

/* =========================================================
   8 · CLOSING — the white mark draws itself above «معاً، نزرع أثراً يدوم»
   ========================================================= */
.home-closing { padding-block: clamp(5rem, 9vw, 8rem); }
.home-closing-logo { --logo-w: clamp(110px, 11vw, 150px); width: var(--logo-w); height: auto; aspect-ratio: 214.896 / 269.236; object-fit: contain; margin: 0 auto clamp(1.5rem, 3vw, 2.25rem); }
/* the static logo has a tighter viewBox than the drawing (8 units on every side of 214.896): pad it
   by that share of its OWN width so the swap does not jump (a % padding would follow the shell's
   width and shrink the logo to a third) */
.home-closing-logo.is-static { padding: calc(var(--logo-w) * .0372); }
.home-closing-title {
  font-family: var(--font-arabic-display); font-weight: 700;
  font-size: clamp(2.6rem, 6.4vw, 6.25rem); line-height: 1.25;
  color: var(--athar-cream); text-wrap: balance;
}
.home-closing-title span { color: var(--athar-sand); }
.home-closing .lead { max-width: 40ch; }