/* Homepage-only evening image treatment.
   Uses the real Orchard Route festoon photography and removes the artificial bulb-dot effect. */

.home-intro {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #180f08;
}

.home-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
  background:
    radial-gradient(circle at 18% 18%, rgba(253, 213, 101, .18), transparent 18rem),
    radial-gradient(circle at 82% 24%, rgba(239, 149, 45, .16), transparent 22rem),
    linear-gradient(180deg, rgba(24, 15, 8, .62), rgba(24, 15, 8, .46)),
    url("../img/tree-lights-cosy.png") center center / cover no-repeat;
}

.home-intro::after {
  content: none !important;
}

.home-intro > .section-inner {
  position: relative;
  z-index: 1;
}

.makers-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff6d5;
  background: #180f08;
}

.makers-section::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 20%, rgba(253, 213, 101, .16), transparent 16rem),
    radial-gradient(circle at 78% 16%, rgba(209, 108, 35, .14), transparent 20rem),
    linear-gradient(180deg, rgba(24, 15, 8, .66), rgba(24, 15, 8, .50)),
    url("../img/festoon-lights.png") center center / cover no-repeat;
}

.makers-section > .section-inner {
  position: relative;
  z-index: 1;
}

.makers-section .section-heading h2,
.makers-section .section-heading > p:not(.section-label) {
  color: #fff6d5;
}

.makers-section .section-label {
  color: #fdd565;
}

/* Keep homepage cards warm and softly lit, but without drawing literal bulbs. */
.home-intro-panel::before,
.home-final-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at top left, rgba(253, 213, 101, .10), transparent 32%),
    radial-gradient(ellipse at top right, rgba(239, 149, 45, .08), transparent 34%),
    radial-gradient(ellipse at bottom center, rgba(143, 46, 18, .06), transparent 38%);
  opacity: 1;
}

.home-intro-panel > *,
.home-final-panel > * {
  position: relative;
  z-index: 1;
}

@media (max-width: 700px) {
  .home-intro::before {
    background:
      linear-gradient(180deg, rgba(24, 15, 8, .68), rgba(24, 15, 8, .54)),
      url("../img/tree-lights-cosy.png") center center / cover no-repeat;
  }

  .makers-section::before {
    background:
      linear-gradient(180deg, rgba(24, 15, 8, .70), rgba(24, 15, 8, .56)),
      url("../img/festoon-lights.png") center center / cover no-repeat;
  }
}