/* ════════════════════════════════════════════════════════════════════════════
   home.css — the landing page only (main[data-page="home"]), 2026-09-19.

   The owner: the home page read as cluttered, and asked for far more, and far
   better, motion. Three rules keep that from becoming noise:
     1. Order first. One rhythm for every band, no outlined numerals behind the
        headings, every section carries content (Track record was a bare title).
     2. Motion explains. The hero assembles, the network draws itself, figures
        count up to the number the page states, logos travel, cards answer the
        pointer. Nothing moves that is not attached to something that matters.
     3. prefers-reduced-motion gets none of it (end of file). home-motion.js
        does the same check before it touches anything.
   Loaded after os.css; every selector is scoped to the home <main>.
   ════════════════════════════════════════════════════════════════════════════ */

main[data-page="home"] { --home-ease: cubic-bezier(.2, .8, .2, 1); --home-rise: 22px; }

/* ── 1 · order ─────────────────────────────────────────────────────────────── */
main[data-page="home"] .block[data-chapter]::before { display: none; }
main[data-page="home"] > .block { padding-block: clamp(48px, 7vw, 96px); }
main[data-page="home"] .sec-head { margin-bottom: clamp(20px, 3vw, 32px); }
main[data-page="home"] .sec-lead { max-width: 62ch; }
main[data-page="home"] #start-here { padding-top: clamp(8px, 2vw, 24px); }
main[data-page="home"] .portrait-card .v { display: block; line-height: 1.35; }

/* ── 2 · the hero assembles ─────────────────────────────────────────────────── */
@keyframes home-rise {
  from { opacity: 0; transform: translateY(var(--home-rise)); }
  to   { opacity: 1; transform: none; }
}
@keyframes home-float-in {
  from { opacity: 0; transform: translateY(28px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
main[data-page="home"] .hero-grid > div:first-child > * {
  animation: home-rise .9s var(--home-ease) both;
}
main[data-page="home"] .hero-grid > div:first-child > :nth-child(1) { animation-delay: .05s; }
main[data-page="home"] .hero-grid > div:first-child > :nth-child(2) { animation-delay: .15s; }
main[data-page="home"] .hero-grid > div:first-child > :nth-child(3) { animation-delay: .25s; }
main[data-page="home"] .hero-grid > div:first-child > :nth-child(4) { animation-delay: .4s; }
main[data-page="home"] .hero-grid > div:first-child > :nth-child(5) { animation-delay: .5s; }
main[data-page="home"] .hero-grid > div:first-child > :nth-child(6) { animation-delay: .62s; }
main[data-page="home"] .hero-grid > div:first-child > :nth-child(7) { animation-delay: .75s; }
main[data-page="home"] .portrait-card { animation: home-float-in 1.1s .35s var(--home-ease) both; }

/* the name: a slow sheen passes through it, the text stays solid underneath */
@keyframes home-sheen { from { background-position: 180% 0; } to { background-position: -80% 0; } }
/* os.css hides .hero h1 behind clip-path until ITS wipe animation opens it; the animation below
   replaces that one, so the clip must go too, or the name never shows (it did not, 2026-09-19). */
main[data-page="home"] .hero h1 { clip-path: none; }
main[data-page="home"] .hero h1 {
  background: linear-gradient(100deg, currentColor 0 40%, color-mix(in srgb, var(--os-accent-disp, #5fb3c9) 85%, #fff) 50%, currentColor 60% 100%);
  background-size: 250% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: home-rise .9s .25s var(--home-ease) both, home-sheen 6s 1.4s ease-in-out infinite;
}
/* the role line draws its own underline */
main[data-page="home"] .hero .role { position: relative; display: inline-block; }
main[data-page="home"] .hero .role::after {
  content: ""; position: absolute; inset-inline: 0; bottom: -4px; height: 2px; border-radius: 2px;
  background: linear-gradient(90deg, var(--os-accent-disp, #5fb3c9), transparent);
  transform: scaleX(0); transform-origin: left; animation: home-line 1.1s 1s var(--home-ease) forwards;
}
[dir="rtl"] main[data-page="home"] .hero .role::after { transform-origin: right; background: linear-gradient(270deg, var(--os-accent-disp, #5fb3c9), transparent); }
@keyframes home-line { to { transform: scaleX(1); } }

/* the network behind the hero draws itself, then keeps breathing */
@keyframes home-draw { from { stroke-dashoffset: 420; } to { stroke-dashoffset: 0; } }
@keyframes home-pulse { 0%, 100% { opacity: .55; transform: scale(1); } 50% { opacity: 1; transform: scale(1.6); } }
@keyframes home-breathe { 0%, 100% { transform: scale(1); opacity: .5; } 50% { transform: scale(1.08); opacity: .9; } }
main[data-page="home"] .hs-link { stroke-dasharray: 420; animation: home-draw 2.4s var(--home-ease) both; }
main[data-page="home"] .hs-link:nth-of-type(2) { animation-delay: .2s; }
main[data-page="home"] .hs-link:nth-of-type(3) { animation-delay: .4s; }
main[data-page="home"] .hs-link:nth-of-type(4) { animation-delay: .6s; }
main[data-page="home"] .hs-link:nth-of-type(5) { animation-delay: .8s; }
main[data-page="home"] .hs-node { transform-box: fill-box; transform-origin: center; animation: home-pulse 3.2s ease-in-out infinite; }
main[data-page="home"] .hs-node:nth-of-type(2n) { animation-delay: 1.1s; }
main[data-page="home"] .hs-node:nth-of-type(3n) { animation-delay: 2s; }
main[data-page="home"] .hs-ring, main[data-page="home"] .hs-hub { transform-box: fill-box; transform-origin: center; animation: home-breathe 5s ease-in-out infinite; }

/* the portrait answers the pointer (home-motion.js sets --rx / --ry) */
main[data-page="home"] .portrait-card {
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform .5s var(--home-ease), box-shadow .5s var(--home-ease);
  will-change: transform;
}
main[data-page="home"] .portrait-card:hover { box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6); }

/* ── 3 · Track record: figures and the logo strip ───────────────────────────── */
main[data-page="home"] .home-metrics { grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 14px; }
main[data-page="home"] .home-metrics .metric-tile {
  position: relative; overflow: hidden;
  transition: transform .45s var(--home-ease), border-color .45s var(--home-ease), box-shadow .45s var(--home-ease);
}
main[data-page="home"] .home-metrics .metric-tile::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(120deg, transparent 30%, color-mix(in srgb, var(--os-accent-disp, #5fb3c9) 16%, transparent) 50%, transparent 70%);
  transform: translateX(-120%); transition: transform 1.2s var(--home-ease);
}
main[data-page="home"] .home-metrics .metric-tile.in::before { transform: translateX(120%); }
main[data-page="home"] .home-metrics .metric-tile:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(0, 0, 0, .55); }
main[data-page="home"] .home-metrics .metric-value { font-size: clamp(1.35rem, 2vw, 1.75rem); white-space: normal; overflow-wrap: anywhere; letter-spacing: -.02em; line-height: 1.15; font-variant-numeric: tabular-nums; }

@keyframes home-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
main[data-page="home"] .logo-strip {
  direction: ltr; display: flex; overflow: hidden; gap: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
main[data-page="home"] .logo-strip ul {
  display: flex; align-items: center; gap: 14px; margin: 0; padding: 6px 7px; list-style: none; flex-shrink: 0;
  animation: home-marquee 48s linear infinite;
}
main[data-page="home"] .logo-strip:hover ul { animation-play-state: paused; }
main[data-page="home"] .logo-strip li {
  display: grid; place-items: center; width: 132px; height: 64px; flex: 0 0 auto;
  border-radius: 14px; background: #f5f2ec; border: 1px solid rgba(0, 0, 0, .06);
  transition: transform .35s var(--home-ease), box-shadow .35s var(--home-ease);
}
main[data-page="home"] .logo-strip li:hover { transform: translateY(-3px); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .5); }
main[data-page="home"] .logo-strip img { max-width: 104px; max-height: 40px; width: auto; height: auto; object-fit: contain; }
/* marks without a wordmark carry their brand name */
main[data-page="home"] .logo-strip li.named { width: auto; min-width: 132px; padding: 0 16px; grid-auto-flow: column; gap: 9px; }
main[data-page="home"] .logo-strip li.named img { max-width: 64px; max-height: 32px; }
/* tall, fine-lined marks read small at the shared cap: they get more room (owner: as large as Mokaab) */
main[data-page="home"] .logo-strip img:is([src*="strip/shalize"], [src*="strip/espahbod-khorshid"]) { max-height: 54px; max-width: 116px; }
/* the section has no numeral: its heading lines up with those that do (34px numeral + 16px gap) */
main[data-page="home"] #worked-with .sec-head > div { margin-inline-start: 50px; }
main[data-page="home"] .logo-strip li.named span { font: 700 .92rem/1 var(--font-sans, system-ui, sans-serif); color: #1d2b44; letter-spacing: .01em; white-space: nowrap; }
/* organisations he has worked with: two rows, opposite directions, larger white cards */
main[data-page="home"] .logo-strip--orgs li { width: 164px; height: 92px; background: #fff; }
main[data-page="home"] .logo-strip--orgs img { max-width: 132px; max-height: 62px; filter: grayscale(.35); opacity: .92; transition: filter .35s, opacity .35s; }
main[data-page="home"] .logo-strip--orgs li:hover img { filter: none; opacity: 1; }
main[data-page="home"] .logo-strip--orgs ul { animation-duration: 90s; }
main[data-page="home"] .logo-strip--orgs.rev ul { animation-direction: reverse; animation-duration: 100s; }

/* ── 4 · cards answer the pointer (home-motion.js sets --mx / --my) ─────────── */
main[data-page="home"] :is(#start-here, #what-i-do, #selected-work) .panel { position: relative; overflow: hidden; isolation: isolate; }
main[data-page="home"] :is(#start-here, #what-i-do, #selected-work) .panel::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%),
              color-mix(in srgb, var(--os-accent-disp, #5fb3c9) 18%, transparent), transparent 60%);
  transition: opacity .35s ease;
}
main[data-page="home"] :is(#start-here, #what-i-do, #selected-work) .panel:hover::after { opacity: 1; }
main[data-page="home"] :is(#start-here, #what-i-do, #selected-work) .panel {
  transition: transform .45s var(--home-ease), box-shadow .45s var(--home-ease), border-color .45s var(--home-ease);
}
main[data-page="home"] :is(#start-here, #what-i-do, #selected-work) .panel:hover {
  transform: translateY(-5px); box-shadow: 0 26px 60px -30px rgba(0, 0, 0, .6);
}
main[data-page="home"] .icon-box { transition: transform .5s var(--home-ease); }
main[data-page="home"] .panel:hover .icon-box { transform: rotate(-8deg) scale(1.08); }

/* staggered entrance for every grid of cards */
main[data-page="home"] .grid > .reveal:nth-child(2), main[data-page="home"] .metric-ribbon > .reveal:nth-child(2), main[data-page="home"] .steps > :nth-child(2) { transition-delay: .09s; }
main[data-page="home"] .grid > .reveal:nth-child(3), main[data-page="home"] .metric-ribbon > .reveal:nth-child(3), main[data-page="home"] .steps > :nth-child(3) { transition-delay: .18s; }
main[data-page="home"] .grid > .reveal:nth-child(4), main[data-page="home"] .metric-ribbon > .reveal:nth-child(4), main[data-page="home"] .steps > :nth-child(4) { transition-delay: .27s; }
main[data-page="home"] .grid > .reveal:nth-child(5), main[data-page="home"] .steps > :nth-child(5) { transition-delay: .36s; }
main[data-page="home"] .grid > .reveal:nth-child(6) { transition-delay: .45s; }

/* section headings rise as their band arrives (home-motion.js adds .is-in) */
main[data-page="home"] .sec-head { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--home-ease), transform .8s var(--home-ease); }
main[data-page="home"] .sec-head.is-in { opacity: 1; transform: none; }
html:not(.js-on) main[data-page="home"] .sec-head { opacity: 1; transform: none; }

/* ── 5 · the 5P steps light up in turn (home-motion.js moves .is-active) ────── */
main[data-page="home"] .steps .step { transition: transform .5s var(--home-ease), border-color .5s var(--home-ease), box-shadow .5s var(--home-ease), background-color .5s var(--home-ease); }
main[data-page="home"] .steps .step.is-active {
  transform: translateY(-6px);
  border-color: color-mix(in srgb, var(--os-accent-disp, #5fb3c9) 70%, transparent);
  box-shadow: 0 22px 50px -28px color-mix(in srgb, var(--os-accent-disp, #5fb3c9) 60%, transparent);
}

/* ── 6 · the closing band moves, slowly ─────────────────────────────────────── */
@keyframes home-drift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
main[data-page="home"] #next .band-charcoal { background-size: 220% 220%; animation: home-drift 16s ease-in-out infinite; }

/* reading progress along the top edge (home-motion.js adds the element) */
.home-progress {
  position: fixed; inset-block-start: 0; inset-inline: 0; height: 3px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, var(--os-accent-disp, #5fb3c9), #ee6414);
  transform: scaleX(var(--p, 0)); transform-origin: left;
}
[dir="rtl"] .home-progress { transform-origin: right; }

/* ── 7 · motion is optional ─────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  main[data-page="home"] *, main[data-page="home"] *::before, main[data-page="home"] *::after {
    animation: none !important; transition: none !important;
  }
  main[data-page="home"] .hero h1 { -webkit-text-fill-color: currentColor; background: none; }
  main[data-page="home"] .sec-head { opacity: 1; transform: none; }
  main[data-page="home"] .hs-link { stroke-dasharray: none; }
  main[data-page="home"] .logo-strip { overflow-x: auto; }
  main[data-page="home"] .logo-strip ul + ul { display: none; }
  .home-progress { display: none; }
}
@media print {
  main[data-page="home"] .logo-strip, .home-progress { display: none; }
  main[data-page="home"] .sec-head { opacity: 1; transform: none; }
}

/* touch screens: the hero network holds still and the logo rows keep moving (cheap transforms);
   the pulsing nodes and breathing rings repainted continuously under the finger (owner, 2026-09-19) */
@media (hover: none), (max-width: 779px) {
  main[data-page="home"] :is(.hs-node, .hs-ring, .hs-hub) { animation: none; }
  main[data-page="home"] .portrait-card { transform: none; will-change: auto; }
  /* the name: gradient-clipped text is not painted on some mobile Chrome builds once an
     animation touches it (owner saw an empty hero). Solid text on touch screens. */
  main[data-page="home"] .hero h1 { background: none; -webkit-text-fill-color: currentColor; }
  /* nothing in the hero waits on an animation to become visible on a phone */
  main[data-page="home"] :is(.hero-grid > div:first-child > *, .hero h1, .portrait-card) { animation: none; opacity: 1; }
}