/* Pooch Purrfect Pet Spa: Fall and Thanksgiving
   Loaded on every page only while FALL is True in tools/build.py. Built the same way as
   spooky.css: it adds things in corners and empty space and changes nothing else, so
   removing this file's <link> puts the site back exactly as it was. Every decoration sits
   behind the page's text and buttons, can't be clicked, and is skipped by screen readers.
   The drawings are in assets/fall/. Leaves are in the brand colors (pumpkin, mustard,
   pink, lavender) instead of the usual browns, so the season still looks like her salon. */

:root {
  --pumpkin: #f28f3b;
  --mustard: #f2c14e;
  --harvest-soft: #fdf0dc;
  --scatter: url("assets/fall/scatter.svg");
}

.hero, .page-head, .award-band, .closer, .table-talk, .locked, .site-footer,
.section.tint-pink, .section.tint-lav, .section.tint-aqua { position: relative; isolation: isolate; }

/* ---------- A twig of leaves hanging into the top corner ---------- */
.hero::before, .page-head::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; right: 0; width: clamp(110px, 26vw, 250px); aspect-ratio: 230 / 190;
  background: url("assets/fall/twig.svg") right top / contain no-repeat;
  opacity: .9;
}
.hero::before { width: clamp(78px, 22vw, 250px); }
.page-head::before { width: clamp(78px, 20vw, 210px); }
/* Keeps the award line clear of the twig on phones. */
.hero-award { max-width: min(34ch, calc(100% - 62px)); }
@media (min-width: 900px) { .hero-award { max-width: 34ch; } }

/* ---------- One leaf drifts into the home page, once ----------
   It falls from above the top edge, sways side to side on the way down, and comes to
   rest in the hero's right margin. Same timing as the Halloween spider: just after the
   two hero photos settle. Nothing moves for devices that ask for reduced motion. */
/* Desktop only: on a phone there's no empty space for it to land in. */
.hero::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; display: none;
  background: url("assets/fall/leaf.svg") center / contain no-repeat;
  rotate: 14deg;
}
@media (min-width: 900px) { .hero::after { display: block; bottom: 34px; left: 47%; width: 50px; aspect-ratio: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .hero::after { animation: leaf-fall 3.2s cubic-bezier(.35, .1, .45, 1) both .9s; }
  @keyframes leaf-fall {
    0%   { translate: -30px -420px; rotate: -40deg; opacity: 0; }
    10%  { opacity: 1; }
    30%  { translate: 40px -290px; rotate: 30deg; }
    55%  { translate: -34px -150px; rotate: -24deg; }
    80%  { translate: 18px -40px; rotate: 26deg; }
    100% { translate: 0 0; rotate: 14deg; }
  }
}

/* ---------- Leaves over the awards ---------- */
.award-band::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 10px; right: 12px; width: 110px; aspect-ratio: 210 / 90;
  background: var(--pink); opacity: .6;
  -webkit-mask: var(--scatter) center / contain no-repeat; mask: var(--scatter) center / contain no-repeat;
}
@media (min-width: 900px) { .award-band::before { top: 24px; right: 7%; width: 200px; } }

/* ---------- Pumpkins and acorns in the bottom corners of the tinted sections ---------- */
.section.tint-pink::after, .section.tint-lav::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  bottom: 0; right: 5%; width: 76px; aspect-ratio: 182 / 126;
  background: url("assets/fall/pumpkins.svg") center bottom / contain no-repeat;
}
.section.tint-lav::after { bottom: 6px; right: auto; left: 5%; width: 58px; aspect-ratio: 130 / 110; background-image: url("assets/fall/acorns.svg"); }
@media (min-width: 900px) {
  .section.tint-pink::after { width: 124px; }
  .section.tint-lav::after { width: 88px; bottom: 10px; }
}

/* ---------- A pumpkin pie with a paw print, in the aqua sections ---------- */
.section.tint-aqua::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  bottom: 10px; right: 5%; width: 82px; aspect-ratio: 160 / 90;
  background: url("assets/fall/pie.svg") center bottom / contain no-repeat;
}
@media (min-width: 900px) { .section.tint-aqua::after { width: 128px; bottom: 16px; } }

/* ---------- Leaves blowing along the dark bands: the existing-client prices and the footer ----------
   One drawing used as a mask, so each band sets its own color. */
.locked::before, .site-footer::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 14px; right: 4%; width: 190px; aspect-ratio: 320 / 64;
  background: var(--mustard); opacity: .45;
  -webkit-mask: url("assets/fall/drift.svg") center / contain no-repeat; mask: url("assets/fall/drift.svg") center / contain no-repeat;
}
.site-footer::before { background: var(--pink); opacity: .35; top: 18px; width: 150px; }
@media (min-width: 900px) {
  .locked::before { width: 300px; top: 26px; }
  .site-footer::before { width: 240px; right: max(4%, calc((100vw - var(--max)) / 2)); }
}

/* ---------- A dog in a turkey-feather fan, peeking over the footer ---------- */
.closer::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  bottom: 0; right: 5%; width: 96px; aspect-ratio: 240 / 150;
  background: url("assets/fall/turkey-dog.svg") center bottom / contain no-repeat;
}
@media (min-width: 900px) { .closer::after { width: 150px; right: max(5%, calc((100vw - var(--max)) / 2 - 160px)); } }

/* ---------- Thanksgiving: cornucopias, corn, turkeys ----------
   Added November 1, 2026 so the site reads as Thanksgiving, not just fall. */

/* A turkey standing in the gap under the first hero photo. */
.arches::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  right: 0; bottom: -10px; width: 58px; aspect-ratio: 188 / 152; /* phones: beside the caption */
  background: url("assets/fall/turkey.svg") center bottom / contain no-repeat;
}
@media (min-width: 900px) { .arches::after { right: auto; left: 14%; bottom: 40px; width: 104px; } }

/* A horn of plenty in the bottom-left corner of the pink sections, across from the pumpkins. */
.section.tint-pink::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  bottom: 4px; left: 3%; width: 96px; aspect-ratio: 246 / 158;
  background: url("assets/fall/cornucopia.svg") left bottom / contain no-repeat;
}
@media (min-width: 900px) { .section.tint-pink::before { width: 150px; bottom: 8px; } }

/* A second one at the foot of each page heading, on screens wide enough to have room. */
.page-head::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none; display: none;
  bottom: 6px; right: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
  width: 170px; aspect-ratio: 246 / 158;
  background: url("assets/fall/cornucopia.svg") center bottom / contain no-repeat;
}
@media (min-width: 900px) { .page-head::after { display: block; } }

/* Two silly corn cobs in the bottom-left corner of the aqua sections, across from the pie. */
.section.tint-aqua::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  bottom: 4px; left: 4%; width: 62px; aspect-ratio: 1;
  background: url("assets/fall/corn.svg") center bottom / contain no-repeat;
}
@media (min-width: 900px) { .section.tint-aqua::before { width: 96px; } }

/* A second turkey in the Thanksgiving section, across from the leaf pile. */
.table-talk::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  bottom: 6px; left: 5%; width: 76px; aspect-ratio: 188 / 152;
  background: url("assets/fall/turkey.svg") center bottom / contain no-repeat;
  transform: scaleX(-1);
}
@media (min-width: 900px) { .table-talk::before { width: 110px; left: max(3%, calc((100vw - var(--max)) / 2 - 30px)); } }

/* ---------- 404 ---------- */
.lost-leaf { width: 72px; margin-bottom: 18px; transform: rotate(-14deg); }

/* ---------- Sharing Thanksgiving (home page) ----------
   The safe foods sit on a plate; everything else is listed beside it as "keep off it". */
.table-talk { background: var(--harvest-soft); padding: 64px 0; overflow: hidden; }
.table-grid { display: grid; gap: 40px; }
.table-copy h2 { font-variation-settings: "WONK" 1; font-size: clamp(2rem, 7vw, 3.2rem); max-width: 15ch; }
.table-copy .lede { color: var(--ink); max-width: 38ch; }
.table-help { max-width: 44ch; color: var(--muted); font-size: .98rem; margin: 0; }
.table-help a[href^="tel"] { white-space: nowrap; font-weight: 700; }

.table-food { display: grid; gap: 34px; align-items: center; }
.plate {
  width: min(100%, 340px); aspect-ratio: 1; justify-self: center;
  display: grid; place-content: center; text-align: center; padding: 18%;
  background: var(--white); border: 2px solid var(--ink); border-radius: 50%;
  box-shadow: inset 0 0 0 14px var(--white), inset 0 0 0 16px var(--mustard), 6px 8px 0 var(--pumpkin);
}
.plate h3 { font-size: 1.3rem; margin: 0 0 .5em; }
.plate ul { list-style: none; margin: 0; padding: 0; font-size: .98rem; line-height: 1.35; }
.plate li + li { margin-top: .55em; padding-top: .55em; border-top: 1.5px dotted var(--line); }

.off-plate h3 { font-size: 1.3rem; margin: 0 0 .6em; }
.off-plate ul { list-style: none; margin: 0; padding: 0; }
.off-plate li { position: relative; padding: 0 0 0 30px; margin-bottom: .55em; line-height: 1.4; }
/* A small crossed-out mark: these stay off the plate. */
.off-plate li::before, .off-plate li::after {
  content: ""; position: absolute; left: 4px; top: .7em; width: 15px; height: 2.5px; border-radius: 2px; background: var(--pumpkin);
}
.off-plate li::before { rotate: 45deg; }
.off-plate li::after { rotate: -45deg; }

/* Somebody's dog went diving into the leaves. */
.table-talk::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  bottom: 0; right: 4%; width: 110px; aspect-ratio: 220 / 124;
  background: url("assets/fall/leaf-pile.svg") center bottom / contain no-repeat;
}
.table-talk { padding-bottom: 96px; }

@media (min-width: 900px) {
  .table-talk::after { width: 170px; right: max(3%, calc((100vw - var(--max)) / 2 - 40px)); }
  .table-talk { padding: 104px 0; }
  .table-grid { grid-template-columns: 5fr 7fr; gap: 64px; align-items: center; }
  .table-food { grid-template-columns: auto 1fr; gap: 44px; }
  .plate { width: 300px; }
}
@media (min-width: 1100px) { .plate { width: 330px; } }