/* ============================================================
   HERO.CSS
   ============================================================ */

.hero {
  min-height: 100vh;
  padding: 8rem 3rem 5rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.hero-text { position: relative; }

.hero-eyebrow {
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.2rem;
  transition: color var(--theme-transition);
}

.hero-name {
  font-family: var(--font-display);
  font-size: clamp(3rem, 5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.05;
  color: var(--text);
  margin-bottom: 0.5rem;
  transition: font-family 0.4s, color var(--theme-transition);
}

body.art-mode .hero-name {
  font-family: var(--font-hand);
  font-size: clamp(3.5rem, 6vw, 5.5rem);
}

.hero-title {
  font-size: 1.1rem;
  color: var(--muted);
  font-style: italic;
  margin-bottom: 2rem;
  transition: color var(--theme-transition);
  line-height: 1.6;
}

body.art-mode .hero-title {
  font-family: var(--font-italic);
  color: var(--art-muted);
}

.hero-tagline {
  font-size: 1.05rem;
  line-height: 1.8;
  color: var(--text);
  opacity: 0.8;
  max-width: 480px;
  transition: color var(--theme-transition);
  border-left: 3px solid var(--accent);
  padding-left: 1.2rem;
  margin-bottom: 2.5rem;
}

.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }

/* ── Intro social links (YouTube / LinkedIn / Facebook) ───────── */
/* Kept as the original one-color glyphs, with generous spacing between them */
.hero-social {
  display: flex;
  gap: 1.75rem;
  margin-top: 1.75rem;
}
.hero-social .social-icon-mark { height: 22px; width: auto; }

.hero-social .social-icon-link--mono {
  color: var(--muted);
  transition: color var(--hover-transition), transform var(--hover-transition);
}
.hero-social .social-icon-link--mono:hover {
  color: var(--accent);
  transform: translateY(-3px);
  opacity: 1;
}

.btn {
  padding: 0.75rem 2rem;
  border-radius: 4px;
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  transition: all var(--hover-transition);
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
}

.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover { filter: brightness(1.15); transform: translateY(-2px); }
.btn-outline { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.btn-outline:hover { background: var(--accent); color: var(--bg); }

/* ── Avatar frame — NO deco box ───────────────── */
/* The image is narrower than its grid column, so centring it left a
   ~23px gap and its right edge stopped short of where every section
   below ends. Pinning it to the column edge makes the hero image and
   the section containers share one alignment line at any width.
   Art mode puts the visual in the left column, so it pins left there. */
.hero-visual {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.hero.hero-art .hero-visual { justify-content: flex-start; }

.avatar-frame {
  width: 320px;
  height: 400px;
  border-radius: 12px;
  background: var(--surface);
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
  transition: background var(--theme-transition), border-color var(--theme-transition);
  position: relative;
  overflow: hidden;
}

/* Composite (GUB + Ayan) variant: wide holder, no border, and the
   SAME background colour as the page itself (not --surface) so the
   transparent edges of the GUB PNG blend in with no visible box. */
.avatar-frame--wide {
  width: min(440px, 92%);
  height: auto;
  aspect-ratio: 4 / 3.4;
  border: none;
  background: var(--bg);
}

/* subtle tint overlay only — no deco box (skipped for the wide
   GUB/Ayan composite so nothing reads as an extra border/frame) */
.avatar-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--accent) 0%, transparent 60%);
  opacity: 0.05;
  pointer-events: none;
  z-index: 3;
}
.avatar-frame--wide::before { display: none; }

/* ── Layered hero photo: GUB building behind (full colour, original
   PNG, no blending/fading), Ayan in front (smaller, same baseline).
   The frame's `overflow: hidden` crops whichever layer runs past
   its edges, keeping both on one shared baseline. */
.avatar-backdrop {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  filter: blur(0.65px) brightness(0.95);
  z-index: 1;
  transition: transform 0.35s ease, filter 0.35s ease;
  pointer-events: none;
  user-select: none;
}

.avatar-person {
  position: absolute;
  left: 61%;
  bottom: -8%;
  transform: translateX(-50%);
  width: 42%;
  height: auto;
  z-index: 2;
  filter: drop-shadow(0 1px 10px rgba(100, 200, 200, 0.25));
  transition: transform 0.35s ease, filter 0.35s ease;
  pointer-events: none;
  user-select: none;
}

/* Hovering the photo brings the person forward a touch */
.avatar-frame:hover .avatar-person {
  transform: translateX(-50%) translateY(-10px) scale(1.08);
  filter: drop-shadow(0 2px 20px rgba(100, 200, 200, 0.55));
}

.avatar-frame:hover .avatar-backdrop {
  transform: scale(0.997);
  filter: blur(1.65px) brightness(0.7);
}

/* ── Art mode flip ────────────────────────────── */
.hero.hero-art { direction: rtl; }
.hero.hero-art .hero-text,
.hero.hero-art .hero-visual { direction: ltr; }

/* ── Responsive — photo stays visible ────────── */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding: 7rem 1.5rem 3rem;
    gap: 2.5rem;
    text-align: center;
  }

  .hero-tagline {
    border-left: none;
    padding-left: 0;
    border-top: 3px solid var(--accent);
    padding-top: 1rem;
    margin-left: auto;
    margin-right: auto;
  }

  .hero-cta { justify-content: center; }
  .hero-social { justify-content: center; }

  /* Single column now — recentre the image instead of pinning it. */
  .hero-visual,
  .hero.hero-art .hero-visual { justify-content: center; }

  .hero-visual { order: -1; }  /* photo above text on mobile */

  .avatar-frame {
    width: min(280px, 80vw);
    height: min(320px, 90vw);
  }

  .avatar-frame--wide {
    width: min(340px, 88vw);
    height: auto;
  }

  /* Art mode: text order restored on mobile */
  .hero.hero-art { direction: ltr; }
  .hero.hero-art .hero-visual { order: -1; }
}