/* ════════════════════════════════════════════════════════════════════
   BRAND-CARD — Reusable card primitive
   BEM block: .brand-card
   Variants: --blade (default for framework section)

   Architecture:
     The card is a layered stack (image → overlay → scrim → body → ember bar).
     A single DOM tree serves both collapsed and active visual states; the
     parent section toggles `.is-active` (or hover/focus pseudo) to drive the
     swap entirely in CSS.

   Critical CSS technique — title swap:
     The title needs to read VERTICALLY in the collapsed state and HORIZONTALLY
     in the active state. CSS can't smoothly tween between writing-mode values,
     and `transform: rotate(-90deg)` produces unpredictable layout boxes that
     clip on edges. The world-class solution is two parallel title elements:

       - .brand-card__title-vertical    (writing-mode: vertical-rl, visible by default)
       - .brand-card__title-horizontal  (writing-mode: horizontal-tb, hidden by default)

     Both anchored to the same bottom-left position. On active state, the
     vertical fades out and horizontal fades in. The user reads it as a
     title transformation; no rotation snap, no layout overflow.
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── Outer wrapper — concentric radius model ──────────────────
     Subtle outer radius (m = 8px) with a 6px transparent matt border.
     The inner media clips to a tighter radius via the concentric rule:
     inner radius = outer radius − border thickness. */
  .brand-card {
    --brand-card-radius:        var(--radius-m);     /* 8px outer */
    --brand-card-border-width:  0.375rem;            /* 6px matt */
    --brand-card-radius-inner:  max(
      var(--card-min-radius),
      calc(var(--brand-card-radius) - var(--brand-card-border-width))
    );

    container-type: inline-size;
    container-name: brand-card;

    position: relative;
    display: block;
    block-size: 100%;
    inline-size: 100%;

    /* Outer rounded frame with transparent matt */
    border-radius: var(--brand-card-radius);
    border: var(--brand-card-border-width) solid transparent;
    background-clip: padding-box;
    overflow: hidden;
    isolation: isolate;

    /* Solid fallback bg so cards are opaque when stacked on mobile */
    background-color: var(--primary-dark);

    /* Soft shadow at rest — image dominance signature */
    box-shadow: var(--shadow-s);

    transition:
      box-shadow 700ms cubic-bezier(0.65, 0, 0.35, 1),
      transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* ── Media layer (inner concentric radius) ───────────────────── */
  .brand-card__media {
    position: absolute;
    inset: 0;
    z-index: var(--z-base);
    border-radius: var(--brand-card-radius-inner);
    overflow: hidden;
  }

  .brand-card__image,
  .brand-card__media img {
    inline-size: 100%;
    block-size: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 900ms cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* ── Overlay — neutral dark tint for legibility & figure/ground ─
     Neutral dark (not brand-blue) so the cards sit cleanly against the
     section's brand-blue gradient aura — no hue competition. The card
     becomes a darker rectangle in the brand atmosphere, with image
     showing through and text legible. */
  .brand-card__overlay {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-base) + 1);
    border-radius: var(--brand-card-radius-inner);
    background-color: color-mix(in oklch, var(--black) 20%, transparent);
    transition: background-color 700ms cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* ── Scrim — bottom gradient for text legibility ──────────────
     Strong dark gradient at the bottom 35% of the card so text reads
     reliably regardless of image content. Fully transparent above the
     midline so the image breathes. */
  .brand-card__scrim {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-base) + 2);
    border-radius: var(--brand-card-radius-inner);
    background: linear-gradient(
      180deg,
      transparent 0%,
      transparent 45%,
      color-mix(in oklch, var(--black) 45%, transparent) 65%,
      color-mix(in oklch, var(--black) 80%, transparent) 85%,
      color-mix(in oklch, var(--black) 92%, transparent) 100%
    );
    pointer-events: none;
    opacity: 1;
    transition: opacity 700ms cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* ── Hover glow — radial accent in the corner ────────────────── */
  .brand-card__glow {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-base) + 1);
    background: radial-gradient(
      ellipse 80% 60% at 0% 100%,
      color-mix(in oklch, var(--secondary) 28%, transparent) 0%,
      transparent 70%
    );
    opacity: 0;
    pointer-events: none;
    transition: opacity 700ms cubic-bezier(0.65, 0, 0.35, 1);
  }

  /* ── Body — holds stage number, title, lede ─────────────────── */
  .brand-card__body {
    position: absolute;
    inset: 0;
    z-index: calc(var(--z-base) + 3);
    padding: var(--space-m);
  }

  /* Stage number sits top-left absolutely */
  .brand-card__stage-num {
    position: absolute;
    inset-block-start: var(--space-m);
    inset-inline-start: var(--space-m);

    font-family: var(--font-heading);
    font-size: var(--text-xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-display);
    color: var(--secondary);
  }

  /* ── Title-vertical (collapsed default) ───────────────────────
     writing-mode: vertical-rl renders the text vertically (reading
     top-to-bottom by default). Adding transform: rotate(180deg) flips
     it to read bottom-to-top — the orientation we want.

     Critical: writing-mode REASSIGNS what logical properties mean. With
     vertical-rl, `inset-block-end` would mean "left side" not "bottom".
     So we use PHYSICAL properties (bottom / left) for positioning. */
  .brand-card__title-vertical {
    position: absolute;
    bottom: var(--space-m);
    left: var(--space-m);

    writing-mode: vertical-rl;
    transform: rotate(180deg);
    transform-origin: center center;

    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    color: var(--white);
    letter-spacing: var(--tracking-tight);
    line-height: 1;
    white-space: nowrap;

    /* Fluid scale: 32px @ 360 → 52px @ 1440 */
    font-size: clamp(2rem, 1.111rem + 3.704vw, 3.25rem);

    opacity: 1;
    transition: opacity 500ms cubic-bezier(0.65, 0, 0.35, 1);

    pointer-events: none;
  }

  /* ── Title-horizontal (active) ────────────────────────────────
     Anchored at the same bottom-left position, hidden by default.
     Fades in on active state. Lede sits underneath. */
  .brand-card__title-horizontal {
    position: absolute;
    inset-block-end: var(--space-m);
    inset-inline-start: var(--space-m);
    inset-inline-end: var(--space-m);

    margin: 0;
    font-family: var(--font-heading);
    font-weight: var(--weight-medium);
    color: var(--white);
    letter-spacing: var(--tracking-tight);
    line-height: var(--leading-tight);

    opacity: 0;
    transform: translateY(8px);
    transition:
      opacity 500ms cubic-bezier(0.65, 0, 0.35, 1) 200ms,
      transform 500ms cubic-bezier(0.65, 0, 0.35, 1) 200ms;
  }

  .brand-card__title-line {
    display: inline-flex;
    align-items: baseline;
    gap: 0.25em;
    font-size: var(--heading-s);
  }

  .brand-card__title-link {
    color: inherit;
    text-decoration: none;
    display: inline-flex;
    align-items: baseline;
    gap: 0.25em;
  }

  .brand-card__title-text { display: inline; }

  .brand-card__title-caret {
    color: var(--secondary);
    font-weight: var(--weight-medium);
  }

  /* ── Lede — appears below horizontal title in active state ──── */
  .brand-card__lede {
    margin: var(--space-2xs) 0 0;
    max-inline-size: 36ch;

    font-family: var(--font-body);
    font-size: var(--text-s);
    font-weight: var(--weight-regular);
    line-height: var(--leading-snug);
    color: color-mix(in oklch, var(--white) 90%, transparent);
  }

  /* ── Ember activation bar — hidden by default ────────────────── */
  .brand-card__ember-bar {
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    z-index: calc(var(--z-base) + 4);
    block-size: var(--line-heavy);
    background-color: var(--secondary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 700ms cubic-bezier(0.65, 0, 0.35, 1);
  }


  /* ════════════════════════════════════════════════════════════
     STATE — .is-active
     Vertical title fades out, horizontal title fades in, lede appears,
     ember bar slides in, glow blooms.
     ════════════════════════════════════════════════════════════ */

  .brand-card.is-active .brand-card__title-vertical {
    opacity: 0;
    transition-delay: 0ms;
  }

  .brand-card.is-active .brand-card__title-horizontal {
    opacity: 1;
    transform: translateY(0);
  }

  .brand-card.is-active .brand-card__overlay {
    background-color: color-mix(in oklch, var(--black) 12%, transparent);
  }

  .brand-card.is-active .brand-card__ember-bar {
    transform: scaleX(1);
  }

  .brand-card.is-active .brand-card__glow {
    opacity: 1;
  }

  .brand-card.is-active .brand-card__image {
    transform: scale(1.04);
  }

  .brand-card.is-active {
    box-shadow:
      var(--shadow-l),
      0 0 0 1px color-mix(in oklch, var(--secondary) 18%, transparent),
      0 12px 40px -8px color-mix(in oklch, var(--secondary) 28%, transparent);
  }


  /* ════════════════════════════════════════════════════════════
     REDUCED MOTION
     ════════════════════════════════════════════════════════════ */

  @media (prefers-reduced-motion: reduce) {
    .brand-card,
    .brand-card__title-vertical,
    .brand-card__title-horizontal,
    .brand-card__overlay,
    .brand-card__scrim,
    .brand-card__ember-bar,
    .brand-card__glow,
    .brand-card__image {
      transition: none;
    }
  }

}