/* $BOWL — bowlrun.fun */
@font-face { font-family: "Anton"; src: url(fonts/anton.woff2) format("woff2"); font-display: swap; }
@font-face { font-family: "Plex"; src: url(fonts/plex400.woff2) format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Plex"; src: url(fonts/plex600.woff2) format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --red: #F03A2E;
  --green: #009A61;
  --ink: #111111;
  --paper: #F4EFE6;
  --white: #FFFFFF;
  --up: #21D07A;
  --down: #FF4A3D;
  --bg: var(--red);
  --meme: Impact, "Anton", "Haettenschweiler", "Arial Narrow Bold", sans-serif;
  --mono: "Plex", ui-monospace, Menlo, monospace;
  --navh: 56px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}
html[data-mode="bull"] { --bg: var(--green); }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--ink); }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0; font-family: var(--mono); font-size: 16px; line-height: 1.45; color: var(--ink);
  background: var(--bg); transition: background-color .6s var(--ease);
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.foot :focus-visible, .nav :focus-visible { outline-color: var(--white); }
.skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--ink); color: var(--white); padding: 8px 12px; }
.skip:focus { left: 8px; }
.mono { font-family: var(--mono); }

/* meme type: white fill, black stroke, hard shadow */
.meme {
  font-family: var(--meme); font-weight: 400; text-transform: uppercase; color: var(--white);
  line-height: .9; letter-spacing: .005em; margin: 0;
  -webkit-text-stroke: .045em var(--ink); paint-order: stroke fill;
  text-shadow: .05em .06em 0 var(--ink);
}

/* ---------- nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40; height: var(--navh);
  display: flex; align-items: center; gap: 20px; padding: 0 clamp(14px, 3vw, 32px);
  pointer-events: none;
}
.nav > * { pointer-events: auto; }
.nav__logo {
  font-family: var(--meme); font-size: 26px; text-decoration: none; color: var(--white);
  -webkit-text-stroke: 1.2px var(--ink); paint-order: stroke fill; text-shadow: 2px 2px 0 var(--ink);
  margin-right: auto;
}
.nav__links { display: none; gap: 6px; }
.nav__links a {
  font-size: 13px; font-weight: 600; text-decoration: none; text-transform: uppercase; letter-spacing: .04em;
  background: var(--ink); color: var(--white); padding: 8px 12px; transition: transform .2s var(--ease);
}
.nav__links a:hover { transform: translate(-2px, -2px); box-shadow: 2px 2px 0 var(--white); }
@media (min-width: 900px) { .nav__links { display: flex; } }

.toggle {
  display: inline-flex; align-items: center; gap: 8px; background: var(--ink); color: #8a8a8a;
  padding: 8px 12px; font-size: 13px; font-weight: 600; letter-spacing: .06em;
}
.toggle__dot { position: relative; width: 34px; height: 16px; border: 2px solid #8a8a8a; }
.toggle__dot::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 8px; height: 8px; background: var(--down);
  transition: transform .45s var(--ease), background-color .45s;
}
.toggle__lbl--bear { color: var(--down); }
html[data-mode="bull"] .toggle__lbl--bear { color: #8a8a8a; }
html[data-mode="bull"] .toggle__lbl--bull { color: var(--up); }
html[data-mode="bull"] .toggle__dot::after { transform: translateX(18px); background: var(--up); }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; background: var(--bg); transition: background-color .6s var(--ease); }
.hero__stage { --sh: calc(100svh - 190px); position: relative; flex: 1; min-height: 440px; overflow: hidden; }
.hero__word {
  --fs: min(42vw, calc(var(--sh) * .3));
  position: absolute; left: 0; right: 0; z-index: 1;
  bottom: calc(var(--bh) * var(--wo));
  margin: 0; text-align: center; white-space: nowrap;
  font-family: var(--meme); font-weight: 400; font-size: var(--fs); line-height: .8; color: var(--white);
  -webkit-text-stroke: .03em var(--ink); paint-order: stroke fill; text-shadow: .035em .04em 0 var(--ink);
  letter-spacing: -.005em;
}
.hero__word span { display: inline-block; will-change: transform; }
.hero__stage { --bh: calc(var(--sh) * .84); --wo: .80; }
.bull {
  position: absolute; z-index: 2; bottom: 0; left: 50%; height: var(--bh); aspect-ratio: 1;
  transform: translateX(-50%); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bull__inner { position: relative; width: 100%; height: 100%; will-change: transform; }
.bull__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transition: opacity .6s var(--ease); user-select: none; -webkit-user-drag: none; }
.bull__img--green { opacity: 0; }
html[data-mode="bull"] .bull__img--green { opacity: 1; }
html[data-mode="bull"] .bull__img--red { opacity: 0; }
/* the fringe: a second copy of the cutout clipped to the hair, animated on hover */
.bull__bangs {
  position: absolute; left: 0; right: 0; top: 0; height: 62%;
  background: url(img/bangs-red.webp) top center / 100% auto no-repeat;
  transform-origin: 50% 22%; will-change: transform; pointer-events: none;
}
html[data-mode="bull"] .bull__bangs { background-image: url(img/bangs-green.webp); }

.chyron {
  position: relative; z-index: 3; display: flex; align-items: stretch; background: var(--ink); color: var(--white);
}
.chyron__tag {
  flex: none; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  background: var(--white); color: var(--ink); font-weight: 600; font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
}
html[data-mode="bull"] .chyron__tag i { background: var(--up); }
.chyron__tag i { width: 8px; height: 8px; background: var(--down); border-radius: 50%; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero__caption {
  flex: 1; padding: .32em .5em .26em; font-size: clamp(1.35rem, 4.4vw, 3.6rem); text-align: center;
  -webkit-text-stroke: 0; text-shadow: none; line-height: 1; text-wrap: balance;
}
.t-bull { display: none; }
html[data-mode="bull"] .t-bull { display: inline; }
html[data-mode="bull"] .t-bear { display: none; }

.hero__bar {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px;
  padding: 14px clamp(14px, 3vw, 32px) 18px;
}
.ca {
  display: inline-flex; align-items: stretch; background: var(--white); color: var(--ink);
  border: 2px solid var(--ink); font-size: 14px; font-weight: 600; min-height: 44px; max-width: 100%;
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.ca:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--ink); }
.ca__k { display: flex; align-items: center; padding: 0 12px; background: var(--ink); color: var(--white); letter-spacing: .08em; }
.ca__v { display: flex; align-items: center; padding: 0 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.ca__icon { display: flex; align-items: center; padding: 0 12px; border-left: 2px solid var(--ink); }
.btns { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.btn {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  background: var(--ink); color: var(--white); text-decoration: none; text-transform: uppercase;
  font-size: 13px; font-weight: 600; letter-spacing: .05em; border: 2px solid var(--ink);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.btn:hover { transform: translate(-3px, -3px); box-shadow: 3px 3px 0 var(--white); }

@media (max-width: 599px) {
  .hero__bar .ca { width: 100%; }
  .hero__bar .ca__v { flex: 1; }
  .hero__bar .btns { width: 100%; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
  .hero__bar .btn { justify-content: center; padding: 0 6px; font-size: 12px; }
  .btn--x-long { display: none; }
  .chyron__tag { padding: 0 9px; font-size: 10px; }
}
@media (min-width: 900px) {
  .hero__stage { --bh: calc(var(--sh) * .88); --wo: .585; }
  .hero__word { --fs: min(34vw, calc(var(--sh) * .48), 34rem); }
}

/* ---------- ticker tape ---------- */
.tape { position: relative; z-index: 4; padding: clamp(28px, 6vw, 72px) 0; background: var(--bg); overflow: hidden; transition: background-color .6s var(--ease); }
.tape__band { width: 112vw; margin-left: -6vw; transform: rotate(-2deg); background: var(--ink); color: var(--white); padding: 10px 0; }
.tape__row { overflow: hidden; white-space: nowrap; }
.tape__row--b { border-top: 1px solid #333; padding-top: 6px; margin-top: 6px; color: #cfcfcf; }
.tape__track { display: inline-flex; will-change: transform; }
.tape__item {
  display: inline-flex; align-items: baseline; gap: .5em; padding: 0 1.6em;
  font-size: clamp(14px, 1.7vw, 22px); font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
}
.tape__row--b .tape__item { font-weight: 400; text-transform: none; font-size: clamp(13px, 1.4vw, 18px); }
.tape__item b { font-weight: 600; }
.up { color: var(--up); } .down { color: var(--down); } .flat { color: #f2c94c; }
.tape__sep { color: #555; }

/* ---------- the bowl (chart) ---------- */
.chart {
  position: relative; background-color: var(--paper);
  background-image:
    linear-gradient(rgba(17,17,17,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(17,17,17,.07) 1px, transparent 1px);
  background-size: 32px 32px;
}
.chart__pin { min-height: 100svh; display: flex; flex-direction: column; padding: calc(var(--navh) + 12px) clamp(14px, 4vw, 56px) clamp(20px, 4vh, 44px); }
.chart__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(12px, 3vh, 28px); }
.chart__head h2 { font-size: clamp(3.2rem, 10vw, 9rem); }
.chart__stats { display: grid; grid-template-columns: repeat(4, auto); gap: 0; margin: 0; border: 2px solid var(--ink); background: var(--paper); }
.chart__stats div { padding: 8px 14px; border-left: 2px solid var(--ink); }
.chart__stats div:first-child { border-left: 0; }
.chart__stats dt { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #555; }
.chart__stats dd { margin: 2px 0 0; font-weight: 600; font-size: 15px; white-space: nowrap; }
.chg { font-variant-numeric: tabular-nums; min-width: 7ch; }
.chg.is-down { color: #C8231A; } .chg.is-up { color: #00804F; }
.chart__fig { position: relative; flex: 1; min-height: 320px; margin: 0; border: 2px solid var(--ink); background: rgba(244,239,230,.75); }
.chart__svg { position: absolute; inset: 24px 24px 34px 44px; width: calc(100% - 68px); height: calc(100% - 58px); overflow: visible; }
.chart__grid line { stroke: rgba(17,17,17,.18); stroke-width: 1; vector-effect: non-scaling-stroke; stroke-dasharray: 3 5; }
.chart__grid text { font: 600 11px var(--mono); fill: #555; }
.chart__line { fill: none; stroke: var(--ink); stroke-width: 4; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.chart__candles rect { vector-effect: non-scaling-stroke; }
.c-down { fill: var(--down); } .c-up { fill: #00A866; }
.c-wick { stroke: var(--ink); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart__rider {
  position: absolute; z-index: 3; width: clamp(48px, 6vw, 76px); aspect-ratio: 1; margin: calc(clamp(48px, 6vw, 76px) / -2) 0 0 calc(clamp(48px, 6vw, 76px) / -2);
  border: 3px solid var(--ink); border-radius: 50%; overflow: hidden; background: var(--red); box-shadow: 3px 3px 0 var(--ink);
  left: 0; top: 0; will-change: transform;
}
.chart__rider img { width: 100%; height: 100%; object-fit: cover; }
.chart__axis { position: absolute; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; color: #555; }
.chart__axis--x { right: 24px; bottom: 8px; }
.chart__axis--y { left: 10px; top: 24px; writing-mode: vertical-rl; transform: rotate(180deg); }
.chart__cap {
  position: absolute; left: 50%; top: 34%; transform: translateX(-50%); width: max-content; max-width: 92%;
  font-size: clamp(2.2rem, 7.4vw, 7.4rem); text-align: center; z-index: 2;
}

/* ---------- fit check ---------- */
.fit { background: var(--bg); padding: clamp(56px, 10vw, 120px) clamp(14px, 4vw, 56px); transition: background-color .6s var(--ease); }
.fit__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(20px, 4vw, 40px); }
.fit__head h2 { font-size: clamp(3.4rem, 12vw, 11rem); }
.fit__head p { margin: 0; font-weight: 600; background: var(--ink); color: var(--white); padding: 8px 12px; }
.fit__grid {
  list-style: none; margin: 0; padding: 2px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px;
  background: var(--ink);
}
@media (min-width: 760px) { .fit__grid { grid-template-columns: repeat(4, 1fr); } }
.fit__grid li { position: relative; aspect-ratio: 1; }
.tile {
  position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; display: block; text-align: left;
  background: var(--tbg, #222); transition: transform .45s var(--ease), box-shadow .45s var(--ease); will-change: transform;
}
.tile img { width: 100%; height: 100%; object-fit: cover; }
.tile__cap {
  position: absolute; left: 0; right: 0; bottom: 0; background: var(--ink); color: var(--white);
  font-size: clamp(11px, 1.05vw, 14px); font-weight: 600; line-height: 1.3; padding: 9px 12px;
  transform: translateY(101%); transition: transform .4s var(--ease);
}
.tile__cap small { display: block; font-weight: 400; color: #9a9a9a; text-transform: uppercase; letter-spacing: .08em; font-size: .78em; margin-bottom: 2px; }
.tile--empty { display: grid; place-items: center; color: #8a8a8a; font-size: 13px; background: #1b1b1b; }
@media (hover: hover) {
  .fit__grid li:hover, .fit__grid li:focus-within { z-index: 3; }
  .fit__grid li:hover .tile, .tile:focus-visible { transform: scale(1.07) rotate(var(--rot, 2deg)); box-shadow: 7px 7px 0 var(--ink); }
  .fit__grid li:hover .tile__cap, .tile:focus-visible .tile__cap { transform: none; }
}
@media (hover: none) {
  .fit__grid li { aspect-ratio: auto; display: flex; }
  .tile { position: relative; display: flex; flex-direction: column; background: var(--ink); }
  .tile img { aspect-ratio: 1; height: auto; background: var(--tbg, #222); }
  .tile__cap { position: static; flex: 1; transform: none; padding: 7px 9px 9px; font-size: 11px; }
  .tile__cap small { display: none; }
  .tile.is-pop { transform: scale(1.05) rotate(var(--rot, 2deg)); box-shadow: 5px 5px 0 var(--ink); z-index: 3; }
  .fit__grid li:has(.is-pop) { z-index: 3; }
}

/* ---------- footer ---------- */
.foot { background: var(--ink); color: var(--white); padding: clamp(64px, 12vw, 160px) clamp(14px, 4vw, 56px) 28px; overflow: hidden; }
.foot__line { font-size: clamp(2.6rem, 9.4vw, 9.6rem); line-height: .92; -webkit-text-stroke: 0; text-shadow: .04em .05em 0 var(--down); }
html[data-mode="bull"] .foot__line { text-shadow: .04em .05em 0 var(--up); }
.foot__line > span { display: block; text-wrap: balance; }
.foot__line .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .02em .08em 0; margin-bottom: -.08em; }
.foot__line .w > i { display: inline-block; font-style: normal; will-change: transform; }
.foot__bar { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(32px, 6vw, 64px); align-items: center; }
.ca--light { background: var(--ink); color: var(--white); border-color: var(--white); }
.ca--light .ca__k { background: var(--white); color: var(--ink); }
.ca--light .ca__icon { border-color: var(--white); }
.ca--light:hover { box-shadow: 3px 3px 0 var(--white); }
.btn--light { background: transparent; border-color: var(--white); }
.foot__legal { margin: 28px 0 0; font-size: 12px; color: #a3a3a3; }

/* ---------- grain + toast ---------- */
.grain {
  position: fixed; inset: 0; z-index: 60; pointer-events: none; opacity: .07; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 1.6 -.35'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.toast {
  position: fixed; left: 50%; bottom: 22px; z-index: 70; transform: translate(-50%, 140%);
  background: var(--white); color: var(--ink); border: 2px solid var(--ink); box-shadow: 4px 4px 0 var(--ink);
  font-weight: 600; font-size: 14px; padding: 10px 16px; max-width: calc(100vw - 28px);
  visibility: hidden; transition: transform .35s var(--ease), visibility 0s .35s;
}
.toast.is-on { transform: translate(-50%, 0); visibility: visible; transition: transform .35s var(--ease); }

/* ---------- pre-intro state (JS + motion only) ---------- */
html.js:not(.rm) .hero__word span { visibility: hidden; }
html.js:not(.rm) .bull { visibility: hidden; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .fit__grid li:hover .tile { transform: none; }
}

/* ---------- small screens ---------- */
html, body { overflow-x: clip; }
@media (max-width: 599px) {
  .chart__stats { grid-template-columns: 1fr 1fr; width: 100%; }
  .chart__stats div:nth-child(3) { border-left: 0; }
  .chart__stats div:nth-child(n+3) { border-top: 2px solid var(--ink); }
  .chart__stats div { padding: 6px 10px; }
  .chart__stats dd { font-size: 14px; }
  .chart__svg { inset: 16px 12px 30px 28px; width: calc(100% - 40px); height: calc(100% - 46px); }
  .chart__axis--y { left: 4px; }
  .chart__cap { top: 32%; font-size: 2.7rem; text-wrap: balance; }
  .toggle { padding: 8px 10px; gap: 6px; font-size: 12px; }
}