/*
Theme Name: PhireHouse Records Landing
Theme URI: https://phirehouse.records/
Author: PhireHouse
Description: A bold one-page holding theme for PhireHouse Records (House/Dance/EDM).
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: phirehouse
Tags: one-column, custom-background, custom-logo, custom-menu
*/

/* ----------
PhireHouse Records — Landing (WordPress-ready)
Paste into a Custom HTML block or host as a simple static page.
---------- */

:root{
  --bg-1:#0e0e13;
  --bg-2:#15151b;
  --neon:#ff6a00;
  --neon-2:#ff2d55;
  --text:#e9e9ef;
  --muted:#a9a9b6;
  --card:#1b1b24;
  --glow: 0 0 60px rgba(255,106,0,0.35), 0 0 120px rgba(255,45,85,0.25);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 20% 10%, rgba(255,106,0,.12), transparent 60%),
              radial-gradient(1000px 700px at 80% 80%, rgba(255,45,85,.12), transparent 60%),
              linear-gradient(180deg, var(--bg-1), var(--bg-2));
  overflow-x:hidden;
}

/* Subtle film grain */
.noise{
  position:fixed; inset:0; pointer-events:none; opacity:.07; z-index:0;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="160" height="160"><filter id="n"><feTurbulence baseFrequency=".9" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)"/></svg>');
  background-size:300px;
  mix-blend-mode:overlay;
}

/* Animated gradient glow */
.bg-gradient{
  position:fixed; inset:-20%; z-index:-1; filter: blur(60px);
  background: radial-gradient(50% 60% at 30% 40%, rgba(255,106,0,.35), transparent 60%),
              radial-gradient(40% 50% at 70% 60%, rgba(255,45,85,.35), transparent 60%);
  animation: float 16s ease-in-out infinite alternate;
}
@keyframes float{
  0%{transform:translate3d(-2%, -2%, 0) scale(1.05)}
  100%{transform:translate3d(2%, 2%, 0) scale(1)}
}

.glow{ position:fixed; inset:0; box-shadow: inset 0 0 120px rgba(255,106,0,.15); pointer-events:none; }

.site-header{
  padding: clamp(24px, 3vw, 40px);
  display:flex; flex-direction:column; align-items:center; gap:18px;
  text-align:center;
}

.brand .logo{
  width:min(260px, 52vw);
  filter: drop-shadow(0 12px 40px rgba(255,106,0,.25));
  animation: pop 800ms ease forwards;
  border-radius: 12px;
}
@keyframes pop{ from{ transform: translateY(12px) scale(.98); opacity:.0 }
                to{ transform: translateY(0) scale(1); opacity:1 } }

.title{
  font-family: Orbitron, Inter, system-ui, sans-serif;
  letter-spacing:.06em;
  text-transform:uppercase;
  margin: 6px 0 0;
  font-size: clamp(28px, 6vw, 56px);
  line-height:1.05;
  text-shadow: 0 0 22px rgba(255,106,0,.25);
}
.title span{ opacity:.85; font-weight:500 }

.tagline{
  margin:0;
  color:var(--muted);
  font-weight:600;
  letter-spacing:.03em;
}

.equalizer{
  display:flex; gap:6px; align-items:flex-end; height:36px; margin-top:8px;
}
.equalizer span{
  width:6px; background: linear-gradient(to top, var(--neon), var(--neon-2));
  border-radius:3px;
  box-shadow: var(--glow);
  transform-origin: bottom;
  animation: bar 1200ms ease-in-out infinite;
}
.equalizer span:nth-child(odd){ animation-delay: .2s }
.equalizer span:nth-child(3){ animation-delay: .35s }
.equalizer span:nth-child(4){ animation-delay: .5s }
.equalizer span:nth-child(5){ animation-delay: .65s }
.equalizer span:nth-child(6){ animation-delay: .8s }
.equalizer span:nth-child(7){ animation-delay: .95s }
.equalizer span:nth-child(8){ animation-delay: 1.1s }
@keyframes bar{
  0%,100%{ height:24% }
  50%{ height:96% }
}

.content{
  display:flex; flex-direction:column; align-items:center; gap:28px;
  padding: 0 clamp(16px, 4vw, 40px) 48px;
}

.cta{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:center;
}
.btn{
  --ring: rgba(255,106,0,.25);
  padding: 14px 20px; border-radius: 999px; font-weight:700; letter-spacing:.02em;
  text-decoration:none; border:1px solid rgba(255,255,255,.06); color:var(--text);
  background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02));
  backdrop-filter: blur(6px);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
  box-shadow: 0 0 0 0 var(--ring);
}
.btn:hover{ transform:translateY(-2px); border-color: rgba(255,255,255,.22); box-shadow: 0 10px 30px rgba(0,0,0,.25) }
.btn.primary{
  color:#000;
  background: linear-gradient(180deg, #ffcf99, #ff6a00);
  border-color: transparent;
  box-shadow: 0 10px 40px rgba(255,106,0,.35);
}
.btn.ghost{ background:transparent; border-color: rgba(255,255,255,.14) }

.ticker{
  width:100%; overflow:hidden; border-block:1px solid rgba(255,255,255,.06);
  background: rgba(0,0,0,.2);
}
.marquee{
  display:flex; gap:48px; padding:10px 0; white-space:nowrap;
  animation: marquee 22s linear infinite;
  font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#ffffffd9;
}
@keyframes marquee{ from{ transform: translateX(0) } to{ transform: translateX(-50%) } }

.about{
  max-width: 900px; text-align:center; background: rgba(255,255,255,.03);
  padding: 22px 22px 26px; border-radius: 16px; border:1px solid rgba(255,255,255,.06);
  box-shadow: var(--glow);
}
.about h2{ margin:.2em 0 .2em; font-family: Orbitron, Inter, sans-serif; letter-spacing:.06em }
.about p{ margin:0; color:var(--muted) }

.socials{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
}
.social{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:999px; font-weight:800;
  background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  text-decoration:none; color:var(--text);
  transition: transform .15s ease, background .15s ease;
}
.social:hover{ transform: translateY(-2px); background: rgba(255,255,255,.12) }

.signup{
  width:min(720px, 92vw); background: rgba(255,255,255,.04);
  padding: 18px; border-radius: 14px; border:1px solid rgba(255,255,255,.08);
  display:grid; gap:12px; justify-items:center;
}
.signup h3{ margin:.2em 0; font-family: Orbitron, Inter, sans-serif; letter-spacing:.05em }
.signup .fields{ display:flex; gap:10px; width:100% }
.signup input{
  flex:1; padding: 14px 16px; border:1px solid rgba(255,255,255,.12); border-radius: 999px;
  background: rgba(0,0,0,.35); color:var(--text); outline:none;
}
.signup small{ color:var(--muted) }
.signup button{ white-space:nowrap }

.footer{
  text-align:center; color:var(--muted); padding: 40px 16px 60px;
  font-size:.95rem;
}

/* Mobile tweaks */
@media (max-width: 560px){
  .signup .fields{ flex-direction:column }
}