/* ─────────────────────────────────────────────
   THE TITTY BULL — monochrome brutalist
   ───────────────────────────────────────────── */

:root{
  --ink:#000000;
  --paper:#f4f4f2;
  --grey-1:#1a1a1a;
  --grey-2:#2c2c2c;
  --grey-3:#6e6e6e;
  --grey-4:#a9a9a9;
  --line:rgba(244,244,242,.18);
  --line-hard:rgba(244,244,242,.42);
  --disp:'Archivo Black',Impact,sans-serif;
  --ui:'Archivo','Helvetica Neue',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}
[id]{scroll-margin-top:74px}

body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--ui);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{display:block;max-width:100%}

/* film grain over everything */
.grain{
  position:fixed;inset:-50%;z-index:900;pointer-events:none;
  opacity:.055;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainShift 1.1s steps(3) infinite;
}
@keyframes grainShift{
  0%{transform:translate(0,0)} 33%{transform:translate(-2%,1%)} 66%{transform:translate(1%,-2%)} 100%{transform:translate(0,0)}
}

/* ───────── TOP BAR ───────── */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:800;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 28px;height:58px;
  background:rgba(0,0,0,.72);
  backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.tb-mark{font-family:var(--disp);font-size:15px;letter-spacing:.14em}
.tb-nav{display:flex;gap:26px}
.tb-nav a{
  color:var(--grey-4);text-decoration:none;
  font-size:11px;font-weight:800;letter-spacing:.2em;
  transition:color .2s;
}
.tb-nav a:hover{color:var(--paper)}
.tb-buy{
  font-family:var(--disp);font-size:12px;letter-spacing:.16em;
  color:var(--ink);background:var(--paper);
  padding:9px 20px;text-decoration:none;
  transition:transform .18s,box-shadow .18s;
}
.tb-buy:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--grey-3)}

/* ───────── HERO ───────── */
.hero{
  position:relative;
  min-height:100vh;
  display:flex;align-items:flex-end;
  overflow:hidden;
  border-bottom:1px solid var(--line-hard);
}
.hero-art{position:absolute;inset:0;z-index:0}
.hero-art img{
  width:100%;height:100%;object-fit:cover;object-position:58% 46%;
  filter:grayscale(1) contrast(1.12) brightness(.82);
  transform:scale(1.08);
  will-change:transform;
}
.hero-cut{
  position:absolute;z-index:1;
  right:2%;bottom:0;
  height:86vh;width:min(60vw,900px);
  background-size:contain;background-repeat:no-repeat;background-position:bottom center;
  filter:grayscale(1) contrast(1.08) drop-shadow(0 18px 50px rgba(0,0,0,.9));
  opacity:0;transition:opacity .8s ease;
  will-change:transform;pointer-events:none;
}
.hero-cut.on{opacity:1}
/* when the cut-out is live the flat banner only has to be a backdrop */
.hero.layered .hero-art img{filter:grayscale(1) contrast(1.06) brightness(.78)}

.hero-vig{
  position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(200deg,transparent 34%,rgba(0,0,0,.55) 62%,rgba(0,0,0,.93) 88%),
    linear-gradient(to bottom,rgba(0,0,0,.82) 0%,rgba(0,0,0,.12) 22%,rgba(0,0,0,.22) 56%,rgba(0,0,0,.9) 100%),
    radial-gradient(145% 100% at 60% 44%,transparent 28%,rgba(0,0,0,.66) 100%);
}

.hero-type{
  position:relative;z-index:3;
  padding:0 0 88px 56px;
  max-width:760px;
}
.kicker{
  display:flex;align-items:center;gap:12px;
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;
  color:var(--grey-4);margin-bottom:20px;
}
.kicker i{width:22px;height:1px;background:var(--grey-3);display:block}

.title{
  font-family:var(--disp);
  line-height:.8;
  letter-spacing:-.02em;
  text-transform:uppercase;
}
.title span{display:block}
.title .l1{font-size:62px;color:var(--grey-4);letter-spacing:.14em;margin-bottom:6px}
.title .l2{
  font-size:140px;
  color:var(--paper);
  text-shadow:0 0 70px rgba(0,0,0,.9);
}
.title .l3{
  font-size:140px;
  color:transparent;
  -webkit-text-stroke:2px var(--paper);
  margin-top:-6px;
}

.ticker{
  font-family:var(--mono);font-weight:700;
  font-size:34px;letter-spacing:.06em;
  margin-top:26px;
  color:var(--paper);
}
.sub{
  font-size:16px;line-height:1.55;font-weight:600;
  color:var(--grey-4);margin-top:14px;
  letter-spacing:.02em;
}

.scrollhint{
  position:absolute;z-index:3;right:46px;bottom:40px;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.3em;color:var(--grey-3);
  writing-mode:vertical-rl;
}
.scrollhint i{
  width:1px;height:56px;background:linear-gradient(to bottom,var(--grey-3),transparent);
  animation:hintPulse 2.2s ease-in-out infinite;
}
@keyframes hintPulse{0%,100%{opacity:.3}50%{opacity:1}}

/* ───────── CA BAR ───────── */
.cabar{
  background:var(--paper);
  color:var(--ink);
  padding:22px 56px;
}
.ca-wrap{
  display:flex;align-items:center;justify-content:space-between;gap:28px;
  max-width:1500px;margin:0 auto;
}
.ca-block{
  display:flex;align-items:center;gap:14px;
  border:2px solid var(--ink);
  padding:10px 10px 10px 16px;
  flex:1 1 auto;min-width:0;
}
.ca-label{
  font-family:var(--disp);font-size:11px;letter-spacing:.16em;
  flex:0 0 auto;
}
.ca-text{
  font-family:var(--mono);font-size:14px;font-weight:700;
  flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  letter-spacing:-.01em;
}
.copy-btn{
  font-family:var(--disp);font-size:11px;letter-spacing:.14em;
  background:var(--ink);color:var(--paper);
  border:0;padding:9px 18px;cursor:pointer;
  flex:0 0 auto;
  transition:background .18s,color .18s;
}
.copy-btn:hover{background:var(--grey-2)}
.copy-btn.done{background:var(--grey-3)}

.ca-actions{display:flex;gap:12px;flex:0 0 auto}
.btn{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--disp);font-size:12px;letter-spacing:.14em;
  text-decoration:none;padding:13px 24px;
  border:2px solid var(--ink);
  transition:transform .18s,box-shadow .18s,background .18s,color .18s;
}
.btn-buy{background:var(--ink);color:var(--paper)}
.btn-buy:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink);background:var(--grey-2)}
.btn-x{background:transparent;color:var(--ink)}
.btn-x:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}

/* finale variant sits on black */
.ca-wrap-f{margin-top:40px;flex-wrap:wrap;justify-content:center}
/* the real 44-char contract needs the full row to itself down here */
.ca-wrap-f .ca-block{flex:1 0 100%}
.ca-wrap-f .ca-block{border-color:var(--paper)}
.ca-wrap-f .ca-label,.ca-wrap-f .ca-text{color:var(--paper)}
.ca-wrap-f .copy-btn{background:var(--paper);color:var(--ink)}
.ca-wrap-f .copy-btn:hover{background:var(--grey-4)}
.ca-wrap-f .btn{border-color:var(--paper)}
.ca-wrap-f .btn-buy{background:var(--paper);color:var(--ink)}
.ca-wrap-f .btn-buy:hover{box-shadow:5px 5px 0 var(--grey-3);background:#fff}
.ca-wrap-f .btn-x{color:var(--paper)}
.ca-wrap-f .btn-x:hover{box-shadow:5px 5px 0 var(--grey-3)}

/* ───────── MARQUEE ───────── */
.marquee{
  overflow:hidden;white-space:nowrap;
  border-bottom:1px solid var(--line);
  padding:16px 0;background:var(--ink);
}
.mq-run{display:inline-flex;align-items:center;gap:26px;animation:run 34s linear infinite}
.mq-run span{
  font-family:var(--disp);font-size:26px;letter-spacing:.06em;
  color:transparent;-webkit-text-stroke:1px var(--grey-3);
}
.mq-run span:nth-child(4n+1){color:var(--paper);-webkit-text-stroke:0}
.mq-run i{color:var(--grey-3);font-size:13px;font-style:normal}
@keyframes run{to{transform:translateX(-50%)}}

/* ───────── SPLIT ───────── */
.split{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;align-items:stretch;
  border-bottom:1px solid var(--line-hard);
}
.split-img{position:relative;background:var(--ink);border-right:1px solid var(--line)}
.split-img img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;
  filter:grayscale(1) contrast(1.08);
}
.plate{
  position:absolute;left:0;bottom:0;
  font-family:var(--mono);font-size:10px;letter-spacing:.24em;
  background:var(--paper);color:var(--ink);
  padding:8px 16px;
}
.split-txt{padding:96px 64px 96px 60px;display:flex;flex-direction:column;justify-content:center}

.chapno{
  font-family:var(--mono);font-size:11px;letter-spacing:.32em;
  color:var(--grey-3);margin-bottom:18px;
}
.split-txt h2,.panel h2,.sec-head h2,.finale h2{
  font-family:var(--disp);
  line-height:.88;letter-spacing:-.015em;
  text-transform:uppercase;
}
.split-txt h2{font-size:58px;margin-bottom:26px}
.body{
  font-size:16px;line-height:1.72;color:var(--grey-4);
  max-width:48ch;margin-bottom:16px;
}
.body em{color:var(--paper);font-style:italic}

.stats{list-style:none;display:flex;gap:40px;margin-top:22px}
.stats li{display:flex;flex-direction:column;gap:4px}
.stats b{font-family:var(--disp);font-size:46px;line-height:1}
.stats span{font-family:var(--mono);font-size:10px;letter-spacing:.2em;color:var(--grey-3)}

/* ───────── BIG PANELS ───────── */
.panels{display:block}
.panel{
  position:relative;
  min-height:86vh;
  display:flex;flex-direction:column;justify-content:center;
  padding:110px 64px;
  border-bottom:1px solid var(--line-hard);
  overflow:hidden;
  background:var(--ink);
}
/* real art when present */
.panel.has-art{min-height:0;aspect-ratio:16/10;padding-top:0;padding-bottom:0}
.panel.has-art::before{
  content:"";position:absolute;inset:0;
  background-image:var(--art);
  background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.06) brightness(.96);
  will-change:auto;z-index:0;
}
/* procedural fallback scene — storm ridges + lightning, pure CSS */
.panel.has-art::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(to bottom,rgba(0,0,0,.55) 0%,transparent 30%,transparent 62%,rgba(0,0,0,.72) 100%);
}
.panel:not(.has-art)::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to bottom,rgba(0,0,0,.45) 0%,transparent 34%,rgba(0,0,0,.6) 100%);
}
.panel > *{position:relative;z-index:2}

.panel .fallback{
  position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(74% 52% at 50% 6%,rgba(244,244,242,.3),transparent 72%),
    radial-gradient(120% 72% at 50% 104%,#000 38%,transparent 100%),
    repeating-linear-gradient(118deg,rgba(244,244,242,.045) 0 2px,transparent 2px 24px),
    linear-gradient(to bottom,#232323 0%,#0d0d0d 58%,#000 100%);
}
.panel .fallback svg{position:absolute;inset:0;width:100%;height:100%}

.panel.has-art[data-side="right"]::after{
  background:
    linear-gradient(to right,transparent 30%,rgba(0,0,0,.52) 56%,rgba(0,0,0,.9) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.5) 0%,transparent 30%,rgba(0,0,0,.6) 100%);
}
.panel.has-art[data-side="left"]::after{
  background:
    linear-gradient(to left,transparent 30%,rgba(0,0,0,.52) 56%,rgba(0,0,0,.9) 100%),
    linear-gradient(to bottom,rgba(0,0,0,.5) 0%,transparent 30%,rgba(0,0,0,.6) 100%);
}
/* summit art is centre-weighted: the clear zone is the bottom, so the caption drops there */
.panel.has-art[data-side="center"]{padding-bottom:4%}
.panel.has-art[data-side="center"] h2{font-size:clamp(34px,3.4vw,62px)}
.panel.has-art[data-side="center"]::after{
  background:linear-gradient(to bottom,rgba(0,0,0,.42) 0%,transparent 22%,transparent 56%,rgba(0,0,0,.86) 78%,rgba(0,0,0,.97) 100%);
}
.panel.has-art[data-side="right"],.panel.has-art[data-side="left"]{justify-content:center;padding:0 64px}
.panel.has-art h2{font-size:clamp(34px,3.9vw,74px)}
.panel.has-art .body{font-size:clamp(13px,1.05vw,17px)}
.panel[data-side="right"]{align-items:flex-end;text-align:right}
.panel[data-side="right"] .body{margin-left:auto}
.panel[data-side="left"]{align-items:flex-start}
.panel[data-side="center"]{align-items:center;text-align:center}
.panel[data-side="center"] .body{margin-left:auto;margin-right:auto}
.panel h2{font-size:74px;margin-bottom:26px;text-shadow:0 4px 40px rgba(0,0,0,.9)}
.panel .body{font-size:17px;color:#cfcfcf}

/* ───────── MOODS ───────── */
.moods{padding:140px 56px 120px;border-bottom:1px solid var(--line-hard)}
.sec-head{text-align:center;margin-bottom:56px}
.sec-head h2{font-size:62px;margin-bottom:16px}
.sec-head .body{margin:0 auto}

.mood-row{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1340px;margin:0 auto}
.mood{border:1px solid var(--line-hard);background:#070707;overflow:hidden}
.mood-img{
  aspect-ratio:4/5;width:100%;
  background-size:cover;background-position:center;
  filter:grayscale(1) contrast(1.08);
  transition:transform .5s cubic-bezier(.2,.7,.3,1),filter .4s;
}
.mood:hover .mood-img{transform:scale(1.05);filter:grayscale(1) contrast(1.2) brightness(1.08)}
.mood figcaption{
  display:flex;flex-direction:column;gap:6px;
  padding:18px 20px 22px;
  border-top:1px solid var(--line);
}
.mood figcaption b{font-family:var(--disp);font-size:17px;letter-spacing:.06em}
.mood figcaption span{font-size:13px;color:var(--grey-3);line-height:1.5}

/* ───────── STRIP ───────── */
.strip{
  background:var(--paper);color:var(--ink);
  overflow:hidden;white-space:nowrap;padding:13px 0;
}
.strip-run{display:inline-flex;align-items:center;gap:22px;animation:run 26s linear infinite}
.strip-run span{font-family:var(--disp);font-size:16px;letter-spacing:.14em}
.strip-run i{font-style:normal;font-weight:800;color:var(--grey-3)}

/* ───────── HOW ───────── */
.how{padding:140px 56px 120px;border-bottom:1px solid var(--line-hard)}
.steps{list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1340px;margin:0 auto}
.steps li{
  padding:34px 28px 40px;
  border-left:1px solid var(--line-hard);
  display:flex;flex-direction:column;gap:12px;
  transition:background .25s;
}
.steps li:last-child{border-right:1px solid var(--line-hard)}
.steps li:hover{background:#0c0c0c}
.steps i{
  font-family:var(--disp);font-style:normal;font-size:40px;
  color:transparent;-webkit-text-stroke:1.5px var(--grey-3);
  line-height:1;
}
.steps b{font-family:var(--disp);font-size:19px;letter-spacing:.03em}
.steps span{font-size:14px;line-height:1.6;color:var(--grey-3)}

/* ───────── FINALE ───────── */
.finale{
  position:relative;overflow:hidden;
  padding:110px 56px 150px;
  text-align:center;
  min-height:84vh;
  display:flex;align-items:center;justify-content:center;
}
.finale-art{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:min(1180px,78vw);aspect-ratio:18/11;
  background-size:contain;background-repeat:no-repeat;background-position:bottom center;
  filter:grayscale(1) contrast(1.06);
  opacity:0;z-index:0;
  -webkit-mask-image:linear-gradient(to bottom,#000 55%,transparent 96%);
          mask-image:linear-gradient(to bottom,#000 55%,transparent 96%);
  transition:opacity .6s;
}
.finale-art.on{opacity:.5}
.finale::before{
  content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(90% 70% at 50% 60%,transparent 20%,rgba(0,0,0,.82) 100%);
  pointer-events:none;
}
.finale-in{position:relative;z-index:2;width:100%;max-width:1100px}
.finale h2{font-size:92px;margin-bottom:20px;text-shadow:0 6px 48px rgba(0,0,0,.95)}
.finale .body{margin:0 auto 0;color:var(--grey-4)}
.finale .ca-wrap{max-width:900px;margin-left:auto;margin-right:auto}

/* ───────── FOOT ───────── */
.foot{
  border-top:1px solid var(--line-hard);
  padding:34px 56px 46px;
  display:flex;flex-direction:column;gap:12px;align-items:center;text-align:center;
}
.foot > span:first-child{font-family:var(--disp);font-size:13px;letter-spacing:.18em}
.foot-dis{font-size:11px;line-height:1.7;color:var(--grey-3);max-width:60ch;font-family:var(--mono)}

/* ───────── TOAST ───────── */
.toast{
  position:fixed;left:50%;bottom:34px;transform:translate(-50%,24px);
  background:var(--paper);color:var(--ink);
  font-family:var(--disp);font-size:12px;letter-spacing:.16em;
  padding:13px 26px;z-index:950;
  opacity:0;pointer-events:none;
  transition:opacity .25s,transform .25s;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ───────── REVEAL ───────── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)}
.reveal.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
}