/* ── Cal Sans (display font for hero + headings) ── */
@font-face {
  font-family: 'Cal Sans';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/gh/calcom/font@1.0.0/fonts/webfonts/CalSans-SemiBold.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/gh/calcom/font@1.0.0/fonts/webfonts/CalSans-SemiBold.woff') format('woff');
}

/* ── Base & Scrollbar ── */
html {
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: rgba(113, 113, 122, 0.4) transparent;
}
body {
  background: #000;
}

/* Sections still establish a min-height for layout, but no scroll snapping —
   mouse wheel scrolling was getting stuck between snap points. */
.snap-section {
  min-height: 100vh;
}

/* Subtle ambient glow behind hero (like the reference) */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(80, 60, 140, 0.18), transparent 60%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(40, 40, 80, 0.10), transparent 60%);
}

/* ── Hero Background Video (faint, looped) ── */
.hero-bg-img {
  opacity: 0;
  filter: grayscale(100%) contrast(1.1) brightness(1);
  transform: scale(1.4);
  transform-origin: center;
  /* Constant-power-ish crossfade curve: ramps in faster at the start and
     plateaus near the end, so when paired with the outgoing video's
     symmetrical fade-out the midpoint stays near full brightness without
     the additive flash that plus-lighter causes on bright frames. */
  transition: opacity 0.6s cubic-bezier(0.4, 0.85, 0.6, 1);
  will-change: opacity;
  /* GPU-promote so opacity transitions don't trigger paint flickers */
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.hero-bg-img.is-active {
  opacity: 0.4;
}

/* Vignette + center scrim so text stays crisp & readable above the video */
.hero-bg-overlay {
  background:
    radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.65) 75%, #000 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, transparent 25%, transparent 75%, rgba(0, 0, 0, 0.7) 100%);
}

/* Make sure all hero content sits above the video + overlay */
#hero > *:not(.hero-bg-img):not(.hero-bg-overlay) {
  position: relative;
  z-index: 2;
}

/* ── Hero Intro: rest-of-hero reveal fires immediately after the name ── */
#main-nav,
.hero-kicker,
.hero-copy,
.hero-actions {
  opacity: 0;
  filter: blur(10px);
  transform: translateY(12px);
  will-change: opacity, filter, transform;
  animation: hero-rest-reveal 0.7s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

#main-nav {
  transform: translateY(-10px);
  animation-delay: 1.74s;
}

.hero-kicker {
  animation-delay: 1.74s;
}

.hero-copy {
  animation-delay: 1.84s;
}

.hero-actions {
  animation-delay: 1.94s;
}

@keyframes hero-rest-reveal {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/* All three layers (wrapper scale, outline, fill) share the same duration,
   delay and easing — so the reveal reads as one continuous motion rather
   than separate stages firing in sequence.                                  */
.hero-name-wrap {
  position: relative;
  isolation: isolate;
  will-change: transform;
  animation: hero-name-settle 2.7s cubic-bezier(0.65, 0, 0.35, 1) 0.24s both;
}

@keyframes hero-name-settle {
  from { transform: scale(1.18); }
  to   { transform: scale(1);    }
}


/* Two layers:
     1. The H1 itself is the outline — transparent fill, faint white stroke
        visible throughout the reveal, fades at the end.
     2. ::before is the fill — same glyphs, clip-path centerline expansion,
        colour walks through dark grey → mid grey → white.                    */
h1.hero-name {
  position: relative;
  display: inline-block;
  max-width: 100%;
  line-height: 1.15;
  font-family: 'Cal Sans', 'Nohemi', system-ui, sans-serif;
  font-weight: 700;
  text-align: center;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-shadow: none;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, 0);
  paint-order: stroke fill;
  opacity: 0;
  will-change: opacity;
  animation: hero-name-outline 2.7s cubic-bezier(0.65, 0, 0.35, 1) 0.24s forwards;
}

@keyframes hero-name-outline {
  0%   { opacity: 0; -webkit-text-stroke-color: rgba(255, 255, 255, 0);    }
  50%  { opacity: 1; -webkit-text-stroke-color: rgba(255, 255, 255, 0.18); }
  100% { opacity: 1; -webkit-text-stroke-color: rgba(255, 255, 255, 0);    }
}

.hero-name::before {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
  -webkit-text-stroke: 0;
  color: #0b0b0b;
  -webkit-text-fill-color: #0b0b0b;
  z-index: 1;
  /* Negative top/bottom insets so descenders (p, y, g) are never clipped. */
  clip-path: inset(50% -2% 50% -2%);
  -webkit-clip-path: inset(50% -2% 50% -2%);
  will-change: clip-path;
  animation: hero-name-fill 2.7s cubic-bezier(0.65, 0, 0.35, 1) 0.24s forwards;
}

@keyframes hero-name-fill {
  from {
    clip-path: inset(50% -2% 50% -2%);
    -webkit-clip-path: inset(50% -2% 50% -2%);
    -webkit-text-fill-color: #000;
  }
  to {
    clip-path: inset(-15% -2% -15% -2%);
    -webkit-clip-path: inset(-15% -2% -15% -2%);
    -webkit-text-fill-color: #fff;
  }
}

.hero-socials .social-icon {
  opacity: 0;
  filter: blur(10px);
  translate: 0 12px;
  scale: 0.84;
  will-change: opacity, filter, translate, scale;
  animation: hero-icon-reveal 0.65s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

.hero-socials .social-icon:nth-child(1) { animation-delay: 2.04s; }
.hero-socials .social-icon:nth-child(2) { animation-delay: 2.12s; }
.hero-socials .social-icon:nth-child(3) { animation-delay: 2.20s; }
.hero-socials .social-icon:nth-child(4) { animation-delay: 2.28s; }

@keyframes hero-icon-reveal {
  0% {
    opacity: 0;
    filter: blur(10px);
    translate: 0 12px;
    scale: 0.84;
  }
  72% {
    opacity: 1;
    filter: blur(0);
    translate: 0 -1px;
    scale: 1.02;
  }
  100% {
    opacity: 1;
    filter: blur(0);
    translate: 0 0;
    scale: 1;
  }
}

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  #main-nav,
  .hero-kicker,
  .hero-copy,
  .hero-actions,
  .hero-socials .social-icon,
  .hero-name-wrap,
  .hero-name,
  .hero-name::before {
    animation: none;
  }
  #main-nav,
  .hero-kicker,
  .hero-copy,
  .hero-actions,
  .hero-socials .social-icon {
    opacity: 1;
    filter: none;
    transform: none;
    translate: 0 0;
    scale: 1;
  }
  .hero-name-wrap { transform: none; }
  .hero-name {
    opacity: 1;
    color: #fff;
    -webkit-text-fill-color: #fff;
    -webkit-text-stroke: 0;
  }
  .hero-name::before { display: none; }
}

/* ── Timeline ── */
.timeline-track {
  position: relative;
}

/* Thread line — starts invisible, JS grows height to each new dot */
.timeline-thread {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 0;
  background: rgba(255, 255, 255, 0.18);
  pointer-events: none;
  will-change: height;
}

/* Dot: plain white circle, no halo */
.timeline-dot {
  background: #fff;
  opacity: 0;
}

/* Card item — JS handles the entrance via Web Animations API.
   Initial state lives here so cards stay invisible before JS runs.         */
.timeline-item {
  position: relative;
  opacity: 0;
  transform: translateY(-44px) scale(0.96);
  will-change: opacity, transform;
}

/* Stack later cards UNDER earlier ones so they appear from behind */
.timeline-item:nth-child(2) { z-index: 4; }
.timeline-item:nth-child(3) { z-index: 3; }
.timeline-item:nth-child(4) { z-index: 2; }
.timeline-item:nth-child(5) { z-index: 1; }

/* ── Sections fade-in on scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Nav active link (faint glass white) ── */
.glass-nav .nav-link.active,
.nav-link.active {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
  font-weight: 500;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.18) inset,
    0 0 18px rgba(255, 255, 255, 0.12),
    0 0 36px rgba(255, 255, 255, 0.06);
}

.glass-nav .nav-link.active:hover,
.nav-link.active:hover {
  color: #fff !important;
}

/* ── Tab buttons ── */
.tab-btn {
  color: rgba(161, 161, 170, 1);
}
.tab-btn.active {
  background: rgba(63, 63, 70, 0.6);
  color: #fff;
}

/* ── Glassmorphism navbar (dark) ── */
.glass-nav {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(10, 10, 10, 0.35);
  backdrop-filter: blur(28px) saturate(180%) brightness(1.04);
  -webkit-backdrop-filter: blur(28px) saturate(180%) brightness(1.04);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
    0 8px 32px -4px rgba(0, 0, 0, 0.45);
}

.glass-nav > * {
  position: relative;
  z-index: 1;
}

/* ── Glassmorphism cards (projects + experience) ── */
.glass-card {
  position: relative;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
    0 8px 32px -8px rgba(0, 0, 0, 0.6);
  transition: border-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.glass-card > * {
  position: relative;
  z-index: 1;
}

.glass-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  transform: translateY(-3px);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.08) inset,
    0 16px 48px -12px rgba(0, 0, 0, 0.75);
}

.project-card {
  /* Glass card already handles transitions; project-specific tweaks */
  overflow: hidden;
}

/* ── Glass button (dark frosted, lets backdrop show through) ── */
/* ── CTA hero buttons: scale up on hover ── */
.cta-btn {
  display: inline-block;
  transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.22s ease,
              background 0.22s ease,
              border-color 0.22s ease;
}
.cta-btn:hover {
  transform: scale(1.07);
}
.cta-btn:active {
  transform: scale(0.97);
  transition-duration: 0.1s;
}

.glass-btn {
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.3);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
    0 4px 16px -4px rgba(0, 0, 0, 0.5);
}

.glass-btn:hover {
  background: rgba(0, 0, 0, 0.42);
  border-color: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* ── Glass icon (social icons) ── */
.glass-icon {
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
    0 4px 16px -4px rgba(0, 0, 0, 0.5);
}

/* ── Project thumbnail video ── */
/* Crop a slim strip off the top (e.g. browser chrome / address bar in
   screen recordings) by scaling up from the bottom so the top overflows
   and gets clipped by the parent's `overflow-hidden`. */
.project-thumb-video {
  transform: scale(1.07);
  transform-origin: center bottom;
}

/* ── Social icon pulse on hover ── */
.social-icon {
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, border-color 0.25s ease;
}
.social-icon:hover {
  transform: translateY(-2px);
  background: #fff !important;
  color: #09090b !important;
  border-color: #fff !important;
}