/* ═══════════════════════════════════════════════════════════════════════════
   fun-ui.css  —  visual enhancements, animations, and personality
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Dot-grid texture on dark-mode backgrounds ──────────────────────────── */
body.dark {
  background-image: radial-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 28px 28px;
}

/* ─── Floating gradient orbs on the hero ─────────────────────────────────── */
.need_job {
  position: relative;
  overflow: hidden;
  min-height: 88dvh;
}

.need_job::before {
  content: "";
  position: absolute;
  width: 560px;
  height: 560px;
  background: radial-gradient(circle, var(--skin-color), transparent 70%);
  top: -180px;
  right: -100px;
  opacity: 0.08;
  border-radius: 50%;
  animation: hero-orb-float 11s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.need_job::after {
  content: "";
  position: absolute;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, #6c5ce7, transparent 70%);
  bottom: 60px;
  left: -80px;
  opacity: 0.06;
  border-radius: 50%;
  animation: hero-orb-float 15s ease-in-out infinite reverse;
  pointer-events: none;
  z-index: 0;
}

@keyframes hero-orb-float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%       { transform: translate(35px, -28px) scale(1.07); }
  66%       { transform: translate(-22px, 18px) scale(0.94); }
}

/* make children appear above orbs */
.need_job > * { position: relative; z-index: 1; }

/* ─── Hero heading gradient text ─────────────────────────────────────────── */
.asking_job h1 {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.15;
  background: linear-gradient(135deg, var(--skin-color) 0%, #ff6b6b 55%, #a29bfe 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  cursor: help;
}

/* ─── "Open to Work" badge ───────────────────────────────────────────────── */
.open-to-work-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(46, 213, 115, 0.1);
  border: 1px solid rgba(46, 213, 115, 0.35);
  color: #2ed573;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 0.75rem;
}

.otw-dot {
  width: 8px;
  height: 8px;
  background: #2ed573;
  border-radius: 50%;
  flex-shrink: 0;
  animation: otw-pulse 1.9s ease-in-out infinite;
}

@keyframes otw-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.55); }
  50%       { box-shadow: 0 0 0 5px rgba(46, 213, 115, 0); }
}

/* ─── Profession tech badges ─────────────────────────────────────────────── */
.profession-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.35rem;
  margin-bottom: 0.5rem;
}

.prof-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: var(--text-black-700);
  padding: 0.28rem 0.7rem;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  transition: border-color 0.25s ease, color 0.25s ease;
}

body:not(.dark) .prof-badge {
  background: rgba(0, 0, 0, 0.04);
  border-color: rgba(0, 0, 0, 0.1);
}

.prof-badge:hover {
  border-color: var(--skin-color);
  color: var(--skin-color);
}

/* ─── Hero staggered entrance ────────────────────────────────────────────── */
@keyframes hero-slide-up {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.need_job .asking_job      { animation: hero-slide-up 0.65s ease both 0.08s; }
.need_job .contact-section { animation: hero-slide-up 0.65s ease both 0.22s; }
/* Fun chant moved below; lower opacity so it reads as secondary content */
.need_job .cry_for_help    { animation: hero-slide-up 0.55s ease both 0.38s; opacity: 0.72; }

/* ─── Section headings ─────────────────────────────────────────────────────── */
/* h2 colour handled by --text-black-900 CSS var; underline bars add accent */

/* ─── Navigation sidebar improvements ───────────────────────────────────── */

/* Side-bar accent bar on active/hover links */
.aside .nav li a {
  position: relative;
  overflow: hidden;
}

.aside .nav li a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 65%;
  background: var(--skin-color);
  border-radius: 0 4px 4px 0;
  transform: translateY(-50%) scaleY(0);
  transform-origin: center;
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.aside .nav li a:hover::before,
.aside .nav li a.active::before {
  transform: translateY(-50%) scaleY(1);
}

/* ─── Logo colour ─────────────────────────────────────────────────────────── */
.aside .logo a {
  color: var(--skin-color);
  transition: opacity 0.2s ease;
}
.aside .logo a:hover { opacity: 0.8; }

/* ─── Project card hover — clean skin-color border ───────────────────────── */
.project-card {
  isolation: isolate;
}

.project-card:hover {
  transform: translateY(-8px);
  border-color: var(--skin-color);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3), 0 0 0 1px var(--skin-color);
}

/* ─── Image overlay gradient ─────────────────────────────────────────────── */
.card-image-container {
  position: relative;
}

.card-image-container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  background: linear-gradient(to top, var(--project-card-bg), transparent);
  pointer-events: none;
}

/* ─── Filter button glow on active ──────────────────────────────────────── */
.filter-btn.active {
  box-shadow: 0 0 14px rgba(223, 167, 10, 0.35);
}

/* ─── Skill description panel — clean glass ──────────────────────────────── */
.skill-description-panel {
  position: relative;
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
}

/* ─── CRL stats card accent line ─────────────────────────────────────────── */
.crl_card {
  position: relative;
  overflow: hidden;
}

.crl_card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--skin-color);
  border-radius: 14px 14px 0 0;
}

/* ─── Section-wide entrance animation ────────────────────────────────────── */
@keyframes section-reveal {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Use IntersectionObserver in JS, these classes get added when visible */
.reveal { opacity: 0; }
.reveal.is-visible { animation: section-reveal 0.6s ease forwards; }

/* ─── Mobile contact links ────────────────────────────────────────────────── */
.mobile_contact {
  border-top: 1px solid var(--bg-black-50);
  padding-top: 1rem;
}

.mobile_contact li a {
  transition: color 0.2s ease, transform 0.2s ease;
  display: inline-block;
}

.mobile_contact li a:hover {
  transform: translateY(-2px);
}

/* scroll_watcher colour comes from skin-color via styles.css */

/* ─── Skill shelf bottom border glow ─────────────────────────────────────── */
.shelf {
  border-bottom-color: var(--skin-color);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 2px 0 var(--skin-color);
}

/* ─── Improved about section intro terminal look ─────────────────────────── */
.cypher-text {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.2);
  border-left: 3px solid var(--skin-color);
}

body:not(.dark) .cypher-text {
  background: rgba(0, 0, 0, 0.05);
}

/* ─── Hover glow on email link ───────────────────────────────────────────── */
.email-link:hover {
  text-shadow: 0 0 12px rgba(0, 191, 255, 0.5);
}

/* ─── Soft glow on h3.hello name ─────────────────────────────────────────── */
h3.hello span.name {
  font-size: 3rem;
}

/* ─── CRL stat value pop on hover ────────────────────────────────────────── */
.crl_stat_item:hover .crl_value {
  color: var(--skin-color);
  transition: color 0.2s ease;
}

/* ─── Better btn hover  ───────────────────────────────────────────────────── */
.btn:hover {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* ─── Card tags — single consistent style ────────────────────────────────── */
/* (rainbow override removed — uses projectStyles.css base) */

/* ─── Media queries for fun-ui ────────────────────────────────────────────── */
@media (max-width: 860px) {
  .need_job::before { width: 300px; height: 300px; opacity: 0.06; }
  .need_job::after  { display: none; }
  .asking_job h1    { font-size: clamp(1.7rem, 7vw, 2.5rem); }
}

/* ─── Improved section title styling ────────────────────────────────────────── */
.section_title h2 {
  letter-spacing: -0.01em;
}

/* CRL stats grid/items are fully styled in styles.css — no override needed here
   (the previous override stripped the card padding & background). */

/* ─── Eagles card full-width on mobile ────────────────────────────────────────── */
@media (max-width: 860px) {
  .eagles.invite-card { flex-direction: column; }
  .eagles .card-header { flex-wrap: wrap; gap: 0.5rem; }
  .eagles .card-header h3 { font-size: 1rem !important; }
}

/* ─── NFL section mobile ──────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .nfl-section-title { font-size: 1.1rem !important; }
  .nfl-toolbar { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .nfl-actions { flex-direction: column; }
  .nfl-actions .nfl-btn { width: 100%; }
}

/* ─── Profession badges on mobile ─────────────────────────────────────────────── */
@media (max-width: 480px) {
  .profession-badges { gap: 0.25rem; }
  .prof-badge { font-size: 0.68rem; padding: 0.18rem 0.45rem; }
}