/* Astrology-Vsem — modern enhancement layer (starfield hero + scroll reveal + micro-interactions) */

/* ---------- Hero starfield ---------- */
/* Positioning context is the outer record wrapper, NOT .t-cover itself —
   Tilda's cover/parallax script indexes .t-cover's own children, so we must
   never insert siblings inside it (see modern-enhance.js for details). */
#rec27881530 {
  position: relative;
  overflow: hidden;
}
#starfield {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Slow-drifting glow behind the title — makes the hero read as alive even in a static screenshot */
#rec27881530::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(circle at 50% 45%, rgba(232, 200, 116, 0.30), rgba(124, 108, 246, 0.16) 38%, transparent 65%);
  animation: mx-glow-pulse 7s ease-in-out infinite;
}

@keyframes mx-glow-pulse {
  0%, 100% { opacity: 0.55; transform: scale(1); }
  50%      { opacity: 1;    transform: scale(1.08); }
}

#rec27881530 .t153__uptitle {
  animation: mx-fade-in 1s ease .15s both;
  letter-spacing: .14em;
  text-transform: uppercase;
}
#rec27881530 .t153__title {
  text-shadow: 0 0 26px rgba(232, 200, 116, 0.45), 0 2px 14px rgba(0, 0, 0, 0.55);
  animation: mx-title-in 1.1s cubic-bezier(.19,1,.22,1) both;
}
#rec27881530 .t153__descr {
  animation: mx-fade-in 1.1s ease .35s both;
}

@keyframes mx-title-in {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes mx-fade-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- Scroll-reveal for content blocks ---------- */
.mx-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .8s cubic-bezier(.19,1,.22,1), transform .8s cubic-bezier(.19,1,.22,1);
  transition-delay: var(--mx-delay, 0ms);
  will-change: opacity, transform;
}
.mx-reveal.mx-in {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- Warmer micro-interactions ---------- */
.t585__trigger-button,
.t-btn,
a.t-submit,
button.t-submit {
  transition: transform .35s cubic-bezier(.19,1,.22,1), box-shadow .35s ease, filter .35s ease;
}
.t585__header:hover .t585__trigger-button {
  transform: translateX(4px);
}
.t-btn:hover,
a.t-submit:hover,
button.t-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(31, 91, 255, 0.32);
  filter: brightness(1.05);
}

/* ---------- Tariff badges v2 (blue medallion + orbiting gold stars + sonar pings + spinning core) ---------- */
.mx-badge {
  width: 112px; height: 112px; margin: 12px auto;
  border-radius: 50%;
  position: relative;
  background: radial-gradient(circle at 35% 30%, #325497, #0d1b3d 78%);
  border: 2px solid rgba(232, 200, 116, .6);
  box-shadow: 0 0 16px 2px rgba(232, 200, 116, .32), inset 0 0 18px rgba(124, 108, 246, .2);
}

/* expanding sonar-ping rings — the "wow, something is happening" cue */
.mx-badge-ping {
  position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid rgba(232, 200, 116, .8);
  animation: mx-ping 3s cubic-bezier(.2,.7,.4,1) infinite;
  opacity: 0;
}
.mx-badge-ping:nth-child(2) { animation-delay: 1s; }
.mx-badge-ping:nth-child(3) { animation-delay: 2s; }
@keyframes mx-ping {
  0%   { transform: scale(.82); opacity: .9; border-color: rgba(232, 200, 116, .9); }
  70%  { opacity: .35; }
  100% { transform: scale(1.55); opacity: 0; border-color: rgba(124, 108, 246, .5); }
}

/* mini stars revolving around the badge, each on its own orbit ring */
.mx-badge-orbit {
  position: absolute; inset: -6px;
  animation: mx-orbit-spin linear infinite;
}
.mx-badge-orbit--rev { animation-direction: reverse; }
.mx-orbit-star {
  position: absolute; top: 0; left: 50%;
  width: 9px; height: 9px; margin-left: -4.5px;
  background: radial-gradient(circle at 35% 30%, #fff8e6, #e8c874 60%, #c4952f 100%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 4px rgba(232, 200, 116, .9));
}
@keyframes mx-orbit-spin { to { transform: rotate(360deg); } }

/* central star — breathes AND spins, a visible shape transformation, not just a glow pulse */
.mx-badge-core {
  position: absolute;
  top: 50%; left: 50%;
  width: 40px; height: 40px;
  margin: -20px 0 0 -20px;
  background: linear-gradient(160deg, #fff8e6, #e8c874 45%, #c4952f 100%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  filter: drop-shadow(0 0 6px rgba(232, 200, 116, .75));
  animation: mx-core-transform 4.5s ease-in-out infinite;
}
@keyframes mx-core-transform {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 6px rgba(232, 200, 116, .75)); }
  50%      { transform: scale(1.22) rotate(170deg); filter: drop-shadow(0 0 14px rgba(232, 200, 116, 1)); }
}

/* Tier 1 (Для себя) — one orbit, one satellite star */
.mx-badge--tier1 .mx-badge-orbit { width: 100%; height: 100%; animation-duration: 9s; }

/* Tier 2 (Профессия) — two orbits spinning opposite ways, bigger core */
.mx-badge--tier2 .mx-badge-core { width: 46px; height: 46px; margin: -23px 0 0 -23px; }
.mx-badge--tier2 .mx-badge-orbit { animation-duration: 8s; }
.mx-badge--tier2 .mx-badge-orbit--inner { inset: 12px; animation-duration: 5s; }

/* Tier 3 (VIP) — three orbits, biggest core, extra slow dashed halo */
.mx-badge--tier3 .mx-badge-core { width: 54px; height: 54px; margin: -27px 0 0 -27px; }
.mx-badge--tier3 .mx-badge-orbit { animation-duration: 10s; }
.mx-badge--tier3 .mx-badge-orbit--inner { inset: 14px; animation-duration: 6s; }
.mx-badge-halo {
  position: absolute; inset: -3px; border-radius: 50%;
  border: 1px dashed rgba(232, 200, 116, .6);
  animation: mx-ring-spin 18s linear infinite;
}
@keyframes mx-ring-spin { to { transform: rotate(360deg); } }

/* ---------- Respect reduced-motion preference ---------- */
@media (prefers-reduced-motion: reduce) {
  #starfield { display: none; }
  .mx-reveal,
  #rec27881530 .t153__title,
  #rec27881530 .t153__uptitle,
  #rec27881530 .t153__descr,
  .mx-badge-orbit,
  .mx-badge-core,
  .mx-badge-halo {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .mx-badge-ping {
    display: none !important;
  }
}