/* Gate -> Local Attractions transition polish (2026-09-25).
   Keep the Local Attractions section's own top padding at exactly 150px. */
@media (min-width: 761px) {
  .g5 + .lae { padding-top: 150px; }
}

@media (max-width: 760px) {
  .g5 + .lae { padding-top: 150px; }
}

/* Fade the watercolor plate through alpha on every edge. The section's cream
   base shows through the fade, so no rectangular image or gradient seam can
   appear at the top, bottom, left, or right. */
.lae::before {
  inset: 0;
  opacity: 1;
  background: url("../img/intro-v2/ee-html-background.png") center / cover no-repeat;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 7%, #000 91%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 7%, #000 91%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%);
  mask-composite: intersect;
}

.lae::after { display: none; }

@media (max-width: 760px) {
  .lae::before {
    background-position: 32% center;
    background-size: auto 100%;
  }
}

/* Cover the short gold divider baked into the desktop Gate plate beside the
   Explore button. The mobile composition does not contain that divider. */
@media (min-width: 761px) {
  .g5__copy::after {
    content: "";
    position: absolute;
    z-index: 2;
    left: calc(1507 * var(--u));
    top: calc(402 * var(--u));
    width: calc(13 * var(--u));
    height: calc(78 * var(--u));
    background: #faf6ef;
  }
}

/* The following beach plate switches to a tall crop on tablets and phones.
   Fade its former hard top edge into the blue-gray stage behind it. */
@media (max-width: 900px) {
  .beach-band__img {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
    mask-image: linear-gradient(to bottom, transparent 0, #000 12%);
  }
}