/* ==========================================================================
   DREWBEEE RIPS — about.css (page styles for about.html only)
   ========================================================================== */

/* ---- Hero ---- */
.about-hero {
  position: relative;
  padding: 64px 0 56px;
  overflow: hidden;
  text-align: center;
  background:
    radial-gradient(ellipse 70% 55% at 50% 0%, rgba(139, 49, 232, 0.22), transparent 70%),
    var(--bg);
}
/* faint honeycomb field behind the hero */
.about-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.05;
  background:
    repeating-conic-gradient(from 30deg, var(--purple-hot) 0deg 60deg, transparent 60deg 120deg);
  background-size: 56px 64px;
  -webkit-mask-image: radial-gradient(ellipse 75% 80% at 50% 30%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 75% 80% at 50% 30%, #000 30%, transparent 75%);
}

.about-hero-inner { position: relative; }

.about-hero-logo {
  display: inline-block;
  border-radius: 50%;
  margin-bottom: 26px;
  box-shadow: var(--glow-purple);
}
.about-hero-logo img {
  width: clamp(180px, 42vw, 280px);
  height: auto;
  border-radius: 50%;
  border: 2px solid rgba(168, 85, 247, 0.55);
}

.about-hero h1 {
  font-size: clamp(2.6rem, 8vw, 4.4rem);
  text-shadow: 0 0 34px rgba(139, 49, 232, 0.45);
}

.about-hero-sub {
  font-size: clamp(1.2rem, 3.4vw, 1.7rem);
  margin-top: 10px;
  text-shadow: var(--glow-gold);
}

/* ---- The Story ---- */
.story-wrap { max-width: 780px; }

.story-body p {
  color: var(--ink-dim);
  font-size: 1.04rem;
  max-width: 65ch;
}
.story-body p + p { margin-top: 20px; }

.story-body p:first-child {
  color: var(--ink);
  font-size: 1.12rem;
}
/* gold drop cap on the opener for a bit of flavor */
.story-body p:first-child::first-letter {
  font-family: var(--font-display);
  font-size: 2.6em;
  line-height: 0.85;
  float: left;
  color: var(--gold);
  padding-right: 10px;
  padding-top: 4px;
}

/* ---- How We Operate: pillars ---- */
.pillar-list {
  list-style: none;
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .pillar-list { grid-template-columns: 1fr 1fr; gap: 18px; }
}

.pillar {
  position: relative;
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--bg-raised);
  border: 1px solid rgba(139, 49, 232, 0.35);
  border-radius: var(--radius);
  padding: 22px 20px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.pillar:hover {
  border-color: var(--purple-hot);
  box-shadow: var(--glow-purple);
  transform: translateY(-2px);
}
/* lightning edge on the left of each pillar */
.pillar::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--purple-hot), var(--gold), var(--purple-hot));
  opacity: 0.8;
}
/* corner honeycomb whisper */
.pillar::after {
  content: "";
  position: absolute;
  right: -20px; bottom: -24px;
  width: 130px; height: 130px;
  pointer-events: none;
  opacity: 0.06;
  background: repeating-conic-gradient(from 30deg, var(--gold) 0deg 60deg, transparent 60deg 120deg);
  background-size: 34px 39px;
  -webkit-mask-image: radial-gradient(circle at 70% 70%, #000 20%, transparent 72%);
  mask-image: radial-gradient(circle at 70% 70%, #000 20%, transparent 72%);
}

.pillar-icon {
  font-size: 1.7rem;
  line-height: 1;
  margin-top: 3px;
  filter: drop-shadow(0 0 10px rgba(255, 180, 0, 0.35));
}

.pillar-title {
  font-size: 1.15rem;
  color: var(--ink);
  margin-bottom: 6px;
}
.pillar-title b { color: var(--gold); font-weight: 400; }

.pillar p {
  color: var(--ink-dim);
  font-size: 0.94rem;
  line-height: 1.55;
}

/* ---- Wall of Hits: empty-state gallery ---- */
.hits-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(2, 1fr);
  max-width: 880px;
  margin: 0 auto;
}
@media (min-width: 720px) {
  .hits-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; }
}

.hit-slot {
  position: relative;
  aspect-ratio: 3 / 4.2;
  border-radius: var(--radius);
  border: 1px dashed rgba(168, 85, 247, 0.45);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(139, 49, 232, 0.18), transparent 60%),
    radial-gradient(circle at 75% 85%, rgba(255, 180, 0, 0.08), transparent 55%),
    var(--bg-raised);
}
/* honeycomb texture inside each slot */
.hit-slot::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 0.07;
  background: repeating-conic-gradient(from 30deg, var(--ink) 0deg 60deg, transparent 60deg 120deg);
  background-size: 40px 46px;
}
/* passing shimmer sweep */
.hit-slot::after {
  content: "";
  position: absolute;
  top: -30%; bottom: -30%;
  left: -60%;
  width: 45%;
  transform: rotate(18deg);
  background: linear-gradient(90deg, transparent, rgba(168, 85, 247, 0.16), rgba(255, 199, 44, 0.10), transparent);
  animation: hit-shimmer 4.5s ease-in-out infinite;
}
.hit-slot:nth-child(2)::after { animation-delay: 0.8s; }
.hit-slot:nth-child(3)::after { animation-delay: 1.6s; }
.hit-slot:nth-child(4)::after { animation-delay: 2.4s; }

@keyframes hit-shimmer {
  0%   { left: -60%; }
  60%  { left: 130%; }
  100% { left: 130%; }
}

.hit-slot-mark {
  font-family: var(--font-display);
  font-size: 2.6rem;
  color: rgba(185, 174, 203, 0.4);
  text-shadow: 0 0 18px rgba(168, 85, 247, 0.4);
}

.hits-note {
  margin-top: 22px;
  color: var(--ink-dim);
  font-size: 0.98rem;
}
.hits-note::before {
  content: "⚡ ";
}

/* ---- Connect panel ---- */
.connect-panel {
  position: relative;
  text-align: center;
  background:
    radial-gradient(ellipse 80% 100% at 50% 110%, rgba(139, 49, 232, 0.25), transparent 65%),
    var(--bg-raised);
  border: 1px solid rgba(139, 49, 232, 0.45);
  border-radius: var(--radius);
  padding: 44px 24px;
  overflow: hidden;
}
.connect-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  background: repeating-conic-gradient(from 30deg, var(--gold) 0deg 60deg, transparent 60deg 120deg);
  background-size: 48px 55px;
  -webkit-mask-image: linear-gradient(180deg, transparent 20%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 20%, #000 100%);
}
.connect-copy, .connect-actions, .connect-email { position: relative; }

.connect-copy h2 { font-size: clamp(1.7rem, 4.5vw, 2.4rem); }
.connect-copy p {
  color: var(--ink-dim);
  max-width: 46ch;
  margin: 10px auto 0;
}

.connect-actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}
.connect-actions .btn { min-width: 210px; }
@media (max-width: 520px) {
  .connect-actions { flex-direction: column; align-items: stretch; }
  .connect-actions .btn { min-width: 0; }
}

.connect-email {
  margin-top: 20px;
  color: var(--ink-dim);
  font-size: 0.9rem;
}

/* ---- Motion safety ---- */
@media (prefers-reduced-motion: reduce) {
  .hit-slot::after { animation: none; left: 130%; }
  .pillar:hover { transform: none; }
}