/* Seasonal themes (App\Support\Themes\ThemeEngine): the member app header, the member home banner, the busy card
   icons, the door screen corners and welcome card, and the gentle animation. Colours and art come in as variables
   (--th-*) from the theme of the day. Decorations sit behind content and never take taps (pointer-events:none). */

/* ---------- member app header ---------- */
[data-th-header]:has(> .th-layer){position:relative; overflow:hidden; background:linear-gradient(135deg,var(--th-h1),var(--th-h2)) !important; box-shadow:inset 0 -3px 0 var(--th-accent)}
[data-th-header]:has(> .th-layer) > :not(.th-layer){position:relative; z-index:1}
.th-layer{position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden}
.th-header-art{position:absolute; right:0; bottom:3px; width:min(62%,260px); height:auto; aspect-ratio:4/1; opacity:.55; object-fit:contain; object-position:right bottom}
[data-th-header]:has(> .th-layer[data-font]) .tracking-wide, .th-banner[data-font] .th-banner-title{font-family:var(--th-font); letter-spacing:.04em}

/* ---------- animation: drifting snow, leaves and petals, bats, rising hearts, sparks ---------- */
.th-fx{position:absolute; inset:0; overflow:hidden; pointer-events:none}
.th-p{position:absolute; top:-30px; display:block; opacity:.85; will-change:transform; pointer-events:none; user-select:none}
.th-fall{animation:th-fall linear infinite}
.th-rise{top:auto; bottom:-30px; animation:th-rise linear infinite}
.th-twinkle{animation:th-twinkle ease-in-out infinite}
@keyframes th-fall{0%{transform:translate3d(0,0,0) rotate(0)} 50%{transform:translate3d(18px,50vh,0) rotate(160deg)} 100%{transform:translate3d(-12px,105vh,0) rotate(320deg)}}
@keyframes th-rise{0%{transform:translate3d(0,0,0) scale(.8)} 50%{transform:translate3d(-14px,-50vh,0) scale(1)} 100%{transform:translate3d(10px,-105vh,0) scale(.9)}}
@keyframes th-twinkle{0%,100%{opacity:0; transform:scale(.4)} 50%{opacity:.9; transform:scale(1)}}
/* bats (themes.js draws them): a slow drift across (th-bat), a zig zag up and down with a tilt into each swoop
   (th-bat-bob) and the wings flapping about the shoulders (th-wing). Only transforms move, so phones keep 60 fps;
   a phone that cannot gets th-bats-still: they hover in place and only flap. */
.th-bat{position:absolute; left:-70px; display:block; will-change:transform; pointer-events:none; animation:th-bat-x linear infinite}
.th-bat.th-rtl{left:auto; right:-70px; animation-name:th-bat-x-rtl}
.th-bat-bob{display:block; will-change:transform; animation:th-bat-bob ease-in-out infinite alternate}
.th-bat-svg{display:block; width:100%; height:auto; overflow:visible; fill:#05050a; stroke:rgba(160,140,225,.28); stroke-width:.5}
.th-bat.th-far{opacity:.5; filter:blur(.6px)}
.th-bat.th-far .th-eye,.th-bat.th-far .th-eye-glow{display:none}
.th-bat-svg .th-bone{fill:none; stroke:#1b1b24; stroke-width:.8}
.th-bat-svg .th-eye{fill:#ff2a2a; fill-opacity:.8; stroke:none}
.th-bat-svg .th-eye-glow{fill:#ff3b3b; fill-opacity:.2; stroke:none}
.th-wing{transform-box:view-box; transform-origin:0 0; animation:th-flap .14s ease-in-out infinite}
.th-bats-still .th-bat{animation:none; left:var(--th-x); right:auto}
.th-bats-still .th-bat-bob{animation-duration:3.2s !important}
.th-bats-still .th-wing{animation-duration:.45s !important}
@keyframes th-bat-x{0%{transform:translate3d(0,0,0)} 12%{transform:translate3d(calc(var(--th-dx) * .12),calc(var(--th-drift) * .6),0)} 18%{transform:translate3d(calc(var(--th-dx) * .2),calc(var(--th-drift) * -1.4),0)} 40%{transform:translate3d(calc(var(--th-dx) * .4),calc(var(--th-drift) * -.4),0)} 47%{transform:translate3d(calc(var(--th-dx) * .46),calc(var(--th-drift) * 1.2),0)} 70%{transform:translate3d(calc(var(--th-dx) * .7),calc(var(--th-drift) * .3),0)} 78%{transform:translate3d(calc(var(--th-dx) * .8),calc(var(--th-drift) * -1),0)} 100%{transform:translate3d(var(--th-dx),0,0)}}
@keyframes th-bat-x-rtl{0%{transform:translate3d(0,0,0)} 15%{transform:translate3d(calc(var(--th-dx) * .15),calc(var(--th-drift) * -1.2),0)} 22%{transform:translate3d(calc(var(--th-dx) * .24),calc(var(--th-drift) * .8),0)} 45%{transform:translate3d(calc(var(--th-dx) * .45),calc(var(--th-drift) * .2),0)} 52%{transform:translate3d(calc(var(--th-dx) * .53),calc(var(--th-drift) * -1.3),0)} 75%{transform:translate3d(calc(var(--th-dx) * .75),calc(var(--th-drift) * 1),0)} 100%{transform:translate3d(var(--th-dx),0,0)}}
@keyframes th-bat-bob{0%{transform:translate3d(0,calc(var(--th-dy) * -1),0) rotate(-8deg)} 100%{transform:translate3d(0,var(--th-dy),0) rotate(8deg)}}
@keyframes th-flap{0%,100%{transform:rotate(26deg)} 50%{transform:rotate(-30deg) scale(.9,.6)}}
@media (prefers-reduced-motion: reduce){ .th-fx{display:none !important} .th-p,.th-bat,.th-bat-bob,.th-wing{animation:none !important} }

/* ---------- member home banner ---------- */
.th-banner{position:relative; overflow:hidden; border-radius:16px; background:var(--th-soft); color:var(--th-ink); margin-bottom:12px; border:1px solid color-mix(in srgb,var(--th-accent) 25%,transparent)}
.th-banner-row{display:flex; align-items:center; gap:12px; padding:12px 12px 6px 14px}
.th-banner-icon{width:40px; height:40px; flex-shrink:0}
.th-banner-text{min-width:0; flex:1}
.th-banner-title{font-weight:700; font-size:15px; line-height:1.25}
.th-banner-line{font-size:13px; line-height:1.35; margin-top:2px}
.th-banner-x{flex-shrink:0; align-self:flex-start; width:32px; height:32px; border-radius:999px; font-size:18px; line-height:1; color:var(--th-ink); background:transparent; border:0; cursor:pointer}
.th-banner-x:hover,.th-banner-x:focus-visible{background:color-mix(in srgb,var(--th-accent) 14%,transparent)}
.th-banner-strip{display:block; width:100%; height:auto; aspect-ratio:4/1; max-height:84px; object-fit:cover; object-position:center bottom}
.th-banner.th-hidden{display:none}
/* with an illustrated hero banner: the whole picture across the top of the card (its left quarter is always empty,
   so it is trimmed to 2 by 1 from the right), the words underneath on the theme's soft colour, never over the art */
.th-hero{display:block; pointer-events:none}
.th-hero img{display:block; width:100%; height:auto; aspect-ratio:2/1; max-height:190px; object-fit:cover; object-position:right center}
.th-has-hero .th-banner-row{padding:10px 14px 12px 16px}
.th-has-hero .th-banner-title{font-size:17px}
.th-has-hero .th-banner-x{position:absolute; top:8px; right:8px; background:color-mix(in srgb,var(--th-soft) 88%,transparent)}
.th-pill{display:inline-flex; align-items:center; gap:6px; border-radius:999px; padding:2px 10px; font-size:11px; font-weight:600; background:var(--th-accent); color:var(--th-accent-ink)}

/* ---------- small icons (busy card, staff site) ---------- */
.th-icon{display:inline-block; width:1.35em; height:1.35em; vertical-align:-.3em; margin-right:.3em}

/* ---------- door screen ---------- */
.th-k-layer{position:fixed; inset:0; pointer-events:none; z-index:-1; overflow:hidden}   /* behind everything on the screen */
.kw-stage .th-k-layer{position:absolute; z-index:1}
.kw-stage[data-theme] .kw-stage-panel{z-index:2}   /* the preview's card above the art, as on the screen */
.th-k-tint{position:absolute; inset:0; background:radial-gradient(120vh 120vh at 50% 42%, var(--th-h2) 0%, var(--th-h1) 62%); opacity:.6}
.th-k-corner{position:absolute; top:0; width:24vh; max-width:30vw; height:auto; aspect-ratio:1; opacity:.9}
.kw-stage .th-k-corner{width:24cqh}
.th-k-corner.th-l{left:0} .th-k-corner.th-r{right:0; transform:scaleX(-1)}
.th-k-hero{position:absolute; left:0; right:0; bottom:0; display:block}
.th-k-hero img{display:block; width:100%; height:auto; max-height:46vh; object-fit:contain; object-position:right bottom; opacity:.92}
.kw-stage .th-k-hero img{max-height:46cqh}
.th-k-strip{position:absolute; bottom:0; width:50%; height:auto; aspect-ratio:4/1; max-height:20vh; object-fit:contain; object-position:left bottom; opacity:.45}
.th-k-strip.th-l{left:0} .th-k-strip.th-r{right:0; transform:scaleX(-1)}
.kw-stage .th-k-strip{max-height:20cqh}
/* A picture or short looping video as the door's background (DoorArt, themes.js doorArt): it replaces the theme's tint, corners and
   banner (the animation stays), with a light shade so the keypad and card stay easy to read. */
.th-k-artlayer{position:fixed; inset:0; pointer-events:none; z-index:-1; overflow:hidden; background:#000}
.th-k-artlayer img,.th-k-artlayer video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.th-k-artlayer::after{content:""; position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.28))}
.kw-stage .th-k-artlayer{position:absolute; z-index:0}
[data-door-art] .th-k-tint,[data-door-art] .th-k-hero,[data-door-art] .th-k-strip,[data-door-art] .th-k-corner{display:none}
[data-theme] .kiosk-center{z-index:2}
[data-theme] .memberGreen{position:relative; overflow:hidden}
[data-theme] .memberGreen::before,[data-theme] .memberGreen::after{content:""; position:absolute; top:0; width:22cqh; height:22cqh; background:var(--th-corner) left top/contain no-repeat; opacity:.5; pointer-events:none}
[data-theme] .memberGreen::before{left:0}
[data-theme] .memberGreen::after{right:0; transform:scaleX(-1)}
[data-theme] .memberGreen > *{position:relative; z-index:1}
[data-theme] .memberBye::after{content:""; position:absolute; left:0; top:0; width:20cqh; height:20cqh; background:var(--th-corner) left top/contain no-repeat; opacity:.35; pointer-events:none}
[data-theme] .memberCard{box-shadow:0 30px 80px rgba(0,0,0,.4), 0 0 0 .5cqh var(--th-accent)}

/* ---------- door screen on a theme's big day: the entry and exit cards in the theme's colours, with its door line ---------- */
[data-theme-big] .memberGreen{background:linear-gradient(160deg,var(--th-accent) 0%,var(--th-h2) 55%,var(--th-h1) 100%) !important; color:#fff}
[data-theme-big] .memberBye{background:linear-gradient(165deg,var(--th-h2) 0%,var(--th-h1) 100%) !important; color:#fff}
[data-theme-big] .memberGreen,[data-theme-big] .memberBye{box-shadow:0 30px 80px rgba(0,0,0,.45), 0 0 0 .6cqh var(--th-accent), 0 0 8cqh color-mix(in srgb,var(--th-accent) 50%,transparent)}
[data-theme-big] .memberGreen .mc-title,[data-theme-big] .memberBye .mc-title{font-family:var(--th-font,inherit); letter-spacing:.03em}
.mc-bigday{display:inline-block; margin-top:2cqh; padding:1.2cqh 2.6cqh; border-radius:1.6cqh; background:var(--th-accent,#43358a); color:var(--th-accent-ink,#fff); font-family:var(--th-font,inherit); font-size:clamp(18px,3.2cqh,36px); font-weight:700; line-height:1.25; letter-spacing:.02em; box-shadow:0 0 3cqh color-mix(in srgb,var(--th-accent,#43358a) 60%,transparent)}

/* ---------- launch theme lettering (fixed SVG headings) and its live text font ---------- */
@font-face{font-family:"Anton"; src:url(/fonts/anton-latin.woff2) format("woff2"); font-weight:400; font-style:normal; font-display:swap}
.th-k-title{display:block; height:12vh; max-width:70vw; width:auto; margin:0 auto; filter:drop-shadow(0 0 2vh rgba(255,61,154,.55))}
.kw-stage .th-k-title{height:12cqh}
.mc-mission{display:block; height:8cqh; width:auto; margin:0 auto 1.2cqh; transform:rotate(-2.5deg); animation:mc-mission-in .55s cubic-bezier(.2,1.4,.4,1) both}
@keyframes mc-mission-in{from{transform:scale(.4) rotate(-12deg); opacity:0} to{transform:scale(1) rotate(-2.5deg); opacity:1}}
@media (prefers-reduced-motion: reduce){.mc-mission{animation:none}}