/* ========== Fonts ========== */
@font-face{
  font-family: 'sparatedregular';
  src: url('../assets/fonts/separated/sparated-webfont.woff2') format('woff2'),
       url('../assets/fonts/separated/sparated-webfont.woff')  format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ========== CSS Custom Properties (Houdini) ========== */
@property --g1 { syntax: '<length>'; inherits: true; initial-value: 12px; }
@property --g2 { syntax: '<length>'; inherits: true; initial-value: 26px; }
@property --gA { syntax: '<number>'; inherits: true; initial-value: .45; }

/* ========== Tokens ========== */
:root{
  /* Colors */
  --bg:#0b0b0f;
  --ink:#e7e7ee;
  --muted:#9aa0a6;
  --accent:#66e0ff;

  /* Gold (nav + lead + buttons) */
  --brand-gold:#f0c870;
  --gold-rgb:240,200,112;

  /* Ember glow (JS expects numeric triplet) */
  --lava-glow:255,170,60;    /* r,g,b */
  --lava-alpha:.28;
  --lava: rgb(var(--lava-glow)); /* convenience color */

  /* Layout */
  --content-width:1100px;
  --z-canvas:10;
  --z-content:20;
  --z-nav:25;

  /* Spacing */
  --space-2:12px;
  --space-3:16px;
  --space-4:24px;
  --space-5:48px;

  /* Hero lift controls (negative pulls up) */
  --lift-title:-25px;
  --lift-logo:-300px;
  --lift-lead:-300px;
  --lift-btn:-300px;
  --lead-btn-gap:10px;
}

/* ========== Base ========== */
*,*::before,*::after{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; color:var(--ink);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Arial,sans-serif;
  /* Page-wide photo so the ember canvas can sit on top of it */
  background-image:url("../assets/background/lava-bg.jpg");
  background-size:cover; background-position:center; background-repeat:no-repeat;
  background-color:var(--bg);
  min-height:100vh;
}

/* Visually hide but keep for screen readers */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0 0 0 0);
  clip-path: inset(50%);
  white-space:nowrap;
  border:0;
}

.wrap{ max-width:var(--content-width); margin:0 auto; padding:var(--space-5) var(--space-4) }

/* ========== Ember canvas (behind content, above body bg) ========== */
#bg{
  position:fixed; inset:0; width:100vw; height:100vh;
  display:block; pointer-events:none; background:transparent;
  z-index:var(--z-canvas); /* 10 */
}

/* Put real content above the canvas */
main, nav, .hero, footer{ position:relative; z-index:var(--z-content) } /* 20 */

/* ========== Sticky nav ========== */
nav{
  position:sticky; top:0; z-index:var(--z-nav);
  display:flex; justify-content:center; gap:var(--space-4);
  padding:14px 0;
  background:rgba(10,10,14,.45);
  -webkit-backdrop-filter:saturate(120%) blur(8px);
  backdrop-filter:saturate(120%) blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
  font-size:17px; letter-spacing:.02em;
  transition:background .2s ease, padding .2s ease, box-shadow .2s ease;
}
nav a{
  color:var(--brand-gold); text-decoration:none; font-weight:600;
  text-shadow:
    0 0 6px  rgba(var(--gold-rgb), .60),
    0 0 12px rgba(var(--gold-rgb), .35);
}
nav a:hover{ color:#ffd88a; text-decoration:underline }
nav.nav--scrolled{ padding:10px 0; background:rgba(10,10,14,.60); box-shadow:0 6px 18px rgba(0,0,0,.35) }

/* ========== Hero (transparent so sparks show through) ========== */
.hero{
  position:relative; overflow:visible; min-height:100vh; text-align:center;
  /* keep full width feel without covering canvas */
  margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw);
  padding-left:max(24px, 5vw); padding-right:max(24px, 5vw);
  padding-top:clamp(80px, 15vh, 180px); padding-bottom:var(--space-5);
  /* subtle frame only (no background fill) */
  border-radius:24px; box-shadow:0 10px 30px rgba(0,0,0,.35);
}

/* Fire title */
.fire-title{
  display:grid; justify-items:center;
  transform:translateY(var(--lift-title));
  /* lava glow only on the title */
  filter:
    drop-shadow(0 0 22px rgba(var(--lava-glow), var(--lava-alpha)))
    drop-shadow(0 0 42px rgba(var(--lava-glow), calc(var(--lava-alpha)*.55)));
}
.fire-logo{
  width:min(98vw, 1200px);
  height:auto; display:block; margin:0;
}

/* Spinning round logo (if present) */
.brand-stamp{
  width:min(64vw, 340px); margin:14px auto 22px;
  transform:translateY(var(--lift-logo));
  perspective:1000px;
}
.brand-stamp .logo{
  width:100%; height:auto; display:block;
  /* gold-ish glow to match nav */
  filter:
    drop-shadow(0 0 10px rgba(var(--gold-rgb), .55))
    drop-shadow(0 0 20px rgba(var(--gold-rgb), .35));
  transform-origin:50% 50%;
  animation:logoTumble 28s linear infinite;
}

/* Lead + CTA (gold to match nav) */
p.lead{
  max-width:58ch; margin:0 auto var(--lead-btn-gap);
  transform:translateY(var(--lift-lead));
  color:rgb(var(--gold-rgb));
  font-size:clamp(22px, 3vw, 30px);
  text-shadow:
    0 0 6px  rgba(var(--gold-rgb), .65),
    0 0 14px rgba(var(--gold-rgb), .40);
  filter:
    drop-shadow(0 0 10px rgba(var(--gold-rgb), .50))
    drop-shadow(0 0 18px rgba(var(--gold-rgb), .30));
}
.btn{
  display:inline-block; padding:14px var(--space-4);
  border-radius:12px; text-decoration:none; font-weight:700;
  background:transparent; color:rgb(var(--gold-rgb));
  border:1px solid rgba(var(--gold-rgb), .40);
  text-shadow:
    0 0 6px  rgba(var(--gold-rgb), .60),
    0 0 12px rgba(var(--gold-rgb), .35);
  transform:translateY(var(--lift-btn));
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, color .15s ease;
}
.btn:hover{
  transform:translateY(calc(var(--lift-btn) - 2px));
  border-color:rgba(var(--gold-rgb), .70);
  color:#ffd88a;
}
.btn-ghost{
  background:transparent; color:rgb(var(--gold-rgb));
  border:1px solid rgba(var(--gold-rgb), .35);
}

/* ========== Tagline / Services / Contact ========== */
.tagline-section{ text-align:center; padding:24px 0 }
.tagline-title{
  font-size:clamp(28px,4vw,48px); font-weight:700; text-transform:uppercase; letter-spacing:.15em; margin:0;
  color:var(--brand-gold);
  text-shadow:0 0 6px rgba(var(--gold-rgb), .35), 0 0 12px rgba(var(--gold-rgb), .20);
}
.tagline-subhead{ font-size:clamp(16px, 2.2vw, 20px); margin:8px 0 24px; color:var(--muted) }

.services{ margin:var(--space-5) 0 var(--space-2) }
.services > .wrap > h2{ font-size:clamp(24px,3.8vw,36px); margin:0 0 18px }
.services-grid{ display:grid; gap:var(--space-3); grid-template-columns:repeat(3, minmax(0,1fr)) }
@media (max-width:900px){ .services-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) } }
@media (max-width:640px){ .services-grid{ grid-template-columns:1fr } }
.svc{
  padding:20px; border:1px solid rgba(255,255,255,.10); border-radius:16px;
  background:rgba(10,10,14,.35);
  -webkit-backdrop-filter:blur(4px) saturate(110%);
  backdrop-filter:blur(4px) saturate(110%);
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.svc:hover{ transform:translateY(-2px); border-color:rgba(255,255,255,.18); box-shadow:0 10px 24px rgba(0,0,0,.35) }
.svc-icon{
  width:44px; height:44px; display:grid; place-items:center; border-radius:10px;
  background:rgba(255,170,60,.12); color:#f5c375; margin-bottom:10px;
}
.svc h3{ margin:0 0 6px; font-size:clamp(18px,2.6vw,22px) }
.svc p{ margin:0 0 10px; color:var(--muted) }
.svc-link{ color:var(--accent); text-decoration:none; font-weight:600 }
.svc-link:hover{ text-decoration:underline }

.contact-band{
  margin:56px 0 0; border-radius:20px;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  box-shadow:0 12px 30px rgba(0,0,0,.35);
}
.contact-inner{ max-width:980px; margin:0 auto; padding:28px 22px; text-align:center }
#contact-title{ margin:0 0 6px; font-size:clamp(24px,3.8vw,36px) }
.contact-lead{ margin:0 0 16px; color:var(--muted) }
.contact-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap }

footer{ margin:64px 0 0; text-align:center; color:var(--muted) }

/* ========== Keyframes ========== */
@keyframes logoTumble{
  0%{   transform:rotateX(0)   rotateY(0)   }
  25%{  transform:rotateX(35deg) rotateY(65deg) }
  50%{  transform:rotateX(110deg) rotateY(180deg) }
  75%{  transform:rotateX(215deg) rotateY(295deg) }
  100%{ transform:rotateX(360deg) rotateY(360deg) }
}

/* ========== Responsive ========== */
@media (max-width:840px){
  :root{
    --lift-title:-14px;
    --lift-logo:-110px;
    --lift-lead:-100px;
    --lift-btn:-100px;
  }
  nav{ gap:var(--space-3); font-size:16px }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .brand-stamp .logo{ animation:none }
  .fire-title, .brand-stamp, p.lead, .btn{ transform:none }
}