:root{
  --bg1: #081029;
  --bg2: #3b7bd3;
  --accent: #ffd24d;
  --muted: #c8d6ea;
  --glass: rgba(255,255,255,0.06);
}

*{box-sizing:border-box}

html,body{
  min-height:100%;
  margin:0;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial;
}

body{
  background: linear-gradient(180deg, var(--bg1) 0%, #0b2b55 40%, var(--bg2) 100%);
  color:#fff;
  padding:32px;
}

/* Container */
.wrap{
  width:100%;
  max-width:1100px;
  margin:0 auto;
  text-align:center;
  position:relative;
  border-radius:14px;
  padding:36px;
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.02),
    rgba(255,255,255,0.01)
  );
  box-shadow: 0 10px 40px rgba(2,6,23,0.6);
  overflow:hidden;
}

/* Header */
.hero{z-index:5;position:relative}
.title{
  font-size: clamp(28px, 4.4vw, 48px);
  letter-spacing:2px;
  margin:0;
  color:var(--accent);
  text-shadow: 0 6px 18px rgba(0,0,0,0.6);
}

/* Sky / animation area */
.sky{
  position:relative;
  height:360px;
  margin:18px 0 28px;
  border-radius:10px;
  overflow:hidden;

  /* Starry sky */
  background-color:#050b1f;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 25% 70%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1px 1px at 40% 40%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 55% 15%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 65% 60%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 75% 80%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 85% 30%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 95% 50%, rgba(255,255,255,0.6), transparent);
}

/* Canvas for particles covers the whole .sky */
.particle-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:2;
  pointer-events:none;
}

/* Wrapper: hidden until image loaded */
.buzz-wrap{
  position:absolute;
  left:-40%;
  top:90%;
  z-index:3;
  display:flex;
  align-items:center;
  gap:14px;
  pointer-events:none;

  opacity:0;
  visibility:hidden;
  transition:none;
  animation:none;
}

.buzz-wrap.ready{
  visibility:visible;
  opacity:0;
  transition:none;
}

/* start flying */
.buzz-wrap.animate{
  opacity:1;
  visibility:visible;
  transition: opacity .25s ease;
  animation: fly 12s linear infinite;
}

/* Buzz hidden until animate */
.buzz{
  width:340px;
  max-width:44%;
  filter: drop-shadow(0 18px 30px rgba(0,0,0,0.55));
  transform-origin:center center;
  will-change:transform,left,top;
  display:block;
  visibility:hidden;
}

/* Bubble */
.bubble{
  background: linear-gradient(180deg,#fff 0%, #f5f8ff 100%);
  color:#0b2b55;
  padding:10px 14px;
  border-radius:18px;
  font-weight:700;
  box-shadow: 0 8px 30px rgba(3,10,40,0.45);
  white-space:nowrap;
  font-size:1rem;
  user-select:none;
  pointer-events:none;

  opacity:0;
  visibility:hidden;
  transform: translateY(-6px) translateX(-6px);
  transform-origin:left center;
  transition: opacity .18s ease, transform .18s ease;
}

/* When animated, show the buzz image and the bubble */
.buzz-wrap.animate .buzz{
  visibility:visible;
}
.buzz-wrap.animate .bubble{
  visibility:visible;
  opacity:1;
  transform: translateY(-6px) translateX(0);
}

/* Diagonal fly: bottom-left -> top-right */
@keyframes fly{
  0%   { left:-45%; top:92%; transform: translateY(-50%) rotate(-10deg) scale(1.06); }
  12%  { left:-45%; top:92%; transform: translateY(-50%) rotate(-8deg)  scale(1.06); }
  55%  { left:110%; top:12%; transform: translateY(-50%) rotate(8deg)   scale(1.00); }
  100% { left:110%; top:12%; transform: translateY(-50%) rotate(8deg)   scale(1.00); }
}

/* Contact area */
.contact{ margin-top:6px; z-index:6; position:relative; }
.email-row{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; }
.email-text{
  display:inline-block;
  min-width:240px;
  padding:10px 14px;
  border-radius:8px;
  background:var(--glass);
  color:#fff;
  font-weight:600;
  font-size:1.05rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.02);
  user-select:none;
}

.controls{display:inline-flex;align-items:center;gap:10px}
.btn{
  background:linear-gradient(180deg,#fff 0%, #ffeaa7 100%);
  border:none;
  color:#0b2b55;
  font-weight:600;
  padding:10px 14px;
  border-radius:8px;
  cursor:pointer;
  transition:transform .12s ease, box-shadow .12s;
  box-shadow: 0 6px 18px rgba(11,43,85,0.28);
}
.btn:active{transform:translateY(1px)}

.copied{
  color:#42d36f;
  font-weight:700;
  font-size:0.95rem;
}

.note{
  color:#b7c7e0;
  margin-top:10px;
  font-size:0.9rem;
}

@media (max-width:640px){
  .sky{height:300px}
  .buzz{width:220px}
  .bubble{font-size:0.9rem;padding:8px 10px}
  .email-text{font-size:0.95rem;padding:8px 10px; min-width:200px;}
}