/* ═══════════════════════════════════════════════════════════════
   HERO.CSS — Apple Liquid Glass Hero Section
   
   PERFORMANCE:
   • Hero panels: blur(20px) — acceptable, few elements
   • Stat badges: NO backdrop-filter, use painted glass
   • Orbs: NO backdrop-filter (they have no text, use simple rgba)
   • All animations: transform/opacity only (compositor thread)
═══════════════════════════════════════════════════════════════ */

#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 0;
  /* Background gradient IS the canvas — body provides this via fixed attachment */
  background: transparent;
}

/* Hero bg image layered on top at low opacity */
#hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('../images/hero-bg-glass.png');
  background-size: cover;
  background-position: center top;
  opacity: 0.30;
  z-index: 0;
  pointer-events: none;
}

/* ── Ambient blobs — NO filter blur (use CSS blur instead of SVG) ── */
.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(72px);  /* CSS filter blur — doesn't create compositing layer */
  pointer-events: none;
  z-index: 0;
  animation: blob-float 16s ease-in-out infinite;
  will-change: transform;  /* keep on compositor */
}
.blob-1 {
  width: 640px; height: 640px;
  top: -180px; left: -160px;
  background: radial-gradient(circle, hsla(220,85%,78%,0.55) 0%, transparent 70%);
  animation-delay: 0s;
}
.blob-2 {
  width: 560px; height: 560px;
  bottom: -150px; right: -140px;
  background: radial-gradient(circle, hsla(255,75%,78%,0.45) 0%, transparent 70%);
  animation-delay: -6s;
}
.blob-3 {
  width: 400px; height: 400px;
  top: 40%; left: 50%;
  background: radial-gradient(circle, hsla(195,65%,78%,0.35) 0%, transparent 70%);
  animation-delay: -11s;
}

@keyframes blob-float {
  0%,100% { transform: translate(0,0)   scale(1);    }
  33%      { transform: translate(22px,-18px) scale(1.04); }
  66%      { transform: translate(-18px, 22px) scale(0.97); }
}

/* Subtle grid */
.grid-overlay {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(70,90,190,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(70,90,190,0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  z-index: 0; pointer-events: none;
}

/* ── Floating glass orbs — NO backdrop-filter ── */
/* Apple glass orbs: just use a white sphere with strong specular */
.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 1;
  animation: orb-drift 12s ease-in-out infinite;
  will-change: transform;
}

/* Orb technique: layered radial gradients simulate glass sphere */
.orb-1 {
  width: 130px; height: 130px;
  top: 14%; left: 5%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.60) 22%, transparent 50%),
    radial-gradient(circle at 70% 72%, rgba(200,220,255,0.25) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.30) 0%, rgba(200,215,255,0.20) 60%, transparent 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.90),
    inset -2px -2px 8px rgba(160,180,230,0.15),
    0 8px 24px rgba(80,100,180,0.14);
  border: 1px solid rgba(255,255,255,0.72);
  animation-delay: 0s;
}

.orb-2 {
  width: 80px; height: 80px;
  top: 62%; left: 8%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255,255,255,0.88) 0%, rgba(255,255,255,0.55) 24%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.25) 0%, rgba(210,225,255,0.18) 65%, transparent 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 6px 18px rgba(80,100,180,0.12);
  border: 1px solid rgba(255,255,255,0.65);
  animation-delay: -5s;
  animation-direction: reverse;
}

.orb-3 {
  width: 50px; height: 50px;
  top: 22%; right: 7%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.90) 0%, rgba(255,255,255,0.52) 26%, transparent 52%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.22) 0%, rgba(215,228,255,0.15) 65%, transparent 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.82), 0 4px 14px rgba(80,100,180,0.10);
  border: 1px solid rgba(255,255,255,0.60);
  animation-delay: -8s;
}

@keyframes orb-drift {
  0%,100% { transform: translateY(0)   translateX(0); }
  33%      { transform: translateY(-18px) translateX(8px); }
  66%      { transform: translateY(13px)  translateX(-10px); }
}

/* ═══ HERO LAYOUT ═══ */
#hero .container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 360px;
  align-items: center;
  gap: 5rem;
  padding-top: calc(var(--nav-height) + 4rem);
  padding-bottom: 5.5rem;
}

.hero-content { display: flex; flex-direction: column; gap: 0; }
.hero-avatar { display: none !important; }

/* ── Hero badge — blur OK (small, single element) ── */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-sans);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--emerald);
  /* Medium blur on this small pill — acceptable */
  background: rgba(255,255,255,0.38);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.80);
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 2px 10px rgba(50,60,130,0.06);
  padding: 0.34rem 1rem;
  border-radius: var(--r-full);
  margin-bottom: 1.6rem;
  width: fit-content;
  animation: hero-fade-up 0.55s ease 0.2s both;
  position: relative; overflow: hidden;
}
.hero-badge::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.38) 0%, transparent 55%);
  pointer-events: none;
}
.badge-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--emerald);
  box-shadow: 0 0 0 3px rgba(52,211,153,0.20);
  animation: badge-pulse 2.2s ease-in-out infinite;
  flex-shrink: 0; position: relative; z-index: 1;
}
@keyframes badge-pulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(52,211,153,0.20); }
  50%      { box-shadow: 0 0 0 9px rgba(52,211,153,0.04); }
}

/* ── Name block ── */
.hero-name-block { margin-bottom: 1.6rem; animation: hero-fade-up 0.55s ease 0.35s both; }

.hero-greeting {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--accent);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

.hero-name {
  font-size: clamp(2.5rem, 6.5vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.07;
  margin-bottom: 1.05rem;
  display: block;
}

.hero-name-block span[aria-hidden="true"] {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
}

/* Identity chips — painted glass, no blur */
.hero-identity-chips { display: flex; flex-wrap: wrap; gap: 0.42rem; }

.identity-chip {
  font-family: var(--font-sans);
  font-size: 0.73rem; font-weight: 600;
  padding: 0.26rem 0.82rem;
  border-radius: var(--r-full);
  /* Painted glass: no backdrop-filter */
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(255,255,255,0.88);
  color: var(--text-secondary);
  box-shadow: 0 1px 0 rgba(255,255,255,0.95) inset, 0 1px 5px rgba(50,60,130,0.06);
  transition: transform 0.18s, background 0.18s;
  position: relative; overflow: hidden;
}
.identity-chip::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,0.40) 0%, transparent 55%);
  pointer-events: none;
}
.identity-chip:hover { transform: translateY(-1px); background: rgba(255,255,255,0.80); }
.identity-chip-ai {
  background: rgba(72,90,228,0.09);
  border-color: rgba(72,90,228,0.20);
  color: var(--accent);
}

/* Sub tagline */
.hero-sub {
  font-size: 0.96rem;
  line-height: 1.82;
  color: rgba(30,35,65,0.72);
  max-width: 550px;
  margin-bottom: 1.5rem;
  animation: hero-fade-up 0.55s ease 0.50s both;
}
.hero-sub strong { color: var(--text-primary); font-weight: 700; }

/* Typing wrapper */
.typing-wrapper {
  font-family: var(--font-sans);
  font-size: 0.94rem; font-weight: 500;
  color: var(--text-muted);
  margin-bottom: 2rem;
  animation: hero-fade-up 0.55s ease 0.55s both;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem;
}
.role { color: var(--accent); font-weight: 700; }
.cursor {
  display: inline-block; width: 2px; height: 1.1em;
  background: var(--accent);
  vertical-align: text-bottom; margin-left: 1px;
  animation: blink 1s step-end infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* CTAs */
.hero-ctas {
  display: flex; flex-wrap: wrap; gap: 0.72rem;
  margin-bottom: 2.5rem;
  animation: hero-fade-up 0.55s ease 0.60s both;
}

/* ── Stat badges — PAINTED GLASS (no backdrop-filter) ── */
.hero-stats {
  display: flex; flex-wrap: wrap; gap: 0.72rem;
  animation: hero-fade-up 0.55s ease 0.70s both;
}

.stat-badge {
  display: flex; align-items: center; gap: 0.88rem;
  padding: 0.85rem 1.1rem;
  border-radius: var(--r-lg);
  /* Painted glass: solid enough to be legible, no blur */
  background: rgba(255,255,255,0.62);
  border: 1px solid rgba(255,255,255,0.88);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.96) inset,
    0 4px 16px rgba(50,60,130,0.08);
  flex: 1; min-width: 195px;
  position: relative; overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  contain: paint;
  transform: translateZ(0);
}

/* Apple iridescent layer on stat badges */
.stat-badge::before {
  content: '';
  position: absolute; inset: 0;
  background:
    var(--glass-specular),
    var(--glass-iridescent);
  pointer-events: none; z-index: 0;
}
/* Top rim */
.stat-badge::after {
  content: '';
  position: absolute;
  top: 0; left: 8%; right: 8%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1) 50%, transparent);
  pointer-events: none; z-index: 2;
}

.stat-badge:hover {
  transform: translateY(-3px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.98) inset, 0 10px 30px rgba(50,60,130,0.12);
}

.stat-icon {
  width: 36px; height: 36px;
  border-radius: var(--r-sm);
  background: rgba(72,90,228,0.10);
  border: 1px solid rgba(72,90,228,0.14);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; position: relative; z-index: 1;
}
.stat-icon svg { width: 15px; height: 15px; stroke: var(--accent); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.stat-text { display: flex; flex-direction: column; gap: 2px; position: relative; z-index: 1; }
.stat-text strong { font-family: var(--font-sans); font-size: 0.84rem; font-weight: 700; color: var(--text-primary); line-height: 1.2; }
.stat-text span   { font-size: 0.72rem; color: var(--text-muted); line-height: 1.3; }

@keyframes hero-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══ 3D Code Card ══ */
.hero-3d-card {
  position: relative; z-index: 2;
  animation: card-in 0.85s cubic-bezier(0.34,1.56,0.64,1) 0.45s both;
}
@keyframes card-in {
  from { opacity: 0; transform: perspective(900px) rotateY(14deg) translateX(24px); }
  to   { opacity: 1; transform: perspective(900px) rotateY(0) translateX(0); }
}

/* Code card — medium blur (single large element, OK) */
.card-3d-inner {
  width: 100%;
  padding: 1.8rem;
  border-radius: 24px;
  /* This one gets blur — it's the hero focal element */
  background: rgba(255,255,255,0.20);
  backdrop-filter: blur(20px) saturate(1.7);
  -webkit-backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid rgba(255,255,255,0.80);
  box-shadow:
    0 2px 0  rgba(255,255,255,0.95) inset,
    0 28px 64px rgba(50,60,130,0.14),
    0 0 0 1px rgba(180,200,240,0.18);
  position: relative; overflow: hidden;
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Specular + iridescent on code card */
.card-3d-inner::before {
  content: '';
  position: absolute; inset: 0;
  background:
    var(--glass-specular),
    var(--glass-iridescent);
  pointer-events: none; z-index: 0;
}
/* Top rim on code card */
.card-3d-inner::after {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,1) 50%, transparent);
  pointer-events: none; z-index: 10;
}

.card-3d-bar {
  display: flex; gap: 0.5rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(180,200,240,0.25);
  position: relative; z-index: 1;
}
.dot-r { width: 11px; height: 11px; border-radius: 50%; background: #FF5F56; }
.dot-y { width: 11px; height: 11px; border-radius: 50%; background: #FFBD2E; }
.dot-g { width: 11px; height: 11px; border-radius: 50%; background: #27C93F; }

.card-3d-code { font-family: var(--font-mono); font-size: 0.82rem; line-height: 2.0; color: rgba(30,35,65,0.78); position: relative; z-index: 1; }
.card-3d-code p { margin: 0; }
.card-3d-code .indent { padding-left: 1.2rem; }
.c-kw  { color: hsl(230,75%,55%); font-weight: 600; }
.c-var { color: hsl(260,60%,52%); font-weight: 500; }
.c-str { color: hsl(155,55%,40%); }
.c-cmt { color: #a0a8c0; font-style: italic; }
.terminal-cursor { display: inline-block; color: hsl(230,75%,55%); animation: blink 1s step-end infinite; }

/* Responsive */
@media (max-width: 1080px) {
  #hero .container {
    grid-template-columns: 1fr;
    padding-top: calc(var(--nav-height) + 2.5rem);
    padding-bottom: 4rem;
    gap: 3rem;
  }
  .hero-3d-card { order: -1; }
  .card-3d-inner { max-width: 420px; margin: 0 auto; }
}
@media (max-width: 600px) {
  .hero-stats { flex-direction: column; }
  .stat-badge { min-width: unset; }
  .hero-ctas { flex-direction: column; }
}