/* ============================================================
   tentaplex.css — the company page, on top of tokens.css, page.css and
   family.css.
   A logo across the top, the two products as lit tiles, the copyright at
   the foot. Everything here is Tentaplex's alone.
   ============================================================ */

/* The ground, the field and its depth, the glass: family.css. */

main.company { position: relative; z-index: 1; }

/* ---- header and footer -------------------------------------------- */

/* The logo, centred across the top of the window. No bar and no rule: the
   page has nothing to scroll under it, so it just floats. */
.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 2;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body:has(.site-header) { padding-top: 112px; }

.site-header .logo {
  display: block;
  padding: 6px;
  border: 0;
  color: var(--text-default);
  opacity: 0.92;
  transition: opacity 160ms ease;
}

.site-header .logo:hover { color: var(--text-default); opacity: 1; }

.site-header .wordmark { display: block; width: 8.5rem; height: auto; }

/* The copyright, quiet at the foot of the window, the header's pair. */
.site-footer {
  position: fixed;
  inset: auto 0 0;
  z-index: 2;
  margin: 0;
  padding: 20px 24px;
  display: block;
  text-align: center;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: var(--text-faint);
}

body:has(.site-footer) { padding-bottom: 72px; }

/* ---- the two products --------------------------------------------- */

main.company { max-width: 54rem; width: 100%; }

.products {
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* Each tile carries its product's colour, the one in its icon's tentacle:
   the light behind the icon, the edge on hover, the address at the foot. */
.products li:nth-child(1) { --accent: 170 90 225; }
.products li:nth-child(2) { --accent: 120 190 80; }

/* The whole tile is the link. Its edge is a 1px gradient, lighter at the top
   where the light falls; two backgrounds, one clipped to the padding box and
   one showing through a transparent border. */
.products a {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 36px 30px;
  border: 1px solid transparent;
  border-radius: 24px;
  background:
    linear-gradient(to bottom, rgb(30 30 30 / 0.7), rgb(22 22 22 / 0.78)) padding-box,
    linear-gradient(to bottom, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.04)) border-box;
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.03) inset, 0 24px 48px -24px rgb(0 0 0 / 0.6);
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.55;
  text-wrap: pretty;
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), background 260ms ease,
    box-shadow 260ms ease;
}

/* The light behind the icon, in the product's colour. */
.products a::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 50%;
  top: -40px;
  width: 320px;
  height: 260px;
  translate: -50% 0;
  background: radial-gradient(closest-side, rgb(var(--accent) / 0.22), transparent);
  filter: blur(8px);
  transition: opacity 260ms ease, scale 260ms ease;
  opacity: 0.8;
}

/* A soft light that follows the pointer across the tile. tentaplex/index.html
   sets --mx and --my; without them it sits at the top. */
.products a::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%),
    rgb(255 255 255 / 0.06), transparent 70%);
  opacity: 0;
  transition: opacity 200ms ease;
}

.products a:hover,
.products a:focus-visible {
  color: var(--text-muted);
  transform: translateY(-4px);
  background:
    linear-gradient(to bottom, rgb(34 34 34 / 0.78), rgb(24 24 24 / 0.84)) padding-box,
    linear-gradient(to bottom, rgb(var(--accent) / 0.55), rgb(255 255 255 / 0.06)) border-box;
  box-shadow: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 32px 64px -28px rgb(var(--accent) / 0.35);
}

.products a:hover::before,
.products a:focus-visible::before { opacity: 1; scale: 1.15; }
.products a:hover::after { opacity: 1; }

.products img {
  width: 128px;
  height: 128px;
  margin-bottom: 26px;
  border-radius: 22.37%;
  box-shadow: 0 2px 4px rgb(0 0 0 / 0.3), 0 16px 36px -8px rgb(0 0 0 / 0.55);
  transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.products a:hover img { transform: scale(1.04) rotate(-2deg); }

.products strong {
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-default);
}

.products .what { margin-top: 10px; max-width: 22rem; }

/* The address, at the foot of the tile: it says where the tile goes, and
   the arrow moves when it is about to. */
.products .go {
  margin-top: auto;
  padding-top: 26px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  letter-spacing: 0.01em;
  color: var(--text-faint);
  transition: color 200ms ease;
}

.products .go::after {
  content: "→";
  transition: translate 200ms ease;
}

.products a:hover .go { color: rgb(var(--accent)); }
.products a:hover .go::after { translate: 3px 0; }

/* In, one after the other, the first time the page is shown (family.css). */
.products li { animation: rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.products li:nth-child(2) { animation-delay: 90ms; }
.site-header .logo { animation: rise 700ms cubic-bezier(0.2, 0.8, 0.2, 1) both; }

@media (prefers-reduced-motion: reduce) {
  .products li,
  .site-header .logo { animation: none; }
  .products a,
  .products img,
  .products .go::after { transition: none; }
  .products a:hover,
  .products a:focus-visible,
  .products a:hover img,
  .products a:hover .go::after { transform: none; translate: none; }
}

/* A phone has no room for two across, nor the height for two tall tiles:
   they stack, each a row with the icon beside the words, and the page may
   scroll so a short phone does not clip the foot of the column. */
@media (max-width: 640px) {
  .products { grid-template-columns: 1fr; gap: 12px; }
  .products a {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto 1fr;
    column-gap: 16px;
    align-items: start;
    padding: 18px;
    border-radius: 20px;
    text-align: left;
  }
  .products a::before { left: 50px; top: -60px; width: 200px; height: 200px; }
  .products img { grid-row: 1 / 4; width: 68px; height: 68px; margin: 0; }
  .products strong { font-size: 1.125rem; }
  .products .what { margin-top: 2px; }
  .products .go { grid-column: 2; padding-top: 10px; }
}