/* Carlo's Seafood shared components (all pages). Prefix: csh- */

@keyframes csSpin { to { transform: rotate(360deg); } }
.csh-kicker { margin: 0 0 6px; font-weight: 800; text-transform: uppercase; letter-spacing: 2px; font-size: .85rem; color: var(--cs-red); }
.csh-head { text-align: center; margin-bottom: 44px; }
.csh-flyer { color: var(--cs-red); -webkit-text-stroke: 0; text-shadow: 3px 3px 0 var(--cs-white), -2px -2px 0 var(--cs-white), 2px -2px 0 var(--cs-white), -2px 2px 0 var(--cs-white), 6px 7px 0 var(--cs-navy); }
.csh-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
[data-reveal] { opacity: 0; transform: translateY(40px) scale(.97); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1.2); transition-delay: calc(var(--d, 0) * 120ms); }
[data-reveal].is-in { opacity: 1; transform: none; }
@keyframes csFadeUp { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes csWiggle { 0%, 86%, 100% { rotate: 0deg; } 89% { rotate: -4deg; } 92% { rotate: 4deg; } 95% { rotate: -2deg; } }
.csh-waves { position: absolute; left: 0; right: 0; bottom: 0; height: 120px; z-index: 0; }
.csh-waves svg { position: absolute; bottom: 0; left: 0; width: 200%; height: 100%; }
.csh-waves .w1 { fill: rgba(87,194,239,.55); bottom: 60px; animation: csWave 14s linear infinite; }
.csh-waves .w2 { fill: rgba(28,61,122,.25); bottom: 40px; animation: csWave 9s linear infinite reverse; }
.csh-waves .w3 { fill: var(--cs-sand); animation: csWave 20s linear infinite; }
@keyframes csWave { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes csFloat { 50% { translate: 0 -8px; } }
.csh-items li { display: flex; align-items: baseline; gap: 10px; font-weight: 700; font-size: 1.08rem; padding-bottom: 6px; border-bottom: 2px dotted rgba(28,61,122,.22); }
.csh-items li span { flex: 1; }
.csh-items li b { color: var(--cs-navy); white-space: nowrap; font-weight: 800; }
.csh-items li b i { font-style: normal; color: var(--cs-red); margin: 0 4px; }
@keyframes csSlideIn { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: none; } }
@keyframes csPeek { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(8deg) translateY(-6px); } }
.csh-advisory { max-width: 720px; margin: 26px auto 0; text-align: center; font-size: .85rem; color: var(--cs-muted); }
.csh-final { position: relative; overflow: hidden; padding: clamp(70px, 10vw, 120px) 0 150px; background: var(--cs-red); color: var(--cs-white); }
.csh-final::before { content: ""; position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 120%, rgba(255,255,255,.07) 0 30px, transparent 30px 60px); pointer-events: none; }
.csh-final h2 { color: var(--cs-white); text-shadow: 0 4px 0 var(--cs-navy); }
.csh-final p { font-size: 1.2rem; font-weight: 700; margin-bottom: 26px; }
.csh-walker { position: absolute; bottom: 14px; width: 120px; left: -140px; animation: csWalk 16s linear infinite; }
@keyframes csWalk { 0% { left: -140px; transform: translateY(0) rotate(0); } 25% { transform: translateY(-6px) rotate(-4deg); } 50% { transform: translateY(0) rotate(4deg); } 75% { transform: translateY(-6px) rotate(-4deg); } 100% { left: calc(100% + 140px); transform: translateY(0) rotate(0); } }

@media (max-width: 860px) {
  .csh-flyer { line-height: 1.25; text-shadow: 2px 2px 0 var(--cs-white), -1px -1px 0 var(--cs-white), 1px -1px 0 var(--cs-white), -1px 1px 0 var(--cs-white), 3px 4px 0 var(--cs-navy); }
  .csh-ctas .cs-btn { padding: 12px 22px; font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}