/* ============================================
   GRABIRON INDUSTRIAL ANIMATIONS
   Modern, subtle, premium animations
   ============================================ */

:root {
  --accent: #ff6600;
  --metal: #6b7280;
  --bg-dark: #1a1a1a;
  --spark-duration: 400ms;
  --lift-duration: 300ms;
}

/* Disable animations for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .reduce-motion {
    animation: none !important;
    transition: none !important;
  }
}

/* ============================================
   1. HERO HOOK (Крюк в hero секции)
   ============================================ */

.hero-hook {
  position: absolute;
  top: 10%;
  right: 10%;
  width: 80px;
  height: 120px;
  opacity: 0.15;
  z-index: 1;
  pointer-events: none;
  transform-origin: top center;
  animation: hookSwing 4s ease-in-out infinite;
  transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-hook.scrolled {
  transform: translateY(-150px);
  opacity: 0;
}

.hero-hook:hover {
  animation: hookSwing 4s ease-in-out infinite, hookBounce 0.5s ease-out;
}

.hero-hook svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* Cable line */
.hook-cable {
  position: absolute;
  top: -100px;
  left: 50%;
  width: 2px;
  height: 100px;
  background: linear-gradient(to bottom, transparent, var(--metal));
  transform: translateX(-50%);
}

@keyframes hookSwing {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes hookBounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (max-width: 768px) {
  .hero-hook {
    width: 50px;
    height: 75px;
    right: 5%;
    opacity: 0.1;
  }
}

/* ============================================
   2. SPARK BUTTONS (Искры на кнопках)
   ============================================ */

.spark-btn {
  position: relative;
  overflow: visible;
  isolation: isolate;
}

.spark-btn::before {
  content: '';
  position: absolute;
  inset: -10px;
  pointer-events: none;
}

/* Spark particles container */
.spark-btn .sparks {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  pointer-events: none;
}

.spark {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent);
  opacity: 0;
  animation: sparkFly var(--spark-duration) ease-out forwards;
}

@keyframes sparkFly {
  0% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx), var(--ty)) scale(0.3);
  }
}

/* Button hover glow */
.spark-btn:hover {
  box-shadow: 0 0 20px rgba(255, 102, 0, 0.3),
              0 4px 12px rgba(0, 0, 0, 0.3);
}

/* ============================================
   3. SECTION LINE (Металлическая линия)
   ============================================ */

.section-line {
  position: relative;
  display: block;
  padding-bottom: 1.5rem;
  margin-bottom: 2rem;
}

.section-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  height: 3px;
  width: 0;
  background: var(--accent);
  box-shadow: 0 2px 8px rgba(255, 102, 0, 0.4);
  transition: width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}

.section-line.visible::after {
  width: 100px;
}

/* ============================================
   4. CARD LIFT (Подъём карточек крюком)
   ============================================ */

.card-lift {
  position: relative;
  transition: transform var(--lift-duration) cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow var(--lift-duration) ease;
}

.card-lift::before {
  content: '';
  position: absolute;
  top: -8px;
  right: 12px;
  width: 20px;
  height: 20px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23ff6600'%3E%3Cpath d='M12 2C10.9 2 10 2.9 10 4V8H8C6.9 8 6 8.9 6 10V20C6 21.1 6.9 22 8 22H16C17.1 22 18 21.1 18 20V10C18 8.9 17.1 8 16 8H14V4C14 2.9 13.1 2 12 2M12 4C12 4 12 6 12 8C12.55 8 13 8.45 13 9C13 9.55 12.55 10 12 10C11.45 10 11 9.55 11 9C11 8.45 11.45 8 12 8C12 6 12 4 12 4M8 10H16V20H8V10Z'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--lift-duration) ease,
              transform var(--lift-duration) cubic-bezier(0.34, 1.56, 0.64, 1);
  pointer-events: none;
}

.card-lift:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.3),
              0 2px 8px rgba(255, 102, 0, 0.2);
}

.card-lift:hover::before {
  opacity: 0.8;
  transform: translateY(0);
}

/* Mobile: trigger on viewport entry */
@media (max-width: 768px) {
  .card-lift:hover {
    transform: none;
  }
  
  .card-lift.in-view {
    animation: cardLiftMobile 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  }
}

@keyframes cardLiftMobile {
  0% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ============================================
   5. TECH PATTERN (Технический паттерн фона)
   ============================================ */

.tech-pattern {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M30 0l25.98 15v30L30 60 4.02 45V15z' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Ccircle cx='30' cy='30' r='3'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60px 60px;
  z-index: 0;
}

.tech-pattern.animated {
  animation: patternFloat 20s linear infinite;
}

@keyframes patternFloat {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 60px;
  }
}

/* Alternative pattern: grid */
.tech-pattern.grid {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='0.5'%3E%3Cpath d='M0 20h40M20 0v40'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23ffffff'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 40px 40px;
}

/* Alternative pattern: bolts */
.tech-pattern.bolts {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Cg fill='%23ffffff'%3E%3Ccircle cx='25' cy='25' r='8' fill='none' stroke='%23ffffff' stroke-width='1'/%3E%3Cpath d='M25 20v10M20 25h10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 50px 50px;
}

/* ============================================
   6. METAL SHINE (Металлический блеск)
   ============================================ */

.metal-shine {
  position: relative;
  overflow: hidden;
}

.metal-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  transition: left 0.6s ease;
}

.metal-shine:hover::after {
  left: 150%;
}

/* ============================================
   7. UTILITY CLASSES
   ============================================ */

.no-animation {
  animation: none !important;
  transition: none !important;
}

.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in-up.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays for multiple elements */
.stagger-1 { transition-delay: 0.1s; }
.stagger-2 { transition-delay: 0.2s; }
.stagger-3 { transition-delay: 0.3s; }
.stagger-4 { transition-delay: 0.4s; }
.stagger-5 { transition-delay: 0.5s; }

/* ============================================
   8. LOADING STATES
   ============================================ */

.shimmer {
  background: linear-gradient(
    90deg,
    var(--metal) 0%,
    rgba(255, 255, 255, 0.1) 50%,
    var(--metal) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s ease-in-out infinite;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
/* ============================================
   9. EXCAVATOR ANIMATION (Мини экскаватор в Industries)
   ============================================ */

.excavator-mini {
  position: absolute;
  bottom: 2rem;
  right: 2rem;
  width: 180px;
  height: 140px;
  opacity: 0.4;
  pointer-events: none;
  z-index: 1;
}

.excavator-mini .excavator-svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
}

/* Arm animation */
.excavator-mini .excavator-arm {
  transform-origin: 145px 211px;
  animation: excavatorArmMove 4s ease-in-out infinite;
}

/* Bucket animation */
.excavator-mini .excavator-bucket {
  transform-origin: 235px 212px;
  animation: excavatorBucketGrab 4s ease-in-out infinite;
}

/* Cable swing */
.excavator-mini .excavator-cable {
  transform-origin: top;
  animation: excavatorCableSwing 2s ease-in-out infinite;
}

@keyframes excavatorArmMove {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-8deg);
  }
  75% {
    transform: rotate(-5deg);
  }
}

@keyframes excavatorBucketGrab {
  0%, 100% {
    transform: rotate(0deg);
  }
  30% {
    transform: rotate(-15deg);
  }
  60% {
    transform: rotate(-12deg);
  }
}

@keyframes excavatorCableSwing {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(3deg);
  }
}

/* Fade in on scroll */
.excavator-mini.visible {
  animation: excavatorFadeIn 1s ease forwards;
}

@keyframes excavatorFadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 0.4;
    transform: translateY(0);
  }
}

/* Mobile - hide or make smaller */
@media (max-width: 768px) {
  .excavator-mini {
    width: 120px;
    height: 90px;
    bottom: 1rem;
    right: 1rem;
    opacity: 0.25;
  }
}

@media (max-width: 480px) {
  .excavator-mini {
    display: none;
  }
}

.equipment-category-card .icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--accent), #ff8833);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.equipment-category-card p {
  color: var(--metal);
  line-height: 1.6;
  margin-left: 48px;
}

.excavator-scene {
  position: relative;
  width: 100%;
  padding: 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
  border-radius: 16px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.excavator-svg {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

/* Excavator parts animation */
.excavator-arm {
  transform-origin: 35% 70%;
  animation: armMove 6s ease-in-out infinite;
}

.excavator-bucket {
  transform-origin: 85% 50%;
  animation: bucketGrab 6s ease-in-out infinite;
}

.attachment-group {
  transition: opacity 0.5s ease;
}

.attachment-group.hidden {
  opacity: 0;
  pointer-events: none;
}

@keyframes armMove {
  0%, 100% {
    transform: rotate(0deg);
  }
  33% {
    transform: rotate(-12deg);
  }
  66% {
    transform: rotate(8deg);
  }
}

@keyframes bucketGrab {
  0%, 100% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(-8deg);
  }
}

/* Excavator ground line */
.excavator-ground {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: drawGround 2s ease-out forwards;
}

@keyframes drawGround {
  to {
    stroke-dashoffset: 0;
  }
}

/* Fade in animation */
.equipment-action-section.visible .excavator-scene {
  animation: fadeInScale 1s ease-out;
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ============================================
   8. CORNER BOLTS
   Decorative metallic bolts in section corners
   ============================================ */

.corner-bolts {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 1;
}

.bolt {
  position: absolute;
  width: 18px;
  height: 18px;
  background: linear-gradient(135deg, #9ca3af 0%, #6b7280 50%, #4b5563 100%);
  border-radius: 50%;
  box-shadow: 
    inset 0 2px 4px rgba(255, 255, 255, 0.3),
    inset 0 -2px 4px rgba(0, 0, 0, 0.4),
    0 2px 6px rgba(0, 0, 0, 0.2);
}

.bolt::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 2px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.bolt::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(90deg);
  width: 10px;
  height: 2px;
  background: rgba(0, 0, 0, 0.3);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2);
}

.bolt-tl {
  top: 20px;
  left: 20px;
  animation: boltPulse 4s ease-in-out infinite;
}

.bolt-tr {
  top: 20px;
  right: 20px;
  animation: boltPulse 4s ease-in-out 1s infinite;
}

.bolt-bl {
  bottom: 20px;
  left: 20px;
  animation: boltPulse 4s ease-in-out 2s infinite;
}

.bolt-br {
  bottom: 20px;
  right: 20px;
  animation: boltPulse 4s ease-in-out 3s infinite;
}

@keyframes boltPulse {
  0%, 100% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.9;
  }
}

/* ============================================
   9. FLOATING TOOLS
   Subtle floating tool icons
   ============================================ */

.floating-tools {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.08;
}

.floating-tool {
  position: absolute;
  width: 60px;
  height: 60px;
  color: var(--metal);
}

.floating-tool svg {
  width: 100%;
  height: 100%;
}

.floating-tool-1 {
  top: 15%;
  left: 5%;
  animation: floatTool 8s ease-in-out infinite;
}

.floating-tool-2 {
  top: 60%;
  right: 8%;
  animation: floatTool 10s ease-in-out 2s infinite;
}

.floating-tool-3 {
  bottom: 20%;
  left: 10%;
  animation: floatTool 12s ease-in-out 4s infinite;
}

@keyframes floatTool {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-15px) rotate(5deg);
  }
  75% {
    transform: translateY(15px) rotate(-5deg);
  }
}

/* ============================================
   10. ANIMATED STAT COUNTERS
   Count-up animation for statistics
   ============================================ */

.stat-number {
  font-size: 3rem;
  font-weight: 700;
  color: white;
  font-variant-numeric: tabular-nums;
  transition: color 0.3s ease;
}

.stat-number.counting {
  animation: statGlow 0.6s ease-in-out;
}

@keyframes statGlow {
  0%, 100% {
    text-shadow: 0 0 0 transparent;
  }
  50% {
    text-shadow: 0 0 20px rgba(255, 102, 0, 0.4);
  }
}

/* ============================================
   11. PULSE INDICATORS
   Subtle pulsing effect on important elements
   ============================================ */

.pulse-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  border: 2px solid var(--accent);
  border-radius: inherit;
  opacity: 0;
  animation: pulseRing 2s ease-out infinite;
  pointer-events: none;
  z-index: -1;
}

@keyframes pulseRing {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.6;
  }
  100% {
    transform: translate(-50%, -50%) scale(1.3);
    opacity: 0;
  }
}

/* Hover state enhancement */
.btn-primary:hover .pulse-ring,
.cta-button:hover .pulse-ring {
  animation-duration: 1s;
}

/* ============================================
   12. WELDING SPARKS
   Subtle spark effects on section borders
   ============================================ */

.welding-sparks {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--metal) 20%, 
    var(--accent) 50%, 
    var(--metal) 80%, 
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
  z-index: 2;
  transition: opacity 0.6s ease;
}

.welding-sparks-top {
  top: 0;
}

.welding-sparks-bottom {
  bottom: 0;
}

.welding-active .welding-sparks {
  opacity: 0.3;
}

.weld-spark {
  position: absolute;
  top: 0;
  width: 3px;
  height: 3px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 
    0 0 6px var(--accent),
    0 0 12px rgba(255, 102, 0, 0.5);
  animation: weldSparkle 3s ease-in-out infinite;
  opacity: 0;
}

@keyframes weldSparkle {
  0%, 100% {
    opacity: 0;
    transform: translateY(0) scale(1);
  }
  10% {
    opacity: 1;
    transform: translateY(-3px) scale(1.2);
  }
  20% {
    opacity: 0.7;
    transform: translateY(-5px) scale(0.8);
  }
  30% {
    opacity: 0;
    transform: translateY(-8px) scale(0.5);
  }
}

/* ============================================
   13. QUALITY BADGES
   Premium quality indicators
   ============================================ */

.quality-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 32px;
  height: 32px;
  color: var(--accent);
  opacity: 0.9;
  filter: drop-shadow(0 2px 6px rgba(255, 102, 0, 0.3));
  animation: badgeFloat 3s ease-in-out infinite;
  z-index: 10;
}

.quality-badge svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 4px rgba(255, 102, 0, 0.4));
}

@keyframes badgeFloat {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-3px) rotate(5deg);
  }
  75% {
    transform: translateY(3px) rotate(-5deg);
  }
}

.product-card:hover .quality-badge,
.feature-card:hover .quality-badge {
  animation: badgeSpin 0.6s ease-in-out;
  opacity: 1;
}

@keyframes badgeSpin {
  0% {
    transform: rotate(0deg) scale(1);
  }
  50% {
    transform: rotate(180deg) scale(1.2);
  }
  100% {
    transform: rotate(360deg) scale(1);
  }
}

/* Responsive adjustments for new elements */
@media (max-width: 768px) {
  .bolt {
    width: 14px;
    height: 14px;
  }
  
  .bolt-tl, .bolt-tr {
    top: 15px;
  }
  
  .bolt-tl, .bolt-bl {
    left: 15px;
  }
  
  .bolt-tr, .bolt-br {
    right: 15px;
  }
  
  .bolt-bl, .bolt-br {
    bottom: 15px;
  }
  
  .floating-tool {
    width: 40px;
    height: 40px;
  }
  
  .stat-number {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .floating-tools {
    display: none;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .equipment-action-content {
    grid-template-columns: 1fr;
  }
  
  .equipment-action-title h2 {
    font-size: 1.8rem;
  }
  
  .excavator-scene {
    order: -1;
  }
}