/* life section refinements */
#life .life-intro { margin: -18px 0 0; max-width: 52ch; color: var(--dim); font-size: 1.05rem; line-height: 1.6; text-wrap: pretty; }
#life .panel .txt p { text-wrap: pretty; }
@media (max-width: 720px) { #life .life-intro { margin-top: -22px; font-size: 1rem; } }
.panel .go.soon { color: var(--dim); }

/* Life card artwork: real photo plates for astro and garden, an SVG wheel set for skating.
   One hover for all three: the art eases in (linked cards also lift, from site.css). */
.panel .art > img, .panel .art > svg { transition: transform 1.2s var(--ease), filter 1.2s var(--ease); }
.panel:hover .art > img, .panel:hover .art > svg { transform: scale(1.04); }
.panel .art.photo::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, transparent 55%, rgba(6, 8, 16, 0.72)), radial-gradient(120% 90% at 50% 45%, transparent 60%, rgba(0, 0, 0, 0.35)); }
.panel .art .cap { position: absolute; left: 18px; bottom: 12px; z-index: 1; font: italic 400 1rem/1.2 var(--display); color: rgba(232, 236, 246, 0.82); letter-spacing: 0.01em; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
.panel .art.photo img { filter: saturate(0.95) contrast(1.03); }
.panel:hover .art.photo img { filter: saturate(1.05) contrast(1.05); }
.art.moon img { filter: sepia(0.08) contrast(1.06) brightness(1.02); }
.panel:hover .art.moon img { filter: sepia(0.08) contrast(1.1) brightness(1.06); }

/* skating plate: same 4:3 frame, so a photo can replace it with <div class="art photo"><img …></div> */
.art.skate { background: radial-gradient(70% 60% at 55% 78%, rgba(255, 178, 96, 0.14), transparent 70%), linear-gradient(180deg, #0a0c15, #05060b); }
.art.skate svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.art.skate::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(6, 8, 16, 0.6)); }
.wheelset .spin { transform-box: fill-box; transform-origin: center; animation: wheel-spin 1.4s linear infinite; }
.wheelset .lines line { stroke-dasharray: 60 240; animation: rush 1.6s linear infinite; }
.wheelset .lines line:nth-child(2) { animation-delay: -.4s; }
.wheelset .lines line:nth-child(3) { animation-delay: -.9s; }
.wheelset .lines line:nth-child(4) { animation-delay: -1.2s; }
.wheelset .lines line:nth-child(5) { animation-delay: -.6s; }
@keyframes wheel-spin { to { transform: rotate(360deg); } }
@keyframes rush { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 300; } }

/* Roller skating: banked turn with amber light trails */
.art.skate.lanes { background: radial-gradient(90% 70% at 100% 100%, rgba(255, 178, 96, 0.10), transparent 70%), linear-gradient(180deg, #05060b, #0b0d16); }
.lanes svg { width: 100%; height: 100%; display: block; }
.lanes .trail { stroke-dasharray: 300 1000; animation: lap 2.6s cubic-bezier(.45, .05, .35, 1) infinite; }
.lanes .trail.b { animation-delay: -1.3s; }
@keyframes lap { from { stroke-dashoffset: 300; } to { stroke-dashoffset: -1000; } }