/* ============================================================
   FAMOUS REGISTRAR - DOMAINS REGISTRATION HERO ("plant your flag")
   ------------------------------------------------------------
   Loaded after pages.css by domains/index.html and
   domains/bulk-search/index.html. Visual spec:
   Examples/domain registration hero.jpg.

   Two modifiers:
     .page-hero--sky      the shared theme: sky, wallpaper, aurora, stars,
                          moon, fog, title + sub-line, label, lead,
                          entrance and the desktop height. Both pages.
     .page-hero--domains  the planet stage + launchpad search layout
                          (domains/index.html).
     .page-hero--bulk     the copy + frosted price panel layout
                          (bulk-search, see BULK REGISTRATION below).

   Layers, back to front (all decorative layers are aria-hidden):
     ::before   the sky wash (mint behind the copy, blue behind the planet)
     aurora     two blurred ribbons drifting slowly
     stars      twinkling sparkles + faint dust
     shooting   rare comet streaks
     moon       small moon, top right
     ::after    the fog bank along the foot
     container  copy | planet stage (orbits + pills) | launchpad search

   The planet is a transparent WebP cut-out. Its lower edge is MASKED
   so it dissolves into the fog instead of showing the file's cut line.

   The orbit rings are an inline SVG drawn in the artwork's own
   1536x1024 space. domain-hero-stage.js reads each ring's geometry
   from that SVG and flies the TLD pills along it, so editing a ring in
   the markup is all it takes to change an orbit.

   Parallax: the script writes --hero-px / --hero-py (-1..1) on the
   band; layers move through the independent `translate` property, so
   parallax never collides with entrance/float animations (`transform`).
   Reduced motion: no entrance, no loops, no script motion (end of file).
   ============================================================ */

/* ================= THE BAND ================= */
.page-hero--sky {
  --hero-px: 0;
  --hero-py: 0;
  padding-block: clamp(1rem, 2vw, 1.75rem) clamp(2.5rem, 4vw, 3.5rem);
  border-bottom: 0;
}

.page-hero--sky .container {
  position: relative;
  z-index: 1;
}

.page-hero--sky .breadcrumb {
  margin-bottom: var(--sp-4);
}

/* The sky. Pale mint where the copy sits so slate text keeps > 4.5:1;
   a daytime blue brightens behind the planet and the moon. */
.page-hero--sky.page-hero--lede::before {
  background:
    radial-gradient(52% 64% at 84% 22%, rgba(108, 196, 242, 0.46), transparent 70%),
    radial-gradient(30% 40% at 98% 4%, rgba(96, 156, 236, 0.4), transparent 72%),
    radial-gradient(44% 54% at 64% 62%, rgba(84, 226, 204, 0.24), transparent 72%),
    radial-gradient(50% 66% at 4% 4%, rgba(120, 222, 196, 0.34), transparent 70%),
    linear-gradient(162deg, #e6f8f1 0%, #e3f5f6 44%, #d5ebf9 100%);
}

/* The fog bank: the band's ::after (a dot grid on other heroes) repainted
   as soft cloud mounds that melt the sky into the white page below. It is
   wider than the band so its slow drift never exposes an edge. */
.page-hero--sky::after {
  inset: auto -8% 0 -8%;
  height: clamp(170px, 30%, 300px);
  background-image:
    radial-gradient(24% 60% at 8% 100%, #fff 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(22% 56% at 30% 106%, #fff 0%, rgba(255, 255, 255, 0) 72%),
    radial-gradient(26% 64% at 56% 102%, #fff 0%, rgba(255, 255, 255, 0) 70%),
    radial-gradient(24% 58% at 82% 100%, #fff 0%, rgba(255, 255, 255, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.78) 80%, #fff 100%);
  background-size: auto;
  -webkit-mask-image: none;
  mask-image: none;
  animation: domainsFog 30s ease-in-out infinite alternate;
}

@keyframes domainsFog {
  from { transform: translate3d(-2.5%, 0, 0); }
  to { transform: translate3d(2.5%, 0, 0); }
}

/* ================= LAYOUT =================
   Row 1: copy | stage. Row 2: the launchpad across both columns.
   The stage column spans both rows but has no in-flow height (the
   planet inside it is absolutely positioned), so it never stretches a
   row; it is only the box the planet anchors to. That is what lets the
   planet sit BEHIND the search, as in the mock. */

/* ---------- The headline gradient: THE FLAG'S OWN COLOURS ----------
   The registration page is not a product page, so it has no
   `data-product` and would otherwise fall back to the house emerald —
   which is what the owner flagged as "a little out of place": an emerald
   headline sitting on a mint-to-blue sky above a teal planet.

   So the two stops are LIFTED FROM THE ARTWORK ITSELF. `domain-planet.webp`
   is the "plant your flag" composition (planet + flag in one file), and its
   measured palette is dominated by teal and cyan-blue — its top colours are
   #4699B9, #79CDBD, #90E0D0, #1070A0 and #005080. Two of those are used
   here verbatim:

     #005080   a deep blue straight out of the artwork's shadow side
     #0E7490   the artwork's teal (#79CDBD), darkened to the text-safe end

   So the gradient runs TEAL -> DEEP BLUE: the flag's own family, and the
   same two hues the planet and the sky are built from.

   The planet's dominant #4699B9 was the first choice for the light stop and
   it measures 2.92:1 on the sky — just under the 3:1 floor for display
   type, so it cannot be used as-is. #0E7490 is the nearest legal tone.
   Measured on the band the title actually sits on: #0E7490 is 4.86:1 and
   #005080 is 7.75:1 (and 4.36 / 6.95 out at the band's blue right edge).
   If either stop changes, re-check on BOTH ends of the sky. */
.page-hero--domains {
  --product-accent-from: #0E7490;
  --product-accent-to: #005080;

  /* ...and the third token this hero was missing: the one the feature strip's
     rules are drawn with. It has to be stated, because the page carries no
     `data-product`, so `--product-accent-rgb` fell through to the `:root`
     green (10, 129, 88) — an EMERALD rule across a band whose every other
     accent is the artwork's teal, and the strip's top hairline is the one rule
     in this hero that spans the full width.

     The value is the same #0E7490 as the headline's light stop — the
     artwork's teal, darkened to the text-safe end — so rule and headline
     cannot drift apart: change one, change the other.

     This is the fourteen `data-product` heroes' own pattern (emerald label,
     product-tinted rule), so stating it makes this page MATCH the system
     rather than stand apart from it; §4.6 in the brief records the two greys
     this rule had before. The strip is also the ONLY consumer of the token
     here — the registration page runs no dot matrix, no accent tile and no
     product CTA — so nothing else can move. */
  --product-accent-rgb: 14, 116, 144;
}

.page-hero--domains .page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 47fr) minmax(0, 53fr);
  grid-template-rows: auto auto;
  column-gap: 0;
  row-gap: clamp(1.75rem, 2.6vw, 2.5rem);
  align-items: start;
}

.domains-hero__copy {
  grid-column: 1;
  grid-row: 1;
  position: relative;
  z-index: 2;
  min-width: 0;
  padding-top: clamp(0.5rem, 1.6vw, 1.75rem);
}

.domains-hero__visual {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
  position: relative;
  z-index: 1;
  min-width: 0;
}

.domains-hero__launch {
  grid-column: 1 / -1;
  grid-row: 2;
  position: relative;
  z-index: 3;
  width: 100%;
  max-width: 1040px;
  min-width: 0;
  margin-inline: auto;
}

/* The lead sits INSIDE the launchpad now, directly under the chips and above
   the free-to-search line, so it reads as the fine print for the price the
   chips just showed. Centred and capped so it does not run the full 1040px. */
.page-hero--domains .domains-hero__launch .lead {
  max-width: 62ch;
  margin: var(--sp-5) auto 0;
  text-align: center;
}

/* The feature strip CLOSES THE BAND, full width — the same bar the other
   fourteen heroes carry, in the same place: under the launchpad, on its own
   hairline.

   IT HAS TO SPELL THE PLACEMENT OUT. The stage holds column 2 for two rows and
   the launch spans row 2, so a strip with no placement of its own is
   auto-placed into the first cell that still fits — column 1 of row 3 — and the
   four cells land inside the copy's 47% column: ~152px each at 1440px, ~110px
   at 1024px and ~86px at 901px. That is the "squished" bar: "Register in
   Minutes" wrapped onto three lines and the claim under it onto five, while
   every other hero gives each cell ~300px. Full width is what the component was
   built for (components.css, "The trust strip": a full-width closing band with
   hairline dividers), so the span is stated rather than inherited. */
.page-hero--domains .product-hero__strip {
  grid-column: 1 / -1;
}

/* ================= THE COPY ================= */
.page-hero--sky .page-hero__label {
  padding: 6px 16px 6px 6px;
  border-radius: var(--r-full);
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 6px 20px -10px rgba(11, 74, 107, 0.25);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.page-hero--sky .page-hero__icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-full);
}

.page-hero--sky .page-hero__icon svg {
  width: 22px;
  height: 22px;
}

/* The title: "Claim The Name" on one line, then "(before someone else
   does)" as a smaller sub-line in a deep brand gradient. Both live in the
   one <h1> so it reads as a single sentence; the brackets are aria-hidden.
   Each part is its own block so the entrance can stagger them. */
.page-hero--sky h1,
.page-hero--sky .page-hero__label + h1 {
  max-width: none;
  font-size: clamp(2.75rem, 3.6vw + 1.1rem, 5.25rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.domains-hero__line {
  display: block;
}

/* The sky h1 tracks very tight (-0.045em), and that tracking is also applied
   after the final glyph of an inline accent, so the last letter's right edge
   falls outside the accent's own background box and `background-clip: text`
   leaves it unpainted — the trailing "e" in "Name" was visibly clipped. A
   hair of right padding extends the clip's background over the full glyph;
   the matching negative margin keeps the line's measure unchanged. */
.page-hero--sky .domains-hero__line .accent {
  padding-right: 0.08em;
  margin-right: -0.08em;
}

/* The sub-line: "(before someone else does)". Smaller than it was, at the
   owner's request — the brackets make it read as an aside, and at 0.47em it
   was competing with the title it is supposed to sit under. 0.42em still
   clears 30px at every desktop width, so it stays a display line rather
   than becoming body copy.

   IT CARRIES A GRADIENT AGAIN, and that is the owner's call (2026-10-08):
   both "Name" and this line should wear the flag's colours. An earlier pass
   in the same session made this line solid `--brand-700` to keep the
   headline to a single colour moment — but a lone emerald line under a teal
   title on a mint sky is exactly the "out of place" the owner reported, so
   both lines now read from the same two stops.

   The stops are the shared `--product-accent-from` / `-to` pair, so this
   rule serves BOTH sky pages: `.page-hero--domains` supplies the flag's
   teal→deep-blue (see above) and `domains/bulk-search` keeps the house
   green from `:root`. That also restores the gradient bulk-search's line
   had before this session briefly removed it. Both stops clear 3:1 for
   display type (4.86 / 7.75 on the registration sky).

   `background-image`, never the shorthand — see components.css, "The
   headline accent". The `background` shorthand this rule used to carry was
   the site's last text-clip shorthand and it is gone for good. */
.domains-hero__sub {
  display: block;
  margin-top: 0.24em;
  font-size: 0.42em;
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--product-accent-from);
}

@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .domains-hero__sub {
    background-image: linear-gradient(
      102deg,
      var(--product-accent-from) 8%,
      var(--product-accent-to) 92%
    );
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}

/* Forced colours discards author backgrounds, which would leave the clip
   with nothing to paint and the line invisible — the same guard `.accent`
   carries in components.css. */
@media (forced-colors: active) {
  .domains-hero__sub {
    background-image: none;
    color: CanvasText;
  }
}

.domains-hero__paren {
  font-weight: 400;
}

@media (min-width: 901px) {
  .domains-hero__line,
  .domains-hero__sub {
    white-space: nowrap;
  }

  /* About 10% more height than the base spacing: the band gets more
     air above and below, and the copy sits a touch further from the
     search. Desktop only; the single column already runs tall. */
  .page-hero--sky {
    padding-block: clamp(1.5rem, 3vw, 2.75rem) clamp(3.5rem, 5.5vw, 5rem);
  }

  /* The registration page: another ~15% of height over the shared
     spacing (band padding, copy-to-search gap, copy offset). The bulk
     page keeps the shared spacing. */
  .page-hero--domains {
    padding-block: clamp(2rem, 4.1vw, 4rem) clamp(4.6rem, 8.1vw, 7.8rem);
  }

  .page-hero--domains .page-hero__inner {
    row-gap: clamp(3.4rem, 5.2vw, 5rem);
  }

  .page-hero--domains .domains-hero__copy {
    padding-top: clamp(1.6rem, 3.4vw, 3.25rem);
  }
}

.page-hero--sky .lead {
  max-width: 48ch;
  margin-top: var(--sp-5);
  color: var(--slate-700);
}

/* The trust row: three icon + two-line claims, each true of every
   registration on this page (they repeat the feature cards below). */
.domains-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-4) clamp(1.25rem, 2.6vw, 2.5rem);
  margin-top: var(--sp-6);
  padding: 0;
  list-style: none;
}

.domains-hero__trust li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  margin: 0;
  font-size: var(--fs-base);
  line-height: 1.35;
  color: var(--slate-700);
}

.domains-hero__trust li span {
  max-width: 7.5em;
}

.domains-hero__trust svg {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  color: var(--brand-600);
}

/* ================= THE STAGE (planet + orbits) =================
   A 1536:1024 box in the artwork's own coordinate space, oversized and
   bled off the right edge so the planet reads as a world, not a sticker.
   Everything inside is positioned in the same space. */
.domains-stage {
  position: absolute;
  top: -5%;
  left: -12%;
  width: 140%;
  aspect-ratio: 1536 / 1024;
  pointer-events: none;
  translate: calc(var(--hero-px) * -10px) calc(var(--hero-py) * -8px);
}

.domains-stage__art {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  /* Dissolve the file's flat lower edge into the fog. */
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.55) 80%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.55) 80%, transparent 96%);
  filter: drop-shadow(0 0 40px rgba(120, 220, 255, 0.35));
  animation: domainsPlanetFloat 14s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}

@keyframes domainsPlanetFloat {
  from { transform: translate3d(0, 0, 0) rotate(-0.35deg); }
  to { transform: translate3d(0, -8px, 0) rotate(0.35deg); }
}

/* A soft atmosphere halo behind the planet's limb. */
.domains-stage::before {
  content: "";
  position: absolute;
  left: 4%;
  right: 4%;
  top: 36%;
  height: 90%;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 236, 255, 0.55), rgba(150, 236, 255, 0.18) 70%, transparent 100%);
  filter: blur(24px);
}

/* The orbit lines: thin luminous ellipses behind the planet. Their
   geometry is the source of truth for the pills (see the script). */
.domains-orbits {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  max-width: none;
  overflow: visible;
  /* Keep this 18px in step with ORBIT_DEPTH in domain-hero-stage.js. */
  translate: calc(var(--hero-px) * -18px) calc(var(--hero-py) * -14px);
}

.domains-orbits ellipse {
  fill: none;
  stroke: url(#domains-orbit-stroke);
  stroke-width: 1.4;
  vector-effect: non-scaling-stroke;
}

.domains-orbits ellipse:nth-of-type(2) {
  stroke-dasharray: 2 7;
  opacity: 0.75;
}

.domains-orbits .domains-orbits__glint {
  fill: #fff;
  filter: url(#domains-glint-blur);
  opacity: 0;
}

/* ---------- The orbiting extensions ----------
   Frosted pills flown by the script. They are real buttons (clicking one
   fills the search) but kept out of the tab order and the accessibility
   tree: the "Popular extensions" chips under the search are the
   accessible path to the same action. */
.domains-sky-tld {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  padding: 0.38em 0.9em;
  border-radius: var(--r-full);
  background: rgba(240, 250, 255, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow:
    0 8px 22px -8px rgba(11, 74, 107, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.9),
    0 0 18px rgba(140, 220, 255, 0.35);
  -webkit-backdrop-filter: blur(8px) saturate(1.3);
  backdrop-filter: blur(8px) saturate(1.3);
  font-family: var(--font-display);
  font-size: clamp(0.8rem, 0.55vw + 0.55rem, 1.1rem);
  font-weight: 700;
  letter-spacing: -0.005em;
  color: #1d5f86;
  white-space: nowrap;
  /* WCAG 2.5.8 floor on the layout box. NOTE: the drift script transforms
     these pills, so a rect measured mid-animation can read 23px even though
     the box is 24px. They are also the decorative duplicate of the
     "Popular extensions" chips under the search, which are the accessible
     path to the same action (see the note above this rule). */
  min-height: 24px;
  opacity: 0;
  pointer-events: auto;
  cursor: pointer;
  will-change: transform, opacity;
  transition: background var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.domains-sky-tld:hover {
  background: rgba(255, 255, 255, 0.92);
  color: var(--brand-700);
  box-shadow: 0 10px 26px -8px rgba(10, 129, 88, 0.45), 0 0 0 4px rgba(52, 196, 138, 0.18);
}

/* Without the script the pills cannot fly, so they are not drawn. */
html:not(.js) .domains-sky-tld {
  display: none;
}

/* ================= THE SKY LAYERS ================= */
/* ---------- The wallpaper: the deepest layer ----------
   assets/img/hero/domain-space-bg.webp, kept deliberately quiet: it tints
   the sky rather than competing with the planet. It is masked down hard
   on the left, where its own dark planet would otherwise sit behind the
   headline, so the copy keeps the same pale surface it had before. It
   drifts very slowly and has the smallest parallax depth of any layer.
   It bleeds 3% past the band so neither motion exposes an edge. */
.domains-hero__wallpaper {
  position: absolute;
  inset: -3%;
  z-index: -1;
  pointer-events: none;
  background: url("../img/hero/domain-space-bg.webp") center 40% / cover no-repeat;
  opacity: 0.5;
  -webkit-mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.3) 34%, #000 62%);
  mask-image: linear-gradient(90deg, rgba(0, 0, 0, 0.22) 0%, rgba(0, 0, 0, 0.3) 34%, #000 62%);
  translate: calc(var(--hero-px) * -4px) calc(var(--hero-py) * -3px);
  animation: domainsWallpaper 48s ease-in-out infinite alternate;
}

@keyframes domainsWallpaper {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

.domains-hero__aurora,
.domains-hero__stars,
.domains-hero__shooting,
.domains-hero__moon {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  pointer-events: none;
}

/* ---------- Aurora: two heavily blurred ribbons ---------- */
.domains-hero__aurora::before,
.domains-hero__aurora::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  will-change: transform;
}

.domains-hero__aurora::before {
  top: -40%;
  left: 34%;
  width: 46%;
  height: 120%;
  background: radial-gradient(closest-side, rgba(70, 226, 196, 0.36), transparent 72%);
  transform-origin: 50% 0;
  animation: domainsAurora 28s ease-in-out infinite alternate;
}

.domains-hero__aurora::after {
  top: -30%;
  right: -10%;
  width: 52%;
  height: 130%;
  background: radial-gradient(closest-side, rgba(86, 170, 255, 0.34), transparent 72%);
  animation: domainsAurora2 36s ease-in-out infinite alternate;
}

@keyframes domainsAurora {
  from { transform: translate3d(0, 0, 0) rotate(-8deg) scale(1); }
  to { transform: translate3d(6%, 4%, 0) rotate(6deg) scale(1.14); }
}

@keyframes domainsAurora2 {
  from { transform: translate3d(0, 0, 0) scale(1.1); }
  to { transform: translate3d(-7%, 5%, 0) scale(1); }
}

/* ---------- Stars ----------
   Dust: a sparse field of tiny tinted points (white on a pale sky is
   invisible, so they are a soft sky-blue with a white core). Sparkles:
   a handful of four-point stars that twinkle out of phase; the script
   scatters them, and they ship in the markup so nothing is generated. */
.domains-hero__stars {
  translate: calc(var(--hero-px) * -6px) calc(var(--hero-py) * -5px);
}

.domains-hero__stars::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 12% 22%, rgba(255, 255, 255, 0.95), rgba(120, 190, 235, 0.5) 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 64% 38%, rgba(255, 255, 255, 0.9), rgba(120, 190, 235, 0.4) 60%, transparent 100%),
    radial-gradient(2px 2px at 42% 72%, rgba(255, 255, 255, 0.95), rgba(120, 190, 235, 0.45) 60%, transparent 100%),
    radial-gradient(1.4px 1.4px at 86% 80%, rgba(255, 255, 255, 0.9), rgba(120, 190, 235, 0.4) 60%, transparent 100%),
    radial-gradient(1.2px 1.2px at 30% 52%, rgba(255, 255, 255, 0.9), rgba(120, 190, 235, 0.4) 60%, transparent 100%);
  background-size: 260px 220px;
  /* Keep the dust off the copy column. */
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 55%);
  mask-image: linear-gradient(90deg, transparent 30%, #000 55%);
  opacity: 0.85;
}

.domains-hero__sparkle {
  position: absolute;
  width: var(--s, 10px);
  height: var(--s, 10px);
  background: radial-gradient(circle, #fff 0 18%, transparent 20%),
    linear-gradient(90deg, transparent 44%, rgba(255, 255, 255, 0.95) 50%, transparent 56%),
    linear-gradient(0deg, transparent 44%, rgba(255, 255, 255, 0.95) 50%, transparent 56%);
  filter: drop-shadow(0 0 4px rgba(150, 220, 255, 0.95));
  opacity: 0.85;
  animation: domainsTwinkle var(--t, 4s) ease-in-out var(--d, 0s) infinite;
}

/* Sparkle positions, sizes and twinkle timings. They used to be inline `style`
   attributes on every span on four pages; the markup is now bare spans and the
   layout lives here, in order. */
.domains-hero__sparkle:nth-child(1) { top: 9%; left: 47%; --s: 12px; --t: 4.2s; --d: -1s; }
.domains-hero__sparkle:nth-child(2) { top: 18%; left: 58%; --s: 8px; --t: 3.4s; --d: -2.2s; }
.domains-hero__sparkle:nth-child(3) { top: 6%; left: 71%; --s: 10px; --t: 5s; --d: -0.4s; }
.domains-hero__sparkle:nth-child(4) { top: 30%; left: 93%; --s: 9px; --t: 3.8s; --d: -3s; }
.domains-hero__sparkle:nth-child(5) { top: 44%; left: 52%; --s: 7px; --t: 4.6s; --d: -1.6s; }
.domains-hero__sparkle:nth-child(6) { top: 14%; left: 86%; --s: 14px; --t: 5.6s; --d: -2.8s; }
.domains-hero__sparkle:nth-child(7) { top: 52%; left: 97%; --s: 8px; --t: 3.2s; --d: -0.9s; }
.domains-hero__sparkle:nth-child(8) { top: 3%; left: 36%; --s: 7px; --t: 4s; --d: -2.4s; }

@keyframes domainsTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.6) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* ---------- Shooting stars: rare, thin, one at a time ---------- */
.domains-hero__shooting::before,
.domains-hero__shooting::after {
  content: "";
  position: absolute;
  width: 180px;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
  filter: drop-shadow(0 0 6px rgba(150, 220, 255, 0.9));
  opacity: 0;
  will-change: transform, opacity;
}

.domains-hero__shooting::before {
  top: 22%;
  left: 40%;
  animation: domainsShoot 16s linear 3s infinite;
}

.domains-hero__shooting::after {
  top: 10%;
  left: 62%;
  animation: domainsShoot 22s linear 11s infinite;
}

@keyframes domainsShoot {
  0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(-24deg); }
  2% { opacity: 0.9; }
  7% { opacity: 0; transform: translate3d(-360px, 160px, 0) rotate(-24deg); }
  100% { opacity: 0; transform: translate3d(-360px, 160px, 0) rotate(-24deg); }
}

/* ---------- The moon ---------- */
.domains-hero__moon {
  inset: auto;
  top: clamp(1.5rem, 4vw, 3.5rem);
  right: clamp(1rem, 4vw, 4.5rem);
  width: clamp(54px, 6vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  overflow: visible;
  background:
    radial-gradient(circle at 34% 30%, rgba(255, 255, 255, 0.85), transparent 46%),
    radial-gradient(14% 14% at 60% 62%, rgba(60, 110, 190, 0.28), transparent 100%),
    radial-gradient(10% 10% at 34% 66%, rgba(60, 110, 190, 0.22), transparent 100%),
    radial-gradient(8% 8% at 70% 34%, rgba(60, 110, 190, 0.2), transparent 100%),
    radial-gradient(circle at 40% 36%, #c9e3fb 0%, #8fbcec 62%, #6d9fdc 100%);
  box-shadow: 0 0 40px 6px rgba(150, 200, 255, 0.45), inset -10px -12px 22px rgba(40, 80, 160, 0.3);
  translate: calc(var(--hero-px) * -28px) calc(var(--hero-py) * -20px);
  animation: domainsMoon 18s ease-in-out infinite alternate;
}

@keyframes domainsMoon {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-6px, 8px, 0); }
}

/* ================= THE LAUNCHPAD (search) =================
   Same form contract as every other search on the site (components.css
   `.domain-search--hero`); this only re-skins it as the mock's frosted
   bar with a magnifier, a 64px field and a large rocket button. */
.page-hero--domains .domain-search--hero {
  gap: var(--sp-3);
  padding: 10px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.35),
    0 30px 60px -24px rgba(11, 74, 107, 0.35),
    0 0 70px rgba(80, 220, 190, 0.18);
  transition: box-shadow var(--dur-slow) var(--ease-out), border-color var(--dur-slow) var(--ease-out);
}

.page-hero--domains .domain-search--hero:focus-within {
  border-color: rgba(52, 196, 138, 0.7);
  box-shadow:
    0 0 0 6px rgba(52, 196, 138, 0.2),
    0 30px 60px -24px rgba(11, 74, 107, 0.35),
    0 0 90px rgba(80, 220, 190, 0.3);
}

.domain-search__icon {
  position: absolute;
  left: 22px;
  top: 50%;
  width: 26px;
  height: 26px;
  margin-top: -13px;
  color: var(--slate-500);
  pointer-events: none;
}

.page-hero--domains .domain-search--hero input[type="search"] {
  height: 64px;
  padding-left: 64px;
  font-size: clamp(1.15rem, 0.5vw + 1rem, 1.4rem);
  font-weight: 500;
}

.page-hero--domains .domain-search__typed {
  padding-left: 64px;
  font-size: clamp(1.15rem, 0.5vw + 1rem, 1.4rem);
  font-weight: 500;
  color: var(--slate-400);
}

.page-hero--domains .domain-search--hero .domain-search__go {
  height: 64px;
  min-width: 13.5rem;
  padding-inline: var(--sp-10);
  border-radius: 14px;
  font-size: 1.25rem;
  font-weight: 700;
  gap: var(--sp-3);
  overflow: hidden;
}

.page-hero--domains .domain-search__go svg {
  width: 24px;
  height: 24px;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* A sheen that sweeps across the button on hover. */
.page-hero--domains .domain-search__go::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  transition: left 700ms var(--ease-out);
  pointer-events: none;
}

.page-hero--domains .domain-search__go:hover::before,
.page-hero--domains .domain-search__go:focus-visible::before {
  left: 120%;
}

.page-hero--domains .domain-search__go:hover svg,
.page-hero--domains .domain-search__go:focus-visible svg {
  transform: translate(3px, -3px);
}

/* The launch moment: set by the script for ~700ms on submit / pill click. */
.page-hero--domains .domain-search__go.is-launching svg {
  animation: domainsLaunch 700ms var(--ease-in-out);
}

@keyframes domainsLaunch {
  0% { transform: translate(0, 0); }
  45% { transform: translate(18px, -18px); opacity: 0; }
  46% { transform: translate(-14px, 14px); opacity: 0; }
  100% { transform: translate(0, 0); opacity: 1; }
}

/* ---------- Popular extensions ----------
   One centred, wrapping row (no marquee): every chip is reachable and
   nothing scrolls sideways. Only .com carries a price, because $14.99 is
   the one price this site has verified; the others show live pricing
   in the search results. */
.domains-hero__popular {
  justify-content: center;
  gap: var(--sp-2) 10px;
  margin-top: var(--sp-5);
}

.domains-hero__popular .tld-chips__lead {
  margin-right: var(--sp-2);
  font-size: var(--fs-sm);
  font-weight: 650;
  color: var(--ink-800);
}

.page-hero--domains .domains-hero__popular .tld-chip {
  gap: 10px;
  padding: 6px 14px;
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(208, 213, 221, 0.8);
  color: var(--slate-600);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

.page-hero--domains .domains-hero__popular .tld-chip:hover {
  background: var(--white);
  border-color: var(--brand-300);
  color: var(--brand-700);
  box-shadow: 0 6px 16px -8px rgba(10, 129, 88, 0.45);
}

/* One centred line, as in the mock. */
.domains-hero__foot {
  margin-top: var(--sp-5);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--slate-600);
}

.domains-hero__foot a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 650;
  color: var(--brand-700);
}

.domains-hero__foot a svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-base) var(--ease-out);
}

.domains-hero__foot a:hover svg {
  transform: translateX(3px);
}

/* ================= ENTRANCE =================
   One choreographed arrival, about 1.3s: label, the three headline
   lines, lead, trust row, then the planet rises, the search slides up
   and the chips follow. CSS-only, `both` fill so nothing flashes.
   Keyed off html.js (content is never hidden if scripts fail) and only
   under no-preference for motion. */
@media (prefers-reduced-motion: no-preference) {
  html.js .page-hero--sky [data-hero-enter] {
    animation: domainsEnter 900ms var(--ease-out) var(--enter-delay, 0ms) both;
  }

  html.js .page-hero--domains .domains-stage[data-hero-enter] {
    animation: domainsRise 1400ms var(--ease-out) var(--enter-delay, 0ms) both;
  }

  html.js .page-hero--sky .domains-hero__moon {
    animation:
      domainsFadeIn 1600ms var(--ease-out) 500ms both,
      domainsMoon 18s ease-in-out 2.1s infinite alternate;
  }
}

@keyframes domainsEnter {
  from { opacity: 0; transform: translate3d(0, 22px, 0); filter: blur(6px); }
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes domainsRise {
  from { opacity: 0; transform: translate3d(0, 70px, 0) scale(0.96); }
  to { opacity: 1; transform: none; }
}

@keyframes domainsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ================= RESPONSIVE ================= */
/* Narrower desktops: pull the stage in so the flag (the planet's
   tallest, rightmost element) is never cropped by the viewport. */
@media (max-width: 1400px) {
  .domains-stage {
    left: -18%;
    width: 128%;
    top: 0;
  }
}

@media (max-width: 1100px) {
  .domains-stage {
    left: -26%;
    width: 132%;
    top: 4%;
  }
}

/* ---------- Single column (tablet + phone) ----------
   The search is what this page exists for, so it moves up and the
   explanation moves below it. The two wrappers (copy, launch) dissolve
   with `display: contents` so their children can be re-sequenced in one
   centred column:

     label > title > planet > SEARCH > popular extensions
           > lead > trust row > foot line

   The planet sits between the title and the search, with the search
   overlapping its fogged-out base, as on desktop. Only the visual order
   changes; the DOM order (and so the reading and tab order) is the
   same as on desktop, and nothing that moved down is focusable. */
@media (max-width: 900px) {
  .page-hero--domains .page-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }

  .domains-hero__copy,
  .domains-hero__launch {
    display: contents;
  }

  .page-hero--domains .page-hero__inner > * > *,
  .domains-hero__visual {
    position: relative;
    max-width: 100%;
  }

  .page-hero--domains .page-hero__label { order: 1; z-index: 2; }
  .page-hero--domains h1 { order: 2; z-index: 2; }

  .domains-hero__visual {
    order: 3;
    z-index: 1;
    align-self: stretch;
    aspect-ratio: 1536 / 820;
    margin: calc(var(--sp-2) * -1) calc(var(--gutter) * -1) 0;
    overflow: hidden;
  }

  .page-hero--domains .domain-search--hero {
    order: 4;
    z-index: 3;
    align-self: stretch;
    width: auto;
    max-width: 680px;
    margin: calc(clamp(3rem, 12vw, 6rem) * -1) auto 0;
  }

  .domains-hero__popular { order: 5; z-index: 3; }

  .page-hero--domains .lead {
    order: 6;
    z-index: 2;
    max-width: 44ch;
    margin: var(--sp-8) auto 0;
    padding-top: var(--sp-6);
    border-top: 1px solid rgba(11, 74, 107, 0.12);
  }

  .domains-hero__trust {
    order: 7;
    z-index: 2;
    justify-content: center;
    margin-top: var(--sp-5);
  }

  .domains-hero__trust li {
    text-align: left;
  }

  /* The shared strip REPLACED the trust row on this page, so it takes that
     row's place in the sequence above: order 7, last of the body, under the
     search and its popular extensions. It needs saying, because the sequence
     is driven by `order` here: with none of its own the strip sorts at 0 and a
     phone paints the four features ABOVE the label — before the title they
     belong to. Stretched, because a centred flex line otherwise shrinks it to
     its longest label. (The trust-row rules just above still serve
     `domains/bulk-search`, which keeps that row.) */
  .page-hero--domains .product-hero__strip {
    order: 7;
    z-index: 2;
    align-self: stretch;
  }

  .page-hero--domains .product-hero__strip li {
    text-align: left;
  }

  /* The strip sorts at 7 with the trust row it replaced; the free-to-search
     line must stay AFTER it (it did on desktop, where both sit inside the
     launchpad), so it takes 8 — the value it already carried. */
  .domains-hero__foot { order: 8; z-index: 2; }

  .domains-stage {
    top: 0;
    left: 0;
    width: 100%;
  }

  .domains-hero__moon {
    top: auto;
    bottom: 62%;
  }
}

@media (max-width: 640px) {
  .page-hero--sky h1,
  .page-hero--sky .page-hero__label + h1 {
    font-size: clamp(2.4rem, 10.5vw, 3.25rem);
  }

  .domains-hero__sub {
    font-size: 0.46em;
  }

  .domains-hero__trust {
    gap: var(--sp-3) var(--sp-5);
  }

  .domains-hero__trust li {
    font-size: var(--fs-sm);
  }

  .domains-sky-tld {
    font-size: 0.72rem;
  }

  .domains-hero__popular .tld-chips__lead {
    flex-basis: 100%;
    margin-right: 0;
    text-align: center;
  }
}

@media (max-width: 520px) {
  .page-hero--domains .domain-search--hero .domain-search__go {
    min-width: 0;
    height: 56px;
  }

  .page-hero--domains .domain-search--hero input[type="search"] {
    height: 56px;
  }
}

/* ================= BULK REGISTRATION =================
   domains/bulk-search/index.html: the same sky, no planet. Copy on the
   left; on the right a frosted panel carrying the price and the hand-off
   to the bulk search tool (an external app that cannot be embedded or
   pre-filled, so the button simply opens it). */
.page-hero--bulk .page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}

/* "Check The Whole List" is five characters longer than the registration
   page's "Claim The Name", so at the shared title size the no-wrap line
   overflows the copy column and slides under the panel. Size it down so
   the line always fits the column (the shared mobile sizes already do). */
@media (min-width: 901px) {
  .page-hero--bulk h1,
  .page-hero--bulk .page-hero__label + h1 {
    font-size: clamp(2.5rem, 2.7vw + 1rem, 4rem);
  }
}

.page-hero--bulk .domains-hero__copy {
  grid-column: auto;
  grid-row: auto;
}

.page-hero--bulk .lead {
  max-width: 50ch;
}

.page-hero--bulk .domains-hero__trust li span {
  max-width: 9em;
}

.bulk-hero__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-6);
  margin-top: var(--sp-6);
  font-size: var(--fs-sm);
  color: var(--slate-600);
}

.bulk-hero__links a {
  display: inline-flex;
  align-items: center;
  /* WCAG 2.5.8 floor. This is a link row, not prose, so the inline-link
     exception does not apply; without the floor the control was 20px tall
     (2026-10-15 visual audit, "Still open" list). */
  min-height: 24px;
  gap: 6px;
  font-weight: 650;
  color: var(--brand-700);
}

.bulk-hero__links a svg {
  width: 14px;
  height: 14px;
  transition: transform var(--dur-base) var(--ease-out);
}

.bulk-hero__links a:hover svg {
  transform: translateX(3px);
}

/* The frosted panel: the launchpad's glass, as a card. */
.bulk-hero__panel {
  position: relative;
  z-index: 2;
  padding: clamp(1.5rem, 2.4vw, 2.25rem);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: rgba(255, 255, 255, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow:
    0 0 0 6px rgba(255, 255, 255, 0.35),
    0 30px 60px -24px rgba(11, 74, 107, 0.35),
    0 0 70px rgba(80, 220, 190, 0.18);
}

.bulk-hero__panel-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}

.bulk-hero__panel-icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: var(--grad-brand);
  color: var(--white);
  box-shadow: 0 8px 20px -8px rgba(10, 129, 88, 0.6);
}

.bulk-hero__panel-icon svg {
  width: 22px;
  height: 22px;
}

.bulk-hero__panel h2 {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: 1.25;
}

.bulk-hero__panel .price {
  margin-top: var(--sp-5);
}

.bulk-hero__panel .price__amount {
  font-size: clamp(2.25rem, 2vw + 1.4rem, 3rem);
}

.bulk-hero__panel .feature-list {
  margin-top: var(--sp-5);
}

/* The launch button: the search button's look, as a link. */
.bulk-hero__go {
  position: relative;
  gap: var(--sp-3);
  width: 100%;
  height: 60px;
  margin-top: var(--sp-6);
  border-radius: 14px;
  font-size: 1.15rem;
  font-weight: 700;
  overflow: hidden;
}

.bulk-hero__go svg {
  width: 22px;
  height: 22px;
  transition: transform var(--dur-slow) var(--ease-out);
}

.bulk-hero__go::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 -60%;
  width: 45%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.35), transparent);
  transform: skewX(-18deg);
  transition: left 700ms var(--ease-out);
  pointer-events: none;
}

.bulk-hero__go:hover::before,
.bulk-hero__go:focus-visible::before {
  left: 120%;
}

.bulk-hero__go:hover svg,
.bulk-hero__go:focus-visible svg {
  transform: translate(3px, -3px);
}

.bulk-hero__go.is-launching svg {
  animation: domainsLaunch 700ms var(--ease-in-out);
}

/* Single column: label, title, then the panel (the action), then the
   explanation, as on the registration page. Visual order only. */
@media (max-width: 900px) {
  .page-hero--bulk .page-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
  }

  .page-hero--bulk .domains-hero__copy {
    display: contents;
  }

  .page-hero--bulk .page-hero__label { order: 1; }
  .page-hero--bulk h1 { order: 2; }

  .bulk-hero__panel {
    order: 3;
    align-self: stretch;
    width: 100%;
    max-width: 560px;
    margin: var(--sp-8) auto 0;
    text-align: left;
  }

  .page-hero--bulk .lead {
    order: 4;
    max-width: 44ch;
    margin: var(--sp-8) auto 0;
    padding-top: var(--sp-6);
    border-top: 1px solid rgba(11, 74, 107, 0.12);
  }

  .page-hero--bulk .domains-hero__trust {
    order: 5;
    justify-content: center;
    margin-top: var(--sp-5);
  }

  .page-hero--bulk .domains-hero__trust li {
    text-align: left;
  }

  .bulk-hero__links {
    order: 6;
    justify-content: center;
  }

  .page-hero--bulk .domains-hero__moon {
    top: clamp(1rem, 3vw, 2rem);
  }
}

/* ================= REDUCED MOTION =================
   Everything holds still: no loops, no parallax (the script also stops
   writing the pointer variables), no flight. The orbit lines still draw,
   so the composition reads the same; the pills, which only exist in
   motion, are hidden. */
@media (prefers-reduced-motion: reduce) {
  .page-hero--sky::after,
  .domains-hero__wallpaper,
  .domains-hero__aurora::before,
  .domains-hero__aurora::after,
  .domains-hero__sparkle,
  .domains-hero__moon,
  .domains-stage__art {
    animation: none !important;
  }

  .domains-hero__shooting,
  .domains-sky-tld {
    display: none;
  }

  .bulk-hero__go svg,
  .bulk-hero__go::before {
    transition: none;
  }

  .domains-stage,
  .domains-orbits,
  .domains-hero__wallpaper,
  .domains-hero__stars,
  .domains-hero__moon {
    translate: none;
  }
}