/*/ OVERVIEW STYLE /*/
html {
  scroll-behavior: smooth;
}
/* SMOOTH SCROLL WRAPPER*/
#wrapper {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: scroll;
}
#content {
  width: 100%;
  height: auto;
}

/*HERO SECTION*/
section.hero {
  position:relative;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-position: center;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding-top: 3.5rem;
}
#hero-video-mobile {
  display:none;
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:10;
  pointer-events:none;
}
#hero-video-desktop {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  object-fit:cover;
  z-index:10;
  pointer-events:none;
}
@media screen and (max-width: 768px) {
#hero-video-desktop{
  display: none;
}
#hero-video-mobile{
  display: block;
}
}


/* TOP TEXT*/
.overview-top {
  display: flex;
  width: 100vw;
  height: auto;
  margin-left: 1vh;
  margin-top: 2vh;
  font-size: 0.8rem;
  gap: 2vw;
}
.left-box-overview-top {
  position: relative;
  width: 15vw;
  height:13vh;
}
.right-box-overview-top {
  width: 18vw;
  height:13vh;
}
@media screen and (max-width: 768px) {
  .overview-top {
    display: none;
  }
}


/* TEXT REVEAL */
/* disable transitions while page is loading / content is injected */
.preload .reveal__inner {
  transition: none !important;
  opacity: 0 !important;
  transform: translateY(var(--reveal-offset)) !important;
}


/* REVEAL ANIMATIONS & DELAYS */
:root{
--reveal-offset: 6rem; /* how far text starts below */
--reveal-duration: 700ms;
--reveal-ease: cubic-bezier(1, 0.8, 0.2, 0.5);
}
/* The mask container: fixed height = height of content line(s) or set via CSS */
.reveal {
display:block;        /* shrinkwrap */
overflow:hidden;      /* this creates the mask */
line-height:1;
}
/* the element that moves up */
.reveal__inner {
display: block;
transform: translateY(var(--reveal-offset));
will-change: transform, opacity;
opacity:0;
transition: transform var(--reveal-duration) var(--reveal-ease),
            opacity calc(var(--reveal-duration) / 1.4) var(--reveal-ease);
}
/* active state — when visible */
.reveal.is-visible .reveal__inner {
transform: translateY(0);
opacity:1;
}

.left-box-overview-top .reveal:nth-child(1) .reveal__inner { transition-delay: 1.5s; }
.left-box-overview-top .reveal:nth-child(2) .reveal__inner { transition-delay: 1.5s; }
.right-box-overview-top .reveal:nth-child(1) .reveal__inner { transition-delay: 1.5s; }
.right-box-overview-top .reveal:nth-child(2) .reveal__inner { transition-delay: 1.5s; }


/* ARTWORK GRID */
/* artwork grid on mobile margin top*/
@media (max-width: 768px){
  .artwork-grid{
    margin-top: 40px;
  }
}
.grid-wrapper {
    position:relative;
    display: flex;
    flex:auto;
}
.grid-item{
    padding:0.5vh;
    margin-bottom:10vh;
}
.grid-wrapper .grid-item {
    width:fit-content;
    min-width: calc(100%/12);
}
/* Mobile - two columns masonry */
@media (max-width: 768px) {
    .grid-wrapper {
        display: block; /* allow column layout */
        column-count: 2;  /* two columns */
        column-gap: 1vh;
    }

    .grid-item {
        width: 100%;  /* full width inside the column */
        display: inline-block; /* required for column flow */
        margin-bottom: 1vh; /* space between items vertically */
        padding:3vh;
    }
}
.grid-item img {
    width: 100%;
    height:auto;
    display:block;
}
.grid-item:hover{
  cursor:pointer;
}
.grid-item h1 {

    font-size: 0.6rem;
    color: #000;
    margin-bottom: 0.5vh;
}
.grid-item h5 {
  position: relative;
  bottom: 0;
  left: 0px;
  opacity: 0;
  transition: opacity 0.15s ease;
  font-size: 0.6rem;
  color: #000000;
  pointer-events: none;

}
.grid-item:hover h5 {
  opacity: 1;
}




/* item text on mobile*/
@media screen and (max-width: 768px) {

.grid-item h1 {
  font-size: 1.5vh;
}
.grid-item h5 {
  opacity: 0; /* Change this to "1" to display on mobile */
  font-size: .4rem;
}
}

/* ARTWORK GRID STAGGER ANIMATION*/
.grid-item {
  opacity: 0;
  transform: translateY(12vh);
  animation: none; /* disable automatic animation */
}
.grid-item.is-visible {
  animation: slideUp 2s cubic-bezier(0.2,.59,0,.99) forwards;
}
@keyframes slideUp {
  to {
    opacity: 1;
    transform: translateY(0vh);
  }
}



/*GALLERY MODAL*/
.gallery-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: right;
  opacity: 0;
  visibility: hidden;
  pointer-events: none; /* Don't allow clicking when invisible*/
}
.gallery-modal.active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  pointer-events: auto;
  z-index: 9999; /* one over the ham menu overlay*/
 }
.gallery-content {
  position: relative;
  height: 100vh;
  width: 100vw;
  display: block;
  gap: 2rem;
  align-items: right;
  background-color: rgb(255, 255, 255);
} 
.gallery-img-container {
  position: absolute;
  top: 0;
  left:0;
  display: inline-block;
  align-items: left;
  justify-content: center;
  flex-shrink: 0;
}
.gallery-img {
  top: 0;
  left: 0;
  max-width: 100vw;
  max-height: 80vh;
  padding: 1vh 1vh;
}
.arrow {
  display: none;
  background: none;
  color: black;
  font-size: 2rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
  border: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
}
.arrow:hover{
  color:brown;
}


.arrow.left {left: 20px; top: 40vh;}
.arrow.right {right: 20px; top: 40vh;}

.close-button {
  color: #000;
  position: absolute;
  top: 10px;
  right: 10px;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 10;
  /* Hide the fallback glyph if you keep ✕ in HTML */
  font-size: 0;
}
.close-button::before,
.close-button::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 32px;
  height: 2px;
  background: #fff;
  opacity: 0;
}
.close-button:hover {
  background-color: #000;
}
.close-button::before,
.close-button::after {
  width: 60px;        /* adjust size */
  height: 1px;        /* thickness */
  background-color: black;  /* <-- make them black */
  transform-origin: center;
}
.close-button:hover::before,
.close-button:hover::after {
background-color: white;
}

    /* First slash */
    .close-button::before {
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%) rotate(45deg) scaleX(0);
    }
    /* Second slash */
    .close-button::after {
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%) rotate(-45deg) scaleX(0);
    }

    /* Triggered when opening */
    .close-button.is-animating::before {
    animation: draw45 1000ms ease-out forwards;
    }
    .close-button.is-animating::after {
    animation: drawm45 1000ms ease-out 220ms forwards; /* small delay for second line */
    }

    @keyframes draw45 {
    from { transform: translate(-50%, -50%) rotate(45deg) scaleX(0); opacity: 0; }
    to   { transform: translate(-50%, -50%) rotate(45deg) scaleX(1); opacity: 1; }
    }
    @keyframes drawm45 {
    from { transform: translate(-50%, -50%) rotate(-45deg) scaleX(0); opacity: 0; }
    to   { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1); opacity: 1; }
    }

.gallery-artworktitle {
  display: flex;
  position: absolute;
  bottom: 0;
  left: 0;
  font-family: bicyclette, sans-serif;
  /*kerning: 10em; is it possible??*/
  font-size: 1rem;
  margin: none;
  z-index: 98;
}
.fade-scroll {
display: none;
position: static;
top: auto;
left: 0;
right: 0;
margin: 0 auto;
margin-top: 11vh;
width: 90%;
height: 40vh;
text-align: justify;
overflow-y: auto;

}
.fade {
  position: sticky;
  left: 0;
  width: 100%;
  height: 30px;
  pointer-events: none; /* so clicks pass through */
  z-index:auto;
}

.gallery-caption {
  flex: 1;
  font-size: 1.1rem;
  max-width: 100%;
  line-height: 1.6;
}
@media screen and (max-width: 768px) {
  .gallery-content {
    width: 100vw;
    justify-content: center;
  }
  .gallery-artworktitle{
    top: 6vh;
  }
  .close-button{
    font-size: 0.5rem;
    top: 50px;
  }
  .gallery-img-container {
  top: 20vh;
}
  .arrow {
    display: none;
  }
  .fade-scroll{
    height: 35vh;
    margin-top: 20vh;
  }
  .fade-bottom{
    display:none;
  }
}


/* GALLERY MODAL THUMBNAILS */
.thumbnail-strip {
  display: flex;
  gap: 0.5rem;
  padding: 1vh;
  justify-content: flex-start; /* aligns left */
  overflow-x: auto; /* scroll if too many */
  -webkit-overflow-scrolling: touch; /* smooth scroll on iOS */
}
.gallery-thumb {
  height: 40px;
  width: auto;
  cursor: pointer;
  filter:grayscale(5);
  transition: opacity 0.3s;
  border-radius: 5px;
}
.gallery-thumb:hover {
opacity: 1;
filter: none;
}
.gallery-thumb.active {
  height: 60px;
  opacity: 1;
  filter: none;
  transition: ease 0.2s;
}