/* FloqBoard seasonal themes for the glass TV board.
   One look per holiday: a palette for every glass panel, a garland across the top, art on the Welcome page,
   a sticker on the pre-shift paper and a countdown. Nothing ever sits on top of text.
   Turned on by helm-themes.js (by date, or by the admin "Holiday theme" setting). */

/* ---------- palettes: every glass panel, label and the page dimmer follow these ---------- */
body.glass[data-theme]{--th-dim:rgba(6,12,6,.52);--th-wire:rgba(10,10,10,.75);}
body.glass[data-theme="halloween"]{--th-panel:rgba(20,9,28,.88);--g-tint:rgba(26,10,34,.64);--g-gold:#FF9A3C;--th-dim:rgba(20,6,28,.6);--th-a:#FF8A1F;--th-b:#8E5CF7;--th-c:#9BE15D;--th-ink:#1B0F22;}
body.glass[data-theme="thanksgiving"]{--th-panel:rgba(34,18,8,.88);--g-tint:rgba(44,22,10,.6);--g-gold:#F2A541;--th-dim:rgba(30,14,4,.5);--th-a:#C4562C;--th-b:#F2A541;--th-c:#8A9A3B;--th-wire:#C8A46A;}
body.glass[data-theme="holidays"]{--th-panel:rgba(7,22,30,.88);--g-tint:rgba(8,26,34,.64);--g-gold:#F4CF6B;--th-dim:rgba(4,14,24,.56);--th-a:#E5484D;--th-b:#3FB06F;--th-c:#F4CF6B;}
body.glass[data-theme="newyear"]{--th-panel:rgba(10,10,24,.9);--g-tint:rgba(12,12,28,.68);--g-gold:#EFD9A0;--th-dim:rgba(6,6,18,.6);--th-a:#E9C46A;--th-b:#D7DCE3;--th-c:#F5F1E6;--th-wire:rgba(239,217,160,.55);}
body.glass[data-theme="july4"]{--th-panel:rgba(9,19,44,.88);--g-tint:rgba(12,24,60,.62);--g-gold:#FFD36B;--th-dim:rgba(6,12,34,.56);--th-a:#E63946;--th-b:#F8F5EC;--th-c:#4D7FF0;}
body.glass[data-theme="gasparilla"]{--th-panel:rgba(12,10,8,.9);--g-tint:rgba(14,12,10,.7);--g-gold:#F2C14E;--th-dim:rgba(8,6,4,.6);--th-a:#F2C14E;--th-b:#141414;--th-c:#B3402A;--th-wire:#C9A15A;}
body.glass[data-theme="worldcup"]{--th-panel:rgba(6,30,18,.88);--g-tint:rgba(6,36,22,.62);--g-gold:#B6F36A;--th-dim:rgba(4,20,12,.54);--th-a:#2E9D57;--th-b:#F8F5EC;--th-c:#E63946;--th-d:#4D7FF0;}
body.glass[data-theme]::after{background:var(--th-dim);}

/* ---------- room for the garland: the board slides down a touch ---------- */
body.glass[data-theme] .wrap{padding-top:5.6vh;}
#thGarland{position:fixed;left:0;top:0;width:100vw;height:5.6vh;z-index:1;pointer-events:none;}
#thGarland svg{display:block;width:100%;height:100%;overflow:visible;}
#thGarland .tw{animation:thTwinkle 2.6s ease-in-out infinite;}
#thGarland .tw.d1{animation-delay:-.9s;}#thGarland .tw.d2{animation-delay:-1.7s;}
@keyframes thTwinkle{0%,100%{opacity:1}50%{opacity:.42}}

/* ---------- header: the line under the board name carries the countdown ---------- */
body.glass[data-theme] .gh-sub{color:rgba(245,241,230,.88);}
body.glass[data-theme] .gh-sub b{color:var(--g-gold);font-weight:800;}

/* ---------- Welcome page ---------- */
body.glass[data-theme] .welcome-card{overflow:hidden;}
body.glass[data-theme] .welcome-stage{position:relative;z-index:1;}
#thArt{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;border-radius:inherit;}
#thArt>*{position:absolute;}
#thArt svg{display:block;width:100%;height:100%;overflow:visible;}
#welcomeTitle .thw{color:var(--g-gold);}
#thArt .th-scene{left:0;right:0;bottom:0;height:31%;}
#thArt .th-scene svg{width:100%;height:100%;}
/* flip-board countdown */
#thCount{display:inline-flex;align-items:center;gap:1.3vw;margin:.6vh auto 0;}
#thCount .tiles{display:flex;gap:.45vw;}
#thCount .tiles span{position:relative;display:block;width:5.2vw;height:9.4vh;line-height:9.4vh;text-align:center;border-radius:.7vw;background:#0d0d10;color:#F5F1E6;
  font-weight:800;font-size:7.4vh;font-variant-numeric:tabular-nums;letter-spacing:-.02em;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.09),0 1.2vh 2.4vh rgba(0,0,0,.35);}
#thCount .tiles span::before{content:"";position:absolute;left:0;right:0;top:50%;height:.3vh;margin-top:-.15vh;background:rgba(0,0,0,.6);}
#thCount .tiles span::after{content:"";position:absolute;left:0;right:0;top:0;height:50%;border-radius:.7vw .7vw 0 0;background:rgba(255,255,255,.035);}
#thCount .lab{font-weight:700;font-size:1.7vh;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,241,230,.82);text-align:left;line-height:1.2;}
#thCount .lab b{display:block;font-size:3.8vh;letter-spacing:-.01em;text-transform:none;color:var(--g-gold);font-weight:800;margin-top:.2vh;}

/* ---------- main board: a sticker on the pre-shift paper (bottom corner, off the text) ---------- */
/* in the paper's title row, at the right: it takes its own space, so it never covers a note */
#thSticker{flex-shrink:0;align-self:center;margin-left:auto;width:5.8vh;height:5.8vh;margin-top:-.6vh;margin-bottom:-.6vh;pointer-events:none;transform:rotate(-9deg);
  filter:drop-shadow(0 .5vh .8vh rgba(0,0,0,.25));}
#gPre .gpg:not(:empty)+#thSticker{margin-left:.8vw;}
#thSticker svg{width:100%;height:100%;display:block;overflow:visible;}

/* ---------- moving bits (few, slow, transform/opacity only: easy on the TV stick) ---------- */
.th-fall{top:-8%;animation:thFall linear infinite;will-change:transform;}
@keyframes thFall{0%{transform:translate3d(0,0,0) rotate(0deg)}100%{transform:translate3d(var(--dx,2vw),112vh,0) rotate(var(--rot,240deg))}}
.th-fly{animation:thFly linear infinite;will-change:transform;}
@keyframes thFly{0%{transform:translate3d(-12vw,0,0)}100%{transform:translate3d(78vw,-3vh,0)}}
.th-flap{animation:thFlap .42s ease-in-out infinite alternate;transform-origin:50% 40%;}
@keyframes thFlap{from{transform:scaleY(1)}to{transform:scaleY(.45)}}
.th-pop{animation:thPop 3.6s ease-out infinite;will-change:transform,opacity;transform:scale(.3);opacity:0;}
@keyframes thPop{0%{transform:scale(.3);opacity:0}12%{opacity:1}60%{transform:scale(1);opacity:.9}100%{transform:scale(1.08);opacity:0}}
.th-bob{animation:thBob 6s ease-in-out infinite alternate;will-change:transform;}
@keyframes thBob{from{transform:translate3d(0,0,0) rotate(-2deg)}to{transform:translate3d(0,-.9vh,0) rotate(2deg)}}
.th-sail{animation:thSail 60s linear infinite;will-change:transform;}
@keyframes thSail{0%{transform:translate3d(0,0,0)}100%{transform:translate3d(-74vw,0,0)}}
.th-spin{animation:thSpin 18s linear infinite;}
@keyframes thSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.th-fall,.th-fly,.th-flap,.th-pop,.th-bob,.th-sail,.th-spin,#thGarland .tw{animation:none !important;}.th-pop{opacity:.85;transform:none;}}

/* ---------- round 2: decorations on the panel edges of the main board ---------- */
body.glass[data-theme] .gcard{overflow:visible;}
#thCorner{position:absolute;top:0;right:0;width:11vh;height:10vh;z-index:3;pointer-events:none;overflow:hidden;border-top-right-radius:var(--g-r);}
#thCorner>div{position:absolute;top:0;right:0;}
#thCorner svg{display:block;width:100%;height:100%;}
#thSpider{position:absolute;top:0;right:5.4vh;width:2.3vh;height:7.4vh;z-index:3;pointer-events:none;}
#thSpider svg{display:block;width:100%;height:100%;overflow:visible;}
body.th-ton-paged #thCorner,body.th-ton-paged #thSpider{display:none;}
.th-cap{position:absolute;left:1vw;right:1vw;top:0;height:2.3vh;z-index:3;pointer-events:none;}
.th-cap.top{left:.8vw;right:.8vw;top:-1.05vh;height:2.1vh;}
.th-cap svg{display:block;width:100%;height:100%;}
#thArt .th-bob{transform-box:fill-box;transform-origin:50% 100%;}
/* the weather card sits in front of the scene as a solid panel */
body.glass[data-theme] .welcome-weather{background:var(--th-panel) !important;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.12),0 1.6vh 3.2vh rgba(0,0,0,.35) !important;}
/* Welcome page steps down when space is short (set by fitWelcome) */
.welcome-card.th-c1 #welcomeLogo{width:10.5vw !important;padding:1.1vh .8vw !important;}
.welcome-card.th-c1 #thCount .tiles span{width:4.3vw;height:7.4vh;line-height:7.4vh;font-size:5.9vh;}
.welcome-card.th-c1 #thCount .lab b{font-size:3.1vh;}
.welcome-card.th-c2 #welcomeSub{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;}
.welcome-card.th-c3 #welcomeLogo{display:none !important;}