/*
Theme Name: Burgrill Forge
Theme URI: https://burgrillforge.com
Author: Your Name
Description: Fueled by fire. Forged by flavour. Coming soon theme for Burgrill Forge.
Version: 1.0
Text Domain: burgrill-forge
*/

:root{
  --char:        #0a0806;
  --char-2:      #120d09;
  --ember:       #c8391d;
  --forge:       #e8622c;
  --flame:       #f5a623;
  --spark:       #ffd166;
  --ash:         #f3ece1;
  --smoke:       #8f8478;
  --smoke-dim:   #57504a;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  margin:0;
  min-height:100svh;
  background:
    radial-gradient(120% 90% at 50% 18%, rgba(232,98,44,0.16), transparent 60%),
    radial-gradient(140% 100% at 50% 100%, rgba(200,57,29,0.14), transparent 55%),
    var(--char);
  color:var(--ash);
  font-family:'Jost', sans-serif;
  overflow-x:hidden;
  position:relative;
}

/* film grain */
body::before{
  content:"";
  position:fixed; inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/></svg>");
  opacity:0.05;
  mix-blend-mode:overlay;
  pointer-events:none;
  z-index:5;
}

a{ color:inherit; text-decoration:none; }

.page{
  position:relative;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  z-index:1;
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:28px clamp(20px,5vw,56px) 0;
}
.brandmark{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:'Anton', sans-serif;
  letter-spacing:0.14em;
  font-size:13px;
  color:var(--smoke);
  text-transform:uppercase;
}
.brandmark svg{ width:20px; height:20px; flex-shrink:0; }

.socials{ display:flex; gap:16px; }
.socials a{
  width:34px; height:34px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(243,236,225,0.14);
  border-radius:50%;
  color:var(--smoke);
  transition:border-color .25s ease, color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.socials a:hover{
  color:var(--spark);
  border-color:var(--flame);
  box-shadow:0 0 16px rgba(245,166,35,0.35);
  transform:translateY(-2px);
}
.socials svg{ width:15px; height:15px; }

.hero{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:40px 20px 20px;
  position:relative;
}

.ring-wrap{
  position:relative;
  width:clamp(190px,32vw,260px);
  height:clamp(190px,32vw,260px);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
}
.ring{
  position:absolute; inset:0;
  border-radius:50%;
  background:conic-gradient(from 0deg,
    transparent 0deg,
    var(--ember) 40deg,
    var(--flame) 100deg,
    transparent 160deg,
    transparent 200deg,
    var(--forge) 260deg,
    var(--spark) 320deg,
    transparent 360deg);
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  filter:blur(0.4px) drop-shadow(0 0 18px rgba(232,98,44,0.55));
  animation:spin 14s linear infinite;
}
.ring.ring-2{
  inset:14px;
  animation:spin-rev 20s linear infinite;
  opacity:0.6;
  filter:blur(0.6px) drop-shadow(0 0 10px rgba(245,166,35,0.4));
}
@keyframes spin{ to{ transform:rotate(360deg); } }
@keyframes spin-rev{ to{ transform:rotate(-360deg); } }

.emblem{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  width:64%; height:64%;
  border-radius:50%;
  background:radial-gradient(circle at 50% 40%, #1b120c, var(--char) 72%);
  box-shadow:inset 0 0 0 1px rgba(243,236,225,0.08), 0 0 40px rgba(232,98,44,0.18);
}
.flame-icon{
  width:46%;
  transform-origin:50% 100%;
  animation:flicker 2.6s ease-in-out infinite;
  filter:drop-shadow(0 0 10px rgba(245,166,35,0.65));
}
@keyframes flicker{
  0%,100%{ transform:scale(1) skewX(0deg); }
  20%{ transform:scale(1.03,0.97) skewX(-1.5deg); }
  45%{ transform:scale(0.97,1.04) skewX(1.5deg); }
  70%{ transform:scale(1.05,0.96) skewX(-1deg); }
}

.wordmark{ margin:6px 0 2px; }
.script{
  display:block;
  font-family:'Damion', cursive;
  font-size:clamp(48px,10vw,92px);
  line-height:0.95;
  color:var(--ash);
  text-shadow:0 2px 22px rgba(0,0,0,0.5);
}
.bold-word{
  display:block;
  font-family:'Anton', sans-serif;
  font-size:clamp(38px,9vw,78px);
  letter-spacing:0.05em;
  margin-top:-0.08em;
  background:linear-gradient(180deg, var(--spark) 0%, var(--forge) 55%, var(--ember) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 4px 18px rgba(200,57,29,0.35));
}

.tagline{
  margin:14px 0 6px;
  font-size:clamp(11px,1.6vw,13px);
  letter-spacing:0.32em;
  text-transform:uppercase;
  color:var(--smoke);
}
.tagline b{ color:var(--flame); font-weight:600; }

.subline{
  max-width:440px;
  margin:18px auto 0;
  color:var(--smoke);
  font-size:15px;
  line-height:1.6;
}
.subline strong{ color:var(--ash); font-weight:500; }

.signup{
  margin:34px 0 6px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  width:100%;
  max-width:420px;
}
.signup input{
  flex:1 1 220px;
  min-width:0;
  padding:14px 18px;
  border-radius:999px;
  border:1px solid rgba(243,236,225,0.16);
  background:rgba(243,236,225,0.04);
  color:var(--ash);
  font-family:'Jost', sans-serif;
  font-size:14px;
  outline:none;
  transition:border-color .25s ease, background .25s ease;
}
.signup input::placeholder{ color:var(--smoke-dim); }
.signup input:focus{
  border-color:var(--flame);
  background:rgba(243,236,225,0.07);
}
.signup button{
  flex:0 0 auto;
  padding:14px 26px;
  border-radius:999px;
  border:none;
  cursor:pointer;
  font-family:'Anton', sans-serif;
  letter-spacing:0.08em;
  font-size:13px;
  color:#170e08;
  background:linear-gradient(180deg, var(--spark), var(--forge));
  box-shadow:0 10px 24px -8px rgba(232,98,44,0.55);
  transition:transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.signup button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 30px -8px rgba(232,98,44,0.75);
  filter:brightness(1.06);
}
.signup button:active{ transform:translateY(0); }

.form-note{
  margin-top:14px;
  font-size:12px;
  color:var(--smoke-dim);
  letter-spacing:0.02em;
  min-height:16px;
}
.form-note.success{ color:var(--flame); }

.embers{
  position:absolute; inset:0;
  overflow:hidden;
  pointer-events:none;
  z-index:0;
}
.ember{
  position:absolute;
  bottom:-10px;
  width:4px; height:4px;
  border-radius:50%;
  background:var(--flame);
  box-shadow:0 0 6px 2px rgba(245,166,35,0.7);
  opacity:0;
  animation:rise linear infinite;
}
@keyframes rise{
  0%{ transform:translate(0,0) scale(1); opacity:0; }
  8%{ opacity:1; }
  100%{ transform:translate(var(--drift,20px), -110vh) scale(0.3); opacity:0; }
}

footer{
  position:relative;
  padding:26px 20px 84px;
  text-align:center;
  color:var(--smoke-dim);
  font-size:12px;
  letter-spacing:0.08em;
  z-index:1;
}
footer .loc{ color:var(--smoke); margin-bottom:6px; }
footer .loc b{ color:var(--ash); font-weight:500; }

.shimmer{
  position:fixed;
  left:0; right:0; bottom:0;
  height:120px;
  background:linear-gradient(0deg, rgba(200,57,29,0.16), transparent);
  filter:url(#heatwave);
  pointer-events:none;
  z-index:0;
}

@media (prefers-reduced-motion: reduce){
  .ring, .ring-2, .flame-icon, .ember{ animation:none !important; }
  .shimmer{ filter:none; }
}

@media (max-width:420px){
  .script{ font-size:44px; }
  .bold-word{ font-size:34px; }
}