/* MMK visual effects layer
   Static HTML/CSS/JS adaptations inspired by the supplied React Bits prompts.
   Uses existing MMK palette tokens only. */

.mmk-splash-cursor {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.82;
}

.mmk-page-visual,
.mmk-section-visual {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.mmk-effect-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.page-about #main-content,
.team-page #main-content,
.publications-page main,
.engagement-page main {
  position: relative;
  overflow: hidden;
}

.page-about .mmk-hero,
.page-about .mmk-section,
.team-page main > section,
.publications-page main > section,
.engagement-page main > section,
.engagement-page .ep-breadcrumb {
  position: relative;
  z-index: 1;
}

.mmk-about-aurora {
  position: absolute;
  top: clamp(720px, 82vh, 960px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 10% 12%, rgba(34, 81, 255, 0.09), transparent 34%),
    radial-gradient(circle at 80% 40%, rgba(5, 28, 44, 0.08), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,0), rgba(246,247,249,0.86) 18%, rgba(255,255,255,0));
}

.mmk-team-galaxy {
  position: absolute;
  top: clamp(620px, 70vh, 840px);
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0.72;
  background: radial-gradient(circle at 50% 0%, rgba(34,81,255,0.08), transparent 36%);
}

.mmk-insights-hero--media,
.publications-hero,
.engagement-hero {
  isolation: isolate;
}

.mmk-insights-hero--media[data-mmk-particles],
.publications-hero[data-mmk-ripple],
.engagement-hero[data-mmk-gridscan] {
  position: relative;
  overflow: hidden;
}

.mmk-insights-hero--media[data-mmk-particles] > :not(.mmk-section-visual),
.publications-hero[data-mmk-ripple] > :not(.mmk-section-visual),
.engagement-hero[data-mmk-gridscan] > :not(.mmk-section-visual) {
  position: relative;
  z-index: 1;
}

.mmk-insights-hero--media .mmk-section-visual,
.publications-hero .mmk-section-visual,
.engagement-hero .mmk-section-visual {
  opacity: 0.58;
}

/* MagicBento-inspired card layer */
[data-mmk-bento] {
  position: relative;
  perspective: 1100px;
  isolation: isolate;
}

[data-mmk-bento] .mmk-offer-card,
[data-mmk-bento] .publication-card,
[data-mmk-bento] .engagement-card,
.mmk-bento-card {
  --mmk-glow-x: 50%;
  --mmk-glow-y: 50%;
  --mmk-glow-intensity: 0;
  position: relative;
  overflow: hidden;
  transform-style: preserve-3d;
  will-change: transform;
}

[data-mmk-bento] .mmk-offer-card::after,
[data-mmk-bento] .publication-card::after,
[data-mmk-bento] .engagement-card::after,
.mmk-bento-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(420px circle at var(--mmk-glow-x) var(--mmk-glow-y),
      rgba(34,81,255, calc(var(--mmk-glow-intensity) * 0.20)),
      transparent 58%),
    linear-gradient(135deg,
      rgba(255,255,255, calc(var(--mmk-glow-intensity) * 0.22)),
      transparent 44%);
  box-shadow:
    inset 0 0 0 1px rgba(34,81,255, calc(var(--mmk-glow-intensity) * 0.34)),
    0 18px 55px rgba(5,28,44, calc(var(--mmk-glow-intensity) * 0.12));
  opacity: 1;
  transition: box-shadow 220ms ease, background 220ms ease;
}

.mmk-card-ripple {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(34,81,255,0.34), rgba(34,81,255,0.16) 38%, transparent 70%);
  transform: translate(-50%, -50%) scale(0);
  animation: mmk-card-ripple 780ms ease-out forwards;
  z-index: 3;
}

@keyframes mmk-card-ripple {
  to { transform: translate(-50%, -50%) scale(36); opacity: 0; }
}

/* Cubes-inspired structured field */
[data-mmk-cubes] {
  position: relative;
  isolation: isolate;
}

.mmk-cubes-field {
  position: absolute;
  inset: -4% -2%;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(8px, 1.2vw, 16px);
  opacity: 0.22;
  pointer-events: none;
  transform: perspective(900px) rotateX(58deg) rotateZ(-9deg) translateY(-8%);
  transform-origin: 50% 0%;
}

.mmk-cube-cell {
  aspect-ratio: 1;
  border: 1px solid rgba(34,81,255,0.34);
  background: linear-gradient(135deg, rgba(255,255,255,0.28), rgba(5,28,44,0.08));
  box-shadow: 0 12px 32px rgba(5,28,44,0.12);
  transition: transform 520ms cubic-bezier(.16,1,.3,1), background 520ms ease, opacity 520ms ease;
}

.mmk-cube-cell.is-hot {
  opacity: 0.95;
  transform: translateZ(18px) rotateX(-12deg);
  background: linear-gradient(135deg, rgba(34,81,255,0.34), rgba(255,255,255,0.18));
}

[data-mmk-cubes] > :not(.mmk-cubes-field) {
  position: relative;
  z-index: 1;
}

/* CircularGallery-inspired work rail */
.mmk-circular-gallery-section {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(135deg, var(--navy) 0%, #071827 55%, #f6f7f9 55%, #ffffff 100%);
}

.mmk-circular-gallery-section .work-section-head h2,
.mmk-circular-gallery-section .work-section-head p,
.mmk-circular-gallery-section .work-eyebrow {
  color: #ffffff;
}

.mmk-circular-gallery {
  position: relative;
  margin-top: clamp(2rem, 4vw, 3rem);
  min-height: clamp(340px, 42vw, 520px);
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.18);
  background:
    radial-gradient(circle at 20% 8%, rgba(34,81,255,0.24), transparent 32%),
    linear-gradient(135deg, rgba(5,28,44,0.9), rgba(5,28,44,0.72));
  box-shadow: 0 30px 90px rgba(5,28,44,0.24);
}

.mmk-circular-rail {
  display: flex;
  gap: clamp(1rem, 2vw, 1.6rem);
  align-items: center;
  min-width: max-content;
  padding: clamp(1.2rem, 2vw, 2rem);
  animation: mmk-gallery-drift 34s linear infinite;
  will-change: transform;
}

.mmk-circular-gallery:hover .mmk-circular-rail,
.mmk-circular-gallery:focus-within .mmk-circular-rail {
  animation-play-state: paused;
}

.mmk-circular-card {
  width: clamp(230px, 30vw, 380px);
  transform: translateY(var(--mmk-arc-y, 0)) rotate(var(--mmk-arc-rot, 0deg));
  transform-origin: center bottom;
}

.mmk-circular-card figure {
  margin: 0;
  overflow: hidden;
  border-radius: 22px;
  aspect-ratio: 4 / 3;
  background: var(--navy);
  box-shadow: 0 22px 52px rgba(0,0,0,0.26);
}

.mmk-circular-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mmk-circular-card span {
  display: block;
  margin-top: 0.85rem;
  color: #fff;
  font-weight: 800;
  text-align: center;
}

@keyframes mmk-gallery-drift {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Unified page visual fallbacks */
@media (prefers-reduced-motion: reduce) {
  .mmk-splash-cursor,
  .mmk-effect-canvas {
    opacity: 0.28;
  }

  .mmk-circular-rail {
    animation: none;
    overflow-x: auto;
    min-width: 100%;
  }

  [data-mmk-bento] .mmk-offer-card,
  [data-mmk-bento] .publication-card,
  [data-mmk-bento] .engagement-card,
  .mmk-bento-card {
    transform: none !important;
  }
}

@media (max-width: 760px) {
  .mmk-about-aurora,
  .mmk-team-galaxy {
    opacity: 0.48;
  }

  .mmk-cubes-field {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    opacity: 0.14;
  }

  .mmk-circular-gallery-section {
    background: var(--navy);
  }

  .mmk-circular-gallery {
    border-radius: 20px;
    min-height: 310px;
  }
}