/* ===================================================
   BRICKCIRCLE MODERN DESIGN SYSTEM
   Inspired by 21st.dev, Framer, Vercel
   =================================================== */

/* --- Design Tokens --- */
:root {
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.2s;
  --duration-normal: 0.4s;
  --duration-slow: 0.8s;
  --duration-reveal: 1s;
  --gradient-brand: linear-gradient(135deg, #0d1b2a 0%, #1e3a5f 50%, #c9a84c 100%);
  --glow-primary: 0 0 40px rgba(201, 168, 76, 0.15);
  --glow-accent: 0 0 60px rgba(201, 168, 76, 0.1);
}

/* --- Smooth Scroll (handled by Lenis when available) --- */

/* --- Page Load Animation (CSS-only, no JS dependency) --- */
@keyframes pageLoadIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
body {
  animation: pageLoadIn 0.6s var(--ease-out-expo) forwards;
}

/* --- Scroll-Triggered Reveal System (GSAP handles animation) --- */
/* GSAP controls opacity/transform via inline styles — no CSS hiding */

/* --- Text Reveal Animation --- */
.reveal-word {
  display: inline-block;
  overflow: hidden;
  margin-right: 0.25em;
}
.reveal-word-inner {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.6s var(--ease-out-expo);
}
.text-revealed .reveal-word-inner {
  transform: translateY(0);
}

/* --- Cursor Glow Effect --- */
[data-cursor-glow] { position: relative; }
.cursor-glow {
  position: absolute;
  width: 400px;
  height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45, 164, 255, 0.08) 0%, transparent 70%);
  pointer-events: none;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* --- Active Nav State --- */
.nav-link.active {
  color: #003466 !important;
  font-weight: 600;
  position: relative;
}
.nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, #003466, #2da4ff);
  border-radius: 1px;
}

/* --- Modern Navbar --- */
.institutional-nav {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.4s var(--ease-out-expo),
              background-color 0.3s ease,
              box-shadow 0.3s ease;
}
.nav-scrolled {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06), 0 8px 30px rgba(0, 0, 0, 0.04);
}
.nav-hidden {
  transform: translateY(-100%);
}

/* --- Enhanced Hero Section --- */
.hero-content h1 {
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.hero-content p {
  font-size: clamp(16px, 2vw, 20px);
  line-height: 1.6;
  max-width: 550px;
}
.hero-buttons .btn {
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
}
.hero-buttons .btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.2), transparent);
  transform: translateX(-100%);
  transition: transform 0.6s ease;
}
.hero-buttons .btn:hover::after {
  transform: translateX(100%);
}
.hero-buttons .btn-outline-light {
  border: 1.5px solid rgba(255,255,255,0.5);
  letter-spacing: 0.02em;
  font-weight: 500;
}
.hero-buttons .btn-outline-light:hover {
  background: rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.8);
  transform: translateY(-2px);
}

/* --- Modern Section Titles --- */
.about-title {
  font-size: clamp(28px, 4vw, 48px);
  letter-spacing: -0.03em;
  background: var(--gradient-brand);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.about-sub {
  font-size: clamp(15px, 1.5vw, 18px);
  line-height: 1.7;
  max-width: 640px;
}

/* --- Glass Cards --- */
.gradient-card {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s ease;
}
.gradient-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}
.gradient-card .glass h5 {
  font-size: clamp(18px, 2vw, 24px);
  letter-spacing: -0.01em;
}

/* --- SM REIT Cards --- */
.sm-card {
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 20px;
  transition: all 0.5s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.sm-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 20px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(79,124,255,0.3), transparent, rgba(79,124,255,0.1));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}
.sm-card:hover::after { opacity: 1; }
.sm-card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.08);
  box-shadow: var(--glow-primary);
}

/* --- Capability Cards --- */
.capability {
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  transition: all 0.5s var(--ease-out-expo);
}
.capability:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), var(--glow-primary);
  border-color: rgba(45, 164, 255, 0.2);
}
.capability i { transition: transform 0.4s var(--ease-spring); }
.capability:hover i { transform: none; }

/* --- Flow Steps --- */
.flow-step { transition: transform 0.3s var(--ease-out-expo); }
.flow-step:hover { transform: translateY(-4px); }
.flow-step span {
  transition: all 0.4s var(--ease-spring);
  box-shadow: 0 4px 15px rgba(13, 110, 253, 0.2);
}
.flow-step:hover span {
  transform: scale(1.12);
  box-shadow: 0 8px 30px rgba(13, 110, 253, 0.4);
}

/* --- Governance Cards --- */
.gov-card {
  border-radius: 16px;
  transition: all 0.4s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.gov-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #2da4ff, #0d6efd);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s var(--ease-out-expo);
}
.gov-card:hover::after { transform: scaleX(1); }
.gov-card:hover {
  border-color: rgba(77, 163, 255, 0.3);
  transform: translateY(-4px);
  box-shadow: var(--glow-primary);
}

/* --- Insight Cards --- */
.insight-card {
  border-radius: 20px;
  transition: all 0.5s var(--ease-out-expo);
}
.insight-card:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: 0 25px 60px rgba(0, 210, 255, 0.15);
  border-color: rgba(0, 210, 255, 0.3);
}
.insight-icon { transition: transform 0.5s var(--ease-spring); }
.insight-card:hover .insight-icon { transform: scale(1.2) rotate(-5deg); }

/* --- Trust Section --- */
.trust-stat-card {
  transition: all 0.5s var(--ease-out-expo);
  position: relative;
  overflow: hidden;
}
.trust-stat-card::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 17px;
  padding: 1px;
  background: linear-gradient(135deg, rgba(45,164,255,0.3), transparent);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.trust-stat-card:hover::before { opacity: 1; }
.trust-icon { transition: transform 0.5s var(--ease-spring); }
.trust-stat-card:hover .trust-icon { transform: scale(1.15) rotate(-3deg); }

/* --- Lead Magnet Cards --- */
.leadmagnet-card {
  transition: all 0.5s var(--ease-out-expo);
  border-radius: 20px;
}
.leadmagnet-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08), var(--glow-accent);
}
.leadmagnet-icon { transition: transform 0.5s var(--ease-spring); }
.leadmagnet-card:hover .leadmagnet-icon { transform: scale(1.15) translateY(-3px); }

/* --- Modern Buttons --- */
.btn-cap, .readmore-btn, .leadmagnet-btn, .btn-brand {
  position: relative;
  overflow: hidden;
  transition: all 0.4s var(--ease-out-expo);
}
.btn-cap:hover, .readmore-btn:hover { transform: translateY(-3px); }

.readmore-btn {
  border-radius: 100px;
  padding: 10px 24px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.readmore-btn i, .readmore-btn .bi { transition: transform 0.3s var(--ease-spring); }
.readmore-btn:hover i, .readmore-btn:hover .bi { transform: translateX(4px); }

/* --- Core Box --- */
.core-box {
  border-radius: 24px;
  transition: transform 0.5s var(--ease-out-expo);
}
.core-box:hover { transform: scale(1.01); }

/* --- Footer --- */
.footer-social a { transition: all 0.3s var(--ease-spring); }
.footer-social a:hover { transform: translateY(-3px) scale(1.1); }

/* --- Form --- */
.form-control {
  transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.2s ease;
}
.form-control:focus {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 52, 102, 0.08), 0 0 0 3px rgba(0, 52, 102, 0.08);
}

/* --- Dropdown Animation --- */
.dropdown-menu {
  animation: dropdownReveal 0.35s var(--ease-out-expo);
}
@keyframes dropdownReveal {
  from { opacity: 0; transform: translateY(10px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* --- Scroll Progress Bar --- */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #003466, #2da4ff);
  z-index: 10000;
  transition: width 0.1s linear;
}

/* --- Section Spacing --- */
.about-wrap, .smreit-section, .platform-section,
.leadership-section, .insights-section {
  padding-top: clamp(60px, 8vw, 100px);
  padding-bottom: clamp(60px, 8vw, 100px);
}

/* --- Trust Badges --- */
.trust-badges .badge:hover, .trust-badges span:hover {
  transform: translateY(-2px) scale(1.05);
  transition: all 0.3s var(--ease-spring);
}

/* --- Custom Scrollbar --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #94a3b8; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #64748b; }

/* --- Selection --- */
::selection {
  background: rgba(0, 52, 102, 0.15);
  color: inherit;
}

/* --- Reduced Motion --- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  body { opacity: 1; }
}

/* --- Mobile Adjustments --- */
@media (max-width: 768px) {
  /* GSAP handles reveal on mobile */
  .cursor-glow { display: none; }
  [data-tilt] { transform: none !important; }
  .hero-content h1 { font-size: 28px; }
  .gradient-card, .sm-card, .capability { border-radius: 16px; }
  .hero-buttons .btn { padding: 10px 20px; font-size: 14px; }
  .about-wrap, .smreit-section, .platform-section,
  .leadership-section, .insights-section {
    padding-top: 40px;
    padding-bottom: 40px;
  }
}