/* Animated decoration system for both restaurants
   Add <div class="bg-decor" data-brand="cb|sushi"></div> to body. */

/* ---------- shared keyframes ---------- */
@keyframes float-y {
  0%, 100% { transform: translateY(0) rotate(var(--r, 0deg)); }
  50% { transform: translateY(-22px) rotate(calc(var(--r, 0deg) + 4deg)); }
}
@keyframes float-x {
  0%, 100% { transform: translateX(0) rotate(var(--r, 0deg)); }
  50% { transform: translateX(18px) rotate(calc(var(--r, 0deg) - 5deg)); }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes drift {
  0%   { transform: translate(0, 0) rotate(0deg); }
  33%  { transform: translate(30px, -20px) rotate(20deg); }
  66%  { transform: translate(-20px, 30px) rotate(-15deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}
@keyframes sway {
  0%, 100% { transform: rotate(var(--r, -5deg)); }
  50% { transform: rotate(calc(var(--r, -5deg) + 8deg)); }
}
@keyframes pulse-soft {
  0%, 100% { opacity: var(--o, 0.6); transform: scale(1); }
  50% { opacity: calc(var(--o, 0.6) * 1.4); transform: scale(1.05); }
}
@keyframes marquee-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
@keyframes confetti-fall {
  0%   { transform: translateY(-10vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(120vh) rotate(720deg); opacity: 0; }
}
@keyframes glow-shift {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(40px, -30px) scale(1.15); }
}

/* ---------- background decor container ---------- */
.bg-decor {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}
.bg-decor > * {
  position: absolute;
  pointer-events: none;
}

/* Make page content sit above decor */
body > .nav, body > main, body > header, body > section, body > footer { position: relative; z-index: 2; }

/* ---------- floating decorative blobs (both brands) ---------- */
.blob {
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.5;
  animation: glow-shift 18s ease-in-out infinite;
}

/* ---------- emoji-free shapes ---------- */
.shape {
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.08));
}

/* ---------- CB-specific decorations ---------- */
.bg-decor.cb .blob-1 { background: #F5C518; top: -120px; right: -80px; width: 380px; height: 380px; opacity: 0.18; }
.bg-decor.cb .blob-2 { background: #1B5E3A; bottom: -100px; left: -60px; width: 320px; height: 320px; opacity: 0.16; animation-delay: -7s; }
.bg-decor.cb .blob-3 { background: #E85A2C; top: 40%; left: 60%; width: 240px; height: 240px; opacity: 0.10; animation-delay: -12s; }

.bg-decor.cb .palm {
  width: 140px;
  opacity: 0.10;
  animation: sway 6s ease-in-out infinite;
}
.bg-decor.cb .palm.p1 { top: 10%; left: -20px; --r: -8deg; }
.bg-decor.cb .palm.p2 { bottom: 5%; right: -30px; --r: 8deg; transform: scaleX(-1); animation-delay: -3s; }
.bg-decor.cb .palm.p3 { top: 50%; right: 8%; --r: 4deg; width: 100px; opacity: 0.08; animation-delay: -1.5s; }

.bg-decor.cb .sun-mark {
  top: 20%; right: 12%; width: 90px; height: 90px;
  border-radius: 50%;
  background: radial-gradient(circle, #F5C518 0%, transparent 70%);
  opacity: 0.5;
  animation: spin-slow 60s linear infinite;
}
.bg-decor.cb .sun-mark::before {
  content: ''; position: absolute; inset: -20px;
  background: conic-gradient(from 0deg, transparent 0deg, #F5C518 4deg, transparent 8deg, transparent 30deg,
    transparent 30deg, #F5C518 34deg, transparent 38deg, transparent 60deg,
    transparent 60deg, #F5C518 64deg, transparent 68deg, transparent 90deg,
    transparent 90deg, #F5C518 94deg, transparent 98deg, transparent 120deg,
    transparent 120deg, #F5C518 124deg, transparent 128deg, transparent 150deg,
    transparent 150deg, #F5C518 154deg, transparent 158deg, transparent 180deg,
    transparent 180deg, #F5C518 184deg, transparent 188deg, transparent 210deg,
    transparent 210deg, #F5C518 214deg, transparent 218deg, transparent 240deg,
    transparent 240deg, #F5C518 244deg, transparent 248deg, transparent 270deg,
    transparent 270deg, #F5C518 274deg, transparent 278deg, transparent 300deg,
    transparent 300deg, #F5C518 304deg, transparent 308deg, transparent 330deg,
    transparent 330deg, #F5C518 334deg, transparent 338deg);
  border-radius: 50%;
  opacity: 0.4;
}

.cb-float {
  width: 56px; height: 56px;
  animation: float-y 7s ease-in-out infinite;
}
.cb-float.f1 { top: 28%; left: 4%; --r: -10deg; animation-delay: 0s; }
.cb-float.f2 { top: 65%; left: 8%; --r: 15deg; animation-delay: -2s; animation-name: float-x; }
.cb-float.f3 { top: 80%; right: 14%; --r: -20deg; animation-delay: -4s; }
.cb-float.f4 { top: 35%; right: 6%; --r: 12deg; animation-delay: -1s; }
.cb-float.f5 { top: 12%; left: 40%; --r: 0deg; animation-delay: -3s; }

/* dot pattern overlay */
.dot-grid {
  inset: 0;
  background-image: radial-gradient(circle, rgba(27,94,58,0.12) 1.2px, transparent 1.5px);
  background-size: 28px 28px;
  opacity: 0.6;
  mix-blend-mode: multiply;
}

/* zigzag wavy line accent */
.zigzag {
  width: 100%;
  height: 22px;
  background: repeating-linear-gradient(135deg, transparent 0 12px, currentColor 12px 14px);
  color: #1B5E3A;
  opacity: 0.15;
  position: absolute;
}

/* ---------- SUSHI-specific ---------- */
.bg-decor.sushi .blob-1 { background: #E8651F; top: -100px; left: -80px; width: 360px; height: 360px; opacity: 0.18; }
.bg-decor.sushi .blob-2 { background: #0F4D2A; bottom: -80px; right: -60px; width: 320px; height: 320px; opacity: 0.22; animation-delay: -8s; }
.bg-decor.sushi .blob-3 { background: #F5B642; top: 50%; left: 55%; width: 220px; height: 220px; opacity: 0.10; animation-delay: -12s; }

.sushi-float {
  width: 64px; height: 64px;
  animation: drift 12s ease-in-out infinite;
}
.sushi-float.f1 { top: 15%; left: 6%; animation-delay: 0s; }
.sushi-float.f2 { top: 60%; left: 4%; animation-delay: -3s; }
.sushi-float.f3 { top: 25%; right: 5%; animation-delay: -6s; }
.sushi-float.f4 { top: 75%; right: 10%; animation-delay: -9s; }
.sushi-float.f5 { top: 45%; right: 30%; animation-delay: -2s; width: 48px; height: 48px; }
.sushi-float.f6 { top: 85%; left: 40%; animation-delay: -5s; width: 52px; height: 52px; }

/* organic wave bands */
.wave-band {
  left: -10%; right: -10%;
  height: 80px;
  background: repeating-linear-gradient(90deg, transparent 0 30px, currentColor 30px 32px);
  color: #E8651F;
  opacity: 0.08;
  transform: rotate(-3deg);
}
.wave-band.w1 { top: 15%; }
.wave-band.w2 { top: 55%; transform: rotate(2deg); color: #0F4D2A; opacity: 0.10; }

/* sparkle dots for sushi */
.sparkle {
  width: 8px; height: 8px;
  background: currentColor;
  border-radius: 50%;
  --o: 0.5;
  animation: pulse-soft 3s ease-in-out infinite;
}

/* ---------- Marquee bands (used inside hero/sections) ---------- */
.marquee {
  position: relative;
  overflow: hidden;
  padding: 14px 0;
  border-block: 1px solid var(--line, rgba(0,0,0,0.1));
  background: var(--marquee-bg, transparent);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee-x 35s linear infinite;
  gap: 40px;
  align-items: center;
}
.marquee-track > * {
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 22px;
  letter-spacing: 0.03em;
  color: var(--marquee-ink, currentColor);
  display: inline-flex;
  align-items: center;
  gap: 40px;
}
.marquee-track .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
}

/* ---------- Section-level "ribbon" floaters ---------- */
.ribbon-float {
  position: absolute;
  pointer-events: none;
  z-index: 1;
}

/* ---------- Reveal-on-scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .9s cubic-bezier(.2,.8,.2,1), transform .9s cubic-bezier(.2,.8,.2,1);
}
.reveal.in {
  opacity: 1;
  transform: none;
}

/* ---------- Animated underline tag for section eyebrow ---------- */
.eyebrow-anim::before {
  content: ''; display: inline-block;
  width: 28px; height: 2px; background: currentColor;
  margin-right: 12px; vertical-align: middle;
  animation: pulse-soft 2.5s ease-in-out infinite;
  --o: 1;
}

/* respect reduce-motion */
@media (prefers-reduced-motion: reduce) {
  .blob, .palm, .sun-mark, .cb-float, .sushi-float, .marquee-track, .sparkle { animation: none !important; }
}