/* Герой главной: свечная гостиная Селены.
   Сцена — чистый CSS (столик, бархат, фигура, свечи, карты), туман/пыль — canvas (hero.js).
   Ночь снаружи → свеча внутри: низ героя перетекает в --ground страницы. */

.hero-scene{
  --aura:#D8B25C;
  position:relative; width:100%; overflow:hidden; container-type:size;
  aspect-ratio:16/9; min-height:clamp(420px,62vh,560px); max-height:min(84vh,880px);
  background:radial-gradient(120% 90% at 50% 26%,#151b3d 0%,#0b1030 34%,#070a1c 60%,#040610 82%,#020308 100%);
  isolation:isolate;
}
@media (max-width:760px){ .hero-scene{ aspect-ratio:4/5; min-height:520px; } }

.hero-scene .lay{position:absolute;pointer-events:none}

/* фиолетовое свечение зала */
.hs-amb{left:50%;top:64%;width:80%;height:70%;transform:translate(-50%,-50%);z-index:1;
  background:radial-gradient(50% 50% at 50% 50%,rgba(74,38,122,.55),rgba(40,20,70,0) 70%)}
/* столешница */
.hs-table{left:0;bottom:0;width:100%;height:22%;z-index:2;
  background:linear-gradient(180deg,#17110c 0%,#0c0906 55%,#060403 100%);
  box-shadow:inset 0 8px 26px rgba(0,0,0,.7)}
.hs-edge{left:0;bottom:22%;width:100%;height:1.4%;z-index:2;
  background:linear-gradient(180deg,rgba(120,88,48,.35),rgba(120,88,48,0))}
/* бархат */
.hs-cloth{left:50%;bottom:8%;width:66%;height:34%;transform:translateX(-50%);z-index:2;border-radius:50%;
  background:radial-gradient(52% 60% at 50% 40%,#1b246a 0%,#131a52 34%,#0c1038 62%,#070a24 100%);
  box-shadow:inset 0 0 6cqw rgba(0,0,0,.55);filter:blur(.3cqw)}
/* фигура в капюшоне */
.hs-figure{left:50%;bottom:14%;width:40%;height:64%;transform:translateX(-50%);z-index:3;
  animation:figureBreath 9s ease-in-out infinite}
.hs-figure .cloak{position:absolute;left:50%;bottom:0;width:100%;height:62%;transform:translateX(-50%);
  border-radius:46% 46% 0 0/70% 70% 0 0;
  background:radial-gradient(60% 90% at 50% 20%,#0a0c1c 0%,#06070f 60%,rgba(4,5,10,0) 100%)}
.hs-figure .hood{position:absolute;left:50%;bottom:52%;width:34%;height:40%;transform:translateX(-50%);
  border-radius:50% 50% 44% 44%;
  background:radial-gradient(52% 60% at 50% 42%,#0b0d1e 0%,#06070f 70%,rgba(4,5,10,0) 100%)}
.hs-figure .rim{position:absolute;left:50%;bottom:52%;width:34%;height:40%;transform:translateX(-50%);
  border-radius:50% 50% 44% 44%;box-shadow:inset 0 3px 10px -4px rgba(216,178,92,.55);mix-blend-mode:screen}
/* ореолы свечей */
.hs-halo{z-index:4;border-radius:50%;transform:translate(-50%,50%);
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,178,80,.5),rgba(255,150,60,0) 70%);
  animation:flameGlow 3.1s ease-in-out infinite}
/* свет на бархате под картами */
.hs-floor{left:50%;top:74%;width:34%;height:16%;z-index:6;border-radius:50%;opacity:.4;
  background:radial-gradient(50% 50% at 50% 50%,var(--aura),rgba(216,178,92,0) 70%);
  animation:floorGlowPulse 6s ease-in-out infinite}
/* canvas тумана/пыли */
/* видео - главный слой; CSS-сцена под ним остаётся запасным вариантом */
.hs-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:9}
.hs-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:10;pointer-events:none}
/* ореолы поверх видео, привязаны к реальным свечам в кадре */
.hs-glow{z-index:10;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,176,80,.3),rgba(255,150,60,0) 70%)}
/* закрывает вотермарку KlingAI в правом нижнем углу */
.hs-scrim{left:0;right:0;top:0;height:52%;z-index:11;
  background:linear-gradient(180deg,rgba(3,4,10,.74) 0%,rgba(3,4,10,.5) 38%,rgba(3,4,10,.16) 72%,rgba(3,4,10,0) 100%)}
.hs-wm{right:0;bottom:0;width:24cqw;height:15cqw;z-index:11;
  background:radial-gradient(110% 110% at 100% 100%,#040610 0%,#040610 34%,rgba(4,6,16,.7) 52%,rgba(4,6,16,0) 82%)}
@keyframes flameGlowC{
  0%{opacity:.5;transform:translate(-50%,-50%) scale(1)}
  30%{opacity:.82;transform:translate(-50%,-50%) scale(1.09)}
  55%{opacity:.45;transform:translate(-50%,-50%) scale(.95)}
  100%{opacity:.5;transform:translate(-50%,-50%) scale(1)}
}

/* карты */
.hs-card{position:absolute;z-index:7;transform-origin:bottom center}
.hs-card .deal{animation:dealIn 15s cubic-bezier(.22,.61,.36,1) infinite}
.hs-card .face{width:11cqw;height:17.2cqw;border-radius:.8cqw;position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#0e1740,#080c22);border:.16cqw solid var(--aura);
  box-shadow:inset 0 0 2cqw rgba(0,0,0,.6),0 1cqw 2cqw rgba(0,0,0,.55)}
.hs-card .face::before{content:"";position:absolute;inset:.55cqw;border:.06cqw solid rgba(216,178,92,.45);border-radius:.5cqw}
.hs-card .pip{position:absolute;left:50%;width:.7cqw;height:.7cqw;transform:translateX(-50%) rotate(45deg);background:var(--aura)}
.hs-card .pip.t{top:.9cqw} .hs-card .pip.b{bottom:.9cqw}
.hs-moon{position:relative;width:4.2cqw;height:4.2cqw}
.hs-moon i{position:absolute;inset:0;border-radius:50%;background:var(--aura);filter:drop-shadow(0 0 8px var(--aura))}
.hs-moon b{position:absolute;top:-10%;left:26%;width:100%;height:100%;border-radius:50%;background:#0b1130}
.hs-star{position:relative;width:4.6cqw;height:4.6cqw;filter:drop-shadow(0 0 8px var(--aura))}
.hs-star i,.hs-star b{position:absolute;inset:14%;background:var(--aura)}
.hs-star i{transform:rotate(45deg)}
.hs-eye{position:relative;width:5.4cqw;height:3cqw}
.hs-eye i{position:absolute;inset:0;border:.3cqw solid var(--aura);border-radius:50%;filter:drop-shadow(0 0 8px var(--aura))}
.hs-eye b{position:absolute;left:50%;top:50%;width:1.7cqw;height:1.7cqw;transform:translate(-50%,-50%);border-radius:50%;background:var(--aura)}
.hs-eye u{position:absolute;left:50%;top:50%;width:.6cqw;height:.6cqw;transform:translate(-50%,-50%);border-radius:50%;background:#0b1130}

/* свечи */
.hs-candle{position:absolute;z-index:8;transform:translateX(-50%)}
.hs-candle .flame{width:1.3cqw;height:2.9cqw;transform-origin:bottom center;
  border-radius:50% 50% 50% 50%/62% 62% 40% 40%;
  background:radial-gradient(50% 40% at 50% 66%,#fff2c2 0%,#ffd274 34%,#ff8a3c 78%,#d85a1c 100%);
  box-shadow:0 0 1.6cqw rgba(255,170,70,.7);animation:flameFlicker .42s ease-in-out infinite}
.hs-candle .wax{width:.7cqw;margin:0 auto;border-radius:.2cqw;
  background:linear-gradient(180deg,#efe7d0,#c8bda0)}

/* типографика */
.hs-text{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;padding:clamp(1.1rem,3.6cqh,2.2rem) 5% 0;text-align:center;pointer-events:none}
.hs-eyebrow{display:flex;align-items:center;gap:.8cqw;color:var(--aura);font-family:var(--sans);
  font-size:clamp(.58rem,.85vw,.86rem);font-weight:600;letter-spacing:.3em;text-transform:uppercase;
  white-space:nowrap}
.hs-eyebrow span{width:2.6cqw;height:1px;background:linear-gradient(90deg,rgba(216,178,92,0),var(--aura))}
.hs-eyebrow span:last-child{background:linear-gradient(90deg,var(--aura),rgba(216,178,92,0))}
.hs-text h1{margin:.7cqh 0 0;font-weight:500;font-size:clamp(2.2rem,4.6vw,5rem);line-height:1;
  color:#f3ecdd;text-shadow:0 .4cqw 2cqw rgba(0,0,0,.65)}
.hs-text h1 em{display:block;font-style:italic;font-weight:400;color:var(--aura);font-size:.4em;margin-top:.35rem}
.hs-text p{margin:1cqh 0 0;font-size:clamp(1rem,1.3vw,1.4rem);color:rgba(232,228,244,.88);
  max-width:min(54ch,82%);line-height:1.5;text-shadow:0 2px 14px rgba(0,0,0,.8)}
@media (max-width:760px){
  .hs-text p{max-width:92%}
  /* эйброу с nowrap не влезал в 390px и обрезался: убираем линии, ужимаем трекинг */
  .hs-eyebrow{letter-spacing:.14em;font-size:.56rem;gap:.4rem}
  .hs-eyebrow span{display:none}
}
.hs-text .cta{pointer-events:auto;margin-top:clamp(.8rem,1.8cqh,1.3rem);
  font-size:clamp(.9rem,1vw,1.05rem);padding:.8rem 1.6rem}

/* низ героя растворяется в фоне страницы */
.hs-fade{left:0;right:0;bottom:0;height:16%;z-index:13;
  background:linear-gradient(to top,var(--ground) 0%,var(--ground) 6%,color-mix(in srgb,var(--ground) 55%,transparent) 26%,transparent 100%)}
.hs-vig{inset:0;z-index:13;
  background:radial-gradient(120% 100% at 50% 42%,rgba(0,0,0,0) 46%,rgba(0,0,0,.45) 78%,rgba(0,0,0,.82) 100%)}

@keyframes dealIn{
  0%{opacity:0;transform:translateY(60px) scale(.86)}
  5%{opacity:1;filter:drop-shadow(0 0 26px var(--aura))}
  8%{transform:translateY(-16px) scale(1.03)}
  13%{transform:translateY(0) scale(1);filter:drop-shadow(0 0 15px var(--aura))}
  40%{transform:translateY(-4px)} 62%{transform:translateY(1px)}
  78%{opacity:1;transform:translateY(0);filter:drop-shadow(0 0 13px var(--aura))}
  89%{opacity:0;transform:translateY(-36px) scale(1.03)}
  100%{opacity:0}
}
@keyframes flameFlicker{
  0%{transform:scaleY(1) scaleX(1) skewX(0);opacity:.95}
  22%{transform:scaleY(1.1) scaleX(.95) skewX(2.5deg);opacity:1}
  46%{transform:scaleY(.92) scaleX(1.04) skewX(-2.5deg);opacity:.88}
  70%{transform:scaleY(1.06) scaleX(.98) skewX(1.5deg);opacity:1}
  100%{transform:scaleY(1) scaleX(1) skewX(0);opacity:.95}
}
@keyframes flameGlow{
  0%{opacity:.5;transform:translate(-50%,50%) scale(1)}
  30%{opacity:.82;transform:translate(-50%,50%) scale(1.09)}
  55%{opacity:.45;transform:translate(-50%,50%) scale(.95)}
  100%{opacity:.5;transform:translate(-50%,50%) scale(1)}
}
@keyframes floorGlowPulse{
  0%{opacity:.3;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.58;transform:translate(-50%,-50%) scale(1.06)}
  100%{opacity:.3;transform:translate(-50%,-50%) scale(1)}
}
@keyframes figureBreath{
  0%{transform:translateX(-50%) translateY(0) scale(1)}
  50%{transform:translateX(-50%) translateY(-.6%) scale(1.008)}
  100%{transform:translateX(-50%) translateY(0) scale(1)}
}

/* уважение к покою: сцена остаётся, движение выключается */
@media (prefers-reduced-motion:reduce){
  .hero-scene *,.hero-scene{animation:none!important}
  .hs-card .deal{opacity:1!important;transform:none!important}
  .hs-canvas,.hs-video{display:none}
  /* вместо движущегося видео - неподвижный кадр */
  .hero-scene{background-image:url(/static/hero-poster.webp);background-size:cover;background-position:center}
}


/* ── Широкий экран: асимметрия ──────────────────────────────────────────────
   Чем шире вьюпорт, тем сильнее 16:9-видео кропится по вертикали и тем выше
   в кадре оказывается лицо - центрированный текст неизбежно на него наезжает.
   Уводим блок влево, в дым над свечами: лицо свободно, пустота слева занята. */
@media (min-width:1180px){
  .hs-text{align-items:flex-start;text-align:left;justify-content:center;
    padding:0 5% 0 clamp(3rem,7vw,8rem)}
  .hs-text h1{margin:.6rem 0 0}
  .hs-text p{max-width:32ch;margin:1rem 0 0}
  .hs-text .cta{margin-top:1.6rem}
  /* скрим тоже разворачиваем: тень слева направо, а не сверху вниз */
  .hs-scrim{top:0;height:100%;
    background:linear-gradient(95deg,rgba(3,4,10,.88) 0%,rgba(3,4,10,.66) 26%,
      rgba(3,4,10,.28) 48%,rgba(3,4,10,0) 66%)}
}