/* =====================================================
   E-Bees: Гибридная архитектура световых желобов
   CSS gradients (GPU) + прозрачный SVG с белыми плашками
   ===================================================== */

/* -------------------------------------------------------
   Цветовые константы — достаточно поменять здесь,
   чтобы переключить тему или обновить брендинг.
   ------------------------------------------------------- */
:root {
    --bg-color:     #ffffff;  /* фон страницы + плашки сот          */
    --brand-color:  #FF5722;  /* цвет текста домена в центре холста  */
    --btn-bg:       rgba(0, 0, 0, 0.06);
    --btn-bg-hover: rgba(0, 0, 0, 0.12);
    --btn-color:    var(--brand-color);
    --accent-color: #FF5722; /*#E91E63;*/ /*#C0CA33;*/
    --bee-bg-light: radial-gradient(
            circle closest-side,
            rgb(255, 255, 255)      0%,
            rgba(255, 255, 255, 0) 100%
    );
    --bee-bg-dark: radial-gradient(
            circle closest-side,
            rgb(62 79 116) 0%,
            rgb(62 79 116 / 0) 100%
    );
    --tooltip-bg: rgba(0, 0, 0, 0.8);
    --tooltip-color: #fff;
}

[data-theme="light"] {
    --bg-color:     #cdd6db;
    --brand-color:  var(--accent-color);
    --btn-color:  #242C44;
    --btn-bg:       rgba(0, 0, 0, 0.06);
    --btn-bg-hover: rgba(0, 0, 0, 0.12);
    .bee-light {
        background: var(--bee-bg-light);
    }
}
[data-theme="dark"] {
    --bg-color:     #292e34;
    --brand-color:  #18181b;
    --btn-bg:       rgba(255, 255, 255, 0.08);
    --btn-bg-hover: rgba(255, 255, 255, 0.15);
    --btn-color:    var(--accent-color);
    --tooltip-bg: rgba(255, 255, 255, 0.9);
    --tooltip-color: #000;
    .bee-light {
        background: var(--bee-bg-dark);
    }
}
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    background: var(--bg-color);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    transition: background 0.35s ease;
}

/* Холст симуляции */
.simulation-container {
    position: relative;
    width: 410px;
    height: 410px;
}

/* -------------------------------------------------------
   Слой 0: CSS градиентные пятна под пчёлами
   Двигаются через transform — нет reflow, чистый GPU
   ------------------------------------------------------- */
.lights-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 12px;
}

.bee-light {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 50%;
    /*
        rgba(80,80,80,0) вместо transparent:
        transparent = rgba(0,0,0,0) → браузер интерполирует через чёрный.
        rgba с теми же RGB-каналами = плавный честный фейд в белый фон.
    */
    background: radial-gradient(
        circle closest-side,
        rgb(255, 87, 34)      0%,
        rgba(255, 87, 34, 0) 100%
    );
    will-change: transform, opacity;
    pointer-events: none;
}

/* -------------------------------------------------------
   Слой 0: плашки сот — цвет через переменную,
   чтобы совпадал с фоном и давал эффект «невидимых» стенок
   ------------------------------------------------------- */
#honeycomb-grid polygon {
    fill: var(--bg-color);
    stroke: var(--bg-color);
    stroke-width: 2.8px;
    stroke-linejoin: round;
    transition: fill 0.35s ease, stroke 0.35s ease;
}

/* -------------------------------------------------------
   Слой 1: SVG сот (прозрачный фон, белые плашки)
   Щели между плашками = прозрачный SVG → свет проходит
   ------------------------------------------------------- */
#honeycomb-svg {
    position: absolute;
    inset: 0;
    display: block;
}

/* -------------------------------------------------------
   Слой 1: брендовый текст (над сотами, под пчёлами)
   ------------------------------------------------------- */
#brand-svg {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
}

/* Цвет текста домена через переменную */
#brand-svg text {
    fill: var(--brand-color);
    transition: fill 0.35s ease;
}

/* -------------------------------------------------------
   Кнопка переключения темы
   ------------------------------------------------------- */
#theme-toggle {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    font-size: 17px;
    line-height: 1;
    background: var(--btn-bg);
    color: var(--btn-color);
    transition: background 0.25s, transform 0.15s, color 0.35s;
    display: flex;
    align-items: center;
    justify-content: center;
}

#theme-toggle:hover {
    background: var(--btn-bg-hover);
    transform: scale(1.12);
}

/* Управление иконками темы: в светлой показываем луну, в тёмной — солнце */
:root[data-theme="light"] .icon-sun,
:root:not([data-theme="dark"]) .icon-sun {
    display: none;
}
:root[data-theme="dark"] .icon-moon {
    display: none;
}


/* -------------------------------------------------------
   Слой 2: SVG пчёл
   ------------------------------------------------------- */
#bees-svg {
    position: absolute;
    inset: 0;
    display: block;
    user-select: none;
}

/* -------------------------------------------------------
   Анимация лапок — триподный аллюр
   Две группы качаются в противофазе вокруг центра тела (0,0).
   Скорость задаётся через --leg-dur один раз при создании пчелы.
   Никакого JS на кадр — только CSS compositor.
   ------------------------------------------------------- */
@keyframes leg-swing-a {
    0%, 100% { transform: rotate(-6deg); }
    50%       { transform: rotate( 6deg); }
}

@keyframes leg-swing-b {
    0%, 100% { transform: rotate( 6deg); }
    50%       { transform: rotate(-6deg); }
}

.leg-group-a,
.leg-group-b {
    transform-origin: 0px 0px; /* центр тела пчелы в локальных координатах */
    transform-box: fill-box;
}

.leg-group-a {
    animation: leg-swing-a var(--leg-dur, 0.38s) ease-in-out infinite;
}

.leg-group-b {
    animation: leg-swing-b var(--leg-dur, 0.38s) ease-in-out infinite;
}

/* Пчела на паузе — лапки замирают */
.bee-paused .leg-group-a,
.bee-paused .leg-group-b {
    animation-play-state: paused;
}

/* --- Крылышки и Вентилирование --- */
.wing-group-a {
    transform: translate(-2px, -4px) rotate(15deg);
    transform-origin: -3px -3px; /* центр эллипса крыла */
}
.wing-group-b {
    transform: translate(-2px, 4px) rotate(-15deg);
    transform-origin: -3px 3px;
}

@keyframes wing-buzz-a {
    0%, 100% { transform: translate(-2px, -4px) rotate(15deg); }
    50%      { transform: translate(-2px, -4px) rotate(45deg); }
}
@keyframes wing-buzz-b {
    0%, 100% { transform: translate(-2px, 4px) rotate(-15deg); }
    50%      { transform: translate(-2px, 4px) rotate(-45deg); }
}

/* При вентилировании (fanning) крылышки машут очень быстро */
.bee-fanning .wing-group-a {
    animation: wing-buzz-a 0.03s linear infinite;
}
.bee-fanning .wing-group-b {
    animation: wing-buzz-b 0.03s linear infinite;
}

/* --- Тултипы --- */
.bee-tooltip {
    position: absolute;
    background: var(--tooltip-bg);
    color: var(--tooltip-color);
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    white-space: nowrap;
    z-index: 100;
    user-select: none;
}
.bee-tooltip.show {
    opacity: 1;
    transform: translate(-50%, -120%);
}