/* ==========================================================================
   Absolutely Kili - section patterns (10 Nov 2026)
   Owner, in order: "add patterns to other sections and footer, don't overuse",
   "remove mountain svg, focus on safari pattern", "choose one or two patterns
   only", "don't make patterns so big".

   Two of the site's own safari patterns only:
     contours  topographic lines (the main pattern)
     leopard   rosettes from the motif band (the accent)
   Each is a small mask inked in a site token, tucked into one corner or edge and
   faded with a radial mask, so it frames the section and never sits behind copy.

     invitation          contours, right edge behind the photo
     most-loved          leopard, top-right corner
     Kilimanjaro routes  white contours, two opposite corners
     where you'll travel contours, top-right corner
     how it works        leopard, bottom-left corner
     travellers say      contours, bottom-left corner
     footer              contours, top-right corner
   ========================================================================== */

:root {
  --ak-pat-topo: url("../images/patterns/topo-contour-mask.webp");
  --ak-pat-leopard: url("../images/patterns/leopard-mask.png");
  --ak-pat-fade: radial-gradient(closest-side, #000 25%, transparent 100%);
  --ak-pat-size: min(480px, 36vw);
}

/* Shared recipe for every pattern below. */
section.att-pattern-section:has(.ak-stamp-host)::after,
#ak-featured-tours::after,
section.bg-green-900.att-home-corner-pattern::before,
section.bg-green-900.att-home-corner-pattern::after,
#ak-where-travel::after,
#ak-plan-journey::after,
#testimonials::after,
.ak-foot::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  width: var(--ak-pat-size);
  aspect-ratio: 1;
  background-color: var(--clay);
  opacity: .14;
  -webkit-mask: var(--ak-pat-topo) 50% 50% / 115% auto no-repeat, var(--ak-pat-fade);
          mask: var(--ak-pat-topo) 50% 50% / 115% auto no-repeat, var(--ak-pat-fade);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}
/* The leopard ones. */
#ak-featured-tours::after,
#ak-plan-journey::after {
  opacity: .13;
  -webkit-mask: var(--ak-pat-leopard) 0 0 / 820px auto repeat, var(--ak-pat-fade);
          mask: var(--ak-pat-leopard) 0 0 / 820px auto repeat, var(--ak-pat-fade);
  -webkit-mask-composite: source-in;
          mask-composite: intersect;
}

/* The flat wallpaper texture under these sections goes, so patterns never double up. */
section.att-pattern-section:has(.ak-stamp-host)::before,
#ak-featured-tours::before,
#ak-where-travel::before,
#ak-plan-journey::before,
#testimonials::before { content: none; }

/* Placement: alternating sides down the page. */
section.att-pattern-section:has(.ak-stamp-host)::after { top: 50%; right: -10%; transform: translateY(-50%); }
#ak-featured-tours::after { top: -8%; right: -9%; }
section.bg-green-900.att-home-corner-pattern > .container-x { z-index: 1; }
section.bg-green-900.att-home-corner-pattern::before,
section.bg-green-900.att-home-corner-pattern::after { background-color: #fff; opacity: .1; mix-blend-mode: normal; }
section.bg-green-900.att-home-corner-pattern::before { top: -14%; left: -10%; }
section.bg-green-900.att-home-corner-pattern::after { top: auto; right: -10%; bottom: -14%; transform: rotate(180deg); }
#ak-where-travel::after { top: -10%; right: -9%; transform: rotate(90deg); }
#ak-plan-journey::after { bottom: -10%; left: -9%; }
#testimonials::after { bottom: -12%; left: -9%; transform: scaleX(-1); }
.ak-foot { isolation: isolate; }
.ak-foot::after { z-index: -1; top: -10%; right: -8%; transform: scaleX(-1); opacity: .12; }

/* Phones: the same corners, smaller and quieter. */
@media (max-width: 767px) {
  :root { --ak-pat-size: 72vw; }
  section.att-pattern-section:has(.ak-stamp-host)::after { top: 22%; right: -36vw; transform: none; opacity: .12; }
  #ak-featured-tours::after { top: -4%; right: -30vw; opacity: .12; }
  section.bg-green-900.att-home-corner-pattern::before { top: -6%; left: -32vw; }
  section.bg-green-900.att-home-corner-pattern::after { right: -32vw; bottom: -6%; }
  #ak-where-travel::after { top: -4%; right: -32vw; }
  #ak-plan-journey::after { left: -32vw; bottom: -4%; }
  #testimonials::after { left: -32vw; bottom: -4%; }
  .ak-foot::after { top: -4%; right: -32vw; opacity: .1; }
}

@media print {
  section.att-pattern-section:has(.ak-stamp-host)::after,
  #ak-featured-tours::after,
  section.bg-green-900.att-home-corner-pattern::before,
  section.bg-green-900.att-home-corner-pattern::after,
  #ak-where-travel::after,
  #ak-plan-journey::after,
  #testimonials::after,
  .ak-foot::after { display: none; }
}