.header-anime {
width: 100%;
border-right: 20px solid #fff;
} .header-anime__inner{
position: relative;
width: 100%;
min-height: 260px;
background: var(--color-blanc-fonce);
overflow: hidden; padding: 20px 20px;
} .header-anime__container{
max-width: var(--layout-wide-size);
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-around;
padding:100px 0;
position:relative;
gap: clamp(20px, 4vw, 64px);
}
.header-anime__content{
position: relative;
z-index: 2;
min-width: 0; }
.header-anime__media{
position: relative;
z-index: 2;
align-items: center;
justify-content: flex-end;
}
.header-anime_bottom{
position:absolute;
left:0;
bottom:0px;
width:100%;
display: flex;
justify-content: space-between;
align-items: self-end;
padding:0 10px;
} .header-anime__blob {
position: absolute;
left: 0;
top: 0;
width: 110px;
height: 110px;
border-radius: 999px;
pointer-events: none;
z-index: 1; background: radial-gradient(
circle,
var(--page-accent) 0%,
rgba(0, 0, 0, 0) 65%
);
filter: blur(18px); opacity: 0;
visibility: hidden; transition: opacity .18s ease, visibility 0s linear .18s;
} .header-anime.is-hover .header-anime__blob {
opacity: .6;
visibility: visible;
transition: opacity .18s ease, visibility 0s linear 0s;
} .header-anime__title {
margin: 0;
line-height: 1; letter-spacing: -0.02em;
font-size: clamp(34px, 4.2vw, 62px);
font-weight: 700;
text-transform: uppercase;
}
.header-anime__title .title-line {
position: relative;
display: block; width: fit-content;
color: #fff; padding: 6px 48px 6px 14px; margin: 0;
isolation: isolate;
}
.header-anime__title .title-line::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--page-accent); clip-path: polygon(
0 0,
98% 0, 95% 100%, 0 100%
);
} .header-anime__title .title-line:nth-child(1) {
margin-left: 50px;
}
.header-anime__title .title-line:nth-child(2) {
margin-left: 100px;
}
.header-anime__title .title-line:nth-child(3) {
margin-left: 0px;
} .header-anime__media {
display: flex;
align-items: center;
justify-content: flex-end;
}
.header-anime__circle {
width: clamp(140px, 20vw, 320px);
height: clamp(140px, 20vw, 320px);
border-radius: 999px;
overflow: hidden;
}
.header-anime__circle img {
width: 100%;
height: 100%;
display: block;
object-fit: cover;
} @keyframes headerAnimeReveal {
from {
opacity: 0;
transform: translateY(16px);
}
to {
opacity: 1;
transform: translateY(0);
}
} .header-anime__title .title-line,
.header-anime__media,
.header-anime_bottom .breadcrumb,
.header-anime_bottom .btn_primary {
opacity: 0;
transform: translateY(16px);
} .header-anime__title .title-line:nth-child(1) {
animation: headerAnimeReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 0.08s;
}
.header-anime__title .title-line:nth-child(2) {
animation: headerAnimeReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 0.18s;
}
.header-anime__title .title-line:nth-child(3) {
animation: headerAnimeReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 0.28s;
} .header-anime__media {
animation: headerAnimeReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 0.22s;
} .header-anime_bottom .breadcrumb {
animation: headerAnimeReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 0.34s;
}
.header-anime_bottom .btn_primary {
animation: headerAnimeReveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
animation-delay: 0.42s;
} @media (prefers-reduced-motion: reduce) {
.header-anime__title .title-line,
.header-anime__media,
.header-anime_bottom .breadcrumb,
.header-anime_bottom .btn_primary {
opacity: 1;
transform: none;
animation: none;
}
} @media (max-width: 860px){ .header-anime{
border-right: 15px solid #fff;
} .header-anime__container{
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 18px; padding: 30px 0 30px 0;
} .header-anime__media{
order: 1;
width: 100%;
justify-content: flex-start;
}
.header-anime__circle{ width: clamp(160px, 55vw, 260px);
height: clamp(160px, 55vw, 260px); transform: translateX(-60px);
} .header-anime__content{
order: 2;
width: 100%;
} .header-anime__title .title-line{
color: var(--page-accent);
padding: 0; margin-left: 0; }
.header-anime__title .title-line::before{
content: none; } .header-anime_bottom{
order: 3;
position: static; width: 100%;
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 16px;
padding:0;
} .header-anime__inner .breadcrumb{
position: absolute;
top: -14px;
right: 5px;
transform: rotate(-90deg)!important;
transform-origin: top right;
text-align: right;
white-space: nowrap;
z-index: 5;
} .header-anime_bottom .btn_primary{
margin-top: 8px;
} .header-anime__title .title-line:nth-child(1) {
margin-left: 0px;
}
.header-anime__title .title-line:nth-child(2) {
margin-left: 0px;
}
.header-anime__title .title-line:nth-child(3) {
margin-left: 0px;
}
}