/* ============================================================================
   Floom — Features mega-menu
   ----------------------------------------------------------------------------
   Full-width panel under the nav: two columns of feature items and, from
   1080px, a card in the third — resting on the latest post, turning to the
   feature the pointer settles on, with that feature's own scene playing.
   floom-mega.js builds the card and runs it.
   ========================================================================== */

.nv-item{ position: relative; display: inline-flex; }

.nv-trigger{
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 8px 4px;
  font-family: var(--font); font-size: 14.5px; font-weight: 500;
  color: var(--fl-ink-soft, #767270);
  cursor: pointer;
  transition: color .2s var(--fl-ease-soft, cubic-bezier(.4,0,.2,1));
}
.nv-trigger:hover,
.nv-trigger[aria-expanded="true"]{ color: var(--fl-ink, #181818); }
/* The caret that sat here is gone, and these rules with it: the trigger's
   open state is carried by its S-step underline now. */

/* ── Panel ─────────────────────────────────────────────────────────────────*/
@media (max-width: 600px){ .mega{ left: 12px; right: 12px; border-radius: 16px; } }

:root{ --mega-top: round(calc(var(--fl-nav-top, 12px) + var(--fl-nav-pill, 60px) + 8px), 4px); }

.mega{
  position: fixed;
  /* Full bleed, from under the floating pill to the foot of the window. It was
     an island on the nav's own insets; it is the whole screen now. The bar is
     left uncovered on purpose — it is how the menu is closed, and .nav.is-mega
     already dresses it for sitting over the sheet. */
  top: var(--mega-top);
  left: 0; right: 0;
  max-width: none;
  margin-inline: 0;
  z-index: 90;
  /* Black and see-through, with the page blurred behind it rather than hidden
     — the sheet IS the overlay now, which is why the scrim below has been cut
     back to the strip the bar floats in. Two layers of this over the same
     pixels would have doubled both the black and the blur. */
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
  /* One place to turn the sheet's type over: every rule in here reads the ink
     through these two, so scoping them is the whole dark treatment. */
  --fl-ink: #FAF6F1;
  --fl-ink-soft: rgba(250, 246, 241, .72);
  border-bottom: none;
  /* No radius and no shadow: both drew the edges of an island, and a sheet
     that runs to all three edges has none to draw. */
  border-radius: 0;
  box-shadow: none;

  /* The panel GROWS rather than fading in: one grid row from 0fr to 1fr, which
     is the only way to animate to a content height without measuring it in
     script and without capping it at a max-height guess that goes wrong the
     moment the copy changes. `hidden` is toggled too, so a closed panel is out
     of the tab order rather than merely invisible. */
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows .42s var(--fl-ease-out, cubic-bezier(.22,1,.36,1)),
              opacity .2s linear;
}
.mega.is-open{ grid-template-rows: 1fr; opacity: 1; }

/* The row that gets clipped while it opens. min-height:0 is load-bearing —
   a grid item's default min-height is auto, which refuses to go below its
   content and the row never animates at all. */
.mega-inner{
  overflow: hidden;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: round(clamp(28px, 4vw, 72px), 4px);
  /* The block padding lives on the CHILDREN, not here. A grid row set to 0fr
     collapses its item's content but not the item's own padding, so with the
     padding on this element a closed panel was still 108px of empty bar
     hanging under the nav. min-height:0 does not help — padding is part of the
     box's minimum size. The three children all start at the same line, so the
     result on screen is identical. */
  /* The bar's own edges (it pads by the same gutter): the first column starts
     under the logo and the last one ends under the CLOSE button. At 24px the
     sheet ran 24px past the bar on both sides. */
  padding: 0 var(--fl-gutter, 48px);
  max-width: none;
  align-items: start;
}
.mega-inner > *{
  padding-top: round(clamp(32px, 3.6vw, 52px), 8px);
  padding-bottom: round(clamp(36px, 4vw, 56px), 8px);
}

/* ── Feature items ─────────────────────────────────────────────────────────*/

/* The row still grows from 0fr to 1fr — that is the whole open animation —
   so the full height cannot be set on .mega-inner itself without stopping it
   collapsing. It is set on the columns instead: 1fr then resolves to the rest
   of the window and the sheet grows all the way down to its foot. */
.mega-inner > *{
  min-height: calc(100svh - var(--mega-top) - 1px);
  /* The copy stays at the top of the sheet, where it was. Centring it in the
     full height was tried and read as floating. */
  display: flex;
  flex-direction: column;
}

.mega-col{ display: flex; flex-direction: column; }

.mega-item{
  display: block; width: 100%;
  text-align: left;
  background: none; border: 0;
  padding: 12px 16px;
  margin-left: -16px;                 /* keeps the label on the gutter, under the logo */
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font);
}
.mega-item .t{
  display: inline-flex; align-items: center;
  font-size: 15px; font-weight: 600; line-height: 1.3;
  color: var(--fl-ink, #181818);
}
.mega-item .d{
  display: block; margin-top: 4px;
  font-size: 13.5px; line-height: 1.3;
  color: var(--fl-ink-soft, #767270);
  max-width: 34ch;
}

/* Hover is an arrow sliding in after the title — no plate behind the text.
   The padding stays for the hit area even though nothing paints on it, the
   same trick the footer's bare social icons use. */
.mega-item .t::after{
  content: "\2192";                   /* → */
  margin-left: 8px;
  font-weight: 500;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .2s var(--fl-ease-soft, cubic-bezier(.4,0,.2,1)),
              transform .3s var(--fl-ease-out, cubic-bezier(.22,1,.36,1));
}
.mega-item:hover .t::after,
.mega-item:focus-visible .t::after,
.mega-item[aria-current="true"] .t::after{
  opacity: 1;
  transform: none;
}

/* Removing the plate removed the keyboard affordance with it, so focus gets
   its own ring — a hover cue alone is not a focus indicator. */
.mega-item:focus-visible{
  outline: 2px solid var(--accent, #ff3c00);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  .mega-item .t::after{ transition: none !important; transform: none !important; }
}

/* ── The card ──────────────────────────────────────────────────────────────
   One card at the trailing edge: a picture, a title, one line. It rests on
   the latest post; settling on a feature turns it to that feature, the
   picture becoming that feature's scene, playing — drawn for the card in
   the scene library (floom-scenes.html), with another company and another view than the
   feature's own page shows.

   Three equal columns, so the card fills its third: a narrow fixed track left
   it a fifth of the sheet (360 of 1616px at 1712 wide) beside list columns
   twice its width holding 250px of words. The same at every width the panel
   opens at (960 up): below 1080 — a tablet across, a small laptop — the
   lists' descriptions take two lines. Stacking the card under the second
   list kept them on one, but ran it past the foot of a 768px-tall window,
   where the clipped sheet cut it off. Below 960 the Menu button opens the
   sheet, which carries the post as its own card (floom-apple.css). */
.mega-inner:has(> .mega-feature){ grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* No column name over it: the picture's top stands on the names' line, so all
   three columns start together. */
.mega-card{
  display: block;
  color: inherit;
  text-decoration: none;
  border-radius: 16px;                /* the focus ring follows the plate */
}

/* The picture: a 16px plate at 7:5, the 784 × 560 the menu's scenes are drawn
   at. floom-mega.js keeps ART_RATIO in step with this. */
.mega-card-art{
  position: relative;
  display: block;
  aspect-ratio: 7 / 5;
  border-radius: 16px;
  overflow: hidden;
  background: #181818;
}
/* Under a scene the plate takes the scene's ground (floom-artifact.css's
   --aa-ground), so a square one — Excel's — stands centred on the same colour
   rather than between two black bars. */
.mega-card-art.is-scene{ background: color-mix(in srgb, #FFB199 18%, #FAF6F1); }

/* The post's picture and each feature's scene lie in the same place and cross
   over: only the one .is-on shows. */
.mega-card-art > *{
  opacity: 0;
  transition: opacity .34s var(--fl-ease-out, cubic-bezier(.22,1,.36,1)),
              transform .5s var(--fl-ease-out, cubic-bezier(.22,1,.36,1));
}
.mega-card-art > .is-on{ opacity: 1; }
.mega-card-art > img{
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  /* The art's subject (the ask, the line, the Claude mark) sits right of its
     centre; cropped from the middle at 7:5 the ask was cut in two. This puts
     an even margin either side of it. */
  object-position: 70% 50%;
}
/* A scene, as tall as the plate; its width and left come from floom-mega.js. */
.mega-card-art > .aa{ position: absolute; top: 0; }
.mega-card:is(:hover, :focus-visible) .mega-card-art > .is-on{ transform: scale(1.03); }

/* A hairline on the picture's edge: the post's black picture on the black
   sheet has none of its own. Drawn over the picture — an inset shadow on the
   box itself would paint underneath it. */
.mega-card-art::after{
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(250, 246, 241, .12);
  pointer-events: none;
}

/* The site's feature-card title (.ap-menu-card-title): a step above the lists'
   15px titles, so the card reads as one item of its own rather than a fourth
   row. */
.mega-card-t{
  display: block;
  margin-top: 16px;
  font-family: var(--font);
  font-size: 20.08px; font-weight: 500; line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--fl-ink);
}
/* The same arrow the two lists slide in, after the last word of the title. */
.mega-card-t::after{
  content: "\2192";                   /* → */
  display: inline-block;
  margin-left: 8px;
  font-weight: 500;
  opacity: 0;
  transform: translateX(-5px);
  transition: opacity .2s var(--fl-ease-soft, cubic-bezier(.4,0,.2,1)),
              transform .3s var(--fl-ease-out, cubic-bezier(.22,1,.36,1));
}
.mega-card:is(:hover, :focus-visible) .mega-card-t::after{ opacity: 1; transform: none; }

.mega-card-d{
  display: block;
  margin-top: 8px;
  max-width: 44ch;
  font-family: var(--font);
  font-size: 14.5px; font-weight: 450; line-height: 1.3;
  color: var(--fl-ink-soft);
}

.mega-card:focus-visible{
  outline: 2px solid var(--accent, #ff3c00);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce){
  .mega-card-art > *,
  .mega-card-t::after{ transition: none !important; }
  .mega-card:is(:hover, :focus-visible) .mega-card-art > .is-on{ transform: none; }
}

/* ── Narrow ────────────────────────────────────────────────────────────────
   The nav collapses to a hamburger below 900px and .nav-links is hidden, so
   the trigger goes with it. Nothing here needs a mobile panel; the mobile menu
   already lists the same destinations. */
@media (max-width: 900px){
  .mega{ display: none !important; }
}

@media (prefers-reduced-motion: reduce){
  .mega{ transition: none !important; }
}


/* ── Arriving, in order ────────────────────────────────────────────────────
   The panel's own growth is the frame; the items land inside it one after the
   other. Delays are small — 45ms — because six of them at 80ms is most of a
   second before the last line is readable, and the panel is a menu, not a
   reveal. The card brings up the rear. */
.mega-item,
.mega-card{
  opacity: 0;
  transform: translate3d(0, 9px, 0);
}
.mega.is-open .mega-item,
.mega.is-open .mega-card{
  opacity: 1;
  transform: none;
  transition: opacity .32s var(--fl-ease-out, cubic-bezier(.22,1,.36,1)) var(--mega-d, 0ms),
              transform .32s var(--fl-ease-out, cubic-bezier(.22,1,.36,1)) var(--mega-d, 0ms);
}
.mega.is-open .mega-col:nth-child(1) .mega-item:nth-child(1){ --mega-d:  60ms; }
.mega.is-open .mega-col:nth-child(1) .mega-item:nth-child(2){ --mega-d: 105ms; }
.mega.is-open .mega-col:nth-child(1) .mega-item:nth-child(3){ --mega-d: 150ms; }
.mega.is-open .mega-col:nth-child(2) .mega-item:nth-child(1){ --mega-d: 105ms; }
.mega.is-open .mega-col:nth-child(2) .mega-item:nth-child(2){ --mega-d: 150ms; }
.mega.is-open .mega-col:nth-child(2) .mega-item:nth-child(3){ --mega-d: 195ms; }
.mega.is-open .mega-card{ --mega-d: 170ms; }

/* ── The page, behind ──────────────────────────────────────────────────────
   Everything below the bar dims while the menu is open, which is what makes an
   open menu read as a layer rather than as more page. Created by the script,
   so no markup carries it. It starts under the nav, not at the top of the
   viewport: dimming the bar you are pointing at is the one thing it must not
   do. */
.mega-scrim{
  position: fixed;
  /* The whole viewport, not from 72px down. That offset existed so the bar's
     own strip stayed undimmed, which worked while the bar filled it — a
     floating bar leaves slivers above and beside it, and those read as a lit
     frame around the nav. The bar and the panel sit above this in z-order, so
     covering everything still leaves both of them bright. */
  /* Only the strip the bar floats in. The sheet covers everything below it and
     carries the same black and the same blur, so a scrim spanning the window
     would have sat UNDER the sheet and been counted twice over every pixel of
     it. One layer each, edge to edge between them. */
  inset: 0 0 auto 0;
  height: var(--mega-top);
  z-index: 89;
  background: rgba(0,0,0,.55);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
          backdrop-filter: blur(18px) saturate(120%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s var(--fl-ease-out, cubic-bezier(.22,1,.36,1));
}
.mega-scrim.is-open{ opacity: 1; }

/* The bar itself, while the menu hangs off it — solid enough to read as its
   own surface rather than as part of the dimmed page. */
.nav.is-mega{
  /* Transparent, because the strip behind it is already the same black glass
     as the sheet. A cream bar over a black sheet read as two different pages. */
  background: transparent;
  -webkit-backdrop-filter: none;
          backdrop-filter: none;
}

@media (prefers-reduced-motion: reduce){
  .mega{ transition: none; }
  .mega-item,
  .mega-card{ opacity: 1; transform: none; transition: none; }
  .mega-scrim{ transition: none; }
}

/* ── the column's name, and the line that closes the first one ────────────
   Set on the sheet's own light-on-dark tokens, which .mega already defines. */
.mega-label{
  margin: 0 0 16px;
  font-family: var(--font);
  font-size: 11.5px; font-weight: 500; line-height: 1.3;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--fl-ink-soft);
}
.mega-foot{
  margin: 16px 0 0;
  font-family: var(--font);
  font-size: 14px; font-weight: 450; line-height: 1.3;
  color: var(--fl-ink-soft);
}
.mega-foot a{
  color: var(--fl-ink);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
}
.mega-foot a:is(:hover, :focus-visible){ text-decoration-color: currentColor; }