/* Pooch Purrfect Pet Spa: Halloween
   Loaded on every page only while HALLOWEEN is True in tools/build.py. 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/spooky/. */

:root {
  --pumpkin: #f28f3b;
  --pumpkin-soft: #ffeeda;
  --web: url("assets/spooky/web.svg");
  --bats: url("assets/spooky/bats.svg");
}

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

/* ---------- Cobwebs in the corners ----------
   One drawing, tinted and flipped to fit whichever corner it's in. */
.hero::before, .page-head::before, .site-footer::before, .locked::before, .howl::before, .section.tint-aqua::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; right: 0; width: clamp(104px, 26vw, 230px); aspect-ratio: 1;
  background: var(--ink); opacity: .2;
  -webkit-mask: var(--web) 0 0 / 100% 100% no-repeat; mask: var(--web) 0 0 / 100% 100% no-repeat;
  transform: scaleX(-1);
}
.site-footer::before, .locked::before { background: var(--white); opacity: .13; }
.site-footer::before { width: clamp(84px, 16vw, 150px); }
.page-head::before { width: clamp(70px, 20vw, 210px); }
.howl::before { opacity: .26; width: clamp(120px, 28vw, 270px); }

/* ---------- The spider ----------
   Hangs from the top of the first section on a thread. Kept out of the way of the text:
   short thread by default, long one only when the screen has a margin to hang it in. */
.hero::after, .page-head::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; right: 6px; width: 34px; height: 46px;
  background: url("assets/spooky/spider.svg") 50% 100% / 100% auto no-repeat,
              linear-gradient(var(--ink), var(--ink)) 50% 0 / 1.5px calc(100% - 26px) no-repeat;
  transform-origin: 50% 0;
}
.page-head::after { display: none; }
.hero-award { max-width: min(34ch, calc(100% - 40px)); }
@media (min-width: 900px) {
  .hero::after, .page-head::after { display: block; right: 10px; width: 44px; height: 66px; }
  .hero-award { max-width: 34ch; }
}
@media (min-width: 1260px) {
  .hero::after, .page-head::after { right: max(12px, calc((100vw - var(--max)) / 2 - 64px)); width: 54px; height: 190px; background-size: 100% auto, 1.5px calc(100% - 40px); }
  .page-head::after { height: 130px; }
}
/* One moment on load: the spider drops in with the two hero photos, then barely sways. */
@media (prefers-reduced-motion: no-preference) {
  .hero::after, .page-head::after { animation: spider-drop 1.1s cubic-bezier(.3, 1.4, .5, 1) both .5s, spider-sway 6s ease-in-out 1.6s infinite alternate; }
  @keyframes spider-drop { from { translate: 0 -105%; } to { translate: 0 0; } }
  @keyframes spider-sway { from { rotate: -2.5deg; } to { rotate: 2.5deg; } }
}

/* ---------- Bats over the awards ---------- */
.award-band::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 8px; right: 12px; width: 100px; aspect-ratio: 2;
  background: var(--lav); opacity: .7;
  -webkit-mask: var(--bats) center / contain no-repeat; mask: var(--bats) center / contain no-repeat;
}
@media (min-width: 900px) { .award-band::before { top: 22px; right: 7%; width: 190px; } }

/* ---------- A pumpkin and a ghost dog 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: 58px; aspect-ratio: 140 / 124;
  background: url("assets/spooky/pumpkin.svg") center bottom / contain no-repeat;
}
.section.tint-lav::after { bottom: 8px; right: auto; left: 5%; width: 46px; aspect-ratio: 150 / 170; background-image: url("assets/spooky/ghost-dog.svg"); transform: rotate(-6deg); }
@media (min-width: 900px) {
  .section.tint-pink::after { width: 94px; }
  .section.tint-lav::after { width: 74px; bottom: 12px; }
}

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

/* ---------- 404 ---------- */
.lost-ghost { width: 96px; margin-bottom: 18px; transform: rotate(-6deg); }

/* ---------- Howl-O-Ween costume contest (home page) ---------- */
.howl { background: var(--pumpkin-soft); padding: 56px 0 60px; overflow: hidden; }
.howl h2 { font-variation-settings: "WONK" 1; font-size: clamp(2.05rem, 7.6vw, 3.7rem); max-width: 19ch; }
.howl .lede { color: var(--ink); max-width: 36ch; margin-bottom: 0; }
.howl-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "title title" "lede dog"; gap: 0 14px; align-items: end; }
.howl-head h2 { grid-area: title; padding-right: 56px; }
.howl-head .lede { grid-area: lede; }
.howl-dog { grid-area: dog; width: clamp(96px, 27vw, 250px); margin-bottom: 2px; }
.howl-enter { margin-top: 36px; padding-top: 26px; border-top: 1.5px solid var(--ink); }
.howl-sub { font-size: 1.5rem; margin-bottom: 22px; }
.howl .steps { gap: 22px; }
.howl .steps li { min-height: 42px; }
.howl .steps h3 { margin-top: 7px; }
.howl-win { display: grid; gap: 34px; margin-top: 38px; padding-top: 30px; border-top: 1.5px solid var(--ink); }
/* The deadline hangs on a pet tag, like the hours and the locked rates. */
.howl-tag { position: relative; display: inline-flex; flex-direction: column; margin: 0 0 20px 4px; padding: 13px 26px 15px 56px; background: var(--pumpkin); color: var(--ink); border-radius: 44px 18px 18px 44px; transform: rotate(-4deg); }
.howl-tag::before { content: ""; position: absolute; left: 19px; top: 50%; width: 17px; height: 17px; margin-top: -8.5px; border-radius: 50%; background: var(--pumpkin-soft); box-shadow: 0 0 0 4px var(--ink); }
.howl-tag span { font-size: .9rem; font-weight: 700; }
.howl-tag b { font-family: var(--display); font-variation-settings: "WONK" 1; font-weight: 600; font-size: 1.9rem; line-height: 1.05; letter-spacing: -.01em; white-space: nowrap; }
.howl-line { font-size: 1.12rem; max-width: 34ch; }
.howl-note { margin: 16px 0 0; color: var(--muted); }
.howl.is-over .live, .howl.is-over .howl-enter { display: none; }
.howl.is-over .howl-win { border-top: 0; padding-top: 0; }

.prizes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; align-content: start; }
.prizes li { display: grid; grid-template-columns: 62px 1fr; gap: 16px; align-items: center; font-family: var(--display); font-weight: 600; font-size: 1.3rem; line-height: 1.15; letter-spacing: -.01em; }
.prizes .rosette { width: 62px; }

/* Past looks, pegged to a strand of web like snapshots on a line. */
.looks { margin-top: 48px; }
.looks h3 { font-size: 1.5rem; margin-bottom: 4px; }
.line { list-style: none; margin: 0; display: grid; grid-auto-flow: column; grid-auto-columns: min(58vw, 220px); gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 26px var(--gutter) 22px; scroll-padding-inline: var(--gutter); scrollbar-width: thin; }
.line li { position: relative; scroll-snap-align: start; padding-top: 16px; }
.line li::before { content: ""; position: absolute; top: 0; left: -18px; right: -18px; border-top: 2px solid var(--ink); }
.line li:first-child::before { left: -200px; }
.line li:last-child::before { right: -200px; }
.line li::after { content: ""; position: absolute; top: -9px; left: 50%; width: 11px; height: 30px; margin-left: -5.5px; border-radius: 4px; background: var(--pumpkin); border: 1.5px solid var(--ink); }
.look { margin: 0; padding: 8px 8px 12px; background: var(--white); border: 1.5px solid var(--ink); border-radius: 16px; transform: rotate(-2.2deg); transform-origin: 50% 0; }
.line li:nth-child(even) .look { transform: rotate(1.8deg); }
.line li:nth-child(3n) .look { transform: rotate(-.8deg); }
.line li:nth-child(even)::after { background: var(--pink); }
.line li:nth-child(3n)::after { background: var(--aqua); }
.look img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 10px; background: var(--pumpkin-soft); }
.look figcaption { margin: 9px 4px 0; font-size: .92rem; font-weight: 600; line-height: 1.3; }

.howl-foot { margin-top: 26px; }
.howl-foot p { max-width: 60ch; margin-bottom: .6em; }
.howl-fine { font-size: .9rem; color: var(--muted); }

@media (min-width: 700px) {
  .howl .steps { grid-template-columns: 1fr 1fr; gap: 28px 40px; }
  .howl-win { grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
}
@media (min-width: 900px) {
  .howl { padding: 88px 0 92px; }
  .howl-head { grid-template-areas: "title dog" "lede dog"; gap: 0 48px; }
  .howl-head h2 { padding-right: 0; align-self: end; }
  .howl-head .lede { align-self: start; }
  .howl-dog { align-self: center; margin-right: 11%; }
  .howl-enter { margin-top: 48px; padding-top: 34px; }
  .howl .steps { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .howl .steps h3 { margin-top: 0; }
  .howl-win { margin-top: 56px; padding-top: 44px; gap: 72px; }
  .howl-tag b { font-size: 2.3rem; }
  .prizes { gap: 18px; }
  .prizes li { grid-template-columns: 78px 1fr; gap: 20px; font-size: 1.55rem; }
  .prizes .rosette { width: 78px; }
  .looks { margin-top: 72px; }
}
@media (min-width: 1140px) {
  .line { grid-auto-flow: row; grid-template-columns: repeat(6, 1fr); gap: 22px; max-width: 1320px; margin: 0 auto; overflow: visible; padding-inline: var(--gutter); }
  .line li::before { left: -22px; right: -22px; }
  .line li:first-child::before { left: -50vw; }
  .line li:last-child::before { right: -50vw; }
}