/* ============================================================
   The welcome (decision D10): the student and their avatar on the left,
   their plot on the right, the term's field along the bottom.
   ============================================================ */
.wc { background: var(--paper); }
.wc-stage { position: relative; min-height: 470px; }
.wc-body { display: flex; align-items: center; gap: 24px; justify-content: space-between; padding-top: 6px; position: relative; z-index: 1; min-height: 250px; }
.wc-me { display: flex; align-items: center; gap: 20px; }
.wc-avatar { width: 120px; height: 120px; flex: none; position: relative; z-index: 3; }
.wc-avatar svg { width: 100%; height: 100%; display: block; }
.wc-words h1 { margin: 0; font-size: 2rem; color: var(--sky-ink); }
.wc-news { margin: 6px 0 0; font-size: 1.25rem; font-weight: 700; color: var(--sky-ink); }
.wc-detail { margin: 4px 0 0; color: var(--sky-ink); opacity: .85; }
.wc-season { font-weight: 700; color: var(--sky-ink); background: color-mix(in srgb, var(--sky-ink) 12%, transparent); padding: 6px 12px; border-radius: 10px; }
.wc-plot { width: 440px; flex: none; }
.wc-plot svg { width: 100%; height: auto; aspect-ratio: 440 / 230; display: block; overflow: visible; }
/* Under the plot: the next decoration, said plainly */
.wc-next { margin: 2px 0 0; text-align: center; font-size: .9rem; font-weight: 600; color: var(--sky-ink); opacity: .9; }

/* ---- the decorations (js/welcome.js) ---- */
/* The next one to earn: a faint dashed outline of the real drawing. */
.wc-plot .deco-ghost * { fill: none !important; stroke: color-mix(in srgb, var(--sky-ink) 55%, transparent) !important; stroke-width: 1.2 !important; stroke-dasharray: 3 3; }
.wc-plot .deco-ghost .deco-glow { display: none; }
/* The windmill turns slowly; never with "No movement" or reduced motion. */
.wc-plot .deco-windmill:not(.deco-ghost) .deco-blades { transform-box: view-box; transform-origin: -17px 84px; animation: deco-spin 16s linear infinite; }
@keyframes deco-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .wc-plot .deco-blades { animation: none !important; } }
.hg-s-calm-on .wc-plot .deco-blades { animation: none !important; }
.wc-fx { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }

/* new shoots in the plot: a soft glow once they have grown */
.wc-plot .is-new .glow { opacity: 0; }
.wc-plot.done .is-new .glow { opacity: .55; transition: opacity .4s ease; }

/* the resting field (holidays): a morning mist over the furrows */
.wc-stage.resting .field-strip { filter: saturate(.6); }
.wc-stage.resting::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 1; pointer-events: none;
  background: linear-gradient(0deg, rgba(255, 255, 255, .45), transparent); }

@media (max-width: 900px) { .wc-plot { width: 320px; } .wc-words h1 { font-size: 1.5rem; } }
.wc-season:empty { display: none; }

/* ---- phones: avatar above the words, the plot full width underneath ---- */
@media (max-width: 700px) {
  .wc-body { flex-direction: column; align-items: stretch; gap: 10px; min-height: 0; }
  .wc-me { flex-direction: column; align-items: flex-start; gap: 10px; }
  .wc-avatar { width: 84px; height: 84px; }
  .wc-words h1 { font-size: 1.6rem; }
  .wc-news { font-size: 1.1rem; }
  .wc-plot { width: 100%; max-width: 480px; align-self: center; }
  .wc-stage { min-height: 0; }
}