/**
 * Sprint S9: scene-v2.css — Monoline SVG scenes с draw-in stroke animation.
 *
 * Используется шорткодом [sk_scene_v2]. Инструментируется JS-модулем
 * stroke-animation.js (IntersectionObserver → stroke-dashoffset: 0).
 *
 * Все цвета и spacing — через design tokens (0 hardcode палитры).
 */

/* Контейнер сцены */
.sk-scene {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3, 16px);
    padding: var(--section-padding-y, clamp(80px, 10vw, 160px)) 0;
    position: relative;
    margin: 0;
}

.sk-scene--center {
    align-items: center;
    text-align: center;
}

.sk-scene--left {
    align-items: flex-start;
    text-align: left;
}

.sk-scene--right {
    align-items: flex-end;
    text-align: right;
}

/* Eyebrow (fallback если sk-section__eyebrow не подключён) */
.sk-scene__eyebrow {
    font-size: var(--fs-12, 0.75rem);
    font-family: var(--ff-body, inherit);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--eyebrow-tracking, 0.18em);
    color: var(--eyebrow-color, var(--color-accent));
    margin-bottom: var(--sp-2, 12px);
}

/* SVG-контейнер — responsive aspect */
.sk-scene__svg {
    width: 100%;
    max-width: 480px;
    aspect-ratio: 1 / 1;
    display: block;
}

.sk-scene--birds .sk-scene__svg {
    max-width: 640px;
    aspect-ratio: 640 / 360;
}

.sk-scene__svg svg {
    width: 100%;
    height: 100%;
    display: block;
    overflow: visible;
}

/* Caption */
.sk-scene__caption {
    font-size: var(--fs-14, 0.875rem);
    color: var(--color-text-secondary);
    max-width: 32rem;
    line-height: 1.5;
    margin-top: var(--sp-3, 16px);
}

/*
 * Stroke-animation: draw-in эффект
 *
 * Инструментация: JS задаёт --scene-dash (реальная длина path через
 * getTotalLength()), strokeDasharray и strokeDashoffset на каждом
 * <path>/<line>/<polyline> внутри .sk-scene__svg.
 *
 * При добавлении класса .sk-scene--animated JS сбрасывает dashoffset в 0,
 * CSS-transition рисует линию.
 */
.sk-scene__svg path,
.sk-scene__svg line,
.sk-scene__svg polyline {
    transition: stroke-dashoffset var(--scene-duration, 2s) var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}

/* Варианты скорости (управляют длительностью transition) */
.sk-scene--speed-slow {
    --scene-duration: 3.5s;
}

.sk-scene--speed-medium {
    --scene-duration: 2s;
}

.sk-scene--speed-fast {
    --scene-duration: 1s;
}

/* Accessibility — reduced motion: мгновенный показ */
@media (prefers-reduced-motion: reduce) {
    .sk-scene__svg path,
    .sk-scene__svg line,
    .sk-scene__svg polyline {
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
        transition: none !important;
        transition-delay: 0s !important;
    }
}

/* Hover-подсветка stroke через accent color */
@media (hover: hover) {
    .sk-scene:hover .sk-scene__svg path,
    .sk-scene:hover .sk-scene__svg line,
    .sk-scene:hover .sk-scene__svg polyline {
        stroke: var(--color-accent, currentColor);
        transition-duration: var(--dur-base, 0.3s);
    }
}

/* Focus-visible для обёртки (когда используется как ссылка) */
.sk-scene:focus-visible {
    outline: var(--focus-ring-width, 2px) solid var(--color-accent);
    outline-offset: var(--sp-1, 4px);
}

/* Responsive */
@media (max-width: 768px) {
    .sk-scene {
        padding: var(--sp-6, 48px) 0;
        gap: var(--sp-2, 12px);
    }

    .sk-scene__svg {
        max-width: 360px;
    }

    .sk-scene--birds .sk-scene__svg {
        max-width: 480px;
    }

    .sk-scene__caption {
        font-size: var(--fs-13, 0.8125rem);
    }
}

@media (max-width: 480px) {
    .sk-scene__svg {
        max-width: 280px;
    }

    .sk-scene--birds .sk-scene__svg {
        max-width: 360px;
    }
}