/* CCS Seal Breath — dark Sanctuary midnight wax-press crest hero (live home)
   Stamp 1790235177. Recolor from cream page wash → midnight navy/violet.
   Scoped to .ccs-seal-breath / wrap only. Soft-demote foyer kept. Payments untouched.
   Cream #fff8ee is TEXT accent only — never a white page wash. */
#ccs-seal-breath {
  --void: #06040e;
  --midnight: #0a1128;
  --midnight-lift: #121a36;
  --cream: #fff8ee;
  --cream-soft: rgba(255, 248, 238, 0.78);
  --cream-faint: rgba(255, 248, 238, 0.48);
  --seal-gold: #c5a059;
  --seal-gold-bright: #e8c878;
  --seal-gold-soft: rgba(197, 160, 89, 0.4);
  --honey: #e8b84a;
  --flame: #ffb34a;
  --flame-core: #fff6d8;
  --flame-halo: rgba(180, 90, 200, 0.32);
  --hairline: color-mix(in srgb, var(--seal-gold) 45%, transparent);
  --font-seal: "Cinzel", "Cormorant Garamond", Georgia, serif;
  --tracking-seal: 0.18em;
  --motion-seal: 3.2s;
  --motion-glint: 5.2s;
  --ease-seal: cubic-bezier(0.22, 1, 0.36, 1);

  position: relative;
  max-width: 720px;
  margin: 0 auto;
  padding: clamp(2rem, 6vw, 4.5rem) 1.25rem 2.25rem;
  text-align: center;
  isolation: isolate;
  color: var(--cream);
  font-family: Manrope, "Source Sans 3", system-ui, sans-serif;
  font-weight: 300;
  letter-spacing: -0.01em;
  line-height: 1.45;
  box-sizing: border-box;
  width: 100%;
  border-bottom: 1px solid transparent;
  background-color: var(--midnight);
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 38%, rgba(90, 40, 140, 0.42), transparent 68%),
    radial-gradient(ellipse 90% 70% at 18% 8%, rgba(120, 60, 180, 0.22), transparent 58%),
    radial-gradient(ellipse 80% 55% at 88% 88%, rgba(180, 70, 130, 0.16), transparent 52%),
    linear-gradient(180deg, #0c1430 0%, var(--midnight) 40%, #0c0a1a 75%, var(--void) 100%),
    linear-gradient(90deg, transparent, var(--hairline), transparent);
  background-origin: border-box;
  background-clip: padding-box, padding-box, padding-box, padding-box, border-box;
}
#ccs-seal-breath *, #ccs-seal-breath *::before, #ccs-seal-breath *::after { box-sizing: border-box; }

/* Full-bleed midnight band behind the constrained hero */
.ccs-seal-breath-wrap {
  width: 100%;
  max-width: none !important;
  margin: 0;
  padding: 0;
  background-color: #0a1128;
  background-image:
    radial-gradient(ellipse 65% 50% at 50% 36%, rgba(90, 40, 140, 0.38), transparent 70%),
    radial-gradient(ellipse 100% 80% at 50% 0%, #121a36 0%, #0a1128 45%, #06040e 100%);
  position: relative;
  z-index: 5;
}

#ccs-seal-breath .ccs-sb-smoke {
  position: absolute; inset: -10% -22% 18%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 42% at 50% 38%, rgba(197,160,89,0.22), transparent 72%),
    radial-gradient(ellipse 40% 30% at 28% 52%, rgba(160,80,200,0.14), transparent 68%),
    radial-gradient(ellipse 40% 30% at 72% 54%, rgba(120,60,180,0.12), transparent 68%);
  opacity: 0; filter: blur(3px);
  animation: ccs-sb-smoke-in var(--motion-seal) var(--ease-seal) 0.1s forwards;
}
@keyframes ccs-sb-smoke-in {
  0%   { opacity: 0; transform: scale(0.9); }
  35%  { opacity: 1; }
  100% { opacity: 0.85; transform: scale(1); }
}

#ccs-seal-breath .ccs-sb-press {
  position: relative; z-index: 1; width: min(68vw, 300px); margin: 0 auto 1.75rem;
  aspect-ratio: 1; border-radius: 50%; padding: 0.4rem;
  background:
    radial-gradient(circle at 50% 38%, rgba(255,246,216,0.14), transparent 58%),
    radial-gradient(circle at 50% 50%, #121a36 0%, #080c1c 100%);
  box-shadow:
    0 0 0 1px var(--hairline),
    0 0 40px rgba(197,160,89,0.18),
    0 24px 56px rgba(0,0,0,0.45),
    inset 0 1px 0 rgba(255,220,255,0.12);
  opacity: 0; transform: scale(0.84) translateY(16px);
  animation: ccs-sb-wax-press 2.6s var(--ease-seal) 0.45s forwards;
}
@keyframes ccs-sb-wax-press {
  0%   { opacity: 0; transform: scale(0.84) translateY(16px); filter: blur(8px); }
  50%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: blur(0); }
}
#ccs-seal-breath .ccs-sb-press img {
  display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 50%;
}

#ccs-seal-breath .ccs-sb-glints {
  position: absolute; inset: 7%; z-index: 2; pointer-events: none; border-radius: 50%;
}
#ccs-seal-breath .ccs-sb-glint {
  position: absolute; width: 4px; height: 4px; border-radius: 50%;
  background: radial-gradient(circle, var(--flame-core) 0%, var(--seal-gold-bright) 42%, transparent 78%);
  box-shadow: 0 0 8px 1.5px var(--seal-gold-soft);
  opacity: 0;
  animation: ccs-sb-node-glint var(--motion-glint) ease-in-out infinite;
}
#ccs-seal-breath .ccs-sb-glint:nth-child(1) { top: 14%; left: 49%; animation-delay: 1.6s; }
#ccs-seal-breath .ccs-sb-glint:nth-child(2) { top: 36%; left: 24%; animation-delay: 2.3s; }
#ccs-seal-breath .ccs-sb-glint:nth-child(3) { top: 36%; right: 24%; left: auto; animation-delay: 2.9s; }
#ccs-seal-breath .ccs-sb-glint:nth-child(4) { top: 56%; left: 34%; animation-delay: 3.5s; width: 3.5px; height: 3.5px; }
#ccs-seal-breath .ccs-sb-glint:nth-child(5) { top: 56%; right: 34%; left: auto; animation-delay: 4.0s; width: 3.5px; height: 3.5px; }
#ccs-seal-breath .ccs-sb-glint.apex {
  top: 3.5%; left: 50%; transform: translateX(-50%);
  width: 6px; height: 6px;
  background: radial-gradient(circle, var(--flame-core) 0%, var(--flame) 48%, transparent 78%);
  box-shadow: 0 0 12px 2px rgba(255,179,74,0.45), 0 0 18px 3px var(--flame-halo);
  animation-name: ccs-sb-apex-glint;
  animation-delay: 1.2s;
}
@keyframes ccs-sb-node-glint {
  0%, 100% { opacity: 0; transform: scale(0.55); }
  30%      { opacity: 0.92; transform: scale(1.12); }
  55%      { opacity: 0.32; transform: scale(0.88); }
}
@keyframes ccs-sb-apex-glint {
  0%, 100% { opacity: 0; transform: translateX(-50%) scale(0.55); }
  30%      { opacity: 0.98; transform: translateX(-50%) scale(1.15); }
  55%      { opacity: 0.42; transform: translateX(-50%) scale(0.9); }
}

#ccs-seal-breath .ccs-sb-lockup {
  position: relative; z-index: 1; opacity: 0;
  animation: ccs-sb-lockup-in 1.7s var(--ease-seal) 1.55s forwards;
}
@keyframes ccs-sb-lockup-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
#ccs-seal-breath .ccs-sb-line1,
#ccs-seal-breath .ccs-sb-line2 {
  font-family: var(--font-seal); font-weight: 600;
  letter-spacing: var(--tracking-seal); text-transform: uppercase;
  color: var(--cream); margin: 0;
  text-shadow: 0 1px 18px rgba(0,0,0,0.35);
}
#ccs-seal-breath .ccs-sb-line1 { font-size: clamp(1.2rem, 3.4vw, 1.65rem); }
#ccs-seal-breath .ccs-sb-diamond {
  display: block; margin: 0.55rem auto; width: 0.5rem; height: 0.5rem;
  background: var(--seal-gold); transform: rotate(45deg);
  box-shadow: 0 0 0 1px var(--seal-gold-soft), 0 0 12px rgba(197,160,89,0.45);
}
#ccs-seal-breath .ccs-sb-line2 {
  font-size: clamp(0.95rem, 2.5vw, 1.2rem); font-weight: 400;
  letter-spacing: 0.22em; color: var(--cream-soft);
}
#ccs-seal-breath .ccs-sb-lede {
  position: relative; z-index: 1; max-width: 26rem; margin: 1.35rem auto 0;
  font-size: 1.02rem; color: var(--cream-soft); opacity: 0;
  animation: ccs-sb-lockup-in 1.4s var(--ease-seal) 2.05s forwards;
}
#ccs-seal-breath .ccs-sb-cta {
  position: relative; z-index: 1; display: flex; justify-content: center;
  gap: 0.75rem; flex-wrap: wrap; margin-top: 1.75rem; opacity: 0;
  animation: ccs-sb-lockup-in 1.2s var(--ease-seal) 2.4s forwards;
}
#ccs-seal-breath .ccs-sb-cta a {
  text-decoration: none; font-size: 0.9rem; font-weight: 500;
  padding: 0.75rem 1.4rem; border-radius: 999px;
}
#ccs-seal-breath .ccs-sb-cta a.primary {
  background: linear-gradient(135deg, #ffe566, var(--honey));
  color: #1a140e;
  border: 1px solid rgba(197,160,89,0.55);
  box-shadow: 0 0 22px rgba(232,184,74,0.28);
}
#ccs-seal-breath .ccs-sb-cta a.ghost {
  background: rgba(255,248,238,0.06);
  color: var(--cream);
  border: 1px solid rgba(255,248,238,0.32);
}
#ccs-seal-breath .ccs-sb-cta a:focus-visible {
  outline: 2px solid var(--seal-gold); outline-offset: 3px;
}

#ccs-seal-breath .ccs-sb-toolbar {
  position: relative; z-index: 2;
  display: flex; justify-content: flex-end; gap: 0.5rem; flex-wrap: wrap;
  margin: 0 0 0.5rem; padding: 0;
}
#ccs-seal-breath .ccs-sb-chip {
  font: inherit; font-size: 0.78rem; font-weight: 500;
  padding: 0.4rem 0.8rem; border-radius: 999px;
  border: 1px solid rgba(255,248,238,0.28);
  background: rgba(18,26,54,0.72);
  color: var(--cream);
  cursor: pointer;
}
#ccs-seal-breath .ccs-sb-chip[aria-pressed="true"] {
  background: linear-gradient(135deg, #ffe566, var(--honey));
  color: #1a140e;
  border-color: var(--seal-gold-soft);
}
#ccs-seal-breath .ccs-sb-chip:focus-visible { outline: 2px solid var(--seal-gold); outline-offset: 3px; }

/* Soft-demote foyer double-crest */
body.home #ms-gate .ccs-hero-media,
body.page-id-62 #ms-gate .ccs-hero-media,
body.home #ms-gate .brand,
body.page-id-62 #ms-gate .brand {
  display: none !important;
}
body.home #ms-gate .ccs-hero,
body.page-id-62 #ms-gate .ccs-hero {
  background: transparent;
}
body.home #ms-gate .ccs-hero-side,
body.page-id-62 #ms-gate .ccs-hero-side {
  display: none !important;
}

/* Calm / reduced motion — static crest instant */
html.calm-mode #ccs-seal-breath .ccs-sb-smoke,
body.calm #ccs-seal-breath .ccs-sb-smoke { animation: none !important; opacity: 0 !important; }
html.calm-mode #ccs-seal-breath .ccs-sb-glint,
body.calm #ccs-seal-breath .ccs-sb-glint { animation: none !important; opacity: 0 !important; }
html.calm-mode #ccs-seal-breath .ccs-sb-glint.apex,
body.calm #ccs-seal-breath .ccs-sb-glint.apex {
  opacity: 0.5 !important; animation: none !important; transform: translateX(-50%) !important;
}
html.calm-mode #ccs-seal-breath .ccs-sb-press,
html.calm-mode #ccs-seal-breath .ccs-sb-lockup,
html.calm-mode #ccs-seal-breath .ccs-sb-lede,
html.calm-mode #ccs-seal-breath .ccs-sb-cta,
body.calm #ccs-seal-breath .ccs-sb-press,
body.calm #ccs-seal-breath .ccs-sb-lockup,
body.calm #ccs-seal-breath .ccs-sb-lede,
body.calm #ccs-seal-breath .ccs-sb-cta {
  animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
}

@media (prefers-reduced-motion: reduce) {
  #ccs-seal-breath .ccs-sb-smoke,
  #ccs-seal-breath .ccs-sb-glint { animation: none !important; opacity: 0 !important; }
  #ccs-seal-breath .ccs-sb-glint.apex { opacity: 0.5 !important; transform: translateX(-50%) !important; }
  #ccs-seal-breath .ccs-sb-press,
  #ccs-seal-breath .ccs-sb-lockup,
  #ccs-seal-breath .ccs-sb-lede,
  #ccs-seal-breath .ccs-sb-cta {
    animation: none !important; opacity: 1 !important; transform: none !important; filter: none !important;
  }
}