/* ferno.fun — dark, moody, blue/orange, pixel-flavoured */
:root{
  --bg:#06060e;
  --ink:#e8e8f2;
  --muted:#939eb6;
  --orange:#ff8a3d;
  --orange-deep:#ff4d00;
  --blue:#5aa9ff;
  --blue-bright:#8fd0ff;
  --hot:#ffd08a;
  --line:#1e1e2e;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:16px/1.7 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  min-height:100vh;
  overflow-x:hidden;
}

/* ---------- living fire background ---------- */
#fire{
  position:fixed;
  left:0; bottom:0;
  width:100vw; height:42vh;
  display:block;
  z-index:0;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  pointer-events:none;
}
.scanlines{
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:repeating-linear-gradient(0deg,#0000 0 2px,#0000002e 2px 4px);
  mix-blend-mode:multiply; opacity:.55;
}

main{
  position:relative; z-index:2;
  max-width:46rem;
  margin:0 auto;
  padding:clamp(2rem,6vh,4.5rem) 1.5rem 8rem;
}

/* ---------- hero ---------- */
.hero{
  display:flex;
  align-items:center;
  gap:clamp(1rem,4vw,2.25rem);
  margin-bottom:3.5rem;
  flex-wrap:wrap;
}
.mascot{
  width:clamp(96px,22vw,160px);
  height:auto;
  flex:0 0 auto;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  border-radius:16px;
  filter:drop-shadow(0 0 26px #ff6a0044) drop-shadow(0 0 44px #2b7fff33);
  animation:bob 4.5s ease-in-out infinite;
}
@keyframes bob{50%{transform:translateY(-7px)}}
.hero-text{min-width:12rem;flex:1 1 auto}
h1{
  font-family:ui-monospace,Consolas,monospace;
  font-weight:800;
  font-size:clamp(2.4rem,8.5vw,4rem);
  letter-spacing:.16em;
  margin:0 0 .35rem;
  color:var(--hot);
  text-shadow:4px 4px 0 #8a1d00, 8px 8px 0 #0b1f52;
}
.tagline{
  margin:0;
  font-family:ui-monospace,Consolas,monospace;
  font-size:.72rem;
  letter-spacing:.32em;
  text-transform:uppercase;
  color:var(--blue);
}

/* ---------- sections ---------- */
section{margin-bottom:2.75rem}
h2{
  font-size:.78rem;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--orange);
  margin:0 0 .9rem;
  padding-bottom:.45rem;
  border-bottom:1px solid var(--line);
}
p{margin:0 0 .9rem;color:var(--muted)}

/* ---------- fire buttons ---------- */
.socials{
  list-style:none;
  margin:0;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:.75rem;
}
.firelink{
  --glow:var(--orange);
  position:relative;
  display:inline-block;
  padding:.55rem 1.15rem .6rem;
  font-family:ui-monospace,Consolas,monospace;
  font-size:.82rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  color:var(--hot);
  background:linear-gradient(180deg,#1a1420,#120d16);
  border:1px solid #ff8a3d55;
  border-radius:8px;
  overflow:hidden;
  transition:color .18s ease, border-color .18s ease, box-shadow .25s ease, transform .18s ease;
  box-shadow:0 0 0 0 #ff6a0000;
}
/* animated ember gradient that sweeps across on hover */
.firelink::before{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(100deg,#ff4d00,#ff9d3d 45%,#ffd08a 55%,#5aa9ff 100%);
  opacity:0;
  transition:opacity .22s ease;
  z-index:-1;
}
.firelink:hover,.firelink:focus-visible{
  color:#0a0a12;
  border-color:var(--hot);
  transform:translateY(-2px);
  box-shadow:0 6px 22px #ff6a0044, 0 0 42px #ff4d0033;
  outline:none;
}
.firelink:hover::before,.firelink:focus-visible::before{opacity:1}
.firelink:active{transform:translateY(0)}

/* ---------- footer ---------- */
footer{
  margin-top:3rem;
  padding-top:1.1rem;
  border-top:1px solid var(--line);
  font-size:.85rem;
}
.foot{margin:0;color:#6f7a90;font-family:ui-monospace,Consolas,monospace;font-size:.78rem;letter-spacing:.08em}

/* ---------- hearth strip ---------- */
.hearth{
  position:relative;
  z-index:2;
  line-height:0;
  margin-top:-4rem;
  pointer-events:none;
}
.hearth img{
  display:block;
  width:100%;
  height:auto;
  max-height:230px;
  object-fit:cover;
  object-position:center bottom;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  /* fade the top edge into the page so it reads as one scene */
  -webkit-mask-image:linear-gradient(180deg,#0000 0%,#000 38%);
  mask-image:linear-gradient(180deg,#0000 0%,#000 38%);
}

/* ---------- accessibility ---------- */
/* Keep the fire for reduced-motion users (rendered as a still frame by
   fire.js) rather than hiding it entirely. */
@media (prefers-reduced-motion: reduce){
  #fire{opacity:.8}
  .mascot{animation:none}
  .firelink{transition:none}
}