/* Halloween offer, with spooky.js. Everything on the home page hangs off html.spooky, which the inline line in
   index.html sets until the offer ends. The price rules at the bottom also serve Scout's lot card. */

/* The whole home page goes to night, whatever the visitor's light or dark setting */
html.spooky{color-scheme:dark;--bg:#0c0810;--ink:#f5eee4;--mute:#b9aea6;--line:#3d3142;--link:#ffb56b;--green:#a4e88f;--chip:#1d1522;--warn:#ff8f78;--pumpkin:#ff7a1a}
html.spooky main{position:relative;z-index:1}

/* Top of the page: search, then the offer, and the aerials lower down */
html.spooky .home,html.spooky body.has-result .home{margin-top:18px;transition:none}
html.spooky .logo,html.spooky body.has-result .logo{margin-bottom:12px;font-size:46px;letter-spacing:-2px;text-shadow:0 2px 18px #000,0 0 26px #ff7a1a88}
html.spooky .home .modes{margin-bottom:12px;background:#0c0810cc}
html.spooky input[type=search]{background:#0c0810d9;border-color:#ffffff40;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
html.spooky input[type=search]:hover,html.spooky input[type=search]:focus{border-color:var(--pumpkin);box-shadow:0 0 18px #ff7a1a88}
html.spooky .hint{color:#eadfd2;text-shadow:0 1px 5px #000}
html.spooky .btns button{background:#0c0810d9;border-color:#ffffff40}
html.spooky .status{text-shadow:0 1px 5px #000}
html.spooky #out{scroll-margin-top:20px}

/* --- The photo behind the top of the page --------------------------------------------------------------- */
.spook-sky{--sky:680px;--w:max(100vw,calc(var(--sky)*1.415));--h:calc(var(--w)/1.415);position:absolute;z-index:0;top:0;left:0;width:100%;height:var(--sky);overflow:hidden;pointer-events:none}
.spook-stage{position:absolute;width:var(--w);height:var(--h);top:calc((var(--sky) - var(--h))*.5);left:clamp(calc(100vw - var(--w)),calc(50vw - var(--w)*.6),0px)}
.spook-stage img{display:block;width:100%;height:100%}
.spook-shade{position:absolute;inset:0;background:linear-gradient(90deg,#06030cb3,#06030c59 36%,#06030c00 58%),linear-gradient(#06030c80,#06030c00 30%);-webkit-mask:radial-gradient(circle 230px at var(--x,-500px) var(--y,-500px),#0005 30%,#000);mask:radial-gradient(circle 230px at var(--x,-500px) var(--y,-500px),#0005 30%,#000)}
.spook-fade{position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(#0c081000,#0c0810b3 62%,var(--bg))}

/* Candle flicker on the pumpkins, the lit window and the porch fire */
.spook-glow{position:absolute;width:calc(var(--r)*var(--w));aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,#ff9a2ecc,#ff5a0a44 45%,#ff5a0a00 70%);mix-blend-mode:screen;animation:spook-flicker var(--t,3s) infinite}
@keyframes spook-flicker{0%,100%{opacity:.55}12%{opacity:.95}20%{opacity:.5}33%{opacity:.85}47%{opacity:.6}58%{opacity:1}71%{opacity:.5}86%{opacity:.8}}

/* Embers off the pumpkins */
.spook-ember{position:absolute;width:4px;height:4px;border-radius:50%;background:#ffc36b;box-shadow:0 0 8px 2px #ff7a1a;opacity:0;animation:spook-ember var(--t,7s) var(--d,0s) infinite ease-out}
@keyframes spook-ember{0%{opacity:0;transform:translate(0,0)}12%{opacity:1}100%{opacity:0;transform:translate(var(--dx,20px),-190px)}}

/* Fog along the bottom of the photo */
.spook-fog{position:absolute;bottom:4%;left:-40%;width:180%;height:190px;background:radial-gradient(ellipse 22% 60% at 18% 70%,#d9d2e62e,#0000),radial-gradient(ellipse 26% 55% at 52% 76%,#d9d2e638,#0000),radial-gradient(ellipse 20% 50% at 84% 66%,#d9d2e62e,#0000);animation:spook-fog 38s ease-in-out infinite alternate}
.spook-fog.two{bottom:12%;opacity:.7;animation-duration:54s;animation-direction:alternate-reverse}
@keyframes spook-fog{to{transform:translateX(24%)}}

/* Far-off lightning, a soft double flash now and then */
.spook-flash{position:absolute;inset:0;background:linear-gradient(#cfd8ff,#cfd8ff00 76%);mix-blend-mode:screen;opacity:0;animation:spook-flash 23s infinite}
@keyframes spook-flash{0%,91%{opacity:0}92%{opacity:.42}93.5%{opacity:.06}95%{opacity:.3}100%{opacity:0}}

/* Bats: the wrapper flies, the picture flaps */
.spook-fly{position:absolute;top:var(--top,120px);left:0;width:var(--s,34px);opacity:0;animation:spook-fly var(--t,17s) var(--d,0s) linear infinite}
.spook-fly svg{display:block;width:100%;fill:#120914;filter:drop-shadow(0 0 2px #ffb56b) drop-shadow(0 0 7px #ff7a1a)}
.spook-fly.bat svg{animation:spook-flap .22s ease-in-out infinite alternate;transform-origin:50% 40%}
@keyframes spook-flap{to{transform:scaleY(.42)}}
@keyframes spook-fly{0%{opacity:1;transform:translate(-90px,0)}12%{transform:translate(12vw,-34px)}26%{transform:translate(29vw,26px)}39%{transform:translate(46vw,-22px)}52%{transform:translate(64vw,30px)}66%{opacity:1;transform:translate(84vw,-18px)}78%{opacity:1;transform:translate(calc(100vw + 90px),12px)}78.1%,100%{opacity:0;transform:translate(calc(100vw + 90px),12px)}}

/* The witch crosses the sky, right to left */
.spook-witch{position:absolute;top:96px;left:0;width:150px;opacity:0;animation:spook-witch 31s 3s linear infinite}
.spook-witch svg{display:block;width:100%;fill:#08040c;filter:drop-shadow(0 0 7px #a4e88fb3)}
@keyframes spook-witch{0%{opacity:1;transform:translate(calc(100vw + 170px),40px) rotate(-5deg)}20%{transform:translate(58vw,-14px) rotate(-2deg)}38%{opacity:1;transform:translate(-190px,26px) rotate(-6deg)}38.1%,100%{opacity:0;transform:translate(-190px,26px)}}

/* A ghost by the door, drifting in and out */
.spook-ghost{position:absolute;left:85%;top:40%;width:58px;opacity:.72;animation:spook-ghost 11s ease-in-out infinite}
.spook-ghost svg{display:block;width:100%;filter:drop-shadow(0 0 12px #cfe9ff)}
@keyframes spook-ghost{0%,100%{opacity:0;transform:translate(0,26px)}24%{opacity:.78;transform:translate(-22px,-12px) rotate(-5deg)}52%{opacity:.62;transform:translate(16px,-40px) rotate(5deg)}78%{opacity:.76;transform:translate(-8px,-6px) rotate(-3deg)}}

/* A spider on its thread */
.spook-spider{position:absolute;top:0;right:5%;width:42px;transform-origin:50% 0;animation:spook-spider 9s ease-in-out infinite}
.spook-spider svg{display:block;width:100%;height:230px;overflow:visible}
@keyframes spook-spider{0%,100%{transform:translateY(-54px) rotate(1deg)}46%{transform:translateY(0) rotate(-2deg)}62%{transform:translateY(-16px) rotate(2deg)}}

/* --- The offer, between the search and the aerials ----------------------------------------------------- */
.spook{width:100%;max-width:1040px;min-height:370px;margin:0 auto;padding:26px 0 12px;color:#f8f1e6;text-shadow:0 1px 8px #000;text-align:left}
.spook-copy{max-width:470px}
.spook p{margin:0}
.spook-eyebrow{color:#a4e88f;font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.spook-big{display:flex;align-items:flex-start;gap:14px;margin:6px 0 24px;font:900 clamp(104px,15vw,172px)/.92 Impact,'Arial Black',Arial,sans-serif;letter-spacing:-.01em}
.spook-num{position:relative;display:inline-block;filter:url(#spook-melt) drop-shadow(0 0 22px #ff5a0ab3)}
.spook-num b{font-weight:inherit;color:#ff7a1a;text-shadow:none;background:linear-gradient(#ffe08a 8%,#ff9a2e 44%,#e8320c 92%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.spook-drip{position:absolute;top:92%;width:9px;height:18px;border-radius:0 0 9px 9px;background:#e8320c;transform-origin:50% 0;animation:spook-drip var(--t,5s) var(--d,0s) ease-in infinite}
@keyframes spook-drip{0%,100%{transform:scaleY(.4)}62%{transform:scaleY(2.1)}}
.spook-off{margin-top:.1em;font-size:.42em;line-height:1;text-transform:uppercase;color:#f8f1e6;text-shadow:0 0 18px #a4e88fb3,0 2px 8px #000}
.spook-line{font-size:18px;line-height:1.45}
.spook-line span{white-space:nowrap}
.spook-line s{color:#cfc4ba;font-size:.88em}
.spook-line b{color:#ffcf7a;font-size:1.2em}
.spook-clock{margin-top:12px!important;font-size:15px;color:#eadfd2}
.spook-clock time{display:inline-block;padding:2px 9px;margin-left:4px;border:1px solid #ff7a1a;border-radius:6px;background:#0c0810cc;color:#ffcf7a;font-variant-numeric:tabular-nums;font-weight:700;text-shadow:none}
.spook-how{margin-top:12px!important;font-size:14px;color:#d8cdc2}
.spook-how b{color:#fff;letter-spacing:.05em}

@media (max-width:860px){
  .spook-sky{--sky:720px}
  .spook{min-height:400px;padding-top:20px;text-align:center}
  .spook-line span:first-child{display:block}
  .spook-copy{margin:0 auto}
  .spook-big{justify-content:center}
  .spook-shade{background:linear-gradient(#06030cb3,#06030c66 40%,#06030c33 62%)}
  .spook-witch{width:110px}
  .spook-spider{right:2%;width:34px}
  .spook-ghost{left:12%;top:58%;width:46px}
}

@media (prefers-reduced-motion:reduce){
  .spook-sky *{animation:none!important}
  .spook-fly,.spook-witch,.spook-flash,.spook-ember{display:none}
  .spook-ghost{opacity:.6}
  .spook-glow{opacity:.75}
  .spook-drip{transform:scaleY(1.2)!important;animation:none!important}
}

/* --- The Lot Check card, on the home page and on Scout's lot card ---------------------------------------- */
.r.mri.spook-mri{border-color:#ff7a1a;box-shadow:0 0 22px #ff7a1a40}
.spook-mri .spook-tag{margin:0 0 6px;color:#ff7a1a;font-size:13px;font-weight:700}
.spook-mri .paid s,.spook-mri .buy s{opacity:.72;font-weight:400}
.spook-mri .paid{color:var(--ink)}
.spook-mri a.buy{background:#ff7a1a;border-color:#ff7a1a;color:#190b02;font-weight:700}