/* ============================================================
   Home Page Styles — CowboyMSP Theme
   ============================================================ */

/* ── HERO ── */
.hero{
  min-height:calc(100vh - 72px);
  display:grid;grid-template-columns:1fr 1fr;
  position:relative;overflow:hidden;
}
/* subtle radial glow behind hero text */
.hero::before{
  content:'';position:absolute;
  top:-200px;left:-200px;width:800px;height:800px;
  background:radial-gradient(circle,rgba(124,58,237,0.12) 0%,transparent 70%);
  pointer-events:none;
}
/* Adds effects on text to have animation */
.hero h1 span {
  background: linear-gradient(90deg, #a855f7, #60a5fa, #f59e0b);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-size: 200%;
  animation: shimmer 4s linear infinite;
}

@keyframes shimmer {
  0%   { background-position: 0%; }
  100% { background-position: 200%; }
}
/* Needed for effects */

.hero-text{
  padding:6rem 4rem 4rem;
  display:flex;flex-direction:column;justify-content:center;
  position:relative;z-index:2;
}

.hero-eyebrow{
  font-family:'DM Mono',monospace;
  font-size:0.68rem;letter-spacing:0.3em;text-transform:uppercase;
  color:var(--gold);margin-bottom:1.5rem;
}

.hero-name{
  font-family:'Bebas Neue',sans-serif;
  font-size:clamp(5rem,9vw,8rem);
  font-weight:400;line-height:0.95;
  margin-bottom:1.5rem;letter-spacing:2px;
  background:linear-gradient(135deg,#fff 0%,var(--purple-light) 50%,var(--blue-light) 100%);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}
.hero-name em{
  font-style:normal;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
}

.hero-desc{
  font-size:0.9375rem;color:var(--text-muted);
  max-width:440px;line-height:1.9;margin-bottom:2.5rem;
}

.hero-skills{display:flex;flex-wrap:wrap;gap:0.5rem;margin-bottom:2.5rem}
.skill-tag{
  font-family:'DM Mono',monospace;
  font-size:0.7rem;letter-spacing:0.08em;text-transform:uppercase;
  padding:0.3rem 0.75rem;border-radius:6px;
  border:1px solid var(--border);color:var(--purple-light);
  background:rgba(124,58,237,0.08);
  transition:var(--transition);
  text-decoration:none;
  cursor:pointer;
  display:inline-block;
}
.skill-tag:hover{border-color:var(--purple);background:rgba(124,58,237,0.18);color:#fff}

.hero-cta{
  display:inline-flex;align-items:center;gap:0.75rem;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  color:#fff;font-size:0.875rem;font-weight:600;letter-spacing:0.05em;
  padding:0.8rem 1.75rem;border-radius:10px;border:none;cursor:pointer;
  width:fit-content;text-decoration:none;
  box-shadow:0 0 24px rgba(124,58,237,0.4);
  transition:var(--transition);
}
.hero-cta:hover{transform:translateY(-2px);box-shadow:0 0 40px rgba(124,58,237,0.65)}

/* ── HERO VISUAL ── */
.hero-visual{
  position:relative;overflow:hidden;
  background:var(--dark);isolation:isolate;
}
.hero-visual::before{
  content:'';position:absolute;inset:0;
  background:linear-gradient(135deg,transparent 40%,rgba(124,58,237,0.08) 100%);
  z-index:1;
}

.hero-grid{
  position:absolute;inset:0;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:2px;
}
.hero-grid-item{overflow:hidden;background:var(--dark2)}
.hero-grid-item img{
  width:100%;height:100%;object-fit:cover;
  filter:saturate(0.7) brightness(0.85);
  transition:filter 0.5s;
}
.hero-grid-item img:hover{filter:saturate(1) brightness(1)}

/* glow orb on visual side */
.hero-visual::after{
  content:'';position:absolute;
  bottom:-100px;right:-100px;width:500px;height:500px;
  background:radial-gradient(circle,rgba(37,99,235,0.12) 0%,transparent 70%);
  pointer-events:none;z-index:0;
}

@media(max-width:768px){
  .hero{grid-template-columns:1fr}
  .hero-visual{height:280px;position:relative}
  .hero-text{padding:3rem 1.25rem}
}

/* ── ABOUT ── */
.about-grid{
  display:grid;grid-template-columns:1fr 1.6fr;gap:5rem;align-items:start;
}

.about-photo-frame{
  width:100%;aspect-ratio:3/4;
  background:var(--dark2);
  border:1px solid var(--border);border-radius:var(--radius);
  position:relative;overflow:hidden;
  box-shadow:0 12px 40px rgba(0,0,0,0.4);
  transition:var(--transition);
}
.about-photo-frame:hover{border-color:var(--purple);box-shadow:0 16px 60px rgba(124,58,237,0.25)}
.about-photo-frame img{
  width:100%;height:100%;object-fit:cover;object-position:center top;
  display:block;filter:saturate(0.9);transition:filter 0.4s;
}
.about-photo-frame:hover img{filter:saturate(1)}

.about-contact{margin-top:1.75rem}
.contact-item{
  display:flex;flex-direction:column;padding:0.75rem 0;
  border-bottom:1px solid var(--border);font-size:0.8125rem;
}
.contact-item span:first-child{
  font-family:'DM Mono',monospace;
  color:var(--text-muted);font-size:0.65rem;letter-spacing:0.15em;
  text-transform:uppercase;margin-bottom:0.2rem;
}
.contact-item a{color:var(--purple-light);text-decoration:none;transition:color 0.2s}
.contact-item a:hover{color:var(--gold)}

.about-bio{font-size:1rem;line-height:1.95;color:var(--text);margin-bottom:2rem}
.about-bio p{margin-bottom:1.2rem}

.expertise-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-top:1.5rem}
.expertise-item{
  padding:1.5rem;border:1px solid var(--border);
  border-radius:var(--radius);background:var(--dark);
  transition:var(--transition);
}
.expertise-item:hover{border-color:var(--purple);background:rgba(124,58,237,0.05)}
.expertise-item h4{
  font-family:'Bebas Neue',sans-serif;font-size:1.1rem;letter-spacing:1.5px;
  color:var(--gold);margin-bottom:0.6rem;
}
.expertise-item p{font-size:0.8125rem;color:var(--text-muted);line-height:1.8}

@media(max-width:768px){
  .about-grid{grid-template-columns:1fr;gap:3rem}
  .expertise-grid{grid-template-columns:1fr}
}