/* cd.css — Clapham Digital storefront specifics.
   Kept OUT of the shared estate CSS (tokens.css / site.css) so nothing here
   touches phillipclapham.com. Two jobs: spacing fixes, and the kintsugi hero. */

/* --- Breathing room between an intro paragraph and the list/grid under it --- */
#about .prose,
#contact .prose {
  margin-bottom: var(--s-8);
}

/* ============================================================
   Kintsugi hero flourish
   The person's hero is a cognitive pulse. The company's is a
   mend: gold seams draw themselves in, a bloom settles where
   they converge, and a glint travels the main break — the
   break becoming the design. Same estate, different soul.
   ============================================================ */
.cd-hero-band {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  display: flex;
  align-items: center;
}
.cd-hero-band > .wrap {
  position: relative;
  z-index: 1;
  width: 100%;
}
.kintsugi-field {
  position: absolute;
  top: 50%;
  right: 1%;
  transform: translateY(-50%);
  width: min(52%, 680px);
  aspect-ratio: 1 / 1;
  max-height: 94%;
  pointer-events: none;
  z-index: 0;
}
.kintsugi {
  width: 100%;
  height: 100%;
  overflow: visible;
}

.kintsugi .seam {
  fill: none;
  stroke: url(#kintsugi-gold);
  stroke-width: 4.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(244, 231, 180, 0.5))
    drop-shadow(0 0 16px rgba(201, 169, 97, 0.45));
  stroke-dasharray: var(--len, 1600);
  stroke-dashoffset: var(--len, 1600);
  animation: kintsugi-draw 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: var(--d, 0s);
}
.kintsugi .seam--fine {
  stroke-width: 2.4;
  opacity: 0.9;
}

/* the bright glint that travels the main seam once it's drawn */
.kintsugi .glint {
  fill: none;
  stroke: #f4e9c6;
  stroke-width: 3;
  stroke-linecap: round;
  filter: drop-shadow(0 0 8px rgba(244, 233, 198, 0.95));
  stroke-dasharray: 30 900;
  stroke-dashoffset: 930;
  opacity: 0;
  animation: kintsugi-glint 5.5s linear 3.2s infinite;
}

/* the soft bloom where the seams converge */
.kintsugi .bloom {
  fill: url(#kintsugi-bloom);
  opacity: 0;
  transform-origin: center;
  animation: kintsugi-bloom 2.6s ease-out 1.5s forwards;
}

@keyframes kintsugi-draw {
  to { stroke-dashoffset: 0; }
}
@keyframes kintsugi-bloom {
  to { opacity: 0.44; }
}
@keyframes kintsugi-glint {
  0%   { stroke-dashoffset: 930; opacity: 0; }
  6%   { opacity: 1; }
  58%  { opacity: 1; }
  74%  { stroke-dashoffset: 0; opacity: 0; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* Founder-mode "down" / reduced motion: show the finished mend, no motion */
.motion-off .kintsugi .seam {
  animation: none;
  stroke-dashoffset: 0;
}
.motion-off .kintsugi .glint { display: none; }
.motion-off .kintsugi .bloom { animation: none; opacity: 0.4; }

/* On narrow screens the seams recede to a faint watermark behind the text */
@media (max-width: 860px) {
  .kintsugi-field {
    width: 116%;
    right: -30%;
    opacity: 0.2;
  }
}

/* Footer without the Life canvas: let the bar flow so the footer has height
   (the estate footer-bar is absolutely positioned against the canvas). */
.cd-footer .footer-bar {
  position: static;
  padding-right: var(--s-6);
}

/* App-store badges on the app-detail pages */
.store-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-6);
}
.store-badges a { display: inline-flex; }
.store-badges img {
  height: 42px;
  width: auto;
  display: block;
}

/* Light mode: INVERT the dark-mode relationship. Dark mode is a white-gold
   crack with a near-white gleam (gleam LIGHTER than the crack); light mode is a
   near-black crack with a black gleam (gleam DARKER than the crack) — the same
   effect, reversed for the light background. */
:root:not([data-theme="dark"]) #kintsugi-gold stop:nth-of-type(1) { stop-color: #14110c; }
:root:not([data-theme="dark"]) #kintsugi-gold stop:nth-of-type(2) { stop-color: #201b13; }
:root:not([data-theme="dark"]) #kintsugi-gold stop:nth-of-type(3) { stop-color: #2c251b; }
:root:not([data-theme="dark"]) .kintsugi .seam {
  filter: drop-shadow(0 0 4px rgba(18, 14, 8, 0.28));
}
:root:not([data-theme="dark"]) .kintsugi .glint {
  stroke: #000;
  stroke-width: 3;
  filter: drop-shadow(0 0 9px rgba(0, 0, 0, 0.75));
}
:root:not([data-theme="dark"]) .kintsugi .bloom {
  animation: none;
  opacity: 0;
}