/* Liquid glass, light sky-blue, for every museum page (9 Nov 2026).
   Loaded by the app (through src/app/liquid-glass.css) and linked directly by
   the stand-alone pages. Repeated cards get the bevel without the blur, so a
   page of 500 pictures stays fast on a phone; single panels get the blur. */
@layer dimau-liquid {
  :root {
    --lqs-face: linear-gradient(135deg, rgba(255,255,255,.6) 0%, rgba(214,238,252,.28) 100%);
    --lqs-bevel:
      inset 0 2px 1px 0 rgba(255,255,255,1),
      inset 0 0 20px 2px rgba(255,255,255,.45),
      inset 0 -4px 8px 0 rgba(8,58,100,.2),
      0 0 0 1px rgba(255,255,255,.4),
      0 20px 38px -16px rgba(8,58,100,.5);
    --lqs-card-bevel:
      inset 0 1.5px 1px 0 rgba(255,255,255,1),
      inset 0 -3px 6px 0 rgba(8,58,100,.18),
      0 0 0 1px rgba(255,255,255,.45),
      0 12px 22px -12px rgba(8,58,100,.5);
    --lqs-pill: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(205,233,250,.6) 100%);
    --lqs-pill-bevel:
      inset 0 1.5px 1px rgba(255,255,255,1),
      inset 0 -3px 5px rgba(8,58,100,.2),
      0 8px 16px -6px rgba(8,58,100,.4);
    --lqs-blue: linear-gradient(180deg, #0f78b8 0%, #075b84 100%);
    --lqs-blue-bevel:
      inset 0 1.5px 1px rgba(255,255,255,.6),
      inset 0 -3px 6px rgba(3,34,54,.38),
      0 12px 24px -10px rgba(7,91,132,.7);
    --lqs-light:
      radial-gradient(40% 36% at 10% 8%, rgba(56,189,248,.55) 0%, transparent 70%),
      radial-gradient(36% 34% at 92% 30%, rgba(165,180,252,.5) 0%, transparent 70%),
      radial-gradient(42% 36% at 30% 96%, rgba(45,212,191,.32) 0%, transparent 70%),
      linear-gradient(180deg, #bfe3f7 0%, #dff1fb 100%);
  }

  /* Coloured light behind the content pages, so the glass has something to bend. */
  main:is(.fhm-pictures, .fhm-picture), main[class*="reading-room_room"], [class*="enhanced-compare_page"] {
    background: var(--lqs-light) fixed !important;
  }

  [class*="enhanced-compare_header"] { background: transparent !important; border-bottom-color: rgba(255,255,255,.7) !important; }

  /* Shared header strip */
  .fhm-site-header, .gb-top {
    background: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(214,238,252,.42) 100%) !important;
    -webkit-backdrop-filter: blur(26px) saturate(190%) !important;
    backdrop-filter: blur(26px) saturate(190%) !important;
    border-bottom: 1px solid rgba(255,255,255,.85) !important;
    box-shadow:
      inset 0 1.5px 1px rgba(255,255,255,1),
      inset 0 -3px 6px rgba(8,58,100,.12),
      0 14px 30px -14px rgba(8,58,100,.4) !important;
  }

  /* Pill buttons and links */
  :is(.fhm-site-header__nav a, .gb-top nav a, .gb-search, .fhm-pictures-top a, .fhm-picture-step a,
      .fhm-chapter-more.fhm-chapter-more a, .fhm-pass-share.fhm-pass-share,
      [class*="reading-room_quickNav"] a, [class*="bure-picture-gallery_controls"] button) {
    background: var(--lqs-pill) !important;
    border: 1px solid rgba(255,255,255,.9) !important;
    border-radius: 999px !important;
    box-shadow: var(--lqs-pill-bevel) !important;
    color: #0b2540 !important;
    transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1) !important;
  }
  :is(.fhm-site-header__nav a, .gb-top nav a)[aria-current="page"] {
    background: linear-gradient(180deg, #7cc8f0 0%, #38a5e0 100%) !important;
    color: #04263c !important;
  }

  /* Main action buttons: blue liquid */
  :is(.fhm-visit-go, .gb-begin, .fhm-tour-btn.fhm-tour-btn) {
    background: var(--lqs-blue) !important;
    color: #fff !important;
    border: 1px solid #06486a !important;
    border-radius: 999px !important;
    box-shadow: var(--lqs-blue-bevel) !important;
    transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1) !important;
  }
  :is(.fhm-site-header__nav a, .gb-top nav a, .gb-search, .fhm-pictures-top a, .fhm-picture-step a,
      .fhm-chapter-more.fhm-chapter-more a, .fhm-pass-share.fhm-pass-share, [class*="reading-room_quickNav"] a,
      [class*="bure-picture-gallery_controls"] button, .fhm-visit-go, .gb-begin, .fhm-tour-btn.fhm-tour-btn):active {
    transform: scale(.97) !important;
    box-shadow: inset 0 2px 5px rgba(8,58,100,.3), inset 0 -1px 1px rgba(255,255,255,.8) !important;
  }

  /* Single glass panels (blurred) */
  :is(.fhm-chapter-facts, .fhm-chapter-story, .fhm-chapter-sources, .fhm-chapter-words.fhm-chapter-words,
      .fhm-picture-facts, .fhm-visit-card, .fhm-pictures-head, .gbw-stat,
      [class*="reading-room_hero"], [class*="reading-room_contents"], [class*="reading-room_panels"] > *) {
    background: var(--lqs-face) !important;
    border: 0 !important;
    -webkit-backdrop-filter: blur(22px) saturate(185%) !important;
    backdrop-filter: blur(22px) saturate(185%) !important;
    box-shadow: var(--lqs-bevel) !important;
  }
  .fhm-pictures-head { padding: clamp(18px, 2.4vw, 28px) !important; border-radius: 24px !important; }

  /* Repeated cards (no blur, for speed) */
  :is(.fhm-chapter-list a, .fhm-pictures-grid a, .fhm-words > div, .fhm-pass-stats div,
      [class*="enhanced-compare_card"]) {
    background: linear-gradient(135deg, rgba(255,255,255,.82) 0%, rgba(226,243,253,.6) 100%) !important;
    border: 0 !important;
    box-shadow: var(--lqs-card-bevel) !important;
    transition: transform .2s cubic-bezier(.16,1,.3,1), box-shadow .2s cubic-bezier(.16,1,.3,1) !important;
  }
  @media (hover: hover) {
    :is(.fhm-chapter-list a, .fhm-pictures-grid a, [class*="enhanced-compare_card"]):hover {
      transform: translateY(-2px) !important;
      box-shadow: var(--lqs-card-bevel), 0 0 22px rgba(56,189,248,.55) !important;
    }
  }

  /* Great Bure picture frame at the top of its page */
  .gbw-hero {
    border: 0 !important;
    box-shadow: var(--lqs-bevel) !important;
  }

  @media (prefers-reduced-transparency: reduce) {
    :is(.fhm-site-header, .gb-top, .fhm-chapter-facts, .fhm-chapter-story, .fhm-chapter-sources,
        .fhm-chapter-words.fhm-chapter-words, .fhm-picture-facts, .fhm-visit-card, .fhm-pictures-head, .gbw-stat,
        [class*="reading-room_hero"], [class*="reading-room_contents"], [class*="reading-room_panels"] > *) {
      background: #eef8ff !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    :is(.fhm-site-header__nav a, .gb-top nav a, .gb-search, .fhm-pictures-top a, .fhm-picture-step a,
        .fhm-chapter-list a, .fhm-pictures-grid a, [class*="enhanced-compare_card"], .fhm-visit-go, .gb-begin) {
      transition: none !important;
      transform: none !important;
    }
  }
  @media (forced-colors: active) {
    :is(.fhm-site-header, .gb-top, .fhm-chapter-facts, .fhm-chapter-story, .fhm-chapter-sources,
        .fhm-chapter-words.fhm-chapter-words, .fhm-picture-facts, .fhm-visit-card, .fhm-pictures-head, .gbw-stat,
        .fhm-chapter-list a, .fhm-pictures-grid a, .fhm-words > div, [class*="enhanced-compare_card"],
        [class*="reading-room_hero"], [class*="reading-room_contents"], [class*="reading-room_panels"] > *) {
      background: Canvas !important;
      border: 1px solid CanvasText !important;
      box-shadow: none !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
    }
    main:is(.fhm-pictures, .fhm-picture), main[class*="reading-room_room"], [class*="enhanced-compare_page"] { background: Canvas !important; }
  }
  @media print {
    main:is(.fhm-pictures, .fhm-picture), main[class*="reading-room_room"], [class*="enhanced-compare_page"] { background: #fff !important; }
  }
}