/* The paper catches a different light through the day; Enzo keeps its cream and navy. */
.ambience-ready .hero.enzo-hero {
  --ambience-light: #e7bc5c30;
  --ambience-light-x: 15%;
  --ambience-wash: #e9c97625;
  isolation: isolate;
}
.ambience-ready .hero.enzo-hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(ellipse at var(--ambience-light-x) 12%, var(--ambience-light), transparent 62%),
    linear-gradient(135deg, #fffdf750, transparent 60%);
  pointer-events: none;
}
[data-enzo-moment="lunch"] .hero.enzo-hero {
  --ambience-light: #edce742e;
  --ambience-light-x: 50%;
  --ambience-wash: #eac76426;
}
[data-enzo-moment="afternoon"] .hero.enzo-hero {
  --ambience-light: #d9aa5438;
  --ambience-light-x: 85%;
}
[data-enzo-moment="evening"] .hero.enzo-hero,
[data-enzo-moment="night"] .hero.enzo-hero {
  --ambience-light: #c9875040;
  --ambience-light-x: 86%;
  --ambience-wash: #d9ae5b30;
}
.welcome-scene {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 19px;
  min-width: 0;
  padding: 13px 14px 11px;
  border-top: 1px solid #253e6a12;
  border-bottom: 1px solid #253e6a12;
  background: linear-gradient(90deg, transparent, #fffdf752, transparent);
}
.welcome-scene .welcome-context {
  flex: 0 1 auto;
  max-width: 380px;
  text-wrap: pretty;
}
.live-ambience-picture {
  display: block;
  flex: 0 0 100px;
  width: 100px;
  height: 65px;
  color: var(--ink);
  pointer-events: none;
}
.live-ambience-picture:empty { display: none; }
.live-ambience-picture svg { display: block; width: 100%; height: 100%; }
.live-ambience-picture .ambience-wash { fill: var(--ambience-wash, #e9c97625); stroke: none; }
.live-ambience-picture .ambience-paper { fill: var(--paper); }
.live-ambience-picture .ambience-coffee { fill: #b94c381c; }
.live-ambience-picture .ambience-gold { stroke: #a67c2b; }
.live-ambience-picture .ambience-terracotta { stroke: var(--red); }
.live-ambience-picture .ambience-leaf { fill: #6e804b; stroke: #52653e; }
.live-ambience-picture .ambience-flame { fill: #d8b45d70; stroke: #a67c2b; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.reduced-motion) .live-ambience-picture svg {
    animation: enzo-moment-arrive 650ms cubic-bezier(.2,.7,.2,1) both;
  }
}
@keyframes enzo-moment-arrive {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width: 700px) {
  .welcome-scene { gap: 10px; padding: 10px 5px; text-align: left; }
  .live-ambience-picture { flex-basis: 76px; width: 76px; height: 50px; }
}