@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');

@theme {
  --color-gold: #D4AF37;
  --color-gold-light: #E8C86D;
  --color-gold-dark: #A9861B;
  --color-dark-bg: #0B0B0B;
  --color-charcoal: #141414;
  --color-charcoal-light: #1F1F1F;
  --color-antique: #E8D8C8;
  
  --font-serif: "Playfair Display", Georgia, serif;
  --font-sans: "Plus Jakarta Sans", "Inter", system-ui, sans-serif;
}

/* Custom Base Styles */
html {
  scroll-behavior: smooth;
  background-color: #0B0B0B;
  color: #FAFAFA;
}

body {
  font-family: var(--font-sans);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6, .font-serif-heading {
  font-family: var(--font-serif);
}

/* Luxury Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #0B0B0B;
}
::-webkit-scrollbar-thumb {
  background: #1F1F1F;
  border-radius: 4px;
  border: 1px solid #2A2A2A;
}
::-webkit-scrollbar-thumb:hover {
  background: #D4AF37;
}

/* Chiaroscuro Lighting Simulation */
.bg-spotlight-radial {
  background: radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.08) 0%, rgba(20, 20, 20, 0) 60%), #0B0B0B;
}

.bg-spotlight-left {
  background: radial-gradient(circle at 10% 50%, rgba(212, 175, 55, 0.05) 0%, rgba(11, 11, 11, 0) 50%);
}

.bg-spotlight-right {
  background: radial-gradient(circle at 90% 50%, rgba(212, 175, 55, 0.05) 0%, rgba(11, 11, 11, 0) 50%);
}

.bg-gold-gradient {
  background: linear-gradient(135deg, #A9861B 0%, #D4AF37 50%, #E8C86D 100%);
}

.border-gold-gradient {
  border-image: linear-gradient(to right, #A9861B, #D4AF37, #E8C86D) 1;
}

/* Glassmorphism Classes */
.glass-panel {
  background: rgba(20, 20, 20, 0.7);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.glass-nav {
  background: rgba(11, 11, 11, 0.75);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.03);
}

/* View Transitions styling */
@view-transition {
  navigation: auto; /* Enables cross-document view transitions */
}

/* Customize transition animations for cross-document transitions */
::view-transition-old(root) {
  animation: 0.5s cubic-bezier(0.4, 0, 0.2, 1) both fade-out;
}

::view-transition-new(root) {
  animation: 0.6s cubic-bezier(0.4, 0, 0.2, 1) both fade-in;
}

@keyframes fade-out {
  from { opacity: 1; filter: blur(0px); }
  to { opacity: 0; filter: blur(4px); }
}

@keyframes fade-in {
  from { opacity: 0; filter: blur(4px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0px); transform: translateY(0); }
}

/* Custom transitions for components */
.transition-luxury {
  transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Hide scrollbar when mobile menu is active */
.no-scroll {
  overflow: hidden;
}

/* Hover effects with Gold accents */
.hover-gold-glow:hover {
  box-shadow: 0 0 25px rgba(212, 175, 55, 0.15);
  border-color: rgba(212, 175, 55, 0.3);
}

/* Image Zoom & Highlight Effects */
.hover-zoom-container {
  overflow: hidden;
  position: relative;
}

.hover-zoom-container img {
  transition: transform 1.2s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s ease;
}

.hover-zoom-container:hover img {
  transform: scale(1.05);
}

/* Grayscale and clean alignment for FCBC seal logo */
.filter-fcbc-grayscale {
  filter: grayscale(1) brightness(0.6) contrast(1.1);
  transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.filter-fcbc-grayscale:hover {
  filter: grayscale(0.2) brightness(0.95) contrast(1);
}

/* Vignette/Shadow overlay for images to ensure text contrast */
.vignette-overlay {
  position: relative;
}

.vignette-overlay::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(11, 11, 11, 0.1) 0%, rgba(11, 11, 11, 0.85) 100%);
  pointer-events: none;
}

/* Custom styles for diagram workflow */
.flow-step-circle {
  box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
}

/* Selection style */
::selection {
  background-color: rgba(212, 175, 55, 0.2);
  color: #FAFAFA;
}

/* Animation System: Progressive Enhancement
   Elements start visible. Only hidden when JS has fully loaded (.js-active).
   This prevents flash of invisible content (FOIC) if JS is slow. */

/* Default state: always visible */
[data-anim] {
  transition: opacity 1.0s cubic-bezier(0.25, 1, 0.5, 1), transform 1.0s cubic-bezier(0.25, 1, 0.5, 1);
}

/* When JS is active, apply hidden initial states */
.js-active [data-anim]:not(.is-visible) {
  opacity: 0;
}

.js-active [data-anim="hero-title"]:not(.is-visible) {
  transform: translateY(30px);
}

.js-active [data-anim="hero-sub"]:not(.is-visible) {
  transform: translateY(20px);
}

.js-active [data-anim="hero-ctas"]:not(.is-visible) {
  transform: translateY(15px);
}

.js-active [data-anim="reveal"]:not(.is-visible) {
  transform: translateY(30px);
}

.js-active [data-anim="fade-scale"]:not(.is-visible) {
  transform: scale(0.96);
}

[data-anim="stagger-grid"] > * {
  transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Stagger grid children default state */
.js-active [data-anim="stagger-grid"]:not(.is-visible) > * {
  opacity: 0;
  transform: translateY(40px);
}

/* Transition delays for staggered entrances */
[data-anim="hero-sub"] {
  transition-delay: 0.15s;
}

[data-anim="hero-ctas"] {
  transition-delay: 0.3s;
}

/* Active Visible State */
.is-visible[data-anim="hero-title"],
.is-visible[data-anim="hero-sub"],
.is-visible[data-anim="hero-ctas"],
.is-visible[data-anim="reveal"] {
  opacity: 1;
  transform: translateY(0);
}

.is-visible[data-anim="fade-scale"] {
  opacity: 1;
  transform: scale(1);
}

/* Stagger visible states */
.is-visible[data-anim="stagger-grid"] > * {
  opacity: 1;
  transform: translateY(0);
}

/* Custom staggers for up to 6 children */
.is-visible[data-anim="stagger-grid"] > *:nth-child(1) { transition-delay: 0.05s; }
.is-visible[data-anim="stagger-grid"] > *:nth-child(2) { transition-delay: 0.2s; }
.is-visible[data-anim="stagger-grid"] > *:nth-child(3) { transition-delay: 0.35s; }
.is-visible[data-anim="stagger-grid"] > *:nth-child(4) { transition-delay: 0.5s; }
.is-visible[data-anim="stagger-grid"] > *:nth-child(5) { transition-delay: 0.65s; }
.is-visible[data-anim="stagger-grid"] > *:nth-child(6) { transition-delay: 0.8s; }

/* Micro-animations */
@keyframes pulse-subtle {
  0%, 100% { opacity: 0.25; filter: brightness(0.5); }
  50% { opacity: 0.35; filter: brightness(0.65); }
}

.animate-pulse-subtle {
  animation: pulse-subtle 8s ease-in-out infinite;
}