/* style.css - decorative landing for "Anh yêu Ruby" */
:root{
  --bg1: #0f1024;
  --bg2: #2b0033;
  --accent1: #ff2d55;
  --accent2: #ff6b9a;
  --glass: rgba(255,255,255,0.06);
  --text: #fff;
  --muted: rgba(255,255,255,0.75);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;}
.bg{
  position:fixed;inset:0;background:radial-gradient(circle at 10% 20%, rgba(255,45,85,0.08), transparent 8%),
                                radial-gradient(circle at 90% 80%, rgba(0,200,255,0.03), transparent 12%),
                                linear-gradient(180deg,var(--bg1),var(--bg2));
  filter:blur(20px) contrast(1.05);
  z-index:-2;
}

/* subtle star field */
.bg::after{
  content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity:0.6;
  mix-blend-mode:overlay;
}

/* hero */
.hero{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:48px 20px;}
.container{max-width:980px;width:100%;}

.card{
  backdrop-filter:blur(8px) saturate(120%);
  background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:20px;padding:48px;text-align:center;color:var(--text);
  box-shadow: 0 10px 30px rgba(11,9,20,0.6), inset 0 1px 0 rgba(255,255,255,0.02);
  position:relative; overflow:hidden;
}

.gem{width:120px;height:120px;margin:0 auto 18px;animation:float 4s ease-in-out infinite;}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-10px)}100%{transform:translateY(0)}}

.title{font-size:48px;margin:6px 0 8px;letter-spacing:0.6px;}
.title .ruby{background:linear-gradient(90deg,var(--accent2),var(--accent1));-webkit-background-clip:text;background-clip:text;color:transparent;padding:0 6px;border-radius:6px;display:inline-block;}

.subtitle{color:var(--muted);margin:0 0 18px}

.decor{display:flex;gap:12px;justify-content:center;align-items:center;margin-top:6px}
.btn{padding:12px 18px;border-radius:999px;border:0;background:linear-gradient(90deg,var(--accent1),var(--accent2));color:white;font-weight:600;cursor:pointer;box-shadow:0 6px 20px rgba(255,45,85,0.2);transition:transform .18s ease}
.btn:active{transform:translateY(2px)}
.btn.outline{background:transparent;border:1px solid rgba(255,255,255,0.08);color:var(--muted);box-shadow:none}

/* confetti container */
#confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}

/* floating hearts */
.heart{
  position:fixed;left:50%;top:50%;width:18px;height:18px;background:var(--accent1);
  transform:translate(-50%,-50%) rotate(45deg);
  border-radius:3px;
  box-shadow:0 6px 18px rgba(179,20,75,0.2);
}
.heart::before,.heart::after{content:"";position:absolute;border-radius:50%;width:18px;height:18px;background:var(--accent1)}
.heart::before{top:-9px;left:0}
.heart::after{left:-9px;top:0}

/* responsive */
@media (max-width:520px){
  .title{font-size:28px}
  .card{padding:28px;border-radius:16px}
  .gem{width:80px;height:80px}
}