@layer organisms {
  /* Hoja de vidrio que sube sobre el hero: los labios se ven desenfocados a través de ella.
     .sheet.glass es más específico que .glass, así este fondo manda sobre el del menú. */
  .sheet {
    position: relative;
    z-index: 2;
    margin-block-start: calc(var(--sheet-overlap) * -1);
    margin-inline: clamp(0.5rem, 0.2rem + 1.4vw, 1.5rem);
    border-radius: clamp(24px, 1rem + 1.5vw, 40px);

    &.glass {
      background: linear-gradient(180deg, rgb(255 255 255 / 0.55), rgb(255 255 255 / 0.7));
      box-shadow:
        0 -16px 48px rgb(25 22 37 / 0.12),
        0 1px 2px rgb(25 22 37 / 0.06),
        inset 0 1px 0 rgb(255 255 255 / 0.95);
    }
  }

  /* Los labios se desvanecen al final del hero en vez de cortarse en seco: a los lados de la hoja no queda
     ninguna línea. El mask aplica también a la imagen fija porque el hero es su contexto de apilamiento. */
  .hero:has(+ .sheet) {
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--sheet-overlap)), transparent);
  }
}