/* Эффекты первого экрана (перенесены из прототипа js/fx, css/fx): стекло телефона, живая бумага, блики по материалу.
   Классы html.fx-glass / html.fx-paper / html.fx-sheen ставит js/effects.js. Слоты --w1*/--w2*/--w3* в transform стикеров
   нужны накладкам бликов и «вдавливанию» телефона; app.js их не пишет. */
html.fx .hero .sticker{
  transform:translate(calc(var(--dx,0px) + var(--tx,0px) + var(--w1x,0px) + var(--w2x,0px) + var(--w3x,0px)),calc(var(--dy,0px) + var(--py,0px) + var(--ty,0px) + var(--w1y,0px) + var(--w2y,0px) + var(--w3y,0px))) rotate(calc(var(--r,0deg) + var(--w1r,0deg) + var(--w2r,0deg) + var(--w3r,0deg))) scale(calc(var(--w1s,1) * var(--w2s,1) * var(--w3s,1)));
  opacity:var(--w1o,1);
}


/* Стекло экрана телефона: отражение, металлическая кромка, розовый отсвет. Только под html.fx-glass */

/* рамка: светлая кромка сверху-слева, у нижнего края еле заметный розовый отсвет; внешняя тень как в style.css */
html.fx-glass .hero-reel{
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.45),inset 0 -18px 24px -18px rgba(244,201,214,.35),0 18px 40px rgba(62,39,35,.3);
}

/* отражение: диагональная полоса поверх видео. ::before занят чёлкой, у .is-blocked ::after — кнопка play, его не трогаем.
   Слой шире карточки, чтобы при сдвиге края полосы не обрезались прямой линией; overflow:hidden родителя режет по скруглению */
html.fx-glass .hero-reel:not(.is-blocked)::after{
  content:"";position:absolute;top:-40%;bottom:-40%;left:-30%;right:-30%;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,
    transparent 42%,rgba(255,255,255,.07) 43.5%,rgba(255,255,255,.16) 46%,rgba(255,255,255,.07) 48.5%,transparent 50%,
    transparent 53%,rgba(255,255,255,.09) 53.8%,rgba(255,255,255,.09) 54.8%,transparent 55.6%);
  /* живёт от наклона: --tx/--ty ставит app.js от курсора или гироскопа, блик едет в противоход */
  translate:calc(var(--tx,0px) * -1.6) calc(var(--ty,0px) * -1.6);
  /* и сам по себе, чтобы без гироскопа тоже жило */
  animation:glassSweep 12s ease-in-out infinite alternate;
  will-change:transform;
}
@keyframes glassSweep{from{transform:translateX(-28%)}to{transform:translateX(28%)}}

/* розовый отсвет у нижнего края экрана, за плашкой с лайками (плашка выше видео, её ::before — под текстом плашки) */
html.fx-glass .hero-reel__tag::before{
  content:"";position:absolute;left:50%;bottom:-16px;width:220px;height:56px;margin-left:-110px;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 100%,rgba(244,201,214,.32),rgba(244,201,214,0) 70%);
}

/* нажатие: пока тянут — стекло чуть вдавлено (слот 3) */
html.fx-glass .hero-reel.is-drag{--w3s:.97}

@media (prefers-reduced-motion:reduce){
  html.fx-glass .hero-reel:not(.is-blocked)::after{animation:none;translate:none}
}


/* Живая бумага: свет, виньетка, маркер, время суток. Всё под html.fx-paper (кроме keyframes). */

/* --- пятна света: белый радиальный градиент, только transform/opacity; z-index 0 — под текстом (2) и стикерами (1) --- */
html.fx-paper .fx-light{
  position:absolute;z-index:0;pointer-events:none;
  width:70vw;min-width:280px;max-width:640px;aspect-ratio:1/1;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,255,255,.5),rgba(255,255,255,.26) 35%,rgba(255,255,255,.08) 68%,rgba(255,255,255,0) 100%);
  will-change:transform;
  animation:fxLightA 24s ease-in-out infinite;
}
html.fx-paper .fx-light--a{left:-14%;top:-10%}
html.fx-paper .fx-light--b{right:-18%;top:38%;animation-name:fxLightB;animation-duration:28s;animation-delay:-11s}
@keyframes fxLightA{
  0%,100%{transform:translate(0,0) scale(1)}
  35%{transform:translate(14vw,9vh) scale(1.14)}
  70%{transform:translate(-3vw,20vh) scale(.94)}
}
@keyframes fxLightB{
  0%,100%{transform:translate(0,0) scale(1)}
  30%{transform:translate(-12vw,-14vh) scale(1.1)}
  65%{transform:translate(-18vw,8vh) scale(.92)}
}

/* --- виньетка + тонирующая заливка времени суток: один псевдоэлемент поверх свечения и пятен, под стикерами --- */
html.fx-paper .hero{--fx-wash:rgba(255,255,255,0)}
html.fx-paper .hero::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 78% 68% at 50% 44%,rgba(62,39,35,0) 56%,rgba(62,39,35,.06) 100%),
    linear-gradient(var(--fx-wash),var(--fx-wash));
}

/* --- время суток в Ташкенте: сдвиг оттенка не больше ~4–6 %, тёмной темы нет --- */
html.fx-paper .hero.fx-time-morning{--fx-wash:rgba(255,236,208,.18)}   /* утро: чуть теплее и светлее */
html.fx-paper .hero.fx-time-evening{--fx-wash:rgba(236,160,196,.10)}   /* вечер: чуть розовее */
html.fx-paper .hero.fx-time-night{--fx-wash:rgba(96,58,92,.055)}       /* ночь: чуть глубже, текст эспрессо остаётся контрастным */
html.fx-paper .hero.fx-time-morning .glow{background:radial-gradient(closest-side,rgba(240,170,178,.72),rgba(247,206,208,.5) 48%,rgba(248,233,238,0) 100%)}
html.fx-paper .hero.fx-time-evening .glow{background:radial-gradient(closest-side,rgba(226,148,186,.8),rgba(242,190,212,.52) 48%,rgba(248,233,238,0) 100%)}
html.fx-paper .hero.fx-time-night .glow{background:radial-gradient(closest-side,rgba(212,138,176,.8),rgba(236,186,208,.5) 48%,rgba(248,233,238,0) 100%)}

/* --- «reels» маркером: неровная плашка с лёгким наклоном. transform (scaleX от интро) не трогаем — наклон через rotate --- */
html.fx-paper .hero .display em::before{
  left:-.1em;right:-.07em;bottom:0;height:.46em;
  border-radius:40% 60% 45% 55% / 60% 40% 55% 45%;
  background:linear-gradient(96deg,rgba(244,201,214,.8),var(--peony) 38%,rgba(232,162,187,.88));
  transform-origin:left center;rotate:-1.2deg;
}

/* --- reduced motion: пятна стоят на месте --- */
@media (prefers-reduced-motion:reduce){
  html.fx-paper .fx-light{animation:none;will-change:auto}
}


/* Блики по материалу стикеров. Накладка span.fx-sheen — брат стикера в .hero: рамка, маска (картинка стикера)
   и inline-переменные стикера (--d/--delay/--r/--dx/--tx/--py/слоты --w1..3*) пишутся из js/fx/sheen.js.
   Движение накладки — те же keyframes (pop/stamp/float/twinkle/wobble из style.css) и та же формула transform, что у стикера в core.css.
   ::before — пробегающий блик (раз в --dur, первый через 1.6 с), ::after — тихая статичная полоса, ходит за наклоном (--ph). */
html.fx-sheen .fx-sheen{
  position:absolute;z-index:1;pointer-events:none;overflow:hidden;will-change:transform;
  transform:translate(calc(var(--dx,0px) + var(--tx,0px) + var(--w1x,0px) + var(--w2x,0px) + var(--w3x,0px)),calc(var(--dy,0px) + var(--py,0px) + var(--ty,0px) + var(--w1y,0px) + var(--w2y,0px) + var(--w3y,0px))) rotate(calc(var(--r,0deg) + var(--w1r,0deg) + var(--w2r,0deg) + var(--w3r,0deg))) scale(calc(var(--w1s,1) * var(--w2s,1) * var(--w3s,1)));
  opacity:var(--w1o,1);
  -webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-position:center;mask-position:center;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  animation:float 7s ease-in-out infinite;animation-delay:var(--delay,0s);
}
html.fx-sheen .fx-sheen.is-wobble{animation:wobble .6s var(--ease)}

/* интро — зеркало правил .js-intro .sticker--hero / --stamp / --twinkle из style.css */
html.fx-sheen.js-intro .fx-sheen{animation:pop .8s var(--ease) both,float 7s ease-in-out infinite;animation-delay:var(--d,0s),var(--delay,0s)}
html.fx-sheen.js-intro .fx-sheen.is-wobble{animation:pop .8s var(--ease) both,float 7s ease-in-out infinite,wobble .6s var(--ease);animation-delay:var(--d,0s),var(--delay,0s),0s}
html.fx-sheen.js-intro .fx-sheen--stamp{animation:stamp .9s cubic-bezier(.25,1.2,.4,1) both,float 7s ease-in-out infinite;animation-delay:var(--d,0s),var(--delay,0s)}
html.fx-sheen.js-intro .fx-sheen--stamp.is-wobble{animation:stamp .9s cubic-bezier(.25,1.2,.4,1) both,float 7s ease-in-out infinite,wobble .6s var(--ease);animation-delay:var(--d,0s),var(--delay,0s),0s}
html.fx-sheen.js-intro .fx-sheen--twinkle{animation:pop .8s var(--ease) both,twinkle 3.2s ease-in-out infinite;animation-delay:var(--d,0s),calc(var(--d,0s) + .8s)}
html.fx-sheen.js-intro .fx-sheen--twinkle.is-wobble{animation:pop .8s var(--ease) both,twinkle 3.2s ease-in-out infinite,wobble .6s var(--ease);animation-delay:var(--d,0s),calc(var(--d,0s) + .8s),0s}
/* пока тянут — как у .sticker.is-drag: без анимаций, поверх всего (последним, чтобы перебить правила интро) */
html.fx-sheen .fx-sheen.is-drag,html.fx-sheen.js-intro .fx-sheen.is-drag{animation:none;z-index:30}

/* полоса блика */
html.fx-sheen .fx-sheen::before,html.fx-sheen .fx-sheen::after{content:"";position:absolute;inset:0}
html.fx-sheen .fx-sheen::before{background:var(--g);opacity:var(--o,.4);transform:translateX(-120%);translate:var(--ph,0px) 0}
html.fx-sheen .fx-sheen.is-run::before{animation:fxSheen var(--dur,7s) linear infinite;animation-delay:calc(1.6s + var(--ph0,0s))}
html.fx-sheen .fx-sheen::after{background:var(--g2);opacity:calc(var(--o,.4) * .45);translate:calc(var(--ph,0px) * 1.6) 0}

/* материалы */
html.fx-sheen .fx-sheen--cold{ /* искры, ноутбук: узкая холодная полоса с лёгкой радужностью */
  --o:1;
  --g:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.55) 50%,rgba(200,230,255,.35) 53%,rgba(255,214,236,.18) 56%,transparent 62%);
  --g2:linear-gradient(105deg,transparent 38%,rgba(225,240,255,.4) 50%,transparent 62%);
}
html.fx-sheen .fx-sheen--soft{ /* печать: широкий мягкий блик */
  --o:.3;
  --g:linear-gradient(105deg,transparent 22%,rgba(255,255,255,.8) 50%,transparent 78%);
  --g2:linear-gradient(105deg,transparent 25%,rgba(255,255,255,.6) 50%,transparent 75%);
}
html.fx-sheen .fx-sheen--metal{ /* скрепки, кольца: средняя металлическая полоска */
  --o:.4;
  --g:linear-gradient(105deg,transparent 36%,rgba(255,255,255,.7) 46%,rgba(255,255,255,.95) 50%,rgba(255,255,255,.7) 54%,transparent 64%);
  --g2:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);
}

@keyframes fxSheen{
  0%{transform:translateX(-120%);animation-timing-function:cubic-bezier(.4,0,.6,1)}
  16%{transform:translateX(120%)}
  100%{transform:translateX(120%)}
}

/* reduced: накладка не анимируется (как стикер), одна статичная мягкая полоса, ничего не движется */
@media (prefers-reduced-motion:reduce){
  html.fx-sheen .fx-sheen,html.fx-sheen.js-intro .fx-sheen,html.fx-sheen.js-intro .fx-sheen--stamp,html.fx-sheen.js-intro .fx-sheen--twinkle{animation:none}
  html.fx-sheen .fx-sheen::before{display:none}
  html.fx-sheen .fx-sheen::after{translate:0 0}
}