<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dark Gold Studio Form</title>
<style>
/* ====== RESET ====== */
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Poppins',sans-serif;
  background:radial-gradient(circle at top,#1a1a1a 0%,#000000 100%);
  color:#fff;display:flex;justify-content:center;align-items:center;
  flex-direction:column;min-height:100vh;overflow-x:hidden;
}

/* ====== HEADER SECTION ====== */
#eui-hpsfxr{
  background:linear-gradient(180deg,#b8860b,#d4af37,#f6e27a);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  height:35vh;min-height:260px;text-align:center;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  row-gap:10px;animation:goldPulse 4s ease-in-out infinite alternate;
}
@keyframes goldPulse{
  from{opacity:0.8;transform:scale(1);}
  to{opacity:1;transform:scale(1.02);}
}
#eui-hpsfxr h1{
  font-size:36px;font-weight:800;
  background:linear-gradient(180deg,#ffd700,#ffb700,#8b7500);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  letter-spacing:1px;text-transform:uppercase;
}
#eui-hpsfxr p{font-size:16px;color:#aaa}

/* ====== FORM CARD ====== */
#eui-rinjny{
  position:relative;
  background:rgba(20,20,20,0.6);
  backdrop-filter:blur(12px);
  border-radius:22px;
  box-shadow:0 0 25px rgba(255,215,0,0.2);
  padding:40px 35px;margin-top:-40px;
  max-width:420px;width:90%;
  border:1px solid rgba(255,215,0,0.25);
  overflow:hidden;
}
#eui-rinjny::before{
  content:"";position:absolute;inset:0;
  border-radius:22px;padding:2px;
  background:linear-gradient(180deg,#ffd700,#b8860b,#f6e27a);
  -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  pointer-events:none;opacity:0.5;
  animation:borderGlow 4s ease-in-out infinite alternate;
}
@keyframes borderGlow{
  from{opacity:0.3;box-shadow:0 0 8px #ffd700;}
  to{opacity:0.7;box-shadow:0 0 20px #ffcc00;}
}

/* ====== FORM ELEMENTS ====== */
.eui-form{
  display:flex;flex-direction:column;row-gap:22px;width:100%;
}
.eui-form label{
  font-size:13px;font-weight:600;text-transform:uppercase;
  color:#f8f8f8;margin-bottom:5px;
}
.eui-form input,.eui-form textarea{
  border-radius:50px;padding:12px 20px;
  border:2px solid transparent;
  outline:none;font-size:15px;
  background:rgba(255,215,0,0.08);
  color:#fff;transition:all .3s ease;
}
.eui-form textarea{border-radius:20px;resize:none}
.eui-form input:focus,.eui-form textarea:focus{
  border:2px solid #ffd700;
  box-shadow:0 0 10px rgba(255,215,0,0.7);
  background:rgba(255,215,0,0.15);
}

/* ====== BUTTON STYLING ====== */
button{
  border:none;outline:none;
  background:linear-gradient(180deg,#f5c518,#d4af37,#8b7500);
  color:#000;font-size:16px;font-weight:700;
  border-radius:50px;padding:14px 25px;
  cursor:pointer;position:relative;
  overflow:hidden;transition:all .4s ease;
  text-transform:uppercase;
}
button:hover{
  transform:translateY(-2px);
  box-shadow:0 0 25px rgba(255,215,0,0.6);
}

/* ====== LOADER ====== */
button.loading::after{
  content:"";
  position:absolute;top:50%;left:50%;
  width:26px;height:26px;
  border:3px solid #000;border-top-color:transparent;
  border-radius:50%;
  transform:translate(-50%,-50%);
  animation:spin 1s linear infinite;
}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}

/* ====== RESPONSIVE ====== */
@media(max-width:600px){
  #eui-hpsfxr h1{font-size:26px}
  #eui-rinjny{padding:30px 25px}
}
</style>
</head>
<body>

<section id="eui-hpsfxr">
  <h1>MAAL STAR STUDIO</h1>
  <p>Exclusive Artist Registration Portal ✨</p>
</section>

<section id="eui-rinjny">
  <form class="eui-form" id="form">
    <div class="form-group">
      <label for="name">Artist Name</label>
      <input type="text" id="name" placeholder="Enter artist name" required>
    </div>

    <div class="form-group">
      <label for="email">Email Address</label>
      <input type="email" id="email" placeholder="Enter email" required>
    </div>

    <div class="form-group">
      <label for="message">About Your Music</label>
      <textarea id="message" rows="4" placeholder="Describe your style..." required></textarea>
    </div>

    <div class="form-group submit-button-wrapper">
      <button type="submit" id="submitBtn">Submit Form</button>
    </div>
  </form>
</section>

<script>
const form=document.getElementById("form");
const btn=document.getElementById("submitBtn");

form.addEventListener("submit",(e)=>{
  e.preventDefault();
  btn.classList.add("loading");
  btn.textContent="";
  setTimeout(()=>{
    btn.classList.remove("loading");
    btn.textContent="Submitted ✓";
  },2000);
});
</script>

</body>
</html>
