/* Agriconexión — landing page styles.
   Layout and colour live inline on each element (as authored in the design source).
   This file holds the base rules, keyframes, hover states and the motion budget. */

:root {
  /* Flipped by the theme toggle so hover states stay legible in light mode. */
  --hover-text: #fff;
  --accent: #1bd400;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: Inter, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

p {
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  color: var(--hover-text);
}

::selection {
  background: #1bd400;
  color: #000;
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

img {
  max-width: 100%;
}

/* Hover states. `!important` is required because the theme mapper writes the
   resting colour as an inline style, which would otherwise always win. */
[data-navlink]:hover,
[data-footer-link]:hover,
[data-contact-link]:hover {
  color: var(--hover-text) !important;
}

[data-ghost-cta]:hover {
  border-color: var(--accent) !important;
}

[data-theme-toggle]:hover {
  border-color: var(--accent) !important;
}

/* Keyframes */
@keyframes introRail {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes introRailOut {
  to { opacity: 0; transform: scaleY(1.5); }
}
@keyframes introMark {
  from { clip-path: inset(100% 0 0 0); opacity: .25; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes introFlash {
  0% { opacity: 0; }
  30% { opacity: .8; }
  100% { opacity: 0; }
}
@keyframes introTravel {
  to { transform: translate(calc(-50vw + 92px), calc(-50vh + 46px)) scale(.16); }
}
@keyframes introFade {
  to { opacity: 0; visibility: hidden; }
}
@keyframes fadeIn {
  to { opacity: 1; }
}
@keyframes lineUp {
  from { clip-path: inset(108% 0 -10% 0); transform: translateY(.35em); }
  to { clip-path: inset(-30% 0 -10% 0); transform: translateY(0); }
}
@keyframes sweep {
  0% { background-position: -160% 0; }
  100% { background-position: 260% 0; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@keyframes wordFocus {
  from { opacity: 0; filter: blur(12px); transform: translateY(10px); }
  to { opacity: 1; filter: blur(0); transform: none; }
}
@keyframes underlineIn {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes cardRise {
  from { opacity: 0; transform: translateY(40px) rotateX(8deg); }
  to { opacity: 1; transform: none; }
}
@keyframes popIn {
  0% { transform: scale(0); }
  60% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
@keyframes ringOut {
  0% { transform: scale(.4); opacity: .9; }
  100% { transform: scale(3.4); opacity: 0; }
}
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: .45; }
  50% { transform: scale(1.08); opacity: .7; }
}
@keyframes shimmer {
  0% { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(260%) skewX(-18deg); }
}
@keyframes drift {
  to { background-position: 72px 72px; }
}
@keyframes caret {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}
@keyframes halo {
  0% { transform: scale(.92); opacity: .5; }
  75% { transform: scale(1.55); opacity: 0; }
  100% { opacity: 0; }
}
@keyframes spinSlow {
  to { transform: rotate(360deg); }
}
@keyframes fromLeft {
  from { opacity: 0; transform: translateX(-80px); }
  to { opacity: 1; transform: none; }
}
@keyframes fromRight {
  from { opacity: 0; transform: translateX(80px); }
  to { opacity: 1; transform: none; }
}
@keyframes fromBelow {
  from { opacity: 0; transform: translateY(80px); }
  to { opacity: 1; transform: none; }
}

/* Los reveals de esta seccion entran con translateX(±80px). Sin recorte, ese
   desplazamiento ensancha el documento 61px en movil: el navbar es fixed, se
   estira al ancho del documento y el CTA queda fuera de pantalla. Las demas
   secciones con reveals horizontales ya recortan. */
#nosotros {
  overflow: hidden;
}

/* Navbar en pantallas angostas.
   Logotipo completo + CTA necesitan 358px con Outfit cargada y 368px con la
   tipografia de respaldo, que es la que se ve mientras la fuente viaja por una
   conexion lenta. Por debajo de 400px el nombre se superpone al boton, asi que
   se oculta la palabra y queda el isotipo, que ya lleva alt="Agriconexion". */
@media (max-width: 399px) {
  [data-wordmark] {
    display: none;
  }
}

/* Motion budget.
   `data-noanim` is set on <html> before first paint (see the inline head script)
   whenever the viewport is narrow or the visitor asked for reduced motion. It
   drops the intro overlay and every looping animation, which are the expensive
   ones on a phone over a slow connection. One-shot scroll reveals stay. */
html[data-noanim] [data-intro-overlay] {
  display: none !important;
}

html[data-noanim] [data-loop] {
  animation: none !important;
}

html[data-noanim] [data-particles] {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}