/* =====================================================================
   Waykeeper · Живые фото · общий слой (00-alive.md, приёмы A–D; образец в site-v1-dev/_alive-demo.html)
   Подключение: <link rel="stylesheet" href="assets/alive.css"> сразу после <style> страницы
   (правила страницы с теми же классами идут раньше и выигрывают только точностью селектора)
   и <script src="assets/alive.js"></script> в конце <body>.
   Фото лежат под полем (z-index:-2), над атмосферой (-3). Атмосфера даёт свет и зерно, фото — жизнь:
   кадры яркие, без фильтров; зерно атмосферы кладётся и поверх фото (--alive-grain из alive.js).
   ===================================================================== */
@property --reveal{syntax:'<percentage>'; inherits:false; initial-value:0%}
@property --dot{syntax:'<length>'; inherits:false; initial-value:0px}
:root{--alive-ease:cubic-bezier(.16,1,.3,1); --alive-slow:cubic-bezier(.33,0,.15,1)}
.alive-deep img,.alive-dots img,.alive-band img,.alive-past img,.alive-strip img{display:block; width:100%; height:100%; object-fit:cover; max-width:none}
/* зерно поверх фото — то же, что у атмосферы */
.alive-deep::after,.alive-band::after,.alive-past::after,.alive-strip::after,.alive-dots::after{content:""; position:absolute; inset:0; pointer-events:none;
  background-image:var(--alive-grain, none); background-size:240px 240px; opacity:.9}

/* A · фото в глубине первого экрана раскрывается мягким эллипсом, потом медленно приближается (один раз) */
.alive-deep{position:absolute; z-index:-2; top:0; right:0; bottom:0; width:min(52vw, 840px); pointer-events:none; overflow:hidden;
  -webkit-mask-image:radial-gradient(farthest-side at var(--alive-at, 66% 40%), #000 calc(var(--reveal) * .45), transparent var(--reveal)), var(--alive-v, linear-gradient(180deg, #000 55%, transparent 96%));
  -webkit-mask-composite:source-in;
          mask-image:radial-gradient(farthest-side at var(--alive-at, 66% 40%), #000 calc(var(--reveal) * .45), transparent var(--reveal)), var(--alive-v, linear-gradient(180deg, #000 55%, transparent 96%));
          mask-composite:intersect;
  animation:alive-reveal 3.2s var(--alive-ease) .3s forwards}
@keyframes alive-reveal{to{--reveal:100%}}
.alive-deep img{transform:scale(1.07); animation:alive-kb 32s var(--alive-slow) .25s forwards}
.alive-deep.is-off img{animation-play-state:paused}
@keyframes alive-kb{to{transform:scale(1)}}
/* метка «места силы»: кольцо и волосяная линия, без подписи; одна на страницу */
.alive-mark{position:absolute; z-index:0; width:0; height:0; pointer-events:none}
.alive-mark i{position:absolute; display:block}
.alive-mark .ring{width:14px; height:14px; left:-7px; top:-7px; border:1px solid rgba(15,23,34,.55); border-radius:50%; opacity:0; animation:alive-in .8s var(--alive-ease) 2.4s forwards}
.alive-mark .hair{left:9px; top:0; width:var(--mw, 120px); height:1px; background:rgba(15,23,34,.32); transform-origin:0 50%; transform:scaleX(0); animation:alive-draw 1.4s var(--alive-ease) 2.7s forwards}
.alive-mark .end{left:calc(var(--mw, 120px) + 9px); top:-2px; width:5px; height:5px; border-radius:50%; background:rgba(15,23,34,.45); opacity:0; animation:alive-in .6s var(--alive-ease) 3.9s forwards}
@keyframes alive-draw{to{transform:scaleX(1)}}
@keyframes alive-in{to{opacity:1}}

/* B · фото проступает из точек того же шага, что поле (9 px), один раз */
.alive-dots{position:relative; margin:0; overflow:hidden; border-radius:var(--r-m); --dot:0px;
  -webkit-mask-image:radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + .6px)); mask-image:radial-gradient(circle, #000 var(--dot), transparent calc(var(--dot) + .6px));
  -webkit-mask-size:9px 9px; mask-size:9px 9px; transition:--dot 2.2s var(--alive-slow)}
.alive-dots.is-in{--dot:7px}
.alive-dots.is-done{-webkit-mask-image:none; mask-image:none}
.alive-dots img{transform:scale(1.04); transition:transform 6s var(--alive-slow)}
.alive-dots.is-in img{transform:scale(1)}

/* C · двойная экспозиция «комната — дорога», белая линия горизонта; стекло поверх */
.alive-band{position:relative; height:min(78vh, 720px); overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0, #000 14%, #000 82%, transparent 100%)}
.alive-band .layer{position:absolute; inset:0; overflow:hidden}
.alive-band .room{filter:brightness(1.06)}
.alive-band .room img{object-position:50% 60%; transform:translate3d(0, var(--py, 0px), 0) scale(1.08)}
.alive-band .road{mix-blend-mode:multiply; opacity:var(--mix, .2)}
.alive-band .road img{object-position:50% 55%}
.alive-line{position:absolute; left:0; right:0; top:58%; height:1px; background:rgba(255,255,255,.95); transform-origin:0 50%; transform:scaleX(var(--line, 0)); box-shadow:0 0 12px rgba(255,255,255,.7)}

/* D · прошлое насыщено, будущее белое: фото тает вправо, дальше — белое и тёплая точка «ты здесь» */
.alive-past{position:absolute; z-index:-2; left:0; top:0; bottom:0; width:72%; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg, #000 30%, transparent 92%), linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, #000 30%, transparent 92%), linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent); mask-composite:intersect}
.alive-you{position:absolute; width:9px; height:9px; margin:-4.5px 0 0 -4.5px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 6px rgba(234,95,34,.12); animation:alive-breathe 6s ease-in-out infinite; pointer-events:none}
@keyframes alive-breathe{50%{box-shadow:0 0 0 11px rgba(234,95,34,.05)}}
.alive-you.is-off{animation-play-state:paused}   /* дышит, только пока на экране */

/* узкая полоса-фото без анимации */
.alive-strip{position:relative; overflow:hidden; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent); mask-image:linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent)}

/* метка на вершине — только на широком экране: уже 1100 px она выходит за край окна */
@media (max-width:1100px){ .alive-mark{display:none} }
@media (max-width:760px){
  .alive-deep{width:100%}
  .alive-band{height:420px}
  .alive-line{display:none}
}
/* секции с линией атмосферы: линия ложится посередине воздуха между блоками, а не впритык к тексту */
.alive-rule{margin-top:calc(var(--section) * .5); padding-top:calc(var(--section) * .5)}
/* меньше движения: сразу итог */
@media (prefers-reduced-motion: reduce){
  .alive-deep{animation:none; --reveal:100%}
  .alive-deep img{animation:none; transform:none}
  .alive-mark .ring,.alive-mark .hair,.alive-mark .end{animation:none; opacity:1; transform:none}
  .alive-dots{transition:none; -webkit-mask-image:none; mask-image:none}
  .alive-dots img{transition:none; transform:none}
  .alive-you{animation:none}
}