/* ═══════════════════════════════════════════════
   BOBBY HITT — Forge, Wood & Forest
   ═══════════════════════════════════════════════ */

:root {
  --bg-base:      #0a1209;
  --surface-1:    #131e10;
  --surface-2:    #1e2e1a;
  --text-main:    #f2e8d5;
  --text-muted:   #c8b898;
  --accent-primary:   #9a4e28;
  --accent-secondary: #d8965a;
  --border-soft:  rgba(216,150,90,0.25);
  --shadow-soft:  0 22px 50px rgba(4,8,4,0.6);
  --font-display: "Alegreya SC","Cinzel",serif;
  --font-body:    "Source Sans 3","Manrope",sans-serif;
}

/* ─── HERO ──────────────────────────────── */
.hero-bobby {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: center;
  padding-top: 6rem; padding-bottom: 5rem;
  overflow: hidden; isolation: isolate;
  background: radial-gradient(ellipse 120% 80% at 50% 100%, rgba(160,70,15,0.4), transparent 55%),
              linear-gradient(160deg, #060d08 0%, #0f1e10 35%, #1e1408 65%, #120c06 100%);
}

/* Animated wood grain base */
.hero-bobby::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: 0.06;
  background-image:
    repeating-linear-gradient(3deg,
      transparent 0px, transparent 9px,
      rgba(200,140,60,0.6) 9px, rgba(200,140,60,0.6) 10px
    ),
    repeating-linear-gradient(177deg,
      transparent 0px, transparent 14px,
      rgba(160,100,30,0.4) 14px, rgba(160,100,30,0.4) 15px
    );
}

/* Forge glow at the bottom */
.forge-glow {
  position: absolute; bottom: -20%; left: 50%;
  transform: translateX(-50%);
  width: 180%; height: 70%; pointer-events: none; z-index: 1;
  background: radial-gradient(ellipse 55% 50% at 50% 100%,
    rgba(220,100,20,0.45) 0%,
    rgba(160,60,10,0.25) 35%,
    transparent 65%
  );
  animation: forgePulse 4.5s ease-in-out infinite alternate;
}
@keyframes forgePulse {
  0%   { opacity: 0.65; transform: translateX(-50%) scaleY(0.92); }
  100% { opacity: 1.0;  transform: translateX(-50%) scaleY(1.08); }
}

/* Floating ash particles */
#ashCanvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}

/* Diagonal light ray */
.forge-ray {
  position: absolute; top: 0; left: 30%; bottom: 0;
  width: 2px; pointer-events: none; z-index: 2;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(220,140,40,0.12) 25%,
    rgba(220,140,40,0.22) 50%,
    rgba(220,140,40,0.12) 75%,
    transparent 100%
  );
  transform: rotate(15deg); transform-origin: top;
  filter: blur(18px);
  animation: rayFlicker 3s ease-in-out infinite alternate;
}
@keyframes rayFlicker {
  0%   { opacity: 0.4; }
  100% { opacity: 1;   }
}

.hero-bobby .hero-inner { position: relative; z-index: 4; }

.hero-bobby h1 {
  font-family: "Alegreya SC", "Cinzel", serif;
  font-size: clamp(2.6rem, 7vw, 7rem);
  font-weight: 700; line-height: 1;
  color: #f2e8d5;
  text-shadow: 0 4px 50px rgba(200,100,30,0.4);
}

/* ─── MATERIAL SECTIONS ─────────────────── */
.material-section {
  position: relative;
  padding-block: clamp(3rem, 6vw, 5rem);
  overflow: hidden;
}

.clip-diagonal-top {
  clip-path: polygon(0 3.5%, 100% 0, 100% 100%, 0 100%);
  margin-top: -2.8rem;
  padding-top: clamp(4.5rem, 8vw, 6.5rem);
}

/* ── Metal ── brushed steel */
.material-metal {
  background:
    radial-gradient(circle at 75% 25%, rgba(180,200,220,0.07), transparent 45%),
    linear-gradient(155deg, #10151a 0%, #1a2028 55%, #141a20 100%);
}
.material-metal::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.04;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.5) 0px, rgba(255,255,255,0.5) 1px,
    transparent 1px, transparent 14px
  );
}
.material-metal::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(180,200,220,0.2), transparent);
}

/* ── Wood ── warm grain */
.material-wood {
  background:
    radial-gradient(circle at 20% 70%, rgba(180,100,30,0.12), transparent 45%),
    linear-gradient(155deg, #261a10 0%, #38261a 50%, #2a1c12 100%);
}
.material-wood::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.05;
  background-image:
    repeating-linear-gradient(1deg,
      rgba(255,200,100,0.5) 0px, rgba(255,200,100,0.5) 1px,
      transparent 1px, transparent 12px
    ),
    repeating-linear-gradient(179deg,
      rgba(180,120,40,0.3) 0px, rgba(180,120,40,0.3) 1px,
      transparent 1px, transparent 22px
    );
}
.material-wood::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,140,60,0.2), transparent);
}

/* ── Forest ── deep green */
.material-forest {
  background:
    radial-gradient(circle at 25% 30%, rgba(80,140,70,0.2), transparent 40%),
    radial-gradient(circle at 80% 75%, rgba(40,100,50,0.15), transparent 40%),
    linear-gradient(155deg, #0b1c0e 0%, #142a14 55%, #1c3a20 100%);
}
.material-forest::before {
  content: '';
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(circle 1px at center, rgba(120,200,80,0.08) 1px, transparent 1px);
  background-size: 28px 28px;
}

.material-section > .container { position: relative; z-index: 1; }

.material-heading {
  display: flex; align-items: center; gap: 0.9rem;
  margin-bottom: clamp(1.2rem, 2vw, 2rem);
}
.section-icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  border: 1px solid var(--border-soft);
  background: rgba(0,0,0,0.3);
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(0,0,0,0.3);
}
.section-icon svg { width: 28px; fill: var(--accent-secondary); }
.material-copy { max-width: 72ch; color: var(--text-muted); line-height: 1.75; margin-bottom: 1.5rem; }

/* Gallery hover lift */
.material-gallery .placeholder-img {
  aspect-ratio: 4/3;
  transition: transform 0.3s cubic-bezier(.22,1,.36,1), box-shadow 0.3s;
  cursor: default;
}
.material-gallery .placeholder-img:hover {
  transform: scale(1.04) translateY(-4px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.55);
}

.metal-gallery .placeholder-img {
  background: linear-gradient(140deg, #1e252c, #303c48);
}
.wood-gallery .placeholder-img {
  background: linear-gradient(140deg, #3c2a1c, #5c3e28);
}
.forest-gallery .placeholder-img {
  background: linear-gradient(140deg, #1e3c28, #2e5c3a);
}

/* ─── CTA ──────────────────────────────── */
.cta-bobby {
  background: linear-gradient(140deg, rgba(16,26,18,0.97), rgba(46,30,18,0.9));
  border-color: rgba(216,150,90,0.3);
}
.cta-bobby .btn-primary {
  background: linear-gradient(120deg, #dbb07a, #9a4e28);
  color: #1a0e08;
}