/* DB Utilities Themes 0.1.5 — scoped decorations and optional PureCanvas palette. */
#dbut-themes { position: fixed; inset: 0; z-index: 950; pointer-events: none; }
:host { all: initial; position: fixed; inset: 0; z-index: 950; pointer-events: none; font-family: system-ui, -apple-system, sans-serif; color: #20302c; font-size: 14px; line-height: 1.45; }
:host *, :host *::before, :host *::after { box-sizing: border-box; }
:host [hidden] { display: none !important; }
.dbut-frame, .dbut-decor, .dbut-particles, .dbut-ground, .dbut-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dbut-decor { top: var(--safe-top, 10px); }
.dbut-particles { clip-path: inset(var(--safe-top, 10px) 0 0); }
.dbut-frame { --decor-size: clamp(65px, 9vw, 140px); --decor-scale: 1; --decor-opacity: .9; }
.dbut-frame[data-intensity="subtle"] { --decor-scale: .65; --decor-opacity: .88; }
.dbut-frame[data-intensity="rich"] { --decor-scale: 1.4; --decor-opacity: 1; }
.dbut-corner { position: absolute; top: 0; width: calc(var(--decor-size) * var(--decor-scale)); height: auto; object-fit: contain; opacity: var(--decor-opacity); }
.dbut-corner, .dbut-extra { filter: drop-shadow(0 3px 5px #0003); }
.dbut-corner--left { left: 0; }
.dbut-corner--right { right: 0; transform: scaleX(-1); }
[data-theme="halloween"] .dbut-corner--right { top: auto; bottom: 0; }
.dbut-frame[data-theme="christmas"] { --decor-size: clamp(100px, 14vw, 205px); }
.dbut-frame[data-theme="spring"] { --decor-size: clamp(120px, 18vw, 270px); }
[data-theme="spring"] .dbut-corner { top: 0; transform-origin: 0 0; animation: dbut-branch-sway 9s ease-in-out infinite alternate; }
[data-theme="spring"] .dbut-corner--left { left: -12px; }
[data-theme="spring"] .dbut-corner--right { right: -8px; top: 0; --mirror: -1; transform-origin: 50% 0; }
[data-theme="summer"] .dbut-corner--right { animation: dbut-sun-turn 35s linear infinite; filter: drop-shadow(0 0 14px #ffc74b66); }
[data-theme="summer"] .dbut-corner--left { transform-origin: 50% 100%; animation: dbut-flower-sway 5s ease-in-out infinite alternate; }
@keyframes dbut-branch-sway { from { transform: scaleX(var(--mirror, 1)) rotate(-.6deg); } to { transform: scaleX(var(--mirror, 1)) rotate(.8deg); } }
@keyframes dbut-sun-turn { to { transform: rotate(360deg); } }
@keyframes dbut-flower-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.dbut-extra { position: absolute; width: calc(clamp(28px, 4vw, 55px) * var(--decor-scale)); opacity: calc(var(--decor-opacity) * .75); }
.dbut-extra--bottom-left { bottom: 5px; left: 5px; transform: rotate(-15deg); }
.dbut-extra--bottom-right { bottom: 5px; right: 5px; transform: rotate(15deg); }
[data-theme="halloween"] .dbut-extra--bottom-right { bottom: auto; top: 5px; }
.dbut-extra--middle-left { top: 48%; left: 3px; transform: rotate(-18deg); }
.dbut-extra--middle-right { top: 52%; right: 3px; transform: rotate(18deg); }
[data-placement="top"] .dbut-corner { max-height: calc(70px * var(--decor-scale)); object-fit: contain; object-position: top; }
[data-placement="top"] .dbut-corner--right { top: 0; bottom: auto; }
.dbut-lights { position: absolute; top: 1px; left: 0; right: 0; height: 28px; display: flex; justify-content: space-around; border-top: 1px solid #465345; }
.dbut-lights i { --glow: #e8bb70; position: relative; display: block; flex-shrink: 0; width: calc(9px * var(--decor-scale)); height: calc(9px * var(--decor-scale)); border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fffdf1 0%, #fff0c8 38%, #e6bf7e 90%); box-shadow: 0 0 4px #ffecbcaa, 0 0 12px 3px #e7b96955; transform: translateY(var(--drop)); }
.dbut-lights i::before { content: ""; position: absolute; left: 38%; bottom: calc(100% - 1px); width: 24%; height: calc(var(--drop) + 2px); background: #58614b; }
.dbut-lights i:nth-child(3n) { --glow: #f6ddad; }
.dbut-lights--bottom { top: auto; bottom: calc(var(--snow-line, 0px) * .8 + 1px); transform: scaleY(-1); transition: bottom 1s linear; }
.dbut-lights--bottom i { animation: dbut-light-twinkle 4.8s calc(var(--i) * -.7s) ease-in-out infinite; }
@keyframes dbut-light-twinkle { 0%, 15%, 85%, 100% { opacity: 1; filter: brightness(1.08); } 40%, 60% { opacity: .28; filter: brightness(.75); } }
.dbut-particle { position: absolute; width: var(--size); height: var(--size); opacity: var(--opacity, .75); }
.dbut-particle-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.dbut-particle--fall { left: var(--x); top: -45px; animation: dbut-fall var(--duration) var(--delay) linear infinite; }
.dbut-particle--fly { left: 0; top: 0; animation: dbut-flight var(--duration) var(--delay) ease-in-out infinite; }
.dbut-flight-facing { width: 100%; height: 100%; animation: dbut-flight-turn var(--duration) var(--delay) steps(1, end) infinite; }
@keyframes dbut-flight-turn { 0% { transform: scaleX(var(--facing)); } 52% { transform: scaleX(calc(var(--facing) * -1)); } 100% { transform: scaleX(var(--facing)); } }
.dbut-particle--fly[data-kind="butterfly"] .dbut-particle-image { animation: dbut-flutter var(--flutter) ease-in-out infinite alternate; }
.dbut-particle[data-kind="bat"] { filter: drop-shadow(0 0 1px #fff9) drop-shadow(0 2px 2px #0004); }
.dbut-particle[data-kind="snowflake"] { top: calc(var(--size) * -1); animation-name: dbut-snowfall; filter: drop-shadow(0 0 2px #fff8); }
.dbut-snowbank { position: absolute; left: 0; bottom: 0; width: 100%; height: var(--snow-line, 0px); object-fit: fill; transition: height 1s linear; filter: drop-shadow(0 -2px 4px #afc9d733); }
@keyframes dbut-snowfall {
  0% { transform: translate3d(0,-6vh,0) rotate(0); opacity: 0; }
  8% { opacity: var(--opacity); }
  33% { transform: translate3d(var(--drift),33vh,0) rotate(calc(var(--spin) * .33)); }
  66% { transform: translate3d(calc(var(--drift) * -.6),66vh,0) rotate(calc(var(--spin) * .66)); }
  96% { opacity: var(--opacity); }
  100% { transform: translate3d(var(--drift),calc(100vh - var(--snow-line, 0px) * .8),0) rotate(var(--spin)); opacity: 0; }
}
.dbut-particle[data-kind="butterfly"], .dbut-particle[data-kind="bee"], .dbut-particle[data-kind="bird"] { filter: drop-shadow(0 3px 3px #0003); }
.dbut-particle[data-kind="leaf"] { filter: drop-shadow(0 2px 2px #4e102b40); }
.dbut-meadow { position: absolute; left: 0; bottom: 0; width: 100%; height: calc(60px * var(--decor-scale)); object-fit: fill; opacity: .92; }
.dbut-ground-leaf { position: absolute; left: var(--left); bottom: 0; width: var(--size); height: auto; transform: rotate(var(--angle)) scaleY(.72); filter: drop-shadow(0 2px 3px #35101c66); }
.dbut-walker { position: absolute; left: 0; bottom: var(--lane); width: var(--size); height: var(--size); animation: dbut-walk var(--duration) var(--delay) linear infinite; }
.dbut-walker-facing { width: 100%; height: 100%; animation: dbut-walker-turn var(--duration) var(--delay) linear infinite; }
.dbut-walker-step { width: 100%; height: 100%; animation: dbut-chick-bob .3s ease-in-out infinite alternate; }
.dbut-walker img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 2px 3px #80520e33); }
@keyframes dbut-walk {
  0%, 100% { transform: translateX(calc(var(--size) * -1.5)); }
  47%, 50% { transform: translateX(calc(100vw + var(--size))); }
  97% { transform: translateX(calc(var(--size) * -1.5)); }
}
@keyframes dbut-walker-turn { 0%, 49.99% { transform: scaleX(1); } 50%, 100% { transform: scaleX(-1); } }
@keyframes dbut-chick-bob { from { transform: translateY(0) rotate(-2deg); } to { transform: translateY(-2px) rotate(2deg); } }
.dbut-walker--still { animation: none; transform: translateX(var(--still-x)); }
.dbut-walker--still .dbut-walker-facing, .dbut-walker--still .dbut-walker-step { animation: none; }
.dbut-wind { position: absolute; inset: 0; pointer-events: none; }
.dbut-wind[data-direction="left"] { transform: scaleX(-1); }
.dbut-wind i { position: absolute; top: calc(25% + var(--i) * 14%); left: -50%; width: 35%; height: 40px; border-top: 2px solid #c9dce477; border-radius: 50%; animation: dbut-gust 2.4s calc(var(--i) * .17s) ease-in both; }
@keyframes dbut-gust { 0% { transform: translateX(0); opacity: 0; } 20%, 60% { opacity: .55; } 100% { transform: translateX(180vw); opacity: 0; } }
@keyframes dbut-fall {
  0% { transform: translate3d(0,-6vh,0) rotate(0); }
  33% { transform: translate3d(var(--drift),34vh,0) rotate(calc(var(--spin) * .33)); }
  66% { transform: translate3d(calc(var(--drift) * -.6),73vh,0) rotate(calc(var(--spin) * .66)); }
  100% { transform: translate3d(var(--drift),112vh,0) rotate(var(--spin)); }
}
@keyframes dbut-flight {
  0%, 100% { transform: translate3d(var(--x0),var(--y0),0) rotate(var(--bank)); }
  17% { transform: translate3d(var(--x1),var(--y1),0) rotate(calc(var(--bank) * -1)); }
  35% { transform: translate3d(var(--x2),var(--y2),0) rotate(var(--bank)); }
  52% { transform: translate3d(var(--x3),var(--y3),0) rotate(calc(var(--bank) * -1)); }
  69% { transform: translate3d(var(--x4),var(--y4),0) rotate(var(--bank)); }
  85% { transform: translate3d(var(--x5),var(--y5),0) rotate(calc(var(--bank) * -1)); }
}
@keyframes dbut-flutter { from { transform: scaleX(.5) rotate(-7deg); } to { transform: scaleX(1) rotate(7deg); } }
.dbut-character { position: absolute; pointer-events: none; will-change: transform, opacity; }
.dbut-character img { display: block; width: 100%; height: auto; }
.dbut-character--halloween { top: 50%; left: 50%; width: min(450px, 78vw); filter: drop-shadow(0 15px 35px #0009); animation: dbut-haunt 2.7s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dbut-haunt {
  0% { transform: translate(-50%, -50%) scale(.04) rotate(-12deg); opacity: 0; }
  14% { opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1.12) rotate(3deg); }
  48% { transform: translate(-50%, -50%) scale(1.02) rotate(-2deg); }
  76% { transform: translate(-50%, -50%) scale(1.06); opacity: 1; }
  100% { transform: translate(-50%, -40%) scale(.85); opacity: 0; }
}
.dbut-character--christmas { top: 27%; width: clamp(170px, 24vw, 310px); animation: dbut-peek 6.5s ease-in-out both; filter: drop-shadow(0 8px 12px #0003); }
.dbut-character--christmas[data-side="left"] { left: -32px; --dbut-start: -115%; --dbut-angle: 12deg; }
.dbut-character--christmas[data-side="right"] { right: -32px; --dbut-start: 115%; --dbut-angle: -12deg; }
.dbut-character--christmas[data-side="right"] img { transform: scaleX(-1); }
@keyframes dbut-peek {
  0%, 100% { transform: translateX(var(--dbut-start)) rotate(0); opacity: 0; }
  16%, 78% { transform: translateX(0) rotate(var(--dbut-angle)); opacity: 1; }
  38%, 61% { transform: translateX(0) rotate(0deg); opacity: 1; }
}
.dbut-bubble { position: absolute; top: -28px; left: 45%; white-space: nowrap; background: #fffdf3; color: #5d291f; border: 1px solid #dfc898; border-radius: 18px 18px 18px 3px; padding: 10px 17px; font-weight: 750; font-size: clamp(17px, 2vw, 26px); box-shadow: 0 3px 15px #0001; }
[data-side="right"] .dbut-bubble { left: auto; right: 45%; border-radius: 18px 18px 3px 18px; }
.dbut-character--still { animation: none; opacity: 1; }
.dbut-character--halloween.dbut-character--still { transform: translate(-50%,-50%); width: min(300px, 60vw); }
.dbut-controls { position: absolute; bottom: 16px; left: 14px; pointer-events: auto; width: max-content; max-width: calc(100vw - 28px); }
.dbut-controls[data-side="right"] { left: auto; right: 14px; }
.dbut-toggle { appearance: none; display: grid; place-items: center; width: 42px; height: 42px; padding: 8px; background: #fffefa; border: 1px solid #d3d6cb; border-radius: 50%; box-shadow: 0 2px 12px #172a2020; cursor: pointer; }
.dbut-toggle img { display: block; width: 26px; height: 26px; object-fit: contain; }
.dbut-controls[data-side="right"] .dbut-toggle { margin-left: auto; }
.dbut-toggle:hover { background: #f1f3eb; }
.dbut-panel { position: absolute; bottom: 52px; left: 0; display: grid; gap: 7px; width: min(250px, calc(100vw - 28px)); padding: 18px; border: 1px solid #d9ddcf; border-radius: 15px; background: #fffefa; box-shadow: 0 8px 35px #172a202e; }
.dbut-controls[data-side="right"] .dbut-panel { left: auto; right: 0; }
.dbut-panel strong { font-size: 16px; margin-bottom: 4px; }
.dbut-action { appearance: none; padding: 9px 11px; text-align: left; background: #f0f2e9; color: #25382d; border: 1px solid #d4dbca; border-radius: 7px; font: inherit; cursor: pointer; }
.dbut-action:hover { background: #e1e8d9; }
.dbut-action:disabled { opacity: .5; cursor: default; }
.dbut-panel small { display: block; color: #626b5b; font-size: 12px; padding: 4px 0; }
.dbut-toggle:focus-visible, .dbut-action:focus-visible { outline: 3px solid #28735a; outline-offset: 3px; }
.dbut-sr { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 640px) {
  .dbut-character--christmas { top: 32%; width: 185px; }
  .dbut-controls { bottom: max(12px, env(safe-area-inset-bottom)); }
}
@media (prefers-reduced-motion: reduce) {
  .dbut-particle, .dbut-wind { display: none; }
  .dbut-character, .dbut-corner, .dbut-walker, .dbut-walker-facing, .dbut-walker-step { animation: none !important; }
}
@media print { #dbut-themes, :host { display: none !important; } }
/* Opt-in palette uses actual PureCanvas custom properties, without touching layout or logos. */
body.purecanvas-site[data-dbut-palette] { --pc-link: #255c48; --pc-link-hover: #163e30; --pc-on-link: #fff; --pc-on-link-hover: #fff; --pc-button-bg: var(--pc-link); --pc-button-border: var(--pc-link); --pc-button-hover-bg: var(--pc-link-hover); --pc-button-hover-border: var(--pc-link-hover); --pc-button-color: #fff; --pc-button-hover-color: #fff; --pc-background: #faf9f3; --pc-text: #24332c; --pc-surface: #f0f1e9; }
body.purecanvas-site[data-dbut-palette="halloween"] { --pc-link: #8e3e13; --pc-link-hover: #60260a; --pc-background: #fcf7ee; --pc-text: #302a29; --pc-surface: #f5eadc; }
body.purecanvas-site[data-dbut-palette="christmas"] { --pc-link: #92382e; --pc-link-hover: #65271f; --pc-background: #fbf8f0; --pc-text: #243b31; --pc-surface: #edf2e8; }
body.purecanvas-site[data-dbut-palette="easter"] { --pc-link: #635092; --pc-link-hover: #423266; --pc-background: #fffdf2; --pc-surface: #f6f1dc; }
body.purecanvas-site[data-dbut-palette="summer"] { --pc-link: #866019; --pc-link-hover: #5d400a; --pc-background: #fffdf5; --pc-surface: #f8efd7; }
body.purecanvas-site[data-dbut-palette="autumn"] { --pc-link: #92471d; --pc-link-hover: #652e10; --pc-background: #fbf7f0; --pc-surface: #f2e8d8; }
body.purecanvas-site[data-dbut-palette="winter"] { --pc-link: #315f83; --pc-link-hover: #1c405c; --pc-background: #f7fbfd; --pc-surface: #e9f1f6; }
/* Bind text and canvas together: html may retain the template's original colour.
   The full-height body prevents a light content strip over a dark empty viewport. */
body.purecanvas-site[data-dbut-palette] {
    color: var(--pc-text); background-color: var(--pc-background); min-height: 100vh;
    background-image: radial-gradient(ellipse at 100% 0, color-mix(in srgb, var(--pc-link) 9%, transparent), transparent 55%), radial-gradient(ellipse at 0 100%, color-mix(in srgb, var(--pc-link) 6%, transparent), transparent 50%);
    --pc-focus: var(--pc-link-hover); --pc-primary: var(--pc-link); --pc-light: var(--pc-surface);
}
body.purecanvas-site[data-dbut-palette][data-dbut-tone="dark"] {
    --pc-background: #151f1b; --pc-text: #e7ede6; --pc-surface: #23312a; --pc-border: #455448;
    --pc-link: #abd1a9; --pc-link-hover: #d3eacb;
    --pc-on-link: #16211d; --pc-on-link-hover: #16211d;
    --pc-button-color: var(--pc-on-link); --pc-button-hover-color: var(--pc-on-link-hover);
}
body.purecanvas-site[data-dbut-palette="halloween"][data-dbut-tone="dark"] { --pc-background: #201b24; --pc-surface: #302639; --pc-link: #f0b276; --pc-link-hover: #ffdab1; }
body.purecanvas-site[data-dbut-palette="christmas"][data-dbut-tone="dark"] { --pc-background: #151e1a; --pc-surface: #223129; --pc-link: #e9c38e; --pc-link-hover: #f7dfbb; }
body.purecanvas-site[data-dbut-palette="easter"][data-dbut-tone="dark"] { --pc-background: #201d2a; --pc-surface: #302b3e; --pc-link: #d1b8ed; --pc-link-hover: #eadbfc; }
body.purecanvas-site[data-dbut-palette="summer"][data-dbut-tone="dark"] { --pc-background: #222116; --pc-surface: #33321f; --pc-link: #f0d28a; --pc-link-hover: #fce8b7; }
body.purecanvas-site[data-dbut-palette="autumn"][data-dbut-tone="dark"] { --pc-background: #261e18; --pc-surface: #392c22; --pc-link: #efb888; --pc-link-hover: #ffddbd; }
body.purecanvas-site[data-dbut-palette="winter"][data-dbut-tone="dark"] { --pc-background: #18212a; --pc-surface: #253340; --pc-link: #a8cfe9; --pc-link-hover: #d2e9f8; }

.dbut-reduced .dbut-lights i { animation: none; opacity: 1; filter: none; }