/* The Tick landing page: the logo's ring as a giant glowing halo, a live market about the launch, and the headline. All in
   Tick's colours (cyan #24D0FF, green for Yes, near-black) and fonts (Poppins, Rethink Sans for numbers), and all of it
   animated. */

/* fonts, included in fonts/ (Latin character set; licences alongside) */
@font-face{font-family:'Poppins'; font-style:normal; font-weight:500; font-display:swap; src:url(fonts/poppins-500.woff) format('woff')}
@font-face{font-family:'Poppins'; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/poppins-600.woff) format('woff')}
@font-face{font-family:'Rethink Sans'; font-style:normal; font-weight:400 800; font-display:swap; src:url(fonts/rethink-sans.woff) format('woff')}
:root{
  --blue:#24D0FF; --green:#40FD27; --ink:#0c0d0e;
  --poppins:'Poppins',sans-serif; --mono:'Rethink Sans',sans-serif;
  --out:cubic-bezier(.2,.8,.2,1);
}
*{box-sizing:border-box}
html,body{margin:0; min-height:100%}
html{background:var(--ink)}
body{min-height:100vh; min-height:100dvh; overflow-x:hidden; background:var(--ink); color:#fff; font-family:var(--poppins); -webkit-font-smoothing:antialiased}
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

/* ---------- background: a faint cyan haze where the halo is, and the site's hex grid fading out from the middle ---------- */
.haze{position:fixed; inset:0; z-index:0; pointer-events:none; background:radial-gradient(70vmax 55vmax at 50% 62%,rgba(36,208,255,.09),transparent 65%)}
.bg{
  position:fixed; z-index:0; inset:0; pointer-events:none; opacity:.55;
  -webkit-mask-image:radial-gradient(ellipse 62% 60% at 50% 55%,#000 15%,transparent 80%);
  mask-image:radial-gradient(ellipse 62% 60% at 50% 55%,#000 15%,transparent 80%);
}
.bg canvas{position:absolute; inset:0; width:100%; height:100%; display:block}

/* ---------- the halo: centred a little below the middle, about the height of the screen ---------- */
/* the fade towards the bottom lives on a full-screen wrapper, so it never crops the halo's soft outer glow */
.halo-wrap{position:fixed; inset:0; z-index:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,.3) 88%,rgba(0,0,0,.15) 100%);
  mask-image:linear-gradient(180deg,#000 52%,rgba(0,0,0,.3) 88%,rgba(0,0,0,.15) 100%)}
.halo{position:absolute; left:50%; top:61%; width:var(--hw,min(112vh,98vw)); aspect-ratio:1; transform:translate(-50%,-50%)}   /* landing.js may make it bigger, to go round the text */
.halo__l{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.halo__l path{fill:none; stroke-linecap:round; stroke-dasharray:100 100}
.halo__xl path{stroke:var(--blue); stroke-width:64}
.halo__xl{filter:blur(46px); opacity:.42}
.halo__m path{stroke:var(--blue); stroke-width:22}
.halo__m{filter:blur(14px); opacity:.75}
.halo__line path{stroke:var(--blue); stroke-width:7}
.halo__line{filter:blur(1.2px)}
.halo__hot path{stroke:#d8f7ff; stroke-width:2.4}
.halo__hot{opacity:.85}
/* the glint that keeps running round it: a short bright dash */
.halo__comet path{stroke:#fff; stroke-width:16; stroke-dasharray:5 105; stroke-dashoffset:5}
.halo__comet{filter:blur(9px); opacity:0}
.halo__comet--core path{stroke-width:5; stroke-dasharray:3 107; stroke-dashoffset:4}
.halo__comet--core{filter:blur(1.5px)}
/* the dot in the gap */
.halo__dotglow circle{fill:var(--blue)}
.halo__dotglow{filter:blur(22px); opacity:0}
.halo__core{fill:var(--blue)}
.halo__ripple{fill:none; stroke:var(--blue); stroke-width:2; opacity:0}
.halo__core,.halo__ripple{transform-box:fill-box; transform-origin:50% 50%}

/* ---------- top bar ---------- */
.top{position:absolute; z-index:2; top:0; left:0; right:0; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:clamp(18px,3vh,30px) clamp(18px,3vw,36px)}
.top__logo{display:block; width:144px; height:35px; flex:none}   /* the logo is 366 x 89 */
.top__logo svg{display:block; width:100%; height:100%}
.chip{display:inline-flex; align-items:center; gap:8px; height:30px; padding:0 12px; border-radius:999px;
  background:rgba(36,208,255,.08); box-shadow:inset 0 0 0 1px rgba(36,208,255,.35), 0 0 18px rgba(36,208,255,.12);
  font:500 11px/1 var(--poppins); letter-spacing:.06em; color:rgba(255,255,255,.85)}
.chip__dot{position:relative; width:7px; height:7px; border-radius:50%; background:var(--blue); box-shadow:0 0 8px rgba(36,208,255,.8)}
.chip__dot::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:1px solid var(--blue); animation:chip-ring 2s ease-out infinite}
@keyframes chip-ring{0%{opacity:.9; transform:scale(.4)} 100%{opacity:0; transform:scale(1.5)}}
/* the header logo's loop (as on the main site): a glint runs round the ring, the check pops, the dot blinks */
.logo__shine{opacity:.85; filter:blur(.7px)}
.logo__run{animation:logo-run 5s cubic-bezier(.45,0,.3,1) 3s infinite}
.logo__tick{transform-box:fill-box; transform-origin:50% 50%; animation:logo-tick 5s ease-in-out 3s infinite}
.logo__dot{transform-box:fill-box; transform-origin:50% 50%; animation:logo-dot 5s ease-in-out 3s infinite}
@keyframes logo-run{0%{stroke-dashoffset:12} 28%,100%{stroke-dashoffset:-348}}
@keyframes logo-tick{0%,22%{transform:scale(1)} 28%{transform:scale(1.18)} 35%,100%{transform:scale(1)}}
@keyframes logo-dot{0%,21%{opacity:1; transform:scale(1)} 25%{opacity:.3; transform:scale(.6)} 31%,100%{opacity:1; transform:scale(1)}}

/* ---------- the middle ---------- */
.land{position:relative; z-index:1; min-height:100vh; min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:110px 20px 56px; text-align:center}
.eyebrow{margin:0 0 16px; font:500 11px/1 var(--poppins); letter-spacing:.32em; text-indent:.32em; text-transform:uppercase; color:rgba(255,255,255,.55)}

/* the market (in place of a countdown): question, live chance with rolling digits, its chart, Yes / No prices */
.mkt{position:relative; width:min(340px,100%); padding:14px; border-radius:14px; text-align:left;
  background:linear-gradient(180deg,rgba(60,62,64,.55),rgba(30,31,33,.6)); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 20px 50px rgba(0,0,0,.45), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 0 rgba(255,255,255,.08)}
.mkt::before{ /* the card's edge catches the halo: a thin cyan sheen that slides along the top */
  content:""; position:absolute; inset:0; border-radius:inherit; padding:1px; pointer-events:none;
  background:linear-gradient(110deg,transparent 30%,rgba(36,208,255,.7) 50%,transparent 70%) 0 0 / 300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude;
  animation:sheen 5s ease-in-out 2.4s infinite}
@keyframes sheen{0%{background-position:100% 0} 45%,100%{background-position:-50% 0}}
.mkt__head{display:flex; align-items:center; gap:10px}
.mkt__ic{flex:none; display:flex; align-items:center; justify-content:center; width:30px; height:30px; border-radius:8px; background:rgba(36,208,255,.08); box-shadow:inset 0 0 0 1px rgba(36,208,255,.3)}
.mkt__ic svg{width:18px; height:18px; display:block}
.mkt__q{flex:1 1 0; min-width:0; font:600 13px/1.25 var(--poppins); color:#fff; text-wrap:balance}   /* two even lines, not a word left on its own */
.mkt__live{flex:none; display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 7px; border-radius:6px; background:rgba(64,253,39,.15); box-shadow:inset 0 0 0 1px rgba(64,253,39,.45); font:500 10px/1 var(--poppins); color:#fff}
.mkt__live i{width:6px; height:6px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(64,253,39,.6); animation:blink 1.6s ease-in-out infinite}
@keyframes blink{50%{opacity:.35}}
.mkt__body{position:relative; display:flex; align-items:flex-end; gap:12px; margin:14px 0 12px}
.mkt__price{flex:none; display:flex; flex-direction:column; gap:6px}
.mkt__pct{display:flex; align-items:flex-start; font:800 44px/1 var(--mono); color:#fff; letter-spacing:-.5px; text-shadow:0 0 20px rgba(36,208,255,.25)}
.mkt__sign{font-size:22px; margin:4px 0 0 2px; color:rgba(255,255,255,.7)}
.mkt__lbl{display:flex; align-items:center; gap:8px; font:500 11px/1 var(--poppins); color:rgba(255,255,255,.5)}
.mkt__chg{display:inline-flex; align-items:center; gap:3px; font:700 11px/1 var(--mono); color:var(--green)}
.mkt__chg i{width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent; border-bottom:5px solid currentColor}
.mkt__chg.is-down{color:#ff6666}
.mkt__chg.is-down i{border-bottom:0; border-top:5px solid currentColor}
.mkt__spark{flex:1 1 0; min-width:0; height:64px; overflow:visible}
.mkt__line{fill:none; stroke:var(--blue); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; vector-effect:non-scaling-stroke; filter:drop-shadow(0 0 4px rgba(36,208,255,.6))}
.mkt__pt{position:absolute; right:0; width:14px; height:14px; margin:-7px -7px 0 0; border-radius:50%; background:rgba(36,208,255,.15)}
.mkt__pt::after{content:""; position:absolute; inset:4px; border-radius:50%; background:var(--blue); box-shadow:0 0 8px var(--blue)}
.mkt__pt.is-tick{animation:pt-ring .8s ease-out}
@keyframes pt-ring{0%{box-shadow:0 0 0 0 rgba(36,208,255,.5)} 100%{box-shadow:0 0 0 10px rgba(36,208,255,0)}}
/* rolling digits: each digit is a 0-9 strip moved into place. Each digit's window is bigger than the digit (by .45em
   above and below, .5em each side; negative margins keep the layout as if it were 1em) so the number's glow isn't cut
   off, and it fades out at the top and bottom so the digits roll in and out softly */
.odo{display:inline-flex; height:1em}
.odo__d{display:block; height:1.9em; margin:-.45em -.5em; padding:0 .5em; overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent); mask-image:linear-gradient(180deg,transparent,#000 22%,#000 78%,transparent)}
.odo__s{display:flex; flex-direction:column; transition:transform .7s cubic-bezier(.3,1.3,.4,1)}
.odo__s span{display:block; height:1.9em; line-height:1.9em}
.mkt__btns{display:grid; grid-template-columns:1fr 1fr; gap:6px}
.mkt__btn{display:flex; align-items:center; justify-content:center; gap:6px; height:38px; border-radius:8px; font:800 13px/1 var(--mono); letter-spacing:.2px;
  background:linear-gradient(180deg,rgba(113,113,113,.2),rgba(77,77,77,.2)); box-shadow:0 3px 8px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.06)}
.mkt__btn b{font-weight:800}
.mkt__btn--yes{color:var(--green); text-shadow:0 0 8px rgba(64,253,39,.5)}
.mkt__btn--no{color:var(--blue); text-shadow:0 0 8px rgba(36,208,255,.5)}

/* the pitch: just the headline */
.title{margin:clamp(26px,5vh,44px) 0 0; max-width:900px; font:600 clamp(32px,4.6vw,60px)/1.08 var(--poppins); letter-spacing:-.02em; color:#fff; text-wrap:balance;
  text-shadow:0 2px 18px rgba(12,13,14,.85)}   /* a dark edge, so the glow behind never washes the words out */
.title .w{display:inline-block}
.title__soon{color:var(--blue); text-shadow:0 2px 18px rgba(12,13,14,.85), 0 0 30px rgba(36,208,255,.45)}

/* ---------- arrival (with script on: html.js; landing.js adds body.is-in once the page has painted) ---------- */
.js .in{opacity:0; transform:translateY(16px); filter:blur(8px)}
.is-in .in{animation:in 1s var(--out) var(--d,0s) forwards}
@keyframes in{to{opacity:1; transform:none; filter:blur(0)}}
.js .halo__l:not(.halo__comet):not(.halo__dot):not(.halo__dotglow) path{stroke-dashoffset:100}
.is-in .halo__l:not(.halo__comet):not(.halo__dot):not(.halo__dotglow) path{animation:draw 2s cubic-bezier(.65,0,.35,1) .15s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.js .halo__core{transform:scale(0)}
.is-in .halo__core{animation:dot-in .6s cubic-bezier(.3,1.7,.5,1) 2.05s forwards, beat 4s ease-in-out 3.6s infinite}
.is-in .halo__ripple{animation:ripple 4s ease-out 2.15s infinite}
.is-in .halo__dotglow{animation:glow-in .8s ease-out 2.05s forwards}
/* the comet: once the halo is drawn, a glint runs round it every 7s; the bloom breathes */
.is-in .halo__comet{animation:comet-op 7s linear 2.6s infinite}
.is-in .halo__comet path{animation:comet 7s cubic-bezier(.45,0,.3,1) 2.6s infinite}
.is-in .halo__comet--core path{animation-name:comet-core}
.is-in .halo__xl{animation:breathe 6s ease-in-out 2.2s infinite}
@keyframes dot-in{0%{transform:scale(0)} 100%{transform:scale(1)}}
@keyframes beat{0%,100%{transform:scale(1)} 8%{transform:scale(1.3)} 18%{transform:scale(1)}}
@keyframes ripple{0%{opacity:.9; transform:scale(1)} 30%,100%{opacity:0; transform:scale(4)}}
@keyframes glow-in{to{opacity:.7}}
@keyframes comet{0%{stroke-dashoffset:5} 38%,100%{stroke-dashoffset:-100}}
@keyframes comet-core{0%{stroke-dashoffset:4} 38%,100%{stroke-dashoffset:-101}}
@keyframes comet-op{0%{opacity:0} 3%{opacity:1} 34%{opacity:1} 38%,100%{opacity:0}}
@keyframes breathe{0%,100%{opacity:.42} 50%{opacity:.6}}

/* ---------- phones and short screens: the halo scrolls with the page, pinned round the market card by landing.js (--hx, --hy
   its centre, --hw its size); the headline flows freely in three balanced lines ---------- */
@media (max-width:760px),(max-height:520px){
  .halo-wrap{position:absolute; -webkit-mask-image:none; mask-image:none}   /* scrolls with the page, no fade */
  .halo{left:var(--hx,50%); top:var(--hy,34%); width:var(--hw,106vw)}
  .haze{background:radial-gradient(90vmax 60vmax at 50% 30%,rgba(36,208,255,.08),transparent 60%)}
  .land{padding:92px 20px 40px}
  .top__logo{width:128px; height:31px}
  .title{margin-top:clamp(28px,5vh,40px); font-size:clamp(26px,7.6vw,36px)}   /* landing.js moves it down below the ring */
  .title br{display:none}
}
@media (max-height:520px){ .land{justify-content:flex-start} }   /* landscape phones: start under the top bar and scroll */

/* no motion: everything in place, the market still updates (without the rolling), no glints */
@media (prefers-reduced-motion:reduce){
  .js .in{opacity:1; transform:none; filter:none}
  .js .halo__l path{stroke-dashoffset:0}
  .js .halo__core{transform:none}
  .halo__comet,.halo__ripple{display:none}
  .halo__dotglow{opacity:.7}
  .odo__s{transition:none}
  *,*::before,*::after{animation:none !important}
}