/* =========================================
   MR. RESPECT — Global Styles
   ========================================= */

/* ── Reset & Base ── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

/* ── Custom Scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #060e1d; }
::-webkit-scrollbar-thumb { background: #8e7149; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a88a5d; }

/* ── Selection ── */
::selection { background: rgba(168,138,93,.35); color: #fff; }

/* ── Navigation ── */
#gnb {
  background: transparent;
  transition: background .5s, backdrop-filter .5s, box-shadow .5s;
}
#gnb.scrolled {
  background: rgba(6,14,29,.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(255,255,255,.06);
}

/* ── Nav Links ── */
.nav-link { position: relative; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 0; height: 1px;
  background: #d4c0a3;
  transition: width .3s ease;
}
.nav-link:hover::after { width: 100%; }

/* ── Buttons ── */
.btn-primary {
  background: linear-gradient(135deg, #a88a5d 0%, #8e7149 100%);
  color: #060e1d;
  font-weight: 600;
  transition: all .25s ease;
  border: 1px solid transparent;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #bea47c 0%, #a88a5d 100%);
  box-shadow: 0 0 24px rgba(168,138,93,.45);
  transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }

.btn-secondary {
  background: transparent;
  color: #d4c0a3;
  border: 1px solid rgba(168,138,93,.4);
  font-weight: 500;
  transition: all .25s ease;
}
.btn-secondary:hover {
  background: rgba(168,138,93,.12);
  border-color: rgba(168,138,93,.7);
  color: #e5d9c8;
  transform: translateY(-1px);
}

/* ── Hero ── */
.hero-highlight {
  background: linear-gradient(135deg, #d4c0a3 0%, #a88a5d 60%, #bea47c 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-grid {
  background-image:
    linear-gradient(rgba(168,138,93,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(168,138,93,.12) 1px, transparent 1px);
  background-size: 60px 60px;
}

/* ── Floating Badges ── */
.floating-badge-1 {
  animation: float-badge-1 5s ease-in-out infinite;
}
.floating-badge-2 {
  animation: float-badge-2 6s ease-in-out infinite;
}
@keyframes float-badge-1 {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-10px) rotate(1deg); }
}
@keyframes float-badge-2 {
  0%,100% { transform: translateY(0) rotate(1deg); }
  50%      { transform: translateY(-8px) rotate(-1deg); }
}

/* ── Hero Card ── */
.hero-card {
  animation: hero-card-float 7s ease-in-out infinite;
}
@keyframes hero-card-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ── Scroll Arrow ── */
.scroll-dot {
  animation: scroll-bounce 2s ease-in-out infinite;
}
@keyframes scroll-bounce {
  0%,100% { transform: translateY(0); opacity: 1; }
  80%      { transform: translateY(12px); opacity: 0; }
}

/* ── Mood Buttons ── */
.mood-btn.selected {
  background: rgba(168,138,93,.25);
  border-color: rgba(168,138,93,.6);
  transform: scale(1.05);
}

/* ── Scroll Reveal ── */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity .7s ease, transform .7s ease;
}
.reveal-up    { transform: translateY(40px); }
.reveal-left  { transform: translateX(-40px); }
.reveal-right { transform: translateX(40px); }

.revealed {
  opacity: 1 !important;
  transform: none !important;
}

/* ── Fade-in-up (hero, immediate) ── */
.fade-in-up {
  opacity: 0;
  animation: fadeInUp .8s ease forwards;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Hero visual (hero section) ── */
.hero-visual { perspective: 1000px; }
.hero-bg-orb {
  animation: orb-drift-1 12s ease-in-out infinite;
}
.hero-bg-orb-2 {
  animation: orb-drift-2 15s ease-in-out infinite;
}
@keyframes orb-drift-1 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(-20px,-15px) scale(1.05); }
}
@keyframes orb-drift-2 {
  0%,100% { transform: translate(0,0) scale(1); }
  50%      { transform: translate(15px,20px) scale(1.08); }
}

/* ── Background Patterns ── */
.pillars-pattern,
.programs-pattern {
  background-image: radial-gradient(circle at 2px 2px, rgba(168,138,93,.25) 1px, transparent 0);
  background-size: 32px 32px;
}

/* ── Solution Bridge ── */
.solution-bridge {
  position: relative;
  overflow: hidden;
}
.solution-bridge::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(168,138,93,.06), transparent 60%);
  pointer-events: none;
}

/* ── Contact Glow ── */
.contact-glow {
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(168,138,93,.07), transparent 70%);
}

/* ── Concern Radio Labels ── */
.concern-label:has(.concern-radio:checked) {
  border-color: rgba(168,138,93,.5);
  background: rgba(168,138,93,.12);
  color: #e5d9c8;
}
.concern-label:has(.concern-radio:checked) .concern-indicator {
  background: #a88a5d;
  border-color: #a88a5d;
  box-shadow: 0 0 8px rgba(168,138,93,.5);
}

/* ── Form Inputs Focus ── */
input:focus, textarea:focus {
  box-shadow: 0 0 0 2px rgba(168,138,93,.2);
}

/* ── Pillar Hover ── */
.pillar-card > div {
  transition: transform .3s ease, box-shadow .3s ease;
}
.pillar-card:hover > div {
  transform: translateY(-4px);
}

/* ── Pricing Cards ── */
.pricing-card { transition: transform .3s ease; }
.pricing-card:hover { transform: translateY(-4px); }

/* ── Persona Cards ── */
.persona-card > div {
  transition: border-color .3s ease, box-shadow .3s ease;
}
.persona-card:hover > div {
  border-color: rgba(168,138,93,.3);
  box-shadow: 0 8px 32px rgba(0,0,0,.25);
}

/* ── Floating CTA ── */
#floating-cta.visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* ── Mobile Menu Animation ── */
#mobile-menu {
  animation: slideDown .25s ease;
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Toast Notification ── */
.toast {
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(15,35,71,.95);
  border: 1px solid rgba(168,138,93,.4);
  color: #e5d9c8;
  padding: .75rem 1.5rem;
  border-radius: 9999px;
  font-size: .875rem;
  z-index: 9999;
  opacity: 0;
  transition: opacity .3s ease, transform .3s ease;
  backdrop-filter: blur(12px);
  white-space: nowrap;
  pointer-events: none;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Section BG gradient ── */
.section-bg-gradient { pointer-events: none; }

/* ── Mentor card hover ── */
.mentor-card > div {
  transition: transform .3s ease, box-shadow .3s ease;
}
.mentor-card:hover > div {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
}

/* ── Program card hover ── */
.program-card > div {
  transition: transform .3s ease, box-shadow .3s ease;
}
.program-card:hover > div {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
}

/* ── Footer ── */
footer a { transition: color .2s ease; }

/* ── Responsive tweaks ── */
@media (max-width: 640px) {
  .floating-badge-1, .floating-badge-2 { display: none; }
  #floating-cta { bottom: 1.25rem; right: 1.25rem; }
}

/* ── Progress bar shimmer ── */
@keyframes shimmer {
  from { background-position: -200% center; }
  to   { background-position:  200% center; }
}