/* Local fonts — paths relative to css/main.css */
@font-face {
  font-family: 'Obviously Demo';
  src:
    url('../fonts/Obviously-NarrowSuper.woff2') format('woff2'),
    url('../fonts/Obviously-NarrowSuper.woff') format('woff');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}

/* Obviously Demo display type — 465px / 228px @ 1920 */
.obviously-headline {
  font-family: 'Obviously Demo', sans-serif;
  font-weight: 400;
  color: #ff1b1b;
  text-transform: uppercase;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 0.9;
}

.obviously-headline--465 {
  font-size: clamp(2.5rem, 24.21875vw, 465px);
  line-height: clamp(2rem, 18.229166vw, 350px);
}

.obviously-headline--connect {
  font-size: clamp(1.5rem, 11.875vw, 200px);
  line-height: clamp(1.125rem, 7.03125vw, 171px);
  letter-spacing: 0.01em;
  text-align: center;
  max-width: 100%;
  white-space: nowrap;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

/* Lenis adds .lenis — avoid double-smoothing with CSS scroll-behavior */
html.lenis {
  scroll-behavior: auto;
}

body {
  min-height: 100vh;
  background-color: #1D1E20;
  overflow-x: hidden;
  overflow-y: auto;
  font-family: 'Be Vietnam Pro',-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

@media (max-width: 767px) {
  body {
    width: 100%;
    padding-left: 30px;
    padding-right: 30px;
  }

  .main.screen-1,
  .screen-1 .phase-1,
  .screen-1 .phase-2,
  .screen-1 .phase-3 {
    overflow: visible;
  }

  .hidden-xs {
    display: none;
  }
}

/* Header - fixed at top, initially hidden */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  opacity: 0;
  transform: translateY(-10px);
  transition: none;
  display: flex;
  justify-content: center;
}

.header.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Phase 5: header translateY driven by JS with Screen 1 — no transition smoothing */
.header.phase-5-active {
  transition: none;
}

/* Header - HTML/CSS, responsive with vw (design base 1920px, scales to 1024px) */
.header-bar {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0.52vw 0; /* 10px at 1920 */
  border-bottom: 1px solid #4D515D;
  border-radius: 100px;
  font-family: 'Be Vietnam Pro', -apple-system, sans-serif;
}

.header-pill {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0.52vw 1.04vw; /* 10px 20px at 1920 */
  border-radius: 1.25vw; /* 24px at 1920 */
}

.header-pill > div {
  font-weight: 400;
  font-size: clamp(12px, 0.73vw, 14px); /* 14px at 1920 */
  line-height: clamp(14px, 0.94vw, 18px); /* 18px at 1920 */
  letter-spacing: 0.1em;
  color: #FFFFFF;
  white-space: nowrap;
  padding-right: 15px;
  margin-right: 15px;
  border-right: 1px solid rgba(128, 128, 128, 0.5);
}

.header-pill > div:last-child {
  padding-right: 0;
  margin-right: 0;
  border-right: none;
}

.header-pill span {
  font-weight: 700;
  font-size: clamp(12px, 0.73vw, 14px);
  line-height: 1.29;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FF1B1B;
}

/* Scroll spacer - creates scrollable height for the Bio zone (Phase 5 lift completes at end).
   120vh = scroll 1: logos part + bio appears already filled (white); scroll 2: lift into Work. */
.scroll-spacer {
  height: 120vh;
  width: 100%;
  pointer-events: none;
}

/* Screen 2 Phase 1 spacer - creates scroll range for Work.svg fade-in (after Phase 5 completes) */
.screen-2-phase1-spacer {
  height: 150vh;
  width: 100%;
  pointer-events: none;
}

/* Screen 2 Phase 1 overlay - fixed, Work.svg centered, fades in on scroll via JS */
.screen-2-phase1-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1D1E20;
  pointer-events: none;
  visibility: hidden;
  transition: visibility 0.3s ease-out;
}

.screen-2-phase1-overlay.visible {
  visibility: visible;
}

.work-logo-centered {
  width: 55.47vw;
  max-width: 1065px;
  min-width: 280px;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

/* Work.svg opacity driven by JS for scroll-based fade-in */

/* ===== Screen 1 =====
   Main content area with 4 phases:
   Phase 1: Load – logos animate in from top/bottom
   Phase 2: Scroll – logos move up/down (scroll-mode)
   Phase 3: Scroll – bio text appears with character fill
   Phase 4: Scroll – text fades out, logos return to center
*/
.main.screen-1 {
  position: fixed;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  pointer-events: none;
  background: #1D1E20; /* opaque so fixed work layer (z-index 0) never shows through Screen 1 */
}

.main.screen-1 > * {
  pointer-events: auto;
}

/* Screen 1 – Phase 1: Load – logos animate in from top/bottom */
.screen-1 .phase-1 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Screen 1 – Phase 2: Scroll – logos move up/down (handled by scroll-mode on .main) */
.screen-1 .phase-2 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Screen 1 – Phase 3: Scroll – bio text appears with character fill animation */
.screen-1 .phase-3 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.screen-1 .phase-3 .bio-section {
  pointer-events: auto;
}

/* Screen 1 – Phase 4: structural placeholder (scroll transition is Phase 5; no fade/center) */
.screen-1 .phase-4 {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.logo-wrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Logo base styles */
.logo {
  max-width: 90vw;
  width: 70.05vw; /* 1345px at 1920 */
  height: auto;
  object-fit: contain;
}

/* JAGRUTI - starts above center, animates down with fade-in */
.logo-jagruti {
  position: relative;
  opacity: 0;
  transform: translateY(-80px);
}

.logo-jagruti.animate-in {
  /* ease-out: smooth deceleration at end - no sudden jump before center */
  animation: jagruti-slide-in 1.2s cubic-bezier(0, 0, 0.58, 1) forwards;
}

@keyframes jagruti-slide-in {
  from {
    opacity: 0;
    transform: translateY(-80px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* JAYKAR - starts below center, animates up with fade-in */
.logo-jaykar {
  position: relative;
  opacity: 0;
  transform: translateY(80px);
}

.logo-jaykar.animate-in {
  /* ease-out: smooth deceleration at end - no sudden jump before center */
  animation: jaykar-slide-in 1.2s cubic-bezier(0, 0, 0.58, 1) forwards;
}

@keyframes jaykar-slide-in {
  from {
    opacity: 0;
    transform: translateY(80px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Footer - fixed at bottom, initially hidden */
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 10;
  opacity: 0;
  transform: translateY(10px);
  transition: none;
  display: flex;
  justify-content: center;
  padding: 1.5rem 0;
}

.footer.visible {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Nav - HTML/CSS, responsive with vw (design base 1920px, scales to 1024px) */
.footer-nav {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 0.78vw 2.08vw; /* 15px 40px at 1920 */
  gap: 2.08vw; /* 40px at 1920 */
  width: 31.15vw; /* 598px at 1920 */
  min-width: 280px; /* prevent too narrow at 1024 */
  max-width: 598px;
  height: 3.75vw; /* 72px at 1920 */
  min-height: 48px;
  justify-content: center;
  background: rgba(15, 15, 16, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 2.08vw; /* 40px at 1920 */
  font-family: 'Be Vietnam Pro', -apple-system, sans-serif;
  box-sizing: border-box;
}

.footer-nav-panel {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.footer-nav-links {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2.08vw; /* 40px at 1920 */
}

.footer-nav-divider,
.footer-nav-mobile-bar {
  display: none;
}

.footer-nav-current {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
}

.footer-nav-current-dot {
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background: #ff1b1b;
  border-radius: 50%;
}

.footer-nav-current-label {
  font-size: 12px;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
}

.footer-nav-menu-toggle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-family: inherit;
}

.footer-nav-menu-label {
  font-size: 12px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #ffffff;
  opacity: 0.5;
}

.footer-nav-menu-icon {
  display: block;
  flex-shrink: 0;
}

.footer-nav-menu-icon--close {
  display: none;
}

.nav-link {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.31vw; /* 6px at 1920 */
  padding: 0;
  text-decoration: none;
  font-size: clamp(12px, 0.83vw, 16px); /* 16px at 1920, min 12px at 1024 */
  line-height: 1.25;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #FFFFFF;
  font-weight: 500;
  opacity: 0.5;
  transition: opacity 0.2s ease, font-weight 0.2s ease;
}

.nav-link::before {
  content: '';
  flex-shrink: 0;
  width: 0.42vw; /* 8px at 1920 */
  height: 0.42vw;
  min-width: 6px;
  min-height: 6px;
  background: #FF1B1B;
  border-radius: 50%;
  opacity: 0;
  margin-right: -0.52vw; /* ~-10px to compensate when visible */
}

.nav-link:hover {
  opacity: 0.8;
}

.nav-link.active {
  font-weight: 600;
  opacity: 1;
}

.nav-link.active::before {
  opacity: 1;
  margin-right: 0;
}

/* Bio section - centered text, initially hidden */
.bio-section {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8rem 2rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease-out, visibility 0.5s ease-out;
  pointer-events: none;
}

.bio-section.visible {
  opacity: 1;
  visibility: visible;
}

.bio-text-wrapper {
  max-width: 600px;
  text-align: center;
}

.bio-text {
  font-size: 1.1rem;
  line-height: 1.7;
  font-weight: 300;
  color: #fff;
}

/* Char states (scroll-driven):
   base   → hidden (types in on scroll 1)
   revealed → grey visible
   filled → white (illuminates on scroll 2) */
.bio-text .char {
  color: rgba(255, 255, 255, 0.5);
  opacity: 0;
  transition: color 0.5s ease-out, opacity 0.3s ease-out;
}

.bio-text .char.char--revealed {
  opacity: 1;
}

.bio-text .char.char--filled {
  opacity: 1;
  color: #FFFFFF;
}

/* Lock final state after load animation - prevents replay when scrolling back up */
.logo-jagruti.has-animated,
.logo-jaykar.has-animated {
  animation: none !important;
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.5s ease-out;
}

/* Logo scroll states - JAGRUTI moves up, JAYKAR moves down (via JS inline transforms) */
/* animation: none is required - CSS animations override inline transform when using forwards */
/* Logos must have higher z-index so they stay visible above bio-section when moving */
.main.scroll-mode .logo-wrapper {
  z-index: 2;
}

/* animation: none + opacity: 1 - cancel keyframes so our transform works; opacity: 1 keeps logos visible */
.main.scroll-mode .logo-jagruti {
  animation: none !important;
  opacity: 1;
  transition: transform 0.5s ease-out;
  will-change: transform;
}

.main.scroll-mode .logo-jaykar {
  animation: none !important;
  opacity: 1;
  transition: transform 0.5s ease-out;
  will-change: transform;
}

/* ===== Phase 5 + Screen 2 =====
   Phase 5: Screen 1 scrolls up, Screen 2 enters
   Screen 2 Phase 1: Work.svg fades in on scroll
*/
.screen-2 {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateY(100%);
  transition: none; /* scroll-driven via JS */
  pointer-events: none;
}

.screen-2.phase-5-active {
  pointer-events: auto;
}

.screen-2 .screen-2-phase-1 {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Work.svg - 1065px at 1920 = 55.47vw, centered, fade-in on scroll */
.work-logo {
  width: 55.47vw;
  max-width: 1065px;
  min-width: 280px;
  height: auto;
  object-fit: contain;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}

.work-logo.visible {
  opacity: 1;
}

/* ===== Screen 2 Phase 2 =====
   After pause: Work.svg sticky top, projects stack one over one
*/
.screen-2-phase-2 {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
  overflow: hidden;
}

.screen-2.phase-2-active .screen-2-phase-1 {
  display: none;
}

.screen-2.phase-2-active .screen-2-phase-2 {
  display: flex;
}

/* Screen 3: Skills — fixed under Work; heading + accordion scroll-driven in main.js */
.skills-section {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: #1D1E20;
  overflow: hidden;
  pointer-events: none;
  transition: none; /* lift translateY driven by JS */
}

.skills-section.skills-section--interactive {
  pointer-events: auto;
}

.skills-section-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

.skills-heading-wrap {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 100%;
  z-index: 0;
  display: flex;
  justify-content: center;
  padding: 0 1rem;
  pointer-events: none;
  will-change: transform, opacity;
}

.skills-logo {
  flex-shrink: 0;
  text-align: center;
  letter-spacing: 0.02em;
}

.skills-carousel {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: 4vh 4vw 4vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
  /* “Read” pan uses transform on `.skills-scroll-column` (scrollHeight was unreliable with overflow:hidden) */
}

/* Accordion + disclaimer move together (JS transform on this wrapper) */
.skills-scroll-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2.6vw; /* 50px @ 1920 — Figma gap between block and disclaimer */
  width: 92%;
  max-width: 55.52vw; /* 1066px @ 1920 */
  flex-shrink: 0;
  will-change: transform, opacity;
}

.skills-stack {
  width: 100%;
  max-width: none;
  margin-bottom: 0;
  pointer-events: none;
  will-change: auto;
  background: rgba(15, 15, 16, 0.8);
  backdrop-filter: blur(0.52vw);
  -webkit-backdrop-filter: blur(0.52vw);
}

.skills-stack.skills-stack--interactive {
  pointer-events: auto;
}

.skills-stack.skills-stack--interactive .skill-accordion-top {
  cursor: pointer;
}

.skill-item {
  position: relative;
  width: 100%;
  overflow: visible;
}

.skill-item-inner {
  position: relative;
  width: 100%;
  max-width: none;
  transform-origin: center center;
  overflow: visible;
}

/* Figma accordion — vw @ 1920; border #79797A; title ~40/60; body 24/30 weight 300 */
.skill-accordion {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  gap: 0.52vw; /* 10px @ 1920 */
  border-style: solid;
  border-color: #79797a;
  border-width: 0.052vw 0.052vw 0 0.052vw; /* 1px @ 1920 */
  margin: 0;
  transition: gap 0.42s cubic-bezier(0.33, 1, 0.68, 1);
}

.skill-item--open .skill-accordion {
  gap: 1.3vw; /* 25px @ 1920 */
}

.skill-item:last-child .skill-accordion {
  border-bottom-width: 0.052vw;
}

.skill-accordion-top {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 3.91vw; /* 75px @ 1920 */
  width: 100%;
  padding: 2.08vw; /* 40px @ 1920 */
  transition: padding-bottom 0.42s cubic-bezier(0.33, 1, 0.68, 1);
}

.skill-item--open .skill-accordion .skill-accordion-top {
  padding-bottom: 0.5vw;
}

.skill-accordion-title {
  /* Figma uses Obviously Demo 550 — fallback to Be Vietnam Pro until a webfont is added */
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 2.083vw, 2.5rem);
  line-height: 1.5;
  letter-spacing: 0;
  color: #ffffff;
  margin: 0;
  text-align: left;
  flex: 1;
  min-width: 0;
  transition: color 0.28s ease-out;
}

.skill-item--open .skill-accordion-title {
  color: #ff1b1b;
}

.skill-accordion-toggle {
  position: relative;
  flex-shrink: 0;
  isolation: isolate;
  width: max(2rem, 2.08vw); /* 40px @ 1920, floor for narrow viewports */
  height: max(2rem, 2.08vw);
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ff1b1b;
  border: none;
  border-radius: 0.21vw; /* 4px @ 1920 */
  cursor: pointer;
}

.skill-icon {
  position: relative;
  width: max(0.75rem, 0.73vw); /* 14px @ 1920 */
  height: max(0.75rem, 0.73vw);
  display: block;
  flex-shrink: 0;
}

/* Closed: + (two bars, black on red) */
.skill-icon--plus::before,
.skill-icon--plus::after {
  content: '';
  position: absolute;
  background: #1D1E20;
  border-radius: 0.052vw; /* 1px @ 1920 */
}

.skill-icon--plus::before {
  width: 0.104vw; /* 2px @ 1920 */
  height: 0.73vw;
  left: 0.31vw; /* 6px @ 1920 */
  top: 0;
}

.skill-icon--plus::after {
  width: 0.73vw;
  height: 0.104vw;
  left: 0;
  top: 0.31vw;
}

/* Open: × (two diagonals) */
.skill-icon--close::before,
.skill-icon--close::after {
  content: '';
  position: absolute;
  width: 0.104vw;
  height: 0.94vw; /* 18px @ 1920 */
  left: 0.31vw;
  top: -0.104vw; /* -2px @ 1920 */
  background: #1D1E20;
  border-radius: 0.052vw;
}

.skill-icon--close::before {
  transform: rotate(45deg);
}

.skill-icon--close::after {
  transform: rotate(-45deg);
}

.skill-icon--close {
  display: none;
}

.skill-item--open .skill-icon--plus {
  display: none;
}

.skill-item--open .skill-icon--close {
  display: block;
}

/* Grid 0fr→1fr animates panel height without display:none snap */
.skill-accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  width: 100%;
  margin: 0;
  padding: 0 2.08vw;
  overflow: hidden;
  transition:
    grid-template-rows 0.42s cubic-bezier(0.33, 1, 0.68, 1),
    padding-bottom 0.42s cubic-bezier(0.33, 1, 0.68, 1);
}

.skill-item--open .skill-accordion-panel {
  grid-template-rows: 1fr;
  padding-bottom: 2.08vw; /* 40px @ 1920 */
}

.skill-accordion-panel > p {
  overflow: hidden;
  min-height: 0;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 300;
  font-size: clamp(1rem, 1.25vw, 1.5rem);
  line-height: 1.25;
  color: #ffffff;
  margin: 0;
}

@media (prefers-reduced-motion: reduce) {
  .skill-accordion,
  .skill-accordion-top,
  .skill-accordion-title,
  .skill-accordion-panel {
    transition: none;
  }
}

.skills-disclaimer {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 55vw; /* 1028px @ 1920 */
  margin: 0;
  padding: 0 0 2.6vw;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-size: 1.042vw;
  font-style: italic;
  font-weight: 300;
  line-height: 1.5;
  text-align: center;
  color: #fff;
}

.skills-disclaimer-asterisk {
  font-style: italic;
  color: #FF1B1B;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Work section: above Skills (z-index 1); lift transform driven by main.js */
.work-section {
  position: fixed;
  inset: 0;
  z-index: 1;
  background: #1D1E20;
  overflow: hidden;
  pointer-events: none;
}

.work-section.work-section--interactive {
  pointer-events: auto;
}

.work-section-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 100vh;
}

/* Work.svg: top 10px, behind projects; JS sets translateX(-50%) + translateY */
.work-heading-wrap {
  position: absolute;
  left: 50%;
  top: 10px;
  width: 100%;
  z-index: 0;
  display: flex;
  justify-content: center;
  padding: 0 1rem;
  pointer-events: none;
  will-change: transform, opacity;
}

.work-logo-sticky {
  flex-shrink: 0;
  text-align: center;
  letter-spacing: -0.01em;
}

.projects-carousel {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.project-item {
  position: absolute;
  inset: 0;
  pointer-events: none; /* container spans the full viewport — never let it capture clicks */
  overflow: visible;
}

/* Only the sized card box captures clicks. The container is full-viewport (inset:0), so when two
   cards are interactive at once (small mobile gap) a later-DOM card's container would otherwise cover
   and block the visible card. Scoping pointer-events to the inner keeps each card clickable. */
.project-item--interactive .project-item-inner {
  pointer-events: auto;
}

.project-item-inner {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 77.34vw;
  max-width: 1485px;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform, opacity;
  overflow: visible;
}

/* Stable hover: a soft lift instead of the old pointer-driven 3D tilt (which shivered on large cards) */
.project-item-tilt {
  display: block;
  position: relative;
  transform: translateY(0) scale(1);
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
  border-radius: 4px;
}

.project-item--interactive .project-item-tilt:hover {
  transform: translateY(-8px) scale(1.012);
}

.project-item-inner a {
  display: block;
}

/* External-link cue: arrow nudges up-and-out on hover to signal "opens in a new tab" */
.project-item-arrow {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  opacity: 0;
  transform: translate(-6px, 6px);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.23, 1, 0.32, 1);
  pointer-events: none;
  display: none !important;
}

.project-item-arrow svg {
  width: 20px;
  height: 20px;
  display: block;
}

.project-item--interactive .project-item-tilt:hover .project-item-arrow {
  opacity: 1;
  transform: translate(0, 0);
}

.project-item-tilt picture {
  display: block;
  width: 100%;
}

.project-item img,
.project-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  transform: translateZ(0);
  backface-visibility: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* In-flow spacer so document stays scrollable while work is position:fixed */
.work-scroll-spacer,
.work-lift-spacer,
.skills-scroll-spacer,
.skills-lift-spacer,
.recognition-scroll-spacer,
.recognition-lift-spacer,
.connect-scroll-spacer {
  width: 100%;
  pointer-events: none;
}

/* Screen 5: Connect — same z-index as Recognition (0); DOM order: #connect before #recognition so Recognition paints on top until it lifts */
.connect-section {
  position: fixed;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #1D1E20;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
  /* JS: enter from bottom after Recognition lifts (translateY + opacity) — no CSS transition */
}

.connect-section.connect-section--interactive {
  pointer-events: auto;
}

.connect-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: min(96vw, 75rem);
  width: 100%;
  box-sizing: border-box;
  gap: clamp(2.5rem, 8vh, 6rem);
}

.connect-headline {
  width: 100%;
}

.connect-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4vw;
  width: 100%;
  max-width: min(66vw, 1223px);;
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 500;
  font-size: clamp(0.875rem, 1.25vw, 1.25rem);
  letter-spacing: 0.02em;
}

.connect-link {
  color: #fff;
  text-decoration: none;
  white-space: nowrap;
  /* transition: color 0.2s ease, opacity 0.2s ease; */
  display: flex;
  align-items: center;
  gap: 0.781vw;
}

.connect-link svg {
  width: 2.5vw;
  height: 2.5vw;
}

.connect-link:hover,
.connect-link:focus-visible {
  color: #ff1b1b;
  outline: none;
}

.connect-link:hover svg path,
.connect-link:focus-visible svg path {
  stroke: #ff1b1b;
}

.connect-link:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

@media (max-width: 640px) {
  .connect-links {
    gap: 24px;
    max-width: unset;
    justify-content: space-between;
  }

  .connect-link {
    font-size: 12px;
  }

  .connect-link svg {
    width: 22px;
    height: 22px;
  }
}

/* Screen 4: Recognition — under Skills (z-index 1); above Connect (same z-index 0, later in DOM); JS: scroll fill + lift */
.recognition-section {
  position: fixed;
  inset: 0;
  z-index: 0;
  background: #1D1E20;
  overflow: hidden;
  pointer-events: none;
}

.recognition-section.recognition-section--interactive {
  pointer-events: auto;
}

/* Same pattern as Screen 3 `.skills-carousel` + `#skills-scroll-column`: clip + pan (no vertical centering) */
.recognition-carousel {
  position: absolute;
  inset: 0;
  z-index: 1;
  box-sizing: border-box;
  padding: 4vh clamp(1.25rem, 6vw, 7.5rem) 4vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: hidden;
}

.recognition-scroll-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: min(96vw, 75rem);
  flex-shrink: 0;
  will-change: transform, opacity;
}

.recognition-text-wrapper {
  width: 100%;
  text-align: left;
}

/* Hero stack: 150px / 135px @ 1920 → 7.8125vw / 7.03125vw (1vw ≈ 19.2px) */
.recognition-text {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 900;
  font-size: clamp(1.25rem, 7.8125vw, 150px);
  line-height: clamp(1.125rem, 7.03125vw, 135px);
  letter-spacing: -0.04em;
  text-transform: uppercase;
  margin: 0;
  color: #fff;
}

.recognition-text .char {
  color: rgba(255, 255, 255, 0.35);
  transition: color 0.28s ease-out;
}

.recognition-text .char.char--filled {
  color: #ffffff;
}

.recognition-text-accent .char.char--filled {
  color: #ff1b1b;
}

/* Awards — start faded out; opacity driven by scroll (same progress as hero fill) */
.recognition-awards {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: flex-end;
  margin-left: auto;
  gap: clamp(2rem, 2.08vw, 2.5rem);
  width: min(100%, 41.145vw);
  max-width: min(100%, 41.145vw);
  /* 170px @ 1920 design width */
  margin-top: -8.854vw;
  box-sizing: border-box;
  opacity: 0;
  transition: opacity 0.28s ease-out;
}

.recognition-awards-intro {
  display: flex;
  flex-direction: column;
  gap: clamp(1rem, 1.5625vw, 1.875rem);
  width: 100%;
}

.recognition-awards-heading-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 1rem;
}

.recognition-awards-label {
  font-family: 'Barlow', 'Be Vietnam Pro', sans-serif;
  font-weight: 600;
  font-size: clamp(1rem, 1.042vw, 1.25rem);
  line-height: clamp(1.2rem, 1.25vw, 1.5rem);
  letter-spacing: 0.05em;
  color: #d9d9d9;
  margin: 0;
  text-transform: uppercase;
}

.recognition-awards-label--year {
  text-align: right;
  flex-shrink: 0;
}

.recognition-awards-accent-line {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 4px solid #ff1b1b;
}

.recognition-awards-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 2.08vw, 2.5rem);
}

.recognition-award {
  display: flex;
  flex-direction: column;
  gap: clamp(2rem, 2.08vw, 2.5rem);
  width: 100%;
}

.recognition-award-inner {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(1rem, 1.25vw, 1.5rem);
  width: 100%;
}

.recognition-award-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(1rem, 1.042vw, 1.25rem);
  flex: 1;
  min-width: 0;
}

.recognition-award-title {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 600;
  font-size: clamp(1.5rem, 2.083vw, 2.5rem);
  line-height: clamp(1.6875rem, 2.344vw, 2.8125rem);
  color: #fff;
  margin: 0;
}

.recognition-award-subtitle {
  font-family: 'Be Vietnam Pro', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 1.042vw, 1.25rem);
  line-height: clamp(1.25rem, 1.302vw, 1.5625rem);
  color: #d9d9d9;
  margin: 0;
}

.recognition-award-year {
  font-family: 'Barlow', 'Be Vietnam Pro', sans-serif;
  font-weight: 500;
  font-size: clamp(1.125rem, 1.25vw, 1.5rem);
  line-height: clamp(1.35rem, 1.51vw, 1.8125rem);
  color: #ff1b1b;
  margin: 0;
  flex-shrink: 0;
  text-align: right;
}

.recognition-award-line {
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid #4d515d;
}

/* Trailing filmstrip node — absolute-centered like a project card; JS drives translateY/scale so it
   rises in after the last project. Only clickable while it's the active (near-center) node. */
.work-ux-cases {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  will-change: transform, opacity;
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}

.work-ux-cases.work-ux-cases--interactive {
  pointer-events: auto;
}

@media (max-width: 520px) {
  .recognition-awards {
    max-width: 100%;
  }

  .recognition-award-inner {
    align-items: center;
  }

  .recognition-award-year {
    text-align: left;
  }

  .obviously-headline--connect {
    white-space: normal !important;
  }
}

/* Phase 5: Screen 1 scrolls up – transform driven by JS */
.main.screen-1.phase-5-active {
  transition: none; /* scroll-driven via JS */
}

/* Viewport ≥768px: px → vw (design base 1920px: 1vw ≈ 19.2px) */
@media (min-width: 768px) {
  .header {
    transform: translateY(-0.52vw);
  }

  .header.visible {
    transform: translateY(0);
  }

  .header-pill > div {
    padding-right: 0.78vw;
    margin-right: 0.78vw;
  }
  
  .logo-wrapper {
    gap: 0.521vw;
  }

  .work-logo-centered {
    max-width: 55.47vw;
    min-width: 14.58vw;
  }

  .logo-jagruti {
    transform: translateY(-4.17vw);
  }

  .logo-jagruti.animate-in {
    animation: jagruti-slide-in-vw 1.2s cubic-bezier(0, 0, 0.58, 1) forwards;
  }

  @keyframes jagruti-slide-in-vw {
    from {
      opacity: 0;
      transform: translateY(-4.17vw);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .logo-jaykar {
    transform: translateY(4.17vw);
  }

  .logo-jaykar.animate-in {
    animation: jaykar-slide-in-vw 1.2s cubic-bezier(0, 0, 0.58, 1) forwards;
  }

  @keyframes jaykar-slide-in-vw {
    from {
      opacity: 0;
      transform: translateY(4.17vw);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .footer {
    transform: translateY(0.52vw);
    padding: 1.25vw 0;
  }

  .footer.visible {
    transform: translateY(0);
  }

  .footer-nav {
    min-width: 14.58vw;
    max-width: 31.15vw;
    min-height: 2.5vw;
    backdrop-filter: blur(0.52vw);
    -webkit-backdrop-filter: blur(0.52vw);
  }

  .nav-link::before {
    min-width: 0.31vw;
    min-height: 0.31vw;
  }

  .bio-section {
    padding: 1.823vw;
  }

  .bio-text-wrapper {
    max-width: 47vw;
  }

  .bio-text {
    font-size: 1.354vw;
    line-height: 1.823vw;
  }

  .work-logo {
    max-width: 55.47vw;
    min-width: 14.58vw;
  }

  .work-logo-sticky,
  .skills-logo {
    max-width: 90vw;
  }

  .project-item-inner {
    max-width: 77.34vw;
  }

  .project-item-tilt {
    border-radius: 0.42vw;
  }

  .project-item img,
  .project-img {
    border-radius: 0.42vw;
    box-shadow: 0 0.21vw 1.04vw rgba(0, 0, 0, 0.3);
  }

  .header-bar {
    border-bottom: 0.052vw solid #4d515d;
    border-radius: 5.21vw;
  }

  .header-pill > div {
    font-size: clamp(0.625vw, 0.73vw, 0.73vw);
    line-height: clamp(0.73vw, 0.94vw, 0.94vw);
    border-right: 0.052vw solid rgba(128, 128, 128, 0.5);
  }

  .header-pill span {
    font-size: clamp(0.625vw, 0.73vw, 0.73vw);
  }

  .nav-link {
    font-size: clamp(0.625vw, 0.83vw, 0.83vw);
  }

}

/* Viewport ≥1440px: rem → vw (design base 1920px: 1rem = 16px, 1vw ≈ 19.2px) */
@media (min-width: 1440px) {
  .obviously-headline--465 {
    font-size: clamp(2.083vw, 24.21875vw, 24.21875vw);
    line-height: clamp(1.667vw, 18.229166vw, 18.229166vw);
  }

  .obviously-headline--connect {
    font-size: clamp(1.25vw, 11.875vw, 11.875vw);
    line-height: clamp(0.9375vw, 9.427vw, 9.427vw);
  }

  .skills-heading-wrap,
  .work-heading-wrap {
    padding: 0 0.833vw;
  }

  .skill-accordion-title {
    font-size: clamp(1.25vw, 2.083vw, 2.083vw);
  }

  .skill-accordion-toggle {
    width: max(1.667vw, 2.08vw);
    height: max(1.667vw, 2.08vw);
  }

  .skill-icon {
    width: max(0.625vw, 0.73vw);
    height: max(0.625vw, 0.73vw);
  }

  .skill-accordion-panel p {
    font-size: clamp(0.833vw, 1.25vw, 1.25vw);
  }

  .skills-disclaimer {
    font-size: clamp(0.833vw, 1.042vw, 1.042vw);
  }

  .connect-inner {
    padding: clamp(1.25vw, 4vw, 2.5vw);
    max-width: min(96vw, 62.5vw);
    gap: clamp(2.083vw, 8vh, 5vw);
  }

  .connect-links {
    gap: 4vw;
    font-size: clamp(0.729vw, 1.25vw, 1.042vw);
  }

  .recognition-carousel {
    padding: 4vh clamp(1.042vw, 6vw, 6.25vw) 4vh;
  }

  .recognition-scroll-column {
    max-width: unset;
  }

  .recognition-text {
    font-size: clamp(1.042vw, 7.8125vw, 7.8125vw);
    line-height: clamp(0.9375vw, 7.03125vw, 7.03125vw);
  }

  .recognition-awards {
    gap: clamp(1.667vw, 2.08vw, 2.083vw);
  }

  .recognition-awards-intro {
    gap: clamp(0.833vw, 1.5625vw, 1.5625vw);
  }

  .recognition-awards-heading-row {
    gap: 0.833vw;
  }

  .recognition-awards-label {
    font-size: clamp(0.833vw, 1.042vw, 1.042vw);
    line-height: clamp(1vw, 1.25vw, 1.25vw);
  }

  .recognition-awards-list,
  .recognition-award {
    gap: clamp(1.667vw, 2.08vw, 2.083vw);
  }

  .recognition-award-inner {
    gap: clamp(0.833vw, 1.25vw, 1.25vw);
  }

  .recognition-award-text {
    gap: clamp(0.833vw, 1.042vw, 1.042vw);
  }

  .recognition-award-title {
    font-size: clamp(1.25vw, 2.083vw, 2.083vw);
    line-height: clamp(1.406vw, 2.344vw, 2.344vw);
  }

  .recognition-award-subtitle {
    font-size: clamp(0.833vw, 1.042vw, 1.042vw);
    line-height: clamp(1.042vw, 1.302vw, 1.302vw);
  }

  .recognition-award-year {
    font-size: clamp(0.9375vw, 1.25vw, 1.25vw);
    line-height: clamp(1.125vw, 1.51vw, 1.51vw);
  }
}


@media (max-width: 767px) {
  .logo-wrapper {
    gap: 10px;
  }

  .logo {
    width: 330px;
    height: auto;
  }

  .header-bar {
    padding: 0;
  }

  .header-pill {
    padding: 22px 25px;
  }

  .header-pill > div {
    font-size: 12px;
    line-height: 15px;
  }

  .bio-text {
    font-size: 15px;
    line-height: 26px;
  }

  .obviously-headline--465 {
    font-size: 100px;
    line-height: 75px;
  }

  /* WORK → first project: card 0 rises with heading intro; 50px gap when settled (main.js) */

  .project-item-inner {
    width: 330px;
  }

  .skills-scroll-column {
    max-width: unset;
    width: 330px;
  }

  .skill-accordion-title {
    font-size: 14px;
    line-height: 20px;
  }

  .skill-accordion-panel p {
    font-size: 14px;
    line-height: 20px;
  }

  .skill-accordion-top {
    padding: 20px;
  }

  .skill-item--open .skill-accordion .skill-accordion-top {
    padding-bottom: 12px;
  }

  .skill-accordion-panel {
    padding: 0 20px;
  }

  .skill-item--open .skill-accordion-panel {
    padding-bottom: 20px;
  }

  .skill-accordion-toggle {
    width: 24px;
    height: 24px;
    border-radius: 3px;
  }

  .skill-icon {
    width: 9px;
    height: 9px;
  }
  .skill-icon--close::before, .skill-icon--close::after {
    width: 1px;
    height: 9px;
    left: 4px;
  }

  .skill-icon--plus::before {
    width: 1px;
    height: 9px;
    left: 4px;
  }
  .skill-icon--plus::after {
    height: 1px;
    width: 9px;
    top: 4px;
  }

  .skills-disclaimer {
    max-width: unset;
    font-size: 12px;
    line-height: 16px;
  }

  .recognition-text {
    font-size: 40px;
    line-height: 38px;
    letter-spacing: -0.02em;
  }

  .recognition-text .char {
    transition: color 0.18s ease-out;
  }

  .recognition-awards {
    margin: 25px 0 0;
    width: 100%;
    opacity: 1;
  }

  .recognition-awards-intro {
    gap: 0;
  }
  
  .recognition-awards-label {
    font-size: 10px;
    line-height: 15px;
    padding-bottom: 10px;
  }

  .recognition-awards-accent-line {
    border-top-width: 2px;
    padding-top: 10px;
  }

  .recognition-awards,
  .recognition-awards-list,
  .recognition-award,
  .recognition-award-inner,
  .recognition-award-text {
    gap: 0;
  }

  .recognition-award-title {
    margin-bottom: 8px;
    font-size: 14px;
    line-height: 19px;
    font-weight: 500;
  }

  .recognition-award-subtitle {
    font-size: 11px;
    line-height: 14px;
  }

  .recognition-award-year {
    text-align: right;
    font-size: 12px;
    line-height: 14px;
  }

  .recognition-award-inner {
    padding: 15px 0;
  }

  .connect-inner {
    padding: 0;
    position: relative;
    gap: 44px;
    max-width: 328px;
  }

  .connect-headline {
    font-size: 100px;
    line-height: 79px;
    letter-spacing: 0.02em;
    text-align: left;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: manual;
  }

  /* .connect-link {
    position: absolute;
    font-size: 14px;
    line-height: 16px;  
  }

  .connect-link:nth-child(1) {
    top: -60px;
    left: 20px;
  }

  .connect-link:nth-child(2) {
    top: -60px;
    right: 20px;
  }

  .connect-link:nth-child(3) {
    bottom: 0;
    left: 20px;
  }

  .connect-link:nth-child(4) {
    bottom: 0;
    right: 20px;
  } */

  .footer {
    padding: 0 30px 20px;
    justify-content: flex-end;
  }

  .footer-nav {
    flex-direction: column;
    align-self: stretch;
    width: 100%;
    min-width: 0;
    max-width: none;
    height: auto;
    min-height: 0;
    padding: 0;
    gap: 0;
    border-radius: 40px;
    overflow: hidden;
  }

  .footer-nav-panel {
    display: none;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .footer-nav--open .footer-nav-panel {
    display: flex;
  }

  .footer-nav-links {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 20px 16px;
    width: 100%;
    box-sizing: border-box;
  }

  .footer-nav-divider {
    display: none;
    height: 0;
    border: 0;
    border-top: 1px solid #4d515d;
    margin: 0 20px;
  }

  .footer-nav--open .footer-nav-divider {
    display: block;
  }

  .footer-nav-mobile-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 16px 20px;
    box-sizing: border-box;
    flex-shrink: 0;
  }

  .footer-nav-links .nav-link {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    opacity: 1;
    gap: 0;
  }

  .footer-nav-links .nav-link::before {
    display: none;
  }

  .footer-nav-links .nav-link.active {
    color: #ff1b1b;
    font-weight: 700;
  }

  .footer-nav-links .nav-link:not(.active) {
    color: #ffffff;
    font-weight: 700;
  }

  .footer-nav--open .footer-nav-menu-label {
    opacity: 1;
  }

  .footer-nav--open .footer-nav-menu-icon--open {
    display: none;
  }

  .footer-nav--open .footer-nav-menu-icon--close {
    display: block;
  }
  
}