/* HubsTime hero — flat ink panel, one headline, one gesture. */
/* NOTE (2026-09-05): the four `[data-variant]` type rules below are scoped with
   `:not(.ht-hero__head--ssr)` so they apply to the head THIS FILE builds, and
   not to the server-rendered fallback in `hero-headline.tsx`. The server cannot
   know the viewport, so it always writes `data-variant="B"`; the fallback takes
   its scale from a media query instead, and without this exclusion these rules
   would outrank it (three classes to two) and render B's size where the client
   is about to build A's. Edited under the kit-divergence ruling — founder,
   Trello #158 comment `6a9a083a5b2e4e08326a7548`. */
/* THE ONE DEVIATION FROM THE HANDOFF COPY. The kit's next line is
   @import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:...
   &family=IBM+Plex+Sans+Arabic:...&display=swap');
   It is removed deliberately: `src/app/layout.tsx` already self-hosts BOTH
   families through next/font, and says so in as many words — "next/font
   rather than the kit's fonts.googleapis.com <link>". Linking this file
   unchanged put that request back, making the repo's own comment false on the
   tree it ships on, adding a render-blocking third-party round trip to the
   landing page and downloading eight weights nothing renders. Everything else
   in this file was byte-identical to design_handoff_hero/hero.css until the
   kit-divergence ruling (founder, Trello #158 comment
   `6a9a083a5b2e4e08326a7548`, «لا يهمني ملف العدة الصراحة… و من الطبيعي ان
   يفترقا»), under which four `[data-variant]` type rules below are scoped with
   `:not(.ht-hero__head--ssr)`. They were outranking the server-rendered
   fallback's media-query scale three classes to two, and rendering variant B's
   30px where the client was about to build variant A's 38px. */

.ht-hero {
  --ht-ink: #101828;
  --ht-accent: #60a5fa;
  box-sizing: border-box;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 452px;
  padding: 0 74px;
  background: var(--ht-ink);
  color: #fff;
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
}
.ht-hero[data-lang="ar"] { font-family: 'IBM Plex Sans Arabic', ui-sans-serif, sans-serif; }

@media (max-width: 720px) { .ht-hero { padding: 0 24px; min-height: 380px; } }

/* --- lockup --- */
.ht-hero__lockup { display: flex; align-items: center; gap: 11px; }
.ht-hero__wordmark {
  font-family: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  font-size: 20px; font-weight: 600; letter-spacing: -0.035em; line-height: 1; color: #fff;
}
.ht-hero__wordmark span { font-weight: 400; color: rgba(255,255,255,.6); }

/* --- headline --- */
.ht-hero__head { margin-top: 38px; }
.ht-hero__line { white-space: nowrap; }

.ht-hero[data-variant="A"] .ht-hero__head:not(.ht-hero__head--ssr) { font-size: clamp(38px, 6.2vw, 78px); font-weight: 700; letter-spacing: -0.045em; line-height: .99; }
.ht-hero[data-variant="B"] .ht-hero__head:not(.ht-hero__head--ssr) { font-size: clamp(30px, 4.2vw, 52px); font-weight: 700; letter-spacing: -0.04em;  line-height: 1.05; }
.ht-hero[data-lang="ar"][data-variant="A"] .ht-hero__head:not(.ht-hero__head--ssr) { font-size: clamp(34px, 5.8vw, 72px); font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.ht-hero[data-lang="ar"][data-variant="B"] .ht-hero__head:not(.ht-hero__head--ssr) { font-size: clamp(28px, 4.4vw, 54px); font-weight: 600; letter-spacing: 0; line-height: 1.3; }

.ht-hero__mark { flex: none; vertical-align: baseline; }
.ht-hero__word { position: relative; display: inline-block; white-space: nowrap; }
.ht-hero__letter { display: inline-block; color: var(--ht-accent); }
.ht-hero__run { display: inline-block; -webkit-background-clip: text; background-clip: text; color: transparent; }
.ht-hero__dot { position: absolute; border-radius: 9999px; background: var(--ht-accent); }

/* --- motion: once, then still --- */
@keyframes ht-rise   { from { opacity: 0; transform: translateY(14px) } to { opacity: 1; transform: none } }
@keyframes ht-spread { from { transform: translateX(0) } to { transform: translateX(var(--sp)) } }
@keyframes ht-fly    { 0% { transform: translateX(0); opacity: 0 } 20% { opacity: 1 } 100% { transform: translateX(var(--d)); opacity: 1 } }

.ht-hero.is-animating .ht-hero__lockup { animation: ht-rise .7s cubic-bezier(.16,1,.3,1) 50ms both; }
.ht-hero.is-animating .ht-hero__line--1 { animation: ht-rise .8s cubic-bezier(.16,1,.3,1) 220ms both; }
.ht-hero.is-animating .ht-hero__line--2 { animation: ht-rise .8s cubic-bezier(.16,1,.3,1) 380ms both; }
.ht-hero.is-animating .ht-hero__letter { animation: ht-spread .85s cubic-bezier(.16,1,.3,1) var(--delay) both; }
.ht-hero.is-animating .ht-hero__dot--fly { animation: ht-fly .9s cubic-bezier(.16,1,.3,1) var(--delay) both; }

/* resting state — also what a second visit and reduced motion get */
.ht-hero:not(.is-animating) .ht-hero__letter { transform: translateX(var(--sp)); }
.ht-hero:not(.is-animating) .ht-hero__dot--fly { transform: translateX(var(--d)); }

@media (prefers-reduced-motion: reduce) {
  .ht-hero.is-animating * { animation: none !important; opacity: 1 !important; }
  .ht-hero.is-animating .ht-hero__letter { transform: translateX(var(--sp)) !important; opacity: var(--fo) !important; }
  .ht-hero.is-animating .ht-hero__dot--fly { transform: translateX(var(--d)) !important; }
}