/* ============================================================
   TaleFin Base Stylesheet
   Font faces, reset, base typography, layout helpers,
   core components (buttons, eyebrow, graphic devices).
   Loads after tokens.css.
   ============================================================ */

/* ---- Fonts (self-hosted from /assets/fonts) ---- */
@font-face {
  font-family: "Garnett";
  src: url("../fonts/Garnett-Medium.woff2") format("woff2"),
       url("../fonts/Garnett-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/DMSans-Regular.woff2") format("woff2"),
       url("../fonts/DMSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { scroll-behavior: smooth; }
/* iOS text-inflation guard, scoped to WebKit so non-WebKit engines don't warn on the prefixed property */
@supports (-webkit-touch-callout: none) { html { -webkit-text-size-adjust: 100%; } }
body {
  font-family: var(--tf-font-body);
  font-size: var(--tf-fs-body);
  line-height: var(--tf-lh-body);
  color: var(--tf-body);
  background: var(--tf-surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--tf-accent); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-left: 1.25rem; }

/* ---- Headings ---- */
h1, h2, h3, h4 {
  font-family: var(--tf-font-head);
  font-weight: 500;
  color: var(--tf-ink);
  line-height: var(--tf-lh-tight);
  letter-spacing: -0.01em;
}
h1 { font-size: var(--tf-fs-h1); }
h2 { font-size: var(--tf-fs-h2); line-height: var(--tf-lh-snug); }
h3 { font-size: var(--tf-fs-h3); line-height: var(--tf-lh-snug); }
p  { max-width: 68ch; }

.tf-display { font-family: var(--tf-font-head); font-weight: 500;
  font-size: var(--tf-fs-display); line-height: var(--tf-lh-tight);
  letter-spacing: -0.02em; color: var(--tf-ink); }
.tf-lead { font-size: var(--tf-fs-lead); color: var(--tf-body); line-height: 1.5; }

/* Eyebrow / section kicker */
.tf-eyebrow {
  font-family: var(--tf-font-body);
  font-size: var(--tf-fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--tf-tracking-eyebrow);
  font-weight: 400;
  color: var(--tf-plum);
  display: inline-block;
  margin-bottom: var(--tf-space-3);
}

/* ---- Layout ---- */
.tf-container { width: 100%; max-width: var(--tf-maxw);
  margin-inline: auto; padding-inline: var(--tf-gutter); }
.tf-narrow { max-width: var(--tf-maxw-narrow); }
.tf-section { padding-block: var(--tf-section-y); }
.tf-section--alt { background: var(--tf-surface-alt); }
.tf-section--plum { background: var(--tf-plum); color: rgba(255,255,255,0.88); }
.tf-section--plum h1, .tf-section--plum h2,
.tf-section--plum h3, .tf-section--plum .tf-display { color: #fff; }
.tf-section--plum .tf-eyebrow { color: var(--tf-green); }

.tf-grid { display: grid; gap: var(--tf-space-8); }
@media (min-width: 760px)  { .tf-grid--2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px)  { .tf-grid--3 { grid-template-columns: repeat(3,1fr); } }
.tf-stack > * + * { margin-top: var(--tf-space-4); }

/* ---- Buttons ---- */
.tf-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--tf-font-body); font-size: 1rem; line-height: 1;
  padding: 0.95rem 1.6rem; border-radius: var(--tf-radius-pill);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: transform var(--tf-dur-fast) var(--tf-ease),
              background var(--tf-dur-fast) var(--tf-ease),
              box-shadow var(--tf-dur-fast) var(--tf-ease);
}
.tf-btn:hover { text-decoration: none; transform: translateY(-2px); }
.tf-btn--primary { background: var(--tf-plum); color: #fff; }
.tf-btn--primary:hover { background: var(--tf-plum-700); box-shadow: var(--tf-shadow); }
.tf-btn--accent { background: var(--tf-blue); color: #fff; }
.tf-btn--accent:hover { background: #007cb8; box-shadow: var(--tf-shadow); }
.tf-btn--ghost { background: transparent; color: var(--tf-plum); border-color: var(--tf-plum); }
.tf-btn--ghost:hover { background: var(--tf-plum); color: #fff; }
.tf-btn--on-plum { background: var(--tf-yellow); color: var(--tf-ink); }
.tf-btn--on-plum:hover { background: #ffe04d; box-shadow: var(--tf-shadow); }

/* ---- Cards ---- */
.tf-card {
  background: var(--tf-surface); border: 1px solid var(--tf-line);
  border-radius: var(--tf-radius); padding: var(--tf-space-8);
  box-shadow: var(--tf-shadow-sm);
  transition: transform var(--tf-dur) var(--tf-ease),
              box-shadow var(--tf-dur) var(--tf-ease);
}
.tf-card:hover { transform: translateY(-4px); box-shadow: var(--tf-shadow); }

/* ---- Focus visibility (a11y) ---- */
:focus-visible { outline: 3px solid var(--tf-focus-ring); outline-offset: 2px; border-radius: 4px; }

/* ---- Logo lockup helpers ---- */
.tf-logo { height: 34px; width: auto; }
.tf-logo-clearspace { padding: var(--tf-logo-clearspace); }

/* ---- Graphic device colour helpers (brand shapes) ---- */
.tf-shape-blue   { color: var(--tf-blue); }
.tf-shape-green  { color: var(--tf-green); }
.tf-shape-peach  { color: var(--tf-peach); }
.tf-shape-violet { color: var(--tf-violet); }
.tf-shape-yellow { color: var(--tf-yellow); }
.tf-shape-plum   { color: var(--tf-plum); }

/* ---- Simple reveal-on-scroll animation hook ----
   Add class .tf-reveal to an element; JS toggles .is-in.
   Falls back gracefully (visible) if JS/animation disabled. */
/* Hidden state applies ONLY when JS has armed animation (html.tf-anim).
   If the script does not run, content stays fully visible. */
.tf-anim .tf-reveal { opacity: 0; transform: translateY(18px);
  transition: opacity var(--tf-dur-slow) var(--tf-ease),
              transform var(--tf-dur-slow) var(--tf-ease); }
.tf-anim .tf-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tf-reveal { opacity: 1; transform: none; }
}

/* ---- Utility ---- */
.tf-text-center { text-align: center; }
.tf-mx-auto { margin-inline: auto; }
.tf-mt-6 { margin-top: var(--tf-space-6); }
.tf-mt-8 { margin-top: var(--tf-space-8); }
.tf-sr-only { position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ============================================================
   Animation layer (Phase 7) — engaging but tasteful.
   All continuous motion is disabled under prefers-reduced-motion.
   ============================================================ */

/* Staggered reveal delay (set by reveal.js via --tf-rd) */
.tf-reveal { transition-delay: var(--tf-rd, 0ms); }

/* Directional reveal variants */
.tf-reveal--left  { transform: translateX(-26px); }
.tf-reveal--right { transform: translateX(26px); }
.tf-reveal--scale { transform: scale(0.94); }
.tf-reveal--left.is-in, .tf-reveal--right.is-in, .tf-reveal--scale.is-in { transform: none; }

/* The TaleFin "data line": as you scroll, a solid plum line draws across the
   header's bottom edge — turning the resting grey border plum from left to
   right — with a blue dot travelling at the leading edge. */
.tf-dataline { position: absolute; left: 0; right: 0; bottom: -1px; width: 100%; height: 13px; pointer-events: none; overflow: visible; }
.tf-dataline path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.tf-dataline__ln  { stroke: var(--tf-plum); transition: stroke-dashoffset 80ms linear; }
.tf-dataline__node { transition: opacity 200ms ease; }

/* Subtle drifting gradient behind hero sections */
.hm-hero, .pg-hero, .legal-hero {
  background-size: 180% 180%;
  animation: tfDrift 18s ease-in-out infinite;
}
@keyframes tfDrift {
  0%, 100% { background-position: 88% 0%; }
  50%      { background-position: 60% 30%; }
}

/* Gentle continuous float for brand shapes already uses .hm-float */
@keyframes tfFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.hm-float { animation: tfFloat 6s ease-in-out infinite; }
.hm-float--slow { animation-duration: 9s; }

@media (prefers-reduced-motion: reduce) {
  .hm-hero, .pg-hero, .legal-hero { animation: none; }
  .hm-float { animation: none; }
}