/* 1. Define the Custom Font */
@font-face {
  font-family: "MADE Outer Sans";
  /* Path adjusted to step out of css/ folder into assets/ */
  src:
    url("../assets/MADEOuterSans-Black.otf") format("opentype"),
    url("../assets/MADEOuterSans-Black.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
}

:root {
  --bg-color: #020402;
  --card-bg: #0a110c;
  --accent-primary: rgb(156, 255, 30);
}

/* 2. Utility class for custom font */
.font-made {
  font-family: "MADE Outer Sans", "Space Grotesk", sans-serif;
  font-weight: 900;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--bg-color);
  color: #ffffff;
  overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: "Space Grotesk", sans-serif;
  letter-spacing: -0.03em;
}

/* Modern Grid Background */
.bg-grid {
  background-size: 40px 40px;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

/* Buttons */
.btn-primary {
  background: rgb(156, 255, 30);
  color: black;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(156, 255, 30, 0.3);
}

.btn-primary:hover {
  box-shadow: 0 0 30px rgba(156, 255, 30, 0.5);
  transform: translateY(-2px);
  filter: brightness(1.1);
}

.btn-secondary {
  background: transparent;
  border: 1px solid rgba(156, 255, 30, 0.3);
  color: white;
  transition: all 0.3s ease;
}

.btn-secondary:hover {
  background: rgba(156, 255, 30, 0.1);
  border-color: rgba(156, 255, 30, 0.8);
  transform: translateY(-2px);
}

/* --- ANIMATIONS --- */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

.reveal-delay-100 {
  transition-delay: 0.1s;
}
.reveal-delay-200 {
  transition-delay: 0.2s;
}
.reveal-delay-300 {
  transition-delay: 0.3s;
}

/* --- PORTFOLIO SPECIFIC STYLES --- */

/* Filter Buttons */
.filter-btn {
  padding: 0.75rem 2rem;
  border-radius: 9999px;
  font-weight: 600;
  font-family: "Space Grotesk", sans-serif;
  transition: all 0.3s ease;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  color: #888;
  cursor: pointer;
  font-size: 0.9rem;
  white-space: nowrap;
}

.filter-btn:hover {
  color: white;
  border-color: rgba(156, 255, 30, 0.5);
  background: rgba(156, 255, 30, 0.05);
}

.filter-btn.active {
  background: rgb(156, 255, 30);
  color: black;
  border-color: rgb(156, 255, 30);
  box-shadow: 0 0 20px rgba(156, 255, 30, 0.4);
}

/* Portfolio Cards */
.portfolio-card-v1 {
  background-color: var(--card-bg);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: 1rem;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0; /* Hidden by default for JS animation */
  transform: translateY(20px);
  animation: cardAppear 0.5s ease forwards;
  display: flex;
  flex-direction: column;
}

@keyframes cardAppear {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.portfolio-card-v1:hover {
  border-color: rgba(156, 255, 30, 0.4);
  transform: translateY(-8px);
  box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5);
}

.card-image-container {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background-color: #111;
}

/* Video Specific Styles */
.video-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 */
  overflow: hidden;
}

.card-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.card-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.portfolio-card-v1:hover .card-image {
  transform: scale(1.05);
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8);
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: rgba(156, 255, 30, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(156, 255, 30, 0.4);
  color: black;
}

.portfolio-card-v1:hover .play-icon {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.card-content {
  padding: 1.5rem;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-category {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgb(156, 255, 30);
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.card-title {
  font-family: "Space Grotesk", sans-serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: white;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.card-desc {
  color: #9ca3af;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* --- New Learn More Link Styles --- */
.learn-more-link {
  display: inline-flex;
  align-items: center;
  margin-top: auto; /* Pushes to bottom if flex container has height */
  padding-top: 1rem;
  font-family: "Space Grotesk", sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgb(156, 255, 30);
  transition: all 0.3s ease;
  width: fit-content;
  text-decoration: none;
}

.learn-more-link i {
  margin-left: 0.5rem;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.learn-more-link:hover {
  color: #ffffff;
  text-shadow: 0 0 12px rgba(156, 255, 30, 0.6);
  transform: translateX(2px);
}

.learn-more-link:hover i {
  transform: translateX(4px);
  color: rgb(156, 255, 30); /* Keep arrow green or make white */
}