/* ============================================================
   OLYMPIA — LIFE & DEPTH
   Mobile-first animations, backgrounds, visual rhythm.
   No structural changes.
   ============================================================ */

/* ─── 1. BACKGROUND DEPTH — sections feel layered, not flat ─── */

/* Body: very subtle global gold ambiance */
body {
  background:
    radial-gradient(ellipse at 18% 0%,   rgba(201,168,76,0.055) 0%, transparent 45%),
    radial-gradient(ellipse at 82% 100%, rgba(201,168,76,0.04)  0%, transparent 45%),
    #080808;
}

/* Grain texture overlay on every section (CSS, no image needed) */
section::after,
.services-overview::after,
.why-section::after,
.featured-projects::after,
.areas-section::after,
.trust-section::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23g)' opacity='0.022'/%3E%3C/svg%3E");
  z-index: 0;
}
/* Keep content above grain */
section > .container,
.services-overview > .container,
.why-section > .container,
.featured-projects > .container,
.areas-section > .container,
.trust-section > .container { position: relative; z-index: 1; }

/* Services overview: upward gold glow from bottom */
.services-overview {
  background:
    radial-gradient(ellipse at 50% 105%, rgba(201,168,76,0.08) 0%, transparent 55%),
    #0f0f0f !important;
  position: relative;
}

/* Why section: subtle left warmth */
.why-section {
  background:
    radial-gradient(ellipse at 0% 50%, rgba(201,168,76,0.06) 0%, transparent 50%),
    #080808 !important;
  position: relative;
}

/* Areas section: center glow */
.areas-section {
  background:
    radial-gradient(ellipse at 50% 60%, rgba(201,168,76,0.06) 0%, transparent 55%),
    #0f0f0f !important;
  position: relative;
}

/* Trust cards section */
.trust-section {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(201,168,76,0.05) 0%, transparent 50%),
    #0f0f0f !important;
  position: relative;
}

/* CTA: more dramatic radial */
.cta-section {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(201,168,76,0.1) 0%, transparent 60%),
    radial-gradient(ellipse at 50% 0%,  rgba(201,168,76,0.06) 0%, transparent 45%),
    #161616 !important;
}

/* Gold section separators */
.services-overview,
.why-section,
.featured-projects,
.areas-section,
.trust-section,
.cta-section {
  border-top: 1px solid rgba(201,168,76,0.07);
}

/* ─── 2. SCROLL ANIMATIONS — mobile-tuned ─── */

/* Base hidden state */
.fade-up   { opacity: 0; transform: translateY(36px); }
.fade-left { opacity: 0; transform: translateX(-36px); }
.fade-right{ opacity: 0; transform: translateX(36px); }
.fade-scale{ opacity: 0; transform: scale(0.95); }

/* Revealed state */
.fade-up.visible,
.fade-left.visible,
.fade-right.visible,
.fade-scale.visible {
  opacity: 1;
  transform: none;
}

/* Transition config — smooth but not too slow on mobile */
.fade-up, .fade-left, .fade-right {
  transition:
    opacity 0.65s cubic-bezier(0.22,1,0.36,1),
    transform 0.65s cubic-bezier(0.22,1,0.36,1);
  will-change: opacity, transform;
}
.fade-scale {
  transition:
    opacity 0.6s ease,
    transform 0.6s cubic-bezier(0.22,1,0.36,1);
}

/* Stagger delays */
.delay-1 { transition-delay: 0.08s !important; }
.delay-2 { transition-delay: 0.16s !important; }
.delay-3 { transition-delay: 0.24s !important; }
.delay-4 { transition-delay: 0.32s !important; }
.delay-5 { transition-delay: 0.40s !important; }
.delay-6 { transition-delay: 0.50s !important; }

/* Section headers: title clips upward */
.section-header h2 {
  overflow: hidden;
}

/* ─── 3. SERVICE CARDS — stagger + depth ─── */
.services-grid { position: relative; }

/* Each card starts hidden, triggers on scroll via .stagger-children.visible */
.stagger-children .service-card {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.6s cubic-bezier(0.22,1,0.36,1),
    transform 0.6s cubic-bezier(0.22,1,0.36,1),
    background 0.4s ease;
}
.stagger-children.visible .service-card:nth-child(1) { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.05s both; }
.stagger-children.visible .service-card:nth-child(2) { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.12s both; }
.stagger-children.visible .service-card:nth-child(3) { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.19s both; }
.stagger-children.visible .service-card:nth-child(4) { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.26s both; }
.stagger-children.visible .service-card:nth-child(5) { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.33s both; }
.stagger-children.visible .service-card:nth-child(6) { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.40s both; }
.stagger-children.visible .service-card:nth-child(7) { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.47s both; }
.stagger-children.visible .service-card:nth-child(8) { animation: cardIn 0.6s cubic-bezier(0.22,1,0.36,1) 0.54s both; }

@keyframes cardIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Mobile: tighter stagger (4 per row → faster reveal) */
@media (max-width: 768px) {
  .stagger-children.visible .service-card:nth-child(n) { animation-duration: 0.5s; }
  .stagger-children.visible .service-card:nth-child(1) { animation-delay: 0.04s; }
  .stagger-children.visible .service-card:nth-child(2) { animation-delay: 0.10s; }
  .stagger-children.visible .service-card:nth-child(3) { animation-delay: 0.16s; }
  .stagger-children.visible .service-card:nth-child(4) { animation-delay: 0.22s; }
  .stagger-children.visible .service-card:nth-child(5) { animation-delay: 0.28s; }
  .stagger-children.visible .service-card:nth-child(6) { animation-delay: 0.34s; }
  .stagger-children.visible .service-card:nth-child(7) { animation-delay: 0.40s; }
  .stagger-children.visible .service-card:nth-child(8) { animation-delay: 0.46s; }
}

/* ─── 4. SERVICE CARD — depth & micro-interaction ─── */
.service-card {
  background: linear-gradient(160deg, #1a1a1a 0%, #141414 100%) !important;
  border-bottom: 1px solid rgba(201,168,76,0.06) !important;
  border-right: 1px solid rgba(201,168,76,0.06) !important;
}
/* Tap effect on mobile */
.service-card:active { transform: scale(0.985) !important; }

/* Card: subtle inner glow on hover */
.service-card:hover {
  background: linear-gradient(160deg, #202018 0%, #181810 100%) !important;
  box-shadow: inset 0 0 30px rgba(201,168,76,0.04) !important;
}

/* ─── 5. AREA TAGS — animated reveal + depth ─── */
.areas-section.ready-to-animate .areas-list .area-tag {
  opacity: 0;
  transform: translateY(12px) scale(0.97);
  animation: tagIn 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
/* Stagger via nth-child */
.areas-section.animated .area-tag:nth-child(1)  { animation-delay: 0.04s; }
.areas-section.animated .area-tag:nth-child(2)  { animation-delay: 0.08s; }
.areas-section.animated .area-tag:nth-child(3)  { animation-delay: 0.12s; }
.areas-section.animated .area-tag:nth-child(4)  { animation-delay: 0.16s; }
.areas-section.animated .area-tag:nth-child(5)  { animation-delay: 0.20s; }
.areas-section.animated .area-tag:nth-child(6)  { animation-delay: 0.24s; }
.areas-section.animated .area-tag:nth-child(7)  { animation-delay: 0.28s; }
.areas-section.animated .area-tag:nth-child(8)  { animation-delay: 0.32s; }
.areas-section.animated .area-tag:nth-child(9)  { animation-delay: 0.36s; }
.areas-section.animated .area-tag:nth-child(10) { animation-delay: 0.40s; }
.areas-section.animated .area-tag:nth-child(11) { animation-delay: 0.44s; }
.areas-section.animated .area-tag:nth-child(12) { animation-delay: 0.48s; }

@keyframes tagIn {
  to { opacity: 1; transform: none; }
}

/* Better tag depth */
.area-tag {
  background: rgba(255,255,255,0.02) !important;
  border: 1px solid rgba(201,168,76,0.18) !important;
  transition: all 0.3s ease !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 12px rgba(201,168,76,0.15) !important;
}

/* ─── 6. WHY CHOOSE US — better mobile ─── */
.why-section.ready-to-animate .why-point {
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,1,0.36,1);
}
.why-section.animated .why-point { opacity:1; transform:none; }
.why-section.animated .why-point:nth-child(1) { transition-delay: 0.06s; }
.why-section.animated .why-point:nth-child(2) { transition-delay: 0.13s; }
.why-section.animated .why-point:nth-child(3) { transition-delay: 0.20s; }
.why-section.animated .why-point:nth-child(4) { transition-delay: 0.27s; }
.why-section.animated .why-point:nth-child(5) { transition-delay: 0.34s; }

/* ─── 7. TRUST CARDS — pop in ─── */
.trust-section.ready-to-animate .trust-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1), background 0.4s ease !important;
}
.trust-section.animated .trust-card { opacity:1; transform:none; }
.trust-section.animated .trust-card:nth-child(1) { transition-delay: 0.06s; }
.trust-section.animated .trust-card:nth-child(2) { transition-delay: 0.14s; }
.trust-section.animated .trust-card:nth-child(3) { transition-delay: 0.22s; }

/* ─── 8. STATS BAR — number pop ─── */
[data-stats-bar].ready-to-animate .stat-number {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,1,0.36,1);
}
[data-stats-bar].stats-animated .stat-number { opacity: 1; transform: none; }
[data-stats-bar].stats-animated .fade-up:nth-child(1) .stat-number { transition-delay: 0.0s; }
[data-stats-bar].stats-animated .fade-up:nth-child(2) .stat-number { transition-delay: 0.1s; }
[data-stats-bar].stats-animated .fade-up:nth-child(3) .stat-number { transition-delay: 0.2s; }
[data-stats-bar].stats-animated .fade-up:nth-child(4) .stat-number { transition-delay: 0.3s; }

/* ─── 9. FEATURED ITEMS — stagger reveal ─── */
.featured-projects.ready-to-animate .featured-item {
  opacity: 0;
  transform: scale(0.97);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.22,1,0.36,1);
}
.featured-section-animated .featured-item:nth-child(1) { opacity:1; transform:none; transition-delay: 0.04s; }
.featured-section-animated .featured-item:nth-child(2) { opacity:1; transform:none; transition-delay: 0.12s; }
.featured-section-animated .featured-item:nth-child(3) { opacity:1; transform:none; transition-delay: 0.20s; }
.featured-section-animated .featured-item:nth-child(4) { opacity:1; transform:none; transition-delay: 0.28s; }
.featured-section-animated .featured-item:nth-child(5) { opacity:1; transform:none; transition-delay: 0.36s; }

/* ─── 10. SECTION TITLE — gold line draw on scroll ─── */
.gold-line {
  width: 0 !important;
  transition: width 1s cubic-bezier(0.22,1,0.36,1) 0.1s !important;
}
.section-header.visible .gold-line,
.fade-right.visible + .gold-line,
.gold-line.visible {
  width: 52px !important;
}

/* ─── 11. HERO SCROLL INDICATOR ─── */
.hero-scroll { opacity: 0; animation: fadeIn 0.8s ease 2.4s both; }
@keyframes fadeIn { to { opacity: 1; } }

/* ─── 12. CTA BUTTONS PULSE-BREATHE (subtle) ─── */
.cta-section .btn-gold {
  animation: ctaPulse 3.5s ease-in-out 2s infinite;
}
@keyframes ctaPulse {
  0%,100%{ box-shadow: 0 4px 20px rgba(201,168,76,0.35); }
  50%    { box-shadow: 0 4px 28px rgba(201,168,76,0.55); }
}

/* ─── 13. SECTION DIVIDERS — gold glow lines ─── */
.services-overview::before,
.why-section::before,
.featured-projects::before,
.areas-section::before {
  content: '' !important;
  position: absolute !important;
  top: 0; left: 10%; right: 10%;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(201,168,76,0.2), transparent) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* ─── 14. MOBILE-SPECIFIC RHYTHM ─── */
@media (max-width: 768px) {
  /* Reduce transform distance on mobile for snappier feel */
  .fade-up   { transform: translateY(24px); }
  .fade-left { transform: translateX(-24px); }
  .fade-right{ transform: translateX(24px); }
  @keyframes cardIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: none; }
  }
  /* Faster transitions on mobile (less lag) */
  .fade-up, .fade-left, .fade-right {
    transition-duration: 0.5s !important;
  }
  /* Why points full width on mobile */
  .why-point {
    transform: translateX(0) !important;
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.5s ease !important;
  }
  /* Section label lines hidden on narrow */
  .section-label::before,
  .section-label::after { display: none; }
}