/* ════════════════════════════════════════════════════════════════════
   FRAMEWORK-BLADES — v3 alternate Brand First Experience Framework
   BEM block: .framework-blades

   Architecture:
     Layout = stacked content + 5-column CSS Grid (desktop/tablet) or
     sticky-stack deck (mobile).
     Borrow-width hover model: grid-template-columns shifts via :has().
     Active blade card state: brand-card.css owns the title crossfade,
     ember bar, glow, image scale. We bridge the cell hover/focus to the
     descendant card by toggling the same selectors brand-card uses for
     .is-active.

   Mobile pattern: position: sticky on each card, cascading z-index, each
   card a near-full viewport height with scroll-room between. As the user
   scrolls, each card pins at the top and the next slides up over it.
   ════════════════════════════════════════════════════════════════════ */

@layer components {

  /* ── Gradient aura background ─────────────────────────────────
     A 6-layer stacked atmosphere designed to feel like sky photography
     at golden hour rather than a corporate gradient.

     Stacking order (top → bottom in the shorthand):
       (1) Grain noise overlay — micro-dot SVG at 4% opacity. Fakes paper
           grain so the gradient reads as analog atmosphere, not digital
           banding. Renders the same on OLED/HDR/projected screens.
       (2) Soft warm radial mid-left — subtle cream lift behind the editorial
           headline area. Gives copy a paper-warmth halo.
       (3) Strong warm radial upper-right — golden-hour breath. The asymmetric
           highlight that gives the section a light direction.
       (4) Deep plum well lower-left — purple-blue depth pocket so the dark
           zone has dimension, not flat blue.
       (5) Warm-blue accent lower-right — counterbalance to the plum well so
           the bottom band has horizontal tonal variation (not symmetric).
       (6) Base linear: bone → warm lavender mid → brand ink-blue → ultra-dark.
           Stops are gentle (10–15% spreads) so transitions are invisible.

     Color choices:
       - Mid-tone is `oklch(72% 0.045 50)` — a warm taupe-lavender, NOT ashy
         grey. It bridges bone to brand-blue without a muddy seam.
       - The plum well uses `oklch(28% 0.090 290)` — a true atmospheric
         deep-blue with violet undertone, far richer than primary-ultra-dark
         on its own. */
  .framework-blades {
    background:
      /* (1) Grain noise — paper texture, blended at low opacity. */
      url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>"),

      /* (2) Base linear — confident single sweep:
         bone holds through content header, then a clean transition
         into brand primary. No depth pockets, no auxiliary radials —
         the gradient supports the cards instead of competing. */
      linear-gradient(
        180deg,
        var(--surface-page) 0%,
        var(--surface-page) 48%,
        color-mix(in oklch, var(--surface-page) 65%, var(--primary)) 60%,
        var(--primary) 82%,
        var(--primary-dark) 100%
      );

    background-size: 180px 180px, auto;
    background-repeat: repeat, no-repeat;
    background-blend-mode: overlay, normal;

    padding-block: var(--section-space-l);
  }


  /* ── Header ─────────────────────────────────────────────────── */

  .framework-blades__header {
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    margin-block-end: var(--container-gap);
    max-inline-size: var(--content-width-narrow);
  }

  /* Eyebrow uses the reusable brand-eyebrow component; styling lives
     in components/brand-eyebrow.css. */

  .framework-blades__heading {
    margin: 0;
    font-family: var(--font-heading);
    font-size: var(--heading-xl);
    font-weight: var(--weight-medium);
    line-height: var(--leading-display);
    letter-spacing: var(--tracking-tight);
    color: var(--text-heading);
    text-wrap: balance;
  }

  .framework-blades__body {
    margin: 0;
    font-size: var(--text-m);
    line-height: var(--leading-relaxed);
    color: var(--text-body);
    max-inline-size: var(--text-width-s);
    text-wrap: pretty;
  }

  .framework-blades__link {
    align-self: flex-start;
    margin-block-start: var(--space-2xs);
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    font-size: var(--text-s);
    font-weight: var(--weight-medium);
    color: var(--text-heading);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset-m);
    transition: color var(--duration-fast) var(--ease-out);
  }

  .framework-blades__link:hover { color: var(--secondary); }


  /* ── Grid (desktop / tablet) ────────────────────────────────── */

  .framework-blades__grid {
    list-style: none;
    margin: 0;
    padding: 0;

    display: grid;
    gap: var(--space-2xs);
    grid-template-columns: 1fr;
    grid-auto-rows: clamp(22rem, 70vh, 32rem);
  }

  .framework-blades__cell {
    position: relative;
    list-style: none;
    block-size: 100%;
    inline-size: 100%;
    cursor: pointer;
    transition: filter var(--duration-normal) var(--ease-out);
  }

  .framework-blades__cell:focus-visible {
    outline: var(--focus-ring);
    outline-offset: var(--focus-ring-offset);
  }


  /* ── Tablet (≥ 48em) — 5-column grid + borrow-width hover ───── */

  @media (min-width: 48em) {
    .framework-blades__grid {
      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
      grid-auto-rows: clamp(28rem, 60vw, 36rem);

      transition: grid-template-columns 700ms cubic-bezier(0.65, 0, 0.35, 1);
    }

    /* Borrow-width hover via :has() */
    .framework-blades__grid:has(.framework-blades__cell:nth-child(1):hover),
    .framework-blades__grid:has(.framework-blades__cell:nth-child(1):focus-within) {
      grid-template-columns: 2.6fr 1fr 1fr 1fr 1fr;
    }
    .framework-blades__grid:has(.framework-blades__cell:nth-child(2):hover),
    .framework-blades__grid:has(.framework-blades__cell:nth-child(2):focus-within) {
      grid-template-columns: 1fr 2.6fr 1fr 1fr 1fr;
    }
    .framework-blades__grid:has(.framework-blades__cell:nth-child(3):hover),
    .framework-blades__grid:has(.framework-blades__cell:nth-child(3):focus-within) {
      grid-template-columns: 1fr 1fr 2.6fr 1fr 1fr;
    }
    .framework-blades__grid:has(.framework-blades__cell:nth-child(4):hover),
    .framework-blades__grid:has(.framework-blades__cell:nth-child(4):focus-within) {
      grid-template-columns: 1fr 1fr 1fr 2.6fr 1fr;
    }
    .framework-blades__grid:has(.framework-blades__cell:nth-child(5):hover),
    .framework-blades__grid:has(.framework-blades__cell:nth-child(5):focus-within) {
      grid-template-columns: 1fr 1fr 1fr 1fr 2.6fr;
    }


    /* ── Bridge cell hover → descendant card active state ────────
       brand-card.css fires the active visual state on .is-active.
       Mirror those rules here under :hover/:focus-within so the cell's
       interaction state propagates to the card without JS toggling. */

    .framework-blades__cell:hover .brand-card__title-vertical,
    .framework-blades__cell:focus-within .brand-card__title-vertical {
      opacity: 0;
      transition-delay: 0ms;
    }

    .framework-blades__cell:hover .brand-card__title-horizontal,
    .framework-blades__cell:focus-within .brand-card__title-horizontal {
      opacity: 1;
      transform: translateY(0);
    }

    .framework-blades__cell:hover .brand-card__overlay,
    .framework-blades__cell:focus-within .brand-card__overlay {
      background-color: color-mix(in oklch, var(--black) 12%, transparent);
    }

    .framework-blades__cell:hover .brand-card__ember-bar,
    .framework-blades__cell:focus-within .brand-card__ember-bar {
      transform: scaleX(1);
    }

    .framework-blades__cell:hover .brand-card__glow,
    .framework-blades__cell:focus-within .brand-card__glow {
      opacity: 1;
    }

    .framework-blades__cell:hover .brand-card__image,
    .framework-blades__cell:focus-within .brand-card__image {
      transform: scale(1.04);
    }

    .framework-blades__cell:hover .brand-card,
    .framework-blades__cell:focus-within .brand-card {
      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);
    }

  }


  /* ── Desktop (≥ 64em) ───────────────────────────────────────── */

  @media (min-width: 64em) {
    .framework-blades__grid {
      grid-auto-rows: 32rem;
      gap: var(--space-xs);
    }
  }


  /* ════════════════════════════════════════════════════════════════
     Mobile (< 48em) — sticky-stack ("deck of cards")

     Each card position: sticky to the top of the viewport. As the user
     scrolls, each card pins in turn — when one card's grid track has
     scrolled past, the next card slides UP from below covering the
     pinned one. Cascading z-index stacks newer cards on top of older.

     Critical math:
       Each card is `block-size: clamp(28rem, 80svh, 36rem)` — roughly
       full viewport. Trailing scroll-room (the parent grid's row track
       beyond the card's height) is what gives the card "scroll time"
       before being unstuck. We use `grid-auto-rows: 100svh` so each
       card has a full viewport of scroll-room before the next pins.
     ════════════════════════════════════════════════════════════════ */

  @media (max-width: 47.99em) {
    /* Mobile gradient — confident single sweep, bone compressed to ~12%
       since mobile section is tall (sticky-stack of 5 cards). */
    .framework-blades {
      background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.6'/></svg>"),

        linear-gradient(
          180deg,
          var(--surface-page) 0%,
          var(--surface-page) 12%,
          color-mix(in oklch, var(--surface-page) 60%, var(--primary)) 18%,
          var(--primary) 32%,
          var(--primary-dark) 100%
        );

      background-size: 180px 180px, auto;
      background-repeat: repeat, no-repeat;
      background-blend-mode: overlay, normal;
    }

    .framework-blades__grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0;
      /* Each row = ~85% viewport of scroll-room. Tightens the gap
         between pin events without losing the deck-stack reveal. */
      grid-auto-rows: 85svh;
    }

    .framework-blades__cell {
      position: sticky;
      inset-block-start: calc(var(--header-height) + var(--space-s));
      block-size: clamp(26rem, 72svh, 36rem);
      cursor: default;
    }

    /* Cascading z-index — later cards stack ABOVE earlier ones.
       This creates the deck-reveal effect on scroll. */
    .framework-blades__cell:nth-child(1) { z-index: 1; }
    .framework-blades__cell:nth-child(2) { z-index: 2; }
    .framework-blades__cell:nth-child(3) { z-index: 3; }
    .framework-blades__cell:nth-child(4) { z-index: 4; }
    .framework-blades__cell:nth-child(5) { z-index: 5; }

    /* Every card on mobile renders in active state.
       Bridge same selectors brand-card.css uses for is-active. */
    .framework-blades__cell .brand-card__title-vertical { opacity: 0; }

    .framework-blades__cell .brand-card__title-horizontal {
      opacity: 1;
      transform: translateY(0);
    }

    .framework-blades__cell .brand-card__overlay {
      background-color: color-mix(in oklch, var(--black) 18%, transparent);
    }

    .framework-blades__cell .brand-card__ember-bar { transform: scaleX(1); }

    .framework-blades__cell .brand-card__glow { opacity: 1; }
  }


  /* ── Reduced motion ─────────────────────────────────────────── */

  @media (prefers-reduced-motion: reduce) {
    .framework-blades__grid,
    .framework-blades__cell {
      transition: none;
    }
  }

}