.mf-wrap {
position: relative;
width: 100%;
}
.mf-svg {
width: 100%;
height: auto;
display: block;
} .mf-region {
cursor: pointer;
}
.mf-area {
fill: rgba(0,0,0,0.001);
pointer-events: all;
} .mf-img {
opacity: 0;
filter: blur(10px);
transition:
opacity 0.6s ease,
filter 0.6s ease;
}
.mf-region:hover .mf-img {
opacity: 1;
filter: blur(0);
} .mf-tint {
fill: #000;
opacity: 0;
transition: opacity 0.45s ease;
pointer-events: none;
}
.mf-region:hover .mf-tint {
opacity: 0.22;
} .mf-label {
fill: #5b6e74;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
letter-spacing: 0.08em;
text-anchor: middle;
dominant-baseline: middle;
opacity: 1;
filter: blur(0);
transform: translateY(0);
transition:
opacity 0.4s ease,
filter 0.4s ease,
transform 0.4s ease;
pointer-events: none;
}
.mf-region:hover .mf-label {
opacity: 0;
filter: blur(6px);
transform: translateY(-8px);
} .mf-region--lg .mf-label {
font-size: 20px;
}
.mf-region--md .mf-label {
font-size: 20px;
}
.mf-region--sm .mf-label {
font-size: 20px; } .mf-play {
opacity: 0;
filter: blur(6px);
transition:
opacity 0.4s ease,
filter 0.4s ease;
pointer-events: none;
}
.mf-region:hover .mf-play {
opacity: 1;
filter: blur(0);
}
.mf-play circle {
fill: #E3010F;
filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}
.mf-play polygon {
fill: #ffffff;
} #outer_walls,
#inner_lines {
pointer-events: none;
} .mf-lightbox {
position: fixed;
inset: 0;
z-index: 99999;
display: none;
}
.mf-lightbox.active {
display: block;
} .mf-lightbox-backdrop {
position: absolute;
inset: 0;
background: rgba(10, 10, 10, 0.75);
backdrop-filter: blur(10px);
} .mf-lightbox-content {
position: absolute;
top: 50%;
left: 50%;
width: 80%;
max-width: 1000px;
transform: translate(-50%, -50%) scale(0.96);
opacity: 0;
transition: all 0.35s ease;
}
.mf-lightbox.active .mf-lightbox-content {
transform: translate(-50%, -50%) scale(1);
opacity: 1;
} .mf-video-wrap {
position: relative;
width: 100%;
padding-top: 56.25%;
background: #000;
box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}
.mf-video-wrap iframe {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
} .mf-lightbox-close {
position: fixed;
top: 30px;
right: 30px;
width: 44px;
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255,255,255,0.85);
backdrop-filter: blur(10px);
border-radius: 50%;
border: 1px solid rgba(0,0,0,0.1);
cursor: pointer;
z-index: 100000;
opacity: 0;
transform: scale(0.9);
transition: all 0.25s ease;
} .mf-lightbox.active .mf-lightbox-close {
opacity: 1;
transform: scale(1);
} .mf-lightbox-close svg {
width: 18px;
height: 18px;
} .mf-lightbox-close line {
stroke: #5b6e74; stroke-width: 2.4;
stroke-linecap: round;
transition: all 0.25s ease;
} .mf-lightbox-close:hover {
background: rgba(255,255,255,1);
transform: scale(1.08);
} .mf-lightbox-close:hover line {
stroke: #ffffff;
}