/* ─── Base ─────────────────────────────────────────────── */
html {
  scroll-behavior: smooth;
  scrollbar-width: none;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

html::-webkit-scrollbar {
  display: none; /* Chrome, Safari */
}

body {
  min-height: 100vh;
  margin: 0;
  padding: 0;
  font-family: "Bricolage Grotesque", sans-serif;
  color: white;
  overflow-x: hidden;
  overscroll-behavior-x: none;

  /* Fixed background image — stays in place while scrolling */
  background-image: url(../images/background_image.webp);
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  background-attachment: fixed;
}

/* ─── Sections ──────────────────────────────────────────── */

/* Shared styles — each section fills the full viewport */
.section-1,
.section-2,
.section-3,
.section-4 {
  position: relative;
  height: 100vh;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(5px);
}

/* ─── Section 1: Hero ───────────────────────────────────── */
.section-1 {
  height: calc(100vh - 5vh); /* slightly taller hero */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0 2rem 8rem;
  box-sizing: border-box;
}

.hero-name {
  margin: 0;
  width: 100%;
  font-size: 13vw;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 0.8;
  text-align: center;
  user-select: none;
  pointer-events: none;
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-40px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.hero-taglines {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: clamp(1rem, 1.8vw, 1.5rem);
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.75);
  padding-left: 1vw;
}

.hero-taglines span {
  opacity: 0;
  animation: slideInLeft 0.6s ease forwards;
}

.hero-taglines span:nth-child(1) { animation-delay: 0.3s; }
.hero-taglines span:nth-child(2) { animation-delay: 0.55s; }
.hero-taglines span:nth-child(3) { animation-delay: 0.8s; }

@media (max-width: 800px) {
  .section-1 {
    height: 100vh;
    padding-top: calc(10vh + 1.5rem); /* push content below fixed header */
  }

  .hero-name {
    font-size: 21vw; /* large enough that VICTORY fills the line, ULASI wraps */
    text-align: left;
    line-height: 1;
  }
}

/* ─── Section 2: About Me ───────────────────────────────── */
.section-2 {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}

.section-2 .sectionFilling {
  padding: 2rem;
}

.about-me {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 50vw;
  border-radius: 1rem;
  transition:
    background-color 1s,
    transform 0.3s ease;
}

.about-me:hover {
  background-color: rgba(0, 0, 0, 0.3);
  transform: scale(1.05);
}

/* ─── About Me: Photo Stack ─────────────────────────────── */
.photo-stack {
  position: relative;
  height: 68vh;
  width: min(380px, 48vw);
  flex-shrink: 0;
}

.photo-card {
  position: absolute;
  inset: 0;
  border-radius: 2rem;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.45s ease;
  will-change: transform;
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  pointer-events: none;
  user-select: none;
  display: block;
}

/* Stack positions — set by JS via data-pos */
.photo-card[data-pos="0"] {
  transform: translateY(0) translateX(0) scale(1) rotate(0deg);
  z-index: 4;
  opacity: 1;
}
.photo-card[data-pos="1"] {
  transform: translateY(12px) translateX(6px) scale(0.95) rotate(3deg);
  z-index: 3;
  opacity: 0.85;
}
.photo-card[data-pos="2"] {
  transform: translateY(22px) translateX(-5px) scale(0.9) rotate(-2.5deg);
  z-index: 2;
  opacity: 0.65;
}
.photo-card[data-pos="3"] {
  transform: translateY(30px) translateX(4px) scale(0.85) rotate(1.8deg);
  z-index: 1;
  opacity: 0.45;
}

/* Swipe-off animations — alternate left/right */
.photo-card.swipe-right,
.photo-card.swipe-left {
  opacity: 0 !important;
  z-index: 10 !important;
  transition:
    transform 0.42s cubic-bezier(0.4, 0, 0.8, 0.6),
    opacity 0.3s ease !important;
}

.photo-card.swipe-right {
  transform: translateX(150%) rotate(28deg) !important;
}
.photo-card.swipe-left {
  transform: translateX(-150%) rotate(-28deg) !important;
}

/* ─── Section 3: Projects ───────────────────────────────── */
.section-3 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

/* ─── Projects Carousel ─────────────────────────────────── */
.projects-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 90%;
  padding-left: 1.5rem;
  box-sizing: border-box;
  margin-bottom: 2rem;
}

.projects-header .sectionTitle {
  margin-right: auto;
  padding-bottom: 0;
}

/* The window */
.carousel-outer {
  width: 90%;
  padding: 1.5rem 0 1.5rem 1.5rem;
  overflow-x: scroll;
  scrollbar-width: none;
  cursor: grab;
  user-select: none;
}

.carousel-outer::-webkit-scrollbar {
  display: none;
}

.carousel-outer.dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* The sliding strip */
.carousel-track {
  display: flex;
  flex-direction: row;
  gap: 1.5rem;
}

/* Individual cards */
.project-card {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  width: clamp(300px, 80vw, 573px);
  min-width: unset;
  max-width: unset;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 1.5rem;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.project-card:hover {
  cursor: pointer;
  transform: scale(1.01);
}

.card-img {
  width: 100%;
  height: 40vh;
  object-fit: cover;
}

.card-body {
  padding: 1rem;
}

.card-title {
  margin: 0 0 0.5rem;
  font-size: clamp(0.875rem, 1.5vw, 1.25rem);
  font-weight: 500;
}

.card-desc {
  margin: 0 0 1rem;
  font-size: clamp(0.6rem, 1.2vw, 0.875rem);
  font-weight: 200;
  line-height: 1.5;
}

.card-links {
  display: flex;
  gap: 0.75rem;
}

.card-links a {
  font-size: 0.75rem;
  padding: 0.4rem 0.875rem;
  border-radius: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: white;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background 0.3s ease;
}

.card-links a:hover {
  background: rgba(255, 255, 255, 0.15);
}

/* ─── Section 4: Contact ───────────────────────────────── */
.section-4 {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3rem;
}

.contact-header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  width: 100%;
}

.contact-item {
  display: flex;
  justify-content: center;
  text-decoration: none;
  color: white;
  width: 100%;
  transition: transform 0.3s ease;
}

.contact-item:hover {
  transform: scale(1.05);
  transition-delay: 0s;
}

.contact-inner {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: clamp(320px, 55vw, 720px);
  margin: 0 auto;
}

.contact-icon {
  width: 4rem;
  height: 4rem;
  object-fit: contain;
  flex-shrink: 0;
}

.contact-item span {
  font-size: clamp(1rem, 2vw, 1.6rem);
  font-weight: 200;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── Typography ────────────────────────────────────────── */

/* Section headings — scale with viewport, capped at 60pt */
.sectionTitle {
  margin: 0;
  font-size: clamp(2rem, 5vw, 65pt);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Body text — scales with viewport */
.sectionFilling {
  margin: 0;
  font-size: clamp(0.8rem, 2vw, 20pt);
  font-weight: 200;
}

/* ─── Mobile Breakpoint ─────────────────────────────────── */
@media (max-width: 800px) {
  /* Stack image and text vertically */
  .section-2 {
    flex-direction: column;
    gap: 1rem;
  }

  /* Full width text box on mobile */
  .about-me {
    width: 90vw;
  }

  /* Photo stack on mobile */
  .photo-stack {
    margin-top: 8vh;
    width: 170px;
    height: 230px;
  }

  .photo-card {
    border-radius: 1.25rem;
  }

  .about-me {
    min-width: 90vw;
  }

}

/* Full width sidebar on small phones — show site name again */
@media (max-width: 600px) {
  .sideBar {
    width: 100vw;
  }

  .sideBar-title {
    visibility: visible;
  }
}

/* ─── Scroll Reveal Animations ──────────────────────────── */
.reveal,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition:
    opacity 0.5s ease,
    transform 0.5s ease;
}

.reveal {
  transform: translateY(45px);
}
.reveal-left {
  transform: translateX(-70px);
}
.reveal-right {
  transform: translateX(70px);
}

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: none;
}

/* Re-declare hover transforms after reveal rules so they aren't overridden */
.contact-item:hover {
  transform: scale(1.05);
  transition-delay: 0s;
}

.about-me:hover {
  transform: scale(1.05);
}

.about-me-img:hover {
  transform: scale(1.05);
}

/* ─── Footer ────────────────────────────────────────────── */
.site-footer {
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  padding: 3rem 2rem 2rem;
}

.footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.footer-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 2rem;
  flex-wrap: wrap;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.footer-name {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.footer-tagline {
  font-size: 0.8rem;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.5);
}

.footer-nav,
.footer-social {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.footer-nav a,
.footer-social a {
  color: rgba(255, 255, 255, 0.65);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 200;
  letter-spacing: 0.04em;
  transition: color 0.2s ease;
}

.footer-nav a:hover,
.footer-social a:hover {
  color: white;
}

.footer-bottom {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.75rem;
  font-weight: 200;
  color: rgba(255, 255, 255, 0.4);
}

@media (max-width: 600px) {
  .footer-top {
    flex-direction: column;
  }

  .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}