/* /halloween-weekend/ (templates/halloween.php). Builds on events.css and now.css (cards, hero, rails); this is the
   Halloween skin: a night sky over the photo mosaic (moon, fog, bats), the countdown, official trick-or-treat
   tickets and the Houdini 100 band. Motion is transform and opacity only, and stops for prefers-reduced-motion. v1.0.0 */
.hw{--hw-night:#140c1c;--hw-plum:#2a1538;--hw-pumpkin:#ff7a1a;--hw-ember:#ffb347;--hw-bone:#fff4e2;--hw-moss:#3c6b3f;--hw-gold:#d9b25c}
.hw-hero{background:var(--hw-night);min-height:min(720px,92vh)}
.hw-hero::before{background:linear-gradient(90deg,rgba(20,12,28,.96) 0%,rgba(28,14,38,.86) 40%,rgba(42,21,56,.42) 74%,rgba(20,12,28,.2) 100%),linear-gradient(0deg,rgba(20,12,28,.95) 0%,rgba(20,12,28,0) 58%)}
.hw-hero::after{content:"";background:none}
.hw-photo .nw-tile img{object-position:62% 62%;animation-duration:30s}
.hw-credit{position:absolute;right:16px;bottom:10px;z-index:1;margin:0;font-size:10px;line-height:1.4;color:rgba(255,244,226,.7);text-align:right;max-width:60%}
.hw-credit a{color:inherit;text-underline-offset:2px}
.hw-sky{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hw-moon{position:absolute;right:7%;top:9%;width:clamp(96px,11vw,160px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 38% 36%,#fffbe8 0%,#ffe9b0 42%,#f5c46b 70%,rgba(245,196,107,0) 72%);opacity:.85;mix-blend-mode:screen;animation:hw-moon 9s ease-in-out infinite alternate}
.hw-moon::before{content:"";position:absolute;inset:-60%;border-radius:50%;background:radial-gradient(circle,rgba(255,214,140,.32) 0%,rgba(255,214,140,0) 60%)}
.hw-moon::after{content:"";position:absolute;left:24%;top:30%;width:22%;height:22%;border-radius:50%;background:rgba(214,160,72,.35);box-shadow:44px 26px 0 -6px rgba(214,160,72,.28),18px 58px 0 -2px rgba(214,160,72,.22)}
.hw-fog{position:absolute;left:-30%;width:160%;height:42%;bottom:-8%;background:radial-gradient(ellipse at 30% 60%,rgba(220,200,255,.16) 0%,rgba(220,200,255,0) 55%),radial-gradient(ellipse at 75% 40%,rgba(255,220,200,.12) 0%,rgba(255,220,200,0) 50%);animation:hw-fog 38s linear infinite alternate}
.hw-fog-2{bottom:12%;height:30%;opacity:.7;animation-duration:52s;animation-direction:alternate-reverse}
.hw-bat{position:absolute;left:0;top:0;width:58px;color:#07040b;opacity:.9;will-change:transform;animation:hw-fly 24s linear infinite}
.hw-bat svg{display:block;width:100%;height:auto;fill:currentColor;transform-origin:50% 40%;animation:hw-flap .32s ease-in-out infinite alternate}
.hw-bat-1{top:18%;animation-duration:26s}
.hw-bat-2{top:30%;width:40px;animation-duration:31s;animation-delay:-9s}
.hw-bat-3{top:10%;width:30px;animation-duration:36s;animation-delay:-20s;opacity:.7}
.hw-bat-4{top:42%;width:46px;animation-duration:29s;animation-delay:-14s;animation-direction:reverse}
.hw-bat-5{top:24%;width:24px;animation-duration:41s;animation-delay:-4s;opacity:.6}
.hw-bat-2 svg{animation-duration:.27s}.hw-bat-3 svg{animation-duration:.22s}.hw-bat-5 svg{animation-duration:.2s}
.hw-live{background:var(--hw-pumpkin)}
.hw-hero h1{max-width:1040px}
.hw-countdown{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 12px;margin:0 0 26px}
.hw-countdown>div{position:relative;min-width:92px;padding:12px 14px 10px;background:rgba(255,122,26,.12);border:1px solid rgba(255,179,71,.45);text-align:center}
.hw-countdown>div::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,rgba(255,150,40,.28),rgba(255,150,40,0) 70%);animation:hw-flicker 3.2s steps(1) infinite}
.hw-countdown b{display:block;font-size:clamp(38px,4.4vw,60px);line-height:1;letter-spacing:-.04em;color:var(--hw-ember);font-variant-numeric:tabular-nums}
.hw-countdown span{display:block;margin-top:6px;font-size:10px;letter-spacing:1.6px;text-transform:uppercase;opacity:.8}
.hw-countdown p{margin:0 0 6px 6px;font-size:14px;font-weight:700;letter-spacing:.3px}
.hw .nw-counts b{color:var(--hw-ember)}
.hw-switch a[aria-current]{background:var(--hw-pumpkin);color:var(--ink)}
.hw-main .nw-head{border-bottom-color:var(--hw-plum)}
.hw-badge{display:inline-block;vertical-align:middle;margin-left:8px;padding:6px 11px;background:var(--hw-pumpkin);color:var(--ink);font-size:11px;letter-spacing:1.4px;text-transform:uppercase;transform:rotate(-2deg) translateY(-4px)}
.hw-night{position:relative}
.hw-night::before{content:"";position:absolute;left:-48px;right:-48px;top:24px;bottom:-12px;z-index:-1;background:linear-gradient(180deg,#f6e6d4 0%,rgba(246,230,212,0) 100%)}
.hw-night .nw-head{border-bottom-color:var(--hw-pumpkin)}
/* Official events (City of Detroit, museums, chambers): an illustrated ticket instead of a photo. */
.hw-official{border-top-color:var(--hw-pumpkin)}
.hw-official-art{position:relative;margin:-25px -25px 22px;aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;overflow:hidden;background:radial-gradient(circle at 70% 25%,#ffb347 0%,#ff7a1a 38%,#b8430c 100%)}
.hw-kind-haunt .hw-official-art{background:radial-gradient(circle at 70% 25%,#8a5bb0 0%,#4a2466 45%,#1d0e2a 100%)}
.hw-official-art::before,.hw-official-art::after{content:"";position:absolute;bottom:-14px;width:28px;height:28px;border-radius:50%;background:#f8f8f1}
.hw-official-art::before{left:-14px}.hw-official-art::after{right:-14px}
.hw-official-icon{display:block;width:38%;max-width:140px;animation:hw-bob 4.5s ease-in-out infinite alternate}
.hw-official-icon svg{display:block;width:100%;height:auto}
.hw-i-fill{fill:#ff8a24;stroke:#3a1a06;stroke-width:2}
.hw-kind-treat .hw-i-fill{fill:#ffa23a}
.hw-kind-haunt .hw-i-fill{fill:var(--hw-bone);stroke:#2a1538}
.hw-i-line{fill:none;stroke:#c65a10;stroke-width:2}
.hw-i-stem{fill:none;stroke:var(--hw-moss);stroke-width:4;stroke-linecap:round}
.hw-i-face{fill:#3a1a06}
.hw-i-eye{fill:#2a1538}
.hw-official-stub{position:absolute;left:0;right:0;bottom:0;padding:9px 13px;font-size:10px;letter-spacing:1.4px;text-transform:uppercase;font-weight:700;color:var(--hw-bone);background:rgba(20,12,28,.55);border-top:2px dashed rgba(255,244,226,.55)}
.hw-official .event-summary{font-size:13px}
.hw-sites{margin:0 0 20px;font-size:12px;border:1px solid var(--line);background:#fff}
.hw-sites summary{cursor:pointer;padding:12px 14px;font-weight:700}
.hw-sites ul{list-style:none;margin:0;padding:0 14px 10px;max-height:320px;overflow:auto}
.hw-sites li{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-top:1px solid #e3e3da;line-height:1.45}
.hw-sites b{white-space:nowrap;font-variant-numeric:tabular-nums}
/* Houdini 100: a theatre-poster band across the page. */
.hw-houdini{position:relative;overflow:hidden;isolation:isolate;margin:56px 0 0;padding:84px 0 70px;background:radial-gradient(ellipse at 15% 0%,#3a2312 0%,rgba(58,35,18,0) 55%),linear-gradient(180deg,#120d0a 0%,#1c130d 100%);color:var(--hw-bone)}
.hw-houdini-art{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hw-hundred{position:absolute;right:-2%;top:-6%;font-size:clamp(220px,30vw,460px);font-weight:900;letter-spacing:-.08em;line-height:1;color:transparent;-webkit-text-stroke:2px rgba(217,178,92,.32);transform:rotate(-6deg)}
.hw-chain{position:absolute;left:-5%;right:-5%;top:52%;height:18px;background:repeating-linear-gradient(90deg,rgba(217,178,92,.38) 0 22px,transparent 22px 26px,rgba(217,178,92,.18) 26px 48px,transparent 48px 52px);transform:rotate(-4deg);animation:hw-chain 30s linear infinite}
.hw-lock{position:absolute;right:12%;top:calc(52% - 40px);width:62px;height:54px;border-radius:8px;background:linear-gradient(160deg,#e2c178,#9c7a32);transform:rotate(-4deg);box-shadow:inset 0 -6px 0 rgba(0,0,0,.18)}
.hw-lock::before{content:"";position:absolute;left:12px;right:12px;top:-30px;height:40px;border:7px solid #c9a75a;border-bottom:0;border-radius:24px 24px 0 0;transform-origin:85% 100%}
.hw-lock i{position:absolute;left:50%;top:18px;width:10px;height:18px;margin-left:-5px;border-radius:5px;background:#3a2a10}
.hw-houdini-in{position:relative}
.hw-houdini-head{max-width:820px}
.hw-houdini-kicker{margin:0 0 16px;font-size:12px;letter-spacing:2.4px;text-transform:uppercase;font-weight:700;color:var(--hw-gold)}
.hw-houdini h2{font-size:clamp(40px,5.6vw,84px);letter-spacing:-.05em;line-height:1;margin:0 0 22px;font-family:Georgia,"Times New Roman",serif;font-weight:700}
.hw-houdini-head p{font-size:clamp(17px,1.5vw,20px);line-height:1.6;margin:0 0 26px;color:#f0e2c8}
.hw-houdini-cta{display:inline-block;padding:14px 20px;background:var(--hw-gold);color:#1c130d;font-weight:800;text-decoration:none;transition:transform .2s}
.hw-houdini-cta:hover{transform:translateY(-2px)}
.hw-houdini-sub{margin:46px 0 18px;font-size:12px;letter-spacing:2px;text-transform:uppercase;color:var(--hw-gold)}
.hw-tickets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.hw-ticket{position:relative;display:grid;grid-template-columns:96px minmax(0,1fr) 28px;gap:18px;align-items:start;padding:20px 20px 20px 0;background:#f7ecd6;color:#1c130d;border-left:6px solid var(--hw-gold);transition:transform .2s}
.hw-ticket:hover{transform:translateY(-3px)}
.hw-ticket::before,.hw-ticket::after{content:"";position:absolute;left:98px;width:18px;height:18px;border-radius:50%;background:#1a120c}
.hw-ticket::before{top:-9px}.hw-ticket::after{bottom:-9px}
.hw-ticket time{display:flex;flex-direction:column;align-items:center;padding-right:10px;border-right:2px dashed rgba(28,19,13,.3);min-height:100%;text-align:center}
.hw-ticket time b{font-size:44px;line-height:1;letter-spacing:-.04em;font-family:Georgia,"Times New Roman",serif}
.hw-ticket time span{font-size:12px;text-transform:uppercase;letter-spacing:2px;font-weight:700}
.hw-ticket time i{margin-top:8px;font-style:normal;font-size:11px;font-weight:700;line-height:1.35}
.hw-ticket h4{margin:0 0 8px;font-size:21px;line-height:1.2;letter-spacing:-.4px}
.hw-ticket h4 a{text-decoration:none}
.hw-ticket h4 a::after{content:"";position:absolute;inset:0}
.hw-ticket p{margin:0 0 8px;font-size:13px;line-height:1.55}
.hw-ticket-where{font-weight:700;font-size:12px!important;letter-spacing:.2px}
.hw-ticket-go{font-size:22px;font-weight:700}
.hw-ticket.is-past{opacity:.6}
.hw-ticket-past{font-size:11px!important;text-transform:uppercase;letter-spacing:1.4px;font-weight:700}
.hw-week{margin:0 0 30px}
.hw-week h3{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;font-size:22px;letter-spacing:-.6px;margin:0 0 16px}
.hw-week h3 span{font-size:11px;text-transform:uppercase;letter-spacing:1.3px;color:#48565b}
.hw-rail-haunt .nw-head{border-bottom-color:#4a2466}.hw-rail-treat .nw-head{border-bottom-color:var(--hw-pumpkin)}.hw-rail-party .nw-head{border-bottom-color:#bb4381}.hw-rail-screen .nw-head{border-bottom-color:var(--blue)}
.hw-recap{margin-top:30px}
@supports (animation-timeline:view()){.hw-ticket,.hw-week{animation:nw-rise linear both;animation-timeline:view();animation-range:entry 0% entry 40%}.hw-lock::before{animation:hw-unlock linear both;animation-timeline:view();animation-range:entry 30% cover 55%}}
@keyframes hw-moon{from{transform:translate3d(0,0,0) scale(1)}to{transform:translate3d(-10px,8px,0) scale(1.04)}}
@keyframes hw-fog{from{transform:translate3d(-6%,0,0)}to{transform:translate3d(10%,-3%,0)}}
@keyframes hw-fly{0%{transform:translate3d(-12vw,0,0)}25%{transform:translate3d(25vw,-28px,0)}50%{transform:translate3d(55vw,18px,0)}75%{transform:translate3d(82vw,-20px,0)}100%{transform:translate3d(112vw,6px,0)}}
@keyframes hw-flap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
@keyframes hw-flicker{0%,100%{opacity:1}8%{opacity:.55}10%{opacity:1}46%{opacity:.8}48%{opacity:1}71%{opacity:.6}73%{opacity:1}}
@keyframes hw-bob{from{transform:translate3d(0,4px,0) rotate(-3deg)}to{transform:translate3d(0,-6px,0) rotate(3deg)}}
@keyframes hw-chain{from{transform:rotate(-4deg) translate3d(0,0,0)}to{transform:rotate(-4deg) translate3d(-104px,0,0)}}
@keyframes hw-unlock{from{transform:translateY(0) rotate(0)}to{transform:translateY(-12px) rotate(-28deg)}}
@media(max-width:1050px){.hw-tickets{grid-template-columns:1fr}.hw-night::before{left:-28px;right:-28px}}
@media(max-width:650px){
 .hw-hero{min-height:0}
 .hw-moon{right:5%;top:3%;width:64px}
 .hw-crumb-last{display:none}
 .hw-hero::before{background:linear-gradient(0deg,rgba(20,12,28,.96) 0%,rgba(20,12,28,.8) 45%,rgba(20,12,28,.42) 100%)}
 .hw-hero .nw-hero-copy{padding-bottom:64px}
 .hw-credit{left:18px;right:18px;max-width:none;text-align:left}
 .hw-bat{width:34px}.hw-bat-2{width:26px}.hw-bat-3,.hw-bat-5{width:18px}
 .hw-countdown>div{min-width:0;flex:1;padding:10px 6px 8px}
 .hw-countdown b{font-size:34px}
 .hw-countdown p{flex-basis:100%;margin:2px 0 0}
 .hw-official-art{margin:-22px -22px 20px}
 .hw-night::before{left:-18px;right:-18px}
 .hw-badge{display:table;margin:10px 0 0;transform:rotate(-2deg)}
 .hw-houdini{padding:60px 0 50px}
 .hw-hundred{font-size:200px;top:-2%;right:-12%}
 .hw-lock{right:6%;transform:rotate(-4deg) scale(.8)}
 .hw-ticket{grid-template-columns:76px minmax(0,1fr) 20px;gap:12px;padding:16px 14px 16px 0}
 .hw-ticket::before,.hw-ticket::after{left:78px}
 .hw-ticket time b{font-size:34px}
 .hw-ticket h4{font-size:18px}
 .hw-week h3{font-size:19px}
}
@media(prefers-reduced-motion:reduce){.hw-moon,.hw-fog,.hw-bat,.hw-bat svg,.hw-countdown>div::after,.hw-official-icon,.hw-chain,.hw-lock::before,.hw-ticket,.hw-week{animation:none}.hw-bat{display:none}}