/* Веер изделий на первом экране главной — порт концепта output/hero-fan-demo (04.10.2026).
   Состав — раздел панели «Главная — веер»; поведение — /js/home-fan.js.
   Состояния: без класса — веер разложен и освещён (так же без JS); html.hf-intro — сумерки и раздача
   (один раз за сессию, ставит встроенный скрипт до отрисовки); html.hf-intro.hf-lit — лампа включилась, сумерки уходят. */
@property --hf-step{syntax:'<length>';inherits:true;initial-value:90px}
@property --hf-reveal{syntax:'<percentage>';inherits:false;initial-value:-30%}
:root{--hf-glow:255 207 140;--hf-settle:cubic-bezier(.22,.8,.22,1);--hf-spring:cubic-bezier(.2,1.12,.36,1)}
@supports (transition-timing-function:linear(0,1)){:root{
 /* Пружина с перелётом ~2 %: карточки «садятся» на место, а не тормозят. */
 --hf-spring:linear(0,.006,.025 2.8%,.101 6.1%,.539 18.9%,.721 25.3%,.849 31.5%,.937 38.1%,.968 41.8%,.991 45.7%,1.006 50.1%,1.015 55%,1.017 63.9%,1.001 85.9%,1)}}

/* Веер выходит за колонку к краям экрана; горизонтальной прокрутки при этом нет. */
.s8[data-s8-page=home]{overflow-x:clip}
.s8-hero.hf-hero{overflow-y:clip;align-items:center}

/* Сумерки до «включения света» — на весь экран вместе с шапкой (z-index шапки 80); светлее там, где лампа. */
.hf-dusk{position:fixed;inset:0;z-index:81;pointer-events:none;opacity:0;visibility:hidden;background:radial-gradient(40% 55% at 70% 52%,rgb(24 27 27/.62),rgb(18 21 21/.82) 80%)}
.hf-intro .hf-dusk{visibility:visible}
.hf-intro:not(.hf-lit) .hf-dusk{opacity:1}
.hf-intro.hf-lit .hf-dusk{opacity:0;transition:opacity 1.4s ease .1s}

/* Витрина. Размер карточек — от ширины колонки (container query), шаг веера — от ширины карточки. */
.hf-showcase{position:relative;min-width:0;padding:8px 0 0;isolation:isolate;container-type:inline-size;
 --hf-card-w:clamp(200px,37cqi,280px);--hf-card-h:calc(var(--hf-card-w)*1.48);--hf-step:calc(var(--hf-card-w)*.343)}
/* Во время сумерек витрина над ними: в тёмной комнате видно изделия, горит одна лампа. После — снова под шапкой. */
.hf-intro .hf-showcase{z-index:82}
.hf-intro:not(.hf-lit) :is(.hf-selection,.hf-timeline,.hf-hint){opacity:0;transform:translateY(8px)}
.hf-intro.hf-lit :is(.hf-selection,.hf-timeline,.hf-hint){transition:opacity .8s ease .35s,transform .8s var(--hf-settle) .35s}

.hf-fan{height:calc(var(--hf-card-h) + 150px);position:relative;touch-action:pan-y;user-select:none;-webkit-user-select:none;outline-offset:-4px}
.hf-fan.hf-js{cursor:grab}.hf-fan.hf-dragging{cursor:grabbing}

/* Карточка (ссылка на товар) стоит на своём месте в веере и служит областью наведения; при наведении поднимается
   только лицевая сторона .hf-face — так приподнятая карточка не уезжает из-под курсора. */
.s8 .hf-card{position:absolute;left:50%;top:50%;width:var(--hf-card-w);height:var(--hf-card-h);border-radius:5px;transform-origin:50% 105%;
 transform:translate(calc(-50% + var(--hf-slot,0)*var(--hf-step)),calc(-50% + var(--hf-drop,0px))) rotate(var(--hf-angle,0deg)) scale(var(--hf-scale,1));opacity:var(--hf-o,1);
 will-change:transform;cursor:inherit;-webkit-user-drag:none}
.s8 .hf-card:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.hf-fan.hf-js .hf-card{transition:transform 1s var(--hf-spring) calc(var(--hf-d,0)*1ms),opacity .5s,filter 1.2s ease .15s}
.hf-fan.hf-dragging .hf-card{transition:opacity .2s}
.hf-fan .hf-card.hf-jump{transition:none;opacity:0}
/* Раздача: сначала карточки внизу, потом колода, потом веер (hf-ready) с пружиной от центра к краям. */
.hf-intro .hf-fan:not(.hf-ready) .hf-card{opacity:0;transform:translate(-50%,75%) scale(.72) rotate(var(--hf-deck-angle,0deg));transition:transform 1s var(--hf-settle),opacity .7s}
.hf-intro .hf-fan.hf-deck:not(.hf-ready) .hf-card{opacity:1;transform:translate(-50%,-48%) rotate(var(--hf-deck-angle,0deg)) scale(.94);transition:transform .75s var(--hf-settle) calc(var(--hf-d,0)*.4ms),opacity .45s calc(var(--hf-d,0)*.4ms)}
.hf-intro:not(.hf-lit) .hf-card:not(.hf-active){filter:brightness(.42) saturate(.7)}

.hf-face{position:absolute;inset:0;display:block;border-radius:5px;overflow:hidden;background:#cececa;border:5px solid var(--paper);box-shadow:0 13px 27px -15px #171d224a;isolation:isolate;transform-origin:50% 105%;transition:transform .45s var(--hf-spring),box-shadow .6s}
.hf-card.hf-active .hf-face{box-shadow:0 28px 44px -22px #1a1e2059,0 0 70px -10px rgb(var(--hf-glow)/calc(.55*var(--hf-power,1)))}
.s8 .hf-face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;transition:transform 1s var(--hf-settle)}
/* Предмет целиком: пропорции фото сохраняются, края не обрезаются ни на одном экране. */
.s8 .hf-face .hf-product{object-fit:contain;padding:6px;box-sizing:border-box;background:#dededb}
/* Фото в интерьере проступает от курсора мягким краем, когда курсор задержался на карточке (класс hf-room-on). */
.s8 .hf-face .hf-room{z-index:1;--hf-reveal:-30%;
 -webkit-mask-image:radial-gradient(circle at var(--hf-cx,50%) var(--hf-cy,6%),#000 var(--hf-reveal),transparent calc(var(--hf-reveal) + 24%));
 mask-image:radial-gradient(circle at var(--hf-cx,50%) var(--hf-cy,6%),#000 var(--hf-reveal),transparent calc(var(--hf-reveal) + 24%));
 transition:--hf-reveal .7s cubic-bezier(.6,0,.2,1),transform 1s var(--hf-settle)}
.s8 .hf-card.hf-room-on .hf-room{--hf-reveal:125%;transition-duration:1s,1s}
.hf-card.hf-peek{z-index:60!important}
.hf-card.hf-peek .hf-face{transform:perspective(1300px) rotate(calc(var(--hf-angle,0deg)*-1)) translateY(-37px) scale(calc(1.04/var(--hf-scale,1))) rotateX(var(--hf-rx,0deg)) rotateY(var(--hf-ry,0deg));box-shadow:0 34px 60px -22px #14181870}
.s8 .hf-card.hf-peek .hf-face .hf-room{transform:scale(1.035)}
/* Блик по металлу под курсором. */
.hf-face:after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .45s;mix-blend-mode:soft-light;background:radial-gradient(circle at var(--hf-gx,50%) var(--hf-gy,20%),rgb(255 255 255/.75),rgb(255 255 255/0) 48%),linear-gradient(115deg,transparent 38%,rgb(255 255 255/.22) calc(var(--hf-gx,50%) - 4%),transparent 62%)}
.hf-card.hf-peek .hf-face:after{opacity:1}
.hf-label{position:absolute;left:12px;right:12px;bottom:12px;z-index:3;display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:14px;line-height:1.3;background:#f7f8f8ed;padding:13px 15px;opacity:0;transform:translateY(10px);transition:.3s;pointer-events:none}
.hf-card.hf-peek .hf-label{opacity:1;transform:none}.hf-label small{font-size:18px}

/* Свет лампы за выбранным изделием и пятно света под веером. Сила — из раздела панели (--hf-power). */
.hf-halo,.hf-pool{position:absolute;left:50%;pointer-events:none;z-index:0;border-radius:50%;opacity:var(--hf-power,1);transition:opacity .9s ease}
.hf-halo{top:46%;width:calc(var(--hf-card-w)*3.1);aspect-ratio:1;translate:-50% -50%;background:radial-gradient(closest-side,rgb(var(--hf-glow)/.85),rgb(var(--hf-glow)/.42) 30%,rgb(var(--hf-glow)/.14) 58%,rgb(var(--hf-glow)/0))}
.hf-pool{bottom:1%;width:calc(var(--hf-card-w)*2.6);height:110px;translate:-50% 0;background:radial-gradient(closest-side,rgb(var(--hf-glow)/.7),rgb(var(--hf-glow)/0))}
.hf-fan.hf-js .hf-halo{animation:hf-breathe 7s ease-in-out infinite alternate}
.hf-intro:not(.hf-lit) :is(.hf-halo,.hf-pool){opacity:0;transition:none}
.hf-fan.hf-js .hf-flicker{animation:hf-flicker 1s linear both}
@keyframes hf-flicker{0%{opacity:0}7%{opacity:calc(.85*var(--hf-power,1))}11%{opacity:.08}19%{opacity:calc(.95*var(--hf-power,1))}24%{opacity:calc(.3*var(--hf-power,1))}34%,100%{opacity:var(--hf-power,1)}}
@keyframes hf-breathe{from{scale:1}to{scale:1.05}}

/* Курсор — второй источник света: мягкий тёплый блик скользит по вееру. */
.hf-torch{position:absolute;inset:-10% -5%;pointer-events:none;z-index:9;opacity:0;transition:opacity .5s;mix-blend-mode:soft-light;background:radial-gradient(380px circle at var(--hf-mx,-999px) var(--hf-my,-999px),rgb(255 244 224/.55),rgb(255 244 224/0) 62%)}
.hf-showcase.hf-torch-on .hf-torch{opacity:1}

/* Подпись выбранного изделия, управление, полоса автосмены. */
.hf-selection{width:min(420px,84%);margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative;z-index:10}
.hf-meta{min-width:0}
.hf-meta>span{font-size:12px;color:var(--muted);display:block;margin-bottom:4px;line-height:1.4}
.s8 .hf-meta>a{display:flex;gap:18px;align-items:center;font-size:25px;line-height:1.15;letter-spacing:-.025em}
.hf-name-mask{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em;white-space:nowrap;text-overflow:ellipsis}.hf-name-mask>span{display:block;overflow:hidden;text-overflow:ellipsis}
.hf-arrow{font-size:19px;transition:transform .35s var(--hf-spring)}.hf-meta>a:hover .hf-arrow{transform:translate(3px,-3px)}
.hf-playback{display:flex;align-items:center;gap:6px;flex:none}
.s8 .hf-playback button{height:38px;width:38px;border:0;border-radius:50%;background:none;font-size:22px;line-height:1;display:grid;place-items:center;transition:background .2s}
.s8 .hf-playback button:hover{background:var(--wash)}.hf-playback svg{width:17px;fill:none;stroke:currentColor;stroke-width:1.6}
.hf-timeline{width:min(420px,84%);height:2px;background:#d9dcdd;margin:18px auto 0;overflow:hidden;position:relative;z-index:10}
.hf-timeline i{display:block;width:100%;height:100%;background:linear-gradient(90deg,#777c80,rgb(var(--hf-glow)));transform-origin:left;transform:scaleX(0)}
.hf-hint{font-size:11px;line-height:1.5;text-align:center;color:var(--muted);margin:12px 0 0;position:relative;z-index:10;display:flex;justify-content:center;flex-wrap:wrap;gap:4px 16px}
.hf-hint-touch{display:none}
.s8 .hf-replay{font-size:11px;color:var(--muted);background:none;border:0;padding:0;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#b9bdc2}
.s8 .hf-replay:hover{color:var(--ink)}
/* Без скрипта (и до его загрузки) управление не работает — не показываем. */
.hf-showcase:not(.hf-live) :is(.hf-playback,.hf-timeline,.hf-replay,.hf-hint-desktop,.hf-hint-touch){display:none}
@media(hover:none),(pointer:coarse){.hf-hint-desktop{display:none!important}.hf-showcase.hf-live .hf-hint-touch{display:inline}.hf-torch{display:none}}

@media(min-width:768px){.s8-hero.hf-hero{grid-template-columns:.92fr 1.12fr}}
@media(max-width:767px){
 .hf-dusk{background:radial-gradient(70% 40% at 50% 66%,rgb(24 27 27/.6),rgb(18 21 21/.8) 82%)}
 .hf-showcase{padding-top:6px;--hf-card-w:min(210px,56cqi);--hf-card-h:calc(var(--hf-card-w)*1.24);--hf-step:calc(var(--hf-card-w)*.48)}
 .hf-fan{height:calc(var(--hf-card-h) + 110px)}
 .hf-halo{width:calc(var(--hf-card-w)*2.2)}
 .hf-selection,.hf-timeline{width:min(100%,420px)}.hf-selection{gap:12px}
 .s8 .hf-meta>a{font-size:21px;gap:10px}.hf-meta>span{font-size:11px}
 .hf-playback{gap:0}.s8 .hf-playback button{width:32px}
 .hf-hint{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.hf-dusk{display:none}.hf-card,.hf-face,.hf-face img,.hf-halo,.hf-pool{transition:none!important;animation:none!important}}