/* Trizen chrome UI kit
   One source for the brand's chrome: the same silver as the logo, the same travelling glint as the knot.
   Rule: chrome is for the few things you should touch or remember. Everything else stays quiet. */

@property --tz-a{syntax:'<angle>';inherits:false;initial-value:0deg}

:root{
  /* classic chrome: bright sky, dark horizon line, bright floor */
  --tz-chrome:linear-gradient(180deg,#ffffff 0%,#eef0f3 20%,#bcc2cb 46%,#7b838e 52%,#c4c9d1 74%,#f6f7f9 100%);
  --tz-chrome-soft:linear-gradient(180deg,#fbfcfd 0%,#e3e6ea 40%,#a6adb8 56%,#d9dde2 82%,#f4f5f7 100%);
  --tz-chrome-text:linear-gradient(100deg,#7d8590 0%,#ffffff 16%,#c3c8d0 30%,#7b838e 46%,#eef0f3 62%,#9aa1ac 80%,#ffffff 100%);
  --tz-hair:rgba(255,255,255,.16);
  --tz-ink:#0B0C0E;
  --tz-fg:#EEEFF1;
}

/* ---------- buttons: one family ----------
   Same pill, same prismatic edge. Primary is filled with liquid metal (assets/liquid-metal.js); secondary is the same edge on clear glass. */
@property --tz-r{syntax:'<angle>';inherits:false;initial-value:0deg}
.tz-btn,.tz-ghost{position:relative;isolation:isolate;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:52px;padding:0 26px;border-radius:999px;
  font-family:inherit;font-weight:500;font-size:.96rem;letter-spacing:-.005em;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;color:#F4F5F7;
  transition:transform .35s cubic-bezier(.2,.7,.1,1),box-shadow .4s,background .4s}
/* the shared edge: a faint hairline with two small spectral flares that travel around it */
.tz-btn::before,.tz-ghost::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.25px;pointer-events:none;z-index:3;
  background:conic-gradient(from var(--tz-r),rgba(255,255,255,.28) 0deg 30deg,#8fc7ff 42deg,#fff 50deg,#ffbf93 58deg,rgba(255,255,255,.28) 72deg 200deg,#c6b4ff 212deg,#fff 220deg,#8fe3d2 228deg,rgba(255,255,255,.28) 242deg 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;
  animation:tz-rim 10s linear infinite}
.tz-btn:hover::before,.tz-ghost:hover::before{animation-duration:3.5s}
@keyframes tz-rim{to{--tz-r:360deg}}
/* primary: the pill itself is liquid metal */
.tz-btn{background:#1c1e21;box-shadow:0 1px 2px rgba(0,0,0,.6),0 16px 40px -18px rgba(170,185,210,.35)}
.tz-btn canvas.lm{position:absolute;inset:0;width:100%;height:100%;z-index:0;border-radius:inherit;display:block}
/* a soft veil keeps the label readable over bright reflections; a dome highlight sells the curvature */
.tz-btn::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1;pointer-events:none;
  background:radial-gradient(120% 70% at 50% -10%,rgba(255,255,255,.22),transparent 55%),linear-gradient(90deg,rgba(8,9,11,.18),rgba(8,9,11,.5) 50%,rgba(8,9,11,.18));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -8px 16px -6px rgba(0,0,0,.55)}
.tz-btn>span{position:relative;z-index:2;text-shadow:0 1px 8px rgba(0,0,0,.65)}
.tz-btn .ar,.tz-ghost .ar{display:inline-block;transition:transform .35s cubic-bezier(.2,.7,.1,1)}
.tz-btn:hover,.tz-ghost:hover{transform:translateY(-1px)}
.tz-btn:hover{box-shadow:0 1px 2px rgba(0,0,0,.6),0 20px 46px -16px rgba(180,195,220,.5)}
.tz-btn:hover .ar,.tz-ghost:hover .ar{transform:translateX(3px)}
.tz-btn:active,.tz-ghost:active{transform:translateY(0) scale(.985)}
/* secondary: the same edge, clear glass */
.tz-ghost{background:rgba(255,255,255,.04);-webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}
.tz-ghost:hover{background:rgba(255,255,255,.07)}
.tz-btn.sm,.tz-ghost.sm{height:42px;padding:0 20px;font-size:.88rem;gap:10px}

/* ---------- chrome words: for one accent line per screen, never body copy ---------- */
.tz-chrome{background:var(--tz-chrome-text);background-size:260% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:tz-pan 11s ease-in-out infinite alternate}
@keyframes tz-pan{from{background-position:0% 0}to{background-position:100% 0}}

/* ---------- text link: chrome underline that glints on hover ---------- */
.tz-link{color:var(--tz-fg);text-decoration:none;padding-bottom:3px;
  background:linear-gradient(90deg,transparent,#fff,transparent) no-repeat,linear-gradient(90deg,#6f7782,#d9dde2,#6f7782) no-repeat;
  background-size:30% 1px,100% 1px;background-position:-40% 100%,0 100%;transition:background-position .9s cubic-bezier(.4,0,.2,1)}
.tz-link:hover{background-position:140% 100%,0 100%}

/* ---------- small label with a chrome hairline and a halftone dot ---------- */
.tz-badge{position:relative;display:inline-flex;align-items:center;gap:9px;padding:6px 13px 6px 9px;border-radius:999px;font-size:.8rem;color:#c9ccd1;background:rgba(255,255,255,.03)}
.tz-badge::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.06) 50%,rgba(255,255,255,.18));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.tz-badge i{width:12px;height:12px;border-radius:50%;background:radial-gradient(#fff .8px,transparent 1.1px) 0 0/3px 3px,radial-gradient(circle at 35% 30%,#fff,#7b838e 70%)}

/* ---------- surfaces ---------- */
.tz-rule{display:block;width:100%;margin:0;height:1px;border:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,.35) 30%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.35) 70%,transparent)}
/* cards catch the cursor: a soft light follows the pointer and lifts the edge it is near */
@property --spot{syntax:"<number>";inherits:true;initial-value:0}
.tz-card{position:relative;border-radius:18px;transition:--spot .5s ease;
  background:radial-gradient(380px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,calc(.055 * var(--spot))),transparent 65%),rgba(255,255,255,.025)}
.tz-card:hover{--spot:1}
.tz-card::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,calc(.55 * var(--spot))),transparent 70%),linear-gradient(160deg,rgba(255,255,255,.4),rgba(255,255,255,.05) 35%,rgba(255,255,255,.03) 65%,rgba(255,255,255,.22));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.tz-input{height:48px;padding:0 18px;border-radius:12px;border:1px solid var(--tz-hair);background:rgba(255,255,255,.03);color:var(--tz-fg);font:inherit;outline:none;transition:border-color .3s,box-shadow .3s}
.tz-input:focus{border-color:rgba(255,255,255,.6);box-shadow:0 0 0 4px rgba(200,210,225,.12)}
:focus-visible{outline:2px solid #d9dde2;outline-offset:3px}

@media (prefers-reduced-motion:reduce){
  .tz-btn::before,.tz-ghost::before,.tz-chrome{animation:none!important}
  .tz-link{transition:none}
}