/* Модул: сцената "Следата" (.channel-scene-*) - реална снимка + SVG следи
   отгоре, по модела на вратата (cave-photo). Винаги нощ - бърлогата няма
   дневен вариант. Само съществуващи токени. */

/* По-широка от .channel-page (700px, тесен wizard текст) - сцената използва
   пълната ширина на модула, както .work-page/.channel-admin (1100px). */
.channel-scene-section {
    max-width: 1100px;
    margin: 0 auto;
    padding: var(--space-7) var(--space-4) 0;
}

.channel-scene-wrap {
    position: relative;
    width: 100%;
    margin: 0 auto;
    /* Контейнерът държи ТОЧНОТО съотношение на снимката - никога object-fit:
       cover/crop, за да не се реже входът на бърлогата на никоя ширина. */
    aspect-ratio: 1536 / 1024;
    /* max-height само като предпазна мярка за екстремно ниски екрани - не
       бива да бори се с width:100%, иначе aspect-ratio смалява ширината
       обратно (точно това правеше 55vh преди - сцената излизаше ~700px
       вместо пълните 1100px на контейнера). */
    max-height: 85vh;
    overflow: hidden;
    border-radius: var(--radius-md);
}
@media (max-width: 640px) {
    .channel-scene-wrap { aspect-ratio: 941 / 1672; max-height: 80vh; }
}

.channel-scene-photo {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: center;
}

/* лек тъмен слой над снега, по-плътен към долния ръб (където започва
   формата) - без него снегът е прекалено светъл до тъмния интерфейс */
.channel-scene-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        transparent 75%,
        color-mix(in srgb, var(--color-bg) 55%, transparent) 100%);
    pointer-events: none;
    z-index: 1;
}

/* отблясъкът - по формата на устието (по-широко, отколкото високо, леко
   приплеснато), не кръгла точка. Силно размазан ръб, слаб интензитет - топло
   петно, разляно по снега пред входа, не прожектор. */
.channel-scene-glow {
    position: absolute;
    width: 16%;
    aspect-ratio: 1.6;
    transform: translate(-50%, -45%);
    border-radius: 50% 50% 45% 45% / 60% 60% 40% 40%;
    background: radial-gradient(ellipse, color-mix(in srgb, var(--color-accent) 70%, transparent) 0%, transparent 75%);
    filter: blur(6px);
    opacity: .28;
    pointer-events: none;
    z-index: 2;
    transition: opacity var(--transition-slow);
}
.channel-scene-glow.is-bright { opacity: .55; }

.channel-scene-tracks {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
}

/* desktop/mobile имат различни координати (снимките са различни) - показва
   се само вариантът, отговарящ на <picture>-а горе (същия breakpoint). JS-ът
   обновява и двата едновременно (само видимия реално се вижда). */
.channel-scene-variant--mobile { display: none; }
@media (max-width: 640px) {
    .channel-scene-variant--desktop { display: none; }
    .channel-scene-variant--mobile { display: block; }
}

/* --- следа: вълча, не котешка - триделна (трилобна) възглавничка, по-дълга
   отколкото широка, 4 пръста с нокти. Полупрозрачно хлътване в снега - тъмна
   сянка отвътре, светъл ръб (тънък highlight stroke, лунна светлина). --- */
.channel-track-print {
    opacity: 0;
    transition: opacity .3s var(--ease-standard);
}
.channel-track-print.is-shown { opacity: .9; }
.channel-track-print.is-printing { animation: channel-print-stamp .6s var(--ease-standard) forwards; }
@keyframes channel-print-stamp {
    0% { opacity: 0; filter: brightness(1.6); }
    55% { opacity: .95; }
    100% { opacity: .85; filter: brightness(1); }
}
@media (prefers-reduced-motion: reduce) {
    .channel-track-print { transition: none; }
    .channel-track-print.is-printing { animation: none; opacity: .85; }
}

/* вдлъбнатина, не печат - синкава сянка откъм сенчестата страна (далеч от
   луната, горе-вляво в кадъра), светъл ръб откъм луната. fill/filter идват
   от родителския <g> (inline style - desktop/mobile имат отделни defs ID-та,
   за да не се сблъскат в един DOM), тук само наследяват; filter на цялата
   група (не на всяка форма) - размазва композита като едно цяло, без шевове
   между възглавничка/пръсти. */
.channel-track-print .print-pad,
.channel-track-print .print-toe {
    fill: inherit;
}
.channel-track-print .print-claw { fill: rgba(10, 14, 28, .5); }

.channel-final { text-align: center; margin-top: var(--space-6); }
.channel-final-refrain {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: var(--text-2xl);
    line-height: 1.3;
    color: var(--color-accent);
    text-shadow: var(--shadow-glow);
    margin: 0 0 var(--space-5);
}
.channel-final-opened {
    font-family: var(--font-heading);
    font-weight: var(--font-heading-weight);
    font-size: var(--text-xl);
    color: var(--color-text);
    margin: 0 0 var(--space-2);
}
.channel-final-ref {
    font-family: var(--font-mono);
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    margin: 0;
}