/* ============================================
   FACADE LIGHTING DUBAI — Visual Upgrade Layer
   Phase 1: Accessibility + Phase 6: Micro-interactions
   Phase 7: Color refinement + Component polish
   ============================================ */

/* --- PHASE 1: Accessibility Foundation --- */

/* Skip to content link */
.skip-to-content {
  position: fixed;
  top: -100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  background: var(--gold-primary);
  color: var(--bg-void);
  padding: 0.75rem 1.5rem;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: top 0.2s ease;
}

.skip-to-content:focus {
  top: 0;
  outline: none;
}

/* Enhanced focus-visible styles */
:focus-visible {
  outline: 2px solid var(--gold-primary) !important;
  outline-offset: 3px !important;
  border-radius: 2px;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--gold-primary) !important;
  outline-offset: 3px !important;
}

/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
  outline: none !important;
}

/* Touch target minimum 44x44 on mobile */
@media (max-width: 992px) {
  .main-nav a,
  .footer-col a,
  .breadcrumb ol li a,
  .btn,
  .faq-question {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* Touch action for eliminating 300ms tap delay */
a, button, [role="button"], input, select, textarea, .faq-question {
  touch-action: manipulation;
}

/* Reduced motion: disable ALL animations */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cursor-glow,
  .noise-overlay {
    display: none !important;
  }

  .hero h1::after {
    animation: none !important;
  }

  .scroll-progress {
    transition: none !important;
  }

  .reveal-up,
  .reveal-card,
  .reveal-fade {
    opacity: 1 !important;
    transform: none !important;
  }

  .reveal-line {
    transform: scaleX(1) !important;
  }

  .reveal-clip {
    clip-path: none !important;
  }

  /* Ambient blobs */
  .ambient-blob {
    display: none !important;
  }
}


/* --- Dropdown hover bridge fix --- */
.nav-dropdown .nav-dropdown-menu {
  top: 100% !important;
  padding-top: 0.75rem;
}

.nav-dropdown .nav-dropdown-menu::before {
  content: "";
  position: absolute;
  top: -0.75rem;
  left: 0;
  width: 100%;
  height: 0.75rem;
  background: transparent;
}

/* --- PHASE 4: Component Visual Upgrades --- */

/* Service/section cards — enhanced hover with glass border glow */
.service-item:hover,
.section-card:hover {
  border-color: rgba(207, 173, 78, 0.2);
  box-shadow:
    0 8px 32px rgba(207, 173, 78, 0.08),
    0 0 0 1px rgba(207, 173, 78, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
}

/* Bento grid — image-ready with gradient overlays */
.bento-item {
  background: linear-gradient(135deg, rgba(10, 15, 30, 0.7) 0%, rgba(10, 15, 30, 0.5) 100%);
  transition: all 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-item:hover {
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.8) 0%, rgba(17, 24, 39, 0.6) 100%);
}

/* CTA banner — gradient mesh background */
.cta-banner {
  background: linear-gradient(135deg, #12100a 0%, #1a1408 50%, #12100a 100%);
  position: relative;
  overflow: hidden;
}

.cta-banner::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -20%;
  width: 60%;
  height: 200%;
  background: radial-gradient(ellipse, rgba(207, 173, 78, 0.04) 0%, transparent 60%);
  pointer-events: none;
}

/* Breadcrumb — chevron separators */
.breadcrumb ol li:not(:last-child)::after {
  content: "" !important;
  display: inline-block;
  width: 5px;
  height: 5px;
  border-right: 1px solid rgba(207, 173, 78, 0.3);
  border-top: 1px solid rgba(207, 173, 78, 0.3);
  transform: rotate(45deg);
  margin-left: 0.5rem;
  vertical-align: middle;
}

/* FAQ accordion — improved height transition */
.faq-answer {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.3s ease, opacity 0.3s ease;
  overflow: hidden;
  padding: 0 1.5rem;
  opacity: 0;
}

.faq-answer > div,
.faq-answer > p:first-child {
  overflow: hidden;
}

.faq-item.active .faq-answer {
  grid-template-rows: 1fr;
  padding: 0 1.5rem 1.5rem;
  opacity: 1;
}


/* --- PHASE 6: Micro-Interactions & Polish --- */

/* Button press feedback */
.btn:active {
  transform: scale(0.97) !important;
  transition: transform 0.1s ease !important;
}

.btn-primary:active {
  transform: scale(0.97) translateY(0) !important;
}

/* Link hover — underline draws left to right */
.article-content a {
  text-decoration: none;
  background-image: linear-gradient(var(--gold-primary), var(--gold-primary));
  background-size: 0% 1px;
  background-position: left bottom;
  background-repeat: no-repeat;
  transition: background-size 0.4s cubic-bezier(0.16, 1, 0.3, 1), color 0.2s ease;
  padding-bottom: 2px;
}

.article-content a:hover {
  background-size: 100% 1px;
}

/* Card hover — subtle border glow pulse */
.seed-card:hover,
.related-card:hover {
  box-shadow:
    0 8px 32px rgba(207, 173, 78, 0.08),
    0 0 0 1px rgba(207, 173, 78, 0.1);
}

/* Nav active state — gold dot */
.main-nav a.active {
  color: var(--gold-primary);
}

.main-nav a.active::after {
  width: 4px !important;
  height: 4px !important;
  border-radius: 50% !important;
  background: var(--gold-primary) !important;
  bottom: 0px !important;
}

/* Image hover zoom */
.article-hero-image img {
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.article-hero-image:hover img {
  transform: scale(1.03);
}

/* Gold diamond section dividers — subtle rotation on reveal */
.section-header::before {
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.section-header.revealed::before {
  transform: rotate(45deg) scale(1.1);
}


/* --- PHASE 7: Color Refinement & Dark Mode Polish --- */

/* Increase body text contrast for WCAG AA */
p,
.article-content p,
.article-content ul li,
.article-content ol li {
  color: #9a9488;
}

/* Card surface gradient instead of flat */
.service-item,
.section-card,
.sidebar-section {
  background: linear-gradient(165deg, rgba(14, 19, 35, 0.6) 0%, rgba(8, 12, 24, 0.6) 100%);
}

/* Elevation system — formalized shadows */
:root {
  --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.02);
  --shadow-dropdown: 0 8px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --shadow-modal: 0 16px 48px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-glow: 0 8px 32px rgba(207, 173, 78, 0.08);
}

.nav-dropdown .nav-dropdown-menu {
  box-shadow: var(--shadow-dropdown);
}

/* Ambient light blobs for depth */
.ambient-blob {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(80px);
  opacity: 0;
  animation: ambientFloat 20s ease-in-out infinite;
}

.ambient-blob--1 {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(207, 173, 78, 0.05) 0%, transparent 70%);
  top: -10%;
  right: -5%;
  animation-delay: 0s;
  opacity: 0.04;
}

.ambient-blob--2 {
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(207, 173, 78, 0.04) 0%, transparent 70%);
  bottom: 20%;
  left: -10%;
  animation-delay: -7s;
  opacity: 0.03;
}

.ambient-blob--3 {
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(184, 152, 47, 0.03) 0%, transparent 70%);
  top: 40%;
  right: -15%;
  animation-delay: -14s;
  opacity: 0.03;
}

@keyframes ambientFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(30px, -20px) scale(1.05); }
  50% { transform: translate(-20px, 30px) scale(0.95); }
  75% { transform: translate(15px, 15px) scale(1.02); }
}


/* --- PHASE 3: Hero Section Enhancements --- */

/* Animated gradient background blobs */
.hero {
  overflow: hidden;
}

.hero-ambient {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-ambient .blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}

.hero-ambient .blob--gold {
  width: 50vw;
  height: 50vw;
  max-width: 700px;
  max-height: 700px;
  background: radial-gradient(circle, rgba(207, 173, 78, 0.1) 0%, transparent 60%);
  top: -20%;
  right: -10%;
  animation: heroBlob1 25s ease-in-out infinite;
}

.hero-ambient .blob--blue {
  width: 40vw;
  height: 40vw;
  max-width: 500px;
  max-height: 500px;
  background: radial-gradient(circle, rgba(30, 58, 138, 0.08) 0%, transparent 60%);
  bottom: -10%;
  left: -5%;
  animation: heroBlob2 30s ease-in-out infinite;
}

.hero-ambient .blob--warm {
  width: 30vw;
  height: 30vw;
  max-width: 400px;
  max-height: 400px;
  background: radial-gradient(circle, rgba(232, 200, 74, 0.05) 0%, transparent 60%);
  top: 30%;
  left: 40%;
  animation: heroBlob3 20s ease-in-out infinite;
}

@keyframes heroBlob1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-40px, 30px) scale(1.1); }
  66% { transform: translate(20px, -20px) scale(0.9); }
}

@keyframes heroBlob2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(30px, -40px) scale(1.08); }
  66% { transform: translate(-25px, 20px) scale(0.95); }
}

@keyframes heroBlob3 {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.04; }
  50% { transform: translate(-30px, 30px) scale(1.15); opacity: 0.07; }
}

/* Hero stat counter animation helper */
.hero-stat-value[data-count] {
  font-variant-numeric: tabular-nums;
}

/* Ensure ALL btn text stays visible above ::before pseudo-element */
.btn {
  z-index: 0;
  isolation: isolate;
}

.btn::before {
  z-index: -1 !important;
}


/* --- PHASE 5: Inner Page Scroll Reveal Classes --- */

/* Scroll-triggered reveal states */
.reveal-section {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-section.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* H2 gold underline draw */
.article-content h2 {
  position: relative;
}

.article-content h2::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gold-line), var(--gold-bright));
  transition: width 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.article-content h2.revealed::after {
  width: 48px;
}

/* Staggered card entrance */
.related-card,
.seed-card {
  transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* TOC active link highlighting */
.toc-sticky .toc-nav a.active {
  color: var(--gold-primary);
  border-left-color: var(--gold-primary);
  background: rgba(207, 173, 78, 0.03);
}


/* --- Tabular Nums for Stats --- */
.hero-stat-value,
.trust-item-value {
  font-variant-numeric: tabular-nums;
}


/* --- Additional mobile polish --- */
@media (max-width: 768px) {
  /* Ensure ambient blobs don't cause overflow */
  .ambient-blob {
    display: none;
  }

  .hero-ambient .blob {
    opacity: 0.5;
  }

  /* Better mobile card spacing */
  .services-grid,
  .section-grid {
    gap: 1rem;
  }

  /* Footer spacing */
  .site-footer {
    padding: 4rem 0 1.5rem;
  }
}