/* Page-level styles for the Kimagri corporate site.
 *
 * The design system (assets/styles.css) is the source of truth for tokens and
 * component classes and ships unmodified. This file carries only what the
 * design files kept in their per-page <style> block, plus the two things a
 * design-tool prototype expresses as attributes rather than CSS:
 * the class-card hover and the reveal start state.
 */

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

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  text-wrap: pretty;
}

a { color: var(--color-accent-700); }
a:hover { color: var(--color-accent-900); }

@keyframes kRise { from { opacity: 0; transform: translateY(32px); } to { opacity: 1; transform: none; } }
@keyframes kFade { from { opacity: 0; } to { opacity: 1; } }

/* Products and Contact rise from 28px rather than the home page's 32px. */
@keyframes kRiseSm { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

/* Scroll reveal start state. site.js clears these on reveal; it also removes
   the whole rule set if JS never runs, so content can't be stuck invisible. */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s cubic-bezier(.16, .6, .2, 1), transform .8s cubic-bezier(.16, .6, .2, 1);
}
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* No-JS / script-error fallback: the reveal state is only armed once site.js
   has run, so the page is fully readable without it. */
html:not(.js) .reveal { opacity: 1; transform: none; transition: none; }

/* Product class cards on the home page — `style-hover` in the design file. */
.class-card:hover { background: color-mix(in srgb, var(--color-accent) 6%, transparent); }

/* Wide datasheet tables scroll inside their plate instead of forcing the page
   sideways. */
.table-scroll { overflow-x: auto; }

/* ── Responsive ───────────────────────────────────────────────────────────
 * The design files carry no media queries — they were drawn at desktop width,
 * and every layout value in them is an inline style. Nothing below changes the
 * design above 900px; these rules exist because the desktop layout genuinely
 * breaks on a phone, and most traffic to a site whose main CTA is "scan the QR
 * code" arrives on one.
 *
 * The `!important` is not decoration: the properties being overridden are
 * inline attributes carried over verbatim from the designs, and inline wins
 * over a stylesheet without it. Overriding here rather than editing the inline
 * value keeps the markup diffable against the design file.
 */

/* The nav overflows on narrow screens. Left to itself, flex shrinks the one
   item that *can* shrink — the logo, whose min-content width is 0 — so the
   brand silently vanishes while the text links (white-space: nowrap) keep
   their width. Pin every nav child and let the row scroll instead. */
.nav > a { flex-shrink: 0; }

@media (max-width: 900px) {
  .nav { gap: var(--space-3); overflow-x: auto; scrollbar-width: none; }
  .nav::-webkit-scrollbar { display: none; }

  /* The hero's 7fr/4fr and the corporate profile's 5fr/6fr both leave the
     image column too narrow to read. Stack them. */
  .hero-grid, .about-grid { grid-template-columns: minmax(0, 1fr) !important; }

  /* Stacked, the hero image is a full-width portrait plate below the fold —
     wide and short reads better there than 4:5. */
  .hero-grid figure img { aspect-ratio: 16 / 10 !important; }
}

@media (max-width: 560px) {
  /* The company data plate stacks to one column, so the cell dividers have to
     move from the right edge to the bottom. */
  .data-plate > div { border-right: 0 !important; border-bottom: 1px solid var(--color-divider); }
  .data-plate > div:last-child { border-bottom: 0; }
}