/* ================================
   Base
================================ */
* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

html,
body,
#root {
  background: #0c0c0c;
}

body {
  font-family: 'Kanit', sans-serif;
}

/* ================================
   Gradient heading text
================================ */
.hero-heading {
  background: linear-gradient(180deg, #646973 0%, #bbccd7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* ================================
   Scroll-reveal (About / Services / Projects / Footer)
   Toggled by IntersectionObserver in main.js
================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-left {
  opacity: 0;
  transform: translateX(-80px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.reveal-left.in {
  opacity: 1;
  transform: translateX(0);
}
.reveal-right {
  opacity: 0;
  transform: translateX(80px);
  transition: opacity 0.9s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.9s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.reveal-right.in {
  opacity: 1;
  transform: translateX(0);
}

/* Hero content: animates in immediately on load, never scroll-gated */
.reveal-immediate {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.reveal-immediate.in {
  opacity: 1;
  transform: translateY(0);
}
.reveal-immediate-up {
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity 0.7s cubic-bezier(0.25, 0.1, 0.25, 1), transform 0.7s cubic-bezier(0.25, 0.1, 0.25, 1);
}
.reveal-immediate-up.in {
  opacity: 1;
  transform: translateY(0);
}

/* ================================
   Podcast marquee — continuous auto-scroll
================================ */
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-33.3333%);
  }
}
.marquee-track {
  animation: marquee 32s linear infinite;
}
.marquee-row:hover .marquee-track {
  animation-play-state: paused;
}

/* ================================
   Podcast tile play button
================================ */
.podcast-tile {
  position: relative;
  overflow: hidden;
}
.podcast-tile .play-overlay {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.podcast-tile:hover .play-overlay {
  opacity: 1;
}

/* ================================
   Video modal
================================ */
#video-modal {
  display: none;
}
#video-modal.open {
  display: flex;
}

/* ================================
   Magnet portrait hover
================================ */
#hero-portrait-magnet {
  will-change: transform;
}

/* ================================
   Case-study cover hover arrow
================================ */
.cover-tile .cover-arrow {
  opacity: 0;
  transition: opacity 0.2s ease;
}
.cover-tile:hover .cover-arrow {
  opacity: 1;
}

/* ================================
   Sticky project cards
================================ */
.project-card-inner {
  transform-origin: top;
  will-change: transform;
}