/* styles.css — dark-only, colorful gradient; perf-lean */
/* Tokens */
:root{
  color-scheme: dark;
  --bg:#0a0a0f; --bg2:#101018; --card:#14141b; --fg:#f2f4f8; --muted:#9aa0ab;
  --accent:#ff2e50; --ring:#ff3b5e;
  --radius:18px; --gap:1.1rem; --shadow:0 10px 24px rgba(0,0,0,.38);
  --card-border: rgba(255,255,255,.14); --card-inner: rgba(255,255,255,.05);
  --tile-pad: 1rem; --max-grid: 1200px;
  --ease: cubic-bezier(.22,.75,.14,1);
}

/* Layout base */
*{ box-sizing:border-box }
html, body{ height:100%; overflow-x:hidden }
body{
  margin:0; color:var(--fg);
  background: radial-gradient(1200px 800px at 20% -10%, #2a175a 10%, transparent 60%),
              radial-gradient(1000px 600px at 120% 30%, #33206a 10%, transparent 65%),
              linear-gradient(180deg, var(--bg2), var(--bg));
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  min-height:100dvh; display:flex; flex-direction:column; position:relative;
}

/* Colorful animated gradient — subtle multi-hue with GPU transforms */
.bg{ position:fixed; inset:-14% -14% -18% -14%; z-index:-2; pointer-events:none;
     will-change: transform; animation: bg-drift 34s ease-in-out infinite alternate; filter: saturate(1.08) contrast(1.02); }
.bg{
  background:
    radial-gradient(closest-side at 18% 14%, hsla(352,95%,56%,.18), transparent 62%),
    radial-gradient(closest-side at 78% 26%, hsla(210,85%,60%,.16), transparent 65%),
    radial-gradient(closest-side at 60% 100%, hsla(270,85%,62%,.14), transparent 70%);
}
.bg.glow{
  z-index:-1;
  background: conic-gradient(from 220deg at 50% 40%, hsla(352,90%,52%,.08), transparent 38%, hsla(210,90%,56%,.08) 58%, transparent 78%, hsla(270,90%,58%,.08) 90%);
  filter: blur(16px);
  animation: bg-rotate 80s linear infinite;
}
@keyframes bg-drift{ 0%{ transform: translate3d(0,0,0) scale(1) } 100%{ transform: translate3d(2%, -2%, 0) scale(1.03) } }
@keyframes bg-rotate{ to { transform: rotate(360deg) } }

/* Header */
.site-header{ padding:3rem 1rem .6rem; text-align:center }
.site-title{
  margin:0 0 .25rem; letter-spacing:.08em; font-size:clamp(2rem, 6vw, 3.1rem); font-weight:900; text-transform:uppercase;
  background: linear-gradient(90deg, #fff, #b6c2ff 30%, #ff86a1 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 8px 30px rgba(255,46,80,.09);
}
.subtitle{ margin:.2rem 0 0; color:var(--muted) }

.site-main{ display:flex; flex:1; align-items:flex-start; justify-content:center }

/* Grid — 3 / 2 / 1 columns hard-capped */
.grid{ display:grid; gap:var(--gap); padding:1.2rem; width:min(100%, var(--max-grid)); margin-inline:auto;
  grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 899px){ .grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px){ .grid{ grid-template-columns: 1fr; } }

/* Cards */
.card{
  display:grid; grid-template-rows:auto auto; align-content:start; gap:.55rem;
  padding:var(--tile-pad); border-radius:var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00));
  border:1px solid var(--card-border); color:inherit; text-decoration:none; outline:none;
  box-shadow: var(--shadow), 0 0 0 1px var(--card-inner) inset;
  position:relative; overflow:hidden; transform: translateZ(0);
  min-height: clamp(136px, 14vh, 200px); will-change: transform;
  transition: transform .18s var(--ease), box-shadow .2s var(--ease), border-color .18s var(--ease);
}
.card::after{
  content:""; position:absolute; inset:0 0 auto 0; height:3px; border-radius:var(--radius) var(--radius) 0 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent); opacity:.5; transform: translateY(-1px);
}
.card:hover, .card:focus-visible{
  border-color: color-mix(in srgb, var(--accent), var(--card-border) 70%);
  box-shadow: 0 12px 28px rgba(255,46,80,.12), var(--shadow), 0 0 0 1px var(--card-inner) inset;
  transform: translateY(-1px) scale(1.01);
}
.card:focus-visible{ box-shadow: 0 0 0 3px var(--ring) inset, var(--shadow) }

.label{ font-weight:700; letter-spacing:.02em }
.icon{ width:40px; height:40px; display:block; color:var(--fg) }
.icon *{ fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round }
.icon .fill{ fill: currentColor; stroke: none }

.meta{ position:absolute; top:8px; right:10px; display:flex; gap:.45rem; align-items:center; font-size:12px; color:var(--muted) }
.dot{ width:8px; height:8px; border-radius:50%; background: color-mix(in srgb, var(--accent), transparent 45%) }

/* Ripple */
.ripple{ position:absolute; border-radius:999px; pointer-events:none; width:12px; height:12px;
  left:0; top:0; background: currentColor; opacity:.26; transform: translate(-50%, -50%) scale(.8);
  animation: ripple .6s cubic-bezier(.16,.84,.44,1) forwards; mix-blend-mode: screen }
@keyframes ripple{ to{ opacity:0; transform: translate(-50%, -50%) scale(18) } }

/* Reveal-on-load (simple) */
.reveal{ opacity:0; transform: translateY(6px) scale(.985); filter: saturate(.95) blur(.2px) }
.reveal.in{ opacity:1; transform:none; filter:none; transition: transform .5s var(--ease), opacity .4s ease; }

.site-footer{ color:var(--muted); text-align:center; padding:2rem 1rem calc(2rem + env(safe-area-inset-bottom)) }

@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important }
  .reveal, .reveal.in{ opacity:1 !important; transform:none !important; filter:none !important }
}
/* Prevent tiny overflow scroll on desktop */
@media (pointer:fine) and (min-width:900px) and (min-height:680px){
  html, body{ height:100dvh; overflow-y:hidden }
  body{ min-height:auto }
}