@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;800&display=swap');

:root{
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in: cubic-bezier(.32, 0, .67, 0);
}

html { scroll-behavior: smooth; }
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }

/* Subtle background noise for depth (very light, non-intrusive) */
.bg-noise {
  position: relative;
}
.bg-noise::before{
  content:"";
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.035;
  mix-blend-mode:multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

/* Glass */
.glass {
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

/* Gradients */
.liquid-gradient {
  background: linear-gradient(-45deg, #0071e3, #36b1ff, #8a3ffc, #0071e3);
  background-size: 400% 400%;
  animation: gradientMove 15s ease infinite;
}
@keyframes gradientMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hover lift (cards) */
.hover-lift { transition: transform .45s var(--ease-out), box-shadow .45s var(--ease-out); }
.hover-lift:hover { transform: translateY(-8px); box-shadow: 0 30px 60px -12px rgba(50,50,93,0.25), 0 18px 36px -18px rgba(0,0,0,0.3); }

/* Nav link underline */
.nav-link { position: relative; opacity: .82; transition: opacity .25s ease; }
.nav-link:hover { opacity: 1; }
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0;
  height: 2px;
  background: #0071e3;
  transition: width .25s var(--ease-out);
}
.nav-link:hover::after { width: 100%; }

/* Buttons */
.apple-button {
  transition: transform .18s var(--ease-out), background-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
  background: #1d1d1f;
}
.apple-button:hover { background: #0071e3; transform: translateY(-1px); box-shadow: 0 14px 28px -18px rgba(0,113,227,.9); }
.apple-button:active { transform: translateY(0); }

/* Page enter animation */
.page {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out);
}
html.is-loaded .page {
  opacity: 1;
  transform: translateY(0);
}

/* Scroll reveal */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .55s var(--ease-out), transform .55s var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Line clamp helpers (tailwind CDN may not include line-clamp plugin) */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.line-clamp-3 {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Hide scrollbar for horizontal chips */
.scrollbar-hide {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.scrollbar-hide::-webkit-scrollbar { display: none; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .liquid-gradient { animation: none; }
  .hover-lift, .page, .reveal, .apple-button, .nav-link::after { transition: none !important; }
}