/* index.css — lightweight animations & polished interactions for the home page */

/* helper tokens */
:root {
  --muted: #94a3b8;
  --card-elev: rgba(2,6,23,0.35);
}

/* hero layout tweaks */
.hero-inner { align-items: center; }
.hero-card { background: linear-gradient(180deg, rgba(255,255,255,0.03), rgba(255,255,255,0.02)); }

/* logo */
.logo { background: linear-gradient(90deg,#e6eef5,#d8f6ff); box-shadow: 0 6px 24px rgba(2,6,23,0.12); }

/* rotator text */
.rotator { display:flex; gap:.6rem; align-items:center; }
.rotating-word { display:inline-block; position:relative; transition: opacity 280ms ease, transform 280ms cubic-bezier(.2,.9,.3,1); }

/* tiles */
.tiles .tile {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid rgba(255,255,255,0.04);
  box-shadow: 0 8px 18px rgba(2,6,23,0.18);
  cursor: pointer;
  transition: transform 220ms cubic-bezier(.22,.9,.3,1), box-shadow 220ms;
}
.tiles .tile:focus { outline: none; box-shadow: 0 10px 28px rgba(2,6,23,0.25); transform: translateY(-6px); }
.tiles .tile:hover { transform: translateY(-6px); box-shadow: 0 14px 36px rgba(2,6,23,0.25); }

/* hover tilt (parallax) */
.hover-tilt { will-change: transform; transform-style: preserve-3d; }

/* buttons */
.btn { position:relative; overflow:hidden; color: var(--text-muted); }
.btn[data-ripple] { --ripple-color: rgba(255,255,255,0.18); }

/* subtle badges */
.badge { display:inline-block; background:linear-gradient(90deg,#10b981,#06b6d4); color:white; padding:.25rem .5rem; border-radius:9999px; font-weight:700; font-size:.75rem; }

/* footer muted */
.text-muted { color: var(--muted); }

/* entrance reveal */
.reveal { opacity:0; transform: translateY(6px); transition: opacity 420ms ease, transform 420ms ease; }
.reveal.show { opacity:1; transform: translateY(0); }

.brand h1{
  font-size: clamp(1.2rem, 4vw, 35px);
}

/* responsive */
@media (max-width: 720px) {
  .hero-inner { grid-template-columns: 1fr; }
  .tiles { grid-template-columns: 1fr 1fr; }
}

/* respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rotating-word, .reveal, .tiles .tile { transition: none !important; animation: none !important; transform: none !important; }
}