/* ============================================================
   AEPS Agri — visual effects layer (v3.1)
   Живые эффекты, движение, глубина.
   ============================================================ */

/* --------- Scroll progress bar --------- */
.progress-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--terra) 0%, var(--amber) 50%, var(--sage) 100%);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 100;
  transition: transform .05s linear;
  box-shadow: 0 0 12px rgba(207, 90, 44, 0.5);
}

/* --------- Cursor spotlight --------- */
.spotlight {
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 166, 72, 0.15) 0%, transparent 65%);
  pointer-events: none;
  z-index: 5;
  transform: translate(-50%, -50%);
  transition: transform .18s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  filter: blur(20px);
}

/* --------- Animated mesh gradient (hero background) --------- */
.mesh {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.mesh-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.65;
  will-change: transform;
}
.mesh-orb.o1 {
  top: -10%; left: -10%;
  width: 550px; height: 550px;
  background: radial-gradient(circle, #f0b667 0%, transparent 65%);
  animation: orbMove1 22s ease-in-out infinite;
}
.mesh-orb.o2 {
  top: 20%; right: -15%;
  width: 620px; height: 620px;
  background: radial-gradient(circle, #d97350 0%, transparent 65%);
  animation: orbMove2 26s ease-in-out infinite;
}
.mesh-orb.o3 {
  bottom: -10%; left: 25%;
  width: 480px; height: 480px;
  background: radial-gradient(circle, #a4b58c 0%, transparent 65%);
  animation: orbMove3 30s ease-in-out infinite;
}
@keyframes orbMove1 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(80px, 60px) scale(1.1); }
  66% { transform: translate(-40px, 90px) scale(0.9); }
}
@keyframes orbMove2 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-90px, 40px) scale(1.15); }
}
@keyframes orbMove3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(60px, -70px) scale(1.05); }
}

/* --------- Particle canvas (grain / sparkles) --------- */
.particles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

/* --------- Grain noise overlay (subtle SVG texture) --------- */
.noise {
  position: fixed;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
}

/* --------- Hero split-text --------- */
.split-word {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  line-height: 1.05;
}
.split-word > span {
  display: inline-block;
  transform: translateY(105%);
  animation: rise .9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  opacity: 0;
}
@keyframes rise {
  to { transform: translateY(0); opacity: 1; }
}

/* --------- Marquee band --------- */
.marquee {
  overflow: hidden;
  padding: 26px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
  position: relative;
}
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 120px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before {
  left: 0;
  background: linear-gradient(90deg, var(--white), transparent);
}
.marquee::after {
  right: 0;
  background: linear-gradient(-90deg, var(--white), transparent);
}
.marquee-track {
  display: flex;
  gap: 60px;
  width: max-content;
  animation: marq 40s linear infinite;
  align-items: center;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-item {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 500;
  font-size: 24px;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.marquee-item svg {
  width: 24px; height: 24px;
  color: var(--terra);
}
.marquee-item span.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: linear-gradient(135deg, var(--terra), var(--amber));
  margin: 0 8px;
  flex-shrink: 0;
}
@keyframes marq {
  from { transform: translateX(0); }
  to { transform: translateX(calc(-50% - 30px)); }
}

/* --------- Section curved dividers --------- */
.divider {
  position: relative;
  height: 80px;
  overflow: hidden;
  margin-top: -1px;
}
.divider svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* --------- 3D tilt cards --------- */
.tilt {
  transform-style: preserve-3d;
  transition: transform .18s ease;
  will-change: transform;
}
.tilt-inner {
  transform: translateZ(20px);
}

/* --------- Magnetic buttons --------- */
.btn.magnetic {
  will-change: transform;
  transition: transform .2s cubic-bezier(0.16, 1, 0.3, 1), background .2s, box-shadow .2s;
}

/* --------- Shine on primary button --------- */
.btn-primary {
  position: relative;
  overflow: hidden;
}
.btn-primary::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transform: skewX(-20deg);
  transition: left .7s ease;
}
.btn-primary:hover::after { left: 130%; }

/* --------- Number counter styling --------- */
.stat b {
  display: inline-flex;
  align-items: baseline;
  gap: 2px;
}
.stat b .num {
  font-variant-numeric: tabular-nums;
}

/* --------- Glow orbs on section corners --------- */
.section .glow {
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0;
  transition: opacity .8s ease;
  pointer-events: none;
  z-index: 0;
}
.section .glow.tl { top: -80px; left: -80px; background: radial-gradient(circle, rgba(233, 166, 72, 0.35), transparent 70%); }
.section .glow.br { bottom: -80px; right: -80px; background: radial-gradient(circle, rgba(207, 90, 44, 0.3), transparent 70%); }
.section.in-view .glow { opacity: 1; }

/* --------- Hero big number badges (animated ring) --------- */
.hero-badge {
  position: absolute;
  z-index: 2;
  padding: 14px 20px;
  background: var(--glass-bg);
  backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid var(--glass-border);
  border-radius: var(--r);
  display: flex;
  gap: 12px;
  align-items: center;
  box-shadow: var(--shadow-md);
  animation: floaty 6s ease-in-out infinite;
}
.hero-badge.b1 { top: 20%; left: 3%; }
.hero-badge.b2 { top: 60%; right: 3%; animation-delay: -3s; }
.hero-badge .dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: linear-gradient(135deg, var(--terra), var(--amber));
  box-shadow: 0 0 10px rgba(233, 166, 72, 0.6);
  animation: pulse 2s ease-in-out infinite;
}
.hero-badge b {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  color: var(--ink);
}
.hero-badge span {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-weight: 600;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* --------- Reveal on scroll: enhanced --------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: translateY(0); }
.reveal-lag-1 { transition-delay: .1s; }
.reveal-lag-2 { transition-delay: .2s; }
.reveal-lag-3 { transition-delay: .3s; }
.reveal-lag-4 { transition-delay: .4s; }

/* --------- Grain-illustration icons (custom) --------- */
.product-icon {
  position: relative;
}
.product-icon::before {
  content: "";
  position: absolute;
  inset: -4px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--terra), var(--amber));
  opacity: 0;
  transition: opacity .4s ease;
  z-index: -1;
  filter: blur(12px);
}
.product:hover .product-icon::before { opacity: 0.4; }

/* --------- Port cards: animated arc pointer --------- */
.port {
  position: relative;
  overflow: hidden;
}
.port::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--terra), var(--amber), var(--sage));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .5s cubic-bezier(0.16, 1, 0.3, 1);
}
.port:hover::after { transform: scaleX(1); }

/* --------- Why-items: gradient border on hover --------- */
.why-item {
  position: relative;
  z-index: 1;
}
.why-item::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--r);
  padding: 1px;
  background: linear-gradient(135deg, var(--terra) 0%, var(--amber) 50%, var(--sage) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  opacity: 0;
  transition: opacity .35s ease;
  z-index: -1;
}
.why-item:hover::before { opacity: 1; }
.why-item:hover { border-color: transparent; }

/* --------- Trusted destinations band --------- */
.destinations {
  padding: 70px 0;
  background: var(--cream);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.destinations-title {
  text-align: center;
  font-size: 12.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
  margin-bottom: 30px;
}
.destinations-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 44px;
  flex-wrap: wrap;
}
.dest {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--f-display);
  font-weight: 500;
  font-size: 20px;
  color: var(--ink);
  transition: color .2s ease;
}
.dest:hover { color: var(--terra); }
.dest .flag {
  width: 32px; height: 24px;
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line);
  display: inline-block;
  background: linear-gradient(180deg, #eee, #ccc);
  flex-shrink: 0;
}

/* --------- Timeline (process) --------- */
.timeline {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}
.timeline::before {
  content: "";
  position: absolute;
  top: 40px; bottom: 40px;
  left: 50%;
  width: 2px;
  background: linear-gradient(180deg, var(--terra) 0%, var(--amber) 50%, var(--sage) 100%);
  transform: translateX(-50%);
}
.tl-item {
  position: relative;
  padding: 30px 0;
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  gap: 20px;
  align-items: center;
}
.tl-node {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: var(--white);
  border: 2px solid var(--terra);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  font-weight: 700;
  color: var(--terra);
  font-size: 22px;
  box-shadow: 0 0 0 6px rgba(207, 90, 44, 0.1);
  position: relative;
  z-index: 1;
}
.tl-body {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.tl-body h4 {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 20px;
  margin: 0 0 8px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.tl-body p {
  font-size: 14.5px;
  color: var(--muted);
  margin: 0;
  line-height: 1.6;
}
.tl-item:nth-child(even) .tl-body { grid-column: 3; }
.tl-item:nth-child(odd)  .tl-body { grid-column: 1; }
.tl-item:nth-child(odd)  > :nth-child(3) { visibility: hidden; }
.tl-item:nth-child(even) > :nth-child(1) { visibility: hidden; }

/* --------- Ambient tweaks (make sure previous ambient stays subtle) --------- */
.ambient {
  opacity: 0.55;
}

/* --------- Print + reduced motion --------- */
@media (prefers-reduced-motion: reduce) {
  .mesh-orb, .hero-badge, .split-word > span, .marquee-track,
  .stat b .num, .reveal { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
  .split-word > span { transform: none; opacity: 1; }
}

/* --------- Responsive --------- */
@media (max-width: 960px) {
  .hero-badge { display: none; }
  .timeline::before { left: 30px; }
  .tl-item { grid-template-columns: 60px 1fr; }
  .tl-item:nth-child(even) .tl-body,
  .tl-item:nth-child(odd)  .tl-body { grid-column: 2; }
  .tl-item:nth-child(odd)  > :nth-child(3),
  .tl-item:nth-child(even) > :nth-child(1) { display: none; }
  .destinations-list { gap: 24px; }
  .dest { font-size: 16px; }
  .spotlight { display: none; }
}

@media (max-width: 640px) {
  .marquee-item { font-size: 18px; }
  .noise { display: none; }
}

/* ============================================================
   Accessibility layer (v3.3)
   Focus indicators + WCAG AA contrast fixes.
   ============================================================ */

*:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  border-radius: 4px;
}

.btn:focus-visible,
.nav-links a:focus-visible,
.lang-toggle:focus-visible,
.lang-menu button:focus-visible,
.news-filter button:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 3px;
  box-shadow: 0 0 0 4px rgba(207, 90, 44, 0.15);
}

.hero-card:focus-visible,
.news-card:focus-visible,
.crop:focus-visible,
.oil-card:focus-visible,
.port:focus-visible {
  outline: 2px solid var(--terra);
  outline-offset: 4px;
}

/* Deeper --dim for WCAG AA (was #94836f = 4.1:1, need 4.5:1 on #faf6ee) */
:root {
  --dim: #706050;
}

/* Skip to content — hidden until focused, for keyboard users */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  padding: 12px 20px;
  background: var(--terra);
  color: var(--white);
  font-weight: 700;
  border-radius: 0 0 var(--r) 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .marquee-track,
  .mesh-orb,
  .hero-badge,
  .stat b .num,
  .price-change svg,
  .reveal,
  .btn-primary::after {
    animation: none !important;
    transition: none !important;
  }
  .reveal { opacity: 1; transform: none; }
}