{"id":7,"date":"2026-07-18T23:55:21","date_gmt":"2026-07-18T23:55:21","guid":{"rendered":"https:\/\/bellanitamusic.com\/?page_id=7"},"modified":"2026-07-19T00:45:26","modified_gmt":"2026-07-19T00:45:26","slug":"home","status":"publish","type":"page","link":"https:\/\/bellanitamusic.com\/","title":{"rendered":"Home"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"7\" class=\"elementor elementor-7\">\n\t\t\t\t<div class=\"elementor-element elementor-element-997d0ae e-con e-atomic-element e-flexbox-base e-ec13456 \" data-id=\"997d0ae\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"997d0ae\">\n    \t\t<div class=\"elementor-element elementor-element-10e0196 elementor-widget elementor-widget-html\" data-id=\"10e0196\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- =====================================================================\n     BELLANITA \u2014 Coming Soon  (single-file build for the Elementor HTML widget)\n     Loads the transparent logo from your Media Library (upload bellanita-logo.png there).\n     Scoped to #bn-app so it will not affect the rest of your WordPress site.\n     Place in an Elementor \"HTML\" widget on an \"Elementor Canvas\" page, section padding 0.\n     ===================================================================== -->\n\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Manrope:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n<style>\n#bn-app {\n--bg:          #060104;   \n  --bg-2:        #0c0308;   \n  --hot-pink:    #ff2d94;   \n  --magenta:     #d6157a;   \n  --neon-pink:   #ff5cc0;   \n  --light-pink:  #ffc2e2;   \n  --burgundy:    #3a0819;   \n  --white:       #fef6fb;   \n  --soft-pink:   #ffafd6;   \n  --muted:       #b47e9c;   \n  --line:        rgba(255, 92, 192, 0.16); \n\n  \n  --font-display: \"Space Grotesk\", system-ui, sans-serif;\n  --font-body:    \"Manrope\", system-ui, sans-serif;\n\n  \n  --ease: cubic-bezier(0.22, 1, 0.36, 1);\n\n  \n  --safe-top:    env(safe-area-inset-top, 0px);\n  --safe-bottom: env(safe-area-inset-bottom, 0px);\n  --safe-left:   env(safe-area-inset-left, 0px);\n  --safe-right:  env(safe-area-inset-right, 0px);\n}\n#bn-app *, #bn-app *::before, #bn-app *::after {\nbox-sizing: border-box; margin: 0; padding: 0;\n}\n#bn-app {\n-webkit-text-size-adjust: 100%; overflow-x: hidden;\n}\n#bn-app {\nfont-family: var(--font-body);\n  background:\n    radial-gradient(ellipse 90% 60% at 50% 38%, #16060f 0%, transparent 60%),\n    radial-gradient(ellipse 120% 120% at 50% 120%, #1a0512 0%, transparent 55%),\n    var(--bg);\n  color: var(--white);\n  min-height: 100svh;\n  overflow-x: hidden;            \n  position: relative;\n  line-height: 1.5;\n  -webkit-font-smoothing: antialiased;\n  text-rendering: optimizeLegibility;\n}\n#bn-app .visually-hidden {\nposition: absolute !important;\n  width: 1px; height: 1px;\n  padding: 0; margin: -1px;\n  overflow: hidden; clip: rect(0 0 0 0);\n  white-space: nowrap; border: 0;\n}\n#bn-app .intro {\nposition: absolute;\n  inset: 0;\n  z-index: 100;\n  display: grid;\n  place-items: center;\n  background: radial-gradient(circle at center, #0a0207 0%, #030103 70%);\n  transition: opacity 0.8s var(--ease), visibility 0.8s var(--ease);\n}\n#bn-app .intro.is-done {\nopacity: 0;\n  visibility: hidden;\n  pointer-events: none;\n}\n#bn-app .intro__heart {\nopacity: 0;\n  transform: scale(0.7);\n  filter: drop-shadow(0 0 18px rgba(255, 45, 148, 0.7));\n  animation: bn-introHeart 1.6s var(--ease) forwards;\n}\n@keyframes bn-introHeart {\n0% {\nopacity: 0; transform: scale(0.7);\n}\n35% {\nopacity: 1; transform: scale(1);\n}\n55% {\nopacity: 1; transform: scale(1.12); filter: drop-shadow(0 0 30px rgba(255, 92, 192, 0.95));\n}\n70% {\nopacity: 1; transform: scale(1);\n}\n100% {\nopacity: 0; transform: scale(1.35); filter: drop-shadow(0 0 40px rgba(255, 45, 148, 0));\n}\n}\n#bn-app .bg {\nposition: absolute;\n  inset: 0;\n  z-index: 0;\n  overflow: hidden;\n  pointer-events: none;\n}\n#bn-app .bg__glow {\nposition: absolute;\n  border-radius: 50%;\n  filter: blur(90px);\n  opacity: 0.55;\n  will-change: transform;\n}\n#bn-app .bg__glow--1 {\nwidth: 58vmax; height: 58vmax;\n  top: -20vmax; left: -14vmax;\n  background: radial-gradient(circle, rgba(255, 45, 148, 0.42) 0%, rgba(255, 45, 148, 0) 66%);\n  animation: bn-drift1 28s ease-in-out infinite;\n}\n#bn-app .bg__glow--2 {\nwidth: 50vmax; height: 50vmax;\n  bottom: -18vmax; right: -16vmax;\n  background: radial-gradient(circle, rgba(214, 21, 122, 0.4) 0%, rgba(214, 21, 122, 0) 66%);\n  animation: bn-drift2 34s ease-in-out infinite;\n}\n#bn-app .bg__glow--3 {\nwidth: 44vmax; height: 44vmax;\n  top: 34%; left: 58%;\n  background: radial-gradient(circle, rgba(58, 8, 25, 0.7) 0%, rgba(58, 8, 25, 0) 70%);\n  animation: bn-drift3 40s ease-in-out infinite;\n}\n@keyframes bn-drift1 {\n0%, 100% {\ntransform: translate(0, 0) scale(1);\n}\n50% {\ntransform: translate(8vmax, 6vmax) scale(1.12);\n}\n}\n@keyframes bn-drift2 {\n0%, 100% {\ntransform: translate(0, 0) scale(1);\n}\n50% {\ntransform: translate(-7vmax, -5vmax) scale(1.15);\n}\n}\n@keyframes bn-drift3 {\n0%, 100% {\ntransform: translate(-50%, -50%) scale(1);\n}\n50% {\ntransform: translate(-42%, -58%) scale(1.2);\n}\n}\n#bn-app .bg__streak {\nposition: absolute;\n  width: 140%;\n  height: 2px;\n  left: -20%;\n  background: linear-gradient(90deg, transparent, rgba(255, 92, 192, 0.5), transparent);\n  filter: blur(2px);\n  opacity: 0.4;\n}\n#bn-app .bg__streak--1 {\ntop: 28%; transform: rotate(-8deg); animation: bn-streak 18s linear infinite;\n}\n#bn-app .bg__streak--2 {\ntop: 66%; transform: rotate(6deg);  animation: bn-streak 24s linear infinite reverse;\n}\n@keyframes bn-streak {\n0% {\ntransform: translateX(-30%) rotate(-8deg); opacity: 0;\n}\n15% {\nopacity: 0.45;\n}\n85% {\nopacity: 0.45;\n}\n100% {\ntransform: translateX(30%) rotate(-8deg); opacity: 0;\n}\n}\n#bn-app .bg__haze {\nposition: absolute;\n  inset: -20%;\n  background:\n    radial-gradient(ellipse 60% 40% at 30% 50%, rgba(255, 194, 226, 0.08), transparent 70%),\n    radial-gradient(ellipse 50% 40% at 70% 40%, rgba(255, 45, 148, 0.07), transparent 70%);\n  animation: bn-haze 40s ease-in-out infinite alternate;\n}\n@keyframes bn-haze {\n0% {\ntransform: translate(-4%, -2%);\n}\n100% {\ntransform: translate(4%, 3%);\n}\n}\n#bn-app .bg__particles {\nposition: absolute;\n  inset: 0;\n  width: 100%;\n  height: 100%;\n}\n#bn-app .bg__grain {\nposition: absolute;\n  inset: -50%;\n  background-image: url(\"data:image\/svg+xml,%3Csvg xmlns='http:\/\/www.w3.org\/2000\/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'\/%3E%3C\/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'\/%3E%3C\/svg%3E\");\n  opacity: 0.05;\n  mix-blend-mode: screen;\n  animation: bn-grain 0.5s steps(3) infinite;\n  pointer-events: none;\n}\n@keyframes bn-grain {\n0% {\ntransform: translate(0, 0);\n}\n33% {\ntransform: translate(-3%, 2%);\n}\n66% {\ntransform: translate(2%, -3%);\n}\n100% {\ntransform: translate(0, 0);\n}\n}\n#bn-app .bg__eq {\nposition: absolute;\n  left: 50%;\n  bottom: 0;\n  transform: translateX(-50%);\n  width: min(820px, 96vw);\n  height: 90px;\n  display: flex;\n  align-items: flex-end;\n  justify-content: center;\n  gap: 5px;\n  opacity: 0.22;\n  filter: blur(1px);\n  -webkit-mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(180deg, transparent, #000 70%);\n          mask-image: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent), linear-gradient(180deg, transparent, #000 70%);\n  -webkit-mask-composite: source-in;\n          mask-composite: intersect;\n}\n#bn-app .bg__eq span {\nflex: 1;\n  max-width: 8px;\n  border-radius: 4px 4px 0 0;\n  background: linear-gradient(to top, rgba(255, 45, 148, 0), rgba(255, 92, 192, 0.9));\n  animation: bn-eq 1.4s ease-in-out infinite;\n}\n@keyframes bn-eq {\n0%, 100% {\nheight: 12%;\n}\n50% {\nheight: 90%;\n}\n}\n#bn-app .cursor-glow {\nposition: fixed;\n  top: 0; left: 0;\n  width: 30px; height: 30px;\n  border-radius: 50%;\n  background: radial-gradient(circle, rgba(255, 45, 148, 0.55) 0%, rgba(255, 45, 148, 0) 70%);\n  transform: translate(-50%, -50%);\n  pointer-events: none;\n  z-index: 90;\n  opacity: 0;\n  transition: opacity 0.3s var(--ease), width 0.25s var(--ease), height 0.25s var(--ease);\n  will-change: transform;\n  mix-blend-mode: screen;\n}\n#bn-app .cursor-glow.is-active {\nopacity: 1;\n}\n#bn-app .cursor-glow.is-hot {\nwidth: 60px; height: 60px;\n}\n#bn-app .stage {\nposition: relative;\n  z-index: 1;\n  overflow-x: clip;                 \n  min-height: 100svh;               \n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  justify-content: center;\n  text-align: center;\n  padding:\n    calc(clamp(28px, 6vh, 64px) + var(--safe-top))\n    calc(clamp(20px, 5vw, 40px) + var(--safe-right))\n    calc(clamp(28px, 6vh, 64px) + var(--safe-bottom))\n    calc(clamp(20px, 5vw, 40px) + var(--safe-left));\n}\n#bn-app .stage__inner {\ndisplay: flex;\n  flex-direction: column;\n  align-items: center;\n  width: 100%;\n  max-width: 720px;\n  gap: clamp(28px, 5vh, 48px);\n}\n#bn-app .hero {\ndisplay: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: clamp(14px, 2.5vh, 24px);\n  width: 100%;\n}\n#bn-app .hero__logo-wrap {\nposition: relative;\n  width: min(560px, 88vw);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  will-change: transform;\n}\n#bn-app .hero__spotlight {\nposition: absolute;\n  width: 130%;\n  height: 220%;\n  left: 50%; top: 50%;\n  transform: translate(-50%, -50%);\n  background: radial-gradient(ellipse at center, rgba(255, 45, 148, 0.18) 0%, rgba(255, 45, 148, 0) 60%);\n  pointer-events: none;\n  z-index: -2;\n}\n#bn-app .hero__logo-glow {\nposition: absolute;\n  width: 92%;\n  height: 70%;\n  left: 50%; top: 50%;\n  transform: translate(-50%, -50%);\n  background: radial-gradient(ellipse at center, rgba(255, 45, 148, 0.5) 0%, rgba(214, 21, 122, 0.18) 45%, transparent 70%);\n  filter: blur(34px);\n  pointer-events: none;\n  z-index: -1;\n  animation: bn-logoPulse 4.5s ease-in-out infinite;\n}\n@keyframes bn-logoPulse {\n0%, 100% {\nopacity: 0.65; transform: translate(-50%, -50%) scale(1);\n}\n50% {\nopacity: 1;    transform: translate(-50%, -50%) scale(1.06);\n}\n}\n#bn-app .hero__logo {\nposition: relative;\n  display: block;\n  width: 100%;\n  height: auto;\n  max-width: 100%;\n  aspect-ratio: 1536 \/ 1024;       \n  object-fit: contain;\n  animation: bn-logoFloat 7s ease-in-out infinite;\n  will-change: transform, translate;\n}\n@keyframes bn-logoFloat {\n0%, 100% {\ntranslate: 0 0;\n}\n50% {\ntranslate: 0 -6px;\n}\n}\n#bn-app .hero__underline-light {\nposition: absolute;\n  bottom: 4%;\n  left: 8%;\n  width: 84%;\n  height: 3px;\n  border-radius: 3px;\n  background: linear-gradient(90deg, transparent, var(--neon-pink), var(--light-pink), var(--neon-pink), transparent);\n  background-size: 40% 100%;\n  filter: blur(1px);\n  opacity: 0.8;\n  pointer-events: none;\n  animation: bn-underlineTravel 5s linear infinite;\n}\n@keyframes bn-underlineTravel {\n0% {\nbackground-position: -60% 0;\n}\n100% {\nbackground-position: 160% 0;\n}\n}\n#bn-app .hero__coming {\nfont-family: var(--font-display);\n  font-weight: 600;\n  font-size: clamp(1.4rem, 5vw, 2.4rem);\n  letter-spacing: 0.42em;\n  text-indent: 0.42em;             \n  text-transform: uppercase;\n  color: var(--white);\n  text-shadow: 0 0 24px rgba(255, 45, 148, 0.45);\n}\n#bn-app .hero__tagline {\nfont-size: clamp(0.95rem, 2.4vw, 1.15rem);\n  letter-spacing: 0.16em;\n  text-transform: uppercase;\n  color: var(--soft-pink);\n  font-weight: 500;\n}\n#bn-app .socials__list {\nlist-style: none;\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: center;\n  align-items: center;\n  gap: clamp(18px, 4vw, 34px);\n}\n#bn-app .social {\n--icon: var(--soft-pink);\n  position: relative;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: 46px; height: 46px;\n  color: var(--icon);\n  border-radius: 50%;\n  text-decoration: none;\n  transition: translate 0.35s var(--ease), transform 0.15s var(--ease), color 0.3s var(--ease), filter 0.3s var(--ease);\n  will-change: transform, translate;\n}\n#bn-app .social svg {\nposition: relative; z-index: 1; transition: transform 0.35s var(--ease);\n}\n#bn-app .social::before {\ncontent: \"\";\n  position: absolute;\n  inset: -6px;\n  border-radius: 50%;\n  background: radial-gradient(circle, rgba(255, 45, 148, 0.4) 0%, transparent 70%);\n  opacity: 0;\n  transform: scale(0.6);\n  transition: opacity 0.4s var(--ease), transform 0.5s var(--ease);\n  z-index: 0;\n}\n#bn-app .social:hover, #bn-app .social:focus-visible {\ncolor: var(--hot-pink);\n  translate: 0 -6px;\n  filter: drop-shadow(0 0 10px rgba(255, 45, 148, 0.8));\n  outline: none;\n}\n#bn-app .social:hover svg, #bn-app .social:focus-visible svg {\ntransform: scale(1.12);\n}\n#bn-app .social:hover::before, #bn-app .social:focus-visible::before {\nopacity: 1; transform: scale(1);\n}\n#bn-app .social:focus-visible {\nbox-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--hot-pink);\n}\n#bn-app .signup {\ndisplay: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: 16px;\n  width: 100%;\n  max-width: 440px;\n}\n#bn-app .signup__heading {\nfont-family: var(--font-display);\n  font-weight: 500;\n  font-size: clamp(1.05rem, 3vw, 1.35rem);\n  letter-spacing: 0.04em;\n  color: var(--white);\n}\n#bn-app .signup__form {\nwidth: 100%;\n}\n#bn-app .signup__field {\ndisplay: flex;\n  align-items: center;\n  gap: 6px;\n  width: 100%;\n  padding: 6px 6px 6px 8px;\n  background: rgba(255, 255, 255, 0.035);\n  border: 1px solid var(--line);\n  border-radius: 999px;\n  -webkit-backdrop-filter: blur(10px);\n          backdrop-filter: blur(10px);\n  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease), background 0.3s var(--ease);\n}\n#bn-app .signup__field:focus-within {\nborder-color: rgba(255, 45, 148, 0.6);\n  background: rgba(255, 45, 148, 0.05);\n  box-shadow: 0 0 0 4px rgba(255, 45, 148, 0.12), 0 10px 30px rgba(255, 45, 148, 0.12);\n}\n#bn-app .signup__field.is-invalid {\nborder-color: rgba(255, 90, 122, 0.7);\n  box-shadow: 0 0 0 4px rgba(255, 90, 122, 0.14);\n}\n#bn-app .signup__input {\nflex: 1;\n  min-width: 0;\n  padding: 12px 14px;\n  font-family: var(--font-body);\n  font-size: 0.95rem;\n  color: var(--white);\n  background: transparent;\n  border: none;\n  border-radius: 999px;\n  outline: none;\n}\n#bn-app .signup__input::placeholder {\ncolor: var(--muted);\n}\n#bn-app .signup__btn {\nposition: relative;\n  flex-shrink: 0;\n  padding: 14px 26px;\n  font-family: var(--font-display);\n  font-size: 0.9rem;\n  font-weight: 600;\n  letter-spacing: 0.06em;\n  color: var(--white);\n  background: linear-gradient(135deg, var(--hot-pink), var(--magenta));\n  border: none;\n  border-radius: 999px;\n  cursor: pointer;\n  overflow: hidden;\n  transition: transform 0.2s var(--ease), box-shadow 0.3s var(--ease);\n  box-shadow: 0 6px 20px rgba(255, 45, 148, 0.35);\n}\n#bn-app .signup__btn-label {\nposition: relative; z-index: 1;\n}\n#bn-app .signup__btn-shine {\nposition: absolute;\n  top: 0; left: -60%;\n  width: 40%; height: 100%;\n  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.55), transparent);\n  transform: skewX(-20deg);\n  transition: left 0.6s var(--ease);\n}\n#bn-app .signup__btn:hover {\nbox-shadow: 0 8px 30px rgba(255, 45, 148, 0.6);\n  transform: translateY(-2px);\n}\n#bn-app .signup__btn:hover .signup__btn-shine {\nleft: 130%;\n}\n#bn-app .signup__btn:active {\ntransform: translateY(0) scale(0.97);\n}\n#bn-app .signup__btn.is-success {\nbackground: linear-gradient(135deg, var(--neon-pink), var(--hot-pink));\n  animation: bn-btnSuccess 0.5s var(--ease);\n}\n@keyframes bn-btnSuccess {\n0% {\ntransform: scale(1);\n}\n40% {\ntransform: scale(1.06);\n}\n100% {\ntransform: scale(1);\n}\n}\n#bn-app .signup__message {\nmin-height: 1.2em;\n  font-size: 0.85rem;\n  letter-spacing: 0.02em;\n  opacity: 0;\n  transform: translateY(-4px);\n  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);\n}\n#bn-app .signup__message.is-visible {\nopacity: 1; transform: translateY(0);\n}\n#bn-app .signup__message.is-error {\ncolor: #ff8095;\n}\n#bn-app .signup__message.is-success {\ncolor: var(--light-pink);\n}\n#bn-app .footer {\nposition: relative;\n  z-index: 1;\n  margin-top: clamp(36px, 8vh, 72px);\n  text-align: center;\n}\n#bn-app .footer__copy {\nfont-size: 0.78rem;\n  letter-spacing: 0.08em;\n  color: var(--muted);\n}\n#bn-app .footer__note {\nmargin-top: 4px;\n  font-size: 0.68rem;\n  letter-spacing: 0.24em;\n  text-transform: uppercase;\n  color: rgba(201, 139, 171, 0.6);\n}\n#bn-app .hero__logo-wrap, #bn-app .hero__coming, #bn-app .hero__tagline, #bn-app .socials li, #bn-app .signup {\nopacity: 0;\n  transform: translateY(18px);\n}\n#bn-app.is-ready .hero__logo-wrap {\nanimation: bn-rise 1s var(--ease) 0.15s forwards;\n}\n#bn-app.is-ready .hero__coming {\nanimation: bn-rise 0.8s var(--ease) 0.7s forwards;\n}\n#bn-app.is-ready .hero__tagline {\nanimation: bn-rise 0.8s var(--ease) 0.95s forwards;\n}\n#bn-app.is-ready .socials li {\nanimation: bn-rise 0.7s var(--ease) forwards;\n}\n#bn-app.is-ready .socials li:nth-child(1) {\nanimation-delay: 1.15s;\n}\n#bn-app.is-ready .socials li:nth-child(2) {\nanimation-delay: 1.25s;\n}\n#bn-app.is-ready .socials li:nth-child(3) {\nanimation-delay: 1.35s;\n}\n#bn-app.is-ready .socials li:nth-child(4) {\nanimation-delay: 1.45s;\n}\n#bn-app.is-ready .socials li:nth-child(5) {\nanimation-delay: 1.55s;\n}\n#bn-app.is-ready .socials li:nth-child(6) {\nanimation-delay: 1.65s;\n}\n#bn-app.is-ready .signup {\nanimation: bn-rise 0.8s var(--ease) 1.85s forwards;\n}\n@keyframes bn-rise {\nfrom {\nopacity: 0; transform: translateY(18px);\n}\nto {\nopacity: 1; transform: translateY(0);\n}\n}\n#bn-app.is-ready .hero__logo-wrap {\n}\n@media (max-width: 900px) {\n#bn-app .hero__logo-wrap {\nwidth: min(520px, 90vw);\n}\n}\n@media (max-width: 600px) {\n#bn-app .hero__logo-wrap {\nwidth: 92vw;\n}\n#bn-app .hero__coming {\nletter-spacing: 0.34em; text-indent: 0.34em;\n}\n#bn-app .socials__list {\ngap: 20px;\n}\n#bn-app .signup__field {\nflex-direction: column;\n    gap: 10px;\n    padding: 0;\n    background: transparent;\n    border: none;\n    -webkit-backdrop-filter: none;\n            backdrop-filter: none;\n}\n#bn-app .signup__field:focus-within {\nbox-shadow: none; background: transparent;\n}\n#bn-app .signup__input {\nwidth: 100%;\n    padding: 14px 18px;\n    background: rgba(255, 255, 255, 0.035);\n    border: 1px solid var(--line);\n    border-radius: 999px;\n    text-align: center;\n}\n#bn-app .signup__field:focus-within .signup__input {\nborder-color: rgba(255, 45, 148, 0.6);\n    background: rgba(255, 45, 148, 0.05);\n}\n#bn-app .signup__field.is-invalid .signup__input {\nborder-color: rgba(255, 90, 122, 0.7);\n}\n#bn-app .signup__btn {\nwidth: 100%; padding: 15px 26px;\n}\n#bn-app .bg__glow {\nfilter: blur(70px); opacity: 0.45;\n}\n#bn-app .bg__eq {\nheight: 80px;\n}\n}\n@media (max-width: 380px) {\n#bn-app .hero__coming {\nfont-size: 1.25rem; letter-spacing: 0.28em; text-indent: 0.28em;\n}\n}\n@media (max-height: 820px) {\n#bn-app .stage {\npadding-top: clamp(18px, 4vh, 40px); padding-bottom: clamp(18px, 4vh, 40px);\n}\n#bn-app .stage__inner {\ngap: clamp(14px, 2.6vh, 30px);\n}\n#bn-app .hero {\ngap: clamp(10px, 1.8vh, 20px);\n}\n#bn-app .footer {\nmargin-top: clamp(16px, 3vh, 40px);\n}\n}\n@media (max-height: 680px) {\n#bn-app .hero__logo-wrap {\nwidth: min(440px, 76vw);\n}\n#bn-app .stage__inner {\ngap: clamp(10px, 2vh, 20px);\n}\n#bn-app .footer {\nmargin-top: clamp(12px, 2vh, 24px);\n}\n}\n@media (prefers-reduced-motion: reduce) {\n#bn-app *, #bn-app *::before, #bn-app *::after {\nanimation-duration: 0.001ms !important;\n    animation-iteration-count: 1 !important;\n    transition-duration: 0.001ms !important;\n    scroll-behavior: auto !important;\n}\n#bn-app .hero__logo-wrap, #bn-app .hero__coming, #bn-app .hero__tagline, #bn-app .socials li, #bn-app .signup {\nopacity: 1 !important; transform: none !important;\n}\n#bn-app .intro {\ndisplay: none;\n}\n#bn-app .bg__grain, #bn-app .bg__streak, #bn-app .bg__eq {\ndisplay: none;\n}\n#bn-app .cursor-glow {\ndisplay: none;\n}\n}\n#bn-app{position:fixed;inset:0;width:100%;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;display:block;isolation:isolate;z-index:9999;}\n\n<\/style>\n\n<div id=\"bn-app\" class=\"bn-app\">\n<!-- =============================================================\n       INTRO OVERLAY \u2014 glowing heart motif that pulses once, then\n       hands off to the main logo reveal. Skipped for returning\n       visitors (see script.js) and for reduced-motion users.\n       ============================================================= -->\n  <div class=\"intro\" id=\"bn-intro\" aria-hidden=\"true\">\n    <svg class=\"intro__heart\" viewBox=\"0 0 100 90\" width=\"120\" height=\"108\" role=\"presentation\" focusable=\"false\">\n      <path d=\"M50 82 C50 82 8 55 8 30 C8 15 20 8 32 8 C41 8 47 14 50 20 C53 14 59 8 68 8 C80 8 92 15 92 30 C92 55 50 82 50 82 Z\"\n            fill=\"none\" stroke=\"url(#bn-introHeartStroke)\" stroke-width=\"3\" stroke-linejoin=\"round\" stroke-linecap=\"round\" \/>\n      <defs>\n        <linearGradient id=\"bn-introHeartStroke\" x1=\"0\" y1=\"0\" x2=\"1\" y2=\"1\">\n          <stop offset=\"0%\"  stop-color=\"#ffc2e2\" \/>\n          <stop offset=\"50%\" stop-color=\"#ff2d94\" \/>\n          <stop offset=\"100%\" stop-color=\"#d6157a\" \/>\n        <\/linearGradient>\n      <\/defs>\n    <\/svg>\n  <\/div>\n\n  <!-- =============================================================\n       ANIMATED BACKGROUND LAYERS\n       ============================================================= -->\n  <div class=\"bg\" aria-hidden=\"true\">\n    <!-- Blurred moving radial glows -->\n    <span class=\"bg__glow bg__glow--1\"><\/span>\n    <span class=\"bg__glow bg__glow--2\"><\/span>\n    <span class=\"bg__glow bg__glow--3\"><\/span>\n    <!-- Slow-moving pink light streaks -->\n    <span class=\"bg__streak bg__streak--1\"><\/span>\n    <span class=\"bg__streak bg__streak--2\"><\/span>\n    <!-- Drifting pink haze -->\n    <span class=\"bg__haze\"><\/span>\n    <!-- Particle field (populated by script.js) -->\n    <canvas class=\"bg__particles\" id=\"bn-particles\"><\/canvas>\n    <!-- Film grain texture -->\n    <span class=\"bg__grain\"><\/span>\n    <!-- Abstract decorative equalizer glow near the bottom -->\n    <div class=\"bg__eq\" id=\"bn-equalizer\" aria-hidden=\"true\"><\/div>\n  <\/div>\n\n  <!-- Custom cursor glow (desktop only; toggled by script.js) -->\n  <div class=\"cursor-glow\" id=\"bn-cursorGlow\" aria-hidden=\"true\"><\/div>\n\n  <!-- =============================================================\n       MAIN CONTENT\n       ============================================================= -->\n  <main class=\"stage\" id=\"bn-stage\">\n    <div class=\"stage__inner\">\n\n      <!-- ---------- 1. HERO ---------- -->\n      <section class=\"hero\" aria-label=\"Bellanita\">\n        <div class=\"hero__logo-wrap\" data-parallax=\"0.04\">\n          <!-- Soft spotlight + pulsing glow behind the logo -->\n          <span class=\"hero__spotlight\" aria-hidden=\"true\"><\/span>\n          <span class=\"hero__logo-glow\" aria-hidden=\"true\"><\/span>\n\n          <!-- OFFICIAL LOGO \u2014 used exactly as provided. Never replaced with text. -->\n          <img fetchpriority=\"high\"\n            class=\"hero__logo\"\n            src=\"https:\/\/bellanitamusic.com\/wp-content\/uploads\/2026\/07\/bellanita-logo-full.png\"\n            alt=\"Bellanita \u2014 logo oficial en letras de pincel rosa intenso brillante con un coraz\u00f3n y detalle de pintura goteando\"\n            width=\"1536\" height=\"1024\"\n            decoding=\"async\"\n            fetchpriority=\"high\"\n          \/>\n\n          <!-- Light that travels along the underline beneath the logo -->\n          <span class=\"hero__underline-light\" aria-hidden=\"true\"><\/span>\n        <\/div>\n\n        <h1 class=\"hero__coming\">Coming Soon<\/h1>\n      <\/section>\n\n      <!-- ---------- 2. SOCIAL MEDIA ---------- -->\n      <!-- ============================================================\n           \u270f\ufe0f  SOCIAL LINKS \u2014 live links are set below.\n           To change one later, just edit the href on its <a> tag.\n           Order: Instagram, TikTok, YouTube, Spotify, Apple Music, SoundCloud.\n           ============================================================ -->\n      <nav class=\"socials\" aria-label=\"Bellanita en redes sociales\">\n        <ul class=\"socials__list\">\n\n          <!-- Instagram -->\n          <li>\n            <a class=\"social\" href=\"https:\/\/www.instagram.com\/bellanita_bg\" aria-label=\"Bellanita en Instagram\" target=\"_blank\" rel=\"noopener noreferrer\">\n              <!-- Instagram -->\n              <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M12 2.2c3.2 0 3.6 0 4.85.07 1.17.05 1.8.25 2.23.41.56.22.96.48 1.38.9.42.42.68.82.9 1.38.16.42.36 1.06.41 2.23.06 1.27.07 1.65.07 4.85s0 3.58-.07 4.85c-.05 1.17-.25 1.8-.41 2.23-.22.56-.48.96-.9 1.38-.42.42-.82.68-1.38.9-.42.16-1.06.36-2.23.41-1.27.06-1.65.07-4.85.07s-3.58 0-4.85-.07c-1.17-.05-1.8-.25-2.23-.41a3.7 3.7 0 0 1-1.38-.9 3.7 3.7 0 0 1-.9-1.38c-.16-.42-.36-1.06-.41-2.23C2.21 15.58 2.2 15.2 2.2 12s0-3.58.07-4.85c.05-1.17.25-1.8.41-2.23.22-.56.48-.96.9-1.38.42-.42.82-.68 1.38-.9.42-.16 1.06-.36 2.23-.41C8.42 2.21 8.8 2.2 12 2.2Zm0 1.98c-3.15 0-3.52.01-4.76.07-1.15.05-1.77.24-2.19.41-.55.21-.94.47-1.35.88-.41.41-.67.8-.88 1.35-.17.42-.36 1.04-.41 2.19-.06 1.24-.07 1.61-.07 4.76s.01 3.52.07 4.76c.05 1.15.24 1.77.41 2.19.21.55.47.94.88 1.35.41.41.8.67 1.35.88.42.17 1.04.36 2.19.41 1.24.06 1.61.07 4.76.07s3.52-.01 4.76-.07c1.15-.05 1.77-.24 2.19-.41.55-.21.94-.47 1.35-.88.41-.41.67-.8.88-1.35.17-.42.36-1.04.41-2.19.06-1.24.07-1.61.07-4.76s-.01-3.52-.07-4.76c-.05-1.15-.24-1.77-.41-2.19a3.6 3.6 0 0 0-.88-1.35 3.6 3.6 0 0 0-1.35-.88c-.42-.17-1.04-.36-2.19-.41-1.24-.06-1.61-.07-4.76-.07Zm0 3.37a4.45 4.45 0 1 1 0 8.9 4.45 4.45 0 0 1 0-8.9Zm0 7.34a2.89 2.89 0 1 0 0-5.78 2.89 2.89 0 0 0 0 5.78Zm5.66-7.53a1.04 1.04 0 1 1-2.08 0 1.04 1.04 0 0 1 2.08 0Z\"\/>\n              <\/svg>\n            <\/a>\n          <\/li>\n\n          <!-- TikTok -->\n          <li>\n            <a class=\"social\" href=\"https:\/\/www.tiktok.com\/@gachitachimbita\" aria-label=\"Bellanita en TikTok\" target=\"_blank\" rel=\"noopener noreferrer\">\n              <!-- TikTok -->\n              <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M16.6 5.82a4.28 4.28 0 0 1-1.02-2.82h-3.1v12.4a2.52 2.52 0 0 1-2.52 2.4 2.52 2.52 0 1 1 .7-4.94v-3.16a5.66 5.66 0 0 0-.7-.05 5.62 5.62 0 1 0 5.62 5.62V9.01a7.35 7.35 0 0 0 4.3 1.38V7.28a4.28 4.28 0 0 1-3.28-1.46Z\"\/>\n              <\/svg>\n            <\/a>\n          <\/li>\n\n          <!-- YouTube -->\n          <li>\n            <a class=\"social\" href=\"https:\/\/www.youtube.com\/@BellanitaMusic\" aria-label=\"Bellanita en YouTube\" target=\"_blank\" rel=\"noopener noreferrer\">\n              <!-- YouTube -->\n              <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M23.5 6.9a3 3 0 0 0-2.1-2.12C19.55 4.28 12 4.28 12 4.28s-7.55 0-9.4.5A3 3 0 0 0 .5 6.9 31.3 31.3 0 0 0 0 12a31.3 31.3 0 0 0 .5 5.1 3 3 0 0 0 2.1 2.12c1.85.5 9.4.5 9.4.5s7.55 0 9.4-.5a3 3 0 0 0 2.1-2.12A31.3 31.3 0 0 0 24 12a31.3 31.3 0 0 0-.5-5.1ZM9.6 15.6V8.4l6.24 3.6L9.6 15.6Z\"\/>\n              <\/svg>\n            <\/a>\n          <\/li>\n\n          <!-- Spotify -->\n          <li>\n            <a class=\"social\" href=\"https:\/\/open.spotify.com\/artist\/3UPK1AtYbvUicEZbuWQIp2\" aria-label=\"Bellanita en Spotify\" target=\"_blank\" rel=\"noopener noreferrer\">\n              <!-- Spotify -->\n              <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24Zm5.5 17.32a.75.75 0 0 1-1.03.25c-2.82-1.72-6.37-2.11-10.55-1.16a.75.75 0 1 1-.33-1.46c4.57-1.04 8.5-.59 11.66 1.34.35.22.46.68.25 1.03Zm1.47-3.27a.94.94 0 0 1-1.29.31c-3.23-1.98-8.15-2.56-11.97-1.4a.94.94 0 1 1-.54-1.8c4.37-1.31 9.79-.67 13.49 1.6.44.27.58.85.31 1.29Zm.13-3.4C15.3 8.36 8.78 8.15 5.09 9.27a1.12 1.12 0 1 1-.65-2.15c4.24-1.28 11.44-1.03 15.95 1.64a1.12 1.12 0 1 1-1.15 1.92Z\"\/>\n              <\/svg>\n            <\/a>\n          <\/li>\n\n          <!-- Apple Music -->\n          <li>\n            <a class=\"social\" href=\"https:\/\/music.apple.com\/us\/artist\/bellanita\/1722827896\" aria-label=\"Bellanita en Apple Music\" target=\"_blank\" rel=\"noopener noreferrer\">\n              <!-- Apple Music -->\n              <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M18.71 2.5c-.14 0-.28.02-.42.05L8.9 4.42c-.72.15-1.2.78-1.2 1.51v9.02a3.06 3.06 0 0 0-1.2-.25 3.06 3.06 0 1 0 3.06 3.06V8.9l7.68-1.55v5.02a3.06 3.06 0 0 0-1.2-.25 3.06 3.06 0 1 0 3.06 3.06V4.03c0-.9-.72-1.53-1.39-1.53Z\"\/>\n              <\/svg>\n            <\/a>\n          <\/li>\n\n          <!-- SoundCloud -->\n          <li>\n            <a class=\"social\" href=\"https:\/\/soundcloud.com\/bellanita\" aria-label=\"Bellanita en SoundCloud\" target=\"_blank\" rel=\"noopener noreferrer\">\n              <!-- SoundCloud -->\n              <svg viewBox=\"0 0 24 24\" width=\"26\" height=\"26\" fill=\"currentColor\" aria-hidden=\"true\" focusable=\"false\">\n                <path d=\"M1.2 13.2c-.1 0-.17.07-.18.18l-.22 2.03.22 1.98c.01.1.08.18.18.18.1 0 .17-.08.18-.18l.25-1.98-.25-2.03c-.01-.1-.08-.18-.18-.18Zm1.4-.63c-.11 0-.2.09-.21.2l-.28 2.64.28 2.55c.01.11.1.2.21.2.11 0 .2-.09.21-.2l.31-2.55-.31-2.64c-.01-.11-.1-.2-.21-.2Zm1.47-.36c-.13 0-.23.1-.24.23l-.26 2.97.26 2.86c.01.13.11.23.24.23.13 0 .23-.1.24-.23l.3-2.86-.3-2.97a.24.24 0 0 0-.24-.23Zm1.5-.13c-.14 0-.26.11-.27.26l-.24 3.07.24 2.9c.01.15.13.26.27.26.14 0 .26-.11.27-.26l.27-2.9-.27-3.07a.27.27 0 0 0-.27-.26Zm1.53.02c-.16 0-.28.12-.3.29l-.22 3.02.22 2.9c.02.16.14.29.3.29.16 0 .29-.13.3-.29l.24-2.9-.24-3.02c-.01-.17-.14-.29-.3-.29Zm1.55-.28c-.17 0-.31.14-.32.32l-.2 3.27.2 2.87c.01.18.15.32.32.32.18 0 .32-.14.33-.32l.22-2.87-.22-3.27a.33.33 0 0 0-.33-.32Zm1.57 4.29.2 2.83c.01.2.16.35.35.35.19 0 .34-.15.35-.35l.23-2.83-.23-6.1a.35.35 0 0 0-.35-.35c-.19 0-.34.15-.35.35l-.2 6.1Zm2.35-6.85c-.2 0-.37.16-.38.37l-.18 6.48.18 2.78c.01.21.18.37.38.37.21 0 .37-.16.38-.37l.2-2.78-.2-6.48a.38.38 0 0 0-.38-.37Zm1.63.1a.4.4 0 0 0-.4.39l-.17 6.86.17 2.72c.01.22.19.39.4.39.22 0 .4-.17.41-.39l.19-2.72-.19-6.86a.41.41 0 0 0-.41-.39Zm1.66-.55c-.24 0-.43.19-.44.43l-.15 7.38.15 2.68c.01.24.2.43.44.43.23 0 .42-.19.43-.43l.17-2.68-.17-7.38a.43.43 0 0 0-.43-.43Zm4.02 4.1c-.4 0-.79.08-1.14.22-.23-2.6-2.4-4.63-5.06-4.63-.65 0-1.28.12-1.85.34-.22.08-.28.17-.28.34v9.62c0 .18.14.33.31.35h8.02a2.5 2.5 0 0 0 0-5Z\"\/>\n              <\/svg>\n            <\/a>\n          <\/li>\n\n        <\/ul>\n      <\/nav>\n\n      <!-- ---------- 3. EMAIL SIGNUP ---------- -->\n      <section class=\"signup\" aria-labelledby=\"signup-heading\">\n        <h2 class=\"signup__heading\" id=\"signup-heading\">Ent\u00e9rate antes que nadie.<\/h2>\n\n        <!-- Front-end demo form. See script.js for where to connect\n             Mailchimp \/ Klaviyo \/ ConvertKit later. -->\n        <form class=\"signup__form\" id=\"bn-signupForm\" novalidate>\n          <div class=\"signup__field\">\n            <label class=\"visually-hidden\" for=\"bn-email\">Correo electr\u00f3nico<\/label>\n            <input\n              class=\"signup__input\"\n              type=\"email\"\n              id=\"bn-email\"\n              name=\"email\"\n              inputmode=\"email\"\n              autocomplete=\"email\"\n              placeholder=\"Tu correo electr\u00f3nico\"\n              aria-describedby=\"bn-form-message\"\n              required\n            \/>\n            <button class=\"signup__btn\" type=\"submit\">\n              <span class=\"signup__btn-label\">Av\u00edsame<\/span>\n              <span class=\"signup__btn-shine\" aria-hidden=\"true\"><\/span>\n            <\/button>\n          <\/div>\n          <!-- Validation + success messages appear here -->\n          <p class=\"signup__message\" id=\"bn-form-message\" role=\"status\" aria-live=\"polite\"><\/p>\n        <\/form>\n      <\/section>\n\n    <\/div>\n\n    <!-- ---------- 4. FOOTER ---------- -->\n    <footer class=\"footer\">\n      <p class=\"footer__copy\">\u00a9 2026 Bellanita. Todos los derechos reservados.<\/p>\n      <p class=\"footer__note\">Sitio Web Oficial<\/p>\n    <\/footer>\n  <\/main>\n<\/div>\n\n<script>\n\/* ==========================================================================\n   BELLANITA \u2014 Official Website (Coming Soon)\n   script.js  \u2014  vanilla JS, no dependencies\n   ==========================================================================\n   Contents:\n     1. Environment flags (reduced motion, touch, mobile)\n     2. Intro + page-load reveal sequence\n     3. Background particle field (canvas)\n     4. Decorative equalizer bars\n     5. Custom cursor glow + magnetic social icons (desktop)\n     6. Mouse parallax\n     7. Email signup (validation + success)\n     8. Tab-visibility pausing\n   ========================================================================== *\/\n\n(function () {\n  \"use strict\";\n\n  \/* ---------------------------------------------------------------------\n     1. ENVIRONMENT FLAGS\n     --------------------------------------------------------------------- *\/\n  const prefersReducedMotion = window.matchMedia(\"(prefers-reduced-motion: reduce)\").matches;\n  const isTouch = window.matchMedia(\"(hover: none), (pointer: coarse)\").matches;\n  const isMobile = window.matchMedia(\"(max-width: 600px)\").matches;\n\n  \/\/ safe wrapper around sessionStorage (may be unavailable in some contexts)\n  function seenIntro() {\n    try { return sessionStorage.getItem(\"bn_intro\") === \"1\"; } catch (e) { return false; }\n  }\n  function markIntroSeen() {\n    try { sessionStorage.setItem(\"bn_intro\", \"1\"); } catch (e) { \/* no-op *\/ }\n  }\n\n  \/* ---------------------------------------------------------------------\n     2. INTRO + PAGE-LOAD REVEAL\n     --------------------------------------------------------------------- *\/\n  const intro = document.getElementById(\"bn-intro\");\n\n  function startReveal() {\n    (document.getElementById(\"bn-app\") || document.body).classList.add(\"is-ready\");\n  }\n\n  function finishIntro() {\n    if (intro) intro.classList.add(\"is-done\");\n    markIntroSeen();\n    startReveal();\n  }\n\n  \/\/ Skip the intro for reduced-motion users and returning visitors (this session)\n  if (prefersReducedMotion || seenIntro()) {\n    if (intro) {\n      intro.classList.add(\"is-done\");\n      intro.style.display = \"none\";\n    }\n    startReveal();\n  } else {\n    \/\/ The heart animation runs ~1.6s (see CSS). Hand off just after it peaks.\n    window.setTimeout(finishIntro, 1500);\n  }\n\n  \/* ---------------------------------------------------------------------\n     3. BACKGROUND PARTICLE FIELD\n     --------------------------------------------------------------------- *\/\n  const canvas = document.getElementById(\"bn-particles\");\n  let particleAnim = null;\n\n  function initParticles() {\n    if (!canvas || prefersReducedMotion) return;\n\n    const ctx = canvas.getContext(\"2d\");\n    let width, height, dpr;\n    let particles = [];\n    let running = true;\n\n    \/\/ Fewer particles on mobile for performance\n    const COUNT = isMobile ? 18 : 46;\n\n    function resize() {\n      dpr = Math.min(window.devicePixelRatio || 1, 2);\n      width = canvas.clientWidth;\n      height = canvas.clientHeight;\n      canvas.width = width * dpr;\n      canvas.height = height * dpr;\n      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);\n    }\n\n    function makeParticle() {\n      const size = Math.random() * 2.2 + 0.6;\n      return {\n        x: Math.random() * width,\n        y: Math.random() * height,\n        r: size,\n        \/\/ different speeds \u2192 depth\n        vx: (Math.random() - 0.5) * 0.25,\n        vy: -(Math.random() * 0.35 + 0.08),\n        life: Math.random(),\n        twinkle: Math.random() * Math.PI * 2,\n        hot: Math.random() > 0.5\n      };\n    }\n\n    function build() {\n      particles = [];\n      for (let i = 0; i < COUNT; i++) particles.push(makeParticle());\n    }\n\n    function draw() {\n      if (!running) return;\n      ctx.clearRect(0, 0, width, height);\n\n      for (const p of particles) {\n        p.x += p.vx;\n        p.y += p.vy;\n        p.twinkle += 0.03;\n\n        \/\/ recycle particles that drift off-screen\n        if (p.y < -10) { p.y = height + 10; p.x = Math.random() * width; }\n        if (p.x < -10) p.x = width + 10;\n        if (p.x > width + 10) p.x = -10;\n\n        const alpha = 0.25 + Math.abs(Math.sin(p.twinkle)) * 0.5;\n        const glow = p.r * 3;\n        const grad = ctx.createRadialGradient(p.x, p.y, 0, p.x, p.y, glow);\n        const color = p.hot ? \"255,45,148\" : \"255,194,226\";\n        grad.addColorStop(0, \"rgba(\" + color + \",\" + alpha + \")\");\n        grad.addColorStop(1, \"rgba(\" + color + \",0)\");\n        ctx.fillStyle = grad;\n        ctx.beginPath();\n        ctx.arc(p.x, p.y, glow, 0, Math.PI * 2);\n        ctx.fill();\n      }\n      particleAnim = requestAnimationFrame(draw);\n    }\n\n    resize();\n    build();\n    draw();\n\n    window.addEventListener(\"resize\", function () {\n      resize();\n      build();\n    });\n\n    \/\/ expose pause\/resume for tab-visibility handling\n    return {\n      pause() { running = false; if (particleAnim) cancelAnimationFrame(particleAnim); },\n      resume() { if (!running) { running = true; draw(); } }\n    };\n  }\n\n  const particleController = initParticles();\n\n  \/* ---------------------------------------------------------------------\n     4. DECORATIVE EQUALIZER BARS\n     --------------------------------------------------------------------- *\/\n  (function buildEqualizer() {\n    const eq = document.getElementById(\"bn-equalizer\");\n    if (!eq || prefersReducedMotion) return;\n    const bars = isMobile ? 22 : 42;\n    for (let i = 0; i < bars; i++) {\n      const span = document.createElement(\"span\");\n      \/\/ Randomised timing so the wave never looks like a real player\n      span.style.animationDuration = (0.9 + Math.random() * 1.4).toFixed(2) + \"s\";\n      span.style.animationDelay = (-Math.random() * 2).toFixed(2) + \"s\";\n      eq.appendChild(span);\n    }\n  })();\n\n  \/* ---------------------------------------------------------------------\n     5. CUSTOM CURSOR GLOW + MAGNETIC ICONS (desktop only)\n     --------------------------------------------------------------------- *\/\n  const cursorGlow = document.getElementById(\"bn-cursorGlow\");\n  const socials = Array.prototype.slice.call(document.querySelectorAll(\".social\"));\n\n  if (!isTouch && !prefersReducedMotion && cursorGlow) {\n    let mouseX = window.innerWidth \/ 2;\n    let mouseY = window.innerHeight \/ 2;\n    let glowX = mouseX;\n    let glowY = mouseY;\n    let visible = false;\n\n    window.addEventListener(\"mousemove\", function (e) {\n      mouseX = e.clientX;\n      mouseY = e.clientY;\n      if (!visible) {\n        visible = true;\n        cursorGlow.classList.add(\"is-active\");\n      }\n    });\n\n    window.addEventListener(\"mouseout\", function (e) {\n      if (!e.relatedTarget) {\n        visible = false;\n        cursorGlow.classList.remove(\"is-active\");\n      }\n    });\n\n    \/\/ Grow the glow near interactive elements\n    const interactive = document.querySelectorAll(\"a, button, input\");\n    interactive.forEach(function (el) {\n      el.addEventListener(\"mouseenter\", function () { cursorGlow.classList.add(\"is-hot\"); });\n      el.addEventListener(\"mouseleave\", function () { cursorGlow.classList.remove(\"is-hot\"); });\n    });\n\n    \/\/ Magnetic pull on social icons\n    const MAGNET_RADIUS = 70;\n    const MAGNET_STRENGTH = 0.35;\n\n    function cursorLoop() {\n      \/\/ smooth follow\n      glowX += (mouseX - glowX) * 0.18;\n      glowY += (mouseY - glowY) * 0.18;\n      cursorGlow.style.transform =\n        \"translate(\" + glowX + \"px,\" + glowY + \"px) translate(-50%,-50%)\";\n\n      \/\/ magnetic icons\n      for (const el of socials) {\n        const rect = el.getBoundingClientRect();\n        const cx = rect.left + rect.width \/ 2;\n        const cy = rect.top + rect.height \/ 2;\n        const dx = mouseX - cx;\n        const dy = mouseY - cy;\n        const dist = Math.hypot(dx, dy);\n        if (dist < MAGNET_RADIUS) {\n          el.style.transform =\n            \"translate(\" + dx * MAGNET_STRENGTH + \"px,\" + dy * MAGNET_STRENGTH + \"px)\";\n        } else {\n          el.style.transform = \"\";\n        }\n      }\n      requestAnimationFrame(cursorLoop);\n    }\n    requestAnimationFrame(cursorLoop);\n  }\n\n  \/* ---------------------------------------------------------------------\n     6. MOUSE PARALLAX (desktop only)\n     Background moves more, logo shifts a few pixels \u2014 refined & controlled.\n     --------------------------------------------------------------------- *\/\n  const bg = document.querySelector(\".bg\");\n  const logo = document.querySelector(\".hero__logo\");\n\n  if (!isTouch && !prefersReducedMotion && bg) {\n    let targetX = 0, targetY = 0;\n    let curX = 0, curY = 0;\n\n    window.addEventListener(\"mousemove\", function (e) {\n      \/\/ -1 .. 1 range from screen center\n      targetX = (e.clientX \/ window.innerWidth - 0.5) * 2;\n      targetY = (e.clientY \/ window.innerHeight - 0.5) * 2;\n    });\n\n    function parallaxLoop() {\n      curX += (targetX - curX) * 0.06;\n      curY += (targetY - curY) * 0.06;\n\n      \/\/ background layer (larger movement)\n      bg.style.transform = \"translate(\" + (curX * 14) + \"px,\" + (curY * 14) + \"px)\";\n\n      \/\/ logo (only a few pixels; transform is free because float uses `translate`)\n      if (logo) {\n        logo.style.transform = \"translate(\" + (curX * -5) + \"px,\" + (curY * -5) + \"px)\";\n      }\n      requestAnimationFrame(parallaxLoop);\n    }\n    requestAnimationFrame(parallaxLoop);\n  }\n\n  \/* ---------------------------------------------------------------------\n     7. EMAIL SIGNUP  (front-end demo)\n     --------------------------------------------------------------------- *\/\n  const form = document.getElementById(\"bn-signupForm\");\n  const input = document.getElementById(\"bn-email\");\n  const field = form ? form.querySelector(\".signup__field\") : null;\n  const message = document.getElementById(\"bn-form-message\");\n  const submitBtn = form ? form.querySelector(\".signup__btn\") : null;\n\n  \/\/ Simple, robust email pattern\n  const EMAIL_RE = \/^[^\\s@]+@[^\\s@]+\\.[^\\s@]{2,}$\/;\n\n  function showMessage(text, type) {\n    if (!message) return;\n    message.textContent = text;\n    message.classList.remove(\"is-error\", \"is-success\");\n    message.classList.add(\"is-visible\", type === \"error\" ? \"is-error\" : \"is-success\");\n  }\n\n  if (form) {\n    form.addEventListener(\"submit\", function (e) {\n      e.preventDefault();\n      const value = input.value.trim();\n\n      if (!value || !EMAIL_RE.test(value)) {\n        if (field) field.classList.add(\"is-invalid\");\n        showMessage(\"Ingresa un correo electr\u00f3nico v\u00e1lido.\", \"error\");\n        input.focus();\n        return;\n      }\n\n      if (field) field.classList.remove(\"is-invalid\");\n\n      \/* ============================================================\n         CONNECT YOUR EMAIL PROVIDER HERE\n         Replace the demo success block below with a fetch() POST to\n         Mailchimp \/ Klaviyo \/ ConvertKit, e.g.:\n\n         fetch(\"YOUR_PROVIDER_ENDPOINT\", {\n           method: \"POST\",\n           headers: { \"Content-Type\": \"application\/json\" },\n           body: JSON.stringify({ email: value })\n         }).then(...).catch(...);\n         ============================================================ *\/\n\n      \/\/ --- Demo success state ---\n      if (submitBtn) {\n        submitBtn.classList.add(\"is-success\");\n        const label = submitBtn.querySelector(\".signup__btn-label\");\n        if (label) label.textContent = \"Ya est\u00e1s en la lista \u2665\";\n      }\n      showMessage(\"\u00a1Gracias! Te avisaremos muy pronto.\", \"success\");\n      input.value = \"\";\n      input.blur();\n    });\n\n    \/\/ Clear the invalid state as the user corrects it\n    input.addEventListener(\"input\", function () {\n      if (field && field.classList.contains(\"is-invalid\") && EMAIL_RE.test(input.value.trim())) {\n        field.classList.remove(\"is-invalid\");\n        if (message) message.classList.remove(\"is-visible\");\n      }\n    });\n  }\n\n  \/* ---------------------------------------------------------------------\n     8. TAB-VISIBILITY PAUSING \u2014 save resources when tab is inactive\n     --------------------------------------------------------------------- *\/\n  document.addEventListener(\"visibilitychange\", function () {\n    if (!particleController) return;\n    if (document.hidden) particleController.pause();\n    else particleController.resume();\n  });\n\n})();\n\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Coming Soon Ent\u00e9rate antes que nadie. Correo electr\u00f3nico Av\u00edsame \u00a9 2026 Bellanita. Todos los derechos reservados. Sitio Web Oficial<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"footnotes":""},"class_list":["post-7","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/bellanitamusic.com\/index.php?rest_route=\/wp\/v2\/pages\/7","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bellanitamusic.com\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/bellanitamusic.com\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/bellanitamusic.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bellanitamusic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=7"}],"version-history":[{"count":17,"href":"https:\/\/bellanitamusic.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions"}],"predecessor-version":[{"id":29,"href":"https:\/\/bellanitamusic.com\/index.php?rest_route=\/wp\/v2\/pages\/7\/revisions\/29"}],"wp:attachment":[{"href":"https:\/\/bellanitamusic.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=7"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}