/* ═══════════════════════════════════════════════════════════════
   BUKA SPRL — ANIMATIONS
   Scroll-triggered reveals, hover effects, transitions
   ═══════════════════════════════════════════════════════════════ */

/* ── REVEAL SYSTEM — ekolana style (Intersection Observer) ────── */

/* Base hidden state — more dramatic drop */
.reveal-up {
  opacity: 0;
  transform: translateY(50px);
  transition:
    opacity 1s cubic-bezier(0.16,1,0.3,1),
    transform 1s cubic-bezier(0.16,1,0.3,1);
}
.reveal-card {
  opacity: 0;
  transform: translateY(35px) scale(0.98);
  transition:
    opacity 0.9s cubic-bezier(0.16,1,0.3,1),
    transform 0.9s cubic-bezier(0.16,1,0.3,1);
}

/* Active/visible state */
.reveal-up.is-visible  { opacity: 1; transform: translateY(0); }
.reveal-card.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* Stagger delays */
.is-visible[data-delay="0"]   { transition-delay: 0ms; }
.is-visible[data-delay="50"]  { transition-delay: 50ms; }
.is-visible[data-delay="80"]  { transition-delay: 80ms; }
.is-visible[data-delay="100"] { transition-delay: 100ms; }
.is-visible[data-delay="150"] { transition-delay: 150ms; }
.is-visible[data-delay="160"] { transition-delay: 160ms; }
.is-visible[data-delay="200"] { transition-delay: 200ms; }
.is-visible[data-delay="240"] { transition-delay: 240ms; }
.is-visible[data-delay="250"] { transition-delay: 250ms; }
.is-visible[data-delay="300"] { transition-delay: 300ms; }
.is-visible[data-delay="350"] { transition-delay: 350ms; }
.is-visible[data-delay="400"] { transition-delay: 400ms; }
.is-visible[data-delay="450"] { transition-delay: 450ms; }
.is-visible[data-delay="500"] { transition-delay: 500ms; }
.is-visible[data-delay="550"] { transition-delay: 550ms; }
.is-visible[data-delay="600"] { transition-delay: 600ms; }
.is-visible[data-delay="650"] { transition-delay: 650ms; }

/* Section title — clip reveal */
.section-title { overflow: hidden; }

/* ── HERO ENTRANCE ANIMATIONS ────────────────────────────────── */

/* Hero eyebrow — typed in on load */
.hero-eyebrow.is-visible {
  opacity: 1;
  animation: eyebrow-in 0.8s var(--ease-out) 0.2s both;
}
@keyframes eyebrow-in {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Hero title lines — reveal with clip */
.title-line {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s var(--ease-out);
}
.title-line:nth-child(1) { transition-delay: 0.15s; }
.title-line:nth-child(2) { transition-delay: 0.32s; }
.title-line.line-visible { clip-path: inset(0 0 0% 0); }

/* Pulsing glow on primary CTA */
@keyframes cta-glow {
  0%, 100% { box-shadow: 0 0 12px rgba(200,134,58,0.25), 0 0 0 0 rgba(200,134,58,0.15); }
  50%       { box-shadow: 0 0 24px rgba(200,134,58,0.45), 0 0 0 8px rgba(200,134,58,0); }
}
.hero-ctas .btn-primary { animation: cta-glow 3s ease-in-out infinite; }
.hero-ctas .btn-primary:hover { animation: none; }

/* ── GOLD DIVIDER LINE DRAW ───────────────────────────────────── */
@keyframes line-draw {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}
.section-tag.is-visible::before {
  animation: line-draw 0.6s var(--ease-out) 0.1s both;
}

/* ── COUNTER ANIMATION ───────────────────────────────────────── */
.stat-number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── SERVICE CARD TILT ───────────────────────────────────────── */
/* Tilt is driven via JS inline style, but shadow response is CSS */
.tilt-card {
  transition: background 0.3s, box-shadow 0.3s, transform 0.1s;
  will-change: transform;
}
.tilt-card:hover {
  box-shadow:
    0 24px 48px rgba(0,0,0,0.5),
    0 8px 16px rgba(0,0,0,0.3);
}

/* ── MINERAL CARD FOCUS RING ──────────────────────────────────── */
.mineral-card:focus-visible {
  outline: 2px solid var(--copper);
  outline-offset: -2px;
}

/* ── GALLERY ITEM REVEAL WITH CLIP ────────────────────────────── */
.gallery-item.gallery-clip {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 0.9s var(--ease-out);
}
.gallery-item.gallery-clip.gallery-revealed {
  clip-path: inset(0 0% 0 0);
}

/* ── SERVICE CARD ALTERNATING SLIDE-IN ─────────────────────────── */
.service-card.slide-from-left {
  opacity: 0;
  transform: translateX(-48px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.service-card.slide-from-right {
  opacity: 0;
  transform: translateX(48px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
}
.service-card.slide-from-left.slide-in,
.service-card.slide-from-right.slide-in {
  opacity: 1;
  transform: none;
}

/* ── ABOUT IMAGE CLIP-PATH REVEAL ─────────────────────────────── */
#aboutImage {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease-out);
}
#aboutImage.is-revealed {
  clip-path: inset(0 0% 0 0);
}

/* ── SECTION LABEL FADE ───────────────────────────────────────── */
.section-label {
  opacity: 0;
  transition: opacity 0.6s ease;
}
.section-label.label-visible {
  opacity: 1;
}

/* ── PROMISE CARD BORDER GLOW ON HOVER ───────────────────────── */
@keyframes border-glow {
  0%, 100% { opacity: 0.06; }
  50%       { opacity: 0.2; }
}
.promise-card:hover {
  box-shadow: inset 0 0 40px rgba(200,134,58,0.04);
}

/* ── SCROLL INDICATOR ARROW ─────────────────────────────────── */
@keyframes scroll-arrow-bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(6px); }
}

/* ── PAGE LOAD BODY FADE ─────────────────────────────────────── */
@keyframes page-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
body {
  animation: page-fade-in 0.5s ease-out both;
}

/* ── REDUCED MOTION OVERRIDES ─────────────────────────────────── */
@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;
  }
  .reveal-up,
  .reveal-card {
    opacity: 1;
    transform: none;
    clip-path: none;
    transition: none;
  }
  .title-line {
    clip-path: none;
    transition: none;
  }
  .hero-ctas .btn-primary { animation: none; }
  body { animation: none; }
}

/* ── FORM INPUT FOCUS ANIMATION ──────────────────────────────── */
@keyframes input-focus-in {
  from { box-shadow: 0 0 0 0 rgba(200,134,58,0); }
  to   { box-shadow: 0 0 0 2px rgba(200,134,58,0.15); }
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  animation: input-focus-in 0.2s ease-out both;
}

/* ── SUBMIT BUTTON LOADING STATE ──────────────────────────────── */
@keyframes btn-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.btn-submit.loading span { opacity: 0.5; }
.btn-submit.loading::after {
  content: '';
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  border: 2px solid rgba(245,240,232,0.3);
  border-top-color: var(--offwhite);
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}
.btn-submit { position: relative; }

/* ── NAVBAR LINK HOVER ────────────────────────────────────────── */
/* already in main.css — nothing extra needed */

/* ── MOBILE MENU ITEM STAGGER ────────────────────────────────── */
.mobile-menu.open .mobile-link {
  animation: mobile-item-in 0.4s var(--ease-out) both;
}
.mobile-menu.open .mobile-link:nth-child(1) { animation-delay: 0.05s; }
.mobile-menu.open .mobile-link:nth-child(2) { animation-delay: 0.10s; }
.mobile-menu.open .mobile-link:nth-child(3) { animation-delay: 0.15s; }
.mobile-menu.open .mobile-link:nth-child(4) { animation-delay: 0.20s; }
.mobile-menu.open .mobile-link:nth-child(5) { animation-delay: 0.25s; }
.mobile-menu.open .mobile-link:nth-child(6) { animation-delay: 0.30s; }
@keyframes mobile-item-in {
  from { opacity: 0; transform: translateX(-16px); }
  to   { opacity: 1; transform: translateX(0); }
}


/* ═══════════════════════════════════════════════════════════════
   ANIMATED SVG ICON KEYFRAMES
   ═══════════════════════════════════════════════════════════════ */

/* --- Service 1: Passport stamp --- */
@keyframes stamp-in {
  0%   { transform: scale(1.4) rotate(-8deg); opacity: 0; }
  60%  { transform: scale(0.95) rotate(2deg); opacity: 1; }
  100% { transform: scale(1) rotate(0deg);    opacity: 1; }
}
.icon-passport:hover .passport-stamp {
  animation: stamp-in 0.45s cubic-bezier(0.34,1.56,0.64,1) both;
}

/* --- Service 2: Building window light --- */
@keyframes window-blink {
  0%, 90%, 100% { opacity: 0.15; }
  45%            { opacity: 1; }
}
.icon-building .building-window {
  animation: window-blink 3s ease-in-out infinite;
}
.icon-building .building-window:nth-child(2) { animation-delay: 0.5s; }
.icon-building .building-window:nth-child(3) { animation-delay: 1.0s; }
.icon-building .building-window:nth-child(4) { animation-delay: 1.5s; }

/* --- Service 3: Pickaxe swing --- */
@keyframes pickaxe-swing {
  0%   { transform: rotate(0deg);   transform-origin: 80% 20%; }
  30%  { transform: rotate(-35deg); transform-origin: 80% 20%; }
  60%  { transform: rotate(12deg);  transform-origin: 80% 20%; }
  100% { transform: rotate(0deg);   transform-origin: 80% 20%; }
}
.icon-mine:hover .mine-pickaxe {
  animation: pickaxe-swing 0.6s cubic-bezier(0.36,0.07,0.19,0.97) both;
}

/* --- Service 4: Document lines draw --- */
@keyframes line-draw-in {
  from { stroke-dashoffset: 40; opacity: 0; }
  to   { stroke-dashoffset: 0;  opacity: 1; }
}
.icon-doc .doc-line {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
}
.icon-svg.icon-visible .icon-doc .doc-line:nth-child(1) {
  animation: line-draw-in 0.4s ease-out 0.1s both;
}
.icon-svg.icon-visible .icon-doc .doc-line:nth-child(2) {
  animation: line-draw-in 0.4s ease-out 0.25s both;
}
.icon-svg.icon-visible .icon-doc .doc-line:nth-child(3) {
  animation: line-draw-in 0.4s ease-out 0.4s both;
}

/* --- Service 5: Scale balance --- */
@keyframes scale-tip-left {
  0%, 100% { transform: rotate(0deg);  transform-origin: center 38%; }
  50%       { transform: rotate(-8deg); transform-origin: center 38%; }
}
.icon-scale .scale-beam {
  animation: scale-tip-left 3s ease-in-out infinite;
}

/* --- Service 6: Magnifier zoom --- */
@keyframes lens-zoom {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.12); }
}
.icon-lens:hover .lens-circle {
  animation: lens-zoom 0.4s ease-in-out both;
}

/* --- Service 7: Handshake approach --- */
@keyframes hand-left-in {
  from { transform: translateX(-6px); opacity: 0.4; }
  to   { transform: translateX(0);    opacity: 1; }
}
@keyframes hand-right-in {
  from { transform: translateX(6px);  opacity: 0.4; }
  to   { transform: translateX(0);    opacity: 1; }
}
.icon-svg.icon-visible .icon-shake .shake-left  { animation: hand-left-in  0.5s ease-out 0.1s both; }
.icon-svg.icon-visible .icon-shake .shake-right { animation: hand-right-in 0.5s ease-out 0.1s both; }

/* --- Service 8: Shield pulse --- */
@keyframes shield-pulse {
  0%, 100% { filter: drop-shadow(0 0 0px rgba(181,116,58,0));  }
  50%       { filter: drop-shadow(0 0 8px rgba(181,116,58,0.6)); }
}
.icon-shield .shield-body {
  animation: shield-pulse 2.5s ease-in-out infinite;
}

/* --- Promise 1: Pin drop --- */
@keyframes pin-drop {
  0%   { transform: translateY(-10px); opacity: 0; }
  60%  { transform: translateY(3px);   opacity: 1; }
  100% { transform: translateY(0);     opacity: 1; }
}
.icon-svg.icon-visible .icon-pin .pin-body {
  animation: pin-drop 0.5s cubic-bezier(0.34,1.56,0.64,1) 0.1s both;
}

/* --- Promise 2: Person approach --- */
@keyframes person-approach {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.icon-svg.icon-visible .icon-people .people-figure {
  animation: person-approach 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
}
.icon-svg.icon-visible .icon-people .people-figure:nth-child(2) { animation-delay: 0.12s; }

/* --- Promise 3: Gear spin --- */
@keyframes gear-spin {
  from { transform: rotate(0deg);   transform-origin: center; }
  to   { transform: rotate(360deg); transform-origin: center; }
}
.icon-gear .gear-body {
  animation: gear-spin 6s linear infinite;
}
.icon-gear:hover .gear-body {
  animation-duration: 1.5s;
}

/* --- Promise 4: Lock open --- */
@keyframes lock-open {
  0%   { transform: rotate(-15deg) translateX(-2px); }
  100% { transform: rotate(0deg)   translateX(0); }
}
.icon-svg.icon-visible .icon-lock .lock-shackle {
  animation: lock-open 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.2s both;
}

/* --- Values: Star spin --- */
@keyframes star-spin {
  from { transform: rotate(0deg)   scale(1);    transform-origin: center; }
  to   { transform: rotate(360deg) scale(1);    transform-origin: center; }
}
.icon-star:hover .star-shape {
  animation: star-spin 0.8s ease-in-out both;
}

/* --- Values: Medal shine --- */
@keyframes medal-shine {
  0%   { opacity: 0; transform: translateX(-10px) rotate(30deg); }
  50%  { opacity: 1; transform: translateX(10px)  rotate(30deg); }
  100% { opacity: 0; transform: translateX(20px)  rotate(30deg); }
}
.icon-medal .medal-shine {
  animation: medal-shine 2.5s ease-in-out infinite;
}

/* --- Values: Heart beat --- */
@keyframes heartbeat {
  0%, 100% { transform: scale(1);    }
  14%       { transform: scale(1.15); }
  28%       { transform: scale(1);    }
  42%       { transform: scale(1.1);  }
  70%       { transform: scale(1);    }
}
.icon-heart .heart-shape {
  animation: heartbeat 2s ease-in-out infinite;
  transform-origin: center;
}

/* --- Contact: Phone ring --- */
@keyframes phone-ring {
  0%, 100% { transform: rotate(0deg);   }
  10%       { transform: rotate(-12deg); }
  20%       { transform: rotate(12deg);  }
  30%       { transform: rotate(-10deg); }
  40%       { transform: rotate(8deg);   }
  50%       { transform: rotate(0deg);   }
}
.icon-phone .phone-body {
  animation: phone-ring 3s ease-in-out infinite;
  transform-origin: center;
}

/* --- Contact: Mail open --- */
@keyframes mail-flap {
  0%, 100% { d: path("M2 7 L10 12 L18 7"); }
  50%       { d: path("M2 4 L10 9 L18 4"); }
}
.icon-mail:hover .mail-flap {
  animation: mail-flap 0.3s ease-in-out both;
}

/* --- Contact: Location dot pulse --- */
@keyframes dot-pulse {
  0%, 100% { transform: scale(1);   opacity: 1; }
  50%       { transform: scale(1.6); opacity: 0.4; }
}
.icon-location .loc-dot {
  animation: dot-pulse 2s ease-in-out infinite;
  transform-origin: center;
}

/* --- Contact: Clock tick --- */
@keyframes clock-tick {
  0%  { transform: rotate(0deg);   transform-origin: 50% 100%; }
  25% { transform: rotate(6deg);   transform-origin: 50% 100%; }
  75% { transform: rotate(-6deg);  transform-origin: 50% 100%; }
  100%{ transform: rotate(0deg);   transform-origin: 50% 100%; }
}
.icon-clock .clock-hand {
  animation: clock-tick 1s ease-in-out infinite;
}


/* ── HERO TITLE SHIMMER (1c) ────────────────────────────────── */
@keyframes title-shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}

.hero-title {
  position: relative;
}

/* Shimmer on the italic accent */
.hero-title em,
.title-accent {
  background: linear-gradient(
    90deg,
    var(--copper)    0%,
    #e8c080         30%,
    #f5e0b0         50%,
    #e8c080         70%,
    var(--copper)   100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: title-shimmer 6s linear infinite;
}

/* Subtle glow behind the full title */
.hero-title::after {
  content: '';
  position: absolute;
  inset: -20px -40px;
  background: radial-gradient(ellipse 60% 50% at 50% 60%, rgba(181,116,58,0.08) 0%, transparent 70%);
  pointer-events: none;
  animation: title-shimmer-glow 8s ease-in-out infinite alternate;
}
@keyframes title-shimmer-glow {
  from { opacity: 0.5; transform: scale(0.95); }
  to   { opacity: 1;   transform: scale(1.05); }
}