/* Eon homepage hero options (PREVIEW 2026-10-18). A "The offer" (dark), B "Clean split" (white + pale panel),
   C "Lab report" (navy, turntable + COA card). Only the hero section changes; everything is scoped to .hx. */
.hx { --hx-ink: #0A1320; --hx-ink-2: #36414F; --hx-muted: #5D6876; --hx-slate: #3A5D7A; --hx-line: #E4E8EC;
  --hx-gold: linear-gradient(100deg, #FBE7A8 0%, #EBC461 52%, #D8A43A 100%); --hx-ease: cubic-bezier(.16, 1, .3, 1);
  position: relative; overflow: hidden; font-family: var(--font-sans); isolation: isolate; }
.hx *, .hx *::before, .hx *::after { box-sizing: border-box; }
.hx__in { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding-inline: clamp(16px, 4vw, 48px); }
.hx__flag { display: inline-flex; align-items: center; gap: .55rem; margin: 0; font: 500 .72rem/1.2 var(--font-mono); letter-spacing: .16em; text-transform: uppercase; }
.hx__dot { width: 7px; height: 7px; border-radius: 50%; background: #EBC461; box-shadow: 0 0 0 4px rgba(235, 196, 97, .18); }
.hx__h1 { margin: 1rem 0 0; font-weight: 700; letter-spacing: -.045em; line-height: .98; text-wrap: balance; }
.hx__lead { margin: 1.1rem 0 0; max-width: 42ch; font-size: clamp(1rem, .95rem + .3vw, 1.18rem); line-height: 1.6; }
.hx__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: .7rem; margin-top: 1.8rem; }
.hx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 52px; padding: .9rem 1.5rem; border-radius: 999px; border: 1px solid transparent;
  background: var(--hx-ink); color: #fff; font: 600 .98rem/1 var(--font-sans); text-decoration: none; transition: transform .35s var(--hx-ease), box-shadow .35s var(--hx-ease), background .2s; }
.hx-btn svg { transition: transform .35s var(--hx-ease); }
.hx-btn:hover { transform: translateY(-2px); text-decoration: none; }
.hx-btn:hover svg { transform: translateX(3px); }
.hx-btn:focus-visible, .hx-link:focus-visible, .hx-tag:focus-visible, .hx-sku:focus-visible, .hx-size:focus-visible, .hx-coa__btn:focus-visible { outline: 2px solid #7FB4E6; outline-offset: 3px; }
.hx-perks { display: flex; flex-wrap: wrap; gap: .55rem 1.25rem; margin: 1.8rem 0 0; padding: 0; list-style: none; font-size: .86rem; }
.hx-perks li { display: inline-flex; align-items: center; gap: .5rem; }
.hx-perks .eon-coin { width: 20px; height: 20px; }
.hx-perks .eon-coin svg { width: 9px; height: 10px; }
.hx__trio { display: block; width: 100%; height: auto; }

/* ============================================================== A: THE OFFER (dark, Buy 1 Get 1 Free first) */
.hx--a { color: #E8EEF6; background: radial-gradient(70% 95% at 76% 46%, #1D3B60 0%, #0F2036 46%, #070F1C 100%); padding-block: clamp(2.5rem, 2rem + 4vw, 5.5rem); }
.hx--a .hx__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px); background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 70% at 70% 45%, #000 0%, transparent 75%); mask-image: radial-gradient(80% 70% at 70% 45%, #000 0%, transparent 75%); }
.hx--a .hx__mark { position: absolute; right: -2%; top: 50%; transform: translateY(-52%); font: 800 clamp(11rem, 6rem + 22vw, 28rem)/.8 var(--font-sans); letter-spacing: -.07em; color: rgba(255, 255, 255, .035); white-space: nowrap; }
.hx--a .hx__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
.hx--a .hx__copy { display: contents; }
.hx--a [data-hx-sale], .hx--a [data-hx-nosale] { order: 1; text-align: center; }
.hx--a .hx__flag { color: #C9D6E6; padding: .45rem .8rem; border: 1px solid rgba(255, 255, 255, .16); border-radius: 999px; background: rgba(255, 255, 255, .04); }
.hx--a .hx__h1 { font-size: clamp(3rem, 1.6rem + 6.2vw, 6rem); color: #fff; }
.hx--a .hx__gold { background: var(--hx-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx--a .hx__lead { margin-inline: auto; color: #B7C6D8; }
.hx--a .hx__art { order: 2; position: relative; margin: 0 auto; width: min(100%, 560px); }
.hx--a .hx__art::before { content: ""; position: absolute; inset: 8% 6% 4%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 170, 230, .32), rgba(120, 170, 230, 0)); }
.hx--a .hx__trio { filter: drop-shadow(0 34px 36px rgba(0, 0, 0, .5)); }
.hx--a .hx__ctas { order: 3; justify-content: center; margin-top: 0; }
.hx--a .hx-perks { order: 4; justify-content: center; margin-top: 0; color: #AFC0D3; }
.hx--a .hx-perks svg { color: #EBC461; }
.hx-btn--gold { background: var(--hx-gold); color: var(--hx-ink); box-shadow: 0 16px 34px -14px rgba(235, 196, 97, .55); }
.hx-btn--gold:hover { box-shadow: 0 20px 40px -14px rgba(235, 196, 97, .7); }
.hx-btn--line { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .3); }
.hx-btn--line:hover { background: rgba(255, 255, 255, .06); }
.hx-tag { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .5rem; padding: .4rem .45rem .4rem .7rem;
  border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--hx-ink); font: 600 .72rem/1 var(--font-sans); white-space: nowrap; text-decoration: none;
  box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55), 0 0 0 1px rgba(255, 255, 255, .5); transition: transform .3s var(--hx-ease), box-shadow .3s var(--hx-ease); }
.hx-tag b { padding: .32rem .5rem; border-radius: 999px; background: var(--hx-ink); color: #fff; font: 600 .7rem/1 var(--font-mono); }
.hx-tag:hover { transform: translate(-50%, calc(-50% - 3px)); text-decoration: none; box-shadow: 0 16px 30px -12px rgba(0, 0, 0, .6); }
@media (min-width: 900px) {
  .hx--a .hx__in { grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); grid-template-rows: auto auto auto; column-gap: clamp(2rem, 4vw, 4.5rem); row-gap: 0; align-items: center; }
  .hx--a [data-hx-sale], .hx--a [data-hx-nosale] { grid-column: 1; grid-row: 1; text-align: left; align-self: end; }
  .hx--a .hx__lead { margin-inline: 0; }
  .hx--a .hx__ctas { grid-column: 1; grid-row: 2; justify-content: flex-start; margin-top: 1.9rem; }
  .hx--a .hx-perks { grid-column: 1; grid-row: 3; justify-content: flex-start; margin-top: 1.8rem; align-self: start; }
  .hx--a .hx__art { grid-column: 2; grid-row: 1 / 4; width: 100%; max-width: 760px; }
  .hx-tag { font-size: .8rem; padding: .45rem .5rem .45rem .8rem; }
  .hx-tag b { font-size: .76rem; }
}

/* ============================================================== B: CLEAN SPLIT (white copy, pale render panel) */
.hx--b { display: grid; grid-template-columns: minmax(0, 1fr); background: #fff; color: var(--hx-ink); }
.hx--b .hx__panel { order: -1; position: relative; display: grid; place-items: center; min-height: 330px; padding: 1.5rem 1rem 1rem; overflow: hidden;
  background: radial-gradient(70% 80% at 60% 40%, #F4F2FD 0%, #E7ECF9 55%, #DCE8F5 100%); }
.hx--b .hx__art { margin: 0; width: min(100%, 520px); }
.hx--b .hx__trio { filter: drop-shadow(0 30px 30px rgba(32, 52, 90, .22)); }
.hx--b .hx__copy { padding: 1.8rem 16px 2.4rem; text-align: center; }
.hx--b .hx__flag { color: var(--hx-slate); }
.hx--b .hx__h1 { font-size: clamp(2.5rem, 1.6rem + 3.2vw, 4rem); line-height: 1.02; color: var(--hx-ink); }
.hx--b .hx__lead { margin-inline: auto; color: var(--hx-ink-2); }
.hx--b .hx__ctas { justify-content: center; gap: 1.2rem; }
.hx-link { color: var(--hx-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.hx-salepill { display: inline-flex; align-items: center; gap: .55rem; margin: 1.3rem 0 0; padding: .35rem .8rem .35rem .35rem; border-radius: 999px; background: #FBF1D6;
  box-shadow: inset 0 0 0 1px rgba(217, 169, 58, .35); color: #5E420B; font-size: .84rem; font-weight: 600; }
.hx-salepill span { padding: .3rem .6rem; border-radius: 999px; background: var(--hx-gold); font: 600 .66rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; }
.hx-salepill[hidden] { display: none; }
.hx-skus { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; margin-top: 1.8rem; text-align: left; }
.hx-skus__k { grid-column: 1 / -1; margin: 0; font: 500 .7rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--hx-muted); }
.hx-sku { display: flex; flex-direction: column; gap: .55rem; padding: .5rem; border-radius: 16px; background: #fff; color: var(--hx-ink); text-decoration: none;
  box-shadow: 0 0 0 1px var(--hx-line), 0 12px 26px -22px rgba(10, 19, 32, .5); transition: transform .3s var(--hx-ease), box-shadow .3s var(--hx-ease); }
.hx-sku:hover { transform: translateY(-3px); text-decoration: none; box-shadow: 0 0 0 1px #CFD8E2, 0 18px 30px -22px rgba(10, 19, 32, .6); }
.hx-sku__ph { display: block; aspect-ratio: 1; border-radius: 11px; overflow: hidden; background: #E9EEF3; }
.hx-sku__ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hx-sku__t { display: flex; flex-direction: column; gap: .15rem; padding: 0 .2rem .2rem; }
.hx-sku__t b { font-size: .9rem; }
.hx-sku__t small { font: 500 .76rem/1.2 var(--font-mono); color: var(--hx-slate); }
@media (min-width: 900px) {
  .hx--b { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); min-height: clamp(560px, calc(100svh - 190px), 700px); }
  .hx--b .hx__panel { order: 0; min-height: 0; padding: 3rem; }
  .hx--b .hx__art { width: min(100%, 640px); }
  .hx--b .hx__copy { align-self: center; padding: 2.6rem clamp(2rem, 4vw, 4.5rem) 2.6rem max(48px, calc((100vw - 1280px) / 2 + 48px)); text-align: left; }
  .hx--b .hx-salepill { margin-top: 1.1rem; }
  .hx--b .hx-skus { margin-top: 1.4rem; grid-template-columns: repeat(3, minmax(0, 150px)); }
  .hx--b .hx__lead { margin-inline: 0; }
  .hx--b .hx__ctas { justify-content: flex-start; }
  .hx-skus { max-width: 520px; }
}

/* ============================================================== C: LAB REPORT (navy, turntable + real COA) */
.hx--c { color: #DCE7F2; background: radial-gradient(75% 100% at 72% 32%, #24527F 0%, #133252 46%, #0A1A2E 100%); padding-block: clamp(2rem, 1.5rem + 3.5vw, 4.5rem) clamp(2.5rem, 2rem + 4vw, 5rem); }
.hx--c .hx__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: linear-gradient(rgba(150, 200, 255, .06) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 200, 255, .06) 1px, transparent 1px); background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(70% 70% at 70% 40%, #000 0%, transparent 80%); mask-image: radial-gradient(70% 70% at 70% 40%, #000 0%, transparent 80%); }
.hx--c .hx__in { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.6rem; }
.hx--c .hx__copy { text-align: center; }
.hx--c .hx__flag { color: #A9C4DE; }
.hx--c .hx__dot { background: #5FD39B; box-shadow: 0 0 0 4px rgba(95, 211, 155, .18); }
.hx--c .hx__h1 { font-size: clamp(2.6rem, 1.4rem + 5vw, 5.2rem); color: #fff; }
.hx--c .hx__ice { color: #A9D4F5; }
.hx--c .hx__lead { margin-inline: auto; color: #B4C5D8; }
.hx--c .hx__ctas { justify-content: center; }
.hx-btn--ice { background: #CFE8FB; color: var(--hx-ink); box-shadow: 0 16px 34px -16px rgba(130, 190, 240, .6); }
.hx-btn--glass { background: rgba(255, 255, 255, .07); color: #fff; border-color: rgba(255, 255, 255, .22); }
.hx-btn--glass:hover { background: rgba(255, 255, 255, .12); }
.hx-sizes { margin-top: 1.7rem; }
.hx-sizes__k { margin: 0 0 .6rem; font: 500 .7rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #8FA9C4; }
.hx-sizes__row { display: flex; flex-wrap: wrap; justify-content: center; gap: .45rem; }
.hx-size { display: inline-flex; flex-direction: column; align-items: center; gap: .25rem; min-width: 64px; padding: .55rem .7rem; border-radius: 14px; text-decoration: none;
  background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; transition: background .2s, transform .3s var(--hx-ease); }
.hx-size b { font: 600 .82rem/1 var(--font-mono); }
.hx-size span { font: 500 .74rem/1 var(--font-mono); color: #A9D4F5; }
.hx-size:hover { background: rgba(255, 255, 255, .12); transform: translateY(-2px); text-decoration: none; }
.hx__stage { position: relative; order: -1; display: grid; place-items: center; min-height: 400px; }
.hx__stage::before { content: ""; position: absolute; left: 50%; top: 50%; width: 360px; height: 360px; transform: translate(-50%, -54%); border-radius: 50%; background: radial-gradient(closest-side, rgba(140, 195, 245, .35), rgba(140, 195, 245, 0)); }
.hx__stage::after { content: ""; position: absolute; left: 50%; bottom: 6%; width: 200px; height: 26px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .45), rgba(0, 0, 0, 0)); }
.hx-spin { position: relative; z-index: 1; height: 340px; aspect-ratio: 295 / 640; margin-right: 32%; }
.hx-spin__still, .hx-spin__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx-spin__cv { opacity: 0; }
.hx-spin.is-spin .hx-spin__cv { opacity: 1; }
.hx-spin.is-spin .hx-spin__still { opacity: 0; }
.hx-coa { position: absolute; z-index: 2; right: -4px; bottom: -2%; width: min(50%, 196px); padding: .75rem .8rem .8rem; border-radius: 16px; background: #fff; color: var(--hx-ink); text-align: left;
  box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .6); }
.hx-coa__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-bottom: .5rem; border-bottom: 1px solid var(--hx-line); font: 500 .6rem/1.2 var(--font-mono); letter-spacing: .12em; text-transform: uppercase; color: var(--hx-muted); }
.hx-coa__pass { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .45rem; border-radius: 999px; background: #E3F2EA; color: #0A6B4A; font: 700 .62rem/1 var(--font-mono); letter-spacing: .08em; }
.hx-coa__pass svg { width: 11px; height: 11px; }
.hx-coa__rows { margin: .45rem 0 .6rem; }
.hx-coa__rows div { display: flex; justify-content: space-between; gap: .5rem; padding: .18rem 0; font-size: .66rem; }
.hx-coa__rows dt { color: var(--hx-muted); }
.hx-coa__rows dd { margin: 0; font-weight: 600; text-align: right; }
.hx-coa__num { font-family: var(--font-mono); color: #0A7A54; }
.hx-coa__btn { display: flex; align-items: center; justify-content: center; gap: .4rem; width: 100%; min-height: 36px; border: 0; border-radius: 999px; background: var(--hx-ink); color: #fff; font: 600 .74rem/1 var(--font-sans); cursor: pointer; }
.hx-coa__btn svg { width: 14px; height: 14px; }
.hx-std { display: none; }
@media (min-width: 900px) {
  .hx--c .hx__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(2rem, 4vw, 4rem); min-height: clamp(560px, calc(100svh - 230px), 700px); }
  .hx--c .hx__copy { text-align: left; }
  .hx--c .hx__lead { margin-inline: 0; }
  .hx--c .hx__ctas, .hx-sizes__row { justify-content: flex-start; }
  .hx__stage { order: 0; min-height: 600px; }
  .hx__stage::before { width: 520px; height: 520px; }
  .hx__stage::after { width: 260px; height: 34px; bottom: 8%; }
  .hx-spin { height: 520px; margin-right: 0; }
  .hx-coa { right: -1%; bottom: 10%; width: 270px; padding: 1rem 1rem 1rem; border-radius: 18px; }
  .hx-coa__head { font-size: .64rem; }
  .hx-coa__rows div { font-size: .8rem; padding: .3rem 0; }
  .hx-coa__btn { min-height: 40px; font-size: .8rem; }
  .hx-std { position: absolute; z-index: 2; left: 0; top: 8%; display: flex; flex-direction: column; gap: .2rem; margin: 0; padding: .6rem .8rem; list-style: none; border-radius: 16px;
    background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
  .hx-std li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; font-size: .78rem; color: #DCE7F2; }
  .hx-std li + li { border-top: 1px solid rgba(255, 255, 255, .1); }
  .hx-std b { min-width: 18px; font: 600 .78rem/1 var(--font-mono); color: #A9D4F5; }
  .hx-std svg { width: 18px; height: 18px; color: #A9D4F5; }
}

/* ============================================================== motion (only when the visitor allows it) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes hx-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
  @keyframes hx-pop { from { opacity: 0; transform: translate(-50%, -50%) scale(.85); } to { opacity: 1; transform: translate(-50%, -50%); } }
  @keyframes hx-float { 50% { transform: translateY(-10px); } }
  .hx .hx__flag, .hx .hx__h1, .hx .hx__lead, .hx .hx__ctas, .hx .hx-perks, .hx .hx-skus, .hx .hx-sizes, .hx .hx-salepill { animation: hx-up .9s var(--hx-ease) both; }
  .hx .hx__h1 { animation-delay: .06s; } .hx .hx__lead { animation-delay: .14s; } .hx .hx__ctas { animation-delay: .22s; }
  .hx .hx-perks, .hx .hx-skus, .hx .hx-sizes, .hx .hx-salepill { animation-delay: .3s; }
  .hx .hx__art, .hx .hx__stage { animation: hx-up 1.1s var(--hx-ease) .1s both; }
  .hx--a .hx__trio, .hx--b .hx__trio { animation: hx-float 9s ease-in-out 1.2s infinite; }
  .hx-tag { animation: hx-pop .7s var(--hx-ease) both; }
  .hx-tag:nth-of-type(1) { animation-delay: .8s; } .hx-tag:nth-of-type(2) { animation-delay: .95s; } .hx-tag:nth-of-type(3) { animation-delay: 1.1s; }
  .hx-coa { animation: hx-up .9s var(--hx-ease) .7s both; }
  .hx-spin__cv, .hx-spin__still { transition: opacity .4s linear; }
}

/* ============================================================== A v2 (owner 10-18): independent floating vials + deal panel */
.hx--a .hx__mark { right: auto; left: 50%; top: 46%; transform: translate(-28%, -50%); font-size: clamp(9rem, 4rem + 20vw, 24rem); letter-spacing: -.06em; color: transparent;
  background: linear-gradient(180deg, rgba(243, 217, 140, .16) 0%, rgba(235, 196, 97, .06) 55%, rgba(235, 196, 97, 0) 100%); -webkit-background-clip: text; background-clip: text; }
.hx--a .hx__mark[hidden] { display: none; }
.hx--a .hx__beam { position: absolute; left: 58%; top: -20%; width: 46%; height: 140%; transform: rotate(18deg); background: linear-gradient(90deg, rgba(150, 200, 255, 0), rgba(150, 200, 255, .07), rgba(150, 200, 255, 0)); filter: blur(10px); }
.hx__art--vials { position: relative; aspect-ratio: 1.12; width: min(100%, 520px); }
.hx--a .hx__art--vials::before { display: none; }
.hx__halo { position: absolute; left: 50%; top: 44%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 175, 235, .34), rgba(120, 175, 235, 0)); }
.hx-v { position: absolute; left: var(--x); top: var(--y); height: var(--h); z-index: var(--z); transform: translate3d(calc(var(--mx, 0) * var(--dp, 8px)), calc(var(--my, 0) * var(--dp, 8px)), 0); }
.hx-v:nth-of-type(2) { --dp: 14px; }
.hx-v__bob { position: relative; height: 100%; }
.hx-v__tilt { position: relative; height: 100%; aspect-ratio: var(--ar); transform: rotate(var(--r)); filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .45)); }
.hx-v__still, .hx-v__cv { position: absolute; inset: 0; width: 100%; height: 100%; }
.hx-v__cv { opacity: 0; }
.hx-v.is-spin .hx-v__cv { opacity: 1; }
.hx-v.is-spin .hx-v__still { opacity: 0; }
.hx-v__shadow { position: absolute; left: 50%; bottom: -9%; width: 74%; height: 7%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0)); }
.hx--a .hx-v .hx-tag { position: absolute; left: 50%; top: calc(100% + 4px); transform: translateX(-50%); animation: none; }
.hx--a .hx-v .hx-tag:hover { transform: translate(-50%, -3px); }
.hx-deal { display: flex; flex-direction: column; align-items: center; gap: .7rem; margin-top: 1.4rem; }
.hx-count { display: inline-flex; align-items: center; gap: .9rem; padding: .55rem .6rem .55rem .9rem; border-radius: 18px; background: rgba(255, 255, 255, .05);
  box-shadow: inset 0 0 0 1px rgba(235, 196, 97, .32), 0 18px 40px -26px rgba(235, 196, 97, .5); }
.hx-count[hidden] { display: none; }
.hx-count__k { display: inline-flex; align-items: center; gap: .5rem; font: 600 .68rem/1.2 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: #F3D98C; white-space: nowrap; }
.hx-count__pulse { width: 8px; height: 8px; border-radius: 50%; background: #EBC461; box-shadow: 0 0 0 0 rgba(235, 196, 97, .6); }
.hx-count__row { display: inline-flex; gap: .35rem; }
.hx-count__t { display: inline-flex; flex-direction: column; align-items: center; min-width: 46px; padding: .4rem .3rem .35rem; border-radius: 10px; background: rgba(255, 255, 255, .07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.hx-count__t b { font: 700 1.15rem/1 var(--font-mono); color: #fff; font-variant-numeric: tabular-nums; }
.hx-count__t small { margin-top: .2rem; font: 500 .56rem/1 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; color: #8FA6BF; }
.hx-nocode { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font-size: .86rem; color: #B7C6D8; }
.hx-nocode svg { flex: none; width: 16px; height: 16px; padding: 2px; border-radius: 50%; background: rgba(95, 211, 155, .16); color: #5FD39B; }
.hx-nocode b { color: #fff; }
.hx-btn--gold { position: relative; overflow: hidden; }
.hx-btn--gold::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; transform: skewX(-20deg); background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .55), rgba(255, 255, 255, 0)); opacity: 0; }
@media (max-width: 899px) {
  .hx--a .hx__art--vials { width: min(100%, 420px); aspect-ratio: 1.08; margin-top: .4rem; margin-bottom: 1.6rem; }
  .hx--a .hx-v .hx-tag { font-size: .66rem; padding: .32rem .35rem .32rem .55rem; gap: .35rem; }
  .hx--a .hx-v .hx-tag b { font-size: .64rem; padding: .26rem .4rem; }
  .hx-count { gap: .6rem; padding: .45rem .45rem .45rem .7rem; }
  .hx-count__t { min-width: 40px; }
  .hx-count__t b { font-size: 1rem; }
}
@media (min-width: 900px) {
  .hx--a .hx__art--vials { width: 100%; max-width: 640px; justify-self: center; }
  .hx-deal { flex-direction: row; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes hx-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
  @keyframes hx-shadow { 0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; } 50% { transform: translateX(-50%) scale(.8); opacity: .55; } }
  @keyframes hx-rise { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
  @keyframes hx-breathe { 0%, 100% { opacity: .75; transform: translate(-50%, -50%) scale(.96); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } }
  @keyframes hx-shine { 0%, 72% { left: -60%; opacity: 0; } 76% { opacity: 1; } 92%, 100% { left: 130%; opacity: 0; } }
  @keyframes hx-ping { 0% { box-shadow: 0 0 0 0 rgba(235, 196, 97, .6); } 80%, 100% { box-shadow: 0 0 0 9px rgba(235, 196, 97, 0); } }
  .hx--a .hx__art, .hx--a .hx__trio { animation: none; }
  .hx-v { animation: hx-rise 1.1s var(--hx-ease) both; }
  .hx-v:nth-of-type(1) { animation-delay: .25s; } .hx-v:nth-of-type(2) { animation-delay: .1s; } .hx-v:nth-of-type(3) { animation-delay: .4s; }
  .hx-v__bob { animation: hx-bob var(--dur) ease-in-out var(--del) infinite; }
  .hx-v__shadow { animation: hx-shadow var(--dur) ease-in-out var(--del) infinite; }
  .hx__halo { animation: hx-breathe 7s ease-in-out infinite; }
  .hx-btn--gold::after { animation: hx-shine 5.5s ease-in-out 1.5s infinite; }
  .hx-count__pulse { animation: hx-ping 1.8s ease-out infinite; }
  .hx-v__cv, .hx-v__still { transition: opacity .35s linear; }
  .hx-v { transition: transform .9s var(--hx-ease); }
}

/* A v2.1: deal block under the vials on phones, beside the copy on desktop */
.hx--a .hx-deal { order: 3; margin-top: 0; }
.hx--a .hx-deal[hidden] { display: none; }
@media (max-width: 899px) {
  .hx--a .hx__art--vials { margin-bottom: 1.2rem; }
  .hx--a .hx__ctas { order: 4; }
  .hx-count { flex-direction: column; gap: .45rem; padding: .6rem .7rem .65rem; }
}
@media (min-width: 900px) {
  .hx--a .hx-deal { grid-column: 1; grid-row: 2; justify-content: flex-start; margin-top: 1.4rem; }
  .hx--a .hx__ctas { grid-row: 3; }
  .hx--a .hx__art--vials { grid-row: 1 / 4; }
}
@media (max-width: 899px) {   /* phones: the price pill only (the label already names the vial; aria-label keeps the full name) */
  .hx--a .hx-v .hx-tag { padding: 0; background: none; box-shadow: none; }
  .hx--a .hx-v .hx-tag span { display: none; }
  .hx--a .hx-v .hx-tag b { padding: .4rem .6rem; font-size: .72rem; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .25); }
}

/* A v3 (owner 10-18): four poster stills, no turning; each floats on its own like neurolabs (rise + slight wobble) */
.hx--a .hx-v__tilt { aspect-ratio: 349 / 760; }
.hx--a .hx-v__still { opacity: 1 !important; }
.hx--a .hx-v:nth-of-type(3) .hx-v__tilt { filter: drop-shadow(0 26px 26px rgba(0, 0, 0, .45)) brightness(.94); }
@media (prefers-reduced-motion: no-preference) {
  @keyframes hx-bob2 { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-18px) rotate(var(--w, 1deg)); } }
  .hx--a .hx-v__bob { animation: hx-bob2 var(--dur) ease-in-out var(--del) infinite; }
}
/* A v3.1: price tags in their own top layer, floating in step with their vial (same --dur / --del) */
.hx--a .hx-tag--f { position: absolute; z-index: 8; left: var(--tx); top: var(--ty); transform: translate(-50%, 0);
  translate: calc(var(--mx, 0) * var(--dp, 8px)) calc(var(--my, 0) * var(--dp, 8px)); transition: translate .9s var(--hx-ease); animation: none; }
.hx--a .hx-tag--f:hover { transform: translate(-50%, -3px); }
@media (max-width: 899px) {
  .hx--a .hx-tag--f { padding: 0; background: none; box-shadow: none; }
  .hx--a .hx-tag--f span { display: none; }
  .hx--a .hx-tag--f b { padding: .4rem .6rem; font-size: .72rem; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6), 0 0 0 1px rgba(255, 255, 255, .25); }
}
@media (prefers-reduced-motion: no-preference) {
  @keyframes hx-tagbob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -18px); } }
  .hx--a .hx-tag--f { animation: hx-pop-in .7s var(--hx-ease) .9s both, hx-tagbob var(--dur) ease-in-out var(--del) infinite; }
  @keyframes hx-pop-in { from { opacity: 0; } to { opacity: 1; } }
}
/* A v4 (owner 10-18 "USE THESE"): the angled stills; aspect comes from each still (--ar), tilt stays near 0 (already angled) */
.hx--a .hx-v__tilt { aspect-ratio: var(--ar); filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .42)); }
.hx--a .hx-v:nth-of-type(3) .hx-v__tilt { filter: drop-shadow(0 22px 24px rgba(0, 0, 0, .42)); }
.hx--a .hx__art--vials { aspect-ratio: 1.12; }
@media (max-width: 899px) { .hx--a .hx__art--vials { aspect-ratio: 1.12; width: min(100%, 440px); margin-bottom: 2.4rem; } }

/* A v5 (owner 10-18): the owner's EON INDEPENDENT FLOAT KIT, layout + motion as delivered (arrangements.css), scoped.
   Each vial is its own transparent 2000x2000 render on an equal canvas, so --x/--y/--w place the canvas, not the glass. */
.hx--a .hx-kit { position: relative; isolation: isolate; width: 100%; aspect-ratio: 1.45; margin: 0; }
.hx--a .hx-kit .hx__halo { top: 50%; width: 70%; }
.hx-kit__v { position: absolute; display: block; width: var(--w); left: var(--x); top: var(--y); z-index: var(--z); pointer-events: none; }
.hx-kit__v img { display: block; width: 100%; height: auto; }
.hx-kit__v--glow { --x: -8%; --y: 18%; --w: 56%; --z: 4; --duration: 8.4s; --delay: -2s; }
.hx-kit__v--glp { --x: 13%; --y: -4%; --w: 56%; --z: 2; --duration: 9.1s; --delay: -5s; }
.hx-kit__v--tb { --x: 35%; --y: 24%; --w: 56%; --z: 5; --duration: 7.8s; --delay: -1s; }
.hx-kit__v--amino { --x: 58%; --y: 0%; --w: 50%; --z: 3; --duration: 9.6s; --delay: -6s; }
@media (max-width: 650px) {
  .hx--a .hx-kit { aspect-ratio: .8; width: min(100%, 420px); }
  .hx-kit__v--glow { --x: -9%; --y: 2%; --w: 64%; }
  .hx-kit__v--glp { --x: 43%; --y: 0%; --w: 64%; }
  .hx-kit__v--tb { --x: -9%; --y: 49%; --w: 64%; }
  .hx-kit__v--amino { --x: 43%; --y: 48%; --w: 64%; }
}
@media (min-width: 651px) and (max-width: 899px) { .hx--a .hx-kit { width: min(100%, 620px); } }
@media (min-width: 900px) { .hx--a .hx-kit { max-width: 680px; justify-self: center; } }
@media (prefers-reduced-motion: no-preference) {
  @keyframes eon-float { 0%, 100% { transform: translate3d(0, 7px, 0) rotate(-.55deg); } 50% { transform: translate3d(0, -9px, 0) rotate(.55deg); } }
  .hx-kit__v img { animation: eon-float var(--duration, 8s) ease-in-out var(--delay, 0s) infinite; will-change: transform; }
}
/* A v5.1 (owner 10-18 "vials closer together, hero shorter on mobile"): phones get a tight overlapping arc instead of the
   kit's tall 2x2 (same vial size, about 110 px less height), and less air around the copy */
@media (max-width: 650px) {
  .hx--a { padding-block: 1.6rem 2rem; }
  .hx--a .hx__in { gap: 1rem; }
  .hx--a .hx__h1 { margin-top: .7rem; font-size: clamp(2.6rem, 1.6rem + 5vw, 3.4rem); }
  .hx--a .hx__lead { margin-top: .7rem; }
  .hx--a .hx-kit { aspect-ratio: 1.17; width: 100%; margin: 0 auto .2rem; }
  .hx-kit__v--glow { --x: -14%; --y: 22%; --w: 66%; --z: 4; }
  .hx-kit__v--glp { --x: 9%; --y: -2%; --w: 66%; --z: 2; }
  .hx-kit__v--tb { --x: 28%; --y: 26%; --w: 66%; --z: 5; }
  .hx-kit__v--amino { --x: 50%; --y: 0%; --w: 62%; --z: 3; }
  .hx-count { flex-direction: row; gap: .55rem; padding: .45rem .45rem .45rem .7rem; }
  .hx-count__k { font-size: .6rem; letter-spacing: .1em; }
  .hx-count__t { min-width: 38px; padding: .32rem .25rem .28rem; }
  .hx-count__t b { font-size: .95rem; }
  .hx-deal { gap: .5rem; }
}
@media (max-width: 360px) { .hx-count { flex-direction: column; gap: .4rem; } }

/* ==================================================== HALLOWEEN 2026: "Porch Light" ===================
   The hero is the porch at the end of the street the sale band walks you down. A door stands open on the
   right, its light falls left across the section as a widening cone, the laboratory grid retreats from it
   into the dark, and the vials stand in the spill: they are what is in the bowl.

   Every rule here is gated on :root[data-eon-season="halloween"], an attribute promo.js publishes
   synchronously before this section is parsed. Absent the attribute NOTHING below applies and the hero
   renders exactly as it does out of season, so it fails safe if promo.js never loads - and it puts itself
   away at Oct 31 23:59 ET with no deploy, because promo.js stops publishing the attribute.

   The door is drawn in CSS: three boxes, gradients only, no image request and no SVG. It is the SCENE,
   not an interaction - the knocker is deliberately not here, because /knock does not exist yet.
   Motion: the street moves, the porch is still, so the only thing that moves here is the light.
   See build/eon-halloween-DIRECTION.md.
   ======================================================================================================= */

/* the night. Colder and deeper than the out-of-season navy, so the warm light has something to be warm
   against. Warm spill on top, cold moon fill under it, night ground beneath both. */
:root[data-eon-season="halloween"] .hx--a {
  background:
    radial-gradient(56% 92% at 88% 60%, rgba(255, 166, 74, .22) 0%, rgba(255, 138, 31, .07) 38%, rgba(255, 138, 31, 0) 68%),
    radial-gradient(54% 72% at 7% -8%, rgba(122, 162, 222, .12) 0%, rgba(122, 162, 222, 0) 72%),
    radial-gradient(76% 100% at 80% 54%, #16243A 0%, #0A1320 44%, #04080F 100%),
    /* the shorthand sets a real background-color on purpose: every wash above it only LIGHTENS, so this
       is the honest worst case for a contrast audit, which would otherwise see "transparent" and walk
       past the section to the body. */
    #04080F;
}

/* the laboratory grid is what you can still see of the lab in the dark, so the porch light burns it away:
   the mask moves from the lit right side over to the left, and dims.

   🔴 The grid moves to a PSEUDO-ELEMENT and the mask comes off .hx__bg itself. A mask on an element also
   masks its CHILDREN, and .hx__bg is the wrapper that holds the door, the beam and the watermark - so with
   the mask left where it was, the mask's own fade-out (centred at 15%, i.e. far left) silently erased the
   door and most of the light cone on the right, where they live. Nothing errors; the art simply is not
   there. Keep decorative children out of a masked box, or mask only the layer that wants it. */
:root[data-eon-season="halloween"] .hx--a .hx__bg {
  background-image: none;
  -webkit-mask-image: none;
  mask-image: none;
}
:root[data-eon-season="halloween"] .hx--a .hx__bg::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: linear-gradient(rgba(150, 190, 240, .030) 1px, transparent 1px), linear-gradient(90deg, rgba(150, 190, 240, .030) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(74% 88% at 15% 44%, #000 0%, transparent 70%);
  mask-image: radial-gradient(74% 88% at 15% 44%, #000 0%, transparent 70%);
}

/* The giant BOGO watermark is hidden in season: the house number now lives on the fanlight, where a house
   number belongs, and a second huge wordmark behind the headline only competes with the door and muddies
   the light. The baked text stays in the markup and returns untouched out of season.

   🔴 It must be hidden with `display`, NOT with `color`. That watermark is painted by a GRADIENT through
   -webkit-background-clip: text (hero-x.css:185) and its `color` is ALREADY transparent, so overriding the
   colour is a silent no-op and the letterforms keep painting. Check for background-clip before believing a
   colour override has turned text off. */
:root[data-eon-season="halloween"] .hx--a .hx__mark { display: none; }

/* ---- THE DOOR. An arched aperture standing open on the right, brightest at the threshold where the light
   meets the ground, with a fanlight over it carrying the house number 31 - which reads as October 31 and as
   a lot number. It sits behind the vials and in front of nothing: it is the source the cone needs. */
:root[data-eon-season="halloween"] .hx--a .hx__door {
  position: absolute; z-index: 0; pointer-events: none;
  /* measured, not guessed: every vial box starts at or below 306px while the hero starts at 188px, so the
     door is raised until its fanlight sits in that clear band and the house number is never behind a vial */
  right: 5%; top: 3%; bottom: -3%;
  width: clamp(168px, 20vw, 290px);
  border-radius: 50% 50% 2px 2px / 30% 30% 0 0;
  background:
    linear-gradient(180deg, rgba(255, 214, 150, .13) 0%, rgba(255, 176, 82, .20) 34%, rgba(255, 150, 48, .30) 72%, rgba(255, 206, 140, .42) 100%);
  box-shadow:
    0 0 0 1px rgba(255, 190, 110, .16),
    0 0 44px 10px rgba(255, 150, 50, .14),
    inset 0 -24px 44px -18px rgba(255, 226, 170, .5);
}
/* the fanlight: a half circle of brighter glass over the opening, its bars radiating from the centre */
:root[data-eon-season="halloween"] .hx--a .hx__door::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 30%;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background:
    repeating-conic-gradient(from 180deg at 50% 100%, rgba(10, 16, 28, .5) 0deg 1.4deg, rgba(10, 16, 28, 0) 1.4deg 30deg),
    radial-gradient(100% 140% at 50% 100%, rgba(255, 224, 164, .5) 0%, rgba(255, 170, 70, .26) 56%, rgba(255, 150, 50, .08) 100%);
}
/* the house number, sitting in the fanlight */
:root[data-eon-season="halloween"] .hx--a .hx__door::after {
  content: "31"; position: absolute; left: 0; right: 0; top: 13%;
  text-align: center;
  font: 700 clamp(15px, 1.7vw, 24px)/1 var(--font-mono);
  letter-spacing: .14em;
  color: rgba(34, 18, 2, .62);
}

/* THE MOMENT: the light from that open door, falling left across the hero as a cone that widens and dims
   as it travels. One element, clipped and blurred, brightest at the door. */
/* ⚠️ Shaped by a radial MASK, not by clip-path. A clipped cone leaves a dead straight edge wherever the
   cut crosses a still-bright part of the gradient, and near the door it does: it read as a seam ruled
   across the hero. A mask falls off smoothly, so the light has no edge anywhere. */
:root[data-eon-season="halloween"] .hx--a .hx__beam {
  left: 0; right: 0; top: 0; width: auto; height: 100%;
  transform: none;
  background: linear-gradient(270deg, rgba(255, 186, 96, .34) 0%, rgba(255, 162, 62, .16) 24%, rgba(255, 150, 50, .06) 52%, rgba(255, 150, 50, 0) 82%);
  -webkit-mask-image: radial-gradient(118% 66% at 101% 46%, #000 0%, #000 26%, rgba(0, 0, 0, .35) 62%, transparent 86%);
  mask-image: radial-gradient(118% 66% at 101% 46%, #000 0%, #000 26%, rgba(0, 0, 0, .35) 62%, transparent 86%);
  filter: blur(16px);
}

/* the light lands on the vials: the halo and the art's own glow go from cold blue to the porch's warmth.
   This is the brightest thing in the hero, so it is what makes the whole section read as night. */
:root[data-eon-season="halloween"] .hx--a .hx__halo {
  background: radial-gradient(closest-side, rgba(255, 190, 104, .36), rgba(255, 170, 70, .11) 54%, rgba(255, 170, 70, 0) 100%);
}
:root[data-eon-season="halloween"] .hx--a .hx__art::before {
  background: radial-gradient(closest-side, rgba(255, 180, 90, .26), rgba(255, 180, 90, 0));
}

/* copy in candlelight. The h1 and the gold ramp are deliberately untouched: "Buy 1, Get 1 Free" is true in
   both seasons and it is the LCP text, so the season never reflows or recolours the headline. */
:root[data-eon-season="halloween"] .hx--a .hx__flag {
  color: #FFDCA2;
  border-color: rgba(255, 178, 86, .30);
  background: rgba(255, 150, 50, .09);
}
:root[data-eon-season="halloween"] .hx__dot {
  background: #FF9A33;
  box-shadow: 0 0 0 4px rgba(255, 138, 31, .18), 0 0 10px 1px rgba(255, 138, 31, .55);
}
:root[data-eon-season="halloween"] .hx--a .hx__lead { color: #CFC4B2; }
:root[data-eon-season="halloween"] .hx-nocode { color: #CFC4B2; }
:root[data-eon-season="halloween"] .hx-nocode svg { background: rgba(255, 170, 70, .16); color: #FFBE63; }
:root[data-eon-season="halloween"] .hx-btn--line { border-color: rgba(255, 190, 110, .32); }
:root[data-eon-season="halloween"] .hx-btn--line:hover { background: rgba(255, 170, 70, .08); }

/* the clock, lit by the same candle as the band's own tiles */
:root[data-eon-season="halloween"] .hx-count {
  background: rgba(255, 150, 50, .07);
  box-shadow: inset 0 0 0 1px rgba(255, 178, 86, .22);
}
:root[data-eon-season="halloween"] .hx-count__k { color: #FFC95C; }
:root[data-eon-season="halloween"] .hx-count__pulse { background: #FF9A33; box-shadow: 0 0 0 0 rgba(255, 138, 31, .6); }
:root[data-eon-season="halloween"] .hx-count__t { background: rgba(255, 170, 70, .10); box-shadow: inset 0 0 0 1px rgba(255, 178, 86, .16); }
:root[data-eon-season="halloween"] .hx-count__t small { color: #D5B690; }

/* the seasonal line in the flag: a pure CSS swap, so there is no JS and no flash, and the out-of-season
   wording is the one baked in the markup. */
.hx__shallo { display: none; }
:root[data-eon-season="halloween"] .hx__sfall { display: none; }
:root[data-eon-season="halloween"] .hx__shallo { display: inline; }

/* the Eon Street door game. /knock is a 404 until the game ships, so this button is written, wired and
   shown only when promo.js publishes data-eon-door="1", which happens when its DOOR flag is true. */
[data-hx-door] { display: none; }
:root[data-eon-season="halloween"][data-eon-door="1"] [data-hx-door] { display: inline-flex; }
/* door open (Brandon 2026-10-24): "Knock on the door" is the gold primary, "Shop the sale" stays as the second
   button in the outline style, and "View COA library" steps out for the week. Door shut or out of season, the
   markup default returns: Shop the sale gold + View COA library outline. */
:root[data-eon-season="halloween"][data-eon-door="1"] [data-hx-cta] {
  background: transparent; color: #fff; border-color: rgba(255, 190, 110, .32); box-shadow: none;
}
:root[data-eon-season="halloween"][data-eon-door="1"] [data-hx-cta]:hover { background: rgba(255, 170, 70, .08); box-shadow: none; }
:root[data-eon-season="halloween"][data-eon-door="1"] [data-hx-coa] { display: none; }

/* the door is drawn only in season, so it costs nothing out of season and nothing at all if promo.js
   never runs */
.hx__door { display: none; }
:root[data-eon-season="halloween"] .hx--a .hx__door { display: block; }

/* motion is additive, so the reduced-motion state IS the default DOM: the porch simply rests at its
   brightest. Written this way because the storefront's global reduced-motion reset forces every animation
   to 0.01ms, which would snap a paused breath to its first frame. */
@media (prefers-reduced-motion: no-preference) {
  :root[data-eon-season="halloween"] .hx--a .hx__beam { animation: hx-porch 11s ease-in-out infinite; }
  :root[data-eon-season="halloween"] .hx--a .hx__door { animation: hx-porch 11s ease-in-out infinite; }
  @keyframes hx-porch { 0%, 100% { opacity: .88; } 50% { opacity: 1; } }
}

/* phones and tablets: the layout stacks, the vials centre, so the door stands behind them rather than
   beside them and the cone comes down the screen instead of across it */
@media (max-width: 899px) {
  /* Measured on a 375px phone: the copy ends at 29% of the hero and the vials run 30% to 65% of it, so
     the door is pinned to the vials' own band. Centred on the copy it sat BEHIND THE HEADLINE and turned
     the most important text on the site into pale letters on a tan slab. The fill is also dropped to about
     half strength, because the same alphas that read as a lit doorway at 290px read as a beige block at
     200px on a dark phone screen. */
  :root[data-eon-season="halloween"] .hx--a .hx__door {
    right: 50%; transform: translateX(50%);
    top: 26%; bottom: 26%;
    width: clamp(150px, 42vw, 230px);
    background: linear-gradient(180deg, rgba(255, 214, 150, .07) 0%, rgba(255, 176, 82, .11) 34%, rgba(255, 150, 48, .17) 72%, rgba(255, 206, 140, .24) 100%);
    box-shadow:
      0 0 0 1px rgba(255, 190, 110, .12),
      0 0 40px 8px rgba(255, 150, 50, .10),
      inset 0 -20px 38px -18px rgba(255, 226, 170, .34);
  }
  :root[data-eon-season="halloween"] .hx--a .hx__door::before {
    background:
      repeating-conic-gradient(from 180deg at 50% 100%, rgba(10, 16, 28, .42) 0deg 1.4deg, rgba(10, 16, 28, 0) 1.4deg 30deg),
      radial-gradient(100% 140% at 50% 100%, rgba(255, 224, 164, .30) 0%, rgba(255, 170, 70, .15) 56%, rgba(255, 150, 50, .05) 100%);
  }
  :root[data-eon-season="halloween"] .hx--a .hx__door::after { color: rgba(34, 18, 2, .5); }
  :root[data-eon-season="halloween"] .hx--a .hx__beam {
    -webkit-mask-image: radial-gradient(86% 54% at 50% 20%, #000 0%, #000 24%, rgba(0, 0, 0, .35) 60%, transparent 88%);
    mask-image: radial-gradient(86% 54% at 50% 20%, #000 0%, #000 24%, rgba(0, 0, 0, .35) 60%, transparent 88%);
    background: linear-gradient(180deg, rgba(255, 186, 96, .30) 0%, rgba(255, 162, 62, .14) 30%, rgba(255, 150, 50, 0) 72%);
    filter: blur(20px);
  }
}


/* ---- BATS. Three, not a swarm, and each one PASSES: it crosses, it is gone, and the sky is empty for
   about 40% of its cycle. A bat that is always on screen is a sticker; a bat that crosses is a bat.

   They are dark silhouettes barely above the sky's own value, so in the dark half of the hero they are
   a suggestion and they only resolve as they cross the doorway light - which is the concept doing the
   work rather than decoration sitting on top of it. They fly BEHIND the copy and the vials (.hx__bg is
   z-index 0, the content is z-index 1), so they can never touch legibility.

   Budget: 3 elements x 3 nested transforms, compositor-only (transform + opacity), no canvas, no rAF,
   no image request. Same three-layer pattern the band's leaves already use - travel on the outer box,
   bob on the inner, flap on the wings - so each layer stays on its own compositor thread. */
:root[data-eon-season="halloween"] .hx--a .hx__bats { display: block; }
.hx__bats { display: none; position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }

.hx-bat { position: absolute; left: 0; top: var(--y); width: var(--s); opacity: 0; will-change: transform; }
.hx-bat > i { display: block; }
/* #2B4068 is a MID value on purpose: light enough to separate from the dark sky, dark enough to read
   as a silhouette when it crosses the doorway light. Anything darker vanished against the night; the
   first two attempts (#16243C, #2E3F5E) were invisible at every size tested. */
.hx-bat svg { display: block; width: 100%; height: auto; fill: #2B4068; }

/* near, and the one that crosses the doorway light */
.hx-bat--1 { --s: 44px; --o: .9;  --y: 24%; --x0: 106vw; --x1: -15vw; --dy: 74px;  --d: 19s; --dl: -2s;  --bd: 2.1s; --fl: .32s; }
/* mid */
.hx-bat--2 { --s: 31px; --o: .7; --y: 52%; --x0: 109vw; --x1: -13vw; --dy: -66px; --d: 26s; --dl: -13s; --bd: 2.6s; --fl: .38s; }
/* far, small and faint */
.hx-bat--3 { --s: 22px; --o: .48; --y: 13%; --x0: 111vw; --x1: -11vw; --dy: 44px;  --d: 33s; --dl: -24s; --bd: 3.1s; --fl: .45s; }
.hx-bat--3 svg { filter: blur(.4px); }

@media (prefers-reduced-motion: no-preference) {
  .hx-bat { animation: hx-bat-fly var(--d) linear var(--dl) infinite; }
  .hx-bat > i { animation: hx-bat-bob var(--bd) ease-in-out var(--dl) infinite alternate; }
  .hx-bat .wr { animation: hx-bat-wr var(--fl) ease-in-out var(--dl) infinite alternate; }
  .hx-bat .wl { animation: hx-bat-wl var(--fl) ease-in-out var(--dl) infinite alternate; }

  /* the travel finishes at 60% of the cycle and the bat holds off screen for the rest, which is what
     makes the gaps: without it three bats on loop read as a conveyor belt */
  @keyframes hx-bat-fly {
    0%   { opacity: 0; transform: translate3d(var(--x0), 0, 0); }
    5%   { opacity: var(--o); }
    50%  { opacity: var(--o); }
    60%  { opacity: 0; transform: translate3d(var(--x1), var(--dy), 0); }
    100% { opacity: 0; transform: translate3d(var(--x1), var(--dy), 0); }
  }
  @keyframes hx-bat-bob { from { transform: translateY(-5px); } to { transform: translateY(6px); } }
  @keyframes hx-bat-wr { from { transform: rotate(-5deg); } to { transform: rotate(27deg); } }
  @keyframes hx-bat-wl { from { transform: rotate(5deg); } to { transform: rotate(-27deg); } }
}

/* the wings pivot at the shoulder, not at the svg's corner */
.hx-bat .wr { transform-origin: 64px 18px; }
.hx-bat .wl { transform-origin: 56px 18px; }

/* phones: two bats, not three, and smaller. The hero is narrow and the vials already fill it, so a third
   crossing body is clutter rather than atmosphere. */
@media (max-width: 899px) {
  .hx-bat--1 { --s: 32px; --y: 20%; }
  .hx-bat--2 { --s: 23px; --y: 60%; }
  .hx-bat--3 { display: none; }
}

/* reduced motion: no frozen bat pinned mid-air. They are pure atmosphere, so with the animations gone
   the base opacity: 0 simply leaves them out, which is the designed still night. */


/* ======================================================================================================
   THE PORCH AT No. 31 (2026-10-26, Brandon: "keep the floating vials i had and build a custom animated hero
   that looks amazing"). A drawn and animated scene behind the four floating vials: the house front, a grand
   arched doorway standing open on a warm hall, light pouring out over the vials and down the steps, lanterns
   and carved pumpkins flickering, dust drifting in the beam, fog on the porch, leaves falling, the moon with a
   cloud passing. Nothing follows the pointer.

   - Lives INSIDE the vial figure, so it is always centred on the vials at every width; it bleeds past the
     figure and is feathered into the hero's own night by an intersected radial + linear mask.
   - Same gate as everything above: no data-eon-season = display:none, so it costs nothing out of season and
     retires itself at Oct 31 23:59 ET with no deploy. The CSS-drawn door and cone step aside while it shows.
   - Motion is compositor-only (transform + opacity). Reduced motion = the still scene, fully lit.
   ====================================================================================================== */
.hs { display: none; }
:root[data-eon-season="halloween"] .hx--a .hx__door,
:root[data-eon-season="halloween"] .hx--a .hx__beam { display: none; }
:root[data-eon-season="halloween"] .hx--a .hx__copy { position: relative; z-index: 2; }
:root[data-eon-season="halloween"] .hx--a .hs {
  display: block; position: absolute; z-index: 0; pointer-events: none;
  top: -45%; bottom: -36%; left: -14%; right: -24%;
  -webkit-mask-image: radial-gradient(60% 62% at 46% 52%, #000 62%, rgba(0, 0, 0, .55) 80%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 90%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image: radial-gradient(60% 62% at 46% 52%, #000 62%, rgba(0, 0, 0, .55) 80%, transparent 100%), linear-gradient(180deg, transparent 0%, #000 12%, #000 90%, transparent 100%);
  mask-composite: intersect;
}
:root[data-eon-season="halloween"] .hx--a .hs > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the vials stand in the door's light: a warm rim on the side that faces it, and a grounding shadow */
:root[data-eon-season="halloween"] .hx--a .hx-kit__v img {
  filter: drop-shadow(0 0 18px rgba(255, 168, 78, .30)) drop-shadow(0 22px 26px rgba(0, 0, 0, .5));
}

/* ---- light: god-rays turning slowly out of the doorway, and a warm bloom the vials float in.
   Both are additive (screen) on the night, so they only ever lighten. */
:root[data-eon-season="halloween"] .hx--a .hs__fan {
  position: absolute; left: 46%; top: 46%; width: 150%; aspect-ratio: 1; transform: translate(-50%, -50%) rotate(0deg);
  background: repeating-conic-gradient(from 0deg, rgba(255, 204, 130, .16) 0deg 3.5deg, rgba(255, 204, 130, 0) 3.5deg 11deg);
  -webkit-mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .55) 30%, transparent 62%);
  mask-image: radial-gradient(closest-side, #000 6%, rgba(0, 0, 0, .55) 30%, transparent 62%);
  mix-blend-mode: screen;
}
:root[data-eon-season="halloween"] .hx--a .hs__bloom {
  position: absolute; left: 46%; top: 52%; width: 74%; height: 70%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255, 196, 118, .42) 0%, rgba(255, 160, 70, .16) 48%, rgba(255, 150, 60, 0) 100%);
  mix-blend-mode: screen;
}
/* ---- dust in the beam */
:root[data-eon-season="halloween"] .hx--a .hs__mote {
  position: absolute; left: var(--x); top: var(--y); width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%;
  background: #FFE8BE; box-shadow: 0 0 6px 1px rgba(255, 196, 110, .8); opacity: 0;
}
.hs__mote:nth-of-type(1)  { --x: 40%; --y: 62%; --d: 9s;  --w: -1s;  --s: 3px; }
.hs__mote:nth-of-type(2)  { --x: 45%; --y: 70%; --d: 11s; --w: -4s;  --s: 2px; }
.hs__mote:nth-of-type(3)  { --x: 50%; --y: 58%; --d: 8s;  --w: -6s;  --s: 3px; }
.hs__mote:nth-of-type(4)  { --x: 54%; --y: 66%; --d: 12s; --w: -2s;  --s: 2px; }
.hs__mote:nth-of-type(5)  { --x: 43%; --y: 54%; --d: 10s; --w: -7s;  --s: 2px; }
.hs__mote:nth-of-type(6)  { --x: 48%; --y: 74%; --d: 9s;  --w: -3s;  --s: 4px; }
.hs__mote:nth-of-type(7)  { --x: 37%; --y: 68%; --d: 13s; --w: -9s;  --s: 2px; }
.hs__mote:nth-of-type(8)  { --x: 57%; --y: 60%; --d: 10s; --w: -5s;  --s: 3px; }
.hs__mote:nth-of-type(9)  { --x: 51%; --y: 50%; --d: 14s; --w: -11s; --s: 2px; }
.hs__mote:nth-of-type(10) { --x: 42%; --y: 76%; --d: 11s; --w: -8s;  --s: 3px; }

/* ---- fog on the porch */
:root[data-eon-season="halloween"] .hx--a .hs__fog { position: absolute; left: 0; right: 0; top: 74%; height: 20%; overflow: hidden; }
:root[data-eon-season="halloween"] .hx--a .hs__fog b {
  position: absolute; left: 0; bottom: 0; width: 200%; height: 100%; background-repeat: repeat-x; background-size: 50% 100%;
  background-image: radial-gradient(34% 60% at 24% 80%, rgba(186, 204, 230, .30), transparent 72%), radial-gradient(28% 48% at 66% 88%, rgba(186, 204, 230, .24), transparent 72%), radial-gradient(22% 40% at 92% 76%, rgba(186, 204, 230, .18), transparent 72%);
}
:root[data-eon-season="halloween"] .hx--a .hs__fog b + b { opacity: .7; background-position: 35% 0; }

/* ---- leaves */
:root[data-eon-season="halloween"] .hx--a .hs__leaf {
  position: absolute; left: var(--x); top: -4%; width: var(--s); height: calc(var(--s) * .62); opacity: 0;
  border-radius: 0 80% 0 80%;
  background: linear-gradient(135deg, #E08A2E, #9A3E0E 70%);
  box-shadow: inset 0 0 0 1px rgba(60, 20, 0, .25);
}
.hs__leaf--1 { --x: 18%; --s: 16px; --d: 13s; --w: -2s;  --dx: 120px; }
.hs__leaf--2 { --x: 62%; --s: 12px; --d: 16s; --w: -9s;  --dx: -90px; }
.hs__leaf--3 { --x: 78%; --s: 18px; --d: 15s; --w: -5s;  --dx: -140px; }
.hs__leaf--4 { --x: 34%; --s: 11px; --d: 18s; --w: -12s; --dx: 70px; }
.hs__leaf--5 { --x: 88%; --s: 14px; --d: 14s; --w: -7s;  --dx: -110px; }

/* ---- no pointer movement anywhere in the hero: not the vials, not the scene (Brandon 2026-10-26: "make it so
   the vials dont move when they're hovered over", then "the background should not react to mouse hover either").
   The scene moves on its own clock only: rays, bloom, flames, dust, fog, leaves, cloud, cat, chandelier. */

@media (prefers-reduced-motion: no-preference) {
  :root[data-eon-season="halloween"] .hx--a .hs__fan { animation: hs-fan 18s ease-in-out infinite alternate; }
  :root[data-eon-season="halloween"] .hx--a .hs__bloom { animation: hs-breathe 6s ease-in-out infinite; }
  :root[data-eon-season="halloween"] .hx--a .hs__walllit,
  :root[data-eon-season="halloween"] .hx--a .hs__spill { animation: hs-breathe 6s ease-in-out infinite; }
  :root[data-eon-season="halloween"] .hx--a .hs__flame,
  :root[data-eon-season="halloween"] .hx--a .hs__lglow,
  :root[data-eon-season="halloween"] .hx--a .hs__jface,
  :root[data-eon-season="halloween"] .hx--a .hs__jglow,
  :root[data-eon-season="halloween"] .hx--a .hs__winlite { animation: hs-flicker 3.2s infinite; }
  :root[data-eon-season="halloween"] .hx--a .hs__lantern--r .hs__flame,
  :root[data-eon-season="halloween"] .hx--a .hs__lantern--r .hs__lglow { animation-duration: 2.7s; animation-delay: -1.1s; }
  :root[data-eon-season="halloween"] .hx--a .hs__cloud { animation: hs-cloud 46s linear infinite; }
  :root[data-eon-season="halloween"] .hx--a .hs__chand { animation: hs-swing 7s ease-in-out infinite; }
  :root[data-eon-season="halloween"] .hx--a .hs__cateyes { animation: hs-blink 6s infinite; }
  :root[data-eon-season="halloween"] .hx--a .hs__tail { animation: hs-tail 3.4s ease-in-out infinite; }
  :root[data-eon-season="halloween"] .hx--a .hs__mote { animation: hs-mote var(--d) linear var(--w) infinite; }
  :root[data-eon-season="halloween"] .hx--a .hs__fog b { animation: hs-fog 42s linear infinite; }
  :root[data-eon-season="halloween"] .hx--a .hs__fog b + b { animation-duration: 60s; animation-direction: reverse; }
  :root[data-eon-season="halloween"] .hx--a .hs__leaf { animation: hs-leaf var(--d) linear var(--w) infinite; }
}
@keyframes hs-fan { from { transform: translate(-50%, -50%) rotate(-7deg); opacity: .75; } to { transform: translate(-50%, -50%) rotate(7deg); opacity: 1; } }
@keyframes hs-breathe { 0%, 100% { opacity: .85; } 50% { opacity: 1; } }
@keyframes hs-flicker { 0%, 100% { opacity: .95; } 17% { opacity: .72; } 21% { opacity: 1; } 46% { opacity: .84; } 52% { opacity: .98; } 77% { opacity: .78; } 82% { opacity: .96; } }
.hs__chand { transform-box: view-box; transform-origin: 369px 276px; }
.hs__cateyes { transform-box: fill-box; transform-origin: center; }
.hs__tail { transform-box: fill-box; transform-origin: 0% 100%; }
@keyframes hs-swing { 0%, 100% { transform: rotate(-1.4deg); } 50% { transform: rotate(1.4deg); } }
@keyframes hs-blink { 0%, 92%, 100% { transform: scaleY(1); } 94% { transform: scaleY(.1); } 96% { transform: scaleY(1); } }
@keyframes hs-tail { 0%, 100% { transform: rotate(0deg); } 50% { transform: rotate(-12deg); } }
@keyframes hs-cloud { from { transform: translateX(-160px); } to { transform: translateX(160px); } }
@keyframes hs-mote { 0% { opacity: 0; transform: translate(0, 0); } 12% { opacity: .9; } 80% { opacity: .5; } 100% { opacity: 0; transform: translate(18px, -140px); } }
@keyframes hs-fog { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes hs-leaf { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 8% { opacity: .9; } 50% { transform: translate(calc(var(--dx) * .6), 300px) rotate(220deg); } 92% { opacity: .85; } 100% { opacity: 0; transform: translate(var(--dx), 640px) rotate(420deg); } }

/* phones and tablets: the vials stack under the copy, so the scene centres on them there; the doorway fills
   the vial area and the house is feathered harder at the top so it never meets the buttons above */
@media (max-width: 899px) {
  :root[data-eon-season="halloween"] .hx--a .hs {
    top: -18%; bottom: -24%; left: -34%; right: -44%;
    -webkit-mask-image: radial-gradient(56% 52% at 46% 56%, #000 56%, rgba(0, 0, 0, .5) 80%, transparent 100%), linear-gradient(180deg, transparent 0%, transparent 6%, #000 30%, #000 82%, transparent 99%);
    mask-image: radial-gradient(56% 52% at 46% 56%, #000 56%, rgba(0, 0, 0, .5) 80%, transparent 100%), linear-gradient(180deg, transparent 0%, transparent 6%, #000 30%, #000 82%, transparent 99%);
  }
  /* the rays stay below the copy on a phone: a smaller fan, centred lower */
  :root[data-eon-season="halloween"] .hx--a .hs__fan { width: 110%; top: 54%; }
  :root[data-eon-season="halloween"] .hx--a .hs__leaf--4,
  :root[data-eon-season="halloween"] .hx--a .hs__leaf--5 { display: none; }
}