/* Главная F · Сталь в движении. Анимации — из прототипа prototypes/src/F (css/home.css), инлайн-стили pages/home.html вынесены в классы. */

@keyframes slide-r{from{transform:translateX(80px);opacity:0}to{transform:none;opacity:1}}
@keyframes grow{from{transform:scaleX(0)}}
@keyframes rv{from{opacity:0;transform:translateY(56px)}}

/* Первый экран */
.f-hero{display:flex;flex-wrap:wrap;border-bottom:3px solid var(--ink)}
.f-hero-tx{flex:1 1 640px;min-width:0;display:flex;flex-direction:column;padding:clamp(32px,5vw,80px) var(--gut) clamp(32px,4vw,56px)}
.f-kicker{display:flex;align-items:center;gap:14px;margin:0 0 clamp(24px,3vw,44px);font-size:14px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.f-kicker span{flex:none;width:48px;height:4px;background:var(--red)}
.f-h1{margin:0;font-family:var(--disp);font-weight:400;font-size:clamp(40px,7.2vw,106px);line-height:1;letter-spacing:-.03em;text-transform:uppercase}
.f-h1 .h-l1{display:block;animation:slide-l .9s cubic-bezier(.2,.8,.2,1) .15s both}
.f-h1 .h-l2{display:inline-block;margin:.08em 0 .1em -.12em;padding:.06em .14em .02em;background:var(--red);color:var(--p1);transform:rotate(-2.5deg);transform-origin:0 50%;animation:wipe .8s cubic-bezier(.7,0,.2,1) .45s both}
.f-h1 .h-l3{display:block;color:transparent;-webkit-text-stroke:3px var(--ink);animation:slide-r .9s cubic-bezier(.2,.8,.2,1) .75s both}
.f-home .h-fade{animation-delay:1.05s}
.f-when{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px 26px;margin-top:auto;padding-top:clamp(28px,3.4vw,48px)}
.f-days{margin:0;font-family:var(--disp);font-size:clamp(34px,4.2vw,60px);line-height:1;letter-spacing:-.04em}
.f-month{margin:0;padding-top:10px;border-top:4px solid var(--red);font-size:15px;font-weight:700;line-height:1.35;letter-spacing:.06em;text-transform:uppercase}
.f-buy{margin-left:auto}
.f-art{position:relative;flex:1 1 460px;min-height:560px;overflow:hidden;background:var(--ink);clip-path:polygon(12% 0,100% 0,100% 100%,0 100%)}
.f-art svg{position:absolute;left:55%;top:46%;width:min(90%,580px);height:auto;transform:translate(-50%,-50%)}
.f-art .hero-no{top:26px}
.f-art .hero-side{right:22px;top:26px}
.f-art .hero-band{padding:18px 24px;font-size:clamp(14px,1.4vw,20px)}

/* Бегущие строки */
.f-marq1{overflow:hidden;background:var(--ink);color:var(--p1)}
.f-marq1 .marq-l{padding:20px 0;font-family:var(--disp);font-size:clamp(28px,3.4vw,48px);line-height:1;text-transform:uppercase;white-space:nowrap}
.f-marq1 span{padding-right:36px}
.f-marq1 i{font-style:normal;color:var(--red2)}
.f-marq2{overflow:hidden;margin:-6px -24px 0;background:var(--red);color:#fff;transform:rotate(-1.2deg)}
.f-marq2 .marq-r{padding:14px 0;font-family:var(--disp);font-size:clamp(16px,1.6vw,22px);line-height:1;text-transform:uppercase;white-space:nowrap}
.f-marq2 span{padding-right:30px}

/* О фестивале */
.f-about{display:flex;flex-direction:column;gap:26px;padding-right:clamp(0px,3vw,40px)}
.f-about .lead{font-size:clamp(18px,1.6vw,22px);color:var(--ink)}
.f-quote{margin:auto 0 0;padding:20px 24px;background:var(--red);color:#fff;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.f-quote p{margin:0;font-family:var(--disp);font-size:clamp(20px,2vw,28px);line-height:1.15;text-transform:uppercase}
.f-quote p+p{margin-top:10px;font-family:var(--sans);font-size:13px;font-weight:700;letter-spacing:.1em}
.stat-v.f-feat{font-size:clamp(18px,1.7vw,24px);line-height:1.1;letter-spacing:0;text-transform:uppercase}
.stat-l.f-feat-d{text-transform:none;letter-spacing:0;font-weight:500;font-size:15px}
.f-orgs{display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px;margin-top:28px;padding-top:20px;border-top:3px solid var(--ink)}
.f-orgs>div{display:flex;flex-wrap:wrap;gap:10px}

/* Цифры */
.f-nums{display:flex;flex-wrap:wrap;gap:12px}
.f-num{flex:1 1 200px;display:flex;flex-direction:column;min-height:250px;padding:22px;clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%)}
.f-num.wide{flex:2 1 400px}
.f-num.dk{background:var(--ink);color:var(--p1)}
.f-num.rd{background:var(--red);color:#fff}
.f-num.gr{background:var(--ink2);color:#fff}
.f-num-n{margin:0;font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--mu)}
.f-num.rd .f-num-n{color:#fff}
.f-num.gr .f-num-n{color:#C3C7CD}
.f-num-v{margin:auto 0 0;font-family:var(--disp);font-size:clamp(48px,5vw,76px);line-height:.9;letter-spacing:-.05em}
.f-num-l{margin:12px 0 0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}

/* Кластеры строками: при наведении строка заливается красным */
.f-crows{border-top:3px solid var(--ink)}
.page .f-crow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;padding:26px 16px;border-bottom:3px solid var(--ink);color:var(--ink);text-decoration:none;background-image:linear-gradient(var(--red),var(--red));background-repeat:no-repeat;background-size:0% 100%;transition:background-size .5s cubic-bezier(.7,0,.2,1),color .3s}
.f-crow-n{flex:0 0 72px;font-family:var(--disp);font-size:20px;color:var(--red)}
.f-crow-t{flex:1 1 220px;font-family:var(--disp);font-size:clamp(22px,2.4vw,34px);line-height:1;text-transform:uppercase}
.f-crow-d{flex:1 1 340px;font-size:16px;line-height:1.5;color:var(--tx2)}
.f-crow .arw{flex:none;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
.page .f-crow:hover{background-size:100% 100%;color:#fff}
.f-crow:hover .f-crow-n{color:var(--ink)}
.f-crow:hover .f-crow-d{color:#fff}
.f-crow:hover .arw{transform:translateX(8px) rotate(-45deg)}

/* Три дня программы */
.f-days-wrap{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.f-day{flex:1 1 300px;background:var(--p1);box-shadow:inset 0 0 0 3px var(--ink)}
.f-day h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin:0;padding:14px 18px;background:var(--ink);color:var(--p1);font-family:var(--disp);font-weight:400;font-size:18px;text-transform:uppercase}
.f-day h3 small{font-family:var(--sans);font-weight:700;font-size:13px;letter-spacing:.1em;color:#B9B4AA}
.f-day.rd h3{background:var(--red);color:#fff}
.f-day.rd h3 small{color:#fff}
.f-day .grow{display:block;height:6px;background:var(--red)}
.f-day.rd .grow{background:var(--ink)}
.f-day ul{margin:0;padding:6px 18px 12px;list-style:none}
.f-day li{display:flex;gap:14px;padding:11px 0;border-bottom:2px solid var(--rule);font-size:15px;font-weight:500;line-height:1.4}
.f-day li:last-child{border-bottom:0}
.f-day time{flex:none;width:62px;font-family:var(--disp);font-size:13px;line-height:1.6;color:var(--tx2)}
.f-day li.is-hl{font-weight:700}
.f-day li.is-hl time{color:var(--red3)}

/* Хедлайнеры */
.f-stage{display:flex;flex-wrap:wrap;gap:12px}
.f-stage>.sq{flex:1 1 220px}
.f-young{position:relative;flex:1 1 220px;aspect-ratio:1/1;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;padding:22px;background:var(--p1);box-shadow:inset 0 0 0 3px var(--ink);color:var(--red)}
.f-young-t{margin:0;font-family:var(--disp);font-size:20px;line-height:1.1;text-transform:uppercase;color:var(--ink)}
.f-young-d{margin:10px 0 0;font-size:15px;line-height:1.5;color:var(--tx2)}

/* Лагерь «Юный патриот» */
.f-patriot{display:flex;flex-wrap:wrap;align-items:center;gap:24px 48px;padding:clamp(28px,4vw,56px);background:var(--red);color:#fff;clip-path:polygon(0 0,calc(100% - 40px) 0,100% 40px,100% 100%,0 100%)}
.f-patriot-tx{flex:1 1 520px}
.f-patriot-k{margin:0 0 14px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.f-patriot .txt{margin-top:16px;max-width:36em;color:rgba(255,255,255,.9)}
.f-patriot-acts{display:flex;flex-wrap:wrap;gap:10px}
.f-patriot-acts span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;box-shadow:inset 0 0 0 2px #fff;font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.page .f-patriot-btn{background:var(--ink);color:#fff}
.page .f-patriot-btn:hover{background:#fff;color:var(--red)}

/* Билеты */
.f-tks{display:flex;flex-wrap:wrap;gap:12px}
.page .f-tk{flex:1 1 240px;display:flex;flex-direction:column;gap:8px;min-height:210px;padding:22px;text-decoration:none;transition:background-color .35s,color .35s,transform .35s,box-shadow .35s}
.page .f-tk.dk{background:var(--ink);color:var(--p1)}
.page .f-tk.lt{background:var(--p1);box-shadow:inset 0 0 0 3px var(--ink);color:var(--ink)}
.page .f-tk.rd{background:var(--red);color:#fff}
.f-tk-k{font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.f-tk-p{margin-top:auto;font-family:var(--disp);font-size:clamp(26px,2.6vw,36px);line-height:1;letter-spacing:-.03em;word-spacing:-.3em}
.f-tk .tk-d{font-size:14px;line-height:1.5;color:var(--tx2)}
.f-tk.dk .tk-d{color:var(--sand)}
.f-tk.rd .tk-d{color:#fff}
.page .f-tk:hover{background-color:var(--red);color:#fff;box-shadow:none;transform:translateY(-6px)}
.page .f-tk.rd:hover{background-color:var(--ink)}
.f-tk:hover .tk-d{color:#fff}

@supports (animation-timeline:view()){
.f-home .rv{animation:rv linear both;animation-timeline:view();animation-range:entry 0% entry 75%}
.f-day .grow{transform-origin:0 50%;animation:grow linear both;animation-timeline:view();animation-range:entry 20% cover 40%}
}
@media (prefers-reduced-motion:reduce){.f-home *{animation:none!important;transition:none!important}}
@media (max-width:640px){
.car{flex-wrap:nowrap!important}
.car>.sq,.car>.f-young{aspect-ratio:auto!important;min-height:220px}
.f-art{min-height:340px}
.f-crow .f-crow-d{display:none}
.page .f-crow{padding:18px 8px}
.f-buy{margin-left:0}
}

/* Узкие экраны: печать по высоте плашки — кольцо не срезается и не наезжает на «№ 01» и боковую подпись */
@media (max-width:1040px){.f-art svg{width:auto;height:min(78%,460px);max-width:84%}}
@media (max-width:640px){.f-art svg{top:46%;height:68%}}
/* Планшет: карточка «Молодые группы» уходит в отдельный ряд — без квадрата, иначе она растягивается на всю ширину и в высоту */
@media (max-width:1040px){.car>.f-young{aspect-ratio:auto!important;min-height:220px}}