/* Вратата - hero секция на началната страница. Намира се само тук, не е core компонент. */

/* Прозрачна навигация над сцената - само на тази страница (.site-header е
   споделен компонент, НЕ се пипа глобално; тук само override през scoped
   селектор, важи само когато в main има .door-hero). Плътна кремава лента
   върху снимка на планина изглеждаше залепена отгоре - стъкло вместо кутия. */
/* 30% опушено стъкло се оказа само лек тинт - над светло небе текстът
   (светъл, за тъмно стъкло) потъваше (измерено на реален скрийншот, не
   изчислено). 85% - истински тъмен фон на стъклото, винаги, независимо какво
   има зад него в снимката. */
.site-header:has(+ main .door-hero) {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 3;
  background: color-mix(in srgb, var(--color-bg) 85%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-border) 60%, transparent);
}
/* На тесен екран навигацията се пренася на 4-6 реда - плаваща стъклена лента
   щеше да покрие шепота/заглавието под себе си. Там остава в нормалния flow,
   плътна - .door-content просто започва под нея, както преди. */
@media (max-width: 700px), (orientation: portrait) {
  .site-header:has(+ main .door-hero) {
    position: static;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: var(--color-bg);
  }
}

/* 220vh - не 100vh: кинематографичната поредица (приближаване + отваряне на
   вратата) се развива при скрол, за нея трябва физическо разстояние за скрол
   ВЪТРЕ в hero-то, иначе страницата свършва преди вратата да се отвори.
   .cave-stage е sticky и остава закачена за екрана, докато hero-то не se
   изсколи изцяло - тогава естествено продължаваш в машинната зала. */
.door-hero {
  position: relative;
  min-height: 220vh;
  text-align: center;
  --transition-theme: background-color 1.2s ease, color 1.2s ease, border-color 1.2s ease;
}

/* .door-ambient (времето) сега е ДЕТЕ на .cave-stage (виж markup) - заедно с
   нея остава закачена на екрана, вместо да се изскролва с текста. */
.door-ambient {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  transition: background 1.2s ease, opacity 1.2s ease;
}

/* текстът седи в ПЪРВИЯ екран (100vh) и се изскролва нормално, докато
   .cave-stage остава закачена зад него - "прочиташ рефрена, после влизаш".
   Вратата седи някъде около 35%-81% от височината на снимката - шепотът и
   заглавието трябва да останат ясно НАД билото (горе в небето), статус-редът
   и LAN бутонът - долу, малки, в ъглите. Нищо не е центрирано по средата на
   кутията повече - там е самата врата. */
.door-content {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 100vh;
  z-index: 2;
  pointer-events: none; /* децата си връщат pointer-events индивидуално */
}
.door-content-top {
  position: absolute;
  left: 50%; top: calc(var(--space-8) + 3.5rem);
  transform: translateX(-50%);
  width: 100%;
  max-width: 44rem;
  padding: 0 var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-5);
  pointer-events: auto;
}
/* статус-ред долу вляво, звук долу вдясно - малки, далеч от прага на вратата */
.door-content-bottom-left {
  position: absolute;
  left: var(--space-4); bottom: var(--space-4);
  pointer-events: auto;
}
.door-content-bottom-right {
  position: absolute;
  right: var(--space-4); bottom: var(--space-4);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-2);
  pointer-events: auto;
}

/* "Шепот" над вратата - не конкурира нито вратата, нито тежкия отговор отдолу */
.door-whisper {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  max-width: 42rem;
}
.door-whisper-line {
  flex: 1 1 auto;
  min-width: 1.25rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent-dim), transparent);
  opacity: .55;
}
.door-refrain-small {
  font-family: var(--font-mono);
  font-size: clamp(.6rem, 1.3vw, .76rem);
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--color-accent-dim);
  white-space: nowrap;
  margin: 0;
  flex: 0 1 auto;
}
/* денем седи направо върху шарена снимка (небе/било) - без контур измерен
   контраст е 2.21:1 (нощем снимката е достатъчно тъмна, не му трябва) */
body.day .door-refrain-small {
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.8), 1px -1px 0 rgba(0,0,0,.8),
    -1px 1px 0 rgba(0,0,0,.8), 1px 1px 0 rgba(0,0,0,.8);
}
@media (max-width: 640px) {
  .door-whisper-line { display: none; }
  .door-refrain-small {
    white-space: normal;
    text-wrap: balance;
    letter-spacing: .14em;
  }
}

.door-refrain-big {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: clamp(1.6rem, 4.4vw, 2.6rem);
  line-height: 1.25;
  color: var(--color-accent);
  text-shadow: var(--shadow-glow);
  margin: 0;
  transition: var(--transition-theme), text-shadow 1.2s ease;
}
/* Денем кехлибареният текст пада върху шарена снимка (гора/небе/скала) -
   светъл ореол не помагаше (проверено с реален скрийншот: амбър върху горски
   листак мери ~2.75:1, под дори прага за едър текст от 3:1). Тъмен contour
   върху всякакъв фон държи >8:1 - четливо и на светло небе, и на тъмна скала. */
body.day .door-refrain-big {
  text-shadow:
    -1px -1px 0 rgba(0,0,0,.8), 1px -1px 0 rgba(0,0,0,.8),
    -1px 1px 0 rgba(0,0,0,.8), 1px 1px 0 rgba(0,0,0,.8),
    0 3px 12px rgba(0,0,0,.55);
}

/* ---- сцената: реална снимка на пещерно устие (upscale-ната peshtera.png,
   обработена в assets/scene/) - вратата (истински снимки на рамка+крило) е
   вградена в нея, изрязана точно по формата на тъмното устие ----
   Чака се ново ramka.png (пантите на рамката, маха ги Тони) - само смяна на
   файла в /assets/door/, без промяна тук, щом размерите на снимката са същите. */
/* sticky, не absolute - остава закачена за горния ръб на viewport-а, докато
   високото (220vh) .door-hero се изскролва над нея. Така кинематографичната
   поредица (zoom + отваряне на вратата) има физическо разстояние за скрол,
   вместо страницата да свърши преди да е изиграна. */
.cave-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* последната част на кинематографичния вход - светлината (вече изпълнила
   почти целия екран при максимален zoom) се разтапя в тъмния фон на
   следващата секция, "все едно си влязъл вътре". --enter-fade се мести от
   door.js (0 през по-голямата част от скрола, расте до 1 в последните ~28%). */
.cave-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 6;
  background: var(--color-bg);
  opacity: var(--enter-fade, 0);
  pointer-events: none;
}
/* преливане към следващата секция - НА .cave-stage (не на .cave-camera, която
   се мащабира от zoom-а и би отнесла фадето извън екрана при приближаване).
   .cave-stage винаги е точно 100vh, невидимо за transform-а - фадето остава
   закотвено за истинския долен ръб на екрана през цялата кинематографична
   поредица. Без него .cave-stage (sticky) държи снимката запълваща целия
   екран до последния пиксел, после Машинната зала започва рязко. */
.cave-stage::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 12vh;
  background: linear-gradient(180deg, transparent, var(--color-bg) 96%);
  pointer-events: none;
  z-index: 5;
}
/* height:100vh на ВСИЧКИ размери, дори мобилен - снимката е широка (21:9),
   на тесен viewport просто се реже встрани (overflow:hidden на .cave-stage),
   центрирано - композицията е центрирана, устието остава по средата дори
   силно изрязано. width:100% на мобилен (както .door-wrap преди) би дало
   прекалено нисък/тесен кадър без самата врата да се вижда изобщо. */
.cave-camera-outer {
  position: relative;
  height: 100vh;
  width: auto;
  aspect-ratio: 7664 / 3284;         /* естествените пропорции на снимката */
  overflow: hidden;
}
/* .cave-camera мащабира И снимката, И вратата заедно (cinematic zoom при
   скрол) - transform-origin е центърът на устието, измерен от самата снимка
   (виж _reports/ за методиката), затова приближаването изглежда като движение
   към пещерата, не просто zoom на цялата сцена. */
.cave-camera {
  position: relative;
  width: 100%;
  height: 100%;
  transform-origin: 50.14% 57.67%;
  transform: scale(var(--cave-zoom, 1));
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .cave-camera { transform: scale(1.18) !important; will-change: auto; }
  /* нормален скрол - без дългия sticky диапазон, за който няма какво да се
     изиграе тук. hero-то се връща към естествена височина, .cave-stage
     спира да е закачена (вижда се веднъж, после се изскролва нормално). */
  .door-hero { min-height: auto !important; }
  .cave-stage { position: relative !important; }
  .cave-stage::before { display: none !important; }
}
/* Единен filter, съставен от custom properties - няколко CSS правила не могат
   да пишат отделни filter декларации на един елемент (последното просто
   презаписва предходното, не се сливат). --cave-* се местят, filter остава един. */
/* ЕТАП 4.3 - намерен бъг: ден/нощ и мъгла/дъжд/буря пишеха в СЪЩИТЕ
   custom properties (--cave-bright/--cave-sat/--cave-hue) от правила с РАЗЛИЧНА
   специфичност - по-специфичното (.cave-stage:has(...) .cave-photo, 4 класа)
   винаги печелеше над по-малко специфичното (body:not(.day) .cave-photo, 1
   елемент+1 клас), затова дъжд/мъгла/буря винаги ПРЕЗАПИСВАХА нощното
   затъмняване напълно, вместо да се комбинират с него - "нощ + дъжд" излизаше
   също толкова светло, колкото "ден + дъжд". Сега две отделни оси (-daynight/
   -mood), умножени в единния filter - денят/нощта и времето вече се комбинират,
   не се надвикват. Залезът изрично неутрализира -daynight оста (виж по-долу) -
   той е специален преходен момент, не "нощ, но по-светла". */
.cave-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter:
    brightness(calc(var(--cave-bright-daynight, 1) * var(--cave-bright-mood, 1)))
    saturate(calc(var(--cave-sat-daynight, 1) * var(--cave-sat-mood, 1)))
    hue-rotate(calc(var(--cave-hue-daynight, 0deg) + var(--cave-hue-mood, 0deg)))
    sepia(var(--cave-sepia-mood, 0));
  transition: filter 1.2s ease;
}
/* нощем нямаме отделен нощен кадър - затъмняваме/застудяваме реалната снимка,
   процепът на вратата остава единствената топла точка (запазен език от SVG версията) */
body:not(.day) .cave-photo { --cave-bright-daynight: .32; --cave-sat-daynight: .55; --cave-hue-daynight: 4deg; }

/* --- вратата: изрязана точно по формата на тъмното устие на пещерата ---
   .door-wrap вече НЕ е правоъгълна снимка с овална маска - clip-path-ът идва
   от SVG <clipPath clipPathUnits="objectBoundingBox"> с пътека, извлечена от
   самата снимка (flood-fill по тъмния регион, виж _reports/). Кутията на
   .door-wrap е bounding box-ът на тази пътека, в проценти от .cave-camera -
   затова остава пиксел-точна при всякакъв размер на екрана. */
.door-wrap {
  --door-angle: -24deg;              /* открехната по подразбиране, отваря се при скрол */
  --door-glow-intensity: .85;        /* етап 3: ще се задава от реалното натоварване на машините */
  --door-ground-scale: .45;
  position: absolute;
  left: 43.714%; top: 34.667%;
  width: 12.857%; height: 46%;
  clip-path: url(#cave-arch-clip);
  -webkit-clip-path: url(#cave-arch-clip);
  overflow: hidden;
}
.door-perspective {
  position: absolute;
  left: 50%;
  top: 0;
  height: 100%;
  width: auto;
  aspect-ratio: 1122 / 1402;         /* естествените пропорции на рамката - запазва правилните
                                         пропорции на снимката, препълва тясната кутия на устието
                                         встрани, clip-path-ът реже остатъка */
  transform: translateX(-50%);
  perspective: 1100px;
}
.door-frame-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(1) saturate(1);
  transition: filter 1.2s ease;
}
/* нощем рамката и крилото потъмняват, светлината в процепа е по-силна (денем е естествена) */
body:not(.day) .door-frame-img,
body:not(.day) .door-leaf-img { filter: brightness(.36) saturate(.75); }

/* отворът, измерен в реалната снимка на рамката: ляво 27.7%, горе 15.5%, 44.0% x 71.4%
   .door-tunnel - истински тунел в перспектива (SVG - стени, таван, под,
   сходящи към далечна светлина), не плосък правоъгълник. Преди тук имаше
   плоска кехлибарена каша (.door-interior + .door-glow) - заменени изцяло. */
.door-tunnel {
  position: absolute;
  left: 27.7%; top: 15.5%; width: 44%; height: 71.4%;
  opacity: var(--door-glow-intensity);
  /* Етап 3: --pack-heat (0 покой -> 1 пик) идва от hall.js (средното
     натоварване на онлайн машините) и ускорява дишането - пулсът на
     вратата следва пулса на глутницата. Запазеното място от етап 2. */
  animation: door-glow-breathe calc(5s - var(--pack-heat, 0) * 2.5s) ease-in-out infinite;
  transition: opacity 1.4s ease, animation-duration 1.2s ease;
  z-index: 0;
  overflow: hidden;
}
.door-tunnel svg { display: block; width: 100%; height: 100%; }
.door-tunnel-dust circle { animation: door-dust-drift 9s ease-in-out infinite; }
.door-tunnel-dust circle:nth-child(2) { animation-delay: -2s; animation-duration: 11s; }
.door-tunnel-dust circle:nth-child(3) { animation-delay: -4s; animation-duration: 7.5s; }
.door-tunnel-dust circle:nth-child(4) { animation-delay: -1s; animation-duration: 10s; }
.door-tunnel-dust circle:nth-child(5) { animation-delay: -5s; animation-duration: 8.5s; }
.door-tunnel-dust circle:nth-child(6) { animation-delay: -3s; animation-duration: 12s; }
@keyframes door-dust-drift {
  0%, 100% { transform: translateY(0) translateX(0); opacity: .5; }
  50% { transform: translateY(-2px) translateX(.6px); opacity: .85; }
}
@keyframes door-glow-breathe {
  0%, 100% { opacity: calc(var(--door-glow-intensity) * .88); }
  50% { opacity: var(--door-glow-intensity); }
}
@media (prefers-reduced-motion: reduce) {
  .door-tunnel-dust circle { animation: none !important; }
  /* .door-tunnel вече спира анимацията изцяло по-долу (animation: none) -
     --pack-heat просто няма ефект, дишането е статично, не само по-бавно. */
}

.door-leaf {
  position: absolute;
  left: 27.7%; top: 15.5%; width: 44%; height: 71.4%;
  transform-origin: left center;
  transform: rotateY(var(--door-angle));
  transform-style: preserve-3d;
  overflow: hidden;
  box-shadow: 5px 0 20px rgba(0,0,0,.55);
  transition: transform 1.5s cubic-bezier(.65,0,.35,1);
  z-index: 2;
}
.door-leaf-img {
  /* fill, не cover - крилото е ~6% по-широко пропорционално от отвора. cover
     щеше да изреже равно от двата края и да отхапе пантите вляво. fill леко
     разтяга по височина вместо да реже - пантите остават цели. */
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: brightness(1) saturate(1);
  transition: filter 1.2s ease;
}

/* светлината, която пада пред вратата - по прага и камъните. Разширява се с
   отварянето, нощем силна, денем едва доловима (ползва същия --door-glow-intensity). */
.door-ground-glow {
  position: absolute;
  left: 27.7%; width: 44%;
  bottom: 9%; height: 10%;
  background: radial-gradient(60% 100% at 50% 0%, var(--color-accent), transparent 78%);
  opacity: var(--door-glow-intensity);
  filter: blur(7px);
  mix-blend-mode: screen;
  transform-origin: 50% 0%;
  transform: scaleX(var(--door-ground-scale));
  transition: transform 1.4s ease, opacity 1.4s ease;
  z-index: 1;
  pointer-events: none;
}

.door-wrap.state-closed { --door-angle: 0deg; --door-glow-intensity: 0; --door-ground-scale: 0; }
.door-wrap.state-ajar   { --door-angle: -24deg; --door-ground-scale: .45; }
.door-wrap.state-open   { --door-angle: -76deg; --door-ground-scale: 1; }
body:not(.day) .door-wrap.state-ajar,
body:not(.day) .door-wrap.state-open { --door-glow-intensity: 1; }
body.day .door-wrap.state-ajar,
body.day .door-wrap.state-open { --door-glow-intensity: .5; }

@media (prefers-reduced-motion: reduce) {
  /* открехната (не отворена докрай) - статичен кадър, door.js изобщо не
     пипа скрола тук (виж guard-а в JS), класът си остава state-ajar както
     е по подразбиране в markup-а; това само гарантира ъгъла независимо */
  .door-wrap { --door-angle: -24deg !important; --door-ground-scale: .45 !important; }
  .door-leaf { transition: none !important; }
  .door-tunnel, .door-ground-glow { animation: none !important; transition: none !important; }
}

/* .door-credit се премести във footer-а (footer.php, $pageCredit) - вече не
   седи върху прага на вратата. Общият .footer-credit стил е в header.php. */

/* малки, в долния ъгъл - не центрирани над прага както преди */
.door-status-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.door-status-row .live-bar {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-3);
}

.door-sound-btn { font-size: var(--text-xs); padding: var(--space-1) var(--space-2); }

#door-stale-note { opacity: .65; font-size: .92em; }

/* бутон-превключвател за LAN панела - малък, в ъгъла, панелът е затворен по
   подразбиране (viж door.js). Самият панел се появява като плаващо чекмедже
   над бутона, не центриран над вратата. */
.door-debug-toggle {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent);
  color: var(--color-text-muted);
  cursor: pointer;
}
.door-debug-toggle:hover { color: var(--color-accent); }

/* --- общо за CSS слоевете (звезди/мъгла/светкавица) --- */
.door-stars, .door-fog, .door-flash {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1s ease;
}

/* --- дъждовни капки / сняг: canvas, вижте door.js --- */
.door-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}

/* --- ясно: звезди (нощ) / слънчев блясък (ден) ---
   Анимацията на opacity стои САМО зад .state-ясно.is-night - иначе щеше да
   презаписва opacity:0 по подразбиране и звездите да примигват във всяко време. */
.door-stars {
  background-image:
    radial-gradient(1.4px 1.4px at 12% 22%, #fff, transparent 60%),
    radial-gradient(1px 1px at 28% 55%, #fff, transparent 60%),
    radial-gradient(1.6px 1.6px at 44% 15%, #fff, transparent 60%),
    radial-gradient(1px 1px at 58% 68%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 71% 30%, #fff, transparent 60%),
    radial-gradient(1px 1px at 85% 60%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 93% 20%, #fff, transparent 60%);
}
.door-stars::before, .door-stars::after {
  content: '';
  position: absolute;
  inset: 0;
}
.door-stars::before {
  background-image:
    radial-gradient(1px 1px at 20% 80%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 36% 40%, #fff, transparent 60%),
    radial-gradient(1px 1px at 52% 88%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 66% 10%, #fff, transparent 60%),
    radial-gradient(1px 1px at 80% 78%, #fff, transparent 60%),
    radial-gradient(1.5px 1.5px at 96% 48%, #fff, transparent 60%);
  animation-delay: 1.1s;
}
.door-stars::after {
  background-image:
    radial-gradient(1px 1px at 6% 45%, #fff, transparent 60%),
    radial-gradient(1.3px 1.3px at 24% 10%, #fff, transparent 60%),
    radial-gradient(1px 1px at 48% 32%, #fff, transparent 60%),
    radial-gradient(1.2px 1.2px at 63% 90%, #fff, transparent 60%),
    radial-gradient(1px 1px at 77% 42%, #fff, transparent 60%),
    radial-gradient(1.4px 1.4px at 90% 85%, #fff, transparent 60%);
  animation-delay: 2.2s;
}
.door-ambient.state-ясно.is-night .door-stars { opacity: 1; animation: door-twinkle-a 4.5s ease-in-out infinite alternate; }
.door-ambient.state-ясно.is-night .door-stars::before { animation: door-twinkle-b 3.8s ease-in-out infinite alternate; animation-delay: 1.1s; }
.door-ambient.state-ясно.is-night .door-stars::after { animation: door-twinkle-c 5.2s ease-in-out infinite alternate; animation-delay: 2.2s; }
@keyframes door-twinkle-a { from { opacity: .45; } to { opacity: 1; } }
@keyframes door-twinkle-b { from { opacity: .3; } to { opacity: .9; } }
@keyframes door-twinkle-c { from { opacity: .35; } to { opacity: .85; } }

.door-ambient.state-ясно.is-day {
  background: radial-gradient(60% 55% at 50% 15%, color-mix(in srgb, var(--color-accent) 22%, transparent), transparent 70%);
}

/* --- небето денем по времето: door-специфични цветове, не пипат токените ---
   нощем остава тъмно навсякъде - тези правила важат само с .is-day */
.door-ambient.state-дъжд.is-day,
.door-ambient.state-буря.is-day {
  background: linear-gradient(180deg, rgba(118,128,138,.4), transparent 70%);
}
.door-ambient.state-сняг.is-day {
  background: linear-gradient(180deg, rgba(152,186,209,.42), transparent 70%);
}

/* --- мъгла --- */
.door-ambient.state-мъгла .door-fog { opacity: 1; }
.door-fog {
  background-image: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-text-muted) 22%, transparent) 50%, transparent);
  background-size: 200% 100%;
  animation: door-fog-drift 18s linear infinite;
}
@keyframes door-fog-drift { from { background-position: 0% 0; } to { background-position: 200% 0; } }

@media (prefers-reduced-motion: reduce) {
  .door-stars, .door-stars::before, .door-stars::after,
  .door-fog { animation: none !important; }
  .door-flash { animation: none !important; opacity: 0 !important; }
}

/* --- буря: дъждът е на canvas (door-canvas) + светкавица отгоре ---
   Анимацията стои САМО зад .state-буря - иначе щеше да бляска във всяко време. */
.door-flash { background: #fff; }
.door-ambient.state-буря .door-flash {
  opacity: 1;
  animation: door-lightning 7s ease-in-out infinite;
}
@keyframes door-lightning {
  0%, 93%, 100% { opacity: 0; }
  94% { opacity: .5; }
  94.5% { opacity: 0; }
  95% { opacity: .35; }
  96% { opacity: 0; }
}

/* --- Балканът/билата зад пещерата вече са част от реалната снимка
   (.cave-photo), не SVG. Старата 4-пластова SVG версия е архивирана в
   _kit/door-mountains-archive.html (пълен markup+CSS, за справка). --- */

/* кехлибарена светлина по ВЪТРЕШНИТЕ ръбове на скалата в устието, когато
   вратата е открехната/отворена - "отвътре на пещерата идва живот" */
.cave-arch-glow {
  /* същата кутия като .door-wrap (арката), после леко разширена с scale -
     grabs the surrounding rock, не само самата врата */
  position: absolute;
  left: 43.714%; top: 34.667%;
  width: 12.857%; height: 46%;
  transform: scale(1.3);
  background: radial-gradient(60% 65% at 50% 55%, var(--color-accent), transparent 72%);
  opacity: 0;
  filter: blur(10px);
  mix-blend-mode: screen;
  pointer-events: none;
  transition: opacity 1.4s ease;
  z-index: 1;
}
.door-hero:has(.door-wrap.state-ajar) .cave-arch-glow { opacity: .55; }
.door-hero:has(.door-wrap.state-open) .cave-arch-glow { opacity: .9; }
body.day .door-hero:has(.door-wrap.state-ajar) .cave-arch-glow,
body.day .door-hero:has(.door-wrap.state-open) .cave-arch-glow { opacity: .25; }

/* светлината от вратата пада и по реалната пътека пред пещерата - реагира на
   състоянието на крилото през :has(), без JS. Позиционирана спрямо
   .cave-camera (проценти от снимката), не vh - сега снимката носи пътеката. */
.cave-path-light {
  position: absolute;
  left: 50%; top: 80.7%;
  width: 16%; height: 12%;
  transform: translateX(-50%) scaleX(.15);
  transform-origin: 50% 0%;
  background: radial-gradient(60% 100% at 50% 0%, var(--color-accent), transparent 75%);
  opacity: 0;
  filter: blur(14px);
  mix-blend-mode: screen;
  transition: opacity 1.4s ease, transform 1.4s ease;
  z-index: 2;
}
.door-hero:has(.door-wrap.state-ajar) .cave-path-light { opacity: .6; transform: translateX(-50%) scaleX(.55); }
.door-hero:has(.door-wrap.state-open) .cave-path-light { opacity: 1; transform: translateX(-50%) scaleX(1); }
body.day .door-hero:has(.door-wrap.state-ajar) .cave-path-light,
body.day .door-hero:has(.door-wrap.state-open) .cave-path-light { opacity: .22; }

/* залез - топла кехлибарена светлина над сцената, снимката потъмнява леко -
   работи и денем, и по debug override, независимо от валежното състояние.
   Идва СЛЕД нощното правило в източника - при съвпадение (залез точно след
   реалния sunset) печели залезът, не плоското нощно затъмняване.
   .door-ambient вече е ДЕТЕ на .cave-stage (не сестра) - :has() е за
   descendant, без ~. */
.cave-stage:has(.door-ambient.is-golden) .cave-photo {
  /* залезът неутрализира -daynight оста (връща я на 1) - той е топъл, все още
     "дневен" на вид момент, не "нощ, но по-светла"; виж бележката над .cave-photo */
  --cave-bright-daynight: 1; --cave-sat-daynight: 1; --cave-hue-daynight: 0deg;
  --cave-bright-mood: .8; --cave-sat-mood: 1.5; --cave-hue-mood: -10deg; --cave-sepia-mood: .4;
}
.door-ambient.is-golden::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: 0; height: 60vh;
  background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-accent) 50%, transparent) 70%, transparent);
  opacity: .9;
  pointer-events: none;
  transition: opacity 1.4s ease;
  z-index: 1;
}
/* .cave-stage и .door-content СА сестри (виж markup) - тук ~ си е на място */
.cave-stage:has(.door-ambient.is-golden) ~ .door-content .door-refrain-big {
  color: color-mix(in srgb, var(--color-accent) 85%, #ff8a3d 15%);
}
@media (prefers-reduced-motion: reduce) {
  .cave-stage:has(.door-ambient.is-golden) .cave-photo,
  .door-ambient.is-golden::before { transition: none !important; }
}

/* мъгла/дъжд/буря - настроението идва от съществуващите пластове (door-fog,
   door-canvas с капки/сняг, door-flash), не от допълнителен filter върху
   снимката - един filter на .cave-photo стига (виж бележката над .cave-photo) */
.cave-stage:has(.door-ambient.state-мъгла) .cave-photo { --cave-bright-mood: .9; --cave-sat-mood: .8; }
.cave-stage:has(.door-ambient.state-дъжд) .cave-photo,
.cave-stage:has(.door-ambient.state-буря) .cave-photo { --cave-bright-mood: .68; --cave-sat-mood: .72; }

/* --- Мобилна сцена: собствена портретна снимка (peshtera_mobil.png,
   обработена в assets/door/cave-mobile@1x/2x.webp), собствена арка. Текстът
   е горе в небето, REAL лентата и звукът - долу над пътеката; вратата заема
   50%-80.8% от височината на снимката и не се застъпва с нито едното. */
@media (max-width: 700px), (orientation: portrait) {
  .cave-camera { transform-origin: 53.57% 65.39%; }
  .door-wrap {
    left: 31.286%; top: 50.0%;
    width: 44.571%; height: 30.788%;
    clip-path: url(#cave-arch-clip-mobile);
    -webkit-clip-path: url(#cave-arch-clip-mobile);
  }
  .cave-arch-glow {
    left: 31.286%; top: 50.0%;
    width: 44.571%; height: 30.788%;
  }
  .cave-path-light {
    left: 53.57%; top: 80.788%;
    width: 20%; height: 9%;
  }
}

/* --- LAN debug панел (рендерира се само за 192.168.7.0/24) --- */
/* плаващо чекмедже над бутона-превключвател, затворено по подразбиране
   ([hidden] атрибут, виж door.js) - вече не е центрирано над вратата */
.door-debug-panel {
  position: absolute;
  right: 0; bottom: calc(100% + var(--space-2));
  z-index: 4;
  width: max-content;
  max-width: min(26rem, 80vw);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-surface) 92%, transparent);
  backdrop-filter: blur(6px);
}
.door-debug-panel[hidden] { display: none; }
.door-debug-panel .ddp-label {
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.door-debug-panel .ddp-stats {
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-accent);
  margin-top: var(--space-2);
}
/* числата зад фазата на деня (етап 4.3) - сървърен час/изгрев/залез/is_day/
   is_golden/body клас/браузърен час, за диагноза без предположения */
.door-debug-panel .ddp-diag {
  width: 100%;
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
  word-break: break-word;
}