/* PONS CAPITAL theme.
 *
 * Palette from the brand sheet: near-black teal ground, deep green fills,
 * gold type, one red accent. Green is "up", red is "down" - the same reading
 * the market tiles on the sheet use - so positive carry is green and a
 * negative one is red, never the other way round.
 */

@font-face {
  font-family: 'Hedvig Letters Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/hedvig-letters-serif-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/instrument-sans-latin.woff2) format('woff2');
}
@font-face {
  font-family: 'Fragment Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/fragment-mono-latin.woff2) format('woff2');
}

:root {
  --bg: #071011;
  --card: #0f2325;
  --fg: #efe0c2;
  --fg-muted: #a8946e;
  --accent: #123f39;
  --accent-hover: #1a5249;
  --hot: #e8552f;
  --hot-hover: #f0663f;
  --hot-deep: #c93f1c;
  --up: #6fbf93;
  --dark: #020607;
  --dark-soft: #0b1a1c;
  --tan: #e4bd87;
  --tan-soft: #e4bd8724;
  --on-accent: #f3e7cc;
  --border: #e4bd8726;
  --border-dark: #e4bd8733;

  --font-sans: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-serif: 'Hedvig Letters Serif', Georgia, 'Times New Roman', serif;
  --font-mono: 'Fragment Mono', ui-monospace, Menlo, Consolas, monospace;

  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
}

::selection {
  background: var(--tan);
  color: var(--dark);
}

.font-serif-display {
  font-family: var(--font-serif);
  font-weight: 400;
}
.italic-serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
}

/* Tokens the reference utilities do not know about. Same escaping rules. */
.text-\[var\(--hot\)\] { color: var(--hot); }
.text-\[var\(--up\)\] { color: var(--up); }
.text-\[var\(--on-accent\)\] { color: var(--on-accent); }
.bg-\[var\(--hot\)\] { background-color: var(--hot); }
.text-\[\#fff7ea\] { color: #fff7ea; }
@media (hover: hover) {
  .hover\:bg-\[var\(--hot-hover\)\]:hover { background-color: var(--hot-hover); }
  .hover\:text-\[var\(--on-accent\)\]:hover { color: var(--on-accent); }
}

/* On a dark ground a cream drop shadow is invisible; a deep one grounds the art. */
.drop-shadow-\[0_24px_48px_rgba\(20\,20\,15\,0\.14\)\] {
  --tw-drop-shadow-size: drop-shadow(0 28px 48px rgba(0, 0, 0, 0.6));
  --tw-drop-shadow: var(--tw-drop-shadow-size);
}

/* Wordmark: "ponscapital" in the type colour, ".market" in the accent. */
.wordmark .tld { color: var(--hot); }

/* ---- motion: reveal on scroll (the reference staggers children in) ---- */
[data-reveal] { opacity: 0; transform: translateY(var(--reveal-y, 18px)); }
[data-reveal].is-in { opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
[data-reveal="stagger"] > * { opacity: 0; transform: translateY(var(--reveal-y, 18px)); }
[data-reveal="stagger"].is-in > * { opacity: 1; transform: none; transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); transition-delay: calc(var(--i, 0) * 70ms); }
[data-reveal="stagger"] { opacity: 1; transform: none; }
[data-parallax] { will-change: transform; }

/* ---- boot screen ---- */
#boot { transition: opacity 0.5s ease-in-out; }
#boot .boot-logo { opacity: 0; transform: scale(0.8) rotate(-6deg); }
#boot .boot-word { opacity: 0; transform: translateY(10px); }
#boot .boot-track { opacity: 0; }
#boot .boot-bar { transform: scaleX(0); transform-origin: left; }
#boot.play .boot-logo { animation: boot-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; }
#boot.play .boot-word { animation: boot-rise 0.4s ease-out 0.3s forwards; }
#boot.play .boot-track { animation: boot-fade 0.25s linear 0.6s forwards; }
#boot.play .boot-bar { animation: boot-fill 0.65s ease-in-out 0.7s forwards; }
@keyframes boot-pop { to { opacity: 1; transform: scale(1) rotate(0deg); } }
@keyframes boot-rise { to { opacity: 1; transform: none; } }
@keyframes boot-fade { to { opacity: 1; } }
@keyframes boot-fill { to { transform: scaleX(1); } }
body.booting { overflow: hidden; }

/* ---- hero ticker word ---- */
.ticker-word { display: inline-block; }
.ticker-word.swap { animation: ticker-in 0.55s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes ticker-in { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---- chart bars ---- */
.bar { transform-origin: bottom; transform: scaleY(0); }
.bar.grow { animation: bar-grow 0.55s cubic-bezier(0.34, 1.6, 0.64, 1) forwards; animation-delay: calc(var(--i, 0) * 35ms); }
.bar.regrow { animation: bar-grow 0.4s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: calc(var(--i, 0) * 18ms); }
@keyframes bar-grow { to { transform: scaleY(1); } }

/* ---- $PCM chip ---- */
.pcm-chip { display: inline-flex; align-items: center; gap: 0.5rem; }
.pcm-chip code { font-family: var(--font-mono); font-size: 0.75rem; }

/* Range input on dark */
input[type='range'] { height: 4px; }

/* Reduced motion: everything appears in place. */
@media (prefers-reduced-motion: reduce) {
  [data-reveal], [data-reveal="stagger"] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .bar { transform: none !important; animation: none !important; }
  .ticker-word.swap { animation: none; }
  html { scroll-behavior: auto; }
}

/* Utilities the reference build did not emit but this page uses. */
.h-6 { height: calc(var(--spacing) * 6); }
.w-6 { width: calc(var(--spacing) * 6); }
.h-\[70\%\] { height: 70%; }
.w-\[70\%\] { width: 70%; }
.px-2 { padding-inline: calc(var(--spacing) * 2); }
.mt-3 { margin-top: calc(var(--spacing) * 3); }
@media (hover: hover) {
  .hover\:bg-\[var\(--on-accent\)\]:hover { background-color: var(--on-accent); }
}

/* At phone width the serif "infrastructure" no longer fits at 3rem; step it down so the page never scrolls sideways. */
@media (max-width: 420px) {
  h1.font-serif-display { font-size: 2.55rem; }
}

/* ---- the Greek layer: engraving line-art in gold, always behind content ---- */
.greek-portico { position: relative; }
.greek-portico .portico { position: absolute; left: 50%; top: 50%; height: 106%; width: auto; max-width: none; transform: translate(-50%, -50%); opacity: 0.55; pointer-events: none; }
.greek-portico > img:not(.portico) { position: relative; }
.greek-strip { height: 24px; background: url(../img/greek/meander.svg) repeat-x left top; background-size: 24px 24px; opacity: 0.38; margin-bottom: 2.25rem; max-width: 22rem; }
.pillar { display: none; position: absolute; bottom: 0; width: 150px; height: 100%; object-fit: contain; object-position: bottom; opacity: 0.32; pointer-events: none; }
.pillar-l { left: 24px; }
.pillar-r { right: 24px; }
@media (min-width: 1440px) { .pillar { display: block; } }
@media (min-width: 1700px) { .pillar { width: 190px; } .pillar-l { left: 40px; } .pillar-r { right: 40px; } }
.facade { position: absolute; left: 50%; bottom: 0; width: min(1500px, 100%); transform: translateX(-50%); opacity: 0.13; pointer-events: none; }
.tier-logo { display: inline-block; width: 16px; height: 16px; padding: 2px; margin-right: 6px; border-radius: 4px; background: #f3e7cc; vertical-align: -3px; object-fit: contain; }