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

/* The Seasons — self-hosted */
@font-face {
  font-family: 'TheSeasons';
  src: url('../assets/fonts/TheSeasons-Reg.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'TheSeasons';
  src: url('../assets/fonts/TheSeasons-Bd.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ========== DaisyUI Theme Overrides ========== */
:root {
  --color-base-100: oklch(1 0 0);
  --color-base-200: oklch(0.97 0 0);
  --color-base-300: oklch(0.94 0 0);
  --color-base-content: oklch(0.15 0 0);
  --color-primary: oklch(0.15 0 0);
  --color-primary-content: oklch(1 0 0);
  --color-secondary: oklch(0.94 0 0);
  --color-secondary-content: oklch(0.15 0 0);
  --color-accent: oklch(0.15 0 0);
  --color-accent-content: oklch(1 0 0);
  --color-neutral: oklch(0.15 0 0);
  --color-neutral-content: oklch(0.94 0 0);
  --color-info: oklch(0.7 0.1 220);
  --color-success: oklch(0.7 0.15 160);
  --color-warning: oklch(0.85 0.15 85);
  --color-error: oklch(0.65 0.2 25);
  --radius-selector: 0.5rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  --border: 1px;
  --depth: 1;
  --noise: 0;
}

/* ========== Typography ========== */
body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'TheSeasons', Georgia, 'Times New Roman', serif;
  font-weight: 400 !important;
}

.logo-text {
  font-family: 'TheSeasons', Georgia, 'Times New Roman', serif;
  font-weight: 700 !important;
}

.footer-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

.portfolio-item .card-title,
.project-card .card-title {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 600 !important;
}

/* ========== Comparison Table Zebra ========== */
.compare-table tbody tr:nth-child(even) {
  background-color: oklch(0.92 0 0);
}

/* ========== Scroll Reveal ========== */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

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

/* ========== Logo Marquee ========== */
.marquee__track {
  display: flex;
  gap: 4rem;
  animation: marquee 30s linear infinite;
  width: max-content;
}

.marquee__track:hover {
  animation-play-state: paused;
}

.marquee__item {
  display: flex;
  align-items: center;
  white-space: nowrap;
  opacity: 0.6;
  transition: opacity 0.25s ease;
}

.marquee__item:hover {
  opacity: 1;
}

.marquee__item img {
  height: 28px;
  width: auto;
  filter: grayscale(1);
  transition: filter 0.25s ease;
}

.marquee__item:hover img {
  filter: grayscale(0);
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ========== Floating CTA (Mobile) ========== */
.floating-cta {
  display: none;
  position: fixed;
  bottom: 1.5rem;
  left: 1rem;
  right: 1rem;
  z-index: 999;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.25s ease;
}

.floating-cta.visible {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 768px) {
  .floating-cta {
    display: block;
  }
}

/* ========== Portfolio Page ========== */
.portfolio-item__image {
  width: 100%;
  height: 240px;
  overflow: hidden;
}

.portfolio-item__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.portfolio-item:hover .portfolio-item__image img {
  transform: scale(1.05);
}