/* Seasonal home page banner and occasion icons (inc/home_themes.php, index_test.html).
   Each theme is a class on .ht-banner (.ht-halloween, .ht-birthday) with its own scene; all motion is CSS and stops for reduced motion. */

.ht-banner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 20px;
    min-height: 360px; margin: 0 0 18px; padding: 34px 40px; overflow: hidden; border-radius: 20px; box-shadow: 0 10px 30px rgba(0, 0, 0, .16);
    font-family: 'Raleway', Arial, sans-serif; isolation: isolate; }
.ht-scene { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ht-scene > * { position: absolute; }
.ht-scene svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* Text side */
.ht-text { position: relative; z-index: 2; max-width: 440px; }
.ht-chip { display: inline-block; margin: 0 0 12px; padding: 6px 14px; font-size: 14px; font-weight: 700; letter-spacing: .3px; border-radius: 20px; }
.ht-banner h1 { margin: 0 0 10px; font-family: 'Playfair Display', Georgia, serif; font-size: 46px; font-weight: 700; line-height: 1.08;
    text-align: left; background: none; }
.ht-text p { margin: 0 0 22px; font-size: 18px; line-height: 1.5; }
.ht-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.ht-btn { display: inline-block; padding: 15px 28px; font-size: 18px; font-weight: 800; text-decoration: none !important; border-radius: 32px;
    transition: transform .15s, box-shadow .15s; }
.ht-btn:hover { transform: translateY(-2px); }
.ht-link { font-size: 16px; font-weight: 700; text-decoration: none !important; }
.ht-link:hover { text-decoration: underline !important; }

/* Card side: three cards fanned out, bobbing out of step */
.ht-cards { position: relative; z-index: 2; height: 270px; }
/* The fan always fits its half of the banner: each card is 42% of it wide, placed at 0%, 29% and 58%. */
.ht-card { position: absolute; top: 50%; width: 42%; max-width: 240px; overflow: hidden; color: #1f2a30 !important;
    text-decoration: none !important; background: #fff; border-radius: 12px; box-shadow: 0 10px 24px rgba(0, 0, 0, .28);
    animation: ht-bob 4.5s ease-in-out infinite; transition: box-shadow .2s; }
.ht-card img { display: block; width: 100%; aspect-ratio: 328 / 172; object-fit: cover; }
.ht-card span { display: block; padding: 8px 10px 9px; overflow: hidden; font-size: 13px; font-weight: 700; white-space: nowrap; text-overflow: ellipsis; }
.ht-card1 { left: 0;   --r: -9deg; --y: 14px;  z-index: 1; animation-delay: -1.5s; }
.ht-card2 { left: 29%; --r: 0deg;  --y: -18px; z-index: 3; animation-delay: 0s; }
.ht-card3 { left: 58%; --r: 9deg;  --y: 14px;  z-index: 2; animation-delay: -3s; }
.ht-card:hover { z-index: 5; animation-play-state: paused; box-shadow: 0 16px 34px rgba(0, 0, 0, .35); }
@keyframes ht-bob {
    0%, 100% { transform: translateY(calc(-50% + var(--y))) rotate(var(--r)); }
    50%      { transform: translateY(calc(-50% + var(--y) - 10px)) rotate(var(--r)); }
}

/* ---------- Halloween ---------- */
.ht-halloween { color: #fff; background: #1b1035; }
.ht-halloween .ht-sky { inset: 0; background: radial-gradient(ellipse at 78% 18%, #5a3f8f 0%, transparent 55%),
    linear-gradient(180deg, #1b1035 0%, #2c1a4f 55%, #432561 100%); }
.ht-halloween .ht-chip { color: #1b1035; background: #ffb347; }
.ht-halloween h1 { color: #fff; text-shadow: 0 3px 14px rgba(255, 140, 40, .45); }
.ht-halloween .ht-text p { color: #e8defa; }
.ht-halloween .ht-btn { color: #fff !important; background: #f28c28; box-shadow: 0 6px 18px rgba(242, 140, 40, .45); }
.ht-halloween .ht-btn:hover { background: #ff9c3a; }
.ht-halloween .ht-link { color: #ffcf8a !important; }
.ht-stars { inset: 0; background-image:
    radial-gradient(1.5px 1.5px at 8% 12%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 22% 30%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 37% 8%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 48% 22%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 60% 6%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 70% 30%, #fff 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 92% 10%, #fff 50%, transparent 52%), radial-gradient(1px 1px at 96% 40%, #fff 50%, transparent 52%),
    radial-gradient(1px 1px at 15% 55%, #fff 50%, transparent 52%), radial-gradient(1.5px 1.5px at 54% 44%, #fff 50%, transparent 52%);
    animation: ht-twinkle 3.5s ease-in-out infinite alternate; }
@keyframes ht-twinkle { from { opacity: .45; } to { opacity: 1; } }
.ht-moon { top: 26px; right: 7%; width: 92px; height: 92px; border-radius: 50%;
    background: radial-gradient(circle at 38% 35%, #fffbe6 0%, #ffe9a8 45%, #f5c96a 100%);
    box-shadow: 0 0 40px 10px rgba(255, 220, 140, .35), 0 0 90px 30px rgba(255, 200, 120, .15); animation: ht-glow 5s ease-in-out infinite alternate; }
@keyframes ht-glow { to { box-shadow: 0 0 55px 16px rgba(255, 220, 140, .45), 0 0 120px 40px rgba(255, 200, 120, .2); } }
.ht-web { width: 120px; height: 120px; stroke: rgba(255, 255, 255, .28); stroke-width: 1.2; fill: none; }
.ht-web-l { top: 0; left: 0; }
.ht-web-r { top: 0; right: 0; transform: scaleX(-1); }
.ht-spider { top: 0; left: 46%; width: 34px; animation: ht-dangle 6s ease-in-out infinite; transform-origin: top center; }
.ht-thread { position: absolute; left: 16px; bottom: 30px; width: 1px; height: 400px; background: rgba(255, 255, 255, .45); }
.ht-spider svg { position: relative; width: 34px; height: 34px; margin-top: 60px; fill: #120a24; stroke: #120a24; stroke-width: 2.4; stroke-linecap: round; }
@keyframes ht-dangle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(48px); } }
.ht-bat { top: 22%; left: -80px; width: 74px; height: 35px; fill: #0c0618; animation: ht-fly 14s linear infinite; }
.ht-bat span { display: block; width: 100%; height: 100%; animation: ht-swoop 2.4s ease-in-out infinite; }
.ht-bat .wl, .ht-bat .wr { transform-box: fill-box; animation: ht-flap .32s ease-in-out infinite alternate; }
.ht-bat .wl { transform-origin: right center; }
.ht-bat .wr { transform-origin: left center; }
.ht-bat2 { top: 12%; width: 44px; height: 21px; animation-duration: 19s; animation-delay: -7s; }
.ht-bat3 { top: 40%; width: 38px; height: 18px; animation-duration: 23s; animation-delay: -15s; }
@keyframes ht-fly { from { left: -80px; } to { left: 105%; } }
@keyframes ht-swoop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-22px); } }
@keyframes ht-flap { from { transform: scaleY(1); } to { transform: scaleY(-.35); } }
.ht-fog { bottom: -40px; width: 70%; height: 120px; border-radius: 50%; background: radial-gradient(ellipse, rgba(220, 205, 255, .22), transparent 70%);
    filter: blur(6px); animation: ht-drift 26s ease-in-out infinite alternate; }
.ht-fog1 { left: -15%; }
.ht-fog2 { right: -20%; bottom: -30px; animation-duration: 34s; animation-direction: alternate-reverse; }
@keyframes ht-drift { to { transform: translateX(22%); } }
.ht-pumpkin { bottom: 8px; width: 92px; height: 79px; }
.ht-pumpkin .pk-body { fill: #e8761e; }
.ht-pumpkin .pk-rib { fill: none; stroke: #b9520c; stroke-width: 2.5; }
.ht-pumpkin .pk-stem { fill: #3f6b2a; }
.ht-pumpkin .pk-face { fill: #ffd76a; filter: drop-shadow(0 0 6px #ffb02e); animation: ht-flicker 2.2s steps(1) infinite; }
.ht-pk1 { left: 38%; width: 70px; height: 60px; }
.ht-pk2 { left: 49%; bottom: 4px; width: 54px; height: 46px; }
.ht-pk3 { right: 4%; width: 74px; height: 64px; }
.ht-pk3 .pk-face { animation-delay: -1s; }
@keyframes ht-flicker { 0%, 100% { opacity: 1; } 18% { opacity: .75; } 22% { opacity: .95; } 60% { opacity: .82; } 64% { opacity: 1; } }

/* ---------- Birthday ---------- */
.ht-birthday { color: #1f2a30; background: #dff3f6; }
.ht-birthday .ht-sky { inset: 0; background: radial-gradient(ellipse at 85% 10%, #ffe1ec 0%, transparent 55%), linear-gradient(160deg, #d8f1f5 0%, #eaf6f8 45%, #fde7ef 100%); }
.ht-birthday .ht-chip { color: #fff; background: #f2709c; }
.ht-birthday h1 { color: #1f2a30; }
.ht-birthday .ht-text p { color: #3b4a52; }
.ht-birthday .ht-btn { color: #fff !important; background: #2f8ea6; box-shadow: 0 6px 18px rgba(47, 142, 166, .35); }
.ht-birthday .ht-btn:hover { background: #24758a; }
.ht-birthday .ht-link { color: #24758a !important; }
.ht-garland { top: 0; left: -2%; width: 104%; height: 54px; transform-origin: top center; animation: ht-swing 5s ease-in-out infinite; }
.ht-garland .gl-str { fill: none; stroke: #c9a46a; stroke-width: 2; }
@keyframes ht-swing { 0%, 100% { transform: rotate(-.8deg); } 50% { transform: rotate(.8deg); } }
.ht-balloon { bottom: -150px; width: 54px; height: 117px; animation: ht-rise 16s linear infinite; }
.ht-balloon svg { animation: ht-sway 3.5s ease-in-out infinite alternate; transform-origin: top center; }
.ht-balloon .bl-str { fill: none; stroke: #9aa7ad; stroke-width: 1.5; }
.ht-balloon .bl-shine { fill: rgba(255, 255, 255, .5); }
.ht-bl1 { left: 44%; animation-delay: -2s; }
.ht-bl2 { left: 52%; width: 44px; height: 95px; animation-duration: 19s; animation-delay: -11s; }
.ht-bl3 { right: 24%; animation-duration: 21s; animation-delay: -6s; }
.ht-bl4 { right: 3%; width: 48px; height: 104px; animation-duration: 17s; animation-delay: -14s; }
@keyframes ht-rise { from { transform: translateY(0); } to { transform: translateY(-680px); } }
@keyframes ht-sway { from { transform: rotate(-6deg) translateX(-6px); } to { transform: rotate(6deg) translateX(6px); } }
.ht-confetti { inset: 0; }
.ht-confetti i { position: absolute; top: -20px; left: var(--x); width: 8px; height: 13px; border-radius: 2px; background: var(--c); opacity: .9;
    animation: ht-fall var(--s) linear infinite; animation-delay: calc(var(--d) * -1); }
.ht-confetti i:nth-child(3n) { width: 10px; height: 10px; border-radius: 50%; }
@keyframes ht-fall { from { transform: translateY(0) rotate(0); } to { transform: translateY(460px) rotate(540deg); } }
.ht-sparkles { inset: 0; }
.ht-sparkles i { position: absolute; width: 16px; height: 16px; background: #ffcf5c;
    clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: ht-sparkle 2.6s ease-in-out infinite; }
.ht-sparkles i:nth-child(1) { top: 22%; left: 46%; }
.ht-sparkles i:nth-child(2) { top: 70%; left: 8%; animation-delay: -.9s; background: #f2709c; }
.ht-sparkles i:nth-child(3) { top: 14%; right: 12%; animation-delay: -1.7s; background: #5cc8d7; }
.ht-sparkles i:nth-child(4) { top: 80%; left: 52%; animation-delay: -.4s; }
.ht-sparkles i:nth-child(5) { top: 44%; left: 33%; animation-delay: -2.1s; background: #9b8cf2; }
@keyframes ht-sparkle { 0%, 100% { transform: scale(.3) rotate(0); opacity: .2; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* Shared by the holiday themes: white text on a dark scene */
.ht-veterans, .ht-thanksgiving, .ht-christmas, .ht-newyear { color: #fff; }
.ht-veterans h1, .ht-thanksgiving h1, .ht-christmas h1, .ht-newyear h1 { color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .35); }

/* ---------- Veterans Day ---------- */
.ht-veterans { background: #13224a; }
.ht-veterans .ht-sky { inset: 0; background: radial-gradient(ellipse at 80% 20%, #2f4a8c 0%, transparent 60%), linear-gradient(180deg, #0f1c3f 0%, #1b2f63 60%, #24407c 100%); }
.ht-veterans .ht-chip { color: #13224a; background: #f6c453; }
.ht-veterans .ht-text p { color: #dfe6f5; }
.ht-veterans .ht-btn { color: #fff !important; background: #c8102e; box-shadow: 0 6px 18px rgba(200, 16, 46, .45); }
.ht-veterans .ht-btn:hover { background: #df2442; }
.ht-veterans .ht-link { color: #f6c453 !important; }
.ht-bunting { top: 0; left: -1%; width: 102%; height: 46px; transform-origin: top center; animation: ht-swing 6s ease-in-out infinite; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .25)); }
.ht-flag { right: 5%; bottom: 0; width: 150px; height: 92%; }
.ht-pole { position: absolute; left: 0; top: 0; bottom: 0; width: 6px; border-radius: 3px; background: linear-gradient(90deg, #d8dde6, #8d96a6); }
.ht-pole::before { content: ''; position: absolute; top: -6px; left: -4px; width: 14px; height: 14px; border-radius: 50%; background: #f6c453; }
.ht-cloth { position: absolute; top: 10px; left: 6px; display: flex; width: 132px; height: 72px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .3)); }
/* Each slice shows its part of the flag and ripples a little later than the one before. */
.ht-cloth i { flex: 0 0 11px; height: 100%; background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 53 39'%3E%3Crect width='53' height='39' fill='%2322356b'/%3E%3Cg fill='%23fff'%3E%3Ccircle cx='6' cy='6' r='1.6'/%3E%3Ccircle cx='16' cy='6' r='1.6'/%3E%3Ccircle cx='26' cy='6' r='1.6'/%3E%3Ccircle cx='36' cy='6' r='1.6'/%3E%3Ccircle cx='46' cy='6' r='1.6'/%3E%3Ccircle cx='11' cy='14' r='1.6'/%3E%3Ccircle cx='21' cy='14' r='1.6'/%3E%3Ccircle cx='31' cy='14' r='1.6'/%3E%3Ccircle cx='41' cy='14' r='1.6'/%3E%3Ccircle cx='6' cy='22' r='1.6'/%3E%3Ccircle cx='16' cy='22' r='1.6'/%3E%3Ccircle cx='26' cy='22' r='1.6'/%3E%3Ccircle cx='36' cy='22' r='1.6'/%3E%3Ccircle cx='46' cy='22' r='1.6'/%3E%3Ccircle cx='11' cy='30' r='1.6'/%3E%3Ccircle cx='21' cy='30' r='1.6'/%3E%3Ccircle cx='31' cy='30' r='1.6'/%3E%3Ccircle cx='41' cy='30' r='1.6'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 53px 39px no-repeat,
    repeating-linear-gradient(180deg, #c8102e 0 5.54px, #fff 5.54px 11.08px);
    background-position: calc(var(--n) * -11px) 0, 0 0;
    animation: ht-wave 1.8s ease-in-out infinite; animation-delay: calc(var(--n) * -.15s); }
@keyframes ht-wave { 0%, 100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(6px); filter: brightness(.85); } }
.ht-floatstars i { position: absolute; bottom: -20px; left: var(--x); width: 14px; height: 14px; background: #f6c453; opacity: .8;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    animation: ht-float var(--s) linear infinite; animation-delay: calc(var(--d) * -1); }
.ht-floatstars i:nth-child(2n) { background: #fff; width: 10px; height: 10px; }
@keyframes ht-float { from { transform: translateY(0) rotate(0); opacity: 0; } 10% { opacity: .85; } to { transform: translateY(-420px) rotate(180deg); opacity: 0; } }

/* ---------- Thanksgiving ---------- */
.ht-thanksgiving { background: #6b2a0d; }
.ht-thanksgiving .ht-sky { inset: 0; background: linear-gradient(170deg, #5e230b 0%, #8f3a12 45%, #c4621f 80%, #e08a2e 100%); }
.ht-sun { top: -60px; right: 8%; width: 220px; height: 220px; border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 214, 120, .55) 0%, rgba(255, 170, 60, .2) 45%, transparent 70%); animation: ht-glow2 6s ease-in-out infinite alternate; }
@keyframes ht-glow2 { to { transform: scale(1.12); opacity: .8; } }
.ht-thanksgiving .ht-chip { color: #5e230b; background: #f6d58a; }
.ht-thanksgiving .ht-text p { color: #fbe6cf; }
.ht-thanksgiving .ht-btn { color: #4a1f08 !important; background: #f6c453; box-shadow: 0 6px 18px rgba(246, 196, 83, .4); }
.ht-thanksgiving .ht-btn:hover { background: #ffd36e; }
.ht-thanksgiving .ht-link { color: #f6d58a !important; }
.ht-leaves { inset: 0; }
.ht-leaves i { position: absolute; top: -40px; left: var(--x); width: var(--w); height: var(--w); animation: ht-leaf var(--s) linear infinite;
    animation-delay: calc(var(--d) * -1); }
.ht-leaves i svg { animation: ht-flutter 2.4s ease-in-out infinite alternate; }
@keyframes ht-leaf { from { transform: translate(0, 0) rotate(0); } 50% { transform: translate(30px, 230px) rotate(200deg); } to { transform: translate(-10px, 460px) rotate(380deg); } }
@keyframes ht-flutter { from { transform: rotateY(0) rotate(-12deg); } to { transform: rotateY(60deg) rotate(12deg); } }

/* ---------- Christmas ---------- */
.ht-christmas { background: #0b2a4a; }
.ht-christmas .ht-sky { inset: 0; background: radial-gradient(ellipse at 75% 15%, #1f5d8c 0%, transparent 55%), linear-gradient(180deg, #08203a 0%, #0f3557 60%, #16507a 100%); }
.ht-christmas .ht-chip { color: #3b0a10; background: #f6c453; }
.ht-christmas .ht-text p { color: #dceaf5; }
.ht-christmas .ht-btn { color: #fff !important; background: #c8102e; box-shadow: 0 6px 18px rgba(200, 16, 46, .45); }
.ht-christmas .ht-btn:hover { background: #df2442; }
.ht-christmas .ht-link { color: #f6c453 !important; }
.ht-lights { top: 0; left: -1%; width: 102%; height: 46px; }
.ht-lights .bulb { animation: ht-blink 1.8s steps(1) infinite; }
.ht-lights .b1 { animation-delay: -.6s; }
.ht-lights .b2 { animation-delay: -1.2s; }
@keyframes ht-blink { 0%, 100% { opacity: 1; filter: drop-shadow(0 0 5px currentColor); } 50% { opacity: .45; filter: none; } }
.ht-xstar { top: 52px; right: 9%; width: 34px; height: 34px; background: #ffe58a;
    clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
    filter: drop-shadow(0 0 10px #ffe58a); animation: ht-sparkle 3s ease-in-out infinite; }
.ht-snow { inset: 0; }
.ht-snow i { position: absolute; top: -12px; left: var(--x); width: var(--w); height: var(--w); border-radius: 50%; background: #fff; opacity: .9;
    animation: ht-snowfall var(--s) linear infinite; animation-delay: calc(var(--d) * -1); }
@keyframes ht-snowfall { from { transform: translate(0, 0); } 50% { transform: translate(18px, 200px); } to { transform: translate(-8px, 420px); } }
.ht-hills { left: 0; right: 0; bottom: 0; height: 64px; }
.ht-tree { bottom: 14px; width: 34px; height: 51px; }
.ht-tr1 { left: 34%; }
.ht-tr2 { left: 40%; bottom: 8px; width: 26px; height: 39px; }
.ht-tr3 { right: 4%; bottom: 18px; }

/* ---------- New Year ---------- */
.ht-newyear { background: #120f33; }
.ht-newyear .ht-sky { inset: 0; background: radial-gradient(ellipse at 70% 25%, #3a2a7a 0%, transparent 55%), linear-gradient(180deg, #0a0a23 0%, #181342 60%, #2a1d5c 100%); }
.ht-newyear .ht-chip { color: #1a1446; background: #f2c14e; }
.ht-newyear .ht-text p { color: #e3def8; }
.ht-newyear .ht-btn { color: #1a1446 !important; background: #f2c14e; box-shadow: 0 6px 18px rgba(242, 193, 78, .4); }
.ht-newyear .ht-btn:hover { background: #ffd36a; }
.ht-newyear .ht-link { color: #f2c14e !important; }
.ht-fw { width: 0; height: 0; }
.ht-fw i { position: absolute; left: -3px; top: -3px; width: 6px; height: 6px; border-radius: 50%; background: var(--c); box-shadow: 0 0 6px var(--c);
    opacity: 0; animation: ht-burst 3.2s ease-out infinite; animation-delay: inherit; }
@keyframes ht-burst {
    0%   { transform: rotate(var(--a)) translateY(0) scale(.6); opacity: 0; }
    8%   { opacity: 1; }
    60%  { transform: rotate(var(--a)) translateY(-58px) scale(1); opacity: .9; }
    100% { transform: rotate(var(--a)) translateY(-70px) scale(.4); opacity: 0; }
}
.ht-fw1 { top: 16%; left: 54%; animation-delay: 0s; }
.ht-fw2 { top: 22%; right: 12%; animation-delay: -1.1s; }
.ht-fw3 { top: 62%; left: 58%; animation-delay: -2.2s; }
.ht-fw4 { top: 84%; left: 44%; animation-delay: -1.6s; }
.ht-newyear .ht-confetti i { width: 6px; height: 10px; }

/* ---------- Fun and Games ---------- */
.ht-games { color: #fff; background: #3b1c7a; }
.ht-games .ht-sky { inset: 0; background: radial-gradient(ellipse at 85% 20%, #8a3fe0 0%, transparent 55%), linear-gradient(135deg, #2d1466 0%, #5b23b0 50%, #1f86d1 100%); }
.ht-grid { inset: 0; opacity: .14; background-image: linear-gradient(rgba(255, 255, 255, .7) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .7) 1px, transparent 1px);
    background-size: 32px 32px; mask-image: linear-gradient(180deg, transparent, #000 70%); -webkit-mask-image: linear-gradient(180deg, transparent, #000 70%); }
.ht-games h1 { color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .35); }
.ht-games .ht-chip { color: #3b1c7a; background: #ffcf3f; }
.ht-games .ht-text p { color: #ece4ff; }
.ht-games .ht-btn { color: #2d1466 !important; background: #ffcf3f; box-shadow: 0 6px 18px rgba(255, 207, 63, .45); }
.ht-games .ht-btn:hover { background: #ffdb6b; }
.ht-games .ht-link { color: #ffe08a !important; }
.ht-die { width: 46px; height: 46px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); animation: ht-tumble 7s ease-in-out infinite; }
.ht-die1 { top: 14%; left: 44%; }
.ht-die2 { bottom: 12%; right: 4%; width: 38px; height: 38px; animation-delay: -3.5s; }
@keyframes ht-tumble { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(180deg); } }
.ht-piece { width: 54px; height: 54px; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .25)); animation: ht-drift2 9s ease-in-out infinite alternate; }
.ht-pc1 { top: 8%; right: 8%; }
.ht-pc2 { bottom: 10%; left: 46%; width: 42px; height: 42px; animation-delay: -4s; }
@keyframes ht-drift2 { from { transform: translate(0, 0) rotate(-12deg); } to { transform: translate(-14px, 12px) rotate(14deg); } }
.ht-block { top: -50px; width: 60px; height: 40px; animation: ht-drop 9s linear infinite; }
.ht-bk1 { left: 50%; animation-delay: -1s; }
.ht-bk2 { left: 74%; animation-duration: 11s; animation-delay: -6s; }
.ht-bk3 { left: 92%; width: 48px; height: 32px; animation-duration: 10s; animation-delay: -3s; }
@keyframes ht-drop { from { transform: translateY(0) rotate(0); } to { transform: translateY(460px) rotate(90deg); } }
.ht-ball { left: 41%; bottom: 0; width: 34px; height: 150px; }
.ht-ball span { position: absolute; left: 0; bottom: 0; width: 34px; height: 34px; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #fff 0 12%, #ff8a3d 13% 100%); box-shadow: inset -4px -5px 0 rgba(0, 0, 0, .15);
    animation: ht-bounce 1.4s cubic-bezier(.3, 0, .7, 1) infinite alternate; }
@keyframes ht-bounce { 0% { transform: translateY(0) scale(1.15, .85); } 15% { transform: translateY(-20px) scale(1, 1); } 100% { transform: translateY(-110px) scale(1, 1); } }

/* ---------- Inspirational ---------- */
.ht-inspirational { color: #2b2440; background: #f3e9f5; }
.ht-inspirational .ht-sky { inset: 0; background: linear-gradient(160deg, #fde6d4 0%, #f5e4f2 40%, #e3e3f8 70%, #d3ebf7 100%); }
.ht-inspirational h1 { color: #3a2d5c; }
.ht-inspirational .ht-chip { color: #fff; background: #8a6cc4; }
.ht-inspirational .ht-text p { color: #4a4163; }
.ht-inspirational .ht-btn { color: #fff !important; background: #7a5cb8; box-shadow: 0 6px 18px rgba(122, 92, 184, .35); }
.ht-inspirational .ht-btn:hover { background: #6a4ca8; }
.ht-inspirational .ht-link { color: #6a4ca8 !important; }
.ht-rays { top: -280px; right: -160px; width: 640px; height: 640px; border-radius: 50%; opacity: .5;
    background: repeating-conic-gradient(from 0deg, rgba(255, 214, 140, .55) 0deg 6deg, transparent 6deg 18deg);
    mask-image: radial-gradient(circle, #000 0%, transparent 65%); -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 65%);
    animation: ht-spin 60s linear infinite; }
@keyframes ht-spin { to { transform: rotate(360deg); } }
.ht-sunball { top: -40px; right: 60px; width: 130px; height: 130px; border-radius: 50%;
    background: radial-gradient(circle, #fff7d6 0%, #ffe3a3 55%, rgba(255, 210, 140, 0) 72%); animation: ht-glow2 6s ease-in-out infinite alternate; }
.ht-cloud { width: 150px; height: 62px; opacity: .85; filter: drop-shadow(0 4px 6px rgba(120, 100, 160, .12)); animation: ht-cloudmove 70s linear infinite; }
.ht-cl1 { top: 10%; left: -160px; }
.ht-cl2 { top: 58%; left: -160px; width: 110px; height: 46px; animation-duration: 90s; animation-delay: -40s; }
.ht-cl3 { bottom: 4%; left: -160px; width: 180px; height: 74px; opacity: .7; animation-duration: 80s; animation-delay: -62s; }
@keyframes ht-cloudmove { from { transform: translateX(0); } to { transform: translateX(1400px); } }
.ht-dove { top: 18%; left: -80px; width: 70px; height: 37px; fill: #fff; stroke: #b7a6d8; stroke-width: 1.2; filter: drop-shadow(0 3px 5px rgba(90, 70, 130, .35)); animation: ht-fly 22s linear infinite; }
.ht-dove span { display: block; width: 100%; height: 100%; animation: ht-swoop 4s ease-in-out infinite; }
.ht-dove .wl, .ht-dove .wr { transform-box: fill-box; animation: ht-flap .7s ease-in-out infinite alternate; }
.ht-dove .wl { transform-origin: right bottom; }
.ht-dove .wr { transform-origin: left bottom; }
.ht-dv2 { top: 34%; width: 52px; height: 28px; animation-duration: 28s; animation-delay: -13s; }
.ht-inspirational .ht-sparkles i { background: #fff3c4; }

/* ---------- Pieces shared by the spring and summer holidays ---------- */
/* Particles: .ht-rise floats up, .ht-fall drifts down (hearts, petals, shamrocks, leaves). */
.ht-rise, .ht-fall { inset: 0; }
.ht-rise i, .ht-fall i { position: absolute; left: var(--x); width: var(--w); height: var(--w); animation-duration: var(--s);
    animation-timing-function: linear; animation-iteration-count: infinite; animation-delay: calc(var(--d) * -1); }
.ht-rise i { bottom: -40px; animation-name: ht-riseup; }
.ht-fall i { top: -40px; animation-name: ht-leaf; }
.ht-fall i svg { animation: ht-flutter 2.4s ease-in-out infinite alternate; }
@keyframes ht-riseup { 0% { transform: translate(0, 0) rotate(-10deg); opacity: 0; } 10% { opacity: 1; } 50% { transform: translate(16px, -210px) rotate(10deg); }
    90% { opacity: 1; } 100% { transform: translate(-8px, -430px) rotate(-6deg); opacity: 0; } }
.ht-grass { left: 0; right: 0; bottom: 0; height: 26px; background: linear-gradient(180deg, #7cc06a, #5aa64d); border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.ht-tulips i, .ht-poppies i, .ht-eggs i, .ht-ties i { position: absolute; }
.ht-tulips i { bottom: 8px; width: 26px; height: 70px; transform-origin: bottom center; animation: ht-sway2 3.4s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
@keyframes ht-sway2 { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.ht-bfly { top: 30%; left: -60px; width: 40px; height: 30px; animation: ht-fly 16s linear infinite; }
.ht-bfly span { display: block; width: 100%; height: 100%; animation: ht-swoop 2.2s ease-in-out infinite; }
.ht-bfly .wl, .ht-bfly .wr { transform-box: fill-box; animation: ht-wings .25s ease-in-out infinite alternate; }
.ht-bfly .wl { transform-origin: right center; }
.ht-bfly .wr { transform-origin: left center; }
.ht-bf2 { top: 55%; width: 32px; height: 24px; animation-duration: 21s; animation-delay: -9s; }
@keyframes ht-wings { from { transform: scaleX(1); } to { transform: scaleX(.25); } }
.ht-fw5 { top: 40%; right: 30%; animation-delay: -2.7s; }

/* Light scenes (dark text) */
.ht-spring, .ht-easter, .ht-earthday, .ht-mothers, .ht-labor { color: #23313a; }
.ht-spring h1, .ht-easter h1, .ht-earthday h1, .ht-mothers h1, .ht-labor h1 { color: #23313a; }
/* Dark scenes (white text) */
.ht-valentines, .ht-stpatrick, .ht-memorial, .ht-fathers, .ht-july4 { color: #fff; }
.ht-valentines h1, .ht-stpatrick h1, .ht-memorial h1, .ht-fathers h1, .ht-july4 h1 { color: #fff; text-shadow: 0 3px 14px rgba(0, 0, 0, .35); }

/* ---------- Valentine's Day ---------- */
.ht-valentines { background: #a3164a; }
.ht-valentines .ht-sky { inset: 0; background: radial-gradient(ellipse at 80% 20%, #ff6f9c 0%, transparent 55%), linear-gradient(160deg, #8c1040 0%, #c2185b 55%, #e84a7f 100%); }
.ht-valentines .ht-chip { color: #8c1040; background: #ffe0ea; }
.ht-valentines .ht-text p { color: #ffe3ec; }
.ht-valentines .ht-btn { color: #c2185b !important; background: #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); }
.ht-valentines .ht-btn:hover { background: #ffe9f0; }
.ht-valentines .ht-link { color: #ffd1e0 !important; }
.ht-bigheart { top: 18px; right: 6%; width: 86px; height: 80px; filter: drop-shadow(0 0 18px rgba(255, 120, 160, .7)); animation: ht-beat 1.6s ease-in-out infinite; }
@keyframes ht-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.12); } 30% { transform: scale(1); } 45% { transform: scale(1.08); } }
.ht-valentines .ht-sparkles i { background: #ffd1e0; }

/* ---------- St. Patrick's Day ---------- */
.ht-stpatrick { background: #1f6b3a; }
.ht-stpatrick .ht-sky { inset: 0; background: radial-gradient(ellipse at 80% 15%, #5fbf6a 0%, transparent 55%), linear-gradient(170deg, #145a2e 0%, #1f7a3f 55%, #2f9a4f 100%); }
.ht-stpatrick .ht-chip { color: #145a2e; background: #f6c453; }
.ht-stpatrick .ht-text p { color: #e2f5e2; }
.ht-stpatrick .ht-btn { color: #145a2e !important; background: #f6c453; box-shadow: 0 6px 18px rgba(246, 196, 83, .4); }
.ht-stpatrick .ht-btn:hover { background: #ffd36e; }
.ht-stpatrick .ht-link { color: #f6d58a !important; }
.ht-rainbow { top: 14px; right: 3%; width: 230px; height: 115px; opacity: .85; animation: ht-glow3 5s ease-in-out infinite alternate; }
@keyframes ht-glow3 { from { opacity: .65; } to { opacity: .95; } }
.ht-gold { right: 4%; bottom: 0; width: 80px; height: 70px; }
.ht-gold i { position: absolute; width: 28px; height: 28px; animation: ht-twinkle 1.8s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }
.ht-stpatrick .ht-sparkles i { background: #f6c453; }

/* ---------- Spring ---------- */
.ht-spring { background: #e7f6ff; }
.ht-spring .ht-sky { inset: 0; background: linear-gradient(170deg, #d7f0ff 0%, #eaf8ff 45%, #fff3e3 100%); }
.ht-spring .ht-chip { color: #fff; background: #ff6f91; }
.ht-spring .ht-text p { color: #3b4a52; }
.ht-spring .ht-btn { color: #fff !important; background: #4cae55; box-shadow: 0 6px 18px rgba(76, 174, 85, .35); }
.ht-spring .ht-btn:hover { background: #3d9a46; }
.ht-spring .ht-link { color: #2e8a3a !important; }
.ht-spring .ht-sunball, .ht-labor .ht-sunball { right: 40px; }

/* ---------- Easter ---------- */
.ht-easter { background: #fdf0e3; }
.ht-easter .ht-sky { inset: 0; background: linear-gradient(170deg, #ffe7cf 0%, #fff4e6 40%, #f0e8fb 75%, #e2f2fb 100%); }
.ht-easter .ht-chip { color: #fff; background: #9b7bd6; }
.ht-easter .ht-text p { color: #3b4a52; }
.ht-easter .ht-btn { color: #fff !important; background: #7a5cb8; box-shadow: 0 6px 18px rgba(122, 92, 184, .35); }
.ht-easter .ht-btn:hover { background: #6a4ca8; }
.ht-easter .ht-link { color: #6a4ca8 !important; }
.ht-hill { right: 0; bottom: 0; width: 64%; height: 110px; }
.ht-cross { right: 15%; bottom: 62px; width: 30px; height: 52px; filter: drop-shadow(0 0 10px rgba(255, 230, 160, .9)); }
.ht-eggs i { bottom: 4px; width: 30px; height: 38px; transform-origin: bottom center; animation: ht-wobble 2.6s ease-in-out infinite; animation-delay: calc(var(--d) * -1); }
@keyframes ht-wobble { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }

/* ---------- Earth Day ---------- */
.ht-earthday { background: #dff1fb; }
.ht-earthday .ht-sky { inset: 0; background: linear-gradient(175deg, #bfe5fa 0%, #e2f4fd 60%, #eaf7e6 100%); }
.ht-earthday .ht-chip { color: #fff; background: #2e8b57; }
.ht-earthday .ht-text p { color: #3b4a52; }
.ht-earthday .ht-btn { color: #fff !important; background: #2e8b57; box-shadow: 0 6px 18px rgba(46, 139, 87, .35); }
.ht-earthday .ht-btn:hover { background: #24744a; }
.ht-earthday .ht-link { color: #1f6e43 !important; }
.ht-globe { top: 22px; right: 5%; width: 100px; height: 100px; overflow: hidden; border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #7fd0ff 0%, #2a8fd6 60%, #1b5f9e 100%); box-shadow: inset -10px -8px 0 rgba(0, 0, 0, .15), 0 0 24px rgba(80, 170, 240, .5); }
.ht-land { position: absolute; top: 0; left: 0; display: flex; width: 400%; height: 100%; animation: ht-turn 18s linear infinite; }
.ht-land svg { flex: 0 0 50%; height: 100%; }
@keyframes ht-turn { to { transform: translateX(-50%); } }

/* ---------- Mother's Day ---------- */
.ht-mothers { background: #fbe8f1; }
.ht-mothers .ht-sky { inset: 0; background: linear-gradient(160deg, #fde3ee 0%, #f8e7f7 45%, #ece5fb 100%); }
.ht-mothers .ht-chip { color: #fff; background: #e05a8a; }
.ht-mothers .ht-text p { color: #4a3d52; }
.ht-mothers .ht-btn { color: #fff !important; background: #d6457a; box-shadow: 0 6px 18px rgba(214, 69, 122, .35); }
.ht-mothers .ht-btn:hover { background: #c23468; }
.ht-mothers .ht-link { color: #b32f61 !important; }
.ht-mothers .ht-sparkles i { background: #ffb3c7; }

/* ---------- Memorial Day ---------- */
.ht-memorial { background: #1a2547; }
.ht-memorial .ht-sky { inset: 0; background: linear-gradient(180deg, #121c3d 0%, #26346a 55%, #6d4d6b 85%, #c27a5a 100%); }
.ht-memorial .ht-chip { color: #1a2547; background: #e7e2d6; }
.ht-memorial .ht-text p { color: #e3e6f0; }
.ht-memorial .ht-btn { color: #fff !important; background: #b0122b; box-shadow: 0 6px 18px rgba(176, 18, 43, .45); }
.ht-memorial .ht-btn:hover { background: #c8203a; }
.ht-memorial .ht-link { color: #f1d9a0 !important; }
.ht-poppies i { bottom: 0; width: 28px; height: var(--h); transform-origin: bottom center; animation: ht-sway2 4s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1); }

/* ---------- Father's Day ---------- */
.ht-fathers { background: #15325a; }
.ht-fathers .ht-sky { inset: 0; background: radial-gradient(ellipse at 80% 20%, #2f6aa6 0%, transparent 55%), linear-gradient(170deg, #102846 0%, #1b4170 55%, #23578f 100%); }
.ht-fathers .ht-chip { color: #15325a; background: #f6c453; }
.ht-fathers .ht-text p { color: #dbe7f5; }
.ht-fathers .ht-btn { color: #15325a !important; background: #f6c453; box-shadow: 0 6px 18px rgba(246, 196, 83, .4); }
.ht-fathers .ht-btn:hover { background: #ffd36e; }
.ht-fathers .ht-link { color: #f6d58a !important; }
.ht-ties i { top: -6px; width: 26px; height: 78px; transform-origin: top center; animation: ht-tieswing 3.2s ease-in-out infinite alternate; animation-delay: calc(var(--d) * -1);
    filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .3)); }
@keyframes ht-tieswing { from { transform: rotate(-8deg); } to { transform: rotate(8deg); } }

/* ---------- 4th of July ---------- */
.ht-july4 { background: #0e1b3d; }
.ht-july4 .ht-sky { inset: 0; background: radial-gradient(ellipse at 75% 30%, #27407e 0%, transparent 55%), linear-gradient(180deg, #08122e 0%, #13245a 60%, #1d2f6b 100%); }
.ht-july4 .ht-chip { color: #0e1b3d; background: #fff; }
.ht-july4 .ht-text p { color: #dfe6f5; }
.ht-july4 .ht-btn { color: #fff !important; background: #c8102e; box-shadow: 0 6px 18px rgba(200, 16, 46, .45); }
.ht-july4 .ht-btn:hover { background: #df2442; }
.ht-july4 .ht-link { color: #f6c453 !important; }

/* ---------- Labor Day ---------- */
.ht-labor { background: #dff1fb; }
.ht-labor .ht-sky { inset: 0; background: linear-gradient(180deg, #a9dcf7 0%, #d8effb 55%, #fdf1d8 100%); }
.ht-labor .ht-chip { color: #fff; background: #e86a2c; }
.ht-labor .ht-text p { color: #3b4a52; }
.ht-labor .ht-btn { color: #fff !important; background: #1f7fa8; box-shadow: 0 6px 18px rgba(31, 127, 168, .35); }
.ht-labor .ht-btn:hover { background: #186a8d; }
.ht-labor .ht-link { color: #186a8d !important; }
.ht-labor .ht-dove { fill: #fff; stroke: #8fb3c6; stroke-width: 1.2; }
.ht-waves { left: 0; right: 0; bottom: 0; height: 34px; overflow: hidden; }
.ht-waves div { display: flex; width: 200%; height: 100%; animation: ht-turn 9s linear infinite; }
.ht-waves svg { flex: 0 0 50%; height: 100%; }
.ht-boat { right: 8%; bottom: 14px; width: 54px; height: 54px; animation: ht-bob2 3s ease-in-out infinite; }
@keyframes ht-bob2 { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(5px) rotate(3deg); } }

/* ---------- Occasion icons ---------- */
.ht-icons { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; margin: 0 0 30px; padding: 16px 12px; background: #fff;
    border: 1px solid #dde4e8; border-radius: 16px; }
.hp .ht-icons a { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 4px 2px; font-size: 14px; font-weight: 700;
    line-height: 1.25; text-align: center; color: #1f2a30 !important; text-decoration: none !important; }
.ht-icons a span { display: flex; align-items: center; justify-content: center; width: 62px; height: 62px; color: #24758a; background: #e3f1f5;
    border-radius: 50%; transition: transform .15s, background .15s, color .15s; }
.ht-icons a span svg { width: 32px; height: 32px; }
.hp .ht-icons a:hover span { color: #fff; background: #2f8ea6; transform: translateY(-3px); }

/* ---------- Tablets and phones ---------- */
@media (max-width: 1000px) {
    .ht-banner { padding: 30px 28px; }
    .ht-banner h1 { font-size: 38px; }
    .ht-card span { font-size: 12px; }
}
@media (max-width: 760px) {
    .ht-banner { grid-template-columns: 1fr; gap: 6px; min-height: 0; padding: 26px 20px 18px; text-align: left; }
    .ht-text { max-width: none; }
    .ht-cards { height: 180px; }
    .ht-card span { padding: 6px 8px; font-size: 11px; }
    .ht-card1, .ht-card3 { --y: 8px; }
    .ht-card2 { --y: -6px; }
    .ht-moon { width: 62px; height: 62px; top: 16px; right: 16px; }
    .ht-web { width: 80px; height: 80px; }
    .ht-hide-sm { display: none; }
    .ht-bigheart { width: 38px; height: 35px; top: 10px; right: 12px; }
    .ht-rainbow { width: 120px; height: 60px; animation: none; opacity: .35; }
    .ht-globe { width: 64px; height: 64px; top: 14px; right: 14px; }
    .ht-hill { width: 100%; height: 80px; }
    .ht-cross { right: 8%; bottom: 50px; width: 22px; height: 38px; }
    .ht-die1 { left: auto; right: 10px; top: auto; bottom: 8px; width: 36px; height: 36px; }
    .ht-pc1, .ht-bk1, .ht-ball { display: none; }
    .ht-rays { top: -200px; right: -200px; }
    .ht-flag { display: none; }
    .ht-tr1 { left: auto; right: 22%; }
    .ht-fw1 { left: 78%; top: 10%; }
    .ht-fw4 { left: 12%; top: 90%; }
    .ht-pk1 { left: auto; right: 22%; }
    .ht-balloon { opacity: .75; }
    .ht-bl1 { left: auto; right: 15%; width: 40px; height: 87px; }
    .ht-bl2 { display: none; }
    .ht-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
}
@media (max-width: 520px) {
    .ht-banner { margin-top: 4px; border-radius: 16px; }
    .ht-banner h1 { font-size: 31px; }
    .ht-text p { margin-bottom: 18px; font-size: 16px; }
    .ht-btn { padding: 13px 22px; font-size: 16px; }
    .ht-cards { height: 160px; }
    .ht-pumpkin { width: 64px; height: 55px; }
    .ht-spider { left: 62%; }
    .hp .ht-icons a { font-size: 12px; }
    .ht-icons a span { width: 52px; height: 52px; }
    .ht-icons a span svg { width: 27px; height: 27px; }
}

/* People who ask for less motion get a still picture. */
@media (prefers-reduced-motion: reduce) {
    .ht-banner *, .ht-banner *::before, .ht-banner *::after { animation: none !important; transition: none !important; }
    .ht-card { transform: translateY(calc(-50% + var(--y))) rotate(var(--r)); }
    .ht-bat { left: 30%; }
    .ht-bat2 { left: 58%; }
    .ht-balloon { bottom: 10px; }
}