/* GR Link — Neumorphic Design Tokens & Utilities */

:root {
  --bg: #E0E5EC;
  --fg: #3D4852;
  --muted: #6B7280;
  --accent: #66D694;
  --accent-dark: #3D8B56;
  --accent-light: #8BE8A8;
  --shadow-light: rgba(255, 255, 255, 0.5);
  --shadow-dark: rgb(163, 177, 198, 0.6);
  --shadow-light-strong: rgba(255, 255, 255, 0.6);
  --shadow-dark-strong: rgb(163, 177, 198, 0.7);
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--bg);
  color: var(--fg);
  font-family: 'DM Sans', sans-serif;
}

.font-display {
  font-family: 'Plus Jakarta Sans', sans-serif;
}

/* Neumorphic shadow utilities */
.neu-extruded {
  box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6),
              -9px -9px 16px rgba(255, 255, 255, 0.5);
}

.neu-extruded-hover {
  box-shadow: 12px 12px 20px rgb(163, 177, 198, 0.7),
              -12px -12px 20px rgba(255, 255, 255, 0.6);
}

.neu-extruded-sm {
  box-shadow: 5px 5px 10px rgb(163, 177, 198, 0.6),
              -5px -5px 10px rgba(255, 255, 255, 0.5);
}

.neu-inset {
  box-shadow: inset 6px 6px 10px rgb(163, 177, 198, 0.6),
              inset -6px -6px 10px rgba(255, 255, 255, 0.5);
}

.neu-inset-deep {
  box-shadow: inset 10px 10px 20px rgb(163, 177, 198, 0.7),
              inset -10px -10px 20px rgba(255, 255, 255, 0.6);
}

.neu-inset-sm {
  box-shadow: inset 3px 3px 6px rgb(163, 177, 198, 0.6),
              inset -3px -3px 6px rgba(255, 255, 255, 0.5);
}

/* Hover transition for cards & buttons */
.neu-card {
  transition: transform 300ms ease-out, box-shadow 300ms ease-out;
}

.neu-card:hover {
  transform: translateY(-2px);
  box-shadow: 12px 12px 20px rgb(163, 177, 198, 0.7),
              -12px -12px 20px rgba(255, 255, 255, 0.6);
}

.neu-btn {
  transition: transform 300ms ease-out, box-shadow 300ms ease-out;
}

.neu-btn:hover {
  transform: translateY(-1px);
  box-shadow: 12px 12px 20px rgb(163, 177, 198, 0.7),
              -12px -12px 20px rgba(255, 255, 255, 0.6);
}

.neu-btn:active {
  transform: translateY(0.5px);
  box-shadow: inset 3px 3px 6px rgb(163, 177, 198, 0.6),
              inset -3px -3px 6px rgba(255, 255, 255, 0.5);
}

/* Float animation */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Scroll reveal */
.scroll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Decorative circles */
.deco-circle {
  position: absolute;
  border-radius: 9999px;
  background: #E0E5EC;
}

/* iPhone mockup — CSS-only thin bezel (screenshots include status bar + Dynamic Island) */
.phone-mockup {
  position: relative;
  display: inline-block;
  background: #1a1a1a;
  border-radius: 38px;
  padding: 4px;
  box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6),
              -9px -9px 16px rgba(255, 255, 255, 0.5);
}

.phone-mockup img {
  display: block;
  width: 100%;
  border-radius: 34px;
}

/* Screenshot frame (legacy, keep for compatibility) */
.screenshot-frame {
  border-radius: 32px;
  overflow: hidden;
  box-shadow: 9px 9px 16px rgb(163, 177, 198, 0.6),
              -9px -9px 16px rgba(255, 255, 255, 0.5);
}

/* Mobile menu */
.mobile-menu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms ease-out;
}

.mobile-menu.open {
  max-height: 300px;
}

/* Nav link active state */
.nav-link {
  transition: color 200ms ease-out;
}

.nav-link.active {
  color: var(--accent-dark);
}

/* Gallery card with title + phone */
.gallery-card {
  transition: transform 300ms ease-out;
}

.gallery-card:hover {
  transform: translateY(-4px);
}

.gallery-card:hover .phone-mockup {
  box-shadow: 12px 12px 20px rgb(163, 177, 198, 0.7),
              -12px -12px 20px rgba(255, 255, 255, 0.6);
}

/* Screenshot carousel */
.screenshot-carousel {
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.screenshot-carousel::-webkit-scrollbar {
  display: none;
}

.screenshot-slide {
  width: 260px;
  flex-shrink: 0;
}

.screenshot-img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 300ms ease-out, box-shadow 300ms ease-out;
}

.screenshot-img:hover {
  transform: translateY(-4px);
  box-shadow: 12px 12px 24px rgb(163, 177, 198, 0.7),
              -12px -12px 24px rgba(255, 255, 255, 0.6);
}

@media (min-width: 768px) {
  .screenshot-slide {
    width: 300px;
  }
}

@media (min-width: 1024px) {
  .screenshot-carousel {
    justify-content: center;
  }
  .screenshot-slide {
    width: 240px;
  }
}