/* ===== Always-on loops =====
   Continuous motion that keeps the page alive. All of it stops under
   prefers-reduced-motion via the global rule in base.css. */

/* — Rotating circular text badge — */
.badge { position: absolute; z-index: 5; display: grid; place-items: center; width: 136px; height: 136px; border-radius: 50%; background: var(--white); border: 2px solid var(--color-edge); box-shadow: 4px 4px 0 var(--color-edge); color: var(--ink-900); text-decoration: none; transition: transform .4s var(--spring); }
.badge:hover { transform: scale(1.08); }
.badge__ring { position: absolute; inset: 6px; animation: spin 14s linear infinite; }
.badge:hover .badge__ring { animation-duration: 5s; }
.badge__ring svg { width: 100%; height: 100%; fill: currentColor; stroke: none; }
.badge__ring text { font-family: var(--font-display); font-weight: 800; font-size: 15px; letter-spacing: .12em; }
.badge__core { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--yellow-400); border: 2px solid var(--color-edge); }
.badge__core svg { width: 26px; height: 26px; animation: spin 6s linear infinite reverse; fill: var(--ink-900); stroke: none; }
.badge--hero { left: -36px; bottom: -26px; }
.badge--contact { right: 0; top: -20px; width: 150px; height: 150px; }
.badge--contact .badge__core { background: var(--ink-900); }
.badge--contact .badge__core svg { fill: var(--yellow-400); }
@media (max-width: 999px) { .badge--hero { left: auto; right: 4px; bottom: -40px; width: 112px; height: 112px; } .badge--contact { display: none; } }
@media (max-width: 480px) { .badge--hero { display: none; } }

/* — A taxi that keeps driving past the shop — */
.scene__car { position: absolute; z-index: 5; bottom: 2.8cqw; left: -24cqw; width: 17cqw; height: 4.4cqw; background: var(--yellow-400); border: .4cqw solid var(--ink-900); border-radius: 1.8cqw 2.6cqw .8cqw .8cqw; animation: drive 11s linear infinite; }
.scene__car::before { content: ""; position: absolute; left: 3cqw; bottom: 100%; width: 9cqw; height: 3.4cqw; background: linear-gradient(110deg, #CFEAFF 0 55%, #A7D3F2 55% 62%, #CFEAFF 62%); border: .4cqw solid var(--ink-900); border-bottom: 0; border-radius: 2.6cqw 3cqw 0 0; }
/* checker stripe */
.scene__car::after { content: ""; position: absolute; left: 1cqw; right: 1cqw; top: 1cqw; height: 1.1cqw; background: repeating-linear-gradient(90deg, var(--ink-900) 0 1.1cqw, transparent 1.1cqw 2.2cqw); opacity: .85; }
.scene__car i { position: absolute; left: 2.2cqw; bottom: -2.1cqw; width: 3.6cqw; height: 3.6cqw; border-radius: 50%; border: .5cqw solid var(--ink-900); background: radial-gradient(circle, #C7CCD4 0 22%, transparent 24%), conic-gradient(#0E1726 0 25%, #4A5568 0 50%, #0E1726 0 75%, #4A5568 0); animation: spin .45s linear infinite; }
.scene__car i + i { left: auto; right: 2.2cqw; }
.scene__car b { position: absolute; right: -.4cqw; top: .6cqw; width: 1.2cqw; height: 1.2cqw; border-radius: 50%; background: #FFF6D6; }
.scene__car b::after { content: ""; position: absolute; left: 100%; top: 50%; width: 22cqw; height: 8cqw; transform: translateY(-50%); background: linear-gradient(90deg, rgba(255, 238, 170, .7), transparent); clip-path: polygon(0 42%, 100% 0, 100% 100%, 0 58%); opacity: 0; transition: opacity 1s; }
.scene[data-time="night"] .scene__car b::after { opacity: 1; }
.scene[data-time="night"] .scene__car { filter: brightness(.8); }
@keyframes drive {
  0% { left: -24cqw; transform: translateY(0); }
  48% { transform: translateY(-.25cqw); }
  50% { transform: translateY(0); }
  100% { left: 112cqw; transform: translateY(0); }
}

/* — Crossing ribbons — */
.ribbons { position: relative; height: 240px; overflow: hidden; background: var(--white); }
.ribbon { position: absolute; left: -5%; width: 110%; top: 50%; padding: 16px 0; border-block: 2px solid var(--color-edge); overflow: hidden; }
.ribbon--a { background: var(--yellow-400); transform: translateY(-50%) rotate(-4deg); z-index: 1; }
.ribbon--b { background: var(--ink-900); color: var(--yellow-400); transform: translateY(-50%) rotate(3.5deg); }
.ribbon__track { display: flex; width: max-content; animation: marquee 26s linear infinite; }
.ribbon--b .ribbon__track { animation-direction: reverse; animation-duration: 32s; }
.ribbon__track span { display: inline-flex; align-items: center; gap: 28px; padding-right: 28px; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.1rem, 2.4vw, 1.7rem); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; }
.ribbon__track span::after { content: "✦"; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* — Floating, spinning stars in section corners — */
.deco { position: absolute; z-index: 0; width: 64px; height: 64px; pointer-events: none; animation: decoFloat 7s ease-in-out infinite; }
.deco svg { width: 100%; height: 100%; fill: var(--yellow-400); stroke: var(--ink-900); stroke-width: 1.4; animation: spin 16s linear infinite; }
.deco--sm { width: 38px; height: 38px; animation-delay: -3s; }
.deco--sm svg { animation-direction: reverse; animation-duration: 11s; }
.deco--white svg { fill: var(--white); }
.deco--tr { top: 48px; right: 4%; }
.deco--tl { top: 64px; left: 3%; }
.deco--br { bottom: 56px; right: 7%; }
.deco--bl { bottom: 48px; left: 5%; }
@keyframes decoFloat { 50% { translate: 0 -16px; } }
@media (max-width: 699px) { .deco { display: none; } }
.section > .container { position: relative; z-index: 1; }

/* — Periodic light sweep across the main CTAs — */
.btn--primary.btn--lg::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; z-index: 1; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent); transform: translateX(-150%) skewX(-20deg); animation: shine 4s 2.5s ease-in-out infinite; }
@keyframes shine { 0% { transform: translateX(-150%) skewX(-20deg); } 30%, 100% { transform: translateX(350%) skewX(-20deg); } }
.btn--primary.btn--lg:hover::after { animation-play-state: paused; opacity: 0; }

/* — Logo mark keeps quietly turning — */
.logo__mark { animation: logoTurn 16s var(--spring) infinite; }
@keyframes logoTurn { 0%, 20% { rotate: 0deg; } 25%, 45% { rotate: 90deg; } 50%, 70% { rotate: 180deg; } 75%, 95% { rotate: 270deg; } 100% { rotate: 360deg; } }

.contact-head { position: relative; }