﻿/* Faint line art sits behind content. A short drift settles; nothing loops. */
.browse-page, .cta-panel { position: relative; isolation: isolate; }
.browse-page > .browse-layout, .cta-panel > :not(.ambient-art) { position: relative; z-index: 1; }
.ambient-art { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; color: var(--green); }
.ambient-art > svg { position: absolute; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.075; }
.ambient-bagel { width: 180px; height: 180px; top: 6px; right: -40px; transform: rotate(-12deg); }
.ambient-coffee { width: 155px; height: 165px; top: 460px; left: -42px; transform: rotate(8deg); }
.ambient-sandwich { width: 110px; height: 80px; top: 23px; right: 27%; transform: rotate(-9deg); }
.cta-panel .ambient-art { color: #f3dfbf; }
.cta-panel .ambient-art > svg { opacity: 0.14; }
.cta-panel .ambient-coffee { top: auto; bottom: -40px; left: 45%; }
.cta-panel .ambient-bagel { top: -35px; right: -35px; width: 180px; height: 180px; }
.cta-panel .ambient-sandwich { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .ambient-art.is-drifting .ambient-bagel { animation: ambient-bagel-turn 4.2s ease-in-out; }
  .ambient-art.is-drifting .ambient-coffee { animation: ambient-coffee-settle 4.2s ease-in-out; }
  .ambient-art.is-drifting .ambient-steam { animation: ambient-steam-rise 4.2s ease-in-out; }
  .ambient-art.is-drifting .ambient-sandwich { animation: ambient-sandwich-drift 4.2s ease-in-out; }
}
@keyframes ambient-bagel-turn { 0%,100% { transform: rotate(-12deg); } 45% { transform: translateY(-7px) rotate(3deg); } }
@keyframes ambient-coffee-settle { 0%,100% { transform: rotate(8deg); } 50% { transform: translateY(-5px) rotate(4deg); } }
@keyframes ambient-steam-rise { 0%,100% { transform: translateY(0); opacity: 1; } 45% { transform: translateY(-8px); opacity: 0.45; } }
@keyframes ambient-sandwich-drift { 0%,100% { transform: rotate(-9deg); } 50% { transform: translateX(5px) rotate(-3deg); } }
@media (max-width: 680px) { .ambient-art > svg { opacity: 0.05; } .ambient-sandwich { display: none; } .ambient-bagel { right: -66px; top: 130px; } }
@media print { .ambient-art { display: none; } }
