/* Header + hero — ported from the Konvert Figma exports (afc941ba…html and
   6b1a014c…html). Namespaced `hh-` / `hx-`; assets in /reframe/hero-v3/. */

/* ─── Sticky header ───
   The export embedded a 1.3MB Satoshi Variable font for two words; this uses
   Poppins, which the page already loads, at the same weight and size. */
.hh-header {
  direction: ltr;
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  padding: 0 40px;
  background: #000;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  transition:
    background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Over the light sections the bar flips to white — see useHeaderTheme in
   index.tsx, which adds .is-light once the dark hero has scrolled past. */
.hh-header.is-light {
  background: #fff;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.07);
}

.hh-logo {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
  /* Sized to the wider/taller of the two marks so the swap shifts nothing. */
  width: 136px;
  height: 36px;
}

/* Height-driven, width auto: the two wordmarks are different aspect ratios
   (224x60 and 800x158), so a shared fixed width squashed the light one.
   `max-width: none` matters — site.css caps every img at 100% of its
   containing block, which for the absolutely positioned light mark is the
   112px-wide dark one, and that squashed it back. */
.hh-logo img {
  display: block;
  width: auto;
  max-width: none;
  transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Set per mark: the light wordmark is drawn tighter to its cap height, so at a
   shared size it read noticeably bigger than the dark one. */
.hh-logo-dark {
  height: 36px;
}

.hh-logo-light {
  height: 24px;
}

/* Stacked, so the swap is an opacity cross-fade with no layout shift. */
.hh-logo-light {
  position: absolute;
  left: 0;
  /* Centred against the taller dark mark rather than pinned to its top. */
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
}

.hh-header.is-light .hh-logo-dark {
  opacity: 0;
}

.hh-header.is-light .hh-logo-light {
  opacity: 1;
}

/* The CTA is white-on-black in the dark bar; on white it would disappear, so
   it inverts. */
.hh-header.is-light .hh-cta {
  background: #18181b;
  color: #fff;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 2px 6px rgba(24, 24, 27, 0.18),
    0 8px 20px rgba(24, 24, 27, 0.12);
}

.hh-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 22px;
  background: #fff;
  /* No border — the shape is carried by a soft shadow and a hairline ring, so
     the edge reads as depth rather than an outline. */
  border: 0;
  border-radius: 12px;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.1),
    0 8px 20px rgba(0, 0, 0, 0.08);
  color: #18181b;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex-shrink: 0;
  transition:
    transform 0.2s cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    border-color 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}

.hh-cta:hover {
  transform: translateY(-1px);
}

@media (max-width: 780px) {
  .hh-header {
    padding: 0 20px;
  }
}

/* ─── Hero ─── */
.hx-hero {
  direction: ltr;
  position: relative;
  width: 100%;
  overflow: hidden;
  /* Fixed height, not min-height: the ported scroll animation pins this
     section and lifts the product shot inside it, which only works if the shot
     starts below the fold. The reference hero is `calc(100vh + 2.5rem)` and
     carries its header inside; ours sits after an 80px header in flow, so the
     same total comes to `calc(100vh + 2.5rem - 80px)`. */
  height: calc(100vh + 2.5rem - 80px);
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Top-aligned, not centred: the product shot below the copy runs off the
     bottom edge of the hero, which clips it. */
  justify-content: flex-start;
  padding: clamp(72px, 9vh, 120px) 24px 0;
  background-color: #000;
  color: #fff;
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Hero glow, on its own layer rather than on the section's background so the
   entrance can animate it.

   Sizing, measured rather than guessed: the artwork is black down to ~46% of
   its height, so where the glow actually starts depends on how the image is
   scaled. On the reference hero the glow appears ~160px above the top edge of
   the product shot. Pinned to the bottom at 130% of the hero's height, the
   glow lands in the same place here. Full width keeps both corner blobs in
   frame; the vertical stretch is invisible on a gradient this soft. */
.hx-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("/reframe/hero-v3/hero-bg.webp") bottom center / 100% 130% no-repeat;
  z-index: 0;
  animation: hx-glow 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

/* The section after the hero rides up over it with rounded top corners. The
   export ships its own version (`.hero-overlap-section`, 2.5rem), but it rounds
   an inner block, so anything with its own background squares the corners off
   again. Doing it on the wrapper — which clips — is what actually holds.
   sections.css zeroes the inner one so the two don't stack.

   Scoped through `.stage` on purpose: /reframe/wf/webflow.css maps the export's
   `body { margin: 0 }` onto `.wf`, loads after this file, and at equal
   specificity that wiped the negative margin — the radius stayed, the overlap
   did not, so the corner clipped against white and read as square. */
.stage > .hx-hero + * {
  position: relative;
  z-index: 1;
  margin-top: -56px;
  border-top-left-radius: 56px;
  border-top-right-radius: 56px;
  overflow: hidden;
}

@media (max-width: 780px) {
  .stage > .hx-hero + * {
    margin-top: -28px;
    border-top-left-radius: 28px;
    border-top-right-radius: 28px;
  }
}

/* Copy + CTA as one block — the unit the scroll animation scales and fades.
   See /reframe/hero-scroll.js. */
.hx-text {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.hx-container {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* The copy column is 920px; .hx-shot below it opts out and runs wider. */
  width: min(1200px, 100%);
}

.hx-content,
.hx-container > .hx-cta,
.hx-container > .hx-stack {
  max-width: 920px;
}

.hx-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

.hx-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  border: 1px solid #ffffff33;
  border-radius: 999px;
  background: transparent;
  height: 40px;
}

.hx-avatars {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.hx-avatar {
  width: 26px;
  height: 26px;
  border-radius: 13px;
  border: 2px solid #000;
  display: block;
}

.hx-avatars .hx-avatar:not(:first-child) {
  margin-left: -6px;
}

.hx-badge-divider {
  width: 1px;
  height: 16px;
  background-color: #ffffff33;
}

.hx-badge-text {
  font-size: 14px;
  line-height: 17px;
  color: #a1a1aa;
  margin: 0;
}

.hx-badge-text b {
  color: #fff;
  font-weight: inherit;
}

.hx-title {
  /* The export hard-coded 60px/69px on a 1455px canvas. Fluid here so the
     nowrap lines never grow wider than the viewport. */
  font-size: clamp(30px, 4.6vw, 56px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.02em;
  text-align: center;
  color: #fff;
  margin: 0;
}

.hx-title span {
  display: block;
}

/* Narrow-screen line breaks, off by default. Above 768px the three <span>s are
   blocks and set the lines on their own; below it they run inline and these
   take over — see the @media block at the bottom of this file. */
.hx-br-m {
  display: none;
}

.hx-desc {
  font-size: clamp(15px, 1.5vw, 16px);
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  color: #fff;
  margin: 0;
}

.hx-desc span {
  display: block;
}

.hx-cta {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  background-color: #fff;
  border: 1px solid #f1f1f1;
  border-radius: 8px;
  text-decoration: none;
  color: #18181b;
  font-size: 14px;
  font-weight: 400;
  line-height: 14px;
  margin-top: 32px;
  cursor: pointer;
}

.hx-cta-icon {
  width: 14px;
  height: 14px;
  display: block;
  flex: none;
}

/* Platform stack — overlapping tiles. The source art already carries its own
   rounded white tile, so the item adds only the shadow that lifts it. */
.hx-stack {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
}

.hx-stack-item {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5));
  transition: transform 0.28s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.hx-stack-item:not(:first-child) {
  margin-left: -12px;
}

/* First in the DOM sits on top, so the stack reads left-over-right. */
.hx-stack-item:nth-child(1) { z-index: 5; }
.hx-stack-item:nth-child(2) { z-index: 4; }
.hx-stack-item:nth-child(3) { z-index: 3; }
.hx-stack-item:nth-child(4) { z-index: 2; }
.hx-stack-item:nth-child(5) { z-index: 1; }

.hx-stack-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.hx-stack:hover .hx-stack-item {
  transform: translateY(-2px);
}

.hx-stack-item:hover {
  transform: translateY(-8px) scale(1.06);
  z-index: 6;
}

/* ─── Floating brand marks ───
   Decoration only: the two formats the headline names, Figma in and WordPress
   out, drifting in the gutters either side of the copy. They live inside
   .hx-text so they track the copy rather than the viewport — at 1200px the
   copy column is 920px, leaving a 140px gutter each side that a 72px tile sits
   in cleanly. Below 1100px that gutter is gone and they move to the corners
   instead (see the narrow-screen block below). */
.hx-deco {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* The copy has to outrank the decoration inside .hx-text: a positioned element
   paints over a static one whatever the source order, so these two opt in to
   a layer of their own rather than the marks being pushed behind everything. */
.hx-content,
.hx-container .hx-cta {
  position: relative;
  z-index: 1;
}

.hx-deco-mark {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 20px;
  /* Frosted tile on the hero's black: a lifted white film, a hairline edge and
     a wide soft drop, so the mark reads as floating above the glow rather than
     stamped on it. */
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.18),
    0 18px 40px rgba(0, 0, 0, 0.45);
  /* Fades in on the same curve as the hero glow so it arrives with the rest of
     the section, then drifts forever. Two animations: the entrance runs once
     and holds (`both`), the float loops. */
  animation:
    hx-deco-in 1.4s cubic-bezier(0.22, 0.61, 0.36, 1) both,
    hx-deco-float 7s ease-in-out infinite;
}

.hx-deco-mark svg {
  width: 34px;
  height: 34px;
  display: block;
}

/* Figma: upper left, tilted back toward the copy. */
.hx-deco-mark--figma {
  top: 88px;
  left: 8px;
  --hx-deco-tilt: -12deg;
  transform: rotate(var(--hx-deco-tilt));
}

.hx-deco-mark--figma svg {
  /* The Figma mark is 38x57 — taller than wide. Matching its height to the
     WordPress circle would make it read as the larger of the two, so it is
     sized on the shared 34px box and lets its own width fall out. */
  width: auto;
  height: 34px;
}

/* WordPress: lower right, mirrored tilt, and offset down the headline so the
   pair reads as a diagonal rather than a matched set of bookends. */
.hx-deco-mark--wp {
  top: 236px;
  right: 8px;
  color: #fff;
  --hx-deco-tilt: 11deg;
  transform: rotate(var(--hx-deco-tilt));
  animation-delay: 0.15s, 0.9s;
}

@keyframes hx-deco-in {
  from {
    opacity: 0;
    transform: rotate(var(--hx-deco-tilt)) translateY(18px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: rotate(var(--hx-deco-tilt)) translateY(0) scale(1);
  }
}

@keyframes hx-deco-float {
  0%,
  100% {
    transform: rotate(var(--hx-deco-tilt)) translateY(0);
  }
  50% {
    transform: rotate(var(--hx-deco-tilt)) translateY(-14px);
  }
}

/* Narrow screens: the 140px gutters the desktop placement relies on are gone —
   the copy runs the full width — so the marks move to the two corners of the
   copy block instead, where there is still slack. Top-left sits beside the
   "Trusted by" pill, bottom-right beside the CTA; both of those are narrow,
   centred elements, unlike the headline between them. Smaller too, since here
   they sit next to the copy rather than away from it. */
@media (max-width: 1100px) {
  .hx-deco-mark {
    width: 54px;
    height: 54px;
    border-radius: 16px;
  }

  .hx-deco-mark svg,
  .hx-deco-mark--figma svg {
    width: auto;
    height: 26px;
  }

  .hx-deco-mark--figma {
    top: 0;
    left: 0;
  }

  /* Anchored to the bottom of .hx-text, which is the CTA at every width. */
  .hx-deco-mark--wp {
    top: auto;
    bottom: 0;
    right: 0;
  }
}

/* Below the CTA's own breakpoint the button goes full-width (max 280px) and the
   headline wraps to four or five lines, so the corners tighten. The marks pull
   out into the hero's 16px side padding and shrink again rather than crowd it. */
@media (max-width: 768px) {
  .hx-deco-mark {
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .hx-deco-mark svg,
  .hx-deco-mark--figma svg {
    height: 22px;
  }

  .hx-deco-mark--figma {
    left: -6px;
  }

  .hx-deco-mark--wp {
    right: -6px;
  }

  /* Shorter drift: with the marks pinned to the block's edges, the desktop
     14px carried them past the hero's padding. */
  @keyframes hx-deco-float {
    0%,
    100% {
      transform: rotate(var(--hx-deco-tilt)) translateY(0);
    }
    50% {
      transform: rotate(var(--hx-deco-tilt)) translateY(-8px);
    }
  }
}

/* Product shot — wider than the 920px copy column, and taller than the space
   left in the hero, so its bottom is cropped by the hero's overflow. */
/* The outer box the scroll animation lifts (see /reframe/hero-scroll.js). */
.hx-shot-wrap {
  width: min(1200px, 100%);
  margin-top: clamp(40px, 6vh, 72px);
}

.hx-shot {
  position: relative;
  width: 100%;
  border-radius: 14px 14px 0 0;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-bottom: 0;
  overflow: hidden;
  background: #0b0b0f;
  box-shadow: 0 40px 120px rgba(0, 0, 0, 0.55);
}

.hx-shot img {
  display: block;
  width: 100%;
  height: auto;
}

/* ─── Entrance ───
   Opacity + transform + filter only, so every step stays on the compositor.
   Each element declares its own delay; the sequence is over in ~1.3s. */
@keyframes hx-glow {
  from {
    opacity: 0;
    transform: scale(1.08) translateY(3%);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes hx-rise {
  from {
    opacity: 0;
    transform: translateY(22px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: none;
    filter: blur(0);
  }
}

/* The product shot comes in tilted away from the viewer and settles flat. */
@keyframes hx-shot-in {
  from {
    opacity: 0;
    transform: perspective(1400px) rotateX(9deg) translateY(64px) scale(0.965);
  }
  to {
    opacity: 1;
    transform: perspective(1400px) rotateX(0) translateY(0) scale(1);
  }
}

.hx-badge,
.hx-title span,
.hx-desc,
.hx-cta,
.hx-stack {
  animation: hx-rise 0.75s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  animation-delay: var(--hx-d, 0s);
}

.hx-badge { --hx-d: 0.12s; }
.hx-title span:nth-child(1) { --hx-d: 0.22s; }
.hx-title span:nth-child(2) { --hx-d: 0.3s; }
.hx-title span:nth-child(3) { --hx-d: 0.38s; }
.hx-desc { --hx-d: 0.5s; }
.hx-cta { --hx-d: 0.6s; }
.hx-stack { --hx-d: 0.68s; }

.hx-shot {
  animation: hx-shot-in 1.1s cubic-bezier(0.22, 0.61, 0.36, 1) 0.74s both;
}

/* A single light sweep across the product shot once it has landed. */
.hx-shot::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent 35%,
    rgba(255, 255, 255, 0.13) 50%,
    transparent 65%
  );
  transform: translateX(-100%);
  animation: hx-sheen 1.5s cubic-bezier(0.4, 0, 0.2, 1) 1.5s both;
}

@keyframes hx-sheen {
  to {
    transform: translateX(100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hx-hero::before,
  .hx-badge,
  .hx-title span,
  .hx-desc,
  .hx-cta,
  .hx-stack,
  .hx-shot,
  .hx-shot::after,
  .hx-deco-mark {
    animation: none;
  }
  .hx-shot::after {
    display: none;
  }
}

/* ─── Responsive ─── */
/* The export's hand-set line breaks only apply once the full 920px container
   fits; below that the copy wraps naturally. */
@media (min-width: 1000px) {
  .hx-title span,
  .hx-desc span {
    white-space: nowrap;
  }
}

@media (max-width: 768px) {
  .hx-hero {
    /* No forced viewport height on mobile: the product shot is only ~220px
       tall at this width, so holding a full screen left a band of dead black
       under it. The hero ends where its content does — and the scroll
       animation is desktop-only anyway (min-width: 992px). */
    height: auto;
    /* Bottom padding matters here: the section below rides 28px up over the
       hero, and with the product shot gone the CTA is the last thing in it —
       without this the panel sits on top of the button and swallows the tap. */
    padding: 40px 16px 72px;
  }
  .hx-content {
    gap: 18px;
  }
  /* The headline reflows to the three breaks marked up in the <br>s: the spans
     go inline so their own block breaks stop applying, and .hx-br-m supplies
     "Turn Your Figma Design Into / a Fully Editable WordPress / Website. In
     Minutes." — the split that balances closest to even at this width.
     .hx-desc keeps wrapping naturally. */
  .hx-title span,
  .hx-desc span {
    display: inline;
  }
  .hx-br-m {
    display: inline;
  }
  /* Sized off the longest of the three lines rather than guessed. Measured in
     Poppins 500 at this letter-spacing, "Turn Your Figma Design Into" renders
     13.57x its font-size, so the largest size that still fits is
     (viewport - padding) / 13.57. The 44px subtracted is the hero's 2x16px
     side padding plus 12px of slack, which covers a scrollbar on a narrow
     desktop window and small font-metric drift. Anything larger reflows that
     line and the headline becomes four.

     This is the ceiling for three lines at this padding: of all 55 ways to cut
     the headline into three, this split has the shortest longest-line, so the
     only way to a bigger size is shorter copy. */
  .hx-title {
    font-size: min(36px, calc((100vw - 44px) / 13.6));
  }
  .hx-desc {
    line-height: 22px;
  }
  .hx-cta {
    width: 100%;
    max-width: 280px;
    margin-top: 24px;
  }
  .hx-stack {
    margin-top: 24px;
  }
  /* The product shot is dropped on mobile: at this width the interface inside
     it is illegible, and it was the tallest thing on the screen. The hero ends
     on the CTA instead. */
  .hx-shot-wrap {
    display: none;
  }
}

/* ─── Pinned state ─── */
/* hero-scroll.js pins the hero with ScrollTrigger, which MOVES .hx-hero into
   a generated .pin-spacer wrapper once GSAP finishes loading (~1s after first
   paint). Reparenting a node restarts every CSS animation inside it, so the
   whole one-shot entrance replayed and the page appeared to load twice.
   Once pinned, the entrance is over: every one-shot ends on the element's
   natural state (opacity 1, transform none), so dropping the animations holds
   exactly the frame the entrance finished on. Only the deco marks keep their
   infinite float. */
.pin-spacer .hx-hero::before,
.pin-spacer .hx-badge,
.pin-spacer .hx-title span,
.pin-spacer .hx-desc,
.pin-spacer .hx-cta,
.pin-spacer .hx-stack,
.pin-spacer .hx-shot,
.pin-spacer .hx-shot::after {
  animation: none;
}
.pin-spacer .hx-deco-mark {
  animation: hx-deco-float 7s ease-in-out infinite;
}