.mc-js [data-reveal] {
  opacity: 0;
  transition: opacity 0.85s var(--ease-house), transform 0.85s var(--ease-house), filter 0.6s var(--ease-house);
  will-change: opacity, transform;
}
.mc-js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
.mc-js [data-reveal="fade-up"] { transform: translateY(18px); }
.mc-js [data-reveal="scale"]   { transform: scale(0.94); }
.mc-js [data-reveal="cascade"] { transform: perspective(800px) rotateX(7deg) scale(0.97); }

.mc-js [data-reveal="rise"]       { transform: translateY(32px); }
.mc-js [data-reveal="fall"]       { transform: translateY(-32px); }.mc-js [data-reveal="pan-left"]   { transform: translateX(-46px); }
.mc-js [data-reveal="pan-right"]  { transform: translateX(46px); }
.mc-js [data-reveal="pop"]        { transform: scale(0.8); }
.mc-js [data-reveal="blur"]       { filter: blur(14px); transform: scale(1.03); }
.mc-js [data-reveal="wipe"]       { opacity: 1; clip-path: inset(0 100% 0 0); transition: clip-path 0.9s var(--ease-house); }
.mc-js [data-reveal="wipe"].is-in { clip-path: inset(0 0 0 0); }
.mc-js [data-reveal="baseline"]       { opacity: 1; clip-path: inset(112% 0 -6% 0); transform: translateY(0.45em); transition: clip-path 0.85s var(--ease-house), transform 0.85s var(--ease-house); }
.mc-js [data-reveal="baseline"].is-in { clip-path: inset(-6% 0 -6% 0); transform: none; }
.mc-js [data-reveal="drift"]       { transform: translateY(26px); }
.mc-js [data-reveal="drift"].is-in { animation: mc-drift 9s ease-in-out 0.7s infinite alternate; }

[data-breathe] { animation: mc-breathe 5.5s ease-in-out infinite; }
@keyframes mc-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03); } }
@keyframes mc-drift { 0% { transform: translate(0, 0); } 100% { transform: translate(0, -9px); } }

[data-gradient-text] {
  background: linear-gradient(100deg, var(--color-leaf), var(--color-lime), var(--color-grass), var(--color-leaf));
  background-size: 300% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
  animation: mc-gradient 8s linear infinite;
}
@keyframes mc-gradient { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }

.mc-js [data-reveal="line"] {
  opacity: 1; transform: scaleX(0); transform-origin: left;
  transition: transform 0.7s var(--ease-house);
}
.mc-js [data-reveal="line"].is-in { transform: scaleX(1); }

.mc-js :where([data-reveal-stagger]) > * {
  opacity: 0; transform: translateY(16px);
  transition: opacity 0.7s var(--ease-house), transform 0.7s var(--ease-house);
  transition-delay: calc(var(--i, 0) * 80ms);
}
.mc-js :where([data-reveal-stagger].is-in) > * { opacity: 1; transform: none; }
.mc-js :where([data-reveal-stagger].is-in) > [data-tilt] { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }

[data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; }
[data-draw].is-in { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s var(--ease-house); }

[data-hero-toggle] { position: relative; }
[data-hero-toggle] [data-when] { transition: opacity 0.45s var(--ease-house), transform 0.45s var(--ease-house); }
[data-hero-toggle] [data-when]:not([data-active]):not([data-hero-dot]) { opacity: 0; pointer-events: none; }

[data-hero-panel]:not([data-active]) { position: absolute; inset: 0; transform: translateX(22px); }
[data-hero-panel][data-active] { position: relative; transform: none; }

.hero-stage { position: relative; }
[data-hero-img] { backface-visibility: hidden; }
[data-hero-img]:not([data-active]) { position: absolute; inset: 0; margin: auto; transform: rotateY(90deg); }
[data-hero-img][data-active] { position: relative; transform: rotateY(0deg); }

[data-hero-toggle] [data-live-ticker][data-when]:not([data-active]) { position: absolute; }

[data-hero-dot] {
  width: 8px; height: 8px; padding: 0; border: 0; cursor: pointer;
  position: relative;
  border-radius: 999px; background: color-mix(in srgb, var(--color-leaf) 30%, transparent);
  transition: width 0.3s var(--ease-house), background 0.3s var(--ease-house);
}
[data-hero-dot][data-active] { width: 24px; background: var(--color-leaf); }
[data-hero-dot]::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

[data-hero-arrow] { cursor: pointer; transition: transform 0.3s var(--ease-house); }
[data-hero-arrow]:hover { transform: scale(1.1); }
[data-hero-arrow]:active { transform: scale(0.95); }

[data-live-ticker] { position: relative; }
[data-ticker-item] { transition: opacity 0.32s var(--ease-house), transform 0.32s var(--ease-house); }
[data-ticker-item]:not([data-active]) { position: absolute; inset: 0; opacity: 0; transform: translateY(8px); pointer-events: none; }
[data-ticker-item][data-active] { position: relative; opacity: 1; transform: none; }
[data-live-ticker]:not(:has([data-ticker-item][data-active])) [data-ticker-item]:first-child {
  position: relative; opacity: 1; transform: none; pointer-events: auto;
}

[data-feed-item] { position: relative; }
[data-feed-item][data-enter] { animation: mc-feed-in 0.42s var(--ease-house) both; }
@keyframes mc-feed-in { from { opacity: 0; transform: translateY(16px) scale(0.94); } to { opacity: 1; transform: none; } }
[data-feed-item][data-alert][data-enter]::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px var(--color-lime); animation: mc-alert 1s ease-out both;
}
@keyframes mc-alert { from { opacity: 0.7; transform: scale(1); } to { opacity: 0; transform: scale(1.08); } }

.signal-rings { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.signal-rings__r {
  position: absolute; left: 50%; top: 52%; width: 170px; height: 170px; margin: -85px 0 0 -85px;
  border: 2px solid color-mix(in srgb, var(--color-leaf) 40%, transparent); border-radius: 999px; opacity: 0;
  animation: mc-ring 3.6s ease-out infinite;
}
.signal-rings__r:nth-child(2) { animation-delay: 1.2s; }
.signal-rings__r:nth-child(3) { animation-delay: 2.4s; }
@keyframes mc-ring { 0% { transform: scale(0.3); opacity: 0.55; } 100% { transform: scale(2.4); opacity: 0; } }

@keyframes mc-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.float { animation: mc-float 5.5s ease-in-out infinite; }

@keyframes mc-bob-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.mc-bob { animation: mc-bob-y 4.5s ease-in-out infinite; animation-delay: var(--bob-delay, 0s); }

.mc-phone-circle {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle,
    color-mix(in srgb, var(--color-lime) 22%, transparent),
    color-mix(in srgb, var(--color-grass) 10%, transparent) 55%,
    transparent 72%);
}
.mc-phone-circle > * { position: relative; z-index: 1; }

.bubbles { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
@media (max-width: 1100px) { .bubbles { display: none; } }
.bubble {
  position: absolute; border-radius: 999px; object-fit: cover; opacity: 0.8;
  box-shadow: 0 20px 40px -16px color-mix(in srgb, var(--color-ink) 40%, transparent); outline: 4px solid rgba(255, 255, 255, 0.6);
  animation: mc-bob 10s ease-in-out infinite;
}
.bubble:nth-child(2) { animation-duration: 11s; animation-delay: 0.7s; }
.bubble:nth-child(3) { animation-duration: 9s;  animation-delay: 1.3s; }
@keyframes mc-bob { 0%, 100% { transform: translate(0, 0) rotate(0deg); } 50% { transform: translate(-8px, -16px) rotate(-3deg); } }

[data-tilt] {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d; transition: transform 0.3s var(--ease-house);
}

@media (prefers-reduced-motion: reduce) {
  .mc-js [data-reveal], .mc-js [data-reveal-stagger] > * {
    opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important;
    clip-path: none !important; animation: none !important;
  }
  [data-breathe], [data-gradient-text] { animation: none !important; }
  [data-gradient-text] { -webkit-text-fill-color: currentColor; color: var(--color-leaf); }
  [data-draw] { stroke-dashoffset: 0 !important; }
  [data-hero-img]:not([data-active]) { transform: none; }
  .signal-rings__r, .float, .bubble, .mc-bob { animation: none; }
  .signal-rings__r { opacity: 0; }
  [data-feed-item][data-enter] { animation: none; }
  [data-feed-item][data-alert][data-enter]::before { animation: none; opacity: 0; }
  [data-tilt] { transform: none; }
  [data-hero-arrow], [data-ticker-item] { transition: none; }
}