/* ====== Futuristic Portal Theme (Compact + No Mouse Tilt) ====== */
:root{
  --bg-1: #0a0c1d;
  --bg-2: #071426;
  --text: #e6f6ff;
  --muted: #a5b6c9;
  --brand-1: #00d8ff;   /* neon cyan */
  --brand-2: #7c4dff;   /* neon violet */
  --card-size: clamp(160px, 15vw, 200px);
  --radius-xl: 20px;
  --shadow-1: 0 2px 8px rgba(0,0,0,.4);
  --shadow-2: 0 12px 24px -8px rgba(0,0,0,.6);
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
}

html {
  color-scheme: dark;
}

body {
  margin: 0;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, 'JetBrains Mono', sans-serif;
  color: var(--text);
  background: linear-gradient(120deg, var(--bg-1), var(--bg-2));
  overflow-x: hidden;
}

/* Animated background layers */
.bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
}
.bg__gradient{
  position:absolute; inset:0;
  background:
    radial-gradient(60vw 60vw at 20% 10%, color-mix(in oklab, var(--brand-1) 30%, transparent), transparent 60%),
    radial-gradient(60vw 60vw at 80% 90%, color-mix(in oklab, var(--brand-2) 30%, transparent), transparent 60%);
  opacity: .55;
  animation: float 18s ease-in-out infinite alternate;
}

.bg__glow{
  position:absolute; inset:0;
  filter: blur(60px);
  background: radial-gradient(40vw 40vw at 50% 0%, rgba(124,77,255,.25), transparent 70%);
}

/* Header */
.site-header{
  text-align:center;
  padding: clamp(24px, 4vw, 56px) 16px 8px;
}
.logo{
  width:min(35vw, 260px);
  height:auto;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,.6));
}
.site-title{
  font-weight: 800;
  font-size: clamp(18px, 3.2vw, 28px);
  letter-spacing:.3px;
  margin: 14px 0 6px;
  text-shadow: 0 2px 18px rgba(0,0,0,.6);
}
.site-subtitle{
  color: var(--muted);
  font-size: clamp(11px, 1.5vw, 13px);
  margin: 0;
}

/* Cards grid */
.cards{
  --gap: clamp(12px, 2vw, 20px);
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(var(--card-size), 1fr));
  gap: var(--gap);
  padding: clamp(20px, 5vw, 64px);
  max-width: 1080px;
  margin: 0 auto;
}

/* Card */
.card{
  position: relative;
  display: grid;
  align-content: end;
  aspect-ratio: 3/4;
  border-radius: var(--radius-xl);
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  overflow: clip;
  text-decoration: none;
  color: inherit;
  isolation: isolate;
  box-shadow: var(--shadow-1), var(--shadow-2);
  transition: transform .3s ease, box-shadow .3s ease;
}
.card:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand-1) 70%, white 0%);
}
.card__body{
  position: relative;
  z-index: 2;
  padding: 12px;
  backdrop-filter: blur(8px) saturate(1.2);
  -webkit-backdrop-filter: blur(8px) saturate(1.2);
  background: linear-gradient(180deg, rgba(0,0,0,.1), rgba(0,0,0,.35));
  border-top: 1px solid rgba(255,255,255,.08);
}
.card__title{
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-weight: 700;
  font-size: clamp(14px, 1.6vw, 18px);
  margin: 0 0 4px;
  letter-spacing:.4px;
}
.card__text{
  color: var(--muted);
  font-size: clamp(10px, 1.3vw, 12px);
  line-height: 1.4;
  margin: 0;
}

/* Card media */
.card::before{
  content: "";
  position: absolute; inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  filter: saturate(1.1) contrast(1.05) brightness(.9);
  z-index: 0;
}
.card::after{
  /* vignette */
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.6));
  z-index:1;
  transition: opacity .3s ease;
  opacity:.85;
}

/* Neon border + shine */
.card__border{
  position:absolute; inset:0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, color-mix(in oklab, var(--brand-1) 70%, transparent), color-mix(in oklab, var(--brand-2) 70%, transparent));
  -webkit-mask: 
     linear-gradient(#000 0 0) content-box, 
     linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  z-index:2;
  opacity:.6;
  transition: opacity .3s ease, transform .3s ease;
}
.card__shine{
  position:absolute; inset:-40% -40% auto -40%;
  height: 60%;
  background: radial-gradient(120% 60% at 50% 0%, rgba(0,216,255,.28), transparent 60%);
  mix-blend-mode: screen;
  z-index:2;
  pointer-events:none;
  opacity:.0;
  transition: opacity .3s ease;
}

.card:hover, .card:focus-visible{
  box-shadow: 0 12px 36px -8px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.06) inset;
  transform: scale(1.02);
}
.card:hover .card__shine,
.card:focus-visible .card__shine{ opacity:.6; }
.card:hover .card__border,
.card:focus-visible .card__border{ opacity:.95; transform: scale(1.01); }

/* Footer */
.site-footer{
  text-align:center;
  color: var(--muted);
  padding: 24px 16px 48px;
  font-size: 12px;
}

/* Motion safety */
@media (prefers-reduced-motion: reduce){
  .bg__gradient{ animation: none; }
  .card{ transition: none; }
}

/* Keyframes */
@keyframes float{
  from{ transform: translateY(-10px); }
  to{ transform: translateY(10px); }
}