/* ===== v4: buttons (uiverse heavy-warthog-57, blue fill) ===== */
:root{--ease:cubic-bezier(.22,.72,.2,1);--spring:cubic-bezier(.34,1.56,.64,1)}
.button{position:relative;isolation:isolate;overflow:hidden;z-index:1;background:#f9fafb;color:var(--ink);border:2px solid #f9fafb;gap:12px;padding:6px 7px 6px 22px;box-shadow:0 20px 25px -5px #0000001a,0 8px 10px -6px #0000001a;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .4s var(--ease),box-shadow .4s var(--ease),color .5s ease .1s}
.button.dark,.button.blue,.button.white{background:#f9fafb;color:var(--ink)}
.button:before{content:'';position:absolute;z-index:-1;width:100%;aspect-ratio:1;left:-100%;top:50%;translate:0 -50%;border-radius:50%;background:var(--blue);transition:all .7s ease}
.button:hover{color:#f9fafb;transform:translateY(-3px);box-shadow:0 22px 30px -6px #4261ee40,0 8px 10px -6px #0000001a}
.button:hover:before{left:0;scale:1.5}
.button:active{transform:translateY(-1px) scale(.98)}
.btn-ico{width:32px;height:32px;flex-shrink:0;padding:8px;border-radius:50%;border:1px solid #374151;fill:#1f2937;stroke:none;rotate:45deg;transition:rotate .3s linear,background-color .3s linear,border-color .3s linear}
.btn-ico.down{rotate:180deg}
.button:hover .btn-ico{rotate:90deg;background:#f9fafb;border-color:transparent}
.button:hover .btn-ico.down{rotate:180deg}
.header-cta{padding:5px 6px 5px 16px}.header-cta .btn-ico{width:26px;height:26px;padding:6px}
.button.text-link{font-size:12px;gap:14px;padding:6px 7px 6px 20px}
dialog>.button{justify-content:space-between}

/* ===== v4: hearts (uiverse plastic-moth-91) ===== */
.heart-container{--heart-color:rgb(255,91,137);position:absolute;right:12px;top:12px;z-index:3;width:44px;height:44px;transition:.3s;filter:drop-shadow(0 2px 6px #00000040)}
.heart-container:hover{scale:1.15}
.heart-container .checkbox{position:absolute;width:100%;height:100%;opacity:0;z-index:20;cursor:pointer;margin:0}
.heart-container .svg-container{width:100%;height:100%;display:flex;justify-content:center;align-items:center}
.heart-container .svg-outline,.heart-container .svg-filled{fill:var(--heart-color);stroke:none;position:absolute;width:28px;height:28px}
.heart-container .svg-outline{fill:#fff;transition:fill .3s}
.heart-container:hover .svg-outline{fill:var(--heart-color)}
.heart-container .svg-filled{animation:keyframes-svg-filled 1s;display:none}
.heart-container .svg-celebrate{position:absolute;width:76px;height:76px;animation:keyframes-svg-celebrate .5s;animation-fill-mode:forwards;display:none;stroke:var(--heart-color);fill:var(--heart-color);stroke-width:2px}
.heart-container .checkbox:checked~.svg-container .svg-filled,.heart-container .checkbox:checked~.svg-container .svg-celebrate{display:block}
.heart-container .checkbox:focus-visible~.svg-container{outline:3px solid #4660ee;border-radius:50%}
@keyframes keyframes-svg-filled{0%{transform:scale(0)}25%{transform:scale(1.2)}50%{transform:scale(1);filter:brightness(1.5)}}
@keyframes keyframes-svg-celebrate{0%{transform:scale(0)}50%{opacity:1;filter:brightness(1.5)}100%{transform:scale(1.4);opacity:0}}

/* ===== v4: motion ===== */
@keyframes rise{from{opacity:0;translate:0 36px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:blur(0)}}
@keyframes dropIn{from{opacity:0;translate:0 -24px}to{opacity:1;translate:0 0}}
@keyframes floaty{0%,100%{translate:0 0}50%{translate:0 -12px}}
@keyframes floaty2{0%,100%{translate:0 0}50%{translate:6px -9px}}
@keyframes spin{to{rotate:360deg}}
@keyframes wobble{0%,100%{rotate:-4deg}50%{rotate:5deg}}
@keyframes pulse{0%{box-shadow:0 0 0 0 #35aa9966}100%{box-shadow:0 0 0 12px #35aa9900}}
@keyframes breathe{0%,100%{scale:1.04}50%{scale:1.1}}
@keyframes cardIn{from{opacity:0;translate:0 40px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
@keyframes fadeSlide{from{opacity:0;translate:0 10px}to{opacity:1;translate:0 0}}

.header{animation:dropIn .8s var(--ease) both}
.hero-copy>*{animation:rise 1s var(--ease) both}
.hero-copy>:nth-child(1){animation-delay:.1s}.hero-copy>:nth-child(2){animation-delay:.22s}.hero-copy>:nth-child(3){animation-delay:.36s}.hero-copy>:nth-child(4){animation-delay:.5s}
.hero-art{animation:rise 1.1s var(--ease) .25s both}
.hero-side>*{animation:rise 1s var(--ease) both}.hero-side>:nth-child(1){animation-delay:.4s}.hero-side>:nth-child(2){animation-delay:.55s}
.discovery-bar>*{animation:rise .9s var(--ease) both}.discovery-bar>:nth-child(1){animation-delay:.7s}.discovery-bar>:nth-child(2){animation-delay:.78s}.discovery-bar>:nth-child(3){animation-delay:.86s}.discovery-bar>:nth-child(4){animation-delay:.94s}

.js .rv{opacity:0;translate:0 44px;filter:blur(5px);transition:opacity .9s ease var(--d,0s),translate 1s var(--ease) var(--d,0s),filter .9s ease var(--d,0s),transform .5s var(--ease),box-shadow .5s var(--ease),background-color .4s}
.js .rv.in{opacity:1;translate:0 0;filter:none}

.progress-bar{position:fixed;left:0;top:0;height:3px;width:100%;background:linear-gradient(90deg,#4261ee,#6f8cff);transform-origin:0 50%;transform:scaleX(0);z-index:100;pointer-events:none}

.header nav a{position:relative;transition:color .3s}
.header nav a:after{content:'';position:absolute;left:0;right:0;bottom:-5px;height:1.5px;background:var(--blue);transform:scaleX(0);transform-origin:right;transition:transform .4s var(--ease)}
.header nav a:hover:after{transform:scaleX(1);transform-origin:left}
.logo{transition:transform .5s var(--spring)}a:hover>.logo{transform:scale(1.05) rotate(-2deg)}
.kicker i,.month i{animation:pulse 2s ease-out infinite}

/* hero */
.hero-art .compass{transition:translate .7s var(--ease);scale:1.05;animation:breathe 14s ease-in-out infinite;translate:calc(var(--mx,0)*-14px) calc(var(--my,0)*-10px);will-change:translate,scale}
.art-top,.glass-caption{transition:translate .5s var(--ease),background-color .4s}
.glass-caption .capsule-icon{transition:transform .5s var(--spring),background-color .3s,color .3s}
.glass-caption:hover .capsule-icon{transform:rotate(45deg) scale(1.1);background:var(--blue);color:#fff}
.tiny-cross{animation:spin 12s linear infinite}
.art-pagination button{transition:width .5s var(--ease),background-color .3s}.art-pagination button:hover{background:#ffffffd0}
.hero-foot .spark,.discovery-bar svg,.about-line svg{animation:spin 18s linear infinite}
.mini-avatars img{transition:margin .4s var(--ease),transform .4s var(--spring)}
.hero-foot:hover .mini-avatars img{margin-left:2px}.mini-avatars img:hover{transform:translateY(-5px) scale(1.12)}
.people-tile>img{transition:transform 1.1s var(--ease)}
.people-tile:hover>img{transform:scale(1.08)}
.people-tile h3,.people-tile .round{transition:transform .5s var(--ease),background-color .3s,color .3s}
.people-tile:hover h3{transform:translateY(-6px)}
.people-tile .pill{transition:transform .5s var(--ease)}.people-tile:hover .pill{transform:translateX(6px)}
.interest-tile{transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.interest-tile:hover{transform:translateY(-6px);box-shadow:0 22px 40px #2f537413}
.sticker{transition:transform .5s var(--spring),box-shadow .4s;animation:floaty 5s ease-in-out infinite;cursor:default}
.sticker.two{animation-delay:-1.6s}.sticker.three{animation-delay:-3.2s}
.sticker:hover{transform:rotate(0deg) scale(1.12);box-shadow:0 10px 20px #315c4722;z-index:3}
.round{transition:transform .4s var(--spring),background-color .3s,color .3s,box-shadow .3s,border-color .3s}
.discovery-bar>div,.discovery-bar>a{transition:transform .4s var(--ease)}
.discovery-bar>div:hover,.discovery-bar>a:hover{transform:translateY(-4px)}

/* tabs / events */
.tabs button{transition:background-color .35s,color .35s,transform .35s var(--spring)}
.tabs button:not(.active):hover{background:#e8edf2;color:var(--ink);transform:translateY(-2px)}
.event-card{animation:cardIn .8s var(--ease) both;animation-delay:calc(var(--i,0)*.09s)}
.event-image{transition:box-shadow .5s var(--ease),border-radius .5s var(--ease)}
.event-card:hover .event-image{box-shadow:0 24px 40px #2c48671f;border-radius:32px}
.event-image>img{transition:transform .9s var(--ease),filter .6s}
.event-card:hover .event-image>img{transform:scale(1.1) rotate(.6deg);filter:saturate(1.12)}
.event-image .pill{transition:transform .5s var(--ease),background-color .3s}
.event-card:hover .event-image .pill{transform:translateX(5px)}
.event-card h3{transition:color .3s,transform .5s var(--ease)}
.event-card:hover h3{color:var(--blue);transform:translateX(4px)}
.event-date{transition:transform .5s var(--ease)}.event-card:hover .event-date{transform:translateX(4px)}
.rail-line i{transition:width .6s var(--ease)}

/* directions */
.direction{transition:flex .7s var(--ease),transform .4s var(--ease),box-shadow .4s}
.direction:hover{box-shadow:0 20px 40px #1c3e5326}
.direction>img{transition:transform .9s var(--ease),filter .6s}
.direction:hover>img{transform:scale(1.09);filter:saturate(1.1)}
.direction-content strong{transition:transform .5s var(--ease)}.direction:hover .direction-content strong{transform:translateX(6px)}
.direction.expanded .direction-description{animation:fadeSlide .8s var(--ease) .2s both}
.direction.expanded .direction-small,.direction.expanded strong{animation:fadeSlide .7s var(--ease) both}
.direction .round{transition:transform .4s var(--spring),background-color .3s,color .3s}

/* about bento */
.passport-tile,.points-tile,.connection-tile,.steps article,.telegram-surface{transition:transform .5s var(--ease),box-shadow .5s var(--ease),background-color .4s}
.passport-tile:hover,.points-tile:hover,.connection-tile:hover,.steps article:hover{transform:translateY(-8px);box-shadow:0 26px 44px #2a4a6a1a}
.passport{transition:transform .7s var(--spring),box-shadow .5s;animation:floaty 6s ease-in-out infinite}
.passport-tile:hover .passport{transform:rotate(-8deg) scale(1.05);box-shadow:inset 5px 0 8px #ffffff28,20px 28px 32px #203d9238}
.passport-stamp{transition:transform .8s var(--spring)}.passport-tile:hover .passport-stamp{transform:rotate(200deg) scale(1.08)}
.tile-label span{display:inline-block;transition:transform .4s var(--spring)}.passport-tile:hover .tile-label span{transform:rotate(45deg)}
.coin{animation:floaty 4.5s ease-in-out infinite;transition:filter .4s}.coin-back{animation:floaty2 5.5s ease-in-out infinite -2s}
.points-tile:hover .coin{filter:brightness(1.06)}
.orbit:before{animation:spin 40s linear infinite}.orbit:after{animation:spin 55s linear infinite reverse}
.orbit-node{animation:floaty 4s ease-in-out infinite;transition:transform .4s var(--spring),background-color .3s,color .3s}
.n2{animation-delay:-1.3s}.n3{animation-delay:-2.6s}
.orbit-node:hover{transform:scale(1.25);background:var(--blue);color:#fff}
.orbit-center{transition:transform .5s var(--spring)}.connection-tile:hover .orbit-center{transform:scale(1.15)}

/* journey */
.journey>img{transition:transform 1.8s var(--ease)}
.journey:hover>img{transform:scale(1.05)}
.journey-thumbs button{transition:transform .4s var(--spring),opacity .3s,background-color .3s}
.journey-thumbs button:hover{transform:translateY(-4px) scale(1.06);opacity:1}
.journey-thumbs img{transition:transform .5s var(--ease)}.journey-thumbs button:hover img{transform:scale(1.1)}
.journey h2 i{display:inline-block;transition:transform .5s var(--spring)}.journey:hover h2 i{transform:translateX(8px)}

/* steps */
.step-number{transition:background-color .35s,color .35s,transform .6s var(--spring),border-color .35s}
.steps article:hover .step-number{background:var(--blue);color:#fff;border-color:var(--blue);transform:rotate(360deg)}
.tags-graphic span{transition:transform .5s var(--spring),box-shadow .4s;animation:floaty2 5s ease-in-out infinite}
.tags-graphic span:nth-child(2){animation-delay:-1.7s}.tags-graphic span:nth-child(3){animation-delay:-3.4s}
.steps article:hover .tags-graphic span{box-shadow:0 12px 20px #2d547418}
.tags-graphic span:hover{transform:rotate(0deg) scale(1.1)}
.ticket-mini{transition:transform .6s var(--spring),box-shadow .5s}.steps article:hover .ticket-mini{transform:rotate(-2deg) translateY(-6px);box-shadow:0 20px 34px #6d81b73a}
.ticket-mini i{transition:transform .6s var(--spring)}.steps article:hover .ticket-mini i{transform:scale(1.25) rotate(360deg)}
.star-graphic{transition:transform .8s var(--spring),color .4s}.steps article:hover .star-graphic{transform:rotate(20deg) scale(1.08);color:#6aa590}
.star-graphic>span{transition:transform .5s var(--spring)}.steps article:hover .star-graphic>span{transform:rotate(12deg) scale(1.08)}

/* stories */
.story-stack>img{transition:transform .8s var(--spring),box-shadow .6s}
.story-stack:hover>img{transform:rotate(1deg) scale(1.025);box-shadow:0 30px 50px #213c4b26}
.story-under{transition:transform .8s var(--spring)}.story-stack:hover .story-under{transform:rotate(-9deg) translateX(-8px)}
.story-tag{transition:transform .6s var(--spring)}.story-stack:hover .story-tag{transform:rotate(-3deg) translateY(-6px)}
.story-tag>span{display:inline-block;animation:spin 6s linear infinite}
.story-caption{transition:transform .8s var(--spring)}.story-stack:hover .story-caption{transform:rotate(1deg) translateY(-4px)}

/* telegram */
.telegram-orbit{animation:spin 60s linear infinite}
.telegram-orbit:after{animation:spin 40s linear infinite reverse}
.phone{animation:floaty 6s ease-in-out infinite;transition:box-shadow .5s}
.telegram-surface:hover .phone{box-shadow:20px 34px 60px #29458240,0 0 0 1px #cfdbef}
.floating-note{animation:floaty2 5s ease-in-out infinite -1s}
.floating-star{animation:wobble 6s ease-in-out infinite}
.phone-message{transition:transform .4s var(--spring)}.phone-message:hover{transform:scale(1.04)}
.phone-message>img{transition:transform .6s var(--ease)}.phone-message:hover>img{transform:scale(1.06)}
.phone-button{transition:background-color .3s,transform .3s var(--spring)}.phone-button:hover{background:#fff;transform:scale(1.04)}
.telegram-tags>span{transition:transform .4s var(--spring),background-color .3s,color .3s,border-color .3s}
.telegram-tags>span:hover{transform:translateY(-3px);background:#fff;color:var(--blue);border-color:#fff}

/* faq */
.questions summary{transition:color .3s,transform .4s var(--ease)}
.questions summary:hover{color:var(--blue);transform:translateX(6px)}
.questions summary>span{transition:transform .5s var(--spring),color .3s}
.questions summary:hover>span{color:var(--blue)}
.questions details[open] p{animation:fadeSlide .6s var(--ease) both}

/* final + footer */
.final-cta>a em{display:inline-block;transition:transform .6s var(--ease),color .4s}
.final-cta>a:hover em{transform:translateX(16px);color:var(--blue)}
.final-arrow{transition:transform .7s var(--spring),background-color .4s,color .4s}
.final-cta>a:hover .final-arrow{transform:rotate(45deg) scale(1.08);background:var(--blue);color:#fff}
.footer a{display:inline-block;transition:color .3s,transform .4s var(--ease)}
.footer a:hover{color:var(--blue);transform:translateX(6px)}
.pill{transition:transform .4s var(--spring),background-color .3s}

@media(hover:none){.button:before{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.js .rv{opacity:1!important;translate:none!important;filter:none!important}}