@font-face {
  font-family: 'NeueHaasDisplay';
  src: url('font/NeueHaasDisplayRoman.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}

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

html, body {
  width: 100%;
  height: 100%;
  background: #000;
  font-family: 'NeueHaasDisplay', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  overflow: hidden;
}

/* ─── Scroll container ───────────────────────────────────── */
.page-wrapper {
  height: 100%;
  overflow-y: scroll;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.page-wrapper::-webkit-scrollbar { display: none; }

/* ─── Screens ────────────────────────────────────────────── */
.screen {
  position: relative;
  height: 100vh;
  scroll-snap-align: start;
  overflow: hidden;
}

.screen-1 { background: #000; }


.screen-2 {
  background: url('assets/drone.jpg') center / cover no-repeat;
}

.screen-2::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 20%;
  background: linear-gradient(to bottom, transparent, #888);
  pointer-events: none;
}

/* ─── Central SVG (screen 1) ─────────────────────────────── */
.svg-bg {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;
  pointer-events: none;
}

.svg-bg img,
.svg-bg svg {
  height: 100vh;
  width: auto;
  max-width: 100vw;
  max-height: min(100vh, calc(100vw * 16 / 9));
  display: block;
}

/* Fallback: img gets entrance + float via CSS in case fetch/inline fails */
.svg-bg img {
  animation: svgEnter 2s cubic-bezier(0.4, 0, 0.2, 1) 2.2s both,
             svgFloat 7s ease-in-out 5.7s infinite;
}

/* ─── SVG animations ─────────────────────────────────────── */
@keyframes svgEnter {
  from { opacity: 0; transform: scale(0.97) translateY(12px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

@keyframes svgFloat {
  0%, 100% { transform: translateY(0);     }
  50%       { transform: translateY(-14px); }
}

@keyframes textEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0);    }
}

.svg-entering {
  animation: svgEnter 2s cubic-bezier(0.4, 0, 0.2, 1) both;
}

.svg-floating {
  animation: svgFloat 7s ease-in-out infinite;
}

/* ─── Biennale logo — top right ──────────────────────────── */
.logo {
  position: absolute;
  top: clamp(1rem, 2.5vw, 2.5rem);
  right: clamp(1rem, 2.5vw, 2.5rem);
  z-index: 20;
}

.logo img {
  height: clamp(4.5rem, 8.25vw, 10rem);
  width: auto;
  display: block;
  animation: svgEnter 1.6s cubic-bezier(0.4, 0, 0.2, 1) 5s both;
}

/* ─── Left text panel ────────────────────────────────────── */
:root {
  --fs-main:     clamp(1.8rem,  7.8vw,  9.2rem);
  --fs-pavilion: clamp(0.9rem,  3.9vw,  4.6rem);
  --fs-credits:  clamp(1.08rem, 4.68vw, 5.52rem);
  --pad-left:    clamp(1.5rem,  5vw,    5rem);
}

.content-left {
  position: absolute;
  top: 0;
  left: 0;
  width: 70%;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad-left);
  z-index: 10;
}

.slot {
  flex: 1;
  display: flex;
  align-items: center;
}

.slot:last-child {
  align-items: flex-end;
  padding-bottom: clamp(5rem, 3vh, 8rem);
}

.slot-top {
  flex: 0 0 calc(clamp(1rem, 2.5vw, 2.5rem) + clamp(4.5rem, 8.25vw, 9rem));
  align-items: flex-end;
}

.pavilion {
  font-size: var(--fs-pavilion);
  color: rgb(160, 160, 160);
  line-height: 1;
  letter-spacing: -0.01em;
  animation: textEnter 1.2s ease 3.5s both;
}

.main-title {
  font-size: var(--fs-main);
  color: #fff;
  line-height: 0.90;
  letter-spacing: -0.02em;
  font-weight: 400;
  margin-top: 10rem;
}

.type-cursor {
  border-left: 0.07em solid #fff;
  margin-left: 0.05em;
  animation: cursorBlink 0.65s step-end infinite;
}

@keyframes cursorBlink {
  0%, 100% { border-color: #fff; }
  50%       { border-color: transparent; }
}

.credits {
  font-size: var(--fs-credits);
  line-height: 1.1;
  letter-spacing: -0.01em;
  animation: textEnter 1.2s ease 3.5s both;
}

.credits-white { color: #fff; }
.credits-grey  { color: rgb(160, 160, 160); }

/* ─── Scroll arrow ───────────────────────────────────────── */
.arrow-anchor {
  position: absolute;
  right: clamp(1.5rem, 3vw, 3rem);
  bottom: clamp(1.5rem, 3vh, 3rem);
  z-index: 30;
  pointer-events: none;
}

.scroll-arrow {
  pointer-events: all;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.75rem;
  opacity: 0;
  animation: arrowFadeIn 1s ease 6.5s forwards,
             arrowBounce 1.8s ease-in-out 7.5s infinite;
}

.scroll-arrow svg {
  display: block;
}

@keyframes arrowFadeIn {
  to { opacity: 1; }
}

@keyframes arrowBounce {
  0%, 100% { transform: translateY(0);    }
  50%       { transform: translateY(12px); }
}

/* ─── Screen 2 contact bar ───────────────────────────────── */
.contact-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  padding: 1.8rem var(--pad-left);
  font-size: var(--fs-pavilion);
  letter-spacing: -0.01em;
}

/* ─── Vertical section labels ───────────────────────────── */
.section-about,
.section-artists {
  position: relative;
}

.section-label {
  position: absolute;
  margin-top: -1%; 
  left: 3%;
  top: clamp(5rem, 6vw, 10rem);
  font-size: clamp(4rem, 1.8vw, 6rem);
  color: rgb(160, 160, 160, 0.2);
  white-space: nowrap;
  font-weight: 700;
}

/* ─── Section 3: About ───────────────────────────────────── */
.section-about {
  background: #333;
  scroll-snap-align: start;
  padding: clamp(5rem, 6vw, 10rem) 15%;
}

.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: clamp(4rem, 4vw, 8rem);
  align-items: start;
}

.about-intro {
  font-size: clamp(2rem, 0.9vw, 2.5rem);
  font-weight: 400;
  color: #fff;
  line-height: 1.35;
}

.about-body, .about-body2 {
  font-size: clamp(0.9rem, 1.1vw, 1.2rem);
  color: #bbb;
  line-height: 1.6;
}

.about-body p + p {
  margin-top: 0.65em;
}

@media (max-width: 768px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-intro { font-size: clamp(1.2rem, 5vw, 2rem); }
}

/* ─── Section 5: Artists ─────────────────────────────────── */
.section-artists {
  background: #888;
  scroll-snap-align: start;
  padding: clamp(5rem, 6vw, 10rem) 15%;
}
.section-artists h3 {font-size: clamp(2rem, 1.1vw, 3rem); color: white; margin-bottom: 1rem;}
.section-artists h3 span {color:#ccc;}

.artists-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(6rem, 4vw, 9rem);
  align-items: start;
}

.artist-img {
  width: 80%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  margin-bottom: 3em;
}

.artist-bio-text {
  font-size: clamp(0.9rem, 1.1vw, 1.2rem);
  color: #ccc;
  line-height: 1.6;
}
.artist-bio-text strong{color: white;}

@media (max-width: 768px) {
  .section-artists {
    padding-left: var(--pad-left);
    padding-right: var(--pad-left);
  }
  .artists-grid { grid-template-columns: 1fr; }
}

/* ─── Section 4: Team & Sponsors ────────────────────────── */
.section-team {
  background: #fff;
  color: #000;
  scroll-snap-align: start;
  padding: clamp(3rem, 6vw, 7rem) var(--pad-left);
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(4rem, 4vw, 8rem);
  align-items: start;
}

.team-group {
  margin-bottom: clamp(1.8rem, 3vw, 2.8rem);
}

.team-heading {
  font-size: clamp(2.3rem, 1.2vw, 2.8rem);
  font-weight: 400;
  color: rgb(160, 160, 160);
  border-bottom: 2px solid rgb(180, 180, 180);
  padding-bottom: 0.5em;
  margin-bottom: 0.75em;
  line-height: 1.3;
}

.team-body {
  font-size: clamp(0.9rem, 1.1vw, 1.2rem);
  line-height: 1.55;
  color: #000;
}

.team-body a {
  color: #000;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.team-roster {
  display: flex;
  flex-direction: column;
  gap: 0.35em;
}

.team-row {
  display: flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: clamp(0.9rem, 1.1vw, 1.2rem);
  line-height: 1.55;
}

.team-role {
  white-space: nowrap;
  flex-shrink: 0;
}

.team-leader {
  flex: 1;
  border-bottom: 1px solid rgba(160, 160, 160, 0.3);
  margin-bottom: 0.2em;
}

.team-name {
  color: #000;
  white-space: nowrap;
  flex-shrink: 0;
}

.team-email {
  font-size: clamp(2rem, 1.1vw, 2.5rem);
  color: rgb(0, 0, 0);
  padding-top: clamp(3rem, 5vw, 5rem);text-align: right;
}
.team-email a { 
	color:black; 
}
.team-email a:hover { 
	text-decoration:none; 
}

/* ─── Responsive: tablet & mobile ───────────────────────── */
@media (max-width: 768px) {
  :root {
    --fs-main:     clamp(3.04rem, 13.18vw, 15.55rem);
    --fs-pavilion: clamp(1.52rem,  6.59vw,  7.77rem);
    --fs-credits:  clamp(1.82rem,  7.9vw,   9.33rem);
  }

  .content-left {
    width: 100%;
    height: 100%;
    top: 0;
    justify-content: space-between;
    padding: 4rem 1.5rem 3.5rem;
    background: rgba(0, 0, 0, 0.35);
  }

  .slot { flex: 0 0 auto; }

  .svg-bg img,
  .svg-bg svg {
    height: auto;
    width: 100vw;
    max-height: 100vh;
  }

  .logo img {
    height: clamp(4rem, 20vw, 7rem);
  }

  .team-grid { grid-template-columns: 1fr; }

  .team-heading { font-size: clamp(1.4rem, 3vw, 1.7rem); }
  .team-body    { font-size: clamp(1rem, 3vw, 1.2rem); }
  .team-row     { font-size: clamp(1rem, 3vw, 1.2rem); }
  .about-body, .about-body2 { font-size: clamp(1rem, 3vw, 1.2rem); }
  .artist-bio-text { font-size: clamp(1rem, 3vw, 1.2rem); }

  .team-email {
    font-size: clamp(0.8rem, 3.5vw, 1.1rem);
    overflow-wrap: break-word;
    word-break: break-all;
  }

  .section-about,
  .section-artists,
  .section-team {
    padding-left: 12%;
    padding-right: 12%;
  }

  /* Project team: drop leader line, show as plain role: name */
  .team-leader { display: none; }
  .team-role::after { content: ':'; }
  .team-row { flex-wrap: wrap; gap: 0.2em; }
  .team-name { flex-shrink: 1; }
}

@media (max-width: 400px) {
  .content-left { padding: 1rem 1rem 2rem; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .content-left {
    width: 55%;
    padding: 1rem 1rem 1rem clamp(1rem, 4vw, 2rem);
  }

  .svg-bg img,
  .svg-bg svg {
    height: 100vh;
    width: auto;
    max-width: 100vw;
  }
}