@font-face{font-family:'Lufga';src:url('../font/Lufga-ExtraBold.otf') format('opentype');font-weight:800}
@font-face{font-family:'JetBrains Mono';src:url('../font/JetBrainsMono-latin.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'JetBrains Mono';src:url('../font/JetBrainsMono-latin-ext.woff2') format('woff2');font-weight:400 700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{height:100%}
body{
  background:#08080e;
  color:#eeeef8;
  font-family:'JetBrains Mono',monospace;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}

/* Dot grid */
body::before{
  content:'';
  position:fixed;inset:0;
  background-image:radial-gradient(circle,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:28px 28px;
  pointer-events:none;
  z-index:0;
}

/* Scan lines */
body::after{
  content:'';
  position:fixed;inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.025) 2px,rgba(0,0,0,.025) 4px);
  pointer-events:none;
  z-index:1;
}

/* Blobs */
.blob{position:fixed;border-radius:50%;filter:blur(90px);pointer-events:none;z-index:0}
@keyframes float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-22px) scale(1.05)}}
.blob-pink{
  width:580px;height:580px;
  top:-160px;right:-100px;
  background:radial-gradient(circle,rgba(244,89,126,.25),transparent 70%);
  animation:float 10s ease-in-out infinite;
}
.blob-purple{
  width:460px;height:460px;
  bottom:-120px;left:-80px;
  background:radial-gradient(circle,rgba(100,55,210,.18),transparent 70%);
  animation:float 13s ease-in-out infinite reverse;
}
.blob-blue{
  width:300px;height:300px;
  top:40%;left:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(56,189,248,.06),transparent 70%);
  animation:float 16s ease-in-out infinite;
}

/* Container */
.container{
  position:relative;z-index:2;
  display:flex;flex-direction:column;align-items:center;
  padding:24px 16px 32px;
  width:100%;max-width:960px;
}

/* Logo */
.logo{
  display:flex;align-items:center;gap:14px;
  margin-bottom:4px;
}
.logo-mark{
  width:48px;height:48px;
  background:rgba(244,89,126,.1);
  border:1px solid rgba(244,89,126,.3);
  border-radius:15px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 28px rgba(244,89,126,.18),0 0 60px rgba(244,89,126,.07);
}
.logo-text{display:flex;flex-direction:column;gap:2px}
.logo-name{
  font-family:'Lufga',sans-serif;
  font-weight:800;font-size:1.7rem;
  letter-spacing:.22em;color:#f4597e;
  text-shadow:0 0 40px rgba(244,89,126,.45);
  line-height:1;
}
.logo-path{font-size:.62rem;color:#30305a;letter-spacing:.1em}

/* Terminal */
.term{
  width:100%;max-width:580px;
  background:rgba(8,8,16,.95);
  border:1px solid rgba(255,255,255,.07);
  border-radius:14px;
  overflow:hidden;
  margin-top:28px;
  box-shadow:0 8px 60px rgba(0,0,0,.7),0 0 0 1px rgba(255,255,255,.04);
}
.term-bar{
  display:flex;align-items:center;gap:6px;
  padding:10px 16px;
  background:rgba(255,255,255,.035);
  border-bottom:1px solid rgba(255,255,255,.055);
}
.tdot{width:11px;height:11px;border-radius:50%}
.td-r{background:#f4597e;box-shadow:0 0 6px rgba(244,89,126,.5)}
.td-y{background:#2e2e50}.td-g{background:#1c1c2e}
.term-title{margin-left:6px;font-size:.66rem;color:#383860;letter-spacing:.07em}
.term-live{margin-left:auto;font-size:.62rem;color:#3ddc84;letter-spacing:.05em}
.term-body{padding:18px 20px 20px;font-size:.78rem;line-height:2;min-height:110px}
.t-first{margin-bottom:8px;color:#7878a0}
.t-prompt{color:#f4597e}
.t-line{display:flex;align-items:baseline;gap:10px;opacity:0;transition:opacity .25s}
.t-line.show{opacity:1}
.t-bullet{color:#f4597e;flex-shrink:0;font-size:.7rem}
.t-label{color:#404060;flex:1}
.t-dots{color:#2a2a48}
.t-result{color:#3ddc84;font-size:.72rem}
.t-result.warn{color:#fbbf24}
.t-result.muted{color:#303056}
.t-cursor{
  display:inline-block;width:7px;height:13px;
  background:#f4597e;vertical-align:middle;margin-left:3px;
  animation:cur .85s step-end infinite;
}
@keyframes cur{0%,100%{opacity:1}50%{opacity:0}}

.redir-line{
  margin-top:10px;
  font-size:.7rem;color:#303056;
  opacity:0;transition:opacity .3s;
  padding-left:18px;
}
.redir-line.show{opacity:1}
.redir-lang{color:#3ddc84}

/* Cards */
.cards{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;width:100%;
  margin-top:28px;
  opacity:0;transform:translateY(24px);
  transition:opacity .55s ease,transform .55s ease;
}
.cards.visible{opacity:1;transform:translateY(0)}

.card{
  position:relative;overflow:hidden;
  background:rgba(255,255,255,.025);
  border:1px solid rgba(255,255,255,.065);
  border-radius:18px;
  padding:28px 22px 24px;
  cursor:pointer;
  text-decoration:none;
  display:flex;flex-direction:column;align-items:flex-start;
  transition:border-color .22s,box-shadow .22s,transform .22s,background .22s;
  -webkit-tap-highlight-color:transparent;
}

/* Shimmer sweep */
.card::before{
  content:'';
  position:absolute;top:0;left:-120%;width:60%;height:100%;
  background:linear-gradient(105deg,transparent 40%,rgba(244,89,126,.07) 50%,transparent 60%);
  transition:left .5s ease;
  pointer-events:none;
}
.card:hover::before{left:160%}

.card:hover{
  border-color:rgba(244,89,126,.5);
  box-shadow:
    0 0 0 1px rgba(244,89,126,.1),
    0 0 30px rgba(244,89,126,.12),
    0 0 80px rgba(244,89,126,.06),
    0 12px 40px rgba(0,0,0,.5);
  transform:translateY(-8px);
  background:rgba(244,89,126,.035);
}
.card:active{transform:translateY(-3px) scale(.98);transition-duration:.08s}

.card-num{
  font-size:.62rem;color:#f4597e;letter-spacing:.12em;
  margin-bottom:18px;opacity:.7;
}
.card-flag{font-size:2.2rem;line-height:1;margin-bottom:14px}
.card-code{
  font-family:'Lufga',sans-serif;
  font-weight:800;font-size:4rem;line-height:1;
  color:#d8d8f0;
  letter-spacing:-.02em;
  transition:color .22s,text-shadow .22s;
}
.card:hover .card-code{
  color:#f4597e;
  text-shadow:0 0 30px rgba(244,89,126,.45);
}
.card-lang{
  font-size:.7rem;color:#36365e;margin-top:10px;letter-spacing:.04em;
  transition:color .22s;
  line-height:1.4;
}
.card:hover .card-lang{color:#6868a0}

/* Animated bottom bar */
.card-bar{
  position:absolute;bottom:0;left:0;right:0;height:2px;
  background:linear-gradient(90deg,#f4597e,#ff9db4,#f4597e);
  background-size:200% 100%;
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s ease;
  animation:barShift 2s linear infinite;
}
@keyframes barShift{0%{background-position:0% 0}100%{background-position:200% 0}}
.card:hover .card-bar{transform:scaleX(1)}

/* Arrow */
.card-arrow{
  position:absolute;right:18px;bottom:20px;
  font-size:.9rem;color:#f4597e;
  opacity:0;transform:translateX(-8px);
  transition:opacity .2s,transform .2s;
}
.card:hover .card-arrow{opacity:1;transform:translateX(0)}

/* Stagger delays */
.cards.visible .card:nth-child(1){transition-delay:.05s}
.cards.visible .card:nth-child(2){transition-delay:.12s}
.cards.visible .card:nth-child(3){transition-delay:.19s}

/* Hint */
.hint{
  margin-top:18px;font-size:.62rem;color:#222244;letter-spacing:.07em;
  opacity:0;transition:opacity .5s .5s;
  display:flex;align-items:center;gap:6px;
}
.hint.visible{opacity:1}
.hint-dot{color:#f4597e;font-size:.5rem}

/* CRT TV channel-change transition */
#tv-off{
  position:fixed;inset:0;z-index:9999;
  pointer-events:none;
  background:#fff;
  opacity:0;
  clip-path:inset(50% 50% 50% 50%);
}

@keyframes tvLine{
  0%  {opacity:0;   clip-path:inset(0% 0% 0% 0%)}
  6%  {opacity:1;   clip-path:inset(0% 0% 0% 0%)}
  22% {opacity:1;   clip-path:inset(47% 0% 47% 0%)}
  45% {opacity:1;   clip-path:inset(49.2% 0% 49.2% 0%)}
  65% {opacity:1;   clip-path:inset(49.7% 4% 49.7% 4%)}
  82% {opacity:.7;  clip-path:inset(49.9% 18% 49.9% 18%)}
  100%{opacity:0;   clip-path:inset(50% 50% 50% 50%)}
}

@keyframes tvDark{
  0%  {filter:brightness(1) saturate(1)}
  6%  {filter:brightness(2) saturate(0)}
  100%{filter:brightness(0) saturate(0)}
}

.fading{
  animation:tvDark .42s ease-in forwards;
  pointer-events:none;
}
.fading #tv-off{
  animation:tvLine .42s ease-in forwards;
}

/* Mobile */
@media(max-width:620px){
  .cards{grid-template-columns:1fr;max-width:340px}
  .card{
    flex-direction:row;align-items:center;gap:18px;
    padding:20px 18px;
  }
  .card-num{position:absolute;top:12px;right:14px;margin-bottom:0}
  .card-flag{font-size:1.8rem;margin-bottom:0;flex-shrink:0}
  .card-info{display:flex;flex-direction:column}
  .card-code{font-size:2.8rem}
  .card-lang{margin-top:4px}
  .card-arrow{bottom:auto;top:50%;right:14px;transform:translateY(-50%) translateX(-8px)}
  .card:hover .card-arrow{transform:translateY(-50%) translateX(0)}
  .t-label{font-size:.7rem}
}