/* Occasion decorations (theme.decor): hanging strip + greeting under the header, art beside the hero, a band at the end of the page, canvas layer.
   Which files/sizes to use comes from public/js/effects/decor-registry.js through CSS variables on <html> (--decor-*); the artwork is static SVG
   in /assets/decor/ — replace a file to change it. Everything is click-through. */
#decor-layer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
#decor-top { position: relative; height: 0; z-index: 5; pointer-events: none; }
.decor-strip { position: absolute; inset-inline: 0; top: 0; height: var(--decor-strip-h, 46px); background-image: var(--decor-strip, none); background-repeat: repeat-x; background-position: center top; background-size: auto 100%; transform-origin: 50% 0; }
.decor-greeting { position: absolute; inset-inline: 0; top: calc(var(--decor-strip-h, 46px) - 12px); display: flex; justify-content: center; padding-inline: var(--gutter, 16px); }
.decor-pill { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; padding: 6px 18px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 82%, transparent); border: 1px solid color-mix(in srgb, var(--primary) 55%, transparent); color: var(--text); font-weight: 700; font-size: 14px; text-align: center; box-shadow: 0 8px 26px color-mix(in srgb, var(--primary) 32%, transparent); backdrop-filter: blur(8px); }
.decor-flag { width: auto; height: 18px; display: block; border-radius: 2px; flex: none; box-shadow: 0 1px 4px rgb(0 0 0 / 0.35); }

html[data-motion="full"][data-decor-sway="on"] .decor-strip { animation: decor-sway 9s ease-in-out infinite; }
/* the tile slides a few pixels back and forth (a transform would widen the box past the viewport and trip the horizontal-overflow checks) */
@keyframes decor-sway { 0%, 100% { background-position: calc(50% - 2px) top; } 50% { background-position: calc(50% + 2px) top; } }

/* room for the strip + greeting above the first content */
html[data-decor]:not([data-decor="none"]) .view { padding-block-start: calc(var(--decor-strip-h, 46px) + 6px); }

/* art beside the hero visual (the visual column only exists on wide screens) */
html[data-decor]:not([data-decor="none"]) .hero { position: relative; }
html[data-decor]:not([data-decor="none"]) .hero-visual::before, html[data-decor]:not([data-decor="none"]) .hero-visual::after { content: ""; position: absolute; bottom: -2%; width: 26%; aspect-ratio: 2 / 3; background-position: bottom center; background-size: contain; background-repeat: no-repeat; filter: drop-shadow(0 6px 10px rgb(0 0 0 / 0.35)); pointer-events: none; z-index: -1; }
html[data-decor]:not([data-decor="none"]) .hero-visual::before { inset-inline-start: var(--decor-hero-l-x, -8%); background-image: var(--decor-hero-l, none); }
html[data-decor]:not([data-decor="none"]) .hero-visual::after { inset-inline-end: var(--decor-hero-r-x, -8%); background-image: var(--decor-hero-r, none); transform: scaleX(var(--decor-hero-r-flip, 1)); }
/* band under the hero (or, when the decor has a horizon, the wide horizon art behind it) */
html[data-decor]:not([data-decor="none"]) .hero::after { content: ""; position: absolute; inset-inline: 0; bottom: -6px; height: var(--decor-band-h, 0px); background: var(--decor-band, none) repeat-x center bottom / auto 100%; opacity: 0.85; pointer-events: none; }
html[data-decor-horizon="on"] .hero::after { inset-inline: -2%; bottom: -20px; height: 110px; background: var(--decor-horizon, none) bottom center / 100% 100% no-repeat; opacity: 0.45; z-index: -1; }

/* a band at the end of the page */
html[data-decor]:not([data-decor="none"]) main::after { content: ""; display: block; margin-block-start: 36px; height: var(--decor-band-h, 0px); background: var(--decor-band, none) repeat-x center / auto 100%; opacity: 0.85; pointer-events: none; }

@media (max-width: 640px) {
  .decor-pill { font-size: 12.5px; padding: 5px 14px; }
}