/* ==================================================================
   03 — "It’s not about saving time."  (prefix .tb-, scoped to #timeback)
   A flat Mac keyboard, clipped on the right and faded with a radial
   mask; four keys are swapped for wide "feature keys".
   Key rendering is shared (by duplication) with css/11-cta.css.
================================================================== */
#timeback {
  --tb-key: 110px;
  --tb-gap: 12px;
  position: relative;
  overflow: hidden;
}

#timeback .tb-grid {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  gap: 85px;
  width: var(--container);
  max-width: 100%;
  height: 720px;
  margin: 0 auto;
}

/* ---------- left column ---------- */
#timeback .tb-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: var(--s-6);
  max-width: 320px;
  padding: var(--s-3);
  position: relative;
  z-index: 1;
}
#timeback .tb-text .section-title h2,
#timeback .tb-text .section-title p { font-size: 20px; font-weight: 500; line-height: normal; }

/* ---------- keyboard viewport ---------- */
#timeback .tb-kb-wrap {
  position: relative;
  height: 100%;
  min-width: 0;
  padding-left: var(--s-3);
  overflow: hidden;
  -webkit-mask-image: radial-gradient(95% 70% at 17% 47.8%, #000 16.8%, transparent 83.8%);
  mask-image: radial-gradient(95% 70% at 17% 47.8%, #000 16.8%, transparent 83.8%);
}
#timeback .tb-kb {
  display: flex;
  flex-direction: column;
  gap: var(--tb-gap);
  width: max-content;
  /* second, vertical fade so the top and bottom rows melt away */
  -webkit-mask-image: linear-gradient(transparent, #000 50%, transparent);
  mask-image: linear-gradient(transparent, #000 50%, transparent);
}
#timeback .tb-row {
  display: flex;
  flex-wrap: nowrap;
  gap: var(--tb-gap);
  height: var(--tb-key);
}

/* ---------- one key ----------
   .tb-key  = slot (layout, reveal opacity / rise)
   .tb-cap  = the physical keycap (press transform, lighting)          */
#timeback .tb-key {
  --d: 0s;
  position: relative;
  flex: none;
  width: var(--tb-key);
  height: 100%;
  opacity: 0;
  transform: translate3d(0, 16px, 0);
  transition:
    opacity 0.8s var(--d) cubic-bezier(0.23, 1, 0.32, 1),
    transform 1s var(--d) cubic-bezier(0.23, 1, 0.32, 1);
}
#timeback.is-in .tb-key { opacity: 0.2; transform: none; }
#timeback.is-in .tb-key.is-lit {
  opacity: 1;
  transition:
    opacity 1.2s cubic-bezier(0.23, 1, 0.32, 1),
    transform 1s cubic-bezier(0.23, 1, 0.32, 1);
}

#timeback .tb-cap {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: 1fr 1fr;
  padding: 14.5px 15px;
  border-radius: 11px;
  color: #f4f4f6;
  font-family: var(--font);
  font-size: 23.75px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  text-shadow: 0 0.5px 0.5px rgba(0, 0, 0, 0.1);
  user-select: none;
  -webkit-user-select: none;
  background: radial-gradient(75% 75% at 50% 92%, #121212 0%, #0d0d0d 100%);
  box-shadow:
    0 1.5px 0.5px 2.5px rgba(0, 0, 0, 0.4),
    0 0 0.5px 1px #000,
    inset 0 2px 1px 1px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px 1px rgba(255, 255, 255, 0.2);
  transition:
    transform 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.2s cubic-bezier(0.23, 1, 0.32, 1),
    background 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    color 0.2s;
}
/* sheen that brightens a pressed / lit key */
#timeback .tb-cap::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(80% 60% at 30% 0%, rgba(255, 255, 255, 0.05), transparent 70%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

#timeback .tb-key:hover .tb-cap,
#timeback .tb-key.is-pressed .tb-cap {
  transform: translate3d(0, 2px, 0);
  background: radial-gradient(75% 75% at 50% 92%, #151515 0%, #0d0d0d 100%);
  box-shadow:
    0 0 0 transparent,
    0 0 0.5px 1px #000,
    inset 0 2px 1px 1px rgba(0, 0, 0, 0.25),
    inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
#timeback .tb-key:hover .tb-cap { transform: translate3d(0, 1px, 0); }
#timeback .tb-key.is-pressed .tb-cap::after { opacity: 1; }

/* ---------- legends ---------- */
#timeback .tb-alt { grid-row: 1; display: flex; align-items: flex-start; }
#timeback .tb-pri { grid-row: 2; display: flex; align-items: flex-end; }
#timeback .tb-c { justify-content: center; }
#timeback .tb-r { justify-content: flex-end; }
#timeback .tb-st { grid-row: 1 / span 2; justify-content: center; align-items: center; }
#timeback .tb-cap svg {
  display: block;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
#timeback .tb-alt > svg { color: #d3d3d6; }
#timeback .tb-fk > svg { margin-top: 15.5px; }

/* ---------- feature keys ---------- */
#timeback .tb-feat .tb-alt > svg { width: 27px; height: 27px; margin: -2px 0 0 -2px; color: #a4a4a7; stroke-width: 1.6; }
#timeback .tb-feat .tb-pri {
  font-size: 16px;
  font-weight: 500;
  line-height: 19px;
  letter-spacing: 0.1px;
}
#timeback .tb-feat .tb-pri span { color: var(--grey-200); }
#timeback .tb-feat .tb-pri strong { color: #fff; font-weight: 600; }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  #timeback .tb-key,
  #timeback .tb-cap { transition: none; }
  #timeback .tb-key { opacity: 0.2; transform: none; }
  #timeback .tb-key.is-lit { opacity: 1; }
}

/* ---------- tablet / mobile ---------- */
@media (max-width: 1100px) {
  #timeback .tb-grid { grid-template-columns: 360px minmax(0, 1fr); gap: 32px; }
}
@media (max-width: 719px) {
  #timeback .tb-grid {
    display: flex;
    flex-direction: column-reverse;
    height: auto;
    gap: 0;
  }
  #timeback .tb-kb-wrap {
    height: 460px;
    padding-left: 0;
    -webkit-mask-image: radial-gradient(90% 60% at 30% 50%, #000 20%, transparent 85%);
    mask-image: radial-gradient(90% 60% at 30% 50%, #000 20%, transparent 85%);
  }
  #timeback .tb-kb { transform: scale(0.62); transform-origin: 0 0; margin-left: 8px; }
  #timeback .tb-text {
    margin: -80px auto 0;
    align-items: center;
    text-align: center;
    background: linear-gradient(to bottom, transparent, var(--bg) 50%);
  }
  #timeback .tb-download { display: none; }
}
#timeback .tb-cap svg .f { fill: currentColor; stroke: none; }