/* -------------------------------------------------- page transition ---------- */

.js-page-transition{--duration-leave: 0.4s; --duration-visit: 1.2s; --duration-icon: calc(var(--duration-visit) - var(--duration-leave));} 

.js-page-transition{z-index: 900; opacity: 0; pointer-events: none;} .js-page-transition.loaded{opacity: 1; pointer-events: auto; transition: opacity var(--duration-leave) ease-in;} .js-page-transition.loaded.visit{opacity: 0; pointer-events: none; transition: opacity var(--duration-visit) ease-in-out var(--duration-icon);} .js-page-transition.loaded.visit .symbol-icon{opacity: 1;}



/* -------------------------------------------------- transition-icon ---------- */

.symbol-icon{display: inline-block; width: calc(var(--h3-size) * 2.4); opacity: 0;} .symbol-icon .frame-relative-1to1{transform: translate(0,7.5%);} .symbol-icon [class*="shape-"]{width: 100%; height: 100%; border-radius: 50%;} 

.symbol-icon [class*="mask-"], .symbol-icon [class*="shape-"]{-webkit-mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;} .symbol-icon .mask-radial{ -webkit-mask-image: radial-gradient(transparent 35.5%, black 35.5%);} .symbol-icon .mask-conic-1, .symbol-icon .shape-1{-webkit-mask-image: conic-gradient(black 0deg, black 180deg, transparent 180deg, transparent 360deg);} .symbol-icon .mask-conic-2, .symbol-icon .shape-2{-webkit-mask-image: conic-gradient(black 0deg, black 45deg, transparent 45deg, transparent 360deg);} .symbol-icon .mask-conic-1{transform: translate(50%,50%)rotate(225deg);} .symbol-icon .mask-conic-2{transform: translate(50%,50%)rotate(90deg);} 

.symbol-icon [class*="shape-"]{background-color: var(--color-front);} 



/* -------------------------------------------------- icon animation ---------- */

.symbol-icon .shape-1{animation: transition-icon-1 var(--duration-icon) ease-in-out;} 
@keyframes transition-icon-1{0%{transform: translate(50%,50%)rotate(180deg);} 37.5%{transform: translate(50%,50%)rotate(180deg);} 87.5%{transform: translate(50%,50%)rotate(0deg);} 100%{transform: translate(50%,50%)rotate(0deg);}} 

.symbol-icon .shape-2{animation: transition-icon-2 var(--duration-icon) ease-in-out;} 
@keyframes transition-icon-2{0%{transform: translate(50%,50%)rotate(45deg);} 87.5%{transform: translate(50%,50%)rotate(45deg);} 100%{transform: translate(50%,50%)rotate(0deg);}}