/* cover.css — MailChimp cover (logo in pixel dust). Shared by the homepage card and the case-study hero. */

:root { --mc-yellow: #ffe01b; }

.mc-stage {
  position: relative; display: grid; place-items: center; overflow: hidden;
  aspect-ratio: 16 / 7; min-height: 240px;
  border-radius: var(--radius-lg); border: 1px solid var(--line);
  background:
    radial-gradient(40% 55% at 50% 52%, rgba(255, 224, 27, 0.045), transparent 70%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}
@media (max-width: 700px) { .mc-stage { aspect-ratio: 4 / 3; } }
.mc-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.mc-stage__float { position: relative; width: clamp(76px, 10vw, 136px); animation: mc-float 7s ease-in-out infinite; }
.mc-stage__logo {
  display: block; width: 100%; height: auto; fill: var(--mc-yellow);
  filter: drop-shadow(0 0 22px rgba(255, 224, 27, 0.1));
  transform: translate(calc(var(--mx, 0) * 10px), calc(var(--my, 0) * 8px)) rotate(calc(var(--mx, 0) * 3deg));
}
@keyframes mc-float { 0%, 100% { transform: translateY(-6px); } 50% { transform: translateY(6px); } }
@media (prefers-reduced-motion: reduce) { .mc-stage__float { animation: none; } }


/* sizing per context */
.cs-hero .mc-stage { margin-top: clamp(36px, 5vw, 56px); }
.card__art.mc-stage { aspect-ratio: 16 / 11; min-height: 0; padding: 0; }
.card__art.mc-stage .mc-stage__float { width: clamp(64px, 8vw, 112px); animation: none; }
/* on the homepage card and the "Also check out" preview the logo floats only while hovered (cover.js runs the dust the same way) */
.card:hover .card__art.mc-stage .mc-stage__float, .card:focus-visible .card__art.mc-stage .mc-stage__float,
.also__item:hover .peek .mc-stage__float { animation: mc-float-card 4s ease-in-out infinite; }
@keyframes mc-float-card { 0%, 100% { transform: none; } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .card:hover .card__art.mc-stage .mc-stage__float { animation: none; } }

/* light mode: Freddie in MailChimp's peppercorn on paper (yellow on white would disappear) */
/* a soft shadow keeps the float readable without the glow */
:root[data-theme="light"] .mc-stage__logo { fill: #241c15; filter: drop-shadow(0 12px 14px rgba(36, 28, 21, 0.2)); }
:root[data-theme="light"] .mc-stage {
  background:
    radial-gradient(42% 58% at 50% 52%, rgba(255, 224, 27, 0.2), transparent 72%),
    linear-gradient(180deg, var(--bg-2), var(--bg));
}