/* ============================================================
   Интро-заставка + раскрытие услуг («Каприз красотки»)
   ============================================================ */

/* Скрываем прокрутку пока идёт интро */
body.intro-lock { overflow: hidden; }

/* ---------- Экран-заставка ---------- */
.splash {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    /* белый фон, расширяющий пространство (едва заметный зелёный ореол) */
    background:
        radial-gradient(65% 60% at 50% 42%, #ffffff 0%, #fbfdfb 55%, #f2f7f1 100%);
    overflow: hidden;
    transition: opacity 1.1s ease, transform 1.1s ease;
}
.splash.is-hidden { opacity: 0; pointer-events: none; }

/* Точка → полоса, из которой разворачивается надпись */
.splash__line {
    position: absolute;
    top: 35%;
    left: 50%;
    height: 12px;
    width: 12px;
    background: var(--deep-green);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    box-shadow: 0 0 26px rgba(111,138,116,0.65);
}
.splash.play .splash__line {
    animation: dot-line 1.9s cubic-bezier(.6,.02,.2,1) forwards;
}
@keyframes dot-line {
    0%   { opacity: 0; width: 12px;  height: 12px; border-radius: 50%; filter: blur(0); }   /* точка появляется */
    12%  { opacity: 1; width: 12px;  height: 12px; border-radius: 50%; }
    24%  { opacity: 1; width: 16px;  height: 16px; border-radius: 50%; }                     /* лёгкий пульс */
    56%  { opacity: 1; width: 440px; height: 4px;  border-radius: 4px; }                     /* превратилась в полосу */
    72%  { opacity: 1; width: 470px; height: 4px;  border-radius: 4px; filter: blur(.4px); }
    100% { opacity: 0; width: 500px; height: 3px;  border-radius: 3px; filter: blur(7px); }  /* растворяется — надпись проявилась */
}

/* Заголовок «Я Красивая» — разворачивается из полосы */
.splash__title {
    font-family: var(--font-script);
    color: var(--deep-green-2);
    line-height: 1;
    letter-spacing: 0.02em;
    text-shadow: 0 8px 26px rgba(86, 122, 94, 0.18);
    opacity: 0;
    transform: scaleY(0.04);
    transform-origin: 50% 50%;
    filter: blur(5px);
    white-space: nowrap;
}
.splash.play .splash__title {
    animation: title-unfold 1.1s cubic-bezier(.2,.8,.25,1) 0.95s forwards;
}
@keyframes title-unfold {
    0%   { opacity: 0; transform: scaleY(0.04); filter: blur(6px); }   /* плоская линия */
    35%  { opacity: 1; }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: scaleY(1);    filter: blur(0); }     /* раскрылась в надпись */
}
/* Разный размер слов/букв, но единый стиль */
.splash__title .w1 { font-size: clamp(2.6rem, 8vw, 5.4rem); }
.splash__title .w2 { font-size: clamp(3.6rem, 13vw, 8.8rem); margin-left: 0.12em; }
.splash__title .w2 .up { font-size: 1.18em; display: inline-block; transform: translateY(0.02em); }

/* Дуга «Салон красоты» — выразительная улыбка, ближе к заголовку */
.splash__arc {
    width: min(520px, 92vw);
    aspect-ratio: 560 / 84;
    height: auto;
    margin-top: 0.5rem;
    opacity: 0;
    transform: translateY(10px);
    filter: none;
    overflow: visible;
}
.splash__arc text {
    font-family: var(--font-display);
    font-weight: 600;
    letter-spacing: 0.34em;
    fill: var(--deep-green);
    font-size: 22px;
    text-transform: uppercase;
}
.splash.play .splash__arc { animation: soft-up 1s ease 1.95s forwards; }

/* «Каприз красотки» */
.splash__brand {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: clamp(1.6rem, 4vw, 2.6rem);
    color: var(--deep-green-2);
    letter-spacing: 0.05em;
    margin-top: 0.6rem;
    opacity: 0;
    transform: translateY(10px);
    text-shadow: 0 3px 14px rgba(86,122,94,0.14);
}
.splash.play .splash__brand { animation: soft-up 1s ease 2.2s forwards; }

/* Кнопка НАЖМИ */
.splash__btn-wrap { margin-top: 2.2rem; opacity: 0; transform: translateY(14px); }
.splash.play .splash__btn-wrap { animation: soft-up 1s ease 2.45s forwards; }

/* Овальная 3D-кнопка (шаблон из button.html) с надписью НАЖМИ */
.btn-press {
    position: relative;
    width: 200px; height: 92px;
    border: none; border-radius: 60px / 48px; /* овал */
    cursor: pointer; outline: none; user-select: none;
    font-family: var(--font-ui);
    font-size: 1.15rem; font-weight: 600; letter-spacing: 0.32em;
    color: var(--deep-green-2);
    background: radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f3f8f2 60%, #e7f0e5 100%);
    box-shadow:
        0 9px 0 #cbddc9,
        inset -9px -9px 18px rgba(103,130,108,0.10),
        inset 9px 9px 18px rgba(255,255,255,0.75),
        0 12px 26px rgba(86,122,94,0.28);
    transition: all 0.15s cubic-bezier(0.34,1.56,0.64,1);
    animation: btn-breathe 2.6s ease-in-out 3s infinite;
}
.btn-press:hover {
    background: radial-gradient(ellipse at 50% 35%, #ffffff 0%, #f8fbf7 60%, #eef5ec 100%);
    box-shadow:
        0 13px 0 #bfd6bd,
        inset -11px -11px 22px rgba(103,130,108,0.12),
        inset 11px 11px 22px rgba(255,255,255,0.85),
        0 16px 32px rgba(86,122,94,0.32);
    transform: translateY(-3px); animation: none;
}
.btn-press:active {
    box-shadow:
        0 2px 0 #bfd6bd,
        inset 0 5px 10px rgba(103,130,108,0.18),
        inset -6px -6px 12px rgba(103,130,108,0.12),
        inset 6px 6px 12px rgba(255,255,255,0.9),
        0 4px 10px rgba(86,122,94,0.24);
    transform: translateY(7px) scaleY(0.93); animation: none;
}
@keyframes btn-breathe {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-4px) scale(1.03); }
}

@keyframes soft-up { to { opacity: 1; transform: translateY(0); } }

/* ---------- Раскрытие «семью лепестками» ---------- */
.petals {
    position: fixed; inset: 0; z-index: 95;
    pointer-events: none;
    display: none;
}
.petals.active { display: block; }
.petal {
    position: absolute;
    top: 50%; left: 50%;
    width: 140vmax; height: 140vmax;
    transform-origin: 0% 100%;
    background: radial-gradient(ellipse at 30% 30%, #ffffff 0%, #eef4ec 55%, #cdddcb 100%);
    border-radius: 0 100% 0 100%;
    box-shadow: 0 0 60px rgba(167,184,171,0.4);
    transition: transform 1.15s cubic-bezier(.7,.02,.2,1), opacity 1.15s ease;
    opacity: 1;
}
/* 7 лепестков вокруг центра */
.petal:nth-child(1) { transform: rotate(0deg)    scale(0.02); }
.petal:nth-child(2) { transform: rotate(51.4deg) scale(0.02); }
.petal:nth-child(3) { transform: rotate(102.8deg)scale(0.02); }
.petal:nth-child(4) { transform: rotate(154.2deg)scale(0.02); }
.petal:nth-child(5) { transform: rotate(205.6deg)scale(0.02); }
.petal:nth-child(6) { transform: rotate(257deg)  scale(0.02); }
.petal:nth-child(7) { transform: rotate(308.4deg)scale(0.02); }
/* открытие наружу */
.petals.open .petal:nth-child(1) { transform: rotate(0deg)    scale(1.6); opacity: 0; }
.petals.open .petal:nth-child(2) { transform: rotate(51.4deg) scale(1.6); opacity: 0; }
.petals.open .petal:nth-child(3) { transform: rotate(102.8deg)scale(1.6); opacity: 0; }
.petals.open .petal:nth-child(4) { transform: rotate(154.2deg)scale(1.6); opacity: 0; }
.petals.open .petal:nth-child(5) { transform: rotate(205.6deg)scale(1.6); opacity: 0; }
.petals.open .petal:nth-child(6) { transform: rotate(257deg)  scale(1.6); opacity: 0; }
.petals.open .petal:nth-child(7) { transform: rotate(308.4deg)scale(1.6); opacity: 0; }

/* ---------- Слой «веер услуг» ---------- */
.services-reveal {
    position: relative;
    min-height: 100vh;
    /* множитель сжатия фото/овала — JS подгоняет под высоту экрана, чтобы всё помещалось без прокрутки */
    --fan-scale: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    overflow: hidden;
}
.reveal-center {
    position: relative;
    z-index: 5;
    text-align: center;
    max-width: min(90vw, 640px);
}
.reveal-center h2 {
    font-family: var(--font-script);
    /* высота экрана тоже ограничивает размер — чтобы всё помещалось без прокрутки */
    font-size: clamp(2.5rem, min(9vw, 8.4vh), 5.4rem);
    color: var(--deep-green-2);
    line-height: 1.05;
}
/* «Это всё» — влево, «для тебя» — вправо, чтобы «всё» было над «для» */
.reveal-center h2 .l1,
.reveal-center h2 .l2 { display: block; }
.reveal-center h2 .l1 { transform: translateX(-1.1em); }
.reveal-center h2 .l2 { transform: translateX(1.1em); }
.reveal-center p { color: var(--text-soft); font-size: clamp(1.05rem, 2.2vw, 1.4rem); margin-top: 0.35rem; }
.reveal-center .scroll-hint { margin-top: 0.7rem; font-size: 0.9rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-muted); }

/* Секция «Добро пожаловать» под веером — поднята выше (меньше верхний отступ),
   чтобы при прокрутке заголовок и всё под ним не оказывались слишком низко.
   Правим только эту секцию, не общий .section (он используется на других страницах). */
#next.section { padding-top: clamp(1.5rem, 3vw, 2.75rem); }

/* Окна услуг — появляются веером из центральной точки */
.svc-window {
    position: absolute;
    top: 50%; left: 50%;
    /* овальные плитки — размер завязан на ширину/высоту экрана И на --fan-scale (донастройка из JS) */
    width: calc(clamp(92px, min(11.5vw, 14vh), 156px) * var(--fan-scale, 1));
    text-align: center;
    /* стартовое состояние — точка в центре */
    transform: translate(-50%, -50%) scale(0) rotate(-16deg);
    opacity: 0;
    /* width НЕ анимируем — подгонка размера (--fan-scale) считается синхронно в JS
       через getBoundingClientRect(), и transition на width мешал бы этим замерам */
    transition: transform 0.9s cubic-bezier(.34,1.3,.5,1), opacity 0.7s ease;
    will-change: transform, opacity;
}
.svc-window.fan {
    /* конечное положение задаётся через CSS-переменные из JS */
    transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1) rotate(0deg);
    opacity: 1;
}
/* Подписи — крупные и прямые (горизонтальные), для лёгкого чтения даже при слабом зрении */
.svc-window h3 { font-family: var(--font-ui); font-weight: 400; font-size: 1.15rem; color: var(--ink-green); margin-top: 12px; }
.svc-window small { color: var(--text-muted); font-size: 0.9rem; }

/* Фото услуги — ОВАЛ (в стиль центрального овала), белая окантовка + мягкая тень */
.svc-photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid rgba(255,255,255,0.9);
    box-shadow: var(--shadow-card), 0 14px 30px rgba(86,122,94,0.18);
}
.svc-photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .4s ease;
}
.svc-window:hover .svc-photo img { transform: scale(1.06); }

/* Выпуклые (объёмные) эмодзи — вынесены НАД окном */
.emoji3d {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 58px; height: 58px;
    font-size: 30px;
    line-height: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 30%, #ffffff 0%, #eef4ec 55%, #d3e0d1 100%);
    box-shadow:
        inset -4px -4px 8px rgba(103,130,108,0.18),
        inset 4px 4px 8px rgba(255,255,255,0.9),
        0 8px 16px rgba(86,122,94,0.20);
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.18));
}
/* внутри окна эмодзи позиционируется полностью над верхним краем */
.svc-window .emoji3d {
    position: absolute;
    top: -58px; left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

/* ---------- Центральный овал «Волосы» ---------- */
.hair-oval {
    position: relative;
    /* размер завязан на ширину/высоту экрана И на --fan-scale (донастройка из JS);
       width НЕ анимируем — мешало бы синхронным замерам подгонки в JS */
    width: calc(clamp(140px, min(18vw, 21vh), 220px) * var(--fan-scale, 1));
    /* нижний отступ резервирует место под подпись «Окрашивание» (она позиционируется абсолютно) */
    margin: 10px auto 50px;
}
.hair-oval__photo {
    display: block;
    width: 100%;
    aspect-ratio: 4 / 5;   /* вертикальный овал */
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    border: 4px solid rgba(255,255,255,0.9);
    box-shadow: var(--shadow-card), 0 18px 40px rgba(86,122,94,0.18);
    background: linear-gradient(160deg, var(--pale-green-2), var(--green-gray-soft));
}
.hair-oval__photo img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}
.hair-oval:hover .hair-oval__photo img { transform: scale(1.05); }

/* Три подписи полукругом вокруг нижней части овала — крупные, для лёгкого чтения */
.hair-oval__label {
    position: absolute;
    display: inline-block;
    padding: 9px 20px;
    font-family: var(--font-ui);
    font-weight: 400;
    font-size: 1.08rem;
    color: var(--ink-green);
    white-space: nowrap;
    text-decoration: none;
    background: rgba(255,255,255,0.94);
    border: 1px solid rgba(167,184,171,0.4);
    border-radius: 999px;
    box-shadow: var(--shadow-card);
    backdrop-filter: blur(6px);
    transition: box-shadow .28s ease, color .2s ease, background .2s ease;
    z-index: 4;
}
.hair-oval__label:hover {
    color: var(--deep-green-2);
    background: #fff;
    box-shadow: var(--shadow-card), 0 10px 20px rgba(86,122,94,0.24);
}
.hair-oval__label--left   { top: 62%; left: 0;   transform: translate(calc(-100% - 16px), -50%); }
.hair-oval__label--right  { top: 62%; right: 0;  transform: translate(calc(100% + 16px), -50%); }
.hair-oval__label--bottom { top: 100%; left: 50%; transform: translate(-50%, 10px); }

@media (max-width: 720px) {
    .svc-window h3 { font-size: 0.86rem; margin-top: 7px; line-height: 1.2; }
    .svc-window small { font-size: 0.74rem; }
    .svc-photo { border-width: 2px; }
    .emoji3d { width: 44px; height: 44px; font-size: 22px; }

    /* Овал «Волосы» — компактнее на телефоне (размер уже даёт clamp() выше) */
    .hair-oval { margin: 8px auto 40px; }
    .hair-oval__photo { border-width: 3px; }
    .hair-oval__emoji { top: -26px; }
    .hair-oval__label { font-size: 0.86rem; padding: 6px 13px; }
    .hair-oval__label--left  { transform: translate(calc(-100% - 8px), -50%); }
    .hair-oval__label--right { transform: translate(calc(100% + 8px), -50%); }
    .hair-oval__label--bottom { transform: translate(-50%, 8px); }
}

@media (prefers-reduced-motion: reduce) {
    .splash.play .splash__line { animation-duration: 0.5s; }
    .splash.play .splash__title,
    .splash.play .splash__arc,
    .splash.play .splash__brand,
    .splash.play .splash__btn-wrap { animation-delay: 0.1s; }
    .btn-press { animation: none; }
}