/* ========================================================================== 
       MetaLife Clinic · loader-secondary.css
       ========================================================================== */
:root {
    --_font-default: "Manrope";
  --_font-accent: var(--_font-default);
    --_loader-out-fast: var(--_animspeed-medium, .3s);
    --_loader-out-slow: var(--_animspeed-slow, .6s);
    --_loader-ease: var(--_animbezier, cubic-bezier(0.23, 0.65, 0.74, 1.09));
    --hero-h: min(100vh, 960px);
    --headline-z: 5;
    /* заголовки выше картинок */
    --flower-z: 2;
    /* цветки над клиникой */
    --clinic-z: 1;
    /* клиника под цветками */
    --hero-overlay-alpha: .34;
    /* затемнение фото клиники */
}

.main-image-3{
  --img-overlay: linear-gradient(180deg, rgba(126, 126, 126, 0.34) 0%, rgb(255 255 255 / 12%) 100%);
  background-image: var(--img-overlay), url("/assets/img/clinic/clinic_1.png");
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}

.loader.loader--secondary {
    position: fixed;
    inset: 0;
    z-index: 1000;
    pointer-events: auto;
}

.loader.loader--secondary .loader__wrapper {
    background: transparent !important;
}

.loader.loader--secondary .loader__content,
.loader.loader--secondary .loader__count {
    display: none !important;
}

.loader.loader--secondary::before,
.loader.loader--secondary::after {
    content: "";
    position: fixed;
    left: 0;
    right: 0;
    height: 50vh;
    background: var(--base);
    will-change: transform, opacity;
    transition: transform var(--_loader-out-slow) var(--_loader-ease), opacity var(--_loader-out-fast) var(--_loader-ease);
}

.loader.loader--secondary::before {
    top: 0;
    transform: translateY(0);
    box-shadow: 0 1px 0 rgba(var(--base-rgb, 20, 20, 20), .12);
}

.loader.loader--secondary::after {
    bottom: 0;
    transform: translateY(0);
    box-shadow: 0 -1px 0 rgba(var(--base-rgb, 20, 20, 20), .12);
}

.loader.loader--secondary.loaded::before {
    transform: translateY(-102%);
}

.loader.loader--secondary.loaded::after {
    transform: translateY(102%);
}

.loader.loader--secondary {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--_loader-out-fast) var(--_loader-ease) calc(var(--_loader-out-slow) - .2s),
        visibility 0s linear calc(var(--_loader-out-slow) + .05s);
}

.loader.loader--secondary.loaded {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#loader.loader--secondary~.loading__fade {
    opacity: 0;
    transform: translateY(8px);
}

#loader.loader--secondary.loaded~.loading__fade {
    opacity: 1;
    transform: none;
    transition: opacity var(--_loader-out-slow) var(--_loader-ease) .12s,
        transform var(--_loader-out-slow) var(--_loader-ease) .12s;
    will-change: opacity, transform;
}

#loader.loader--secondary~.page-content .content__block {
    opacity: 0;
    transform: translateY(10px);
}

#loader.loader--secondary.loaded~.page-content .content__block {
    opacity: 1;
    transform: none;
    transition: opacity var(--_loader-out-slow) var(--_loader-ease) .16s,
        transform var(--_loader-out-slow) var(--_loader-ease) .16s;
}

#loader.loader--secondary~.page-content .loading-wrap .loading__item {
    opacity: 0;
    transform: translateY(10px);
}

#loader.loader--secondary.loaded~.page-content .loading-wrap .loading__item {
    opacity: 1;
    transform: none;
    transition: opacity var(--_loader-out-slow) var(--_loader-ease),
        transform var(--_loader-out-slow) var(--_loader-ease);
}

#loader.loader--secondary.loaded~.page-content .loading-wrap .loading__item:nth-child(1) {
    transition-delay: .06s;
}

#loader.loader--secondary.loaded~.page-content .loading-wrap .loading__item:nth-child(2) {
    transition-delay: .12s;
}

#loader.loader--secondary.loaded~.page-content .loading-wrap .loading__item:nth-child(3) {
    transition-delay: .18s;
}

#loader.loader--secondary.loaded~.page-content .loading-wrap .loading__item:nth-child(4) {
    transition-delay: .24s;
}

#loader.loader--secondary.loaded~.page-content .loading-wrap .loading__item:nth-child(5) {
    transition-delay: .30s;
}

html,
body {
    overscroll-behavior: none;
}

@media (prefers-reduced-motion: reduce) {

    .loader.loader--secondary::before,
    .loader.loader--secondary::after {
        transition: none;
        transform: translateY(-102%);
    }

    .loader.loader--secondary,
    .loader.loader--secondary.loaded {
        transition: none;
        opacity: 0;
        visibility: hidden;
    }

    #loader.loader--secondary~.loading__fade,
    #loader.loader--secondary.loaded~.loading__fade,
    #loader.loader--secondary~.page-content .content__block,
    #loader.loader--secondary.loaded~.page-content .content__block,
    #loader.loader--secondary~.page-content .loading-wrap .loading__item,
    #loader.loader--secondary.loaded~.page-content .loading-wrap .loading__item {
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

noscript .nojs-hide {
    display: none !important;
}

/* === Minimal scoped styles for the GSAP highlight carousel (оставлено как было) === */
.mlc-carousel {
    position: relative;
    min-height: clamp(360px, 58vh, 640px);
    border-radius: 16px;
    overflow: hidden;
}

.mlc-carousel__viewport {
    position: relative;
    height: 100%;
    perspective: 1800px;
    background: color-mix(in srgb, var(--neutral-bright, #fff), transparent 90%);
}

.mlc-carousel__items {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    will-change: transform;
}

.mlc-card {
    position: absolute;
    width: clamp(220px, 24vw, 360px);
    height: clamp(280px, 32vw, 520px);
    border-radius: 12px;
    overflow: hidden;
    transform: translate(-50%, -50%);
    transform-origin: center center;
    box-shadow: 0 8px 30px rgba(0, 0, 0, .12);
    background: #ddd;
    user-select: none;
}

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

.mlc-card-badge {
    position: absolute;
    left: 10px;
    top: 10px;
    background: color-mix(in srgb, var(--base, #141414), transparent 35%);
    color: var(--neutral-bright, #fff);
    font-size: .75rem;
    line-height: 1;
    padding: .35rem .5rem;
    border-radius: 10px;
    backdrop-filter: blur(4px);
}

.mlc-carousel__controls {
    position: absolute;
    left: 50%;
    bottom: 12px;
    transform: translateX(-50%);
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    justify-content: center;
    background: color-mix(in srgb, var(--neutral, #f6f6f6), transparent 85%);
    padding: .35rem .5rem;
    border-radius: 12px;
    backdrop-filter: blur(6px);
    pointer-events: auto;
}

.mlc-carousel__controls .btn {
    --btn-min-h: 34px;
}

.mlc-carousel__controls .is-active {
    border-color: currentColor;
}

@media (max-width: 575.98px) {
    .mlc-card {
        width: clamp(180px, 44vw, 260px);
        height: clamp(240px, 62vw, 360px);
    }
}

/* ===========================================================
       HERO
       =========================================================== */
.main.home {
    min-height: var(--hero-h);
}

.main__intro {
    position: relative;
    min-height: var(--hero-h);
}

.intro__background {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: visible;
}

.intro-bg-01__01,
.intro-bg-01__02 {
    position: absolute;
    inset: 0;
}

#headline {
    position: relative;
    z-index: var(--headline-z);
}

/* КЛИНИКА (крупное изображение + overlay) */
.hero-clinic {
    z-index: var(--clinic-z);
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hero-clinic__wrap {
    position: relative;
    display: inline-block;
}

.hero-clinic__wrap img {
    width: min(1200px, 92vw);
    height: auto;
    transform-origin: center center;
    will-change: transform, filter;
    filter: drop-shadow(0 10px 28px rgba(0, 0, 0, .18));
    display: block;
}

.hero-clinic__wrap::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(8, 12, 20, var(--hero-overlay-alpha));
    /* затемнение */
    pointer-events: none;
    border-radius: inherit;
}

.hero-clinic .intro-bg__shadow {
    position: absolute;
    inset: auto 0 0;
    height: 20vh;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .08) 100%);
    pointer-events: none;
}

html.is-firefox .mlc-card-badge,
html.is-firefox .mlc-carousel__controls {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

html.is-firefox .hero-clinic__wrap img {
    will-change: auto;
    filter: none;
}

/* Центральный цветок — без фона, у нижнего края, x4, под заголовками */
.hero-flower {
    z-index: var(--flower-z);
    left: 50%;
    bottom: -3vh;
    transform: translateX(-50%) scale(4);
    transform-origin: bottom center;
    width: auto;
    height: auto;
    pointer-events: none;
}

.hero-flower img {
    width: clamp(180px, 24vw, 420px);
    height: auto;
    background: none !important;
    image-rendering: auto;
    display: block;
}

@media (max-width:420px) {
    .hero-flower {
        bottom: -1vh;
    }
}

/* Правый нижний цветок */
.hero-flower-corner {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: var(--flower-z);
    pointer-events: none;
    transform-origin: bottom right;
}

.hero-flower-corner img {
    display: block;
    width: clamp(50px, 18vw, 160px);
    height: auto;
    background: none !important;
}

@media (max-width:280px) {
    .hero-flower-corner img {
        width: clamp(100px, 26vw, 180px);
    }
}

/* Motion-reduce */
@media (prefers-reduced-motion: reduce) {
    .hero-clinic__wrap img {
        transform: scale(1.12) translate3d(0, 0, 0) !important;
    }

    .hero-flower img {
        transform: none !important;
    }
}

/* Под героем — корректный stacking */
.media-grid-bottom {
    position: relative;
    z-index: 10;
}



/* Боковой цветок — по правому краю, по центру по вертикали */
.intro__background .hero-flower-side{
  position: absolute;
  top: 67%;
  right: 0;
  transform: translate(15%, -50%);
  transform-origin: center right;
  z-index: var(--flower-z);
  pointer-events: none;
}

.intro__background .hero-flower-side > img{
  display: block;
  width: clamp(846px, 29.6vw, 684px) !important; 
  height: auto;
  background: none !important;
}

/* На очень узких — не перекрываем заголовок */
@media (max-width: 660px){
  .intro__background .hero-flower-side{
    top: auto;
    bottom: 22px;
    right: 14px;
    transform: none;
  }
  .intro__background .hero-flower-side > img{
    width: 34px !important; /* компактнее на мобилках */
  }
}