/* ============================================================
   hero-s3.css — стили встречающего экрана «Занавес»
   Использует токены из design-tokens.css (с запасными значениями).
   Все классы с префиксом nf- — не конфликтуют с текущим index.html.
   ============================================================ */

.nf-hero{
  --blue:var(--nf-blue,#2a48d6); --blue-bg:var(--nf-blue-bg,#14257a); --blue-deep:var(--nf-blue-deep,#05081c);
  --red:var(--nf-red,#c8433c);   --red-bg:var(--nf-red-bg,#5a1016);   --red-deep:var(--nf-red-deep,#1a0508);
  --ease-out:cubic-bezier(.22,1,.36,1); --spring:cubic-bezier(.34,1.56,.64,1);
  --cut:12%;
  position:relative; height:100svh; min-height:560px; overflow:hidden; isolation:isolate;
  color:#fff; background:var(--blue-deep); cursor:ew-resize; outline:none; user-select:none;
  font-family:inherit;
}
.nf-hero *{box-sizing:border-box}
.nf-hero a{color:inherit}

/* ---------- слои-миры ---------- */
.nf-layer{position:absolute; inset:0}
.nf-layer.cat{clip-path:inset(0 0 0 var(--cut))}
.nf-world{position:absolute; inset:0; overflow:hidden}
.nf-world::before{content:""; position:absolute; inset:0; z-index:0}
.nf-world.nf-c-custom::before{background:radial-gradient(ellipse 90% 80% at 68% 45%,var(--red-bg) 0%,var(--red-deep) 75%)}
.nf-world.nf-c-catalog::before{background:radial-gradient(ellipse 90% 80% at 40% 45%,var(--blue-bg) 0%,var(--blue-deep) 75%)}
.nf-world::after{content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.3;
  background-image:radial-gradient(circle,rgba(255,255,255,.05) 0 22px,transparent 23px); background-size:150px 150px;
  -webkit-mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,transparent 30%,#000 100%); mask-image:radial-gradient(ellipse 80% 70% at 50% 50%,transparent 30%,#000 100%)}
.nf-world>*{position:relative; z-index:1}

.nf-grid{position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:48px; align-items:center;
  padding:80px 6vw 60px; max-width:1500px; margin:0 auto}
.nf-layer.cat .nf-grid{left:var(--cut)}
.nf-layer.cus .nf-grid{right:calc(100% - var(--cut))}
.nf-grid>*{transition:opacity .5s,transform .6s var(--ease-out)}
.nf-layer.dim .nf-grid>*{opacity:0; transform:translateY(12px); pointer-events:none}

/* ---------- текст ---------- */
.nf-copy{max-width:520px}
.nf-badge{display:inline-block; padding:8px 16px; border-radius:999px; font-size:12px; letter-spacing:.2em; font-weight:700;
  border:1px solid rgba(255,255,255,.22); background:rgba(0,0,0,.28); margin-bottom:18px}
.nf-h1{font-size:clamp(34px,4.6vw,70px); line-height:1; margin:0 0 16px; font-weight:800; letter-spacing:-.01em; text-shadow:0 6px 40px rgba(0,0,0,.45); text-wrap:balance}
.nf-h1 em{font-style:normal}
.nf-c-custom .nf-h1 em{color:#ffd0cb}
.nf-c-catalog .nf-h1 em{color:#c6d4ff}
.nf-lead{font-size:clamp(14px,1.2vw,18px); line-height:1.5; opacity:.88; margin:0 0 26px; max-width:460px}
.nf-btn{display:inline-block; padding:16px 34px; border-radius:999px; font-weight:700; color:#fff; text-decoration:none;
  box-shadow:0 12px 40px rgba(0,0,0,.35); transition:transform .25s var(--ease-out); cursor:pointer}
.nf-btn:hover{transform:translateY(-2px)}
.nf-c-custom .nf-btn{background:var(--red)}
.nf-c-catalog .nf-btn{background:var(--blue)}

/* ---------- граница и ручка ---------- */
.nf-bar{position:absolute; top:0; bottom:0; left:var(--cut); width:3px; margin-left:-1px; background:#fff;
  box-shadow:0 0 30px 6px rgba(255,255,255,.55); z-index:5; pointer-events:none}
.nf-grip{position:absolute; top:50%; left:var(--cut); transform:translate(-50%,-50%); z-index:6; display:flex; gap:6px; padding:6px;
  border-radius:999px; background:rgba(0,0,0,.65); border:1px solid rgba(255,255,255,.2); backdrop-filter:blur(8px); cursor:ew-resize}
.nf-grip button{border:0; background:transparent; color:#fff; font:inherit; font-weight:700; font-size:13px; padding:9px 14px; border-radius:999px; cursor:pointer; opacity:.75; white-space:nowrap}
.nf-grip button[aria-selected="true"]{opacity:1; background:#fff; color:#111}
.nf-grip .k{width:36px; height:36px; border-radius:50%; background:#fff; color:#111; display:flex; align-items:center; justify-content:center; font-weight:800}

/* «полоска» второго мира */
.nf-peek{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:4; opacity:0; pointer-events:none; transition:opacity .4s;
  display:flex; align-items:center; gap:10px; padding:10px 16px; border-radius:999px; background:rgba(0,0,0,.45); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.18); font:inherit; font-size:13px; font-weight:700; letter-spacing:.06em; white-space:nowrap; color:#fff; cursor:pointer}
.nf-peek img{height:34px; width:34px; border-radius:8px; object-fit:cover}
.nf-peek img.contain{object-fit:contain; background:var(--blue-bg)}
.nf-layer.dim .nf-peek{opacity:1; pointer-events:auto}
.nf-layer.cus .nf-peek{left:calc(var(--cut)/2)}
.nf-layer.cat .nf-peek{left:calc(var(--cut) + (100% - var(--cut))/2)}

/* ---------- виджет «фото → фигурка» ---------- */
.nf-ba{position:relative; aspect-ratio:4/3; width:100%; max-width:780px; justify-self:end; border-radius:26px; overflow:hidden; background:#000;
  box-shadow:0 40px 100px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.08); cursor:ew-resize; --cut:50%}
.nf-ba-pair{position:absolute; inset:0; opacity:0; transition:opacity 1s ease}
.nf-ba-pair.is-on{opacity:1}
.nf-ba-side{position:absolute; inset:0; background-size:cover; background-position:center}
.nf-ba-side.after{clip-path:inset(0 0 0 var(--cut))}
.nf-ba-label{position:absolute; bottom:16px; padding:7px 14px; border-radius:999px; font-size:12px; letter-spacing:.14em; font-weight:700;
  background:rgba(0,0,0,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.15)}
.nf-ba-label.l{left:16px}.nf-ba-label.r{right:16px}
.nf-ba-divider{position:absolute; top:0; bottom:0; left:var(--cut); width:2px; margin-left:-1px;
  background:linear-gradient(#fff0,#fff 20%,#fff 80%,#fff0); box-shadow:0 0 18px 2px rgba(255,120,110,.9)}
.nf-ba-knob{position:absolute; top:50%; left:var(--cut); width:50px; height:50px; margin:-25px 0 0 -25px; border-radius:50%; background:#fff; color:#111;
  display:flex; align-items:center; justify-content:center; font-size:18px; font-weight:800; box-shadow:0 10px 30px rgba(0,0,0,.5)}
.nf-ba-caption{position:absolute; left:50%; bottom:60px; transform:translate(-50%,14px); opacity:0; white-space:nowrap; padding:9px 16px; border-radius:14px;
  font-size:13px; font-weight:600; background:rgba(0,0,0,.6); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.15);
  transition:opacity .5s ease,transform .6s var(--ease-out)}
.nf-ba-caption.is-on{opacity:1; transform:translate(-50%,0)}
.nf-ba-caption small{display:block; font-weight:400; opacity:.75; font-size:11px; margin-top:2px}
.nf-ba-dots{position:absolute; top:14px; left:50%; transform:translateX(-50%); display:flex; gap:6px}
.nf-ba-dots i{width:6px; height:6px; border-radius:50%; background:rgba(255,255,255,.4); transition:transform .3s,background .3s}
.nf-ba-dots i.is-on{background:#fff; transform:scale(1.4)}

/* ---------- карусель ---------- */
.nf-cf{position:relative; width:100%; max-width:780px; justify-self:end; aspect-ratio:4/3; perspective:1400px}
.nf-cf-disc{position:absolute; left:50%; bottom:9%; width:34%; height:7%; transform:translateX(-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(ellipse at center,rgba(120,160,255,.95) 0%,rgba(42,72,214,.6) 40%,transparent 70%); filter:blur(2px); box-shadow:0 0 40px 10px rgba(60,100,255,.45)}
.nf-cf-disc::after{content:""; position:absolute; inset:-8% 10%; border-radius:50%; border:2px solid rgba(180,200,255,.85); box-shadow:0 0 16px rgba(120,160,255,.9)}
.nf-cf-fig{position:absolute; left:50%; bottom:12%; height:78%; transform-origin:50% 100%; cursor:pointer; will-change:transform,filter;
  transition:transform .9s var(--spring),filter .8s ease,opacity .8s ease}
.nf-cf-fig img{height:100%; width:auto; display:block; transform:translateX(-50%); filter:drop-shadow(0 30px 30px rgba(0,0,0,.55))}
.nf-cf-info{position:absolute; left:50%; bottom:0; transform:translate(-50%,10px); display:flex; gap:10px; align-items:center; opacity:0; text-decoration:none; white-space:nowrap;
  transition:opacity .4s,transform .5s var(--ease-out)}
.nf-cf-info.is-on{opacity:1; transform:translate(-50%,0)}
.nf-cf-info .n{padding:8px 14px; border-radius:999px; font-size:13px; font-weight:700; background:rgba(0,0,0,.55); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.15)}
.nf-cf-info .p{padding:8px 14px; border-radius:999px; font-size:13px; font-weight:800; background:var(--blue)}
.nf-cf-arrow{position:absolute; top:45%; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.4); color:#fff;
  font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:5}
.nf-cf-arrow.l{left:0}.nf-cf-arrow.r{right:0}

/* ---------- телефон / портрет: горизонтальный занавес ---------- */
@media (max-width:768px), (orientation:portrait) and (max-width:1024px){
  .nf-hero{cursor:default; --cut:86%}
  .nf-layer.cat{clip-path:inset(0 0 calc(100% - var(--cut)) 0)}
  .nf-layer.cat .nf-grid{left:0; bottom:calc(100% - var(--cut))}
  .nf-layer.cus .nf-grid{right:0; top:var(--cut)}
  .nf-grid{grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:12px; padding:20px 5vw 24px; align-items:start}
  .nf-layer.cat .nf-grid{padding-top:72px}
  .nf-copy{max-width:none; text-align:center; margin:0 auto}
  .nf-badge{margin-bottom:10px; font-size:10px; padding:6px 12px}
  .nf-h1{font-size:clamp(28px,8vw,38px); margin-bottom:10px}
  .nf-lead{display:none}
  .nf-btn{padding:13px 26px; font-size:14px}
  .nf-grid>:last-child{align-self:center; max-height:52svh; justify-self:center}
  .nf-cf{aspect-ratio:auto; height:min(46svh,400px)}
  .nf-cf-info{bottom:-6px}
  .nf-ba{width:min(100%,50svh); aspect-ratio:1/1; margin:0 auto}
  .nf-bar{top:var(--cut); bottom:auto; left:0; right:0; width:auto; height:3px; margin:-1px 0 0 0}
  .nf-grip{top:var(--cut); left:50%; cursor:ns-resize; touch-action:none; padding:5px}
  .nf-grip button{font-size:12px; padding:8px 12px}
  .nf-grip .k{width:32px; height:32px}
  .nf-layer.cus .nf-peek{left:50%; top:calc(var(--cut) + 44px)}
  .nf-layer.cat .nf-peek{left:50%; top:calc(var(--cut)/2)}
}

@media (prefers-reduced-motion:reduce){
  .nf-grid>*,.nf-cf-fig,.nf-ba-pair,.nf-ba-caption,.nf-cf-info{transition-duration:.01ms!important}
}

/* Клик по половине раскрывает её — показываем это курсором. Раньше граница
   следила за мышью, и подсказка была не нужна; теперь нужна. */
.nf-world{cursor:pointer}
.nf-grip{cursor:col-resize}
@media (max-width:768px), (orientation:portrait) and (max-width:1024px){
  .nf-grip{cursor:row-resize}
}