/* ===========================================================================
   mk-cafe.css  -  v102  -  premium pass on the four sections the user
   screenshotted on /cafe (bridge cards, L'application, Nous trouver, and the
   Brew Club / app button pairs).

   WHY A SEPARATE FILE: cafe.html loads its own inline <style>, then
   mascot-fun.css, then mk-mobile.css. This file is linked LAST in <head>, so
   equal-specificity rules here win on order without needing !important
   everywhere. cafe.html is also the one page that loads neither mk-mobile.js
   nor mk-carousel.js (see the header of mk-sanct.js), so nothing here has to
   defend against mkCarousel clones.

   THE COMMON DEFECT ACROSS ALL FOUR SECTIONS WAS EMOJI-AS-ICON.
   The bridge cards used a phone/laptop/printer emoji, L'application used a
   cup/gift/sparkles emoji, and Nous trouver used pin/clock/phone. Emoji render
   differently on every OS and cannot be art-directed, tinted, or aligned to a
   grid. They are now inline SVG in the Lucide idiom (stroke 2.2, round caps) -
   the identical choice v99 made for the sanct cubes, so the page now has one
   icon language instead of two.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. THE BRIDGE SECTION BECOMES A SIBLING OF THE v99 SANCT SECTION

   WARNING - THE CARD FILL AND THE SECTION BACKGROUND HAD TO MOVE TOGETHER.
   The sanct cards read as white glass because they sit on a cream (#F8F4EA)
   ambient field. This section was .sec.white = #FDFBF6, a near-white. Dropping
   the white-glass card recipe onto it unchanged would have made the cards
   effectively invisible - the fill and the backdrop would have been within two
   percent of each other. Porting the backdrop as well is what makes the recipe
   legible here, and it is also what makes the two sections read as one family
   rather than as a second, slightly-different glass style.

   The sanctDrift keyframes are ALREADY DEFINED in mk-mobile.css (v99) and are
   reused here rather than redeclared - one definition, two consumers.
   --------------------------------------------------------------------------- */
/* WARNING - MUST BE `.sec.bridge-sec`, NOT `.bridge-sec`. The page's own inline
   rule is `.sec.white{background:#FDFBF6}` at (0,2,0); a bare `.bridge-sec` is
   (0,1,0) and LOSES, which shipped white-glass cards onto a near-white field -
   the precise failure the note above predicts. Two classes ties the specificity
   and this file loads later, so it wins on order. Verified live: computed
   background is now rgb(248,244,234). */
.sec.bridge-sec{background:#F8F4EA;position:relative;overflow:hidden}
.bridge-sec::before{content:"";position:absolute;inset:-20%;z-index:0;pointer-events:none;
  background:
    radial-gradient(38% 42% at 18% 22%,rgba(231,201,140,.30),transparent 62%),
    radial-gradient(34% 40% at 82% 30%,rgba(214,226,240,.34),transparent 62%),
    radial-gradient(40% 44% at 50% 88%,rgba(226,214,196,.34),transparent 64%);
  animation:sanctDrift 26s ease-in-out infinite alternate}
.bridge-sec>.wrap{position:relative;z-index:1}

.bridge-sec .bridge{gap:26px}

/* the card: same glass, radius, shadow and easing curve as .sanct-sec .sanct>.s */
.bridge-sec .bcard{position:relative;overflow:visible;
  background:rgba(255,255,255,.86);border:1px solid rgba(255,255,255,.7);
  border-radius:30px;padding:32px 28px 28px;
  box-shadow:0 30px 60px rgba(0,0,0,.06);
  transition:transform .5s cubic-bezier(.16,1,.3,1),box-shadow .5s cubic-bezier(.16,1,.3,1)}
.bridge-sec .bcard:hover{transform:translateY(-8px);box-shadow:0 44px 80px rgba(0,0,0,.10)}

/* the ambient glow the cube casts onto the card. Left-anchored rather than
   centred because these cards are left-aligned, unlike the centred sanct ones. */
.bridge-sec .bcard::before{content:"";position:absolute;left:30px;top:12px;
  width:172px;height:172px;border-radius:50%;z-index:0;pointer-events:none;
  background:radial-gradient(circle,var(--bg,rgba(231,181,90,.55)),transparent 66%);
  filter:blur(30px);opacity:.5;transition:opacity .5s,transform .5s}
.bridge-sec .bcard:hover::before{opacity:.85;transform:scale(1.12)}

/* the floating glass cube - 72px here against the sanct section's 96px, because
   these cards are shorter and carry a two-line title plus body copy */
.bc-cube{position:relative;z-index:2;display:grid;place-items:center;
  width:72px;height:72px;border-radius:22px;color:#fff;
  background:linear-gradient(180deg,rgba(255,255,255,.80),rgba(255,255,255,.15)),var(--bc,#E3B341);
  border:1px solid rgba(255,255,255,.8);
  box-shadow:0 16px 30px -12px var(--bg,rgba(231,181,90,.55)),
    inset 0 1px 0 rgba(255,255,255,.95),inset 0 -9px 16px rgba(0,0,0,.10);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  animation:sanctFloat 5s ease-in-out infinite;
  transition:transform .55s cubic-bezier(.16,1,.3,1)}
.bridge-sec .bcard:hover .bc-cube{transform:translateY(-3px) scale(1.06)}
.bc-cube svg{width:32px;height:32px}

/* copy has to be lifted above the glow, and the title needs air under the cube
   (the page's own rule sets margin:12px 0 8px) */
.bridge-sec .bcard h4,.bridge-sec .bcard p{position:relative;z-index:2}
.bridge-sec .bcard h4{margin:20px 0 8px}

/* per-card tint. Gold is the house colour; the other two are pulled toward the
   sanct palette so the two sections share a spectrum. */
.bc-g{--bc:#E3B341;--bg:rgba(231,181,90,.55)}
.bc-b{--bc:#6E93C8;--bg:rgba(110,147,200,.50)}
.bc-t{--bc:#5FA980;--bg:rgba(95,169,128,.48)}

/* staggered float, matching the sanct cadence */
.bridge-sec .bcard:nth-child(2) .bc-cube{animation-delay:.6s}
.bridge-sec .bcard:nth-child(3) .bc-cube{animation-delay:1.2s}


/* ---------------------------------------------------------------------------
   2. ICON CHIPS - L'application (on cream) and Nous trouver (on dark)

   Same construction as the cube (layered gradient over a tint, hairline border,
   inset highlight) at chip scale, so the icon language is continuous from the
   72px cube down to the 42px row chip. The two variants differ ONLY in what
   they are legible against - a light-glass chip on the cream section would
   vanish, and a dark-glass chip on the espresso section would too.
   --------------------------------------------------------------------------- */
.app .pt .ic{
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.06)),rgba(227,169,56,.22);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 10px 20px -10px rgba(185,132,42,.5),inset 0 1px 0 rgba(255,255,255,.85);
  color:var(--goldD)}
.find .r .ic{
  background:linear-gradient(180deg,rgba(246,240,228,.16),rgba(246,240,228,.03)),rgba(227,169,56,.20);
  border:1px solid rgba(246,240,228,.22);
  box-shadow:0 10px 20px -10px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18);
  color:var(--goldB)}
.app .pt .ic svg,.find .r .ic svg{width:20px;height:20px}

/* the rows themselves get the same hairline-glass finish as the chips so the
   card and its chip are made of the same material */
.find .r{transition:transform .3s var(--ease),background .3s,border-color .3s}
.find .r:hover{background:rgba(246,240,228,.08);border-color:rgba(227,169,56,.34)}


/* ---------------------------------------------------------------------------
   3. ONE BUTTON SYSTEM

   The page had THREE secondary treatments for what is the same job: .btn-ghost
   (translucent + hairline) on the two dark sections, and .btn-dark (solid
   espresso) on the cream one. Two different answers to one question is what
   made the button pairs read as unrelated across the screenshots.

   Unified as: PRIMARY is always the gold gradient (untouched - it is the brand
   and it already reads well), SECONDARY is always translucent fill + a GOLD
   hairline, tinted to whatever it sits on. The gold border is the thread that
   ties the secondary back to the primary, which a plain grey outline would not
   do. Geometry, weight and hover lift are now identical on both.
   --------------------------------------------------------------------------- */
.btn-ghost{background:rgba(246,240,228,.08);color:var(--tl);
  border:1px solid rgba(227,169,56,.38);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-ghost:hover{background:rgba(246,240,228,.15);
  border-color:rgba(227,169,56,.62);transform:translateY(-2px)}

.btn-dark{background:rgba(40,24,16,.055);color:#2A1810;
  border:1px solid rgba(185,132,42,.42);box-shadow:none;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.btn-dark:hover{background:rgba(40,24,16,.10);
  border-color:rgba(185,132,42,.68);transform:translateY(-2px)}


/* ---------------------------------------------------------------------------
   4. REDUCED MOTION - the float and the ambient drift are decoration; the
   hover lift is feedback and is left alone, matching how v99 handled it.
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .bridge-sec::before,.bc-cube{animation:none}
  .bridge-sec .bcard,.bridge-sec .bcard::before,.bc-cube{transition:none}
}


/* ---- v107b: the floating fidelity FAB was the last emoji-as-icon on the page.
   Same cup glyph as the L'application chip, so the two coffee marks match.
   The FAB is styled elsewhere (mascot-fun / inline); only the glyph size and
   alignment need setting here. ---- */
.mkf-ic svg{width:20px;height:20px;display:block}
