/* Анимации главной: портрет из кубиков, лента кейсов, строки форматов. */

/* 1. Портрет из кубиков (js/hero-particles.js) */
.hero-photo__fx{position:absolute;pointer-events:none;z-index:1;}
.hero-photo__badge{z-index:2;}

/* 2. Лента кейсов, закрученная в 3D */
.case-ribbon{position:relative;height:330px;margin:8px calc(50% - 50vw) 36px;overflow:hidden;perspective:1300px;}
.case-ribbon__track{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;transform:rotateZ(-7deg);}
.case-ribbon__card{position:absolute;left:0;top:0;width:168px;height:212px;margin:-106px 0 0 -84px;transform-style:preserve-3d;will-change:transform;}
.case-ribbon__face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:16px 14px;border:1px solid var(--ink);backface-visibility:hidden;-webkit-backface-visibility:hidden;color:var(--ink);background:var(--paper);text-decoration:none;}
.case-ribbon__card:nth-child(3n+2) .case-ribbon__face--front{background:var(--ink);color:var(--paper);}
.case-ribbon__card:nth-child(3n) .case-ribbon__face--front{background:var(--accent);border-color:var(--accent-hover);color:#fff;}
.case-ribbon__face--back{transform:rotateX(180deg);background:var(--bg-pill);}
.case-ribbon__card:nth-child(2n) .case-ribbon__face--back{background:var(--paper);background-image:radial-gradient(rgba(14,14,14,.18) 1px,transparent 1.2px);background-size:9px 9px;}
.case-ribbon__dir{font-family:var(--font-mono);font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.8;}
.case-ribbon__num{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.case-ribbon__lbl{font-size:12px;line-height:1.3;opacity:.85;}
.case-ribbon__face:hover{outline:2px solid var(--accent);outline-offset:-2px;}

/* 3. Строки форматов: заливка тушью */
.flagship-step{position:relative;isolation:isolate;overflow:hidden;}
.flagship-step::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--ink);transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.7,0,.2,1);}
.flagship-step > *{transition:color .3s ease .05s;}
.flagship-step h3,.flagship-step p,.flagship-step .flagship-step__meta{transition:color .3s ease .05s,transform .5s cubic-bezier(.7,0,.2,1);}
@media (hover:hover){
  .flagship-step:hover::before{transform:scaleX(1);}
  .flagship-step:hover h3{color:var(--paper);transform:translateX(10px);}
  .flagship-step:hover p{color:rgba(244,241,234,.72);transform:translateX(10px);}
  .flagship-step:hover .flagship-step__meta{color:#8fb3ef;transform:translateX(10px);}
  .flagship-step:hover .arrow{color:var(--accent);}
}

@media (max-width:760px){
  .case-ribbon{height:250px;margin-bottom:24px;}
  .case-ribbon__card{width:128px;height:164px;margin:-82px 0 0 -64px;}
  .case-ribbon__num{font-size:22px;}
}