/* TLC design tokens — ported from the Next.js globals.css.
   Prefixed (--tlc-*) so they never collide with the active theme. */

:root {
  --tlc-ink:        #0a1422;
  --tlc-navy:       #122036;
  --tlc-navy-light: #1c2e4c;
  --tlc-brass:      #c8a24a;
  --tlc-brass-soft: #e6cd86;
  --tlc-ivory:      #f4efe2;
  --tlc-fog:        #8c98ad;
  --tlc-ember:      #8c3b2e;

  --tlc-font-display: "Marcellus", Georgia, "Times New Roman", serif;
  --tlc-font-body:    "Marcellus", Georgia, "Times New Roman", serif;
  --tlc-font-mono:    "IBM Plex Mono", ui-monospace, monospace;
}

/* Shared keyframes (used across widgets). */
@keyframes tlc-tide   { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes tlc-drift  { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes tlc-marquee{ 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }
@keyframes tlc-ember-rise {
  0%   { transform: translateY(0)     translateX(0);    opacity: 0;    }
  7%   {                                                opacity: 0.28; }
  48%  { transform: translateY(-52px) translateX(6px);  opacity: 0.13; }
  90%  {                                                opacity: 0.04; }
  100% { transform: translateY(-95px) translateX(-4px); opacity: 0;    }
}

/* Entrance reveal used by JS-driven sections. */
@keyframes tlc-rise {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* All TLC widgets render on the dark brand palette and brand serif. */
.tlc-root {
  font-family: var(--tlc-font-body);
  line-height: 1.6;
  color: var(--tlc-ivory);
}
.tlc-root *,
.tlc-root *::before,
.tlc-root *::after { box-sizing: border-box; }

.tlc-root ::selection { background: var(--tlc-brass); color: var(--tlc-ink); }

/* body scroll-lock used by drawer + modal widgets */
body.tlc-no-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .tlc-root *,
  .tlc-root *::before,
  .tlc-root *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- shared brass-sweep buttons (used by most sections) ---- */
.tlc-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 9999px;
  padding: 0.875rem 1.75rem;
  font-family: var(--tlc-font-body);
  font-size: 0.875rem;
  text-decoration: none;
  cursor: pointer;
  border: 0 solid transparent;
}
.tlc-btn__sweep {
  position: absolute;
  inset: 0;
  transform: translateX(-105%);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.tlc-btn:hover .tlc-btn__sweep { transform: translateX(0); }
.tlc-btn__label { position: relative; z-index: 10; transition: color 0.3s ease; }

.tlc-btn--primary { background: var(--tlc-brass); color: var(--tlc-ink); font-weight: 600; }
.tlc-btn--primary .tlc-btn__sweep { background: var(--tlc-brass-soft); }

.tlc-btn--ghost {
  border: 1px solid color-mix(in srgb, var(--tlc-brass) 50%, transparent);
  color: var(--tlc-ivory);
  font-weight: 500;
}
.tlc-btn--ghost .tlc-btn__sweep { background: color-mix(in srgb, var(--tlc-brass) 10%, transparent); }
.tlc-btn--ghost:hover .tlc-btn__label { color: var(--tlc-brass-soft); }

.tlc-btn--sm { padding: 0.75rem 1.75rem; }
.tlc-btn--xs { padding: 0.625rem 1.25rem; }

/* ---- shared on-scroll reveal (replaces framer whileInView) ---- */
.tlc-anim { opacity: 0; }
.tlc-anim.is-in {
  animation: tlc-rise 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
  animation-delay: var(--d, 0s);
}

/* ---- shared section spotlight (replaces effects/section-spotlight.tsx) ---- */
.tlc-spotlight {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    var(--sp-size, 560px) circle at var(--mx, -9999px) var(--my, -9999px),
    rgba(200, 162, 74, var(--sp-op, 0.08)),
    transparent 65%
  );
}

/* shared eyebrow / section heading helpers */
.tlc-eyebrow {
  font-family: var(--tlc-font-mono);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.35em;
  color: var(--tlc-brass-soft);
  margin: 0;
}