/* ============================================================
   FORGE ATLAS · EMERY BIRTHDAY · MAY 22
   Full-screen banner. Premium. Loud where it counts, quiet
   where it should be. For Emery — every May 22, forever.
   ============================================================ */

.emery-overlay{
  position:fixed; inset:0; z-index:9999;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  background:
    radial-gradient(ellipse 80% 60% at 50% 20%, rgba(212,168,67,.18), transparent 60%),
    radial-gradient(ellipse 60% 80% at 50% 100%, rgba(167,139,250,.15), transparent 60%),
    rgba(8,8,10,.96);
  backdrop-filter:blur(18px);
  animation:emeryIn .6s cubic-bezier(.2,.7,.2,1);
  overflow:hidden;
}
.emery-overlay.emery-fading{ animation:emeryOut .55s cubic-bezier(.4,0,.6,1) forwards; }
@keyframes emeryIn { from{opacity:0; backdrop-filter:blur(0)} to{opacity:1; backdrop-filter:blur(18px)} }
@keyframes emeryOut{ to{opacity:0; pointer-events:none} }

/* Confetti rain */
.emery-confetti{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
  z-index:1;
}
.emery-confetti-piece{
  position:absolute;
  top:-30px;
  border-radius:2px;
  opacity:.85;
  animation:emeryConfettiFall linear infinite;
  box-shadow:0 0 8px currentColor;
}
@keyframes emeryConfettiFall{
  0%   { transform:translateY(0) rotate(0deg); opacity:0; }
  10%  { opacity:.85; }
  100% { transform:translateY(105vh) rotate(720deg); opacity:.6; }
}

/* The card — the heart of it */
.emery-card{
  position:relative;
  z-index:2;
  width:100%; max-width:640px;
  max-height:92vh; overflow-y:auto;
  padding:40px 36px;
  background:
    radial-gradient(ellipse 100% 60% at 50% 0%, rgba(212,168,67,.14), transparent 70%),
    linear-gradient(180deg, rgba(212,168,67,.04), rgba(167,139,250,.04), #06060a 60%);
  border:2px solid;
  border-image:linear-gradient(135deg, #D4A843 0%, #f4cb6c 25%, #7eeaff 50%, #a78bfa 75%, #f87171 100%) 1;
  border-radius:20px;
  box-shadow:
    0 30px 80px rgba(0,0,0,.7),
    0 0 100px rgba(212,168,67,.20),
    0 0 60px rgba(167,139,250,.15),
    inset 0 0 0 1px rgba(255,255,255,.03);
  text-align:center;
  animation:emeryCardRise .9s cubic-bezier(.2,.7,.2,1) .15s backwards;
  scrollbar-width:thin;
  scrollbar-color:rgba(212,168,67,.30) transparent;
}
.emery-card::-webkit-scrollbar{ width:6px; }
.emery-card::-webkit-scrollbar-thumb{ background:rgba(212,168,67,.30); border-radius:3px; }
@keyframes emeryCardRise{
  from{ opacity:0; transform:translateY(40px) scale(.94); }
  to  { opacity:1; transform:none; }
}

/* Stars sprinkled around the card */
.emery-stars{
  position:absolute; inset:0;
  pointer-events:none;
  overflow:hidden;
  border-radius:18px;
}
.emery-star{
  position:absolute;
  color:#fbbf24;
  text-shadow:0 0 12px currentColor;
  animation:emeryStarTwinkle 2.4s ease-in-out infinite;
  opacity:.85;
}
@keyframes emeryStarTwinkle{
  0%,100%{ opacity:.3; transform:scale(.7); }
  50%    { opacity:1;  transform:scale(1.1); }
}

.emery-close{
  position:absolute; top:14px; right:14px;
  width:36px; height:36px; border-radius:50%;
  background:rgba(0,0,0,.55);
  border:1px solid rgba(255,255,255,.20);
  color:#fff; cursor:pointer;
  font-size:14px;
  display:grid; place-items:center;
  transition:all .2s ease;
  z-index:10;
}
.emery-close:hover{
  background:rgba(248,113,113,.20);
  border-color:#f87171;
  transform:rotate(90deg);
}

.emery-eyebrow{
  font-family:'JetBrains Mono', monospace;
  font-size:11px;
  letter-spacing:.30em;
  color:#D4A843;
  text-transform:uppercase;
  margin-bottom:16px;
  position:relative; z-index:3;
  animation:emeryFadeIn .8s ease .35s backwards;
}

.emery-headline{
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:clamp(38px, 7vw, 64px);
  line-height:1.05;
  letter-spacing:-.01em;
  margin-bottom:24px;
  color:#fff;
  position:relative; z-index:3;
  animation:emeryFadeIn .9s ease .5s backwards;
}
.emery-name{
  display:inline-block;
  font-size:clamp(56px, 10vw, 96px);
  line-height:1;
  margin-top:8px;
  background:linear-gradient(135deg, #f4cb6c 0%, #D4A843 30%, #7eeaff 55%, #a78bfa 80%, #f4cb6c 100%);
  background-size:300% 300%;
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  animation:emeryNameShimmer 5s ease-in-out infinite, emeryNameRise 1s cubic-bezier(.2,.7,.2,1) .65s backwards;
  filter:drop-shadow(0 0 20px rgba(212,168,67,.40)) drop-shadow(0 0 40px rgba(167,139,250,.25));
  letter-spacing:.01em;
}
@keyframes emeryNameShimmer{
  0%,100%{ background-position:0% 50%; }
  50%    { background-position:100% 50%; }
}
@keyframes emeryNameRise{
  from{ opacity:0; transform:translateY(20px) scale(.9); }
  to  { opacity:1; transform:none; }
}

/* The cake */
.emery-cake{
  position:relative; z-index:3;
  margin:0 auto 24px;
  width:240px; max-width:60vw;
  animation:emeryFadeIn 1s ease .8s backwards;
}
.emery-cake svg{ width:100%; height:auto; display:block; filter:drop-shadow(0 8px 20px rgba(212,168,67,.30)); }
.emery-flame{
  transform-origin:center bottom;
  animation:emeryFlameDance 1.4s ease-in-out infinite;
  filter:drop-shadow(0 0 8px #fbbf24);
}
.emery-flame.f1{ animation-delay:0s; }
.emery-flame.f2{ animation-delay:.15s; }
.emery-flame.f3{ animation-delay:.30s; }
.emery-flame.f4{ animation-delay:.45s; }
@keyframes emeryFlameDance{
  0%,100%{ transform:scale(1) rotate(-2deg); }
  50%    { transform:scale(1.15, 1.25) rotate(2deg); }
}

/* The message — daddy's words */
.emery-message{
  position:relative; z-index:3;
  margin-bottom:24px;
  animation:emeryFadeIn 1s ease .95s backwards;
}
.emery-love{
  font-family:'Oswald', sans-serif;
  font-weight:500;
  font-size:clamp(18px, 3vw, 24px);
  color:#fff;
  margin:0 0 10px;
  letter-spacing:.01em;
  line-height:1.4;
}
.emery-shared{
  font-family:'JetBrains Mono', monospace;
  font-size:13px;
  color:rgba(255,255,255,.65);
  margin:0;
  letter-spacing:.04em;
}
.emery-shared-mark{
  display:inline-block;
  margin-left:6px;
  padding:2px 10px;
  background:linear-gradient(135deg, rgba(212,168,67,.15), rgba(126,234,255,.15));
  border:1px solid rgba(212,168,67,.40);
  border-radius:99px;
  color:#D4A843;
  font-weight:500;
  letter-spacing:.10em;
}

/* The quote — the thing she'll remember */
.emery-quote{
  position:relative; z-index:3;
  margin:24px 0;
  padding:24px 20px;
  border-top:1px dashed rgba(212,168,67,.30);
  border-bottom:1px dashed rgba(212,168,67,.30);
  font-family:'Oswald', sans-serif;
  font-style:italic;
  font-size:clamp(15px, 2.4vw, 19px);
  line-height:1.55;
  color:rgba(255,255,255,.92);
  animation:emeryFadeIn 1.1s ease 1.1s backwards;
}
.emery-quote-mark{
  font-style:normal;
  color:#D4A843;
  font-size:24px;
  vertical-align:-4px;
  margin:0 4px;
}
.emery-quote-text{ display:inline; }
.emery-quote-cite{
  display:block;
  margin-top:14px;
  font-family:'JetBrains Mono', monospace;
  font-style:normal;
  font-size:11px;
  letter-spacing:.18em;
  color:rgba(255,255,255,.45);
  text-transform:uppercase;
}

/* Signature line */
.emery-signature{
  display:flex; align-items:center; gap:14px;
  margin:24px 0 18px;
  position:relative; z-index:3;
  animation:emeryFadeIn 1s ease 1.25s backwards;
}
.emery-sig-line{
  flex:1; height:1px;
  background:linear-gradient(90deg, transparent, rgba(212,168,67,.50), transparent);
}
.emery-sig-text{
  font-family:'JetBrains Mono', monospace;
  font-size:9.5px;
  letter-spacing:.30em;
  color:rgba(212,168,67,.85);
  text-transform:uppercase;
  white-space:nowrap;
}

.emery-continue{
  display:inline-flex; align-items:center; gap:10px;
  padding:14px 28px;
  background:linear-gradient(135deg, #D4A843, #f4cb6c);
  border:none;
  border-radius:8px;
  color:#08080a;
  font-family:'Oswald', sans-serif;
  font-weight:600;
  font-size:14px;
  letter-spacing:.12em;
  text-transform:uppercase;
  cursor:pointer;
  position:relative; z-index:3;
  transition:all .25s ease;
  box-shadow:0 8px 24px rgba(212,168,67,.40);
  animation:emeryFadeIn 1s ease 1.4s backwards;
}
.emery-continue:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 32px rgba(212,168,67,.55);
}
.emery-continue:active{ transform:translateY(0); }

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

/* Mobile tweaks */
@media (max-width:600px){
  .emery-card{ padding:32px 22px; }
  .emery-quote{ padding:18px 14px; }
}

/* Reduced motion — keep the message, skip the spectacle */
@media (prefers-reduced-motion: reduce){
  .emery-overlay, .emery-card, .emery-name, .emery-headline,
  .emery-eyebrow, .emery-message, .emery-cake, .emery-quote,
  .emery-signature, .emery-continue, .emery-flame,
  .emery-star, .emery-confetti-piece{
    animation:none !important;
  }
  .emery-confetti{ display:none; }
  .emery-name{ background-position:50% 50%; }
}

/* Print-friendly fallback (in case anyone ever prints this for her) */
@media print{
  .emery-overlay{
    position:relative;
    background:#fff;
    color:#000;
  }
  .emery-card{ box-shadow:none; border-color:#000; }
  .emery-name{ -webkit-text-fill-color:#000; color:#000; }
  .emery-confetti, .emery-stars, .emery-close, .emery-continue{ display:none; }
  .emery-quote{ color:#000; }
  .emery-shared, .emery-quote-cite, .emery-sig-text{ color:#444; }
}