/*
 * «Свеча»: тёмный раздел с живым пламенем (js/candle.js) и огонёк в шапке сайта.
 * Основа — css/style.css (шрифты, кнопки, цвета).
 */

/* ── Огонёк в шапке, пока свеча горит ───────────────────────────────────── */

.candle-mini {
    position: relative; display: inline-block; width: 40px; height: 40px; flex: none;
    border-radius: 12px; transition: background-color .2s;
}
.candle-mini:hover { background: var(--accent-soft); }
.candle-mini[hidden] { display: none; }
.cm-stick {
    position: absolute; left: 50%; bottom: 8px; width: 6px; height: 14px; transform: translateX(-50%);
    border-radius: 2px 2px 1px 1px; background: linear-gradient(90deg, #d8c7a0, #fff4d6 45%, #c9b58b);
    box-shadow: 0 1px 0 rgba(0, 0, 0, .25);
}
.cm-flame {
    position: absolute; left: 50%; bottom: 21px; width: 9px; height: 15px; margin-left: -4.5px;
    border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(ellipse at 50% 78%, #fff6c9 0%, #ffc34d 38%, #ff8a1f 70%, rgba(255, 90, 20, 0) 100%);
    box-shadow: 0 0 9px 3px rgba(255, 170, 60, .7), 0 0 22px 8px rgba(255, 140, 40, .35);
    transform-origin: 50% 92%; animation: cmFlick 1.3s ease-in-out infinite alternate;
}
@keyframes cmFlick {
    0% { transform: rotate(-4deg) scale(1, 1); }
    35% { transform: rotate(3deg) scale(.94, 1.06); }
    70% { transform: rotate(-2deg) scale(1.04, .96); }
    100% { transform: rotate(4deg) scale(.97, 1.04); }
}

/* Подсказка под кнопками на первом экране */
.hero-candle {
    display: inline-flex; align-items: center; gap: 10px; margin-top: 16px;
    font-size: .92rem; font-weight: 500; color: var(--ink-2);
    transition: color .2s;
}
.hero-candle:hover { color: var(--ink); }
.hero-candle:hover .hc-text { text-decoration: underline; text-underline-offset: 4px; }
.hc-flame {
    position: relative; width: 8px; height: 13px; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
    background: radial-gradient(ellipse at 50% 78%, #fff6c9 0%, #ffc34d 40%, #ff8a1f 75%, rgba(255, 90, 20, 0) 100%);
    box-shadow: 0 0 8px 2px rgba(255, 170, 60, .6); transform-origin: 50% 92%;
    animation: cmFlick 1.4s ease-in-out infinite alternate;
}

/* ── Раздел «Свеча» ─────────────────────────────────────────────────────── */

.candle-sec {
    position: relative; isolation: isolate; overflow: hidden;
    padding: clamp(56px, 9vw, 112px) 0; color: #efe9db; background: #080a15;
    border-block: 1px solid rgba(239, 233, 219, .1);
    --cd-glow: 0; --fx: 70%; --fy: 50%;
}
.candle-bg {
    position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(60% 75% at var(--fx) var(--fy), rgb(255 160 60 / calc(var(--cd-glow) * .27)), transparent 72%),
        radial-gradient(90% 80% at 15% 0%, rgba(80, 70, 150, .24), transparent 70%),
        linear-gradient(180deg, #0b0e1d, #070913);
}
.candle-bg::after {
    content: ""; position: absolute; inset: 0; opacity: calc(.55 + var(--cd-glow) * .45);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 420' fill='none' stroke='%23e3be6c' stroke-opacity='.15' stroke-width='1.4'%3E%3Cpath d='M40 420V190a110 110 0 0 1 220 0V420M70 420V195a80 80 0 0 1 160 0V420'/%3E%3Cpath d='M250 420V150a110 110 0 0 1 220 0V420M280 420V155a80 80 0 0 1 160 0V420'/%3E%3Cpath d='M460 420V190a110 110 0 0 1 220 0V420M490 420V195a80 80 0 0 1 160 0V420'/%3E%3C/svg%3E")
        center bottom / min(1180px, 135%) auto no-repeat;
    -webkit-mask-image: radial-gradient(70% 90% at var(--fx) var(--fy), #000 20%, rgba(0, 0, 0, .35) 80%);
    mask-image: radial-gradient(70% 90% at var(--fx) var(--fy), #000 20%, rgba(0, 0, 0, .35) 80%);
}

.candle-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
    gap: clamp(28px, 6vw, 80px); align-items: center;
}

.candle-sec .eyebrow { color: #e3be6c; }
.candle-sec .section-title { color: #f6efdf; }
.candle-lead { margin-top: 14px; max-width: 34rem; color: rgba(239, 233, 219, .78); }

.candle-intents { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.candle-intents button {
    padding: 9px 16px; border: 1px solid rgba(239, 233, 219, .2); border-radius: 999px;
    background: rgba(255, 255, 255, .04); color: inherit; font-weight: 500; font-size: .9rem;
    transition: background-color .2s, border-color .2s, color .2s;
}
.candle-intents button:hover { border-color: rgba(227, 190, 108, .6); }
.candle-intents button.is-on { border-color: #e3be6c; background: rgba(227, 190, 108, .16); color: #f6dc9a; }

.candle-name { display: block; margin-top: 14px; max-width: 26rem; }
.candle-name input {
    width: 100%; min-height: 46px; padding: 0 16px; border-radius: 14px;
    border: 1px solid rgba(239, 233, 219, .22); background: rgba(255, 255, 255, .05); color: #f6efdf;
    transition: border-color .2s, box-shadow .2s;
}
.candle-name input::placeholder { color: rgba(239, 233, 219, .45); }
.candle-name input:focus { outline: none; border-color: #e3be6c; box-shadow: 0 0 0 3px rgba(227, 190, 108, .22); }

.candle-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 20px; }
.candle-sec .btn-primary { background: linear-gradient(135deg, #f3c95a, #e39d2c); color: #241707; box-shadow: 0 10px 30px -10px rgba(240, 193, 75, .75); }
.candle-sec .btn-ghost { border-color: rgba(239, 233, 219, .32); color: #efe9db; }
.candle-sec .btn-ghost:hover { background: rgba(255, 255, 255, .07); }
.candle-sec .icon-btn { color: rgba(239, 233, 219, .8); border-color: rgba(239, 233, 219, .2); }
.candle-sec .icon-btn:hover { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(239, 233, 219, .35); }
.candle-sec .icon-btn .snd-off { display: none; }
.candle-sec .icon-btn.is-off .snd-on { display: none; }
.candle-sec .icon-btn.is-off .snd-off { display: block; }

.candle-status { margin-top: 18px; min-height: 1.6em; font-weight: 600; color: #f6dc9a; }
.candle-note { margin-top: 8px; max-width: 34rem; font-size: .85rem; color: rgba(239, 233, 219, .55); }

.candle-stage { position: relative; width: 100%; max-width: 380px; margin-inline: auto; padding-bottom: 40px; }
.candle-stage canvas { display: block; width: 100%; height: auto; }
.candle-hit {
    position: absolute; left: 14%; right: 14%; top: 6%; bottom: 48px;
    border: 0; border-radius: 48px; background: transparent; cursor: pointer;
}
.candle-hit:focus-visible { outline: 2px solid #e3be6c; outline-offset: 2px; }
.candle-hint {
    position: absolute; left: 50%; top: 14%; transform: translateX(-50%); padding: 7px 16px; border-radius: 999px;
    border: 1px solid rgba(227, 190, 108, .45); background: rgba(10, 12, 26, .6); color: #f6dc9a;
    font-size: .84rem; font-weight: 500; white-space: nowrap; pointer-events: none;
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    animation: candleHint 2.4s ease-in-out infinite; transition: opacity .5s;
}
.candle-hint.is-hidden { opacity: 0; animation: none; }
@keyframes candleHint { 50% { transform: translateX(-50%) translateY(-5px); border-color: rgba(227, 190, 108, .9); } }
.candle-caption {
    position: absolute; left: 50%; bottom: 4px; width: 100%; transform: translateX(-50%); padding: 0 8px; text-align: center;
    font-family: var(--font-display); font-style: italic; font-size: 1.25rem; line-height: 1.2; color: #f6dc9a;
    text-shadow: 0 0 18px rgba(255, 170, 60, .5); opacity: 0; pointer-events: none; transition: opacity 1.2s .4s;
}
.candle-caption.is-on { opacity: 1; }

@media (max-width: 860px) {
    .candle-grid { grid-template-columns: minmax(0, 1fr); }
    .candle-stage { order: -1; max-width: 320px; }
}

@media (prefers-reduced-motion: reduce) {
    .cm-flame, .hc-flame, .candle-hint { animation: none; }
}

@media print {
    .candle-sec, .candle-mini, .hero-candle { display: none !important; }
}