/* Light motion layer shared by all pages. Everything is optional polish: the pages work without it.
   Off for visitors who prefer reduced motion; hover effects only on devices with a mouse.
   Hooks added by assets/effects.js: .fx (waiting to appear), .fx-in (appeared), .fx-stagger (child order), .fx-scrolled (header). */
@media (prefers-reduced-motion: no-preference) {
  @keyframes fx-rise { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:none; } }
  @keyframes fx-dot { 0% { box-shadow:0 0 0 0 color-mix(in srgb, currentColor 55%, transparent); } 70%,100% { box-shadow:0 0 0 9px transparent; } }
  @keyframes fx-glow { 0%,100% { box-shadow:0 0 0 0 rgba(255,255,255,.32); } 60% { box-shadow:0 0 0 12px rgba(255,255,255,0); } }

  /* page load: hero text rises in, one after the other */
  .hero-content > *, .company-hero .page-shell > * { animation:fx-rise .7s cubic-bezier(.2,.7,.2,1) both; }
  .hero-content > :nth-child(2), .company-hero .page-shell > :nth-child(2) { animation-delay:.1s; }
  .hero-content > :nth-child(3), .company-hero .page-shell > :nth-child(3) { animation-delay:.2s; }
  .hero-content > :nth-child(4), .company-hero .page-shell > :nth-child(4) { animation-delay:.3s; }
  .hero-actions a:first-child { animation:fx-rise .7s .3s cubic-bezier(.2,.7,.2,1) both, fx-glow 3.6s 1.6s ease-out infinite; }

  /* scroll: blocks fade up when they come into view, their cards/rows follow one by one */
  .fx { opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
  .fx.fx-in { opacity:1; transform:none; }
  /* cards/rows inside a block slide up one after another. Only a transform (never opacity), so they stay visible even if this does not run;
     effects.js removes .fx-stagger again after the reveal so hover effects are not delayed. */
  .fx .fx-stagger { transform:translateY(16px); transition:transform .6s cubic-bezier(.2,.7,.2,1); transition-delay:calc(.1s + var(--i, 0) * 80ms); }
  .fx.fx-in .fx-stagger { transform:none; }

  /* "Our Markets": a small pulsing location dot in front of each region */
  .market-chip { display:inline-flex; align-items:center; gap:9px; }
  .market-chip::before { content:""; width:8px; height:8px; border-radius:50%; background:currentColor; flex:none; animation:fx-dot 2.4s ease-out infinite; }
  .market-chip:nth-child(2)::before { animation-delay:.8s; }
  .market-chip:nth-child(3)::before { animation-delay:1.6s; }

  /* header gets a soft shadow once the page is scrolled */
  .site-header { transition:box-shadow .3s ease; }
  .site-header.fx-scrolled { box-shadow:0 4px 18px rgba(6,43,79,.10); }

  /* small transitions everywhere */
  a, button, .form-input { transition-property:color, background-color, border-color, box-shadow, transform; transition-duration:.2s; transition-timing-function:ease; }
  .fx-arrow { display:inline-block; transition:transform .2s ease; }
}

@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  /* buttons lift a little, arrows nudge */
  a[class*="rounded-lg"]:hover { transform:translateY(-2px); box-shadow:0 8px 18px rgba(6,43,79,.18); }
  a:hover > .fx-arrow { transform:translateX(4px); }

  /* menu: underline slides in */
  .desktop-nav a:not(.active)::after { content:""; position:absolute; left:0; right:0; bottom:-17px; height:3px; border-radius:3px; background:#008857; opacity:.55; transform:scaleX(0); transform-origin:left; transition:transform .25s ease; }
  .desktop-nav a:not(.active):hover::after { transform:scaleX(1); }

  /* cards lift */
  .support-card, .step-card, .energy-service, #activities > * { transition:transform .25s ease, box-shadow .25s ease; }
  .support-card:hover, .step-card:hover, .energy-service:hover, #activities > *:hover { transform:translateY(-4px); box-shadow:0 12px 26px rgba(6,43,79,.10); }
  #activities > * .service-photo { transition:transform .5s ease; }
  #activities > *:hover .service-photo { transform:scale(1.03); }

  /* service rows (International Trade): tint, icon turns a little, title warms up */
  .svc-row { transition:background-color .25s ease; }
  .svc-row:hover { background-color:rgba(184,98,12,.05); }
  .svc-row .support-icon, .support-card .support-icon, .energy-service .service-icon { transition:transform .3s ease, background-color .3s ease; }
  .svc-row:hover .support-icon, .support-card:hover .support-icon, .energy-service:hover .service-icon { transform:scale(1.1) rotate(-5deg); background-color:#ffe8cc; }
  .svc-row .svc-title { transition:color .2s ease; }
  .svc-row:hover .svc-title { color:#b8620c; }

  /* partners rows, region chips */
  .partner-row { transition:background-color .25s ease; }
  .partner-row:hover { background-color:rgba(0,136,87,.045); }
  .market-chip:hover { transform:translateY(-2px); box-shadow:0 6px 14px rgba(6,43,79,.10); }

  /* footer links */
  footer li a { display:inline-block; }
  footer li a:hover { color:#fff; transform:translateX(3px); }
}

/* form fields: clear focus ring (also for keyboard users) */
.form-input:focus { border-color:#008857; box-shadow:0 0 0 3px rgba(0,136,87,.15); outline:none; }