/* xBookvideo shared clay UI — bigger crisp wordmark, solid Book — 2026-10-27
   Soft clay feel via solid Book fill + crisp text-shadow only.
   filter:drop-shadow / background-clip:text on logo Book blurs — DO NOT use on logo spans.
   Marker: clay-logo-crisp-20261027 (supersedes clay-logo-bigger-20261027; solid Book, keep 26px) */
:root{
  --clay-grad:linear-gradient(145deg,#F4F0FF 0%,#D9C8FF 22%,#A86BFF 48%,#F062A8 78%,#FFB088 100%);
  --clay-grad-accent:linear-gradient(145deg,#4B3FD6 0%,#6C5CE7 28%,#7C3AED 55%,#9D174D 100%);
  --clay-ink:#1A1530;
  --clay-ink-soft:#F5F5FA;
  --clay-book:#8B6CFF;
  --clay-book-hot:#A86BFF;
  --clay-title-shadow:
    0 1px 0 rgba(255,255,255,.55),
    0 2px 4px rgba(108,92,231,.22);
  --clay-title-shadow-light:
    0 1px 0 rgba(255,255,255,.7),
    0 2px 5px rgba(108,92,231,.18);
  --clay-logo-shadow:
    0 1px 0 rgba(255,255,255,.75),
    0 2px 6px rgba(108,92,231,.22);
}

/* --- Clay title (H1 / hero only) ---
   Dark pages: full soft gradient fill + crisp text-shadow (NO filter)
   Light pages (.clay-title--light): dark crisp ink; only .gradient/.g accent uses clay gradient */
.clay-title{
  position:relative;
  z-index:1;
  font-weight:800;
  letter-spacing:-.03em;
  background:var(--clay-grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  /* crisp lift — never filter */
  filter:none!important;
  text-shadow:var(--clay-title-shadow);
  /* Safari: text-shadow + clip:text is flaky; paint shadow via pseudo when needed.
     Keep shadow mild so glyph edges stay sharp. */
  transform-origin:center center;
  animation:clayTitleIn .42s cubic-bezier(.34,1.45,.64,1) both;
}
.clay-title .gradient,
.clay-title .g,
.clay-title span[class]{
  background:var(--clay-grad);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  filter:none!important;
  text-shadow:inherit;
}

/* light backgrounds (white / #f8f9fd marketing pages)
   Base H1 = solid dark ink (fully legible). Accent span only gets clay gradient. */
.clay-title--light{
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:var(--clay-ink)!important;
  color:var(--clay-ink)!important;
  filter:none!important;
  text-shadow:var(--clay-title-shadow-light);
  animation:clayTitleIn .42s cubic-bezier(.34,1.45,.64,1) both;
}
.clay-title--light .gradient,
.clay-title--light .g,
.clay-title--light span.gradient,
.clay-title--light span.g{
  background:var(--clay-grad-accent);
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  color:transparent;
  filter:none!important;
  /* darker lift — avoid washed-out white halo on light backgrounds */
  text-shadow:
    0 1px 0 rgba(26,21,48,.10),
    0 1px 3px rgba(75,63,214,.22);
}
/* other nested spans on light titles stay ink (do not force-gradient every span[class]) */
.clay-title--light span:not(.gradient):not(.g){
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:var(--clay-ink)!important;
  color:var(--clay-ink)!important;
  filter:none!important;
}

@keyframes clayTitleIn{
  0%{opacity:0;transform:scale(.96) translateY(4px)}
  100%{opacity:1;transform:scale(1) translateY(0)}
}
/* breathe removed — filter keyframes caused blur; optional soft scale only if needed later */

/* --- Soft blobs (pointer-events:none) --- */
.clay-hero{position:relative}
.clay-blobs{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.clay-blob{
  position:absolute;
  width:56px;height:56px;
  border-radius:48% 52% 58% 42% / 42% 55% 45% 58%;
  background:
    radial-gradient(ellipse 70% 55% at 30% 26%, rgba(255,255,255,.55) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(145deg,#A86BFF 0%,#F062A8 55%,#FF9A6A 100%);
  box-shadow:
    0 10px 22px rgba(168,107,255,.28),
    0 1px 0 rgba(255,255,255,.28) inset,
    0 -6px 12px rgba(60,30,120,.14) inset;
  animation:clayBlobWobble 7.2s ease-in-out infinite;
  opacity:.88;
}
.clay-blob--sm{
  width:28px;height:28px;
  opacity:.85;
  animation:clayBlobWobble 6.8s ease-in-out .4s infinite reverse;
}
.clay-blob--a{top:8%;left:6%}
.clay-blob--b{top:18%;right:8%}
.clay-blob--c{bottom:12%;left:12%}
@keyframes clayBlobWobble{
  0%,100%{transform:translate(0,0) rotate(0deg)}
  33%{transform:translate(4px,-6px) rotate(4deg)}
  66%{transform:translate(-5px,3px) rotate(-3deg)}
}

.clay-blob--soft{
  background:
    radial-gradient(ellipse 70% 55% at 30% 26%, rgba(255,255,255,.7) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(145deg,#C9B6FF 0%,#F5A3C7 55%,#FFC4A0 100%);
  box-shadow:
    0 8px 18px rgba(168,107,255,.18),
    0 1px 0 rgba(255,255,255,.5) inset,
    0 -4px 10px rgba(108,92,231,.08) inset;
  opacity:.72;
}

/* --- Optional soft clay pill CTA (primary only) --- */
.clay-btn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:none;border-radius:999px!important;
  padding:16px 32px;
  font-weight:800;font-size:17px;letter-spacing:-.01em;
  color:#fff!important;text-decoration:none!important;
  background:linear-gradient(145deg,#8B6CFF 0%,#A86BFF 40%,#F062A8 100%)!important;
  box-shadow:
    0 10px 24px rgba(168,107,255,.38),
    0 2px 0 rgba(255,255,255,.28) inset,
    0 -8px 14px rgba(70,30,120,.22) inset!important;
  transition:transform .18s ease,box-shadow .18s ease;
}
.clay-btn:hover{
  transform:translateY(-2px);
  box-shadow:
    0 14px 32px rgba(168,107,255,.48),
    0 2px 0 rgba(255,255,255,.32) inset,
    0 -8px 14px rgba(70,30,120,.24) inset!important;
  color:#fff!important;text-decoration:none!important;
}
.clay-btn:active{transform:translateY(1px) scale(.985)}

.clay-rounder{border-radius:24px!important}

@media (prefers-reduced-motion:reduce){
  .clay-title,.clay-title--light{
    animation:none!important;
    transform:none;
  }
  .clay-blob,.clay-blob--sm{animation:none!important}
}

/* --- Clay wordmark (nav/footer logo) — bigger + solid crisp Book ---
   Dark/on-dark: cream/white base + solid Book (#8B6CFF)
   Light/white nav: near-black base + solid Book hot (#A86BFF)
   Keep Book in <span>. One line. Full xBookvideo must be legible.
   NEVER filter:drop-shadow / NEVER background-clip:text on logo Book spans
   Marker: clay-logo-crisp-20261027 */
a.logo.clay-logo,
.logo.clay-logo,
a.clay-logo.logo,
a.nav-logo.clay-logo,
.clay-logo-text.clay-logo,
span.clay-logo.clay-logo-text{
  font-size:26px!important;
  font-weight:900;
  letter-spacing:-0.5px;
}
@media (max-width:640px){
  a.logo.clay-logo,
  .logo.clay-logo,
  a.clay-logo.logo,
  a.nav-logo.clay-logo,
  .clay-logo-text.clay-logo,
  span.clay-logo.clay-logo-text{
    font-size:22px!important;
  }
}
a.logo.clay-logo,
.logo.clay-logo,
a.clay-logo.logo{
  display:inline-block;
  position:relative;
  text-decoration:none!important;
  /* solid cream on dark — NO filter */
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:var(--clay-ink-soft)!important;
  color:var(--clay-ink-soft)!important;
  filter:none!important;
  text-shadow:var(--clay-logo-shadow);
  animation:none!important;
  transform:none!important;
}
/* Book span only — solid fill (no gradient clip) */
a.logo.clay-logo span,
.logo.clay-logo span,
a.clay-logo.logo span{
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:var(--clay-book)!important;
  color:var(--clay-book)!important;
  filter:none!important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.65),
    0 2px 4px rgba(108,92,231,.20);
}

/* Light / white page nav — dark ink + solid Book hot */
a.logo.clay-logo.clay-logo--light,
.logo.clay-logo.clay-logo--light{
  background:none!important;
  -webkit-text-fill-color:var(--clay-ink)!important;
  color:var(--clay-ink)!important;
  filter:none!important;
  text-shadow:var(--clay-logo-shadow);
}
a.logo.clay-logo.clay-logo--light span,
.logo.clay-logo.clay-logo--light span{
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:var(--clay-book-hot)!important;
  color:var(--clay-book-hot)!important;
  filter:none!important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.65),
    0 2px 4px rgba(108,92,231,.20);
}

/* Inline wordmark inside BF pill / other wrappers */
.clay-logo-text.clay-logo,
span.clay-logo.clay-logo-text{
  display:inline-block;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:var(--clay-ink-soft)!important;
  color:var(--clay-ink-soft)!important;
  filter:none!important;
  text-shadow:var(--clay-logo-shadow);
  animation:none!important;
}
.clay-logo-text.clay-logo span,
span.clay-logo.clay-logo-text span{
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:var(--clay-book)!important;
  color:var(--clay-book)!important;
  filter:none!important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.65),
    0 2px 4px rgba(108,92,231,.20);
}

/* public-domain .nav-logo variant (light page) */
a.nav-logo.clay-logo{
  display:inline-block;
  text-decoration:none!important;
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:var(--clay-ink)!important;
  color:var(--clay-ink)!important;
  filter:none!important;
  text-shadow:var(--clay-logo-shadow);
  animation:none!important;
}
a.nav-logo.clay-logo span{
  background:none!important;
  -webkit-background-clip:border-box!important;
  background-clip:border-box!important;
  -webkit-text-fill-color:var(--clay-book-hot)!important;
  color:var(--clay-book-hot)!important;
  filter:none!important;
  text-shadow:
    0 1px 0 rgba(255,255,255,.65),
    0 2px 4px rgba(108,92,231,.20);
}

@media (prefers-reduced-motion:reduce){
  a.logo.clay-logo,
  .logo.clay-logo,
  .clay-logo-text.clay-logo,
  a.nav-logo.clay-logo{
    animation:none!important;
    transform:none!important;
  }
}