/* Trade Like Shrimp — premium minimal design layer, shared by the landing page and the Daily Analysis.
   Loads after shared/css/tls-tokens.css, tls-base.css and css/site.css and only overrides/extends them,
   so the app (app.tradelikeshrimp.com) is untouched. Motion: transform, opacity, filter, clip-path only. */

/* ---------- fonts (self-hosted, latin subset) ---------- */
@font-face { font-family: "Inter"; src: url("/fonts/inter-var.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: optional; }
@font-face { font-family: "Instrument Serif"; src: url("/fonts/instrument-serif-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: optional; }
/* metric-matched fallbacks: no layout jump while the web fonts load */
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Serif Fallback"; src: local("Georgia"); size-adjust: 92%; font-style: italic; }

:root {
  --font: "Inter", "Inter Fallback", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif: "Instrument Serif", "Serif Fallback", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --bg: #0D0F12;
  --card: #121519;
  --card-line: rgba(255, 255, 255, .08);
  --r-card: 16px;
  --ease-precise: cubic-bezier(.16, 1, .3, 1);      /* settles like a mechanism */
  --ease-mask: cubic-bezier(.65, 0, .1, 1);
  --t-in: 900ms;
  --tick: rgba(230, 194, 122, .9);
  --nav-h: 64px;
  --ticker-h: 0px;
}
html { background: var(--bg); }
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }
body { font-family: var(--font); font-feature-settings: "cv11", "ss01"; letter-spacing: -.003em; }
::selection { background: rgba(212, 168, 75, .3); }

/* ---------- type ---------- */
h1, h2, h3 { font-weight: 600; letter-spacing: -.025em; }
h1 { font-size: clamp(2.6rem, 1.2rem + 5.2vw, 5.4rem); line-height: 1.02; }
h2 { font-size: clamp(2rem, 1.1rem + 3.4vw, 3.6rem); line-height: 1.04; }
h1 em, h2 em, h3 em, .serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--gold-hi); }
.mono, .num, time, .tagchip { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.sub { color: #9AA0AA; }

/* ---------- canvas: faint dot grid fading to the edges, drifting at 0.3x on desktop ---------- */
.dotgrid { position: fixed; inset: -48px 0; z-index: -1; pointer-events: none; opacity: .9;
  background-image: radial-gradient(rgba(255, 255, 255, .055) 1px, transparent 1.2px); background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 30%, transparent 85%);
          mask-image: radial-gradient(ellipse 75% 65% at 50% 40%, #000 30%, transparent 85%);
  will-change: transform; }
body { background: transparent; }
body::before { content: ""; position: fixed; inset: 0; z-index: -2; background: var(--bg); }

/* ---------- section header: tag chip → headline with one italic word → grey sub-line ---------- */
.tagchip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 18px; padding: 6px 11px 6px 9px; border-radius: 7px;
  border: 1px solid rgba(255, 255, 255, .09); background: rgba(255, 255, 255, .025); color: #C9CDD3; font-size: 12px; letter-spacing: .01em; line-height: 1.2; }
.tagchip::before { content: ""; width: 6px; height: 6px; border-radius: 1.5px; background: var(--gold); box-shadow: 0 0 10px rgba(212, 168, 75, .7); flex: none; }
.tagchip span { color: #9399A3; }
.head { margin-bottom: clamp(32px, 22px + 2.4vw, 56px); }
.head h2 + .sub { margin-top: 16px; }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--card-line); border-radius: var(--r-card);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045); transition: transform 380ms var(--ease-precise), border-color 380ms var(--ease-precise); }
@media (hover: hover) and (pointer: fine) {
  .card:hover { border-color: rgba(212, 168, 75, .3); transform: translate3d(0, -2px, 0); }
  /* cursor-follow highlight (js/motion.js sets --mx/--my) */
  .card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity 300ms;
    background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(212, 168, 75, .07), transparent 45%); }
  .card:hover::after { opacity: 1; }
  .card { position: relative; }
}

/* ---------- pill buttons ---------- */
.btn.pill { border-radius: 999px; }
.btn.gold { background: var(--gold); color: #14110A; font-weight: 600; overflow: hidden; isolation: isolate; }
/* a gold shine sweeps across primary buttons on hover and once when they come into view */
.btn.gold::after { content: ""; position: absolute; inset: -20% auto -20% -40%; width: 34%; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: translateX(-120%) skewX(-18deg); }
@media (hover: hover) { .btn.gold:hover::after { transition: transform 900ms var(--ease-precise); transform: translateX(480%) skewX(-18deg); } }
.btn.gold.shine::after { animation: btnShine 1100ms var(--ease-precise) 200ms both; }
@keyframes btnShine { to { transform: translateX(480%) skewX(-18deg); } }
.btn.dark { background: #15181D; border: 1px solid rgba(255, 255, 255, .12); color: var(--fg); }
.btn.dark svg { width: 14px; height: 14px; fill: var(--gold); flex: none; }
.btn.outline { border-color: rgba(255, 255, 255, .14); color: var(--fg); background: rgba(13, 15, 18, .4); }
.btn.outline:hover { border-color: rgba(212, 168, 75, .5); }
/* "price tick": a quick gold underline flash on CTAs and stat chips as they arrive */
.ticked { position: relative; }
.ticked::before { content: ""; position: absolute; left: 14%; right: 14%; bottom: -6px; height: 1px; background: var(--tick);
  transform: scaleX(0); opacity: 0; pointer-events: none; }
.ticked.ptick::before { animation: tick 900ms var(--ease-precise) both; }
@keyframes tick { 0% { transform: scaleX(0); opacity: 1; } 60% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }

/* ---------- nav: hides on scroll down, returns on scroll up, glass after the hero ---------- */
.nav { transition: transform 500ms var(--ease-precise); }
.nav::before { background: rgba(13, 15, 18, .62); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); }
.nav-in { height: var(--nav-h); }
.nav-brand { font-weight: 600; letter-spacing: -.02em; }
.nav-brand img { border-radius: 9px; }
.nav-links a { font-size: 14px; color: #A9AEB6; }
.nav-links a::after { left: 14px; right: 14px; }
.nav-end { justify-self: end; display: flex; align-items: center; gap: 10px; }
.mkt { display: none; align-items: center; gap: 8px; height: 30px; padding: 0 11px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .09);
  font: 500 11.5px/1 var(--font-mono); color: #A9AEB6; white-space: nowrap; background: rgba(255, 255, 255, .02); }
.mkt i { width: 6px; height: 6px; border-radius: 50%; background: #5B616B; }
.mkt.open i { background: var(--gold); box-shadow: 0 0 0 0 rgba(212, 168, 75, .6); animation: pulse 2s ease-out infinite; }
.mkt.open { color: #E2C58A; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(212, 168, 75, .55); } 80%, 100% { box-shadow: 0 0 0 7px rgba(212, 168, 75, 0); } }
@media (min-width: 1024px) { .mkt { display: inline-flex; } }

/* market ticker under the nav (TradingView ticker tape; hidden until it loads) */
.tickerbar { position: relative; height: 50px; border-top: 1px solid rgba(255, 255, 255, .05); border-bottom: 1px solid rgba(255, 255, 255, .06);
  background: rgba(10, 12, 15, .7); overflow: hidden; opacity: 0; transition: opacity 600ms var(--ease-precise); }
.tickerbar.on { opacity: 1; }
.tickerbar iframe { position: absolute; left: 0; top: 0; width: calc(100% - 132px); height: 50px; border: 0; }
.tickerbar .src { position: absolute; right: 0; top: 0; bottom: 0; display: flex; align-items: center; padding: 0 14px 0 18px;
  font: 10.5px var(--font-mono); color: #8E949E; background: linear-gradient(90deg, transparent, rgba(10, 12, 15, .95) 30%); }
@media (max-width: 599px) { .tickerbar iframe { width: 100%; } .tickerbar .src { display: none; } }

/* ---------- scroll progress + one stream of light down the page ---------- */
.progress-line { position: fixed; left: 0; right: 0; top: 0; height: 2px; z-index: 60; pointer-events: none;
  background: linear-gradient(90deg, rgba(212, 168, 75, .2), var(--gold) 60%, #F3D99B); transform-origin: 0 50%; transform: scaleX(0); will-change: transform; }
.stream { position: fixed; left: max(10px, calc((100vw - 1264px) / 2 - 8px)); top: 0; bottom: 0; width: 1px; z-index: 1; pointer-events: none; display: none; }
.stream::before { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent, rgba(255, 255, 255, .06) 12%, rgba(255, 255, 255, .06) 88%, transparent); }
.stream i { position: absolute; left: -1px; width: 3px; height: 26vh; top: 0; border-radius: 3px;
  background: linear-gradient(transparent, rgba(212, 168, 75, .0) 10%, var(--gold) 70%, #FFE3A3);
  box-shadow: 0 0 14px rgba(212, 168, 75, .6); will-change: transform; }
@media (min-width: 1024px) and (hover: hover) { .stream { display: block; } }

/* ---------- intro: a gold ring counts the page in, then folds into the nav logo ---------- */
.intro { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; background: var(--bg); pointer-events: none;
  transition: opacity 700ms var(--ease-precise) 120ms; }
.intro svg { width: 84px; height: 84px; transform: rotate(-90deg); transition: transform 800ms var(--ease-precise), opacity 500ms; }
.intro circle { fill: none; stroke-width: 2; }
.intro .bgc { stroke: rgba(255, 255, 255, .08); }
.intro .fg { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--n, 0)); filter: drop-shadow(0 0 6px rgba(212, 168, 75, .6)); }
.intro .bl { stroke: var(--blue, #2F6BFF); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--n, 0) * .999);
  transform: rotate(180deg) scaleX(-1); transform-origin: 20px 20px; opacity: .9; filter: drop-shadow(0 0 5px rgba(47, 107, 255, .7)); }
.intro b { position: absolute; font: 500 12px var(--font-mono); color: #C9CDD3; letter-spacing: .04em; }
.intro.fold svg { transform: translate(var(--fx, 0), var(--fy, 0)) scale(.36) rotate(-90deg); opacity: 0; }
.intro.fold b { opacity: 0; transition: opacity 200ms; }
.intro.out { opacity: 0; }
html.intro-done .intro { display: none; }

/* ---------- reveals (js/motion.js adds .in once) ---------- */
.js [data-rv] { opacity: 0; transition: opacity var(--t-in) var(--ease-precise), transform var(--t-in) var(--ease-precise), filter var(--t-in) var(--ease-precise);
  transition-delay: calc(var(--k, 0) * 60ms); }
.js [data-rv="up"] { transform: translate3d(0, 24px, 0); }
.js [data-rv="left"] { transform: translate3d(-40px, 0, 0); }
.js [data-rv="right"] { transform: translate3d(40px, 0, 0); }
.js [data-rv="chip"] { transform: translate3d(-24px, 0, 0); }
.js [data-rv="blur"] { transform: translate3d(0, 18px, 0) scale(.985); filter: blur(10px); }
.js [data-rv="list"] { transform: translate3d(16px, 0, 0); transition-delay: calc(var(--k, 0) * 40ms); }
.js [data-rv="wipe"] { opacity: 1; clip-path: inset(100% 0 0 0 round var(--r-card)); transform: scale(1.04);
  transition: clip-path 1100ms var(--ease-mask), transform 1400ms var(--ease-precise); }
.js [data-rv].in { opacity: 1; transform: none; filter: none; }
.js [data-rv="wipe"].in { clip-path: inset(0 0 0 0 round var(--r-card)); }
/* headlines: words rise out of a mask, line by line; the italic word lands 120 ms later, blur → sharp */
.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.js [data-split] .wi { display: inline-block; transform: translate3d(0, 105%, 0); transition: transform 1000ms var(--ease-precise); transition-delay: calc(var(--k, 0) * 60ms); }
.js [data-split] em .wi { filter: blur(8px); transition: transform 1000ms var(--ease-precise), filter 1000ms var(--ease-precise);
  transition-delay: calc(var(--k, 0) * 60ms + 120ms); }
.js [data-split].in .wi { transform: none; filter: none; }

/* ---------- chart-line dividers: draw and glow as they pass ---------- */
.divider { position: relative; height: 72px; margin: 0 auto; max-width: 1264px; pointer-events: none; }
.divider svg { width: 100%; height: 100%; overflow: visible; }
.divider path { fill: none; stroke: url(#dvg); stroke-width: 1.2; stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1800ms var(--ease-precise); filter: drop-shadow(0 0 5px rgba(212, 168, 75, .45)); }
.divider.in path { stroke-dashoffset: 0; }
.divider .dot { fill: #FFE3A3; opacity: 0; transition: opacity 400ms 1500ms; }
.divider.in .dot { opacity: 1; }

/* ---------- desktop crosshair inside chart-themed sections ---------- */
.xhair { position: fixed; inset: 0; pointer-events: none; z-index: 2; opacity: 0; transition: opacity 300ms; }
.xhair.on { opacity: 1; }
.xhair i { position: absolute; background: rgba(212, 168, 75, .1); }
.xhair .xv { top: 0; bottom: 0; width: 1px; left: 0; transform: translate3d(var(--cx, -10px), 0, 0); }
.xhair .xh { left: 0; right: 0; height: 1px; top: 0; transform: translate3d(0, var(--cy, -10px), 0); }

/* ---------- footer ---------- */
.footer { border-top: 1px solid rgba(255, 255, 255, .06); background: transparent; }
.footer .fine, .footer .risk p { font-family: var(--font-mono); font-size: 11.5px; line-height: 1.7; color: #9399A3; }
.footer .risk { border-radius: 14px; border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .015); }
.footer .risk b { font: 500 11px var(--font-mono); letter-spacing: .08em; text-transform: uppercase; color: #C9CDD3; }

/* ---------- reduced motion: content visible at once, short fades only ---------- */
@media (prefers-reduced-motion: reduce) {
  .js [data-rv], .js [data-rv="wipe"] { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: opacity 200ms !important; }
  .js [data-split] .wi { transform: none !important; filter: none !important; transition: none !important; }
  .divider path { stroke-dashoffset: 0; transition: none; }
  .divider .dot { opacity: 1; transition: none; }
  .stream, .xhair, .intro { display: none !important; }
  .dotgrid { transform: none !important; }
  .btn.gold::after, .ticked::before { display: none; }
  .mkt.open i { animation: none; }
}

/* tag chips wrap as one line of text on narrow screens */
.tagchip { flex-wrap: wrap; row-gap: 2px; max-width: 100%; }
.tagchip span { white-space: nowrap; }
@media (max-width: 479px) { .tagchip { font-size: 11px; } }

/* TradingView frames: a light-scheme document inside our dark page would get an opaque white backdrop */
iframe[src*="tradingview.com"] { color-scheme: light; background: transparent; }

/* ---------- footer columns (both pages) ---------- */
.foot-top { display: grid; gap: 32px; align-items: start; }
.foot-brand { display: grid; gap: 14px; justify-items: start; }
.foot-tag { font-size: 12px; color: #8E949E; }
.foot-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.foot-cols p { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #868C96; margin-bottom: 8px; }
.foot-cols a { display: flex; align-items: center; min-height: 40px; color: #A9AEB6; text-decoration: none; font-size: 14px; }
.foot-cols a:hover { color: var(--fg); }
@media (min-width: 900px) { .foot-top { grid-template-columns: 1fr 1.4fr; } }
@media (max-width: 479px) { .foot-cols { grid-template-columns: 1fr 1fr; } }
.nav-end .btn { white-space: nowrap; }

/* ---------- one stream of light: the ribbon (js/ribbon.js) replaces the thin side line ---------- */
.stream { display: none !important; }
.ribbon { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: 0; transition: opacity 1200ms var(--ease-precise); }
.ribbon.on { opacity: 1; }
@media (max-width: 1023px) { .ribbon.on { opacity: 1; } }   /* phones: a softer, diffused glow */

/* ---------- pinch zoom (js/motion.js sets html.zoomed): the full-screen fixed layers, masks, glass blurs and
   moving decorations switch off, so a phone does not re-render them at the zoomed resolution ---------- */
.zoomed .ribbon, .zoomed .dotgrid, .zoomed .xhair, .zoomed .h2-glow, .zoomed .mood-glow { display: none !important; }
.zoomed *, .zoomed *::before, .zoomed *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; will-change: auto !important; animation-play-state: paused !important; }
.zoomed .nav::before { background: rgba(13, 15, 18, .96); }