:root {
  --gold: #c89b5a;          /* logo gold (AnimatedLogo.jsx) */
  --navy: #1B3265;
  --cream: #FFFDF5;
  --bubble: clamp(110px, 26vw, 170px);   /* mobile -> desktop */
}
* { box-sizing: border-box; margin: 0; }
body { background: var(--cream); color: var(--navy); font-family: 'Cormorant Garamond', Georgia, serif; }
.showcase { max-width: 1000px; margin: 0 auto; padding: clamp(1.5rem, 4vw, 3rem) 1rem; text-align: center; }
h1 { color: var(--gold); font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 600; }
.sub { font-size: clamp(1rem, 2.6vw, 1.3rem); margin-top: .4rem; opacity: .85; }

.stage { position: relative; height: clamp(420px, 70vh, 620px); margin-top: clamp(1rem, 3vw, 2rem); overflow: hidden; }
.lane { position: relative; height: 33.333%; }

.bubble { position: absolute; top: 50%; margin-top: calc(var(--bubble) / -2 - 8px); left: calc(-1.2 * var(--bubble)); opacity: 0; will-change: left, opacity; }
.shape { position: relative; width: var(--bubble); height: var(--bubble); }
.disc { display: block; width: 100%; height: 100%; border-radius: 50%; overflow: hidden; border: 5px solid var(--gold); background: var(--gold); box-shadow: 0 10px 28px -10px rgba(27, 50, 101, .35); }
.disc img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* tail: small gold triangle at bottom-right, pointing down-right like the logo icon */
.tail { position: absolute; right: 4%; bottom: -9%; width: 24%; height: 24%; background: var(--gold); clip-path: polygon(12% 0, 100% 88%, 0 42%); }

@keyframes crossing {
  0%   { left: calc(-1.2 * var(--bubble)); opacity: 0; }
  12%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}
@keyframes bob {
  0%, 100% { transform: translateY(-8px); }
  50%      { transform: translateY(8px); }
}
.bob { animation: bob 3.5s ease-in-out infinite; }
.bubble.active { animation: crossing var(--cross, 8s) linear forwards; }
/* no-JS fallback: top lane loops forever; still only one bubble ever visible */
.nojs .lane:first-child .bubble { animation: crossing 8s linear infinite; }

@media (max-width: 700px) { :root { --cross: 7s; } }   /* smaller stage, brisker cross */

@media (prefers-reduced-motion: reduce) {
  .bob, .bubble, .nojs .lane:first-child .bubble { animation: none !important; }
  .lane { display: flex; align-items: center; justify-content: center; }
  .bubble.static { position: static; margin-top: 0; opacity: 1; }
}