/***** reveal on scroll *****/
[data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .36s ease, transform .36s ease}
[data-reveal].is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  [data-reveal]{transition:none}
}

/***** subtle particles bg tint in hero *****/
.hero .particles::before{
  content:"";
  position:absolute;
  inset:0;
  background:
   radial-gradient(200px 120px at 70% 30%, rgba(34,211,238,.15), transparent),
   radial-gradient(160px 100px at 60% 70%, rgba(124,58,237,.18), transparent);
}

/* ========== HERO NOTIFICATIONS ========== */

.hero-notifs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 15;
}

.hero-notif {
  position: absolute;
  left: 68%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: clamp(320px, 32vw, 400px);
  padding: 12px 16px;
  border-radius: 20px;
  color: #fff;
  background: rgba(255,255,255,0.10);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.25);
  box-shadow: 0 6px 22px rgba(0,0,0,0.25);
  opacity: 0;
  font-family: system-ui, sans-serif;
  z-index: 20;
}

.hero-notif .row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.hero-notif .brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;  /* 💡 чтобы не переносилось */
}

.hero-notif .time {
  margin-left: auto;      /* увод вправо */
  font-size: 12px;
  opacity: .8;
  white-space: nowrap;    /* тоже предотвратит перенос */
}

/* animations */
@keyframes notif-enter {
  0% { transform: translate(-50%, 60px); opacity: 0; }
  80% { transform: translate(-50%, -4px); opacity: 1; }
  100% { transform: translate(-50%, 0); opacity: 1; }
}
@keyframes notif-exit {
  0% { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, -20px); opacity: 0; }
}

.hero-notif.is-in { animation: notif-enter 0.45s ease-out forwards; }
.hero-notif.is-out { animation: notif-exit 0.35s ease-in forwards; }

/* disable on mobile */
@media (max-width: 992px) {
  .hero-notif { display: none !important; }
}

/* ========== HEARTS BACKGROUND ========== */

.hero-anim-col {
  position: relative;
  height: 100%;              /* <-- занимает всю высоту */
  display: flex;
  align-items: flex-end;
}

.hearts-anim {
  position: absolute;
  bottom: 0;                 /* появление строго снизу */
  left: 75%;              /* центр правой колонки на десктопе */
  width: 30vw;
  transform: translateX(-50%);
  height: 100%;              /* важно: до самого верха hero */
  pointer-events: none;
  z-index: 3;
}

.heart {
  position: absolute;
  bottom: -30px;
  opacity: 0;
  animation: floatUp 7s linear forwards;
}

@keyframes floatUp {
  0%   { transform: translateY(0) scale(0.85); opacity: 0; }
  18%  { opacity: .34; }
  100% { transform: translateY(-110vh) scale(1.25); opacity: 0; }
}

/* MOBILE — центрируем на весь hero */
@media (max-width: 991px) {
  .hero {
    position: relative;
    overflow: hidden;
  }
  .hero-anim-col {
    height: 100%;
    position: absolute;
    inset: 0;           /* <-- теперь не ломает верстку */
    pointer-events: none;
  }
  .hearts-anim {
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
  }
}