/* One label style for the homepage sections, including refreshed catalog markup. */
body:has(#grokit-how-it-works) :is(
  main > .wrap.scroll-mt-24 > .grid > .eyebrow,
  #grokit-latest .catalog-eyebrow,
  main > section.wrap.py-12 > .reveal > div > .mono.uppercase
) {
  display: flex;
  align-items: center;
  gap: 10px;
  align-self: start;
  padding-top: 5px;
  font-family: var(--font-mono), ui-monospace, monospace;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.025em;
  text-transform: uppercase;
  color: inherit;
}

#grokit-how-it-works .grokit-step-icon,
#grokit-why .grokit-feature-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  align-items: center;
  justify-content: center;
  color: var(--fg);
  vertical-align: top;
}

#grokit-how-it-works .grokit-step-icon svg,
#grokit-why .grokit-feature-icon svg,
body:has(#grokit-how-it-works) .grokit-section-icon svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

body:has(#grokit-how-it-works) .grokit-section-icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  align-items: center;
  justify-content: center;
  color: inherit;
}

#grokit-why .grokit-feature-title {
  display: flex;
  align-items: center;
  gap: 12px;
}

#grokit-how-it-works .grokit-step-title {
  margin-top: 24px;
}

@media (max-width: 639px) {
  body:has(#grokit-how-it-works) :is(
    main > .wrap.scroll-mt-24 > .grid > .eyebrow,
    #grokit-latest .catalog-eyebrow,
    main > section.wrap.py-12 > .reveal > div > .mono.uppercase
  ) {
    padding-top: 0;
    font-size: 20px;
  }
  #grokit-how-it-works .grokit-step-title {
    margin-top: 20px;
  }
}

/* Entrance runs once per viewport visit. Hover lives on the wrapper, so it
   composes with both the SVG entrance and the page's cursor parallax. */
[data-grokit-icon="robot"] { --icon-enter: grokit-icon-robot; --icon-hover: translateY(-3px) rotate(-8deg); }
[data-grokit-icon="chat"] { --icon-enter: grokit-icon-chat; --icon-hover: translateY(-2px) rotate(-10deg); }
[data-grokit-icon="rocket"] { --icon-enter: grokit-icon-rocket; --icon-hover: translate(4px, -6px) rotate(5deg); }
[data-grokit-icon="coin"], [data-grokit-icon="coin-zero"] { --icon-enter: grokit-icon-coin; --icon-hover: perspective(120px) rotateY(40deg) translateY(-2px); }
[data-grokit-icon="shield"] { --icon-enter: grokit-icon-shield; --icon-hover: scale(1.12); }
[data-grokit-icon="routes"] { --icon-enter: grokit-icon-routes; --icon-hover: translateX(2px) rotate(9deg); }
[data-grokit-icon="candles"] { --icon-enter: grokit-icon-candles; --icon-hover: scaleY(1.15); }

@media (prefers-reduced-motion: no-preference) {
  [data-grokit-icon] > svg { transform-box: view-box; transform-origin: 50% 50%; }
  [data-grokit-icon][data-icon-entered="true"][data-icon-seen="false"] > svg {
    animation: var(--icon-enter) 650ms cubic-bezier(.2, 0, 0, 1) var(--icon-delay, 0ms) 1 both;
    animation-play-state: paused;
  }
  [data-grokit-icon][data-icon-entered="true"][data-icon-seen="false"][data-icon-active="true"] > svg {
    animation-play-state: running;
  }
  .grokit-step:nth-child(2) > [data-grokit-icon],
  #grokit-why dl > div:nth-child(2) [data-grokit-icon] { --icon-delay: 100ms; }
  .grokit-step:nth-child(3) > [data-grokit-icon],
  #grokit-why dl > div:nth-child(3) [data-grokit-icon] { --icon-delay: 200ms; }
  #grokit-why dl > div:nth-child(4) [data-grokit-icon] { --icon-delay: 300ms; }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-grokit-icon] { transition: transform 350ms cubic-bezier(.2, 0, 0, 1); }
  .grokit-section-label:hover > [data-grokit-icon],
  .grokit-step:hover > [data-grokit-icon],
  #grokit-why dl > div:hover [data-grokit-icon] { transform: var(--icon-hover); }
}

@keyframes grokit-icon-robot {
  0%, 100% { transform: translateY(0) rotate(0); }
  30% { transform: translateY(-5px) rotate(-10deg); }
  60% { transform: translateY(-8px) rotate(8deg) scale(1.08); }
  80% { transform: translateY(-2px) rotate(-4deg); }
}
@keyframes grokit-icon-chat {
  0%, 100% { transform: rotate(0); }
  30% { transform: translateX(-2px) rotate(-14deg); }
  65% { transform: translateX(2px) rotate(10deg); }
  85% { transform: rotate(-4deg); }
}
@keyframes grokit-icon-rocket {
  0%, 100% { transform: translate(0, 0) rotate(0) scale(1); }
  25% { transform: translate(-2px, 2px) rotate(-8deg) scale(.92); }
  60% { transform: translate(7px, -12px) rotate(6deg) scale(1.08); }
}
@keyframes grokit-icon-coin {
  0% { transform: perspective(120px) rotateY(0deg) translateY(0); }
  40% { transform: perspective(120px) rotateY(150deg) translateY(-4px); }
  75% { transform: perspective(120px) rotateY(300deg) translateY(-2px); }
  100% { transform: perspective(120px) rotateY(360deg) translateY(0); }
}
@keyframes grokit-icon-shield {
  0%, 100% { transform: scale(1) rotate(0); }
  35% { transform: scale(1.2) rotate(-5deg); }
  65% { transform: scale(.96) rotate(3deg); }
}
@keyframes grokit-icon-routes {
  0%, 100% { transform: translateX(0) rotate(0); }
  35% { transform: translateX(-3px) rotate(-12deg); }
  70% { transform: translateX(3px) rotate(9deg); }
}
@keyframes grokit-icon-candles {
  0%, 100% { transform: translateY(0) scaleY(1); }
  35% { transform: translateY(3px) scaleY(.68); }
  70% { transform: translateY(-2px) scaleY(1.12); }
}