/* ============================================================
   Merakhi & Muse — birthday intro overlay (for Krishna)
   A candlelit welcome that fades away into the site.
   Loads on both variants. Uses brand tokens from styles.css.
   ============================================================ */

.bday {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 8vw 6vw;
  overflow: hidden;
  background:
    radial-gradient(ellipse 70% 55% at 50% 42%, rgba(96, 22, 28, 0.95), transparent 72%),
    #2C080C;
  opacity: 1;
  transition: opacity 1.1s var(--ease-m, cubic-bezier(0.16,1,0.3,1)),
              visibility 1.1s var(--ease-m, cubic-bezier(0.16,1,0.3,1));
}
.bday.is-leaving { opacity: 0; visibility: hidden; }

body.bday-open { overflow: hidden; }

/* warm paper grain */
.bday::after {
  content: "";
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' seed='6'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  background-size: 220px 220px;
  opacity: 0.06;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

/* drifting gold dust */
.bday-dust { position: absolute; inset: 0; pointer-events: none; }
.bday-dust span {
  position: absolute;
  bottom: -10px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(217,193,140,0.9), rgba(201,168,106,0));
  opacity: 0;
  animation: bdayRise linear infinite;
}
.bday-dust span:nth-child(1){ left: 12%; width:3px;height:3px; animation-duration: 11s; animation-delay: 0s; }
.bday-dust span:nth-child(2){ left: 24%; width:5px;height:5px; animation-duration: 14s; animation-delay: 2s; }
.bday-dust span:nth-child(3){ left: 38%; width:2px;height:2px; animation-duration: 9s;  animation-delay: 4s; }
.bday-dust span:nth-child(4){ left: 51%; width:4px;height:4px; animation-duration: 13s; animation-delay: 1s; }
.bday-dust span:nth-child(5){ left: 63%; width:3px;height:3px; animation-duration: 10s; animation-delay: 5s; }
.bday-dust span:nth-child(6){ left: 74%; width:5px;height:5px; animation-duration: 15s; animation-delay: 3s; }
.bday-dust span:nth-child(7){ left: 85%; width:2px;height:2px; animation-duration: 12s; animation-delay: 6s; }
.bday-dust span:nth-child(8){ left: 92%; width:4px;height:4px; animation-duration: 13s; animation-delay: 2.5s; }
@keyframes bdayRise {
  0%   { transform: translateY(0) translateX(0); opacity: 0; }
  12%  { opacity: 0.9; }
  80%  { opacity: 0.7; }
  100% { transform: translateY(-104vh) translateX(20px); opacity: 0; }
}

.bday-inner {
  position: relative;
  z-index: 2;
  max-width: 640px;
}

.bday-kicker {
  font-family: var(--serif-caps);
  font-size: 0.72rem;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 2rem;
  opacity: 0;
  animation: bdayUp 1s var(--ease-m) 0.3s forwards;
}
.bday-pre {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: clamp(1.3rem, 3vw, 1.9rem);
  color: var(--ink-on-dark);
  margin-bottom: 0.4rem;
  opacity: 0;
  animation: bdayUp 1s var(--ease-m) 0.6s forwards;
}
.bday-name {
  font-family: "Poiret One", var(--serif-caps);
  font-weight: 400;
  font-size: clamp(3.4rem, 12vw, 7rem);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--gold-light);
  margin: 0 0 2rem;
  opacity: 0;
  animation: bdayName 1.4s var(--ease-m) 0.9s forwards;
}
.bday-msg {
  font-family: var(--serif-display);
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  line-height: 1.65;
  color: var(--ink-on-dark);
  max-width: 30rem;
  margin: 0 auto 2.4rem;
  opacity: 0;
  animation: bdayUp 1.1s var(--ease-m) 1.5s forwards;
}
.bday-sign {
  font-family: var(--serif-display);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--gold);
  margin-bottom: 3rem;
  opacity: 0;
  animation: bdayUp 1.1s var(--ease-m) 2s forwards;
}
.bday-enter {
  opacity: 0;
  animation: bdayUp 1.1s var(--ease-m) 2.4s forwards;
}
.bday-skip {
  display: block;
  margin: 1.6rem auto 0;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--serif-caps);
  font-size: 0.62rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: rgba(217, 193, 140, 0.5);
  transition: color 0.5s var(--ease-m);
  opacity: 0;
  animation: bdayUp 1.1s var(--ease-m) 2.7s forwards;
}
.bday-skip:hover { color: var(--gold-light); }

@keyframes bdayUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes bdayName {
  from { opacity: 0; transform: translateY(24px); letter-spacing: 0.14em; }
  to   { opacity: 1; transform: translateY(0); letter-spacing: -0.02em; }
}

@media (prefers-reduced-motion: reduce) {
  .bday-kicker, .bday-pre, .bday-name, .bday-msg, .bday-sign,
  .bday-enter, .bday-skip { animation: none; opacity: 1; }
  .bday-dust { display: none; }
  .bday { transition: opacity 0.3s linear; }
}