/*
  Global reset and variables
  A neutral off‑white background and clean typography are used to match the
  minimalist aesthetic seen on the example site. The layout scales nicely
  across different screen sizes thanks to CSS clamp() and flexible units.
*/
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* 1 cm gap when menu is pushed up */
  --top-gap: 1cm;
  /* Height of the fixed bottom bar */
  --bar-height: 64px;
}

body {
  font-family: 'Philosopher', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background-color: #f6f6f0;
  color: #000;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  cursor: none;
}

/* Home: white background with continuous upward marquee */
#home {
  background: #fff;
  min-height: 100vh;
  min-height: 100dvh;
}

.home-list {
  --gap: 11vh;
  --duration: 18s; /* slightly slower loop */
  padding: 0 6vw 0;
  text-align: center;
}

.home-viewport {
  height: calc(100vh - var(--bar-height));
  height: calc(100dvh - var(--bar-height));
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center; /* center the scrolling track */
}

.home-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  will-change: transform;
  animation: marquee-up var(--duration) linear infinite;
}

/* Disable CSS animation when JS-driven marquee is active */
.home-track.js-marquee {
  animation: none !important;
}

@keyframes marquee-up {
  from { transform: translateY(0); }
  to { transform: translateY(-50%); }
}

.home-project {
  opacity: 1;
  transform: none;
}

.home-title {
  font-family: 'Philosopher', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: clamp(2rem, 6vw, 3.2rem);
  line-height: 1.1;
  margin-bottom: 0.35rem;
}

.home-title a {
  color: inherit;
  text-decoration: none;
}
.home-title a:hover {
  text-decoration: underline;
}

.home-desc {
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
  color: #333;
}

/* Ensure ALL elements use custom cursor only */
*, *::before, *::after {
  cursor: none !important;
}

/* Universal custom cursor */

/* Triangle cursor using clip-path for a crisp shape */
.universal-cursor {
  position: fixed;
  width: 12px;
  height: 12px;
  pointer-events: none;
  background: #000;
  opacity: 1;
  transform-origin: center;
  z-index: 9999;
  transition: transform 0.12s ease, opacity 0.2s ease;
  /* Small right-pointing triangle */
  -webkit-clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
  clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
}

.universal-cursor.circle {
  -webkit-clip-path: none;
  clip-path: none;
  border-radius: 50%;
}
.universal-cursor.highlight {}
.universal-cursor.down {}

/* Parametric animation container */
.animation-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#parametric-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

/* Hero slideshow */
.hero-slideshow {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.8s ease;
}
.hero-slide.active { opacity: 1; }
.hero-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero-prev, .hero-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(246, 246, 240, 0.7);
  border: 1px solid #dcdcdc;
  color: #000;
  padding: 10px 14px;
  z-index: 10;
}
.hero-prev { left: 16px; }
.hero-next { right: 16px; }
.hero-prev:focus, .hero-next:focus {
  outline: 3px solid #000;
  outline-offset: 2px;
}
.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 10;
}
.hero-dots .hero-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(0,0,0,0.25);
  border: 1px solid #000;
}
.hero-dots .hero-dot.active { background: #000; }

.overlay-text {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.text-section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  column-gap: 6vw;
  justify-content: center;
  padding: 0 4vw;
  font-size: clamp(2rem, 7vw, 6rem);
  font-weight: 600;
  font-family: 'Philosopher', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  opacity: 0;
  transition: opacity 2s ease-in-out;
}

.text-section.active {
  opacity: 0.9;
}

.text-section .left-text,
.text-section .right-text {
  flex: 1;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}

.text-section h1 {
  line-height: 1.1;
  pointer-events: none;
}

/* Bottom navigation bar */
#bottom-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--bar-height);
  /* Extend bar height on notch/home-bar devices */
  padding-bottom: env(safe-area-inset-bottom, 0px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 2vw;
  padding-right: 2vw;
  border-top: 1px solid #E8E8E8;
  background-color: #E8E8E8; /* updated bottom menu color */
  /* Raise the z-index above overlays so the bar stays visible when panels open */
  z-index: 3000;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.brand img {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

/* Use custom display font for the brand text near the logo */
@font-face {
  font-family: 'Arial';
  src: url('assets/fonts/kleptocracy-titling.woff2') format('woff2'),
       url('assets/fonts/kleptocracy-titling.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
.brand span { display: none; }

/* Horizontal line stretching from the logo to the right edge */
.brand-line {
  flex: 1;
  height: 1px;
  background: #000;
  align-self: auto;
  margin-left: -12px;
  margin-top: 35px;
}

/* Center the nav buttons within the bar */
.nav-buttons {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
  display: flex;
  align-items: center;
}

/* Group social + nav buttons so they align together */
.controls {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Swipe-up to near top (leave gap) */
#bottom-bar.push-up {
  transform: translateY(calc(-100vh + var(--bar-height) + var(--top-gap)));
  transform: translateY(calc(-100dvh + var(--bar-height) + var(--top-gap)));
  border-top: none;
  border-bottom: none; /* no dividing line */
  box-shadow: none; /* no shadow */
}

/* Let overlays fill to bottom when menu is at top */
body.menu-push .overlay {
  top: var(--top-gap);
  bottom: 0;
}

/* Clickable top gap area to return home while menu is pushed up */
#top-gap-hit {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--top-gap);
  z-index: 2500; /* above overlays (2000), below bottom bar (3000) */
  display: none;
}
body.menu-push #top-gap-hit {
  display: block;
}

.nav-buttons button {
  background: none;
  border: none;
  color: inherit;
  font-family: 'Philosopher', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  text-transform: uppercase;
  font-size: clamp(0.6rem, 1.4vw, 0.9rem);
  margin: 0 clamp(3px, 1vw, 12px);
  position: relative;
  padding: clamp(3px, 0.6vw, 8px) clamp(1px, 0.6vw, 8px);
  transition: transform 0.2s ease;
}
.nav-buttons button:hover {
  transform: translateY(-2px);
}
.nav-buttons button:hover::after {
  content: '';
  display: block;
  width: 100%;
  height: 2px;
  background: #000;
  position: absolute;
  bottom: -2px;
  left: 0;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

/* Overlay panels (work, info, index) */
.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  /* Leave space at the bottom for the persistent bottom bar. By setting the
     bottom offset equal to the bar height, the overlay will not cover it */
  bottom: var(--bar-height);
  bottom: calc(var(--bar-height) + env(safe-area-inset-bottom, 0px));
  height: auto;
  background-color: #f6f6f0;
  /* Layer overlays above normal content but below the bottom bar */
  z-index: 2000;
  
  /* Slide transition effects from bottom */
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), top 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  display: block;
  visibility: hidden;
}

.overlay.active {
  transform: translateY(0%);
  visibility: visible;
}

.overlay.slide-out {
  transform: translateY(100%);
}

/* All overlays use the custom cursor */
.overlay {
  cursor: none;
}

.close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 3rem;
  font-weight: 300;
  line-height: 1;
  color: #000;
  user-select: none;
  z-index: 30;
}
.close-btn:hover {
  color: #666;
}
/* Keyboard focus for accessibility */
.close-btn:focus {
  outline: 3px solid #000;
  outline-offset: 4px;
}

/* Work/Proiecte slideshow */
.slide-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.slide {
  width: 100%;
  height: 100%;
  display: flex;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(30px);
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none; /* prevent hidden slides from catching clicks */
}
.slide.active {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.slide-left,
.slide-right {
  width: 50%;
  height: 100%;
}
.slide-left {
  position: relative;
}
.project-image {
  width: 100%;
  height: 100%;
  object-fit: contain; /* fit full image within the left area */
  object-position: center center; /* keep image centered */
}

/* Small triangular overlay on images used to open the project page. When
   clicked, it prevents slide navigation and would take the user to a
   separate project page. */
.image-link {
  position: absolute;
  bottom: 24px;
  right: 24px;
  /* Create a right‑pointing triangle using CSS borders */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 14px 0 14px 24px;
  /* Use an off-white colour for the arrow to ensure it remains visible on
     dark photographs. */
  border-color: transparent transparent transparent #f6f6f0;
  opacity: 0.8;
  transition: opacity 0.2s ease;
}
.image-link:hover {
  opacity: 1;
}

/* Disable the small image triangle trigger: only the image is clickable */
.image-link {
  pointer-events: none !important;
  display: none !important;
}
.slide-right {
  padding: 12vh 6vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  overflow-y: auto;
}
.slide-right h2 {
  font-family: 'Philosopher', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 2.7rem;
  margin-bottom: 1rem;
}
.slide-right p {
  font-size: 1rem;
  line-height: 1.6;
  max-width: 500px;
  margin-bottom: 0.8rem;
}
.slide-right p.slide-body {
  color: #444;
}


/* Gallery overlay styles - split layout with images on left, text on right */
.gallery-content {
  width: 100%;
  height: 100%;
  display: flex;
}

.gallery-images {
  width: 50%;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.gallery-text {
  width: 50%;
  height: 100%;
  padding: 12vh 6vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  background-color: transparent; /* inherit overlay color */
  overflow-y: auto;
}

#gallery-body p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 0.8rem;
  max-width: 500px;
  color: #444;
}

.gallery-slide-container {
  width: 100%;
  height: 100%;
  position: relative;
}

.gallery-slide-container .gallery-slide {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transform: translateX(30px);
  transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* prevent hidden slides (incl. videos) from catching clicks */
}

.gallery-slide-container .gallery-slide.active {
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.gallery-slide-container .gallery-slide img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
}
.gallery-slide-container .gallery-slide video {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  background: #000;
}
.gallery-slide-container .gallery-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
  font-size: 1.1rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.gallery-text h2 {
  font-family: 'Philosopher', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 2.7rem;
  margin-bottom: 1rem;
  line-height: 1.1;
}

.gallery-text p {
  font-size: 1rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  max-width: 500px;
}

.gallery-text .image-counter {
  font-size: 0.9rem;
  color: #666;
  margin-top: 2rem;
  font-family: 'Philosopher', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

/* Despre VOLUM overlay — split image / text layout */
.despre-content {
  width: 100%;
  height: 100%;
  display: flex;
}

.despre-image {
  width: 50%;
  height: 100%;
  overflow: hidden;
  flex-shrink: 0;
}

.despre-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center center;
  display: block;
}

.despre-text {
  width: 50%;
  height: 100%;
  padding: 12vh 6vw;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
}

.despre-text h2 {
  font-family: 'Philosopher', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 2.7rem;
  margin-bottom: 1.5rem;
  line-height: 1.1;
}

.despre-text p {
  font-size: 1rem;
  line-height: 1.7;
  margin-bottom: 1rem;
  max-width: 500px;
}

/* Info and index content styling */
.info-content,
.index-content {
  padding: 20vh 10vw;
  max-width: 900px;
}
.info-content h2,
.index-content h2 {
  font-family: 'Philosopher', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 3rem;
  margin-bottom: 1rem;
}
.info-content p {
  font-size: 1.1rem;
  line-height: 1.7;
  margin-bottom: 0.8rem;
  max-width: 700px;
}
.index-content ul {
  list-style: none;
}
.index-content li {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}
.index-content a {
  text-decoration: none;
  color: #000;
  transition: color 0.2s ease;
}
.index-content a:hover {
  color: #555;
}

.overlay#work-overlay,
.overlay#info-overlay,
.overlay#index-overlay,
.overlay#socials-overlay {
  background-color: #E8E8E8;
}

/* Socials overlay */
.socials-content {
  padding: 20vh 10vw;
  max-width: 900px;
}
.socials-content h2 {
  font-family: 'Philosopher', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size: 3rem;
  margin-bottom: 1rem;
}
.socials-content ul {
  list-style: none;
}
.socials-content li {
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}
.socials-link {
  text-decoration: none;
  color: #000;
  font-family: 'Philosopher', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  transition: color 0.2s ease;
}
.socials-link:hover {
  color: #555;
}

/* Match project details (gallery) background to overlays */
.overlay#gallery-overlay {
  background-color: #E8E8E8;
}

/* Fade mode for overlays when switching between sections */
.overlay.fade {
  transform: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  visibility: hidden;
}
.overlay.fade.active {
  opacity: 1;
  visibility: visible;
}
.overlay.fade.slide-out {
  opacity: 0;
}

/* Instant mode: no animation, show immediately */
.overlay.instant {
  transition: none !important;
  transform: translateY(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Responsive behaviour for smaller screens */
@media (max-width: 850px) {
  .text-section {
    flex-direction: column;
    text-align: center;
    font-size: clamp(2rem, 10vw, 5rem);
  }

  /* Slide stacked layout — image top 55%, text bottom flex-1 */
  .slide {
    flex-direction: column;
    overflow: hidden;
  }
  .slide-left {
    width: 100%;
    flex: 0 0 55%;
    min-height: 0;
  }
  .slide-right {
    width: 100%;
    flex: 1;
    min-height: 0;
    height: auto;
    overflow-y: auto;
    padding: 4vh 6vw;
    text-align: left;
  }

  /* Gallery stacked layout — use flex ratios not % heights */
  .gallery-content {
    flex-direction: column;
    height: 100%;
  }
  .gallery-images {
    width: 100%;
    flex: 0 0 55%;
    min-height: 0;
    height: auto;
  }
  .gallery-text {
    width: 100%;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 3vh 5vw;
  }

  /* Info and index overlays: scrollable, less padding */
  #info-overlay,
  #index-overlay {
    overflow-y: auto;
  }
  .info-content,
  .index-content {
    padding: 8vh 7vw;
    min-height: 0;
  }

  /* Despre VOLUM — stack image above text on mobile */
  .despre-content {
    flex-direction: column;
    overflow-y: auto;
  }
  .despre-image {
    width: 100%;
    height: auto;
    flex: 0 0 45vw;
    max-height: 45vh;
  }
  .despre-text {
    width: 100%;
    height: auto;
    flex: 1;
    overflow-y: visible;
    padding: 4vh 6vw;
  }
}

/* Small screens — static flex layout so nav/social can never overlap */
@media (max-width: 480px) {
  #bottom-bar {
    flex-wrap: nowrap;
    padding-left: 3vw;
    padding-right: 3vw;
  }

  /* Remove absolute positioning — items sit in normal flex flow */
  .nav-buttons {
    position: static;
    transform: none;
  }

  /* Brand-line: reset the desktop margin-top so it stays anchored to the logo */
  .brand-line {
    margin-top: 0;
    align-self: center;
  }

  .brand img { width: 34px; height: 34px; }
}