/* Grupo JOMI — motion layer. Tasteful, trust-forward. Honors reduced-motion. */

/* ---------- Scroll reveal (only when motion allowed AND js active) ---------- */
@media (prefers-reduced-motion: no-preference) {
  html.anim :is(
    .section__head, .div-grid > *, .brands__cell, .stats-bar__inner > *,
    .unit__media, .unit__body, .band__copy > *, .band__points li,
    .timeline__item, .values-grid > *, .mv-grid > *, .endorse__inner > *,
    .contact__info, .contact__form, .brands__head, .hero__copy > *, .hero__art
  ) {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .72s var(--ease-out), transform .72s var(--ease-out);
    will-change: opacity, transform;
  }
  /* hero art comes in from the side for a bit of life */
  html.anim .hero__art { transform: translateY(30px) scale(.97); }
  html.anim .is-in { opacity: 1 !important; transform: none !important; }

  /* Failsafe: if anim.js never runs (no .anim-ok), force-reveal so content is never stuck hidden */
  html.anim:not(.anim-ok) :is(
    .section__head, .div-grid > *, .brands__cell, .stats-bar__inner > *,
    .unit__media, .unit__body, .band__copy > *, .band__points li,
    .timeline__item, .values-grid > *, .mv-grid > *, .endorse__inner > *,
    .contact__info, .contact__form, .brands__head, .hero__copy > *, .hero__art
  ) { animation: jomi-failsafe 0s linear 2.5s forwards; }
}
@keyframes jomi-failsafe { to { opacity: 1; transform: none; } }
}

/* ---------- Hero aurora: slow, low-opacity drifting glow over the navy ---------- */
.hero { position: relative; }
.hero__inner { position: relative; z-index: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero::after {
    content: "";
    position: absolute; inset: -30% -10% -30% -10%;
    z-index: 0; pointer-events: none;
    background:
      radial-gradient(38% 50% at 18% 28%, rgba(59,114,209,.45), transparent 70%),
      radial-gradient(34% 46% at 82% 16%, rgba(120,160,235,.30), transparent 72%),
      radial-gradient(40% 52% at 65% 88%, rgba(225,43,39,.16), transparent 70%);
    filter: blur(8px);
    animation: jomi-aurora 22s var(--ease-standard) infinite alternate;
  }
}
@keyframes jomi-aurora {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1);   opacity: .9; }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.06);  opacity: 1; }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.02); opacity: .85; }
}

/* ---------- Hero title chromatic glitch — plays ONCE on load, then rests clean ---------- */
@media (prefers-reduced-motion: no-preference) {
  .hero__title.glitch-once { animation: jomi-glitch .85s steps(2, end) 1 both; }
}
@keyframes jomi-glitch {
  0%   { text-shadow: 0 0 0 transparent; clip-path: none; }
  12%  { text-shadow: -2px 0 rgba(225,43,39,.7), 2px 0 rgba(59,114,209,.7); transform: translateX(-1px); }
  24%  { text-shadow: 2px 0 rgba(225,43,39,.6), -2px 0 rgba(59,114,209,.6); transform: translateX(1px); }
  36%  { text-shadow: -1px 0 rgba(225,43,39,.5), 1px 0 rgba(59,114,209,.5); transform: translateX(0); }
  48%  { text-shadow: 1px 0 rgba(120,160,235,.5), -1px 0 rgba(225,43,39,.4); }
  100% { text-shadow: 0 0 0 transparent; transform: none; }
}

/* ---------- Header: subtle elevation once scrolled ---------- */
.site-header { transition: box-shadow var(--dur-normal) var(--ease-standard), background var(--dur-normal); }
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(14,42,82,.07); background: rgba(255,255,255,.94); }

/* ---------- Brand wall: gentle desaturation, full color + lift on hover ---------- */
@media (prefers-reduced-motion: no-preference) {
  .brands__cell img { filter: saturate(.82); transition: filter var(--dur-normal) var(--ease-standard), transform var(--dur-normal) var(--ease-standard); }
  .brands__cell:hover img { filter: saturate(1); transform: scale(1.05); }
}

/* ---------- Count-up tabular alignment so digits don't jitter ---------- */
.jomi-stat__value { font-variant-numeric: tabular-nums; }

/* ---------- Buttons: a touch more polish on hover ---------- */
@media (prefers-reduced-motion: no-preference) {
  .jomi-btn { transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), transform var(--dur-fast) var(--ease-standard), box-shadow var(--dur-normal) var(--ease-standard); }
  .jomi-btn--primary:hover, .jomi-btn--accent:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
}

/* ---------- DivisionCard arrow nudge already handled; add icon pop on reveal ---------- */
@media (prefers-reduced-motion: no-preference) {
  .jomi-div__icon { transition: transform var(--dur-normal) var(--ease-out); }
  .jomi-div:hover .jomi-div__icon { transform: translateY(-2px) scale(1.06); }
}

/* =====================================================================
   Universal interactive feedback — every link/button gets hover lift +
   icon nudge + a tactile press, so the whole site feels alive & modern.
   ===================================================================== */

/* Press feedback for anything clickable (buttons already have their own :active) */
.contact-card__methods a,
.unit__link,
.site-nav__link,
.site-footer__col a,
.brand,
.band__points li,
.jomi-tabs__tab,
.contact-card,
.div-grid .jomi-div,
.brands__cell {
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-normal) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}

/* Contact methods (email / whatsapp / phone / map) — pill hover + icon slide */
.contact-card__methods a {
  border-radius: var(--radius-sm);
  margin: -6px -8px;
  padding: 6px 8px;
}
.contact-card__methods a:hover { background: var(--blue-50); transform: translateX(2px); }
.contact-card__methods a:active { transform: translateX(2px) scale(.97); }
.contact-card__methods a svg { transition: transform var(--dur-normal) var(--ease-out); }
.contact-card__methods a:hover svg { transform: scale(1.12); }

/* Unit link (laboratoriosym.com / facebook) */
.unit__link:hover { transform: translateX(3px); }
.unit__link:active { transform: translateX(3px) scale(.97); }

/* Contact cards + division cards + brand cells: lift on hover, settle on press */
.contact-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.contact-card:active { transform: translateY(-1px); }
.div-grid .jomi-div:active { transform: translateY(0) scale(.985); }
.brands__cell:active { transform: scale(.96); }

/* Nav links: tactile press */
.site-nav__link:active { transform: scale(.96); }
.site-footer__col a:hover { color: #fff; transform: translateX(2px); }
.site-footer__col a:active { transform: translateX(2px) scale(.97); }

/* Brand lockup (logo top-left / footer) subtle pop */
.brand:hover { transform: translateY(-1px); }
.brand:active { transform: translateY(0) scale(.97); }

/* Tabs: lift + press */
.jomi-tabs__tab:hover { transform: translateY(-1px); }
.jomi-tabs__tab:active { transform: translateY(0) scale(.96); }

/* Band point rows (logistics / GMP / etc list on home) */
.band__points li:hover { transform: translateY(-2px); background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.22); }

/* Global focus ring for keyboard users, consistent with the rest */
a:focus-visible, .jomi-tabs__tab:focus-visible, .contact-card__methods a:focus-visible {
  outline: none; box-shadow: var(--ring); border-radius: var(--radius-sm);
}