/* Meltem Photography — v20
   The hero copy becomes an ivory photographic glass on larger screens.
   Its text side stays calm; the image-facing edge reveals the subject. */

@media (min-width: 821px) {
  .hero--live .flow-copy {
    isolation: isolate;
    background-color: transparent;
    background-image:
      linear-gradient(
        100deg,
        rgba(250, 248, 243, .86) 0%,
        rgba(250, 248, 243, .82) 46%,
        rgba(248, 245, 238, .58) 72%,
        rgba(247, 243, 235, .28) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, .26) 0%,
        rgba(255, 255, 255, .06) 34%,
        rgba(255, 255, 255, 0) 68%
      );
    border-color: rgba(255, 255, 255, .48);
    border-right-color: rgba(255, 255, 255, .3);
    border-bottom-color: rgba(64, 53, 43, .14);
    -webkit-backdrop-filter: blur(4.5px) saturate(1.1) contrast(1.015);
    backdrop-filter: blur(4.5px) saturate(1.1) contrast(1.015);
    box-shadow:
      0 30px 90px rgba(25, 20, 15, .13),
      inset 0 1px 0 rgba(255, 255, 255, .68),
      inset 1px 0 0 rgba(255, 255, 255, .42),
      inset -1px 0 0 rgba(255, 255, 255, .16);
  }

  .hero--live .flow-copy::before {
    content: "";
    position: absolute;
    z-index: 0;
    top: -1px;
    right: -1px;
    left: -1px;
    height: 24px;
    pointer-events: none;
    background:
      linear-gradient(
        90deg,
        rgba(255, 255, 255, .14) 0%,
        rgba(255, 255, 255, .2) 60%,
        rgba(255, 255, 255, .36) 100%
      ),
      linear-gradient(
        180deg,
        rgba(255, 255, 255, .88) 0,
        rgba(255, 255, 255, .3) 2px,
        rgba(255, 255, 255, .1) 9px,
        rgba(255, 255, 255, 0) 24px
      );
    border-top: 1px solid rgba(255, 255, 255, .94);
  }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 821px) {
    .hero--live .flow-copy {
      background: rgba(250, 248, 243, .9);
    }
  }
}

@media (max-width: 820px) {
  .hero--live .flow-copy {
    background: rgba(251, 250, 246, .97);
    border-bottom-color: var(--v10-line);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .hero--live .flow-copy {
    background: rgba(251, 250, 246, .97);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .hero--live .flow-copy::before {
    display: none;
  }
}