/* ============================================================
   Terra Design — scenes.css
   Loads AFTER media.css. Additive. Styles the CSS line-art
   illustrations that scenes.js injects into each module, so the
   placeholders are rich + content-matched (no photos needed).
   If a real photo ever loads (.has-photo), the scene hides.
   ============================================================ */
.scene-art{position:absolute;inset:0;display:grid;place-items:center;z-index:0;pointer-events:none;opacity:.6}
.scene-art svg{width:66%;max-width:240px;height:auto;overflow:visible;
  filter:drop-shadow(0 0 6px rgba(56,189,248,.35))}
.has-photo .scene-art{display:none}

/* keep the label/glyph and blog icon above the scene + fx layers */
.pcard .thumb .glyph{position:relative;z-index:5}
.bcard .ph svg{position:relative;z-index:5}
.bcard .ph .scene-art{opacity:.5}
.step .img{position:relative;overflow:hidden}
.step .img .scene-art{opacity:.5}
.step .img .ph-img{z-index:6}

/* subtle life for the scene art */
@keyframes scnFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
.scene-art svg{animation:scnFloat 7s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.scene-art svg{animation:none}}