/* ==========================================================================
   v4/welcome.css — поздравительная страница-вход.
   Палитра та же («Песок и море»), но взята её «вечерняя» половина: глубокая
   волна как ночное небо, песок и закатный оранжевый — как огни салюта.
   ========================================================================== */

.welcome {
  min-height: 100svh;
  margin: 0;
  display: grid;
  place-items: center;
  padding: var(--s-6, 2rem) var(--s-5, 1.5rem);
  background:
    radial-gradient(120% 90% at 50% 8%, #17414d 0%, #0f2b34 45%, #091b21 100%);
  color: var(--onphoto, #fff);
  overflow: hidden;
  position: relative;
}

/* Салют рисуется на канве во весь экран, ниже текста. */
.fx {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* Всплывающие сердечки — отдельным слоем, чтобы канва оставалась чистой. */
.hearts {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.hearts span {
  position: absolute;
  bottom: -8vh;
  font-size: 1.4rem;
  color: #ff8fa3;
  opacity: 0;
  animation: float-up linear infinite;
  will-change: transform, opacity;
}

@keyframes float-up {
  0%   { opacity: 0; transform: translateY(0) scale(0.6) rotate(-8deg); }
  12%  { opacity: 0.85; }
  80%  { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-112vh) scale(1.05) rotate(10deg); }
}

.wrap {
  position: relative;
  z-index: 1;
  max-width: 46ch;
  text-align: center;
  outline: none;
}

.eyebrow {
  margin: 0 0 var(--s-4, 1rem);
  font-family: var(--sans);
  font-size: var(--t-micro, 0.72rem);
  letter-spacing: var(--tr-caps, 0.28em);
  text-transform: uppercase;
  color: var(--heroem, #ffce7a);
  animation: rise 0.8s 0.1s both ease-out;
}

.title {
  margin: 0;
  font-family: var(--serif);
  font-weight: 500;
  font-size: var(--t-h1, clamp(2.5rem, 1.5rem + 4.6vw, 5.2rem));
  line-height: var(--lh-tight, 1.06);
  text-wrap: balance;
}

.title__line {
  display: block;
  animation: rise 0.9s both ease-out;
}
.title__line:nth-child(1) { animation-delay: 0.2s; }
.title__line--em {
  font-style: italic;
  color: var(--heroem, #ffce7a);
  animation-delay: 0.45s;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

.heart {
  margin: var(--s-5, 1.5rem) auto var(--s-4, 1rem);
  width: 68px;
  animation: rise 0.9s 0.7s both ease-out;
}

.heart svg {
  display: block;
  width: 100%;
  height: auto;
  fill: #ff6b81;
  filter: drop-shadow(0 0 18px rgba(255, 107, 129, 0.55));
  transform-origin: 50% 60%;
  animation: beat 1.5s 1.6s infinite ease-in-out;
}

@keyframes beat {
  0%, 28%, 100% { transform: scale(1); }
  12%           { transform: scale(1.14); }
  20%           { transform: scale(1.03); }
}

.lead {
  margin: 0 auto var(--s-6, 2rem);
  font-family: var(--sans);
  font-weight: 300;
  font-size: var(--t-lead, 1.2rem);
  line-height: var(--lh-body, 1.65);
  color: var(--onphoto-soft, #f4ece0);
  text-wrap: pretty;
  animation: rise 0.9s 0.9s both ease-out;
}

.cta {
  display: inline-block;
  min-height: 48px;
  padding: 0.9rem 2rem;
  border-radius: 999px;
  background: var(--accent, #e07b2f);
  color: var(--onaccent, #2f1d0b);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 1.05rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(224, 123, 47, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
  animation: rise 0.9s 1.1s both ease-out;
}

.cta:hover,
.cta:focus-visible {
  transform: translateY(-2px);
  background: #ef8b3d;
  box-shadow: 0 14px 36px rgba(224, 123, 47, 0.45);
}

.hint {
  margin: var(--s-4, 1rem) 0 0;
  font-family: var(--sans);
  font-size: var(--t-small, 0.83rem);
  color: rgba(244, 236, 224, 0.72);
  animation: rise 0.9s 1.3s both ease-out;
}

/* Уважение к системной настройке: без движения — статичная открытка. */
@media (prefers-reduced-motion: reduce) {
  .fx,
  .hearts { display: none; }
  .eyebrow,
  .title__line,
  .heart,
  .lead,
  .cta,
  .hint { animation: none; }
  .heart svg { animation: none; }
}