/* Animation only: layout, crop and image proportions belong to their components. */
:root{--motion-ease:cubic-bezier(.16,1,.3,1)}
.button,.photo-card,.path-card,.section-nav button,.filter,.option,.hero-seal,.nav-community a{transition:background .3s,border-color .3s,box-shadow .4s,transform .45s var(--motion-ease)}
.button .arrow,.text-link span,.quiz-row>.arrow,.scroll-invite span,.photo-zoom{transition:transform .45s var(--motion-ease)}
.button:hover .arrow,.text-link:hover span,.quiz-row:hover>.arrow{transform:translate(3px,-3px)}
.button.dark:hover{background:#35513e}.button.gold:hover{background:#e5cda3;box-shadow:0 8px 25px #0002}
.path-card:hover{background:#eceee5;border-color:#a3b39b}.quiz-row{transition:background .3s}.quiz-row:hover{background:#e9ece140}.option:hover{border-color:#72916b}
.route-enter{animation:page-cinematic .6s var(--motion-ease)}
.hero-title-line{animation:title-arrive 1.15s var(--motion-ease) both}
.hero-title-line:nth-child(2){animation-delay:.13s}
.hero-copy .hero-name{animation:soft-arrive .95s .2s var(--motion-ease) both}
.hero-copy .hero-lede{animation:soft-arrive .95s .32s var(--motion-ease) both}
.hero-copy .actions{animation:soft-arrive .95s .44s var(--motion-ease) both}
.hero-photo{animation:portrait-arrive 1.35s .12s var(--motion-ease) both}
.hero-seal{animation:soft-arrive 1s .42s var(--motion-ease) both}
.hero-photo button{position:relative}
.hero-photo button:after{content:'Рассмотреть ↗';position:absolute;left:12px;right:12px;bottom:12px;padding:12px;background:#18221fe8;color:#f6f3ed;font-size:11px;letter-spacing:.08em;opacity:0;transform:translateY(7px);transition:opacity .3s,transform .4s var(--motion-ease);pointer-events:none}
.hero-photo button:hover:after,.hero-photo button:focus-visible:after{opacity:1;transform:none}
.hero-atmosphere>img{will-change:transform}
.main-nav.open{animation:soft-arrive .4s var(--motion-ease)}
.lightbox[open],.article-reader[open]{animation:dialog-arrive .48s var(--motion-ease)}
.lightbox[open]::backdrop,.article-reader[open]::backdrop{animation:backdrop-arrive .35s ease}
.review .correct-answer{animation:soft-arrive .7s var(--motion-ease)}
@media(hover:hover) and (pointer:fine){
 .photo-card:hover,.path-card:hover{transform:translateY(-4px);box-shadow:0 14px 34px #253d2a12}
 .photo-card:hover .photo-zoom{transform:rotate(45deg)}
 .hero-seal:hover{transform:translateY(-3px)}
 .filter:hover{transform:translateY(-2px)}
 .scroll-invite:hover span{display:inline-block;transform:translateY(4px)}
 .nav-primary a:before{content:'';position:absolute;left:0;right:0;bottom:3px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--motion-ease)}
 .nav-primary a:hover:before{transform:scaleX(1);transform-origin:left}
}
@keyframes title-arrive{from{opacity:0;clip-path:inset(100% -12% -20%);transform:translateY(32px)}to{opacity:1;clip-path:inset(-12%);transform:none}}
@keyframes soft-arrive{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes portrait-arrive{from{opacity:0;clip-path:inset(100% 0 0);transform:translateY(24px)}to{opacity:1;clip-path:inset(-10%);transform:none}}
@keyframes page-cinematic{from{opacity:.25;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes dialog-arrive{from{opacity:0;transform:translateY(18px) scale(.975)}to{opacity:1;transform:none}}
@keyframes backdrop-arrive{from{opacity:0}to{opacity:1}}
.motion-off{scroll-behavior:auto}.motion-off *,.motion-off *:before,.motion-off *:after{animation:none!important;transition:none!important}.motion-off .photo-card:hover,.motion-off .path-card:hover,.motion-off .hero-seal:hover,.motion-off .filter:hover{transform:none}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.photo-card:hover,.path-card:hover,.hero-seal:hover,.filter:hover{transform:none}}
