/* ==========================================================================
   Public pages polish — home page (/) and the client pages a visitor can open without signing in
   (store, domains, knowledgebase, news, network status). Loaded with the shared header / footer (SiteNav).
   ========================================================================== */

/* ---------- Header: lifts off the page once you scroll ---------- */
.sn-head { transition: box-shadow .25s ease, background-color .25s ease; }
.sn-head.is-scrolled { box-shadow: 0 10px 30px -18px rgba(15, 23, 42, .35); }

/* ---------- Reveal on scroll (public-motion.js adds .pm-reveal, then .pm-in) ---------- */
.pm-reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s cubic-bezier(.2, .8, .2, 1), transform .6s cubic-bezier(.2, .8, .2, 1); }
.pm-reveal.pm-in { opacity: 1; transform: none; }

/* ==========================================================================
   Home page
   ========================================================================== */
/* soft moving colour behind the hero (the old blobs stay off) */
.home .hero { isolation: isolate; }
.home .hero::before {
  content: ""; position: absolute; inset: -20% -10% auto; height: 120%; z-index: -1; pointer-events: none;
  background:
    radial-gradient(40% 50% at 20% 30%, color-mix(in srgb, #1a56db 16%, transparent), transparent 70%),
    radial-gradient(35% 45% at 80% 20%, color-mix(in srgb, #06b6d4 14%, transparent), transparent 70%),
    radial-gradient(30% 40% at 55% 85%, color-mix(in srgb, #8b5cf6 12%, transparent), transparent 70%);
  animation: pm-drift 18s ease-in-out infinite alternate;
}
.home .hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--h-ink) 9%, transparent) 1px, transparent 1px); background-size: 22px 22px;
  mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent 80%); -webkit-mask-image: radial-gradient(60% 70% at 50% 40%, #000, transparent 80%);
}
@keyframes pm-drift { to { transform: translate(3%, 4%) scale(1.06); } }
/* hero lines arrive one after another */
.home .hero-inner > * { animation: pm-up .7s cubic-bezier(.2, .8, .2, 1) backwards; }
.home .hero-inner > :nth-child(2) { animation-delay: .08s; }
.home .hero-inner > :nth-child(3) { animation-delay: .16s; }
.home .hero-inner > :nth-child(4) { animation-delay: .24s; }
.home .hero-inner > :nth-child(n+5) { animation-delay: .32s; }
@keyframes pm-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.home .eyebrow { animation: pm-up .7s backwards, pm-glow 3.2s 1s ease-in-out infinite; }
@keyframes pm-glow { 0%, 100% { box-shadow: 0 0 0 0 rgba(26, 86, 219, 0); } 50% { box-shadow: 0 0 0 6px rgba(26, 86, 219, .08); } }
.home .domain-search { transition: box-shadow .25s ease, transform .25s ease; }
.home .domain-search:focus-within { box-shadow: 0 0 0 4px rgba(26, 86, 219, .16), 0 18px 40px -20px rgba(26, 86, 219, .5); transform: translateY(-1px); }
.home .tld-row > * { transition: transform .2s ease, border-color .2s ease; }
.home .tld-row > *:hover { transform: translateY(-2px); border-color: #1a56db; }

/* cards lift and their icon pops on hover */
.home :is(.quick-card, .plan, .feature, .info-card) { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.home :is(.quick-card, .feature, .info-card):hover { transform: translateY(-4px); box-shadow: 0 20px 40px -24px rgba(30, 41, 99, .45); }
.home .plan:hover { transform: translateY(-6px); box-shadow: 0 26px 50px -26px rgba(26, 86, 219, .55); }
.home :is(.q-icon, .f-icon) { transition: transform .3s cubic-bezier(.34, 1.56, .64, 1); }
.home :is(.quick-card, .feature):hover :is(.q-icon, .f-icon) { transform: scale(1.12) rotate(-4deg); }
/* call-to-action: slow light sweep */
.home .cta { position: relative; overflow: hidden; }
.home .cta::after { content: ""; position: absolute; top: 0; bottom: 0; left: -40%; width: 30%; transform: skewX(-20deg); pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent); animation: pm-sweep 6s 1.5s ease-in-out infinite; }
@keyframes pm-sweep { 0%, 70% { left: -40%; } 100% { left: 130%; } }

/* ==========================================================================
   Public client pages (body.is-guest): page title band, entrance, hover
   The signed-in client area hides page titles (they live in its top bar); visitors have no top bar,
   so here the title + description come back as a hero band. Pages with their own hero are left alone.
   ========================================================================== */
:root body.is-guest .client-content:not(:has(.dmx-hub, .ac-hero)) :is(.client-page-header, .ps-head, .ac-head, .sl-head, .pb-head) > :is(.pb-head-main, .ps-head-main, .ac-head-main),
:root body.is-guest .client-content:not(:has(.dmx-hub, .ac-hero)) :is(.client-page-header, .ps-head, .ac-head, .sl-head, .pb-head) :is(.client-page-title, .client-page-desc, .ps-title, .ps-desc, .pb-title, .pb-desc, .ac-desc) {
  position: static !important; width: auto !important; height: auto !important; margin: 0 !important; overflow: visible !important;
  clip: auto !important; white-space: normal !important;
}
:root body.is-guest .client-content:not(:has(.dmx-hub, .ac-hero)) :is(.client-page-header, .ps-head, .ac-head, .sl-head, .pb-head) {
  position: relative; overflow: hidden; isolation: isolate;
  display: flex !important; justify-content: space-between !important; align-items: flex-end !important; flex-wrap: wrap; gap: 14px 20px;
  margin: 0 0 22px !important; padding: 30px 32px !important; border-radius: 22px !important;
  border: 1px solid var(--cl-line, #e3e8ef) !important;
  background: linear-gradient(135deg, color-mix(in srgb, #1a56db 7%, var(--cl-card, #fff)), var(--cl-card, #fff) 60%) !important;
  box-shadow: 0 18px 40px -30px rgba(30, 41, 99, .45) !important;
  animation: pm-up .6s cubic-bezier(.2, .8, .2, 1) backwards;
}
:root body.is-guest .client-content:not(:has(.dmx-hub, .ac-hero)) :is(.client-page-header, .ps-head, .ac-head, .sl-head, .pb-head)::before {
  content: ""; position: absolute; right: -60px; top: -80px; width: 280px; height: 280px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: radial-gradient(circle, color-mix(in srgb, #06b6d4 22%, transparent), transparent 65%); animation: pm-drift 14s ease-in-out infinite alternate;
}
:root body.is-guest .client-content :is(.client-page-title, .ps-title) { font-size: clamp(24px, 3vw, 32px) !important; font-weight: 800 !important; letter-spacing: -.02em; line-height: 1.15 !important; }
:root body.is-guest .client-content :is(.client-page-desc, .ps-desc) { margin-top: 6px !important; font-size: 15px !important; color: var(--cl-ink-2, #51607a) !important; max-width: 640px; }
:root body.is-guest .client-content :is(.ps-head-main, .ac-head-main, .pb-head-main) { min-width: 0; flex: 1 1 320px; }

/* cards lift on hover */
:root body.is-guest .client-content :is(.ps-plan, .ac-card, .kb-card, .dash-card, .client-card):is(a, :has(> a)):hover,
:root body.is-guest .client-content .ps-plan:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -28px rgba(30, 41, 99, .5); }
:root body.is-guest .client-content :is(.ps-plan, .ac-card, .kb-card) { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }

/* ---------- Phones ---------- */
@media (max-width: 760px) {
  :root body.is-guest .client-content:not(:has(.dmx-hub, .ac-hero)) :is(.client-page-header, .ps-head, .ac-head, .sl-head, .pb-head) { padding: 22px 18px !important; border-radius: 18px !important; align-items: flex-start !important; }
  :root body.is-guest .client-content :is(.client-page-desc, .ps-desc) { font-size: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-reveal { opacity: 1; transform: none; transition: none; }
  .home .hero::before, .home .hero-inner > *, .home .eyebrow, .home .cta::after,
  :root body.is-guest .client-content :is(.client-page-header, .ps-head, .ac-head, .sl-head, .pb-head),
  :root body.is-guest .client-content :is(.client-page-header, .ps-head, .ac-head, .sl-head, .pb-head)::before { animation: none !important; }
  .home :is(.quick-card, .plan, .feature, .info-card):hover, :root body.is-guest .client-content :is(.ps-plan, .ac-card, .kb-card):hover { transform: none !important; }
}