﻿/* Shared accessibility and interaction styles */
:focus-visible{outline:2px solid #C084FC;outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation:none!important;transition:none!important}
  #starfield,canvas#starfield,.nebula{display:none!important}
}

/* Main page zodiac links fallback (replaces inline hover handlers) */
.zodiac-links a:hover,
.zodiac-links a:focus-visible{
  border-color:#A855F7!important;
  color:#C084FC!important;
}

/* Extra hard optimization for very slow internet / data saver */
.low-bandwidth #starfield,
.low-bandwidth canvas#starfield,
.low-bandwidth .nebula{
  display:none!important;
}

.low-bandwidth .anim{
  opacity:1!important;
  transform:none!important;
  transition:none!important;
}

.low-bandwidth *,
.low-bandwidth *::before,
.low-bandwidth *::after{
  animation:none!important;
}

/* Moderate optimization for 3G / low-memory devices */
.medium-bandwidth #starfield,
.medium-bandwidth canvas#starfield{
  opacity:.35!important;
}

.medium-bandwidth .nebula{
  filter:blur(120px)!important;
  opacity:.45!important;
  animation-duration:36s!important;
}

.medium-bandwidth .anim{
  transition-duration:.42s!important;
}

.low-bandwidth .hero-video{
  opacity:.5!important;
  filter:saturate(1.08) contrast(1.04) brightness(1.02)!important;
}

/* Modern readability layer for hero video */
.hero::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(1100px 560px at 18% 38%, rgba(8,6,18,.34), rgba(8,6,18,.76) 64%, rgba(8,6,18,.9) 100%),
    linear-gradient(180deg, rgba(6,4,14,.42) 0%, rgba(6,4,14,.6) 48%, rgba(6,4,14,.78) 100%);
}

.hero-content{
  position:relative;
  z-index:2;
}

.hero-title{
  text-wrap:balance;
  text-shadow:0 8px 34px rgba(0,0,0,.5);
}

.hero-desc{
  color:#d6caef!important;
}

/* Header glass and modern call-to-action state */
.nav.scrolled{
  background:linear-gradient(180deg, rgba(8,6,16,.92), rgba(8,6,16,.8))!important;
  border-bottom:1px solid rgba(192,132,252,.16)!important;
  box-shadow:0 10px 28px rgba(0,0,0,.28);
}

.nav-cta{
  box-shadow:0 8px 24px rgba(168,85,247,.28);
}

.nav-cta:hover{
  filter:saturate(1.08) brightness(1.06);
}

/* Mobile polish: cleaner hierarchy and better hero readability */
@media (max-width: 768px){
  .hero-video{
    opacity:.68!important;
    filter:saturate(1.32) contrast(1.16) brightness(1.1)!important;
  }

  .hero::before{
    background:
      radial-gradient(720px 460px at 50% 34%, rgba(10,8,22,.2), rgba(10,8,22,.72) 70%, rgba(10,8,22,.9) 100%),
      linear-gradient(180deg, rgba(8,6,16,.28) 0%, rgba(8,6,16,.58) 56%, rgba(8,6,16,.86) 100%);
  }

  .hero-title{
    letter-spacing:-0.02em;
    line-height:1.02!important;
  }

  .hero-badge{
    backdrop-filter:blur(12px) saturate(1.1);
    border-color:rgba(192,132,252,.26)!important;
  }

  .nav{
    padding:6px 0!important;
  }

  .nav-inner{
    height:56px!important;
  }

  .nav-links.open{
    background:linear-gradient(180deg, rgba(10,8,22,.98), rgba(10,8,22,.92))!important;
    border-bottom:1px solid rgba(192,132,252,.2)!important;
  }
}

/* Very small screens: avoid typographic crowding */
@media (max-width: 420px){
  .hero-title{
    font-size:clamp(2.05rem, 10vw, 2.65rem)!important;
  }
  .hero-desc{
    font-size:1rem!important;
    line-height:1.62!important;
  }
}

/* ─── 152-ФЗ Cookie banner ─── */
/* body-class когда banner показан — резервируем место снизу,
   чтобы banner не перекрывал кликабельные элементы (CTA, кнопки форм) */
body.has-cookie-banner{ padding-bottom:160px; }
@media (min-width:560px){ body.has-cookie-banner{ padding-bottom:120px; } }

#cookie-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9999;
  max-width:680px; margin:0 auto;
  background:rgba(13,10,26,.96); backdrop-filter:blur(12px);
  border:1px solid rgba(201,169,110,.3);
  border-radius:14px; padding:18px 20px;
  display:flex; flex-direction:column; gap:14px;
  font-family:'DM Sans', system-ui, sans-serif;
  color:#EDE8FF; box-shadow:0 12px 48px rgba(0,0,0,.5);
  animation:cb-slide .35s cubic-bezier(.2,.8,.2,1);
}
@keyframes cb-slide{ from{ transform:translateY(120%); opacity:0; } to{ transform:translateY(0); opacity:1; } }
#cookie-banner .cb-text{ font-size:13.5px; line-height:1.55; color:rgba(237,232,255,.85); }
#cookie-banner .cb-text a{ color:#E8C98A; text-decoration:underline; }
#cookie-banner .cb-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
#cookie-banner .cb-btn{
  border:none; cursor:pointer; padding:9px 18px; border-radius:9px;
  font-family:inherit; font-size:13px; font-weight:600;
  transition:transform .15s, opacity .15s;
}
#cookie-banner .cb-btn:hover{ transform:translateY(-1px); }
#cookie-banner .cb-btn-primary{
  background:linear-gradient(135deg, #7B5CF6, #5B3FD6); color:#fff;
}
#cookie-banner .cb-btn-secondary{
  background:rgba(255,255,255,.08); color:rgba(237,232,255,.85);
  border:1px solid rgba(255,255,255,.14);
}
@media (min-width:560px){
  #cookie-banner{ flex-direction:row; align-items:center; }
  #cookie-banner .cb-text{ flex:1; }
}

