/* ════════════════════════════════════════════════════════════════════
   HERO V3 — Dark Editorial (BrandFirst homepage hero)
   BEM block: .hero-v3
   Pencil source: WUJCW (1440), l5Qi9 (768), zV6mV (390)

   Token discipline:
     · Colours  → --primary-* + --secondary + --cloud-linen (oklch via tokens)
     · Sizes    → --space-*, --text-*, --heading-*, --line-*, --radius-*
     · Tracking → --tracking-*; Leading → --leading-*

   v2 hero (.hero) preserved untouched as fallback.
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── Section frame
     .section primitive owns padding-block + padding-inline (--gutter).
     We only override padding-block here because hero is hero-tall. */
  .hero-v3.section {
    padding-block: var(--space-l);
  }

  .hero-v3 {
    min-block-size: calc(100dvh - var(--header-height));
    display: flex;
    flex-direction: column;
    position: relative;
    inline-size: 100%;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;

    /* Velvet ink ground — primary scale */
    background-color: var(--primary-ultra-dark);
    background-image:
      radial-gradient(
        ellipse 90% 110% at 22% 42%,
        var(--primary-semi-dark) 0%,
        transparent 55%
      ),
      radial-gradient(
        ellipse 70% 90% at 85% 60%,
        color-mix(in oklch, var(--primary) 50%, transparent) 0%,
        transparent 60%
      );
  }

  .hero-v3__container {
    position: relative;
    z-index: 1;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    inline-size: 100%;
    gap: var(--container-gap);
  }


  /* ── Top header band: locator + edge marginalia ──────────────── */

  /* Mobile-first: head stacks vertically so neither the locator nor the
     edge meta has to compete for a 360px row. Source order puts edge meta
     above the locator. At tablet+ they sit on a single baseline-aligned
     row (visual order flipped via order: properties). */
  .hero-v3__head {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
    inline-size: 100%;
  }

  .hero-v3__locator {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
  }

  /* Eyebrow uses canonical brand-eyebrow component with --soft variant +
     status_dot='live'. Component owns dash, dot, and text styling — the
     section only owns layout. */


  /* Edge marginalia — bone-tinted on dark.
     Mobile-first: inline row (city · time) so it never overflows even
     at 360px. Tablet+ stacks vertically and right-aligns to the head row. */
  .hero-v3__edge-meta {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--space-2xs);
    text-align: start;
    flex-shrink: 0;
    inline-size: 100%;
  }

  /* Mobile separator dot between city and time when inline. */
  .hero-v3__edge-meta-city + .hero-v3__edge-meta-time::before {
    content: "·";
    margin-inline-end: var(--space-2xs);
    color: color-mix(in oklch, var(--cloud-linen) 30%, transparent);
  }

  .hero-v3__edge-meta-city {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    text-transform: uppercase;
    color: color-mix(in oklch, var(--cloud-linen) 80%, transparent);
    line-height: var(--leading-snug);
  }

  .hero-v3__edge-meta-time {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-wide-caps);
    color: color-mix(in oklch, var(--cloud-linen) 50%, transparent);
    font-variant-numeric: tabular-nums;
    line-height: var(--leading-snug);
  }


  /* ── Headline ─────────────────────────────────────────────────── */

  .hero-v3__hl {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    font-family: var(--font-heading);
    line-height: var(--leading-crushed);
    letter-spacing: var(--tracking-tight);
    text-wrap: balance;
  }

  .hero-v3__hl-line {
    display: block;
    overflow-wrap: break-word;
  }

  .hero-v3__hl-word { display: inline; }

  .hero-v3__hl-line--multi .hero-v3__hl-word + .hero-v3__hl-word::before {
    content: " ";
    white-space: pre;
  }

  /* Lead caps — bone. Mobile uses the editorial hero token so single
     words (BRAND, MOVE, MARKETS) fill the 360px viewport per Pencil
     zV6mV. Tablet/desktop fall through to the normal heading scale. */
  .hero-v3__hl-line--lead {
    font-size: var(--heading-hero-editorial);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-tight);
    color: var(--cloud-linen);
    text-transform: uppercase;
  }

  /* Italic mid line — Fraunces, primary-ultra-light (clean cool tone,
     no transparency — transparency on dark grounds reads muddy). */
  .hero-v3__hl-line--italic {
    font-family: var(--font-italic-display);
    font-size: var(--heading-2xl);
    font-style: italic;
    font-weight: var(--weight-regular);
    letter-spacing: var(--tracking-tight);
    color: var(--primary-ultra-light);
    text-transform: none;
    font-optical-sizing: auto;
  }

  /* Climax caps — ember */
  .hero-v3__hl-line--climax {
    font-size: var(--heading-hero-editorial);
    font-weight: var(--weight-extrabold);
    letter-spacing: var(--tracking-tight);
    color: var(--secondary);
    text-transform: uppercase;
  }

  /* Multi-word stacked headlines: long words (EXPERIENCES, MARKETS)
     drop to --heading-display so they fit 360px content width while
     still reading dominant against the lead. */
  .hero-v3__hl-line--lead.hero-v3__hl-line--multi   .hero-v3__hl-word:not(:first-child),
  .hero-v3__hl-line--climax.hero-v3__hl-line--multi .hero-v3__hl-word:not(:first-child) {
    font-size: var(--heading-display);
  }


  /* ── Foot band: body copy + CTA ──────────────────────────────── */

  /* Mobile-first: single column, CTA full-width below body. */
  .hero-v3__foot {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: var(--space-m);
    inline-size: 100%;
  }

  .hero-v3__cta-wrap .brand-cta {
    inline-size: 100%;
  }

  .hero-v3__cta-wrap .brand-cta__label {
    flex: 1 1 auto;
  }

  /* Body copy — bone @ 80% */
  .hero-v3__body {
    margin: 0;
    max-inline-size: var(--text-width-s);
    font-family: var(--font-body);
    font-size: var(--text-m);
    font-weight: var(--weight-medium);
    line-height: var(--leading-normal);
    color: color-mix(in oklch, var(--cloud-linen) 80%, transparent);
  }


  /* ── Architectural blueprint grid ──────────────────────────────
     90px module hairlines on the velvet ground.

     · Base grid lines (background-image): bone @ 4% — the quiet matrix
     · Centre vertical: bone @ 7% — pivot reference axis (slightly stronger)
     · Six surface tiles in primary-family with three opacity tiers
       carrying depth (faint / mid / strong) — no colour shifts
     · Two shimmer lines that pulse slowly via opacity (no colour change)

     Token discipline: --primary-ultra-light + --cloud-linen only;
                       all variation comes from opacity. */

  .hero-v3__grid {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    overflow: hidden;
    background-image:
      linear-gradient(
        to right,
        color-mix(in oklch, var(--cloud-linen) 4%, transparent) 0,
        color-mix(in oklch, var(--cloud-linen) 4%, transparent) var(--line-thin),
        transparent var(--line-thin)
      ),
      linear-gradient(
        to bottom,
        color-mix(in oklch, var(--cloud-linen) 4%, transparent) 0,
        color-mix(in oklch, var(--cloud-linen) 4%, transparent) var(--line-thin),
        transparent var(--line-thin)
      );
    background-size: var(--module-grid) var(--module-grid);
  }

  /* Centre vertical — slightly stronger as the pivot reference axis. */
  .hero-v3__grid-line--centre {
    position: absolute;
    inset-block: 0;
    inset-inline-start: 50%;
    inline-size: var(--line-thin);
    background-color: color-mix(in oklch, var(--cloud-linen) 7%, transparent);
  }


  /* ── Surface tiles — atmospheric depth (no decoration on its own) ──
     V2 placement reference; primary-family only; opacity tiers carry
     the visual hierarchy. Tiles sit BEHIND the headline (z-index 0) and
     never cross the .hero-v3__container (z-index 1). */

  .hero-v3__tile {
    position: absolute;
    inline-size: var(--module-grid);
    block-size: var(--module-grid);
    background-color: var(--primary-ultra-light);
    /* Tile depth via opacity — never via colour shifts. */
    opacity: 0.04;
  }

  .hero-v3__tile--faint  { opacity: 0.03; }
  .hero-v3__tile--mid    { opacity: 0.05; }
  .hero-v3__tile--strong { opacity: 0.07; }

  /* Top-right cluster (3 tiles, irregular) */
  .hero-v3__tile--tr-1 {
    inset-block-start: 0;
    inset-inline-end: calc(var(--module-grid) * 2);
  }
  .hero-v3__tile--tr-2 {
    inset-block-start: var(--module-grid);
    inset-inline-end: var(--module-grid);
  }
  .hero-v3__tile--tr-3 {
    inset-block-start: calc(var(--module-grid) * 2);
    inset-inline-end: 0;
    inline-size: calc(var(--module-grid) * 2);   /* wider tile breaks pattern */
  }

  /* Mid-right vertical pair */
  .hero-v3__tile--mid-r {
    inset-block-start: 50%;
    inset-inline-end: 0;
    block-size: calc(var(--module-grid) * 2);
  }

  /* Bottom anchors */
  .hero-v3__tile--bl {
    inset-block-end: 0;
    inset-inline-start: 0;
  }
  .hero-v3__tile--br {
    inset-block-end: 0;
    inset-inline-end: 0;
    inline-size: calc(var(--module-grid) * 2);
  }


  /* ── Shimmer lines — slow opacity pulse, no colour shift ──────
     Two hairlines (one vertical, one horizontal) breathe in/out.
     Subliminal — visitors register motion without seeing decoration. */

  .hero-v3__shimmer {
    position: absolute;
    background-color: color-mix(in oklch, var(--cloud-linen) 12%, transparent);
    opacity: 0;
    will-change: opacity;
    animation: hero-v3-shimmer 6s var(--ease-in-out) infinite;
  }

  /* Vertical shimmer — sits on the third grid column from the left. */
  .hero-v3__shimmer--v {
    inset-block: 0;
    inset-inline-start: calc(var(--module-grid) * 3);
    inline-size: var(--line-thin);
  }

  /* Horizontal shimmer — sits on the headline-baseline grid row.
     Phase-offset so the two lines breathe asynchronously. */
  .hero-v3__shimmer--h {
    inset-inline: 0;
    inset-block-start: calc(var(--module-grid) * 5);
    block-size: var(--line-thin);
    animation-delay: 3s;
  }

  @keyframes hero-v3-shimmer {
    0%, 100% { opacity: 0; }
    50%      { opacity: 1; }
  }

  @media (prefers-reduced-motion: reduce) {
    .hero-v3__shimmer { animation: none; }
  }


  /* ── Mobile default: words in a multi-word line stack vertically ── */

  .hero-v3__hl {
    gap: var(--space-3xs);
  }
  .hero-v3__hl-line--multi {
    display: flex;
    flex-direction: column;
  }
  .hero-v3__hl-line--multi .hero-v3__hl-word + .hero-v3__hl-word::before {
    content: none;
  }

  /* Mobile: hide blueprint grid (cramped at small widths). */
  .hero-v3__grid { display: none; }


  /* ── Tablet (≥ 48em) — words inline, head returns to row, larger headings ─ */

  @media (min-width: 48em) {
    /* Head returns to a single baseline-aligned row at tablet+. */
    .hero-v3__head {
      flex-direction: row;
      align-items: end;
      justify-content: space-between;
      gap: var(--space-m);
    }

    /* Source order is edge-meta → locator (so mobile column shows time
       above the partnership line). At tablet+ flip the visual order so
       locator sits left and edge-meta sits right (per Pencil l5Qi9). */
    .hero-v3__locator   { order: 1; }
    .hero-v3__edge-meta { order: 2; }

    /* Edge meta stacks vertically again (city over time, right-aligned). */
    .hero-v3__edge-meta {
      flex-direction: column;
      align-items: flex-end;
      gap: var(--space-3xs);
      text-align: end;
      inline-size: auto;
    }

    /* Drop the inline separator dot — only used on mobile. */
    .hero-v3__edge-meta-city + .hero-v3__edge-meta-time::before {
      content: none;
    }

    .hero-v3__hl {
      gap: var(--space-2xs);
    }
    /* Words flow inline again at tablet+ */
    .hero-v3__hl-line--multi {
      display: block;
    }
    .hero-v3__hl-line--multi .hero-v3__hl-word + .hero-v3__hl-word::before {
      content: " ";
      white-space: pre;
    }
    /* No second-word down-notch — only mobile */
    .hero-v3__hl-line--lead.hero-v3__hl-line--multi   .hero-v3__hl-word:not(:first-child),
    .hero-v3__hl-line--climax.hero-v3__hl-line--multi .hero-v3__hl-word:not(:first-child) {
      font-size: inherit;
    }

    /* Lead/climax stay on --heading-hero-editorial (clamps up naturally
       to 9rem at desktop). Italic upgrades to --heading-xl for tablet. */
    .hero-v3__hl-line--italic  { font-size: var(--heading-xl); }

    .hero-v3__grid { display: block; }
  }


  /* ── Desktop (≥ 64em) — italic full editorial scale + asymmetric foot ─ */

  @media (min-width: 64em) {
    .hero-v3__hl-line--italic  { font-size: var(--heading-2xl); }

    .hero-v3__foot {
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: end;
      gap: var(--space-l);
    }
    .hero-v3__cta-wrap .brand-cta {
      inline-size: auto;
    }
  }

}