/* ============================================================
   TALITCG — HOLO FOIL DARK · shared design system
   ============================================================ */
:root{
  --ink:#0a0a0f;
  --ink-2:#101018;
  --ink-3:#16161f;
  --line:rgba(255,255,255,.08);
  --text:#eceaf1;
  --text-dim:#9b98a8;
  --foil-1:#5ee7df; --foil-2:#b490ff; --foil-3:#ff8fc0; --foil-4:#ffd98a; --foil-5:#8affc1;
  --mx:.5; --my:.5;   /* page-wide pointer (aurora) */
  --cx:.5; --cy:.5;   /* card-local pointer (tilt, holo, glare) */
  --display:'Unbounded',sans-serif;
  --body:'Familjen Grotesk',sans-serif;
  --mono:'Spline Sans Mono',monospace;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--text);
  font-family:var(--body);
  font-size:17px;
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--foil-2);color:var(--ink)}

/* ---- grain + ambient glow ---- */
body::before{
  content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.06'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.aurora{
  position:fixed;inset:-20%;z-index:0;pointer-events:none;filter:blur(90px);opacity:.16;
  background:
    radial-gradient(38% 30% at calc(var(--mx)*100%) calc(var(--my)*80%), var(--foil-2), transparent 70%),
    radial-gradient(30% 26% at calc(90% - var(--mx)*30%) 12%, var(--foil-1), transparent 70%),
    radial-gradient(26% 24% at 12% 86%, var(--foil-3), transparent 70%);
  transition:background .4s ease;
}

/* ---- foil utilities ---- */
@keyframes foilShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.foil-text{
  background:linear-gradient(115deg,var(--foil-1),var(--foil-2) 22%,var(--foil-3) 45%,var(--foil-4) 68%,var(--foil-5) 88%,var(--foil-1));
  background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:foilShift 9s ease-in-out infinite;
}
.foil-line{
  height:1px;border:0;
  background:linear-gradient(90deg,transparent,var(--foil-1),var(--foil-2),var(--foil-3),transparent);
  opacity:.5;
}

/* ---- nav ---- */
nav{
  position:fixed;top:0;left:0;right:0;z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(20px,4vw,56px);
  background:linear-gradient(rgba(10,10,15,.85),rgba(10,10,15,.55) 70%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
}
.wordmark{
  font-family:var(--display);font-weight:900;font-size:19px;letter-spacing:.14em;
  text-decoration:none;color:var(--text);
}
.wordmark em{font-style:normal}
.wordmark:hover em{
  background:linear-gradient(115deg,var(--foil-1),var(--foil-2),var(--foil-3),var(--foil-4));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:foilShift 3s linear infinite;
}
.nav-links{display:flex;gap:clamp(14px,2.5vw,34px);align-items:center;list-style:none}
.nav-links a{
  color:var(--text-dim);text-decoration:none;font-family:var(--mono);
  font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  transition:color .25s;
}
.nav-links a:hover,.nav-links a.here{color:var(--text)}
.nav-links .soon{font-size:9px;vertical-align:super;opacity:.6}
.nav-cta{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink)!important;background:var(--text);padding:9px 18px;border-radius:99px;
  transition:transform .2s ease, box-shadow .3s ease;
}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 0 24px rgba(180,144,255,.45)}

/* ---- hero (home) ---- */
.hero{
  position:relative;z-index:2;
  min-height:100svh;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;gap:clamp(24px,4vw,60px);
  padding:120px clamp(20px,5vw,72px) 60px;
  max-width:1440px;margin:0 auto;
}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.28em;text-transform:uppercase;
  color:var(--text-dim);display:flex;align-items:center;gap:14px;margin-bottom:26px;
}
.eyebrow::before{content:"";width:34px;height:1px;background:linear-gradient(90deg,var(--foil-1),var(--foil-3))}
h1{
  font-family:var(--display);font-weight:800;
  font-size:clamp(42px,6.2vw,92px);
  line-height:1.02;letter-spacing:-.01em;
  text-wrap:balance;
}
h1 .foil-text{font-weight:900}
.hero-sub{
  margin-top:28px;max-width:46ch;color:var(--text-dim);font-size:clamp(16px,1.35vw,19px);
}
.hero-sub strong{color:var(--text);font-weight:500}
.hero-ctas{display:flex;gap:16px;margin-top:38px;flex-wrap:wrap}
.btn{
  font-family:var(--mono);font-size:13px;letter-spacing:.14em;text-transform:uppercase;
  text-decoration:none;padding:16px 30px;border-radius:99px;position:relative;
  transition:transform .2s ease,box-shadow .3s ease;display:inline-block;
}
.btn-foil{color:var(--ink);background:var(--text)}
.btn-foil::after{
  content:"";position:absolute;inset:-2px;border-radius:99px;z-index:-1;
  background:linear-gradient(115deg,var(--foil-1),var(--foil-2),var(--foil-3),var(--foil-4),var(--foil-5));
  background-size:300% 100%;animation:foilShift 6s linear infinite;
  filter:blur(8px);opacity:0;transition:opacity .3s;
}
.btn-foil:hover{transform:translateY(-2px)}
.btn-foil:hover::after{opacity:.8}
.btn-ghost{color:var(--text);border:1px solid var(--line)}
.btn-ghost:hover{border-color:rgba(255,255,255,.3);transform:translateY(-2px)}
.hero-meta{display:flex;gap:34px;margin-top:54px;flex-wrap:wrap}
.hero-meta div{font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--text-dim)}
.hero-meta b{display:block;font-family:var(--display);font-weight:600;font-size:19px;color:var(--text);letter-spacing:0;margin-bottom:2px}

/* ---- page hero (subpages) ---- */
.page-hero{
  position:relative;z-index:2;max-width:1280px;margin:0 auto;
  padding:clamp(140px,18vh,190px) clamp(20px,5vw,56px) clamp(30px,4vw,50px);
}
.page-hero h1{font-size:clamp(38px,5.4vw,76px)}
.page-hero .hero-sub{margin-top:22px}

/* ---- the card (home hero) ---- */
.stage{position:relative;display:flex;align-items:center;justify-content:center;perspective:1200px;min-height:480px}
.card{
  position:relative;width:min(340px,78vw);aspect-ratio:63/88;border-radius:18px;
  transform-style:preserve-3d;
  transform:rotateX(calc((var(--cy) - .5)*-14deg)) rotateY(calc((var(--cx) - .5)*18deg));
  transition:transform .12s ease-out;
  animation:cardFloat 7s ease-in-out infinite;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.85), 0 0 70px -18px rgba(180,144,255,.35);
}
@keyframes cardFloat{0%,100%{translate:0 0}50%{translate:0 -14px}}
.card-face{
  position:absolute;inset:0;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,#1b1b28 0%,#12121c 55%,#1d1626 100%);
  border:1px solid rgba(255,255,255,.14);
  display:flex;flex-direction:column;padding:18px;
}
.card-face::before{
  content:"";position:absolute;inset:0;mix-blend-mode:color-dodge;pointer-events:none;
  opacity:0;transition:opacity .9s ease; /* hidden during flip: Safari can't blend mid-3D-transform */
  background:
    repeating-linear-gradient(115deg,
      rgba(94,231,223,.16) 0 2px, transparent 2px 6px,
      rgba(180,144,255,.16) 6px 8px, transparent 8px 12px,
      rgba(255,143,192,.14) 12px 14px, transparent 14px 18px),
    radial-gradient(120% 90% at calc(var(--cx)*100%) calc(var(--cy)*100%),
      rgba(255,217,138,.28), transparent 55%);
}
.card.settled .card-face::before{opacity:.5}
.glare{
  position:absolute;inset:0;border-radius:18px;pointer-events:none;mix-blend-mode:screen;
  opacity:0;transition:opacity .9s ease;
  background:radial-gradient(58% 42% at calc(var(--cx)*100%) calc(var(--cy)*100%),
    rgba(255,255,255,.28), rgba(255,255,255,.04) 45%, transparent 70%);
}
.card.settled .glare{opacity:1}
.card-top{display:flex;justify-content:space-between;align-items:baseline;position:relative;z-index:2}
.card-top .name{font-family:var(--display);font-weight:800;font-size:17px;letter-spacing:.06em}
.card-top .hp{font-family:var(--mono);font-size:11px;color:var(--foil-4);letter-spacing:.1em}
.card-art{
  position:relative;z-index:2;margin-top:12px;flex:1;border-radius:10px;overflow:hidden;
  border:1px solid rgba(255,255,255,.16);
  background:
    radial-gradient(60% 55% at 50% 42%, rgba(180,144,255,.5), transparent 70%),
    radial-gradient(46% 40% at 30% 70%, rgba(94,231,223,.4), transparent 70%),
    radial-gradient(40% 36% at 74% 66%, rgba(255,143,192,.38), transparent 70%),
    #0c0c14;
  display:flex;align-items:center;justify-content:center;
}
.card-art .sigil{
  font-family:var(--display);font-weight:900;font-size:64px;letter-spacing:-.02em;
  background:linear-gradient(115deg,var(--foil-1),var(--foil-2),var(--foil-3),var(--foil-4),var(--foil-5));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:foilShift 7s linear infinite;
}
.card-art .orbit{position:absolute;inset:0;pointer-events:none}
.card-art .orbit span{position:absolute;font-size:13px;color:rgba(255,255,255,.85);animation:twinkle 3.2s ease-in-out infinite}
.card-rows{position:relative;z-index:2;margin-top:12px;display:grid;gap:7px}
.card-rows .row{
  display:flex;justify-content:space-between;align-items:center;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text-dim);border-bottom:1px dashed rgba(255,255,255,.1);padding-bottom:6px;
}
.card-rows .row b{color:var(--text);font-weight:500}
.card-bottom{
  position:relative;z-index:2;margin-top:11px;display:flex;justify-content:space-between;
  font-family:var(--mono);font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim);
}
.card-bottom .rar{color:var(--foil-4)}
.stage .spark{
  position:absolute;color:#fff;pointer-events:none;opacity:0;
  animation:twinkle 4s ease-in-out infinite;
  text-shadow:0 0 12px rgba(180,144,255,.9);
  z-index:3;font-size:15px;
}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.6) rotate(0deg)}50%{opacity:.95;transform:scale(1.15) rotate(24deg)}}

/* ---- ticker ---- */
.ticker{
  position:relative;z-index:2;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  overflow:hidden;padding:15px 0;background:rgba(255,255,255,.015);
}
.ticker-track{display:flex;gap:0;width:max-content;animation:tick 34s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker-track span{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--text-dim);padding:0 26px;white-space:nowrap;
}
.ticker-track span::after{content:"✦";margin-left:52px;color:var(--foil-2)}

/* ---- sections ---- */
section{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:clamp(72px,9vw,130px) clamp(20px,5vw,56px)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:24px;margin-bottom:46px;flex-wrap:wrap}
h2{font-family:var(--display);font-weight:800;font-size:clamp(28px,3.6vw,48px);letter-spacing:-.01em}
.sec-head p{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--text-dim)}

/* ---- category / feature cards ---- */
.cats{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.cat{
  position:relative;border-radius:16px;padding:30px 26px 26px;min-height:220px;
  background:var(--ink-2);border:1px solid var(--line);
  display:flex;flex-direction:column;justify-content:space-between;
  text-decoration:none;color:var(--text);overflow:hidden;
  transition:transform .3s ease,border-color .3s ease;
}
.cat::before{
  content:"";position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 0%, rgba(180,144,255,.14), transparent 70%);
}
.cat::after{
  content:"";position:absolute;inset:-1px;border-radius:16px;padding:1px;opacity:0;transition:opacity .35s;
  background:linear-gradient(115deg,var(--foil-1),var(--foil-2),var(--foil-3),var(--foil-4));
  background-size:300% 100%;animation:foilShift 5s linear infinite;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
}
.cat:hover{transform:translateY(-6px)}
.cat:hover::before,.cat:hover::after{opacity:1}
.cat .glyph{font-size:30px;margin-bottom:16px}
.cat h3{font-family:var(--display);font-weight:600;font-size:19px;margin-bottom:8px}
.cat p{color:var(--text-dim);font-size:14.5px;line-height:1.5}
.cat .tag{
  margin-top:20px;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--foil-4);display:flex;align-items:center;gap:8px;
}
.cat .tag.soon{color:var(--text-dim)}
.cat .tag .arrow{transition:transform .25s}
.cat:hover .tag .arrow{transform:translateX(5px)}

/* ---- live split ---- */
.live{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.live-panel{
  position:relative;border-radius:18px;aspect-ratio:16/10;overflow:hidden;
  border:1px solid var(--line);
  background:radial-gradient(70% 60% at 50% 40%, rgba(94,231,223,.12), transparent 70%),var(--ink-2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;
}
.live-dot{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim)}
.live-dot i{width:9px;height:9px;border-radius:50%;background:#ff5470;display:inline-block;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,84,112,.6)}60%{box-shadow:0 0 0 12px rgba(255,84,112,0)}}
.live-panel .big{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,34px);text-align:center;padding:0 20px}
.live-panel .when{font-family:var(--mono);font-size:12.5px;letter-spacing:.16em;color:var(--foil-4);text-transform:uppercase}
.live-copy h2{margin-bottom:20px}
.live-copy p{color:var(--text-dim);max-width:44ch;margin-bottom:16px}
.live-copy p strong{color:var(--text);font-weight:500}
.live-links{display:flex;gap:14px;margin-top:26px;flex-wrap:wrap}

/* ---- trust strip ---- */
.trust{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:16px;overflow:hidden}
.trust div{background:var(--ink);padding:30px 26px}
.trust b{font-family:var(--display);font-weight:600;font-size:16px;display:block;margin-bottom:8px}
.trust span{color:var(--text-dim);font-size:14.5px;line-height:1.55;display:block}
.trust .n{font-family:var(--mono);font-size:11px;color:var(--foil-2);letter-spacing:.2em;display:block;margin-bottom:14px}

/* ---- signup ---- */
.signup{text-align:center}
.signup h2{max-width:20ch;margin:0 auto 18px}
.signup p{color:var(--text-dim);max-width:52ch;margin:0 auto 34px}
.signup form{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.signup input{
  font-family:var(--mono);font-size:14px;color:var(--text);
  background:var(--ink-2);border:1px solid var(--line);border-radius:99px;
  padding:15px 24px;width:min(360px,80vw);outline:none;transition:border-color .3s;
}
.signup input:focus{border-color:var(--foil-2)}
.signup .note{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--text-dim);text-transform:uppercase}
.signup .ok{color:var(--foil-5)}

/* ---- footer ---- */
footer{
  position:relative;z-index:2;border-top:1px solid var(--line);
  padding:44px clamp(20px,5vw,56px) 34px;max-width:1280px;margin:0 auto;
}
.foot-row{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap;align-items:center}
.foot-row .socials{display:flex;gap:22px;flex-wrap:wrap}
.foot-row a{color:var(--text-dim);text-decoration:none;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;transition:color .25s}
.foot-row a:hover{color:var(--text)}
.disclaimer{margin-top:30px;color:rgba(155,152,168,.55);font-size:11.5px;line-height:1.65;max-width:88ch}

/* ---- reveals ---- */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}
.hero .rv,.page-hero .rv{transition-delay:calc(var(--i,0)*.12s)}

/* ---- card flip (back face + deal-in) ---- */
.card-inner{
  position:absolute;inset:0;
  transform-style:preserve-3d;-webkit-transform-style:preserve-3d;
  transform:rotateY(180deg);
  transition:transform 1.35s cubic-bezier(.3,.85,.3,1.06);
  will-change:transform;
}
.card.dealt .card-inner{transform:rotateY(0deg)}
.card-face,.card-back{backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* force both faces onto their own GPU layers up front — prevents the
   half-blank rasterization flash at the end of the flip */
.card .card-face{transform:translateZ(0)}
.card .card-back{transform:rotateY(180deg) translateZ(0)}
.card-back{
  position:absolute;inset:0;border-radius:18px;overflow:hidden;
  transform:rotateY(180deg);
  border:1px solid rgba(255,255,255,.14);
  background:
    repeating-linear-gradient(115deg,
      rgba(94,231,223,.10) 0 3px, transparent 3px 10px,
      rgba(180,144,255,.10) 10px 13px, transparent 13px 20px),
    radial-gradient(70% 60% at 50% 50%, rgba(180,144,255,.14), transparent 70%),
    linear-gradient(160deg,#171722,#0e0e16);
  display:flex;align-items:center;justify-content:center;
}
.card-back .back-ring{
  width:58%;aspect-ratio:1;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(60% 60% at 50% 40%, rgba(94,231,223,.12), transparent 70%);
}
.card-back .back-ring b{
  font-family:var(--display);font-weight:900;font-size:74px;
  background:linear-gradient(115deg,var(--foil-1),var(--foil-2),var(--foil-3),var(--foil-4));
  background-size:300% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:foilShift 7s linear infinite;
}

/* ---- foil cursor sparks ---- */
.spark-trail{
  position:fixed;z-index:99;pointer-events:none;font-size:12px;
  transform:translate(-50%,-50%);
  animation:sparkFly .65s ease-out forwards;
  text-shadow:0 0 10px currentColor;
}
@keyframes sparkFly{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.5) rotate(0deg)}
  100%{opacity:0;transform:translate(calc(-50% + var(--dx,0px)),calc(-50% + var(--dy,-22px))) scale(1.25) rotate(80deg)}
}

@media (max-width:900px){
  .hero{grid-template-columns:1fr;padding-top:110px}
  .stage{min-height:440px;order:-1;margin-top:20px}
  .live{grid-template-columns:1fr}
  .nav-links li:not(.keep){display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .card{transform:none!important}
}