/* Thanksgiving skin for the home page, /find-your-drip/ and the shop -- on from Nov 1
 * through Nov 30, 11:59 pm ET.
 *
 * /harvest.js adds html.harvest in <head> before first paint and fills each .hv-leaves
 * box with falling leaves. Without that class nothing below applies and every .hv box
 * stays display:none. All of it is aria-hidden, catches no clicks and holds still
 * under Reduced Motion. After Dec 1: delete this file, harvest.js, their two tags in
 * each page (index.html, find-your-drip/, shop.html) and the .hv markup, the turkeys
 * included (Justin, 2026-10-31; turkey and shop 2026-11-01). */

.hv { display: none; }
html.harvest .hv { display: block; }

/* Maple takes lavender's accent job, so every button, eyebrow, chosen answer and hover
   turns a soft maple red: warmer and quieter than October's pumpkin, so it reads as a
   new season, not Halloween left on. Gold prices, the head-spa violet and hydration
   teal keep their meaning. 7.4:1 on --ink; the buttons' #1E1033 text is 7:1 on it. */
html.harvest {
  --lav: #EE8A5E; --lav-hi: #F4A47F;
  --hv-soft: rgba(238, 138, 94, .12); --hv-line: rgba(238, 138, 94, .55);
}

/* A maple leaf on the hero eyebrow, both pages. */
html.harvest .hero-title .eyebrow::before,
html.harvest .hero-copy .eyebrow::before {
  content: ""; display: inline-block; width: 15px; height: 15px; margin-right: 8px; vertical-align: -3px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M50 3L56.5 17.5 63.5 13.5 61 34.5 73.5 24 77 31.5 90.5 27.5 85.5 44 94.5 48 72.5 63.5 76 72 56 69.5 52 72.5 52 97 48 97 48 72.5 44 69.5 24 72 27.5 63.5 5.5 48 14.5 44 9.5 27.5 23 31.5 26.5 24 39 34.5 36.5 13.5 43.5 17.5Z' fill='%23E5713F'/%3E%3Cpath d='M50 70V12M50 62L80 36M50 62L20 36' fill='none' stroke='rgba(60,20,10,.35)' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- Falling leaves (harvest.js writes the <i><b><svg> inside) ----------
   Three layers so each motion stays simple: <i> falls the box's height at a steady
   pace, <b> swings side to side, the leaf turns over as it goes. */
.hv-leaves { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hv-leaves i { position: absolute; left: var(--x); top: -44px; width: var(--s); opacity: 0;
  animation: hv-fall var(--d) linear var(--t) infinite; }
.hv-leaves b { display: block; animation: hv-sway var(--sw) ease-in-out var(--t) infinite alternate; }
.hv-leaves svg { display: block; width: 100%; height: auto;
  animation: hv-turn var(--sp) ease-in-out var(--t) infinite alternate; }
.hv-v { fill: none; stroke: rgba(60, 20, 10, .35); stroke-width: 3; stroke-linecap: round; }

/* Leaves tossed up by harvest.js when a blend is matched or a visit is booked. */
.hv-flurry { position: fixed; inset: 0; z-index: 60; pointer-events: none; overflow: hidden; }
.hv-flurry div { position: absolute; }
.hv-flurry svg { display: block; width: 100%; height: auto; }

@keyframes hv-fall { 0% { transform: translateY(0); opacity: 0; } 8%, 88% { opacity: var(--o); }
  100% { transform: translateY(var(--fall, 100vh)); opacity: 0; } }
@keyframes hv-sway { from { transform: translateX(calc(var(--sway) * -1)); } to { transform: translateX(var(--sway)); } }
@keyframes hv-turn { from { transform: rotate(var(--r)) rotateY(0deg); }
  to { transform: rotate(calc(var(--r) + 70deg)) rotateY(150deg); } }

/* A sprig of three leaves tucked over the top-right corner of the card you fill in:
   the IV quiz, the home page's booking form. */
html.harvest .quiz, html.harvest .book-form { position: relative; }
html.harvest .quiz::after, html.harvest .book-form::after {
  content: ""; position: absolute; top: -30px; right: -14px; width: 78px; height: 72px;
  transform: rotate(14deg); pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 96'%3E%3Cg transform='translate(20 34.2) scale(0.6) rotate(-52 50 98)'%3E%3Cpath d='M50 4C60 4 63 12 59 18C71 14 78 28 64 34C79 34 82 51 66 53C79 58 75 74 60 70C62 78 57 84 52 86L52 98H48L48 86C43 84 38 78 40 70C25 74 21 58 34 53C18 51 21 34 36 34C22 28 29 14 41 18C37 12 40 4 50 4Z' fill='%23E39A3B'/%3E%3Cpath d='M50 88V12M50 30L61 24M50 30L39 24M50 46L66 41M50 46L34 41M50 62L61 62M50 62L39 62' fill='none' stroke='rgba(60,20,10,.35)' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(22 38.12) scale(0.56) rotate(38 50 98)'%3E%3Cpath d='M50 3C74 20 82 54 54 86L52 98H48L46 86C18 54 26 20 50 3Z' fill='%23E0B04C'/%3E%3Cpath d='M50 90V14M50 34L62 26M50 34L38 26M50 52L66 42M50 52L34 42M50 70L62 62M50 70L38 62' fill='none' stroke='rgba(60,20,10,.35)' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3Cg transform='translate(16 26.36) scale(0.68) rotate(-6 50 98)'%3E%3Cpath d='M50 3L56.5 17.5 63.5 13.5 61 34.5 73.5 24 77 31.5 90.5 27.5 85.5 44 94.5 48 72.5 63.5 76 72 56 69.5 52 72.5 52 97 48 97 48 72.5 44 69.5 24 72 27.5 63.5 5.5 48 14.5 44 9.5 27.5 23 31.5 26.5 24 39 34.5 36.5 13.5 43.5 17.5Z' fill='%23D45A33'/%3E%3Cpath d='M50 70V12M50 62L80 36M50 62L20 36' fill='none' stroke='rgba(60,20,10,.35)' stroke-width='3' stroke-linecap='round'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35));
}

/* ---------- The turkey (harvest.js draws it into each .hv-turkey) ----------
   Its tail is seven of the falling leaves. .shut holds the fan closed until the bird
   is in view; .live starts the head bob, a double peck every 6.5 s. */
.hv-turkey { position: absolute; width: 60px; pointer-events: none; z-index: 2;
  filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .35)); }
.hv-turkey svg { display: block; width: 100%; height: auto; overflow: visible; }
.hv-flip svg { transform: scaleX(-1); }
.hv-tf { transform-box: view-box; transform-origin: 58px 64px; transform: rotate(var(--a));
  transition: transform .8s cubic-bezier(.3, 1.4, .5, 1) calc(var(--i) * 50ms); }
.hv-turkey.shut .hv-tf { transform: rotate(calc(var(--a) * .15 + 26deg)); transition: none; }
.hv-legs { fill: none; stroke: #E39A3B; stroke-width: 2.6; stroke-linecap: round; }
.hv-wv { fill: none; stroke: rgba(255, 214, 160, .3); stroke-width: 1.6; stroke-linecap: round; }
.hv-hd { transform-box: view-box; transform-origin: 46px 62px; }
.hv-turkey.live .hv-hd { animation: hv-peck 6.5s ease-in-out .9s infinite; }
@keyframes hv-peck { 0%, 72%, 100% { transform: rotate(0); } 76% { transform: rotate(-9deg); }
  80% { transform: rotate(1deg); } 84% { transform: rotate(-8deg); } 88% { transform: rotate(0); } }

/* Where each one stands, feet on an edge. Home: the booking form's top-left corner,
   facing the leaf sprig across the top. Shop: the gift-card note's top-right corner. */
.hv-t-book { left: 26px; top: -55px; }
html.harvest .sp-gift { position: relative; }
.hv-t-gift { right: 10px; top: -55px; }

/* ---------- Home page ---------- */
html.harvest .btn-drip { box-shadow: 0 8px 30px rgba(238, 138, 94, .28); }

/* Hero 1's IV bag swirls autumn amber and leaf green instead of cyan and pink. It is
   the same CSS grade styles.css already puts on this clip, turned the other way: the
   footage was shot gold + emerald, and -20deg sends gold to amber and emerald to leaf
   green. Outranks both of styles.css's .hero canvas rules, phones included. */
html.harvest .hero canvas,
html.harvest .hero .poster { filter: hue-rotate(-20deg) saturate(1.08); }

/* Book a visit: candlelight in place of the lavender wash. Its leaves sit before the
   .wrap (z-index 1), so they fall behind the form. */
html.harvest .book {
  background:
    radial-gradient(88% 52% at 50% 0%, rgba(238, 138, 94, .14), rgba(238, 138, 94, 0) 64%),
    var(--plum);
}

/* ---------- /find-your-drip/ ---------- */
html.harvest .hero::before { background: radial-gradient(55% 50% at 22% 26%, rgba(238, 138, 94, .14), transparent 70%); }
html.harvest .tile:hover, html.harvest .alt:hover { border-color: var(--hv-line); }
html.harvest .tile[aria-pressed="true"] { background: var(--hv-soft); }
html.harvest .contents li { border-color: rgba(238, 138, 94, .42); }
html.harvest .contents.hyd li { border-color: rgba(110, 216, 204, .45); }
html.harvest .lrow .pick { border-color: var(--hv-line); }
html.harvest .lrow .pick:hover { background: var(--hv-soft); }
html.harvest .field input:focus { box-shadow: 0 0 0 3px rgba(238, 138, 94, .22); }
html.harvest .card::before, html.harvest .lineup::before {
  background: linear-gradient(90deg, transparent, var(--lav) 20%, var(--gold) 50%, var(--lav) 80%, transparent); }
html.harvest .close { background: radial-gradient(60% 70% at 50% 115%, rgba(238, 138, 94, .11), transparent 70%); }
/* Leaves drift down the dark sections behind everything; light sections and cards cover them. */
html.harvest .hv-page { position: fixed; z-index: -1; }
/* The turkey stands on the label's top edge on phones, and below the bag, looking up
   at it, on desktop, where the label is printed on the bag itself. */
.hv-t-label { right: 14px; top: -55px; }
.hv-t-bag { right: -34px; bottom: 0; width: 76px; }
@media (min-width: 980px) { html.harvest .hv-t-label { display: none; } }
@media (max-width: 979px) {
  html.harvest .rxlabel { position: relative; }
  html.harvest .hv-t-bag { display: none; }
}

/* Phones and tablets: fewer leaves, and the sprig sits a little tighter to the corner. */
@media (max-width: 979px) {
  .hv-leaves i:nth-child(n+7) { display: none; }
  html.harvest .quiz::after, html.harvest .book-form::after { top: -24px; right: -8px; width: 62px; height: 57px; }
}
@media (prefers-reduced-motion: reduce) {
  .hv-leaves { display: none; }
  .hv-tf { transition: none; }
  .hv-turkey.live .hv-hd { animation: none; }
}