/* ============================================================
   OLYMPIA — GLAMOUR LAYER
   Premium visual elevation. No structure changes.
   CSS-only: backgrounds, animations, card effects, buttons.
   ============================================================ */

/* ─── KEYFRAMES ─────────────────────────────────────────── */

/* Slow gold pulse behind sections */
@keyframes goldPulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.08); }
}
/* Ambient light drift */
@keyframes driftLight {
  0%   { transform: translate(0,  0)   scale(1); }
  33%  { transform: translate(12px,-8px)  scale(1.04); }
  66%  { transform: translate(-8px, 10px) scale(0.97); }
  100% { transform: translate(0,  0)   scale(1); }
}
/* Hero text glow pulse */
@keyframes heroGlow {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 0.9; }
}
/* Card border shimmer */
@keyframes borderShimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Slow moving ambient gradient */
@keyframes ambientMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Subtle shine sweep */
@keyframes shineSweep {
  0%   { transform: translateX(-120%) skewX(-12deg); }
  100% { transform: translateX(220%)  skewX(-12deg); }
}
/* Gold divider draw */
@keyframes drawLine {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}
/* Soft float for badges */
@keyframes softFloat {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

/* ─── HERO — CINEMATIC UPGRADE ───────────────────────────── */

/* Animated ambient glow behind hero text */
.hero-content::before {
  content: '';
  position: absolute;
  top: 10%; left: -15%;
  width: 70%; height: 80%;
  border-radius: 50%;
  background: radial-gradient(ellipse,
    rgba(201,168,76,0.09) 0%, transparent 65%);
  pointer-events: none;
  animation: driftLight 18s ease-in-out infinite;
  z-index: 0;
}
.hero-content > * { position: relative; z-index: 1; }

/* Hero bg slow drift */
.hero-bg {
  animation: heroKen 16s ease-out both, ambientMove 40s ease-in-out infinite !important;
  background-size: 110% 110% !important;
}

/* Badge soft float */
.hero-eyebrow {
  animation: heroSlideDown 0.8s cubic-bezier(0.16,1,0.3,1) 0.25s both,
             softFloat 6s ease-in-out 2s infinite !important;
}

/* Gold title glow */
.hero-title .gold::before {
  content: '';
  position: absolute;
  inset: -8px -16px;
  background: radial-gradient(ellipse at center,
    rgba(201,168,76,0.14) 0%, transparent 65%);
  pointer-events: none;
  animation: heroGlow 4s ease-in-out infinite;
  z-index: -1;
}
.hero-title .gold { position: relative; }

/* ─── AMBIENT SECTION GLOWS ──────────────────────────────── */

/* Each section gets an animated ambient orb */
.services-overview .container::before,
.why-section .container::before,
.featured-projects .container::before,
.areas-section .container::before,
.trust-section .container::before,
.cta-section .container::before {
  content: '';
  position: absolute;
  width: 480px; height: 480px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(60px);
}
.services-overview .container::before {
  background: radial-gradient(circle, rgba(201,168,76,0.07) 0%, transparent 65%);
  bottom: -80px; left: 50%;
  transform: translateX(-50%);
  animation: goldPulse 10s ease-in-out infinite;
}
.why-section .container::before {
  background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 65%);
  top: -40px; left: -80px;
  animation: goldPulse 12s ease-in-out 2s infinite;
}
.featured-projects .container::before {
  background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 65%);
  top: -40px; right: -80px;
  left: auto;
  animation: goldPulse 14s ease-in-out 4s infinite;
}
.trust-section .container::before {
  background: radial-gradient(circle, rgba(201,168,76,0.07) 0%, transparent 65%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: goldPulse 11s ease-in-out 1s infinite;
}
.cta-section .container::before {
  background: radial-gradient(circle, rgba(201,168,76,0.1) 0%, transparent 65%);
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  animation: goldPulse 8s ease-in-out infinite;
}
/* Container must be relative for orbs */
.services-overview .container,
.why-section .container,
.featured-projects .container,
.areas-section .container,
.trust-section .container,
.cta-section .container { position: relative; }
/* Content above orbs */
.services-overview .container > *,
.why-section .container > *,
.featured-projects .container > *,
.areas-section .container > *,
.trust-section .container > *,
.cta-section .container > * { position: relative; z-index: 1; }

/* ─── SERVICE PHOTO CARDS — SPECTACULAR ──────────────────── */

.svc-photo-card {
  position: relative !important;
  overflow: hidden !important;
  /* Animated gold border using gradient outline trick */
  background:
    linear-gradient(#0f0f0f, #0f0f0f) padding-box,
    linear-gradient(135deg, rgba(201,168,76,0.6), rgba(201,168,76,0.1), rgba(201,168,76,0.4)) border-box !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  box-shadow:
    0 4px 24px rgba(0,0,0,0.55),
    0 0 0 0 rgba(201,168,76,0) !important;
  transition:
    transform 0.4s cubic-bezier(0.22,1,0.36,1),
    box-shadow 0.4s ease !important;
}
.svc-photo-card:hover {
  transform: translateY(-7px) !important;
  box-shadow:
    0 16px 48px rgba(0,0,0,0.65),
    0 0 32px rgba(201,168,76,0.12),
    0 0 0 1px rgba(201,168,76,0.3) !important;
  background:
    linear-gradient(#141410, #111108) padding-box,
    linear-gradient(135deg, rgba(201,168,76,0.9), rgba(201,168,76,0.3), rgba(201,168,76,0.7)) border-box !important;
}

/* Gold sweep on hover */
.svc-photo-card::after {
  content: '' !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(
    115deg,
    transparent 30%,
    rgba(201,168,76,0.06) 50%,
    transparent 70%
  ) !important;
  transform: translateX(-120%) skewX(-12deg) !important;
  transition: transform 0.7s ease !important;
  pointer-events: none !important;
  z-index: 4 !important;
}
.svc-photo-card:hover::after {
  transform: translateX(200%) skewX(-12deg) !important;
}

/* Inner radial glow on card body */
.svc-photo-body {
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(201,168,76,0.05) 0%, transparent 60%),
    linear-gradient(180deg, #131313 0%, #0e0e0e 100%) !important;
  border-top: 1px solid rgba(201,168,76,0.12) !important;
}

/* Card title gold on hover */
.svc-photo-card:hover .svc-photo-body h3 { color: rgba(255,255,255,1) !important; }
.svc-photo-body h3 {
  transition: color 0.3s ease !important;
}

/* Mobile tap */
@media (max-width: 768px) {
  .svc-photo-card:active {
    transform: scale(0.97) !important;
    box-shadow: 0 0 0 1px rgba(201,168,76,0.5), 0 8px 24px rgba(0,0,0,0.5) !important;
  }
}

/* ─── FEATURED PROJECT CARDS ─────────────────────────────── */
.featured-item {
  box-shadow: 0 4px 20px rgba(0,0,0,0.5) !important;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease !important;
}
.featured-item:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.65), 0 0 0 1px rgba(201,168,76,0.2) !important;
}

/* ─── TRUST CARDS ───────────────────────────────────────── */
.trust-card {
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(201,168,76,0.06) 0%, transparent 55%),
    linear-gradient(160deg, #181818 0%, #121212 100%) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.04) !important;
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease, border-color 0.3s ease !important;
}
.trust-card:hover {
  transform: translateY(-5px) !important;
  border-color: rgba(201,168,76,0.25) !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.55), 0 0 24px rgba(201,168,76,0.08) !important;
}

/* ─── WHY POINTS ─────────────────────────────────────────── */
.why-point {
  background:
    linear-gradient(135deg,
      rgba(255,255,255,0.03) 0%,
      rgba(201,168,76,0.02) 100%) !important;
  border: 1px solid rgba(255,255,255,0.05) !important;
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), border-color 0.3s ease, background 0.3s ease !important;
}
.why-point:hover {
  transform: translateX(8px) !important;
  border-color: rgba(201,168,76,0.2) !important;
  background: rgba(201,168,76,0.04) !important;
}

/* ─── PROCESS STEPS ─────────────────────────────────────── */
.process-step {
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(201,168,76,0.05) 0%, transparent 60%),
    linear-gradient(160deg, #181818 0%, #131313 100%) !important;
  border: 1px solid rgba(255,255,255,0.04) !important;
  transition: background 0.3s ease, border-color 0.3s ease !important;
}
.process-step:hover {
  background:
    radial-gradient(ellipse at 50% 0%,
      rgba(201,168,76,0.1) 0%, transparent 60%),
    linear-gradient(160deg, #1e1e14 0%, #161610 100%) !important;
  border-color: rgba(201,168,76,0.18) !important;
}

/* ─── GALLERY ITEMS ──────────────────────────────────────── */
.gallery-item {
  box-shadow: 0 2px 12px rgba(0,0,0,0.45) !important;
  transition: transform 0.5s cubic-bezier(0.22,1,0.36,1), box-shadow 0.4s ease !important;
}
.gallery-item:hover {
  transform: scale(1.02) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.6), 0 0 0 1px rgba(201,168,76,0.2) !important;
}
@media (max-width: 768px) {
  .gallery-item:active {
    transform: scale(0.97) !important;
    box-shadow: 0 0 0 1px rgba(201,168,76,0.35) !important;
  }
}

/* ─── CONTACT INFO CARDS ─────────────────────────────────── */
.contact-info-card {
  background:
    radial-gradient(ellipse at 0% 0%,
      rgba(201,168,76,0.06) 0%, transparent 55%),
    linear-gradient(160deg, #181818 0%, #111 100%) !important;
  border: 1px solid rgba(201,168,76,0.1) !important;
  box-shadow: 0 4px 20px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.03) !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
}
.contact-info-card:hover {
  border-color: rgba(201,168,76,0.22) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.5), 0 0 20px rgba(201,168,76,0.06) !important;
}

/* ─── AREA TAGS ──────────────────────────────────────────── */
.area-tag {
  background: rgba(255,255,255,0.025) !important;
  border: 1px solid rgba(201,168,76,0.14) !important;
  transition: all 0.3s cubic-bezier(0.22,1,0.36,1) !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3) !important;
}
.area-tag:hover {
  background: rgba(201,168,76,0.08) !important;
  border-color: rgba(201,168,76,0.5) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(201,168,76,0.15) !important;
}

/* ─── PREMIUM BUTTONS ────────────────────────────────────── */

/* Gold btn shine */
.btn-gold, .btn-hero-primary, .mobile-menu-footer-cta {
  position: relative !important;
  overflow: hidden !important;
}
.btn-gold::after,
.btn-hero-primary::after,
.mobile-menu-footer-cta::after {
  content: '' !important;
  position: absolute !important;
  top: 0; bottom: 0;
  left: -80px;
  width: 60px;
  background: linear-gradient(90deg,
    transparent, rgba(255,255,255,0.22), transparent) !important;
  transform: skewX(-12deg) !important;
  opacity: 0;
  transition: none !important;
  pointer-events: none !important;
}
.btn-gold:hover::after,
.btn-hero-primary:hover::after,
.mobile-menu-footer-cta:hover::after {
  animation: shineSweep 0.55s ease forwards !important;
  opacity: 1 !important;
}

/* Outline gold btn */
.btn-outline-gold {
  transition: all 0.35s cubic-bezier(0.22,1,0.36,1) !important;
  box-shadow: 0 0 0 0 rgba(201,168,76,0) !important;
}
.btn-outline-gold:hover {
  box-shadow: 0 4px 20px rgba(201,168,76,0.25), 0 0 0 1px rgba(201,168,76,0.4) !important;
  transform: translateY(-2px) !important;
}

/* ─── SECTION HEADERS — glow behind h2 ──────────────────── */
.section-header h2 {
  text-shadow: 0 0 60px rgba(201,168,76,0.08) !important;
}
.section-header.visible h2 {
  animation: subtleGlow 6s ease-in-out 1s infinite !important;
}
@keyframes subtleGlow {
  0%,100% { text-shadow: 0 0 40px rgba(201,168,76,0.06); }
  50%      { text-shadow: 0 0 70px rgba(201,168,76,0.14); }
}

/* ─── GOLD DIVIDERS — animated draw ─────────────────────── */
.services-overview::before,
.why-section::before,
.featured-projects::before,
.areas-section::before,
.trust-section::before,
.cta-section::before {
  animation: drawLine 1.2s cubic-bezier(0.22,1,0.36,1) both !important;
  transform-origin: center !important;
}

/* ─── FOOTER COLUMNS — stagger on view ──────────────────── */
.footer-brand,
.footer-col {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1) !important;
}
.footer.visible .footer-brand     { opacity:1; transform:none; transition-delay:0.05s; }
.footer.visible .footer-col:nth-child(1) { opacity:1; transform:none; transition-delay:0.12s; }
.footer.visible .footer-col:nth-child(2) { opacity:1; transform:none; transition-delay:0.20s; }
.footer.visible .footer-col:nth-child(3) { opacity:1; transform:none; transition-delay:0.28s; }

/* ─── VIDEO SECTION ──────────────────────────────────────── */
/* Style the fallback image nicely */
.video-fallback-wrap {
  max-width: 860px;
  margin: 0 auto;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(201,168,76,0.15) !important;
  position: relative !important;
}
.video-fallback {
  width: 100% !important;
  display: block !important;
  aspect-ratio: 16/9 !important;
  object-fit: cover !important;
  filter: brightness(0.75) !important;
}
.video-fallback-label {
  position: absolute !important;
  bottom: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  background: rgba(8,8,8,0.7) !important;
  border: 1px solid rgba(201,168,76,0.35) !important;
  color: var(--gold) !important;
  font-size: 0.7rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  padding: 8px 20px !important;
  border-radius: 2px !important;
  backdrop-filter: blur(8px) !important;
  white-space: nowrap !important;
}
/* Native video wrapper premium */
.video-wrapper {
  max-width: 500px !important;
  margin: 0 auto !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.65), 0 0 0 1px rgba(201,168,76,0.15) !important;
  position: relative !important;
}
.video-wrapper video {
  border-radius: 0 !important;
}

/* ─── MOBILE PERFORMANCE ─────────────────────────────────── */
@media (max-width: 768px) {
  /* Disable heavy filter blur on mobile */
  .services-overview .container::before,
  .why-section .container::before,
  .featured-projects .container::before,
  .areas-section .container::before,
  .trust-section .container::before,
  .cta-section .container::before {
    filter: blur(40px) !important;
    width: 300px !important;
    height: 300px !important;
  }
  /* Reduce animation drift on mobile */
  .hero-content::before { animation-duration: 28s !important; }
  .hero-eyebrow { animation: heroSlideDown 0.8s cubic-bezier(0.16,1,0.3,1) 0.25s both !important; }

  /* Gallery item — no scale on mobile (use tap instead) */
  .gallery-item:hover { transform: none !important; }
}

/* ─── REDUCE MOTION — respect user preference ────────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-content::before,
  .services-overview .container::before,
  .why-section .container::before,
  .featured-projects .container::before,
  .trust-section .container::before,
  .cta-section .container::before,
  .hero-eyebrow { animation: none !important; }
  .section-header.visible h2 { animation: none !important; text-shadow: none !important; }
}