/* Original physical event objects. Complete still assets remain at
   /art/events/<event>.svg. Base/detail layers share a 360 x 280 canvas.
   Existing markup: <span class="event-decoration event-decoration--hero"
   aria-hidden="true"></span>. Variants: hero, room, card, ribbon.
   Motion settles within 4.2 seconds, never loops and never affects controls.
   Hooks: html[data-event-motion="paused"|"off"]. Seasons/default stay clear. */
:root{--event-prop-image:none;--event-prop-base-image:none;--event-prop-detail-image:none;--event-detail-origin:68% 62%;--event-detail-duration:1.4s;--event-detail-animation:event-paper-arrive}
html[data-event-props="christmas"]{--event-prop-image:url('/art/events/christmas.svg');--event-prop-base-image:url('/art/events/christmas-base.svg');--event-prop-detail-image:url('/art/events/christmas-detail.svg');--event-detail-origin:73.9% 33.2%;--event-detail-animation:event-hanging-settle;--event-detail-duration:4.2s}
html[data-event-props="halloween"]{--event-prop-image:url('/art/events/halloween.svg');--event-prop-base-image:url('/art/events/halloween-base.svg');--event-prop-detail-image:url('/art/events/halloween-detail.svg');--event-detail-origin:66.9% 11.4%;--event-detail-animation:event-hanging-settle;--event-detail-duration:4.2s}
html[data-event-props="eid"]{--event-prop-image:url('/art/events/eid.svg');--event-prop-base-image:url('/art/events/eid-base.svg');--event-prop-detail-image:url('/art/events/eid-detail.svg');--event-detail-origin:70.3% 13.9%;--event-detail-animation:event-hanging-settle;--event-detail-duration:4.2s}
html[data-event-props="ramadan"]{--event-prop-image:url('/art/events/ramadan.svg');--event-prop-base-image:url('/art/events/ramadan-base.svg');--event-prop-detail-image:url('/art/events/ramadan-detail.svg');--event-detail-origin:70.3% 13.9%;--event-detail-animation:event-hanging-settle;--event-detail-duration:4.2s}
html[data-event-props="diwali"]{--event-prop-image:url('/art/events/diwali.svg');--event-prop-base-image:url('/art/events/diwali-base.svg');--event-prop-detail-image:url('/art/events/diwali-detail.svg');--event-detail-origin:68% 70%;--event-detail-animation:event-flame-settle;--event-detail-duration:2.4s}
html[data-event-props="lunar"]{--event-prop-image:url('/art/events/lunar.svg');--event-prop-base-image:url('/art/events/lunar-base.svg');--event-prop-detail-image:url('/art/events/lunar-detail.svg');--event-detail-origin:69.4% 15.4%;--event-detail-animation:event-hanging-settle;--event-detail-duration:4.2s}
html[data-event-props="easter"]{--event-prop-image:url('/art/events/easter.svg');--event-prop-base-image:url('/art/events/easter-base.svg');--event-prop-detail-image:url('/art/events/easter-detail.svg');--event-detail-origin:68% 70%;--event-detail-animation:event-paper-arrive;--event-detail-duration:1.4s}
html[data-event-props="valentine"]{--event-prop-image:url('/art/events/valentine.svg');--event-prop-base-image:url('/art/events/valentine-base.svg');--event-prop-detail-image:url('/art/events/valentine-detail.svg');--event-detail-origin:68.3% 28.9%;--event-detail-animation:event-hanging-settle;--event-detail-duration:4.2s}
html[data-event-props="newyear"]{--event-prop-image:url('/art/events/newyear.svg');--event-prop-base-image:url('/art/events/newyear-base.svg');--event-prop-detail-image:url('/art/events/newyear-detail.svg');--event-detail-origin:69.2% 16.1%;--event-detail-animation:event-hanging-settle;--event-detail-duration:4.2s}
html[data-event-props="birthday"]{--event-prop-image:url('/art/events/birthday.svg');--event-prop-base-image:url('/art/events/birthday-base.svg');--event-prop-detail-image:url('/art/events/birthday-detail.svg');--event-detail-origin:68% 70%;--event-detail-animation:event-fabric-settle;--event-detail-duration:2.2s}
html[data-event-props="national"]{--event-prop-image:url('/art/events/national.svg');--event-prop-base-image:url('/art/events/national-base.svg');--event-prop-detail-image:url('/art/events/national-detail.svg');--event-detail-origin:68% 70%;--event-detail-animation:event-fabric-settle;--event-detail-duration:2.2s}
.event-decorated{position:relative;isolation:isolate}
.event-decoration{position:absolute;display:none;pointer-events:none;user-select:none;background:none;background-size:contain;background-position:right top;background-repeat:no-repeat;z-index:0;opacity:.98;contain:layout paint}
.event-decoration::before,.event-decoration::after{content:"";position:absolute;inset:0;pointer-events:none;background-repeat:no-repeat;background-size:inherit;background-position:inherit;transform-origin:var(--event-detail-origin)}
.event-decoration::before{background-image:var(--event-prop-base-image)}
.event-decoration::after{background-image:var(--event-prop-detail-image)}
html:is([data-event-props="christmas"],[data-event-props="halloween"],[data-event-props="eid"],[data-event-props="ramadan"],[data-event-props="diwali"],[data-event-props="lunar"],[data-event-props="easter"],[data-event-props="valentine"],[data-event-props="newyear"],[data-event-props="birthday"],[data-event-props="national"]) .event-decoration{display:block}
.event-decoration--hero{width:clamp(156px,21vw,254px);height:198px;right:-12px;top:-16px}
.event-decoration--room{width:180px;height:140px;right:2px;top:-12px;opacity:.9}
.event-decoration--card{width:170px;height:134px;right:0;top:-10px}
.event-decoration--ribbon{position:relative;inset:auto;flex:0 0 76px;width:76px;height:58px;margin-inline-start:auto;background-size:90px 70px;background-position:right center}
.event-decoration-content{position:relative;z-index:1}
html[data-mode="dark"] .event-decoration{filter:brightness(1.12) saturate(.92)}
/* A reserved illustration row keeps objects clear of game cards and actions. */
html:is([data-event-props="christmas"],[data-event-props="halloween"],[data-event-props="eid"],[data-event-props="ramadan"],[data-event-props="diwali"],[data-event-props="lunar"],[data-event-props="easter"],[data-event-props="valentine"],[data-event-props="newyear"],[data-event-props="birthday"],[data-event-props="national"]) .welcome{grid-template-areas:"copy ornament" "copy preview";row-gap:4px}
html:is([data-event-props="christmas"],[data-event-props="halloween"],[data-event-props="eid"],[data-event-props="ramadan"],[data-event-props="diwali"],[data-event-props="lunar"],[data-event-props="easter"],[data-event-props="valentine"],[data-event-props="newyear"],[data-event-props="birthday"],[data-event-props="national"]) .welcome>.welcome-copy{grid-area:copy}
html:is([data-event-props="christmas"],[data-event-props="halloween"],[data-event-props="eid"],[data-event-props="ramadan"],[data-event-props="diwali"],[data-event-props="lunar"],[data-event-props="easter"],[data-event-props="valentine"],[data-event-props="newyear"],[data-event-props="birthday"],[data-event-props="national"]) .welcome>.hero-showcase{grid-area:preview}
html:is([data-event-props="christmas"],[data-event-props="halloween"],[data-event-props="eid"],[data-event-props="ramadan"],[data-event-props="diwali"],[data-event-props="lunar"],[data-event-props="easter"],[data-event-props="valentine"],[data-event-props="newyear"],[data-event-props="birthday"],[data-event-props="national"]) .welcome>.event-decoration--hero{grid-area:ornament;position:relative;inset:auto;justify-self:end;align-self:end;width:230px;height:142px;margin-top:-12px;z-index:0}
.duemello-brand-logo{--brand-mark-bg:var(--theme-main,#244b43);--brand-mark-heart:var(--theme-accent,#f4d580);display:inline-block;vertical-align:middle;flex-shrink:0;width:auto;height:34px;max-width:100%;color:var(--theme-text,#244b43)}
.duemello-brand-logo--mark{height:38px;aspect-ratio:1}
.event-ribbon{display:flex;align-items:center;justify-content:center;gap:12px;position:relative;isolation:isolate;overflow:hidden;padding:10px 25px;background:var(--theme-soft);border-bottom:1px solid var(--line);color:var(--theme-main);font:500 .7rem/1.5 Inter,"Segoe UI",Arial,sans-serif}
.event-ribbon strong{font-weight:600}.event-ribbon small{color:var(--theme-muted);font-size:.65rem}.event-ribbon .event-decoration--ribbon{width:95px;right:25px;opacity:.9}
body>header:not(.app-header) a .duemello-brand-logo{width:160px;height:auto;display:block}
@media(max-width:760px){
  .event-ribbon{font-size:.64rem;padding:10px 18px;justify-content:flex-start}.event-ribbon small{font-size:.6rem}.event-ribbon .event-decoration--ribbon{right:5px;width:55px}.event-ribbon>span:not(.event-decoration){position:relative;z-index:1}
  html:is([data-event-props="christmas"],[data-event-props="halloween"],[data-event-props="eid"],[data-event-props="ramadan"],[data-event-props="diwali"],[data-event-props="lunar"],[data-event-props="easter"],[data-event-props="valentine"],[data-event-props="newyear"],[data-event-props="birthday"],[data-event-props="national"]) .welcome{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"copy" "ornament" "preview";row-gap:14px}
  html:is([data-event-props="christmas"],[data-event-props="halloween"],[data-event-props="eid"],[data-event-props="ramadan"],[data-event-props="diwali"],[data-event-props="lunar"],[data-event-props="easter"],[data-event-props="valentine"],[data-event-props="newyear"],[data-event-props="birthday"],[data-event-props="national"]) .welcome>.event-decoration--hero{width:220px;height:132px;margin-top:-4px}
}
@media(max-width:700px){.event-decoration--room{width:130px;height:104px;top:-7px;right:-5px}.event-decoration--card{width:128px;height:102px;top:0}.event-decoration--ribbon{flex-basis:60px;width:60px;height:48px;background-size:74px 58px}.duemello-brand-logo{height:30px}.duemello-brand-logo--mark{height:34px}}
@media(max-width:580px){.event-ribbon small{display:none}
  /* The pine bough clears the room heading; only transparent canvas is clipped. */
  html[data-event-props="christmas"] .connection-panel .event-decoration--room{right:-5px}
}
@media(prefers-reduced-motion:no-preference){
  .event-decoration::before{animation:event-base-arrive .7s ease-out both}
  .event-decoration::after{animation:var(--event-detail-animation) var(--event-detail-duration) cubic-bezier(.2,.65,.3,1) both}
  @keyframes event-base-arrive{from{opacity:0}to{opacity:1}}
  @keyframes event-hanging-settle{0%{transform:rotate(-2.4deg);opacity:0}14%{opacity:1}40%{transform:rotate(1.15deg)}64%{transform:rotate(-.55deg)}83%{transform:rotate(.18deg)}100%{transform:rotate(0);opacity:1}}
  @keyframes event-paper-arrive{from{transform:translateY(4px);opacity:0}to{transform:translateY(0);opacity:1}}
  @keyframes event-fabric-settle{0%{transform:translateY(3px) rotate(-.6deg);opacity:0}30%{opacity:1}65%{transform:translateY(0) rotate(.2deg)}100%{transform:translateY(0) rotate(0);opacity:1}}
  @keyframes event-flame-settle{0%{opacity:.4;transform:translateY(1px)}30%{opacity:1;transform:translateY(0)}55%{opacity:.86}100%{opacity:1;transform:translateY(0)}}
}
html[data-event-motion="paused"] .event-decoration::before,html[data-event-motion="paused"] .event-decoration::after{animation-play-state:paused}
html[data-event-motion="off"] .event-decoration::before,html[data-event-motion="off"] .event-decoration::after{animation:none!important;transform:none;opacity:1}
@media(prefers-reduced-motion:reduce){.event-decoration,.event-decoration::before,.event-decoration::after{animation:none!important;transition:none!important;transform:none;opacity:1}}
@media print{.event-decoration{display:none!important}}