:root{
  --ink:#e4ebfd;
  --muted:#8fa2c8;
  --line:rgba(140,175,255,.13);
  --accent:#a9c6ff;
}

*{ box-sizing:border-box; }
html, body { margin:0; padding:0; }

/* Скрываем {{ }} до инициализации Vue */
[v-cloak]{ display:none; }

body{
  min-height:100vh;
  background:#04070f;
  color:var(--ink);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ---------- небо ---------- */
#sky{
  position:fixed;
  inset:0;
  display:block;
  z-index:0;
  pointer-events:none;
  opacity:0;
  will-change: opacity;
}
#app.is-ready #sky{ animation: skyReveal 1.4s ease .1s forwards; }
@keyframes skyReveal{ to{ opacity:1; } }

.glow{
  position:fixed;
  inset:-10%;
  z-index:1;
  pointer-events:none;
  background:
    radial-gradient(55% 45% at 18% 22%, rgba(56,92,176,.22), transparent 70%),
    radial-gradient(50% 40% at 82% 30%, rgba(96,64,156,.18), transparent 70%),
    radial-gradient(70% 55% at 50% 105%, rgba(30,70,150,.26), transparent 70%);
  filter: blur(12px);
  animation: breathe 26s ease-in-out infinite alternate;
}

@keyframes breathe{
  from{ opacity:.72; transform: scale(1); }
  to  { opacity:1;   transform: scale(1.06); }
}

/* ---------- каркас ---------- */
.wrap{
  position:relative;
  z-index:2;
  max-width:1080px;
  margin:0 auto;
  padding: 13vh 24px 54px;
  min-height:100vh;
  display:flex;
  flex-direction:column;
}

/* ---------- стартовое состояние анимируемых блоков ---------- */
.hero,
.card,
footer{
  opacity:0;
  transform: translateY(18px);
  will-change: opacity, transform;
}

/* ---------- шапка ---------- */
.hero{ text-align:center; margin-bottom:56px; }

.eyebrow{
  margin:0 0 20px;
  font-size:11.5px;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--muted);
  opacity:.85;
}

h1{
  margin:0 0 16px;
  font-size: clamp(30px, 6.2vw, 52px);
  font-weight:300;
  letter-spacing:.07em;
  line-height:1.1;
  background: linear-gradient(180deg, #ffffff 0%, #b6cdff 62%, #6d8fd0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.sub{
  margin:0;
  font-size:14.5px;
  letter-spacing:.05em;
  color:var(--muted);
}

/* ---------- сетка ---------- */
.grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:18px;
  flex:1;
  align-items:stretch;
}

@media (max-width: 880px){
  .grid{ grid-template-columns: 1fr; }
  .wrap{ padding-top: 9vh; }
}

.card{
  position:relative;
  display:flex;
  flex-direction:column;
  padding:26px 24px 24px;
  border:1px solid var(--line);
  border-radius:18px;
  background: linear-gradient(180deg, rgba(126,163,245,.07), rgba(126,163,245,.022));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow:hidden;
  transition: border-color .5s ease;
}

.card::before{
  content:"";
  position:absolute;
  inset:0;
  background: radial-gradient(120% 80% at 50% -25%, rgba(169,198,255,.14), transparent 62%);
  pointer-events:none;
}

.card:hover{ border-color: rgba(150,185,255,.26); }

.card h2{
  position:relative;
  margin:0 0 22px;
  font-size:10.5px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--muted);
}

/* ---------- картинки внутри карточек ---------- */
.card-photo{
  display:block;
  width:100%;
  border-radius:12px;
  margin-bottom:18px;
  box-shadow: 0 4px 20px rgba(0,0,0,.4);
  opacity:.9;
  transition: opacity .4s ease;
}
.card-photo:hover{ opacity:1; }

/* ---------- луна ---------- */
.moon-stage{
  position:relative;
  display:flex;
  justify-content:center;
  padding:6px 0 4px;
}

.moon-svg{
  width:152px;
  height:152px;
  filter: drop-shadow(0 0 28px rgba(140,175,255,.26));
}

.moon-name{
  margin:18px 0 8px;
  text-align:center;
  font-size:17.5px;
  letter-spacing:.06em;
  font-weight:400;
}

.muted{
  margin:0;
  font-size:12.5px;
  letter-spacing:.04em;
  color:var(--muted);
  text-align:center;
}

.muted--left{ text-align:left; }

.card > .muted:last-child{ margin-top:auto; }

/* ---------- созвездие ---------- */
.constellation{
  display:block;
  width:100%;
  height:168px;
  margin:0 auto 18px;
  overflow:visible;
}

.c-lines{
  fill:none;
  stroke: rgba(150,182,240,.30);
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.c-stars{ filter: drop-shadow(0 0 5px rgba(175,205,255,.75)); }

.c-stars circle{
  fill:#dce7ff;
  animation: twinkle 5.5s ease-in-out infinite;
}

.c-stars circle:nth-child(1){ animation-delay:-0.2s; }
.c-stars circle:nth-child(2){ animation-delay:-1.9s; }
.c-stars circle:nth-child(3){ animation-delay:-3.1s; }
.c-stars circle:nth-child(4){ animation-delay:-0.9s; }
.c-stars circle:nth-child(5){ animation-delay:-4.2s; }
.c-stars circle:nth-child(6){ animation-delay:-2.4s; }
.c-stars circle:nth-child(7){ animation-delay:-3.7s; }

@keyframes twinkle{
  0%, 100%{ opacity:.55; }
  50%     { opacity:1; }
}

/* ---------- заметка ---------- */
.note{
  margin:0 0 22px;
  font-size:15px;
  line-height:1.75;
  color:#c7d3ee;
  letter-spacing:.012em;
}

/* ---------- подвал ---------- */
footer{
  margin-top:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:11px;
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--muted);
  text-align:center;
  flex-wrap:wrap;
}

.dot{
  width:6px;
  height:6px;
  border-radius:50%;
  background:#7fe0b0;
  box-shadow: 0 0 10px rgba(127,224,176,.9);
  animation: pulse 3.4s ease-in-out infinite;
  flex:0 0 auto;
}

@keyframes pulse{
  0%, 100%{ opacity:.45; transform:scale(.85); }
  50%     { opacity:1;   transform:scale(1); }
}

/* ---------- каскадное появление ---------- */
@keyframes fadeUp{
  to{ opacity:1; transform: translateY(0); }
}

#app.is-ready .hero{
  animation: fadeUp .95s cubic-bezier(.2,.7,.2,1) .05s forwards;
}
#app.is-ready .card:nth-child(1){
  animation: fadeUp .95s cubic-bezier(.2,.7,.2,1) .2s forwards;
}
#app.is-ready .card:nth-child(2){
  animation: fadeUp .95s cubic-bezier(.2,.7,.2,1) .35s forwards;
}
#app.is-ready .card:nth-child(3){
  animation: fadeUp .95s cubic-bezier(.2,.7,.2,1) .5s forwards;
}
#app.is-ready footer{
  animation: fadeUp .95s cubic-bezier(.2,.7,.2,1) .7s forwards;
}

/* ---------- доступность ---------- */
@media (prefers-reduced-motion: reduce){
  .glow, .c-stars circle, .dot { animation: none !important; }
  .hero, .card, footer {
    opacity:1 !important;
    transform:none !important;
    animation:none !important;
  }
  #sky { opacity:1 !important; animation:none !important; }
}