:root{
  --bg:#f4f4f4;
  --text:#111;
  --accent:#bfa37a;
}

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

body{
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',sans-serif;
  overflow-x:hidden;
  font-size: clamp(12px, 1vw, 14px);
}

a {
  color: white;
  text-decoration: underline;
}

html {
  scroll-behavior: smooth;
}

.hero:first-of-type {
  position: relative;
  background: #f2f2f2;
  overflow: hidden;
}

.hero:first-of-type::before {
  z-index: 0;
  content: "";
  position: absolute;
  inset: -50%;
  pointer-events: none;

  background:
    repeating-radial-gradient(
      circle at 50% 50%,
      rgba(0,0,0,0.03) 0px,
      rgba(0,0,0,0.03) 1px,
      transparent 2px,
      transparent 60px
    );

  transform: rotate(8deg);
  animation: waveDrift 40s ease-in-out infinite alternate;
}

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

@keyframes waveDrift {
  0% {
    transform: rotate(6deg) translateY(0px) scale(1);
  }
  100% {
    transform: rotate(10deg) translateY(-40px) scale(1.05);
  }
}
/* ================= SCROLL BUTTON ================= */

.scroll-btn {
  position: relative; /* NOT absolute */
  margin-top: 30px;
  margin-bottom: 40px;
  font-size: .8rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  text-decoration: none;
  color: white;
  background: black;
  padding: 10px 24px;
  font-weight: bold;
  opacity: .8;
  transition: .3s ease;
}

.scroll-btn:hover {
  opacity: 1;
  transform: translateY(3px);
}
#visitorCounter {
	font-weight:bold;
}


/* ================= PRELOADER ================= */
.preloader{
  position:fixed;
  inset:0;
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:2000;
  transition:opacity .8s ease, visibility .8s ease;
}

.preloader.fade-out{
  opacity:0;
  visibility:hidden;
}

.loader-wrapper{
  position:relative;
  text-align:center;
}

.loader-text{
  font-family:'Playfair Display',serif;
  font-size:3rem;
  letter-spacing:6px;
}

.loader-bar{
  position:absolute;
  top:-18px;
  left:0;
  height:2px;
  width:0%;
  background:var(--text);
  animation:loadingBar 2.5s ease-in-out infinite;
}

@keyframes loadingBar{
  0%{width:0%; left:0;}
  50%{width:100%; left:0;}
  100%{width:0%; left:100%;}
}

/* ================= HERO ================= */
.hero {
  min-height: 100vh;
  padding: 8vh 6vw;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  flex-direction: column;

  position: relative;
  z-index: 2;
  overflow: hidden; /* ensures video doesn't spill outside */
  color: white;
}

/* Background video */
.hero-video{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  z-index: -2;
}

/* Dark overlay for readability */
.hero::before{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.45);
  z-index:-1;
}

/* Title */
.hero h1{
  font-family:'Playfair Display',serif;
  font-size:clamp(3.5rem,9vw,9rem);
  font-weight:500;
}

/* Paragraph */
.hero p {
  max-width:700px;
  width:90%;
  margin-top:6vh;
  line-height:1.6;
  text-align:justify;
}

/* Subheadline + tagline */
.subheadline,
.tagline{
  overflow:hidden;
  display:inline-block;
}

.subheadline{
  margin-top:20px;
  font-family:'Playfair Display',serif;
  font-size:clamp(1.5rem,3vw,2.5rem);
}

.tagline{
  margin-top:14px;
  font-size:1rem;
  letter-spacing:1px;
  opacity:.8;
}

/* Letter animation */
.letter{
  display:inline-block;
  opacity:0;
  transform:translateY(40px);
  animation:letterReveal 1.2s cubic-bezier(.16,1,.3,1) forwards;
}

@keyframes letterReveal{
  to{
    opacity:1;
    transform:translateY(0);
  }
}
/* ================= SECTIONS ================= */

.section,
.section2 {
  padding: clamp(80px, 12vh, 180px) 6vw;
  position: relative;
  z-index: 1;
  margin: 0 auto;
}

/* Video section */
.video-section {
  overflow: hidden;
}

/* Background video */
.bg-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  transform: translate(-50%, -50%);
  object-fit: cover;
  z-index: -1;
}

/* Content above video */
.video-section .content {
  position: relative;
  z-index: 2;
  color: white;
}

.section{
  background-color: #fff;
}

.section2{
  background-color: #d7d7d7;
  text-align: center;
}

h2{
  font-family:'Playfair Display',serif;
  font-size:clamp(2.5rem,6vw,5rem);
  margin-bottom:12vh;
}

/* ================= GALLERY ================= */
.gallery {
  column-count: 4;
  column-gap: 30px;
  position: relative;
  z-index: 1;
  margin-top: 0;
}

.artwork {
  break-inside: avoid;
  margin-bottom: 30px;
}

.artwork.visible{
  opacity:1;
  transform:translateY(0);
}

.artwork img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;

  filter: grayscale(100%);
  transition: filter .6s ease;
}

.artwork:hover img{
  filter: grayscale(0%);
}

.artwork.zooming img{
  transform:none;
}

.art-info{
  position:absolute;
  bottom:30px;
  left:30px;
  color:white;
  font-family:'Playfair Display',serif;
  background:rgba(0,0,0,.4);
  padding:15px 20px;
  backdrop-filter:blur(6px);
}

.art-info h3{font-size:1rem;}
.art-info p{font-size:.75rem; opacity:.85;}

/* ================= LIGHTBOX ================= */
.lightbox,
.lightbox * {
  color: white;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  backdrop-filter: blur(18px);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 40px 20px;
  overflow-y: auto; /* IMPORTANT */
  -webkit-overflow-scrolling: touch;

  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease, visibility .6s ease;
  z-index: 2000;
}

.lightbox.active{
  opacity:1;
  visibility:visible;
}

.lightbox-content {
  width: 100%;
  max-width: 1000px;
  margin: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;

  padding: 0 20px;
}

/* Image zoom effect */
.lightbox img {
  max-width: 92vw;
  max-height: 70vh;
  height: auto;
  object-fit: contain;
  margin: 0 auto 40px auto;
  display: block;
}

/* Remove zoom effect for iframe */
#lightboxVideoContainer iframe {
  transform: none !important;
  transition: none !important;
}

/* Zoom effect for images AND iframes */
.lightbox.zooming img,
.artwork.zooming img,
#lightboxVideoContainer iframe.zooming {
  transform: none !important;
  transition: none !important;
}

.lightbox-meta {
  margin-bottom: 25px;
  opacity: .8;
  text-align: center;
}

.lightbox-meta h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  margin-bottom: 5px;
}

.lightbox-meta p {
  font-size: .9rem;
  opacity: .8;
}

.lightbox-description {
  max-width: 1000px;
  margin: 0 auto;
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  line-height: 1.5;
  text-align: center;
}
.lightbox-contacts {
  margin-top: 15px;
  font-size: .8rem;
  letter-spacing: 1px;
  text-transform: uppercase;

  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.lightbox-contacts a{
  color:var(--accent);
  text-decoration:none;
  transition:.3s;
}

.lightbox-contacts a:hover{
  opacity:.6;
}
.divider{
  width:40px;
  height:1px;
  background:rgba(255,255,255,.4);
  margin:5px auto;
}

.highlight{
  color:var(--accent);
}

.close-btn {
  position: fixed;
  top: 20px;
  right: 20px;
  font-size: 2rem;
  font-family: 'Playfair Display', serif;
  color: white;
  cursor: pointer;
  z-index: 3000;
}

/* ================= POEM ================= */
.poem{
  font-family:'Playfair Display',serif;
  font-size:clamp(1.3rem,2.5vw,2rem);
  /*max-width:800px;*/
  text-align: justify; /* justifies text */
  margin-bottom:30px;
}

.genP{
  margin-bottom:80px;
}

.video {
  width: 100%;
  aspect-ratio: 16 / 9;
}

.video iframe {
  width: 100%;
  height: 100%;
}

button{
  padding:12px 30px;
  border:1px solid var(--text);
  background:none;
  cursor:pointer;
}

button:hover{
  background:var(--text);
  color:white;
}

@media (max-width: 1100px) {
  .gallery {
    column-count: 2;
  }
}

@media (max-width: 650px) {

  .artwork img {
    filter: grayscale(0%);
  }
  
  .gallery {
    column-count: 1;
  }
}

@media (max-width: 768px) {
	
  /*.hero img {
    filter: grayscale(100%) brightness(60%);
  }*/
	
  .hero-video {
    display:none !important;
    visibility:hidden;
  }
  
  .artwork img {
    filter: grayscale(0%);
  }

  .hero {
    min-height: 85vh;
    padding: 6vh 5vw;
	background:#3d3b3b !important;
	color:#fff !important;
  }

  .hero p {
    width: 100%;
  }

  h2 {
    margin-bottom: 8vh;
  }

  .section,
  .section2 {
    padding: 80px 5vw;
  }

  .close-btn {
    top: 20px;
    right: 20px;
  }
  .lightbox-content {
    width: 100%;
    max-width: 95%;
    text-align: center;
  }

  .lightbox img {
    max-height: 55vh; /* smaller on mobile */
    margin-bottom: 25px;
  }

  .lightbox-meta h3 {
    font-size: 1.2rem;
  }

  .lightbox-description {
    font-size: .95rem;
    line-height: 1.4;
  }
}

.content-center {
  display: flex;
  justify-content: center;   /* centers the whole group */
  align-items: center;
  gap: 30px;                 /* 30px space between images */
  flex-wrap: wrap;           /* optional: wraps on small screens */
}

.lightbox-media {
  position: relative;
  width: 100%;
  height: auto;
}

#lightboxImg {
  /*width: 100%;*/
  display: block;
}

#lightboxVideo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 1s ease;
  pointer-events: none;
}

#lightboxVideo.show {
  opacity: 1;
}

#lightboxVideoContainer iframe.zooming {
  transform: scale(1.08);
  transition: transform 8s ease;
}