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

/* 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);}
}
.step-peek{position:fixed;left:0;top:0;z-index:60;width:230px;height:290px;margin:-145px 0 0 -115px;pointer-events:none;border:1px solid var(--ink);background:var(--paper);padding:8px;opacity:0;transform:scale(.6) rotate(-6deg);transition:opacity .25s ease,transform .45s cubic-bezier(.2,.9,.2,1);}
.step-peek.is-on{opacity:1;transform:scale(1) rotate(-3deg);}
.step-peek img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(1) contrast(1.05);}
.step-peek span{position:absolute;left:-1px;bottom:18px;background:var(--accent-hover);color:var(--paper);font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:7px 10px;}

/* 4. Веер сертификатов */
.cert-fan{position:relative;height:540px;margin:4px 0 40px;perspective:1200px;overflow:hidden;}
.cert-fan__wheel{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d;}
.cert-fan__panel{position:absolute;left:0;top:0;width:190px;height:136px;margin:-68px 0 0 -95px;transform-style:preserve-3d;}
.cert-fan__panel img{width:100%;height:100%;object-fit:cover;display:block;border:1px solid var(--ink);background:#fff;box-shadow:0 18px 40px -18px rgba(14,14,14,.45);}
.cert-fan__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none;}
.cert-fan__core b{display:block;font-size:64px;font-weight:800;letter-spacing:-.04em;line-height:1;}
.cert-fan__core span{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);}

/* 5. Заголовки секций проявляются кусками */
.hw{display:inline-block;position:relative;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em;}
.hw__i{display:inline-block;transform:translateY(108%);}
.hw::after{content:"";position:absolute;inset:0 0 .08em;background:var(--accent);transform:scaleX(0);transform-origin:left;}
.js-hw.is-hw .hw__i{animation:hw-up .7s cubic-bezier(.2,.85,.25,1) both;animation-delay:calc(var(--i) * 90ms + 260ms);}
.js-hw.is-hw .hw::after{animation:hw-shutter .62s cubic-bezier(.7,0,.2,1) both;animation-delay:calc(var(--i) * 90ms);}
@keyframes hw-up{from{transform:translateY(108%);}to{transform:translateY(0);}}
@keyframes hw-shutter{0%{transform:scaleX(0);transform-origin:left;}48%{transform:scaleX(1);transform-origin:left;}52%{transform:scaleX(1);transform-origin:right;}100%{transform:scaleX(0);transform-origin:right;}}

@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;}
  .cert-fan{height:360px;}
  .cert-fan__panel{width:120px;height:86px;margin:-43px 0 0 -60px;}
  .cert-fan__core b{font-size:36px;}
  .cert-fan__core span{display:block;max-width:120px;margin:4px auto 0;font-size:9px;line-height:1.4;}
}
@media (prefers-reduced-motion:reduce){
  .hw__i{transform:none;} .hw::after{display:none;}
  .js-hw.is-hw .hw__i,.js-hw.is-hw .hw::after{animation:none;}
}