@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

:root{
  --pink:#ff1f9e;
  --yellow:#ffd60a;
  --green:#1fa347;
  --white:#f4f4f0;
  --black:#0a0a0a;
  --display:'Anton','Impact','Haettenschweiler','Arial Narrow Bold',sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;overflow-x:hidden;}
body{
  background:var(--black);
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
  min-height:100vh;
  -webkit-text-size-adjust:100%;
}
img,video{max-width:100%;}

/* ---------- display type ---------- */
.mega,.page-title,.name,.back,.cta,.ph,.cap-title{
  font-family:var(--display);
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.01em;
}

/* ---------- home hero ---------- */
.hero{padding:22px 16px 6px;}
.mega{margin:0;font-size:min(29vw,230px);line-height:.88;}
.mega > span{display:block;}
.mega .hit{color:var(--pink);}
.kicker{margin:16px 0 0;font:700 13px/1.2 Arial,sans-serif;letter-spacing:.22em;text-transform:uppercase;color:#9a9a9a;}

/* ---------- colour blocks (home + links) ---------- */
.blocks{display:grid;gap:10px;padding:10px 10px 40px;grid-template-columns:1fr;}
.block{
  display:flex;flex-direction:column;justify-content:space-between;
  min-height:150px;padding:16px 18px 14px;
  background:var(--c);color:var(--black);text-decoration:none;
  transition:transform .15s;
}
.block .top{display:flex;justify-content:space-between;gap:12px;font:700 13px/1.2 Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;}
.block .name{font-size:clamp(44px,13vw,84px);line-height:.92;margin-top:28px;}
.block:active{transform:scale(.98);}
@media (hover:hover){
  .block:hover{background:var(--black);color:var(--c);outline:4px solid var(--c);outline-offset:-4px;}
}
@media (min-width:700px){
  .blocks.two{grid-template-columns:1fr 1fr;}
  .block{min-height:230px;}
}

/* ---------- sub pages ---------- */
.head{padding:18px 16px 4px;}
.back{
  display:inline-block;background:var(--white);color:var(--black);
  font-size:18px;padding:9px 16px;text-decoration:none;letter-spacing:.06em;
}
.page-title{margin:20px 0 10px;font-size:min(20vw,150px);line-height:.9;color:var(--c,var(--white));}
.lead{margin:0 0 6px;max-width:560px;font-size:16px;line-height:1.5;color:#d6d6d6;}

/* ---------- ticker ---------- */
.ticker{overflow:hidden;background:var(--yellow);color:var(--black);white-space:nowrap;margin:20px 0 10px;}
.track{display:inline-flex;width:max-content;animation:tick 40s linear infinite;}
.track span{font-family:var(--display);text-transform:uppercase;font-size:28px;line-height:1;padding:10px 0;}
.ticker:hover .track{animation-play-state:paused;}
@keyframes tick{to{transform:translateX(-50%);}}

/* ---------- interactive bits ---------- */
.ch{display:inline-block;cursor:pointer;transition:transform .18s cubic-bezier(.3,1.7,.5,1),color .2s;}
.ch.pop{transform:translateY(-.07em) rotate(-4deg) scale(1.06);}

.rv{opacity:0;translate:0 36px;transition:opacity .6s ease,translate .6s cubic-bezier(.2,.7,.2,1),transform .15s;}
.rv.in{opacity:1;translate:0 0;}

.wipe{position:fixed;inset:0;z-index:9998;pointer-events:none;transform:translateY(100%);}
.wipe.cover{transition:transform .38s cubic-bezier(.7,0,.2,1);transform:translateY(0);}
.wipe.start{transform:translateY(0);}
.wipe.out{transition:transform .5s cubic-bezier(.7,0,.2,1);transform:translateY(-100%);}

.cursor{position:fixed;left:0;top:0;width:36px;height:36px;margin:-18px 0 0 -18px;border:2px solid #fff;
  mix-blend-mode:difference;pointer-events:none;z-index:9999;transition:width .2s,height .2s,margin .2s,background .2s;}
.cursor.big{width:80px;height:80px;margin:-40px 0 0 -40px;background:#fff;}

.lb{position:fixed;inset:0;z-index:9990;background:rgba(10,10,10,.96);display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;padding:16px;animation:lbin .2s ease;}
.lb img{max-width:100%;max-height:76vh;display:block;}
.lb .lb-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;}
.lb a,.lb button{font-family:var(--display);text-transform:uppercase;font-size:22px;padding:12px 18px;border:0;
  border-radius:0;text-decoration:none;cursor:pointer;background:var(--pink);color:var(--black);}
.lb button{background:var(--white);}
@keyframes lbin{from{opacity:0;}to{opacity:1;}}

@media (prefers-reduced-motion:reduce){
  .track{animation:none;}
  .rv{opacity:1;translate:none;transition:none;}
  .wipe,.cursor{display:none;}
}