/* ============================================================
   THE DOGS LOTTERY BAND  ·  .pa-lot
   ------------------------------------------------------------
   Rendered by includes/lottery.php (template call or [pa_lottery]).
   Visual language is lifted from Sally's own "TheDogsLottery Social
   Media Graphic" so the website and the Facebook post read as one
   campaign: flat forest green field, gold brush script, white
   lottery balls with green numerals, circular dog portrait, and a
   compliance strip along the bottom.

   Namespaced .pa-lot-* throughout. Loads site-wide (functions.php)
   so the shortcode works on Get Involved / Ways to Give too.
   ============================================================ */

.pa-lot {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(72px, 9vw, 116px) 0;
  background: linear-gradient(168deg, var(--green) 0%, var(--green-d) 74%);
  color: var(--paper-w);
}

/* Soft gold light sitting behind the portrait. */
.pa-lot-glow {
  position: absolute;
  top: -14%;
  right: -6%;
  width: min(760px, 78vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(253, 176, 3, 0.20) 0%, rgba(253, 176, 3, 0.07) 42%, transparent 68%);
  pointer-events: none;
  z-index: -1;
}

/* Faint paw watermark in the far corner, same trick as the trust band. */
.pa-lot::before {
  content: "";
  position: absolute;
  left: -70px;
  bottom: 120px;
  width: 320px;
  height: 320px;
  background: url("../images/paw-only.svg") center / contain no-repeat;
  opacity: 0.045;
  pointer-events: none;
  z-index: -1;
}

.pa-lot-grid {
  display: grid;
  grid-template-columns: 1.04fr 0.96fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
  padding-bottom: clamp(52px, 6vw, 78px);
}

/* ---------- COPY COLUMN ---------------------------------- */

.pa-lot-eyebrow {
  color: var(--gold-l);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s ease 0.05s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s;
}
.pa-lot-eyebrow::before { background: var(--gold-bright); }

.pa-lot-title {
  margin: 18px 0 20px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.pa-lot-script {
  position: relative;
  align-self: flex-start;
  font-family: var(--serif-accent);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(30px, 4vw, 46px);
  line-height: 1.05;
  color: var(--gold-bright);
  padding: 0 10px 6px 2px;
  opacity: 0;
  transform: translateY(18px) rotate(-1deg);
  transition: opacity 0.7s ease 0.12s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s;
}

/* Hand-drawn swoosh under "Play our", as per the social graphic. */
.pa-lot-script::after {
  content: "";
  position: absolute;
  left: 4px;
  right: -6px;
  bottom: -4px;
  height: 15px;
  border-bottom: 3px solid var(--gold-bright);
  border-radius: 50%;
  opacity: 0.85;
  transform: rotate(-1.4deg);
}

.pa-lot-shout {
  font-family: var(--slab);
  font-weight: 800;
  font-size: clamp(46px, 7vw, 88px);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: var(--paper-w);
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease 0.2s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.2s;
}

/* Same gold italic highlight the hero h1 uses (.hero-inner h1 .hl in
   index.css), so the band's headline is set the way the rest of the site
   sets a headline. Scoped to .pa-lot-shout: .hl is not a global rule. */
.pa-lot-shout .hl {
  font-family: var(--serif-accent);
  font-style: italic;
  font-weight: 600;
  font-size: 1.12em;
  color: var(--gold);
}

.pa-lot-lede {
  max-width: 48ch;
  margin: 0 0 30px;
  font-family: var(--serif-body);
  font-size: clamp(16px, 1.15vw, 18px);
  line-height: 1.68;
  color: rgba(251, 246, 231, 0.86);
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s ease 0.28s, transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.28s;
}

/* ---------- THE THREE FACTS, ON DRAWN BALLS -------------- */

/* Same sphere treatment as the balls in the drum, so these read as three that
   have just been drawn out. Figure and wording both sit on the ball. */
.pa-lot-facts {
  list-style: none;
  margin: 0 0 36px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: clamp(12px, 1.8vw, 22px);
}

.pa-lot-facts li {
  opacity: 0;
  will-change: transform;
}

/* They roll in from the right, out of the drum. --roll is the distance and
   --spin the matching rotation, both set per ball in includes/lottery.php, so
   each one rolls rather than slides. */
.pa-lot.is-in .pa-lot-facts li {
  animation: pa-lot-roll-in 1.05s cubic-bezier(0.19, 0.72, 0.28, 1) both;
}
.pa-lot.is-in .pa-lot-facts li:nth-child(1) { animation-delay: 0.30s; }
.pa-lot.is-in .pa-lot-facts li:nth-child(2) { animation-delay: 0.46s; }
.pa-lot.is-in .pa-lot-facts li:nth-child(3) { animation-delay: 0.62s; }

@keyframes pa-lot-pop-in {
  from { opacity: 0; transform: translateY(-22px) scale(0.7); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pa-lot-roll-in {
  from { opacity: 0; transform: translateX(var(--roll, 260px)) rotate(var(--spin, 210deg)); }
  8%   { opacity: 1; }
  to   { opacity: 1; transform: translateX(0) rotate(0deg); }
}

.pa-lot-fact-ball {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: clamp(104px, 11.4vw, 146px);
  aspect-ratio: 1;
  padding: 0 12%;
  border-radius: 50%;
  text-align: center;
  background: radial-gradient(circle at 33% 26%, #ffffff 0%, #f4f4f4 19%, #e2e2e2 45%, #c2c2c2 71%, #949494 100%);
  box-shadow:
    inset -7px -9px 20px rgba(0, 0, 0, 0.32),
    inset 5px 6px 14px rgba(255, 255, 255, 0.98),
    0 10px 22px rgba(0, 0, 0, 0.38);
}

.pa-lot-fact-big {
  font-family: var(--sans);
  font-weight: 800;
  font-size: var(--fs, 26px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: #14181a;
  white-space: nowrap;
}

.pa-lot-fact-small {
  font: 600 clamp(8px, 0.72vw, 10px)/1.3 var(--sans);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #55595c;
}

/* ---------- CALL TO ACTION ------------------------------- */

.pa-lot-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 22px;
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease 0.58s, transform 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) 0.58s;
}

.pa-lot-cta {
  position: relative;
  overflow: hidden;
  background: var(--gold-bright);
  color: var(--green-d);
  padding: 19px 34px;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(253, 176, 3, 0.30), 0 16px 44px rgba(0, 0, 0, 0.22);
}
.pa-lot-cta:hover {
  background: var(--yellow);
  color: var(--green-d);
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(253, 176, 3, 0.42), 0 20px 52px rgba(0, 0, 0, 0.26);
}

/* Gold sheen sweeping across the button on hover. */
.pa-lot-cta::before {
  content: "";
  position: absolute;
  top: -60%;
  bottom: -60%;
  left: -120%;
  width: 55%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.72), transparent);
  transform: skewX(-18deg);
  pointer-events: none;
}
.pa-lot-cta:hover::before { animation: pa-lot-sheen 0.75s ease; }

@keyframes pa-lot-sheen {
  from { left: -120%; }
  to   { left: 175%; }
}

.pa-lot-actions-note {
  margin: 0;
  font: 500 13px/1.5 var(--sans);
  color: rgba(251, 246, 231, 0.58);
}

/* Bee Ethical's Gourmet Society wording is fixed and long, so it is set
   smaller and allowed to run the full width of the copy column rather than
   stacking up as a narrow seven-line tower beside the button. */
.pa-lot-perk {
  margin: 26px 0 0;
  max-width: 78ch;
  font: 400 12.5px/1.62 var(--sans);
  color: rgba(251, 246, 231, 0.62);
  padding-left: 13px;
  border-left: 2px solid var(--gold-d);
  opacity: 0;
  transition: opacity 0.6s ease 0.7s;
}

/* ---------- VISUAL COLUMN: THE DRUM AND THE DOG ---------- */

.pa-lot-visual {
  position: relative;
  justify-self: center;
  width: min(640px, 100%);
  aspect-ratio: 1.04;
}

.pa-lot-machine {
  position: absolute;
  left: 0;
  bottom: 2%;
  width: 78%;
  opacity: 0;
  transform: translateY(24px) scale(0.95);
  transition: opacity 0.8s ease 0.1s, transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) 0.1s;
}

/* The cage. Cream rim, gold outer ring, dark glassy interior so the white
   balls read against it. Ball positions come from the physics loop in
   includes/lottery.php; everything here is just the shell. */
.pa-lot-drum {
  position: relative;
  z-index: 2;
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: hidden;
  border: 11px solid var(--paper-w);
  background:
    radial-gradient(circle at 34% 24%, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.04) 38%, transparent 62%),
    radial-gradient(circle at 46% 40%, #3f8154 0%, #29563a 46%, #0e2016 94%);
  box-shadow:
    inset 0 0 52px rgba(0, 0, 0, 0.58),
    0 28px 64px rgba(0, 0, 0, 0.42),
    0 0 0 3px rgba(253, 176, 3, 0.38);
}

/* Wire frame. Turning at exactly the rate the balls feel at the wall, so the
   drum visibly drives them rather than the two just happening at once. */
.pa-lot-cage {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  will-change: transform;
}

.pa-lot-cage-ribs {
  fill: none;
  stroke: rgba(251, 246, 231, 0.10);
  stroke-width: 1.3;
}

.pa-lot-cage-paddles { fill: rgba(251, 246, 231, 0.17); }
.pa-lot-cage-hatch   { fill: rgba(253, 176, 3, 0.50); }
.pa-lot-cage-hub     { fill: rgba(251, 246, 231, 0.16); }

/* Curved glass reflection, painted over the balls. */
.pa-lot-drum-glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 5;
  background:
    radial-gradient(ellipse 44% 30% at 29% 19%, rgba(255, 255, 255, 0.28), transparent 72%),
    radial-gradient(ellipse 30% 16% at 74% 84%, rgba(255, 255, 255, 0.09), transparent 72%);
}

/* ---------- THE BALLS ------------------------------------ */

.pa-lot-balls {
  position: absolute;
  inset: 0;
  container-type: inline-size;
}

/* All the same size now. Parked at dead centre; the physics loop writes a
   translate3d on top of the centring translate every frame. */
.pa-lot-ball {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 14.8%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 33% 26%, #ffffff 0%, #f4f4f4 19%, #e2e2e2 45%, #c2c2c2 71%, #949494 100%);
  box-shadow:
    inset -5px -7px 15px rgba(0, 0, 0, 0.30),
    inset 3px 4px 10px rgba(255, 255, 255, 0.92),
    0 5px 13px rgba(0, 0, 0, 0.40);
  font-family: var(--sans);
  font-weight: 800;
  font-size: 15px;
  font-size: 6.2cqw;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #14181a;
  will-change: transform;
  transform: translate(-50%, -50%);
}

/* ---------- CRANK ---------------------------------------- */

.pa-lot-crank {
  position: absolute;
  left: -9%;
  top: 41%;
  width: 19%;
  height: auto;
  overflow: visible;
  z-index: 3;
  filter: drop-shadow(0 5px 10px rgba(0, 0, 0, 0.4));
}

.pa-lot-crank [data-pa-lot-crank-arm] { transform-origin: 32px 32px; will-change: transform; }
.pa-lot-crank-plate { fill: var(--gold-d); }
.pa-lot-crank-arm   { fill: var(--gold); }
.pa-lot-crank-knob  { fill: var(--paper-w); }
.pa-lot-crank-hub   { fill: var(--brown-d); }

/* ---------- GROUND -------------------------------------- */

/* No stand. Matt did not want one, and the drum reads fine as a machine with
   the crank on it. What both the drum and the dog do need is a single soft
   shadow so they sit on the same surface instead of floating separately. */
.pa-lot-ground {
  position: absolute;
  left: 3%;
  right: 1%;
  bottom: -2%;
  height: 11%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.22) 46%, transparent 72%);
  filter: blur(3px);
  z-index: 1;
  pointer-events: none;
}

/* ---------- THE DOG -------------------------------------- */

/* Sits in FRONT of the drum, overlapping it, so the two read as one object
   rather than two things parked side by side. */
.pa-lot-dog {
  position: absolute;
  right: -6%;
  bottom: -4%;
  width: 76%;
  height: auto;
  z-index: 6;
  filter: drop-shadow(-14px 12px 22px rgba(0, 0, 0, 0.42));
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.8s ease 0.3s, transform 0.9s cubic-bezier(0.2, 0.9, 0.25, 1) 0.3s;
}

/* ---------- REVEAL STATE --------------------------------- */

.pa-lot.is-in .pa-lot-eyebrow,
.pa-lot.is-in .pa-lot-script,
.pa-lot.is-in .pa-lot-shout,
.pa-lot.is-in .pa-lot-lede,
.pa-lot.is-in .pa-lot-facts li,
.pa-lot.is-in .pa-lot-actions,
.pa-lot.is-in .pa-lot-machine,
.pa-lot.is-in .pa-lot-dog {
  opacity: 1;
  transform: none;
}

.pa-lot.is-in .pa-lot-script { transform: rotate(-1deg); }
.pa-lot.is-in .pa-lot-perk { opacity: 1; }

/* ---------- COMPLIANCE STRIP ----------------------------- */

.pa-lot-legal {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding-top: 22px;
  padding-bottom: 26px;
  border-top: 1px solid rgba(251, 246, 231, 0.14);
}

.pa-lot-legal p {
  margin: 0;
  font: 400 12.5px/1.65 var(--sans);
  color: rgba(251, 246, 231, 0.6);
}

.pa-lot-legal a { color: var(--gold-l); text-decoration: underline; text-underline-offset: 2px; }
.pa-lot-legal a:hover { color: var(--gold-bright); }

.pa-lot-legal-fine {
  display: block;
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.6;
  color: rgba(251, 246, 231, 0.52);
}

.pa-lot-18 {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2px solid rgba(251, 246, 231, 0.5);
  font: 800 13px/1 var(--slab);
  letter-spacing: 0.02em;
  color: var(--paper-w);
}

/* ---------- RESPONSIVE ----------------------------------- */

@media (max-width: 980px) {
  .pa-lot-grid { grid-template-columns: 1fr; gap: clamp(44px, 8vw, 64px); }
  .pa-lot-visual { width: min(540px, 100%); order: 2; }
  .pa-lot-copy { order: 1; }
  .pa-lot::before { display: none; }
}

@media (max-width: 620px) {
  /* Nowhere to roll from on a narrow screen, so they just pop up. Sized by
     flex rather than a fixed width so all three always sit on one row, right
     down to a 320px viewport, instead of the third wrapping onto its own. */
  .pa-lot-facts { gap: 8px; flex-wrap: nowrap; }
  .pa-lot-facts li { flex: 1 1 0; min-width: 0; }
  .pa-lot.is-in .pa-lot-facts li { animation-name: pa-lot-pop-in; animation-duration: 0.6s; }
  .pa-lot-fact-ball { width: 100%; max-width: 118px; margin: 0 auto; gap: 3px; padding: 0 8%; }
  .pa-lot-fact-big { font-size: clamp(16px, 5.2vw, 24px); }
  .pa-lot-fact-small { font-size: clamp(7px, 2vw, 9px); letter-spacing: 0.05em; }
  .pa-lot-actions { width: 100%; }
  .pa-lot-cta { width: 100%; justify-content: center; }
  /* Give the drum more of the narrow viewport and let the dog run off the
     right edge rather than shrinking both to postage stamps. */
  /* Give the drum most of the narrow viewport; the dog tucks in front. */
  .pa-lot-visual { width: 100%; aspect-ratio: 1.02; }
  .pa-lot-machine { width: 78%; }
  .pa-lot-dog { width: 70%; right: -8%; }
  .pa-lot-legal { flex-direction: column; gap: 12px; }
}

/* ---------- REDUCED MOTION ------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .pa-lot-eyebrow,
  .pa-lot-script,
  .pa-lot-shout,
  .pa-lot-lede,
  .pa-lot-actions,
  .pa-lot-perk,
  .pa-lot-machine,
  .pa-lot-dog {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .pa-lot-script { transform: rotate(-1deg) !important; }
  .pa-lot-facts li {
    opacity: 1 !important;
    animation: none !important;
    transform: none !important;
  }
  /* The physics loop settles the balls into a resting pile and draws one
     frame, so the cage still looks full, it just holds still. */
  .pa-lot-cage,
  .pa-lot-crank [data-pa-lot-crank-arm] { transform: none !important; }
  .pa-lot-cta:hover::before { animation: none !important; }
}