/* fl image list */
       

.fl2-overlay {
  background-color: rgba(0, 0, 0, 0.4);
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;  
  transition: all .7s ease-in;
}

.fl2-overlay:hover {  
  background-color: rgba(180, 15, 4, 0.4); 
}

.fl2-image-wrapper {
  position: relative;
  overflow: hidden;
}


.fl2-image-wrapper img{  
  display: block;
  transform: scale(1);
  transition: transform 0.7s ease-in-out;  
}

.fl2-image-wrapper:hover img{
  transform: scale(1.2);  
}

.fl2-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.fl2-text h3 {
  color: #fff;
}

.fl2-text h3 span.over {
  color: #fff;
}

.fl2-text a p {
  color: #fff;
}

.fl2-item {
  flex: 1 1 calc(50% - 5px); 
  box-sizing: border-box;
}
.fl2 .col-md-8.plr-none {
  display: flex;
  flex-wrap: wrap;
  gap: 5px; 
}


@media (max-width: 991px) {
  
  .fl2 .col-md-8.plr-none {
    display: block;    
  }
  .fl2-item {
    display: block;
    float: left;
    width: 50%;
    box-sizing: border-box;
  }
}


@media (max-width: 767px) {
  .fl2-item {
    float: none;
    width: 100%;
    box-sizing: border-box;    
  }
}
.flex-gap-row {
  display: flex;
  gap: 5px; 
}

@media (max-width: 991px) {
  .flex-gap-row {
    display: block; 
    gap: 0;  
  }
}


/* ───────────────── desktop ≥992 px ───────────────── */
@media (min-width: 992px) {

  /* 1 ▸ one-row layout — 30.77 % | 69.23 % */
  .flex-gap-row{
      display:grid;
      grid-template-columns:4fr 9fr; /* 4 : 9 ratio */
      column-gap:5px;
      row-gap:0;
  }
  .flex-gap-row > .col-md-4,
  .flex-gap-row > .col-md-8{
      float:none;            /* override Bootstrap */
      width:100%;
      max-width:100%;
  }

  /* 2 ▸ tall image on the left */
  .big-left{ aspect-ratio: 2 / 3; }       /* portrait 2:3 */

  /* 3 ▸ 2 × 2 gallery on the right */
  .fl2 .col-md-8.plr-none{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:5px;
  }
  .fl2 .col-md-8 .fl2-image-wrapper{
      aspect-ratio: 3 / 2;                /* landscape 3:2 */
  }

  /* 4 ▸ make every image fill its wrapper */
  .fl2-image-wrapper img{
      width:100%;
      height:100%;
      object-fit:cover;
  }
}



/* fl image list END*/


a,
a:link,
a:visited,
a:hover,
a:active,
a:focus {
    text-decoration: none !important;
}


.flex-dev-hero-item {
  flex-grow: 1;
  width: 300px;
}

li {
  color: #fff;
}

/* === Full-screen video hero === */
.hero-video{
  position:relative;
  height:100vh;          /* fill the viewport */
  overflow:hidden;
}

/* Stretch the YouTube iframe to cover */
/* Stretch the YouTube iframe to *cover* the viewport
   while preserving 16:9, even on ≥ 1500 px-wide screens */
.hero-video iframe{
  position:absolute;
  top:50%;left:50%;
  /* Base size: fill the width, keep 16:9 */
  width:100vw;               /* 100 % of viewport width   */
  height:56.25vw;            /* 100 vw × 9 / 16 = 56.25 vw */
  /* Safety nets so ultra-wide screens still fill vertically */
  min-width:177.78vh;        /* 100 vh × 16 / 9           */
  min-height:100vh;          /* never shorter than screen */
  transform:translate(-50%,-50%);
  pointer-events:none;       /* clicks fall through       */
}


/* Centered headline */
.hero-video .hero-title{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-size:4rem;        /* tweak to taste */
  line-height:1.1;
  text-align:center;
  text-shadow:0 0 20px rgba(0,0,0,.7); /* helps legibility */
}


.hero-video .hero-text{
  position:absolute;
  top:57%;left:50%;
  transform:translate(-50%,-50%);
  color:#fff;
  font-size:2rem;        /* tweak to taste */
  line-height:1.1;
  text-align:center;
  text-shadow:0 0 20px rgba(0,0,0,.7); /* helps legibility */
  font-family:'Lugrasimo',serif;
}


.nav-btn {
  height: 4em;
  width: 12em;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0px solid black;
  cursor: pointer;
}

.nav-btn-wrapper {
  height: 2em;
  width: 8em;
  position: relative;
  background: transparent;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: -10px;
}

.nav-btn-text {
  font-size:20px;
  font-weight:700;
  font-family:'Lugrasimo',serif;  
  z-index: 1;
  color: #000;
  padding: 8px 12px 4px 12px;
  border-radius: 0px;
  background: rgba(255, 255, 255, 0.7);
  transition: all 0.5s ease;
}

.flower {
  display: grid;
  grid-template-columns: 1em 1em;
  position: absolute;
  transition: grid-template-columns 0.8s ease;
}

.flower1 {
  top: -12px;
  left: -13px;
  transform: rotate(5deg);
}

.flower2 {
  bottom: -5px;
  left: 8px;
  transform: rotate(35deg);
}

.flower3 {
  bottom: -15px;
  transform: rotate(0deg);
}

.flower4 {
  top: -14px;
  transform: rotate(15deg);
}

.flower5 {
  right: 11px;
  top: -3px;
  transform: rotate(25deg);
}

.flower6 {
  right: -15px;
  bottom: -15px;
  transform: rotate(30deg);
}

.petal {
  height: 1em;
  width: 1em;
  border-radius: 40% 70% / 7% 90%;
  background: linear-gradient(#2e0300, #b40f04);
  border: 0.5px solid #b40f04;
  z-index: 0;
  transition: width 0.8s ease, height 0.8s ease;
}

.two {
  transform: rotate(90deg);
}

.three {
  transform: rotate(270deg);
}

.four {
  transform: rotate(180deg);
}

.nav-btn:hover .petal {
  background: linear-gradient(#2e0300, #b40f04);
  border: 0.5px solid #2e0300;
}

.nav-btn:hover .flower {
  grid-template-columns: 1.5em 1.5em;
}

.nav-btn:hover .flower .petal {
  width: 1.5em;
  height: 1.5em;
}

.nav-btn:hover .text {
  background: rgba(255, 255, 255, 0.4);
}

.nav-btn:hover div.flower1 {
  animation: 15s linear 0s normal none infinite running flower1;
}

@keyframes flower1 {
  0% {
    transform: rotate(5deg);
  }

  100% {
    transform: rotate(365deg);
  }
}

.nav-btn-:hover div.flower2 {
  animation: 13s linear 1s normal none infinite running flower2;
}

@keyframes flower2 {
  0% {
    transform: rotate(35deg);
  }

  100% {
    transform: rotate(-325deg);
  }
}

.nav-btn:hover div.flower3 {
  animation: 16s linear 1s normal none infinite running flower3;
}

@keyframes flower3 {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.nav-btn:hover div.flower4 {
  animation: 17s linear 1s normal none infinite running flower4;
}

@keyframes flower4 {
  0% {
    transform: rotate(15deg);
  }

  100% {
    transform: rotate(375deg);
  }
}

.nav-btn:hover div.flower5 {
  animation: 20s linear 1s normal none infinite running flower5;
}

@keyframes flower5 {
  0% {
    transform: rotate(25deg);
  }

  100% {
    transform: rotate(-335deg);
  }
}

.nav-btn:hover div.flower6 {
  animation: 15s linear 1s normal none infinite running flower6;
}

@keyframes flower6 {
  0% {
    transform: rotate(30deg);
  }

  100% {
    transform: rotate(390deg);
  }
}



/* SOCIAL MEDIA */
/* ---------- Scoped Social Bar ---------- */
.social-icons{display:flex;justify-content:center;align-items:center;margin:0;padding:0;list-style:none;}
.social-icons .icon-wrap{position:relative;margin:0 10px;}

.social-icons .tooltip{
  position:absolute;left:50%;top:-30px;transform:translateX(-50%);
  background:#000;color:#fff;padding:6px 10px;border-radius:5px;
  font-size:14px;opacity:0;visibility:hidden;transition:.3s;
}
.social-icons .icon-wrap:hover .tooltip{top:-50px;opacity:1;visibility:visible;}

.social-icons .btn-social{
  position:relative;display:flex;justify-content:center;align-items:center;
  width:50px;height:50px;border-radius:50%;color:#4d4d4d;
  background:transparent;overflow:hidden;transition:.3s;
}
.social-icons .btn-social svg{width:30px;height:30px;z-index:1;}
.social-icons .btn-social:hover{color:#fff;box-shadow:3px 2px 45px rgba(0,0,0,.12);}

.social-icons .bg-fill{
  position:absolute;left:0;top:0;width:100%;height:100%;
  transform:scaleY(0);transform-origin:bottom;transition:.3s;
}
.social-icons .btn-social:hover .bg-fill{transform:scaleY(1);}

/* brand colors */
.social-icons .spotify .bg-fill,
.social-icons .spotify + .tooltip{background:#1db954;}
.social-icons .youtube .bg-fill,
.social-icons .youtube + .tooltip{background:#ff0000;}
.social-icons .facebook .bg-fill,
.social-icons .facebook + .tooltip{background:#1877f2;}
.social-icons .tiktok .bg-fill,
.social-icons .tiktok + .tooltip{background:#000;}


/* SOCIAL MEDIA END*/



.spotify-embed{
  width:100%;
  height: 475px;   /* fixed height for album embeds */
  border-radius:0px !important;
}

/* Photo Gallery Modal section */

.photo-gallery-modal a {
  position: relative;
}
.photo-gallery-modal a:before,
.photo-gallery-modal a .pgm-content {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease-in-out, visibility 0.25s ease-in-out,
    transform 0.25s ease-in-out;
}
.photo-gallery-modal a:before {
  content: "";
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
}
.photo-gallery-modal a .pgm-content {
  z-index: 2;
  transform: translateY(-30px);
  padding: 15px;
}
.photo-gallery-modal a:hover:before,
.photo-gallery-modal a:hover .pgm-content {
  opacity: 1;
  visibility: visible;
}
.photo-gallery-modal a:hover .pgm-content {
  transform: translateY(0);
}
.photo-gallery-modal a .pgm-content p {
  color: #fff;
}


.project-padding-top {
  padding-top: 12%;
}

@media (max-width: 767px) {
  .project-padding-top {
    padding-top: 25%;
  }
}

.new-hero .overlay-subpage {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2); 
  display: flex;
  align-items: center;
  justify-content: center;
}


#gallery--zoom-transition a {
  display: block;
  position: relative;
  overflow: hidden !important;
}

#gallery--zoom-transition a img {
  display: block;
  width: 100%;
  height: auto;
}

#gallery--zoom-transition a::before {
  content: "Hi";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3); 
  color: #fff; 
  font-size: 1.2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
  pointer-events: none; 
}

#gallery--zoom-transition a:hover::before {
  opacity: 1; 
}


/* 1. Kill multi-column so only Grid is active */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  grid-auto-rows:10px;        /* tiny lego tracks */
  gap:5px;                    /* 5-px gutter everywhere */
}

/* 2. Neutralise Bootstrap’s side margins for this section */
.masonry-gallery .row{margin-left:0;margin-right:0;}

/* 3. Every card fills its grid cell */
.gallery-item{position:relative;overflow:hidden;}
.gallery-item img{width:100%;height:auto;display:block;object-fit:cover;}

/* 4. Decorative accents (wide / big). Height handled by JS. */
.gallery-item.wide{grid-column:span 2;}
.gallery-item.big {grid-column:span 2;}      /* JS decides rows */

/* 5. Optional hover veil */
.gallery-item::before{content:'';position:absolute;inset:0;
  background:rgba(0,0,0,.35);opacity:0;transition:.3s;}
.gallery-item:hover::before{opacity:1;}



/* ── Masonry container ─────────────────────────── */
.vampire-gallery-grid{
  column-width:360px;          
  column-gap:5px;             
}


.vampire-gallery-item{
  display:block;
  margin-bottom:5px;          
  break-inside:avoid;          
}

.vampire-gallery-item img{
  width:100%;
  aspect-ratio:3 / 2;   /* 1536 × 1024 prevents jumps */
  object-fit:cover;
  display:block;    
}

.vampire-accent{
  grid-column:span 2;         
  grid-row:span 60;           
}




/* --- Google-hosted Lugrasimo font --- */
@import url('https://fonts.googleapis.com/css2?family=Lugrasimo&display=swap');

/* --- Page / section background --- */
.vampire-section{
  font-family:'Lugrasimo', monospace;
  color:#fff;
  background:radial-gradient(circle, #230002 0%, #000 58%);
  padding:4rem 0;
}

/* --- Form card --- */
.vampire-form{
  max-width:600px;
  margin:auto;
  padding:2.5rem 3rem;
  border-radius:14px;
  background:radial-gradient(circle at top left,#c30e02 0%, #230002 60%, #000 120%);
  box-shadow:0 0 18px 4px #c30e0255;
}

/* labels & inputs */
.vampire-form label{
  display:block;
  margin-bottom:.9rem;
  font-size:1.1rem;
}
.vampire-form input,
.vampire-form textarea{
  width:100%;
  padding:.7rem 1rem;
  border:2px solid #c30e02;
  border-radius:6px;
  background:#000;
  color:#fff;
  font-family:inherit;
  font-size:1rem;
  margin-top:.35rem;
}
.vampire-form textarea{ resize:vertical; height:140px; }

/* button */
.vampire-form button{
  margin-top:1.4rem;
  padding:.8rem 2.4rem;
  font-size:1.1rem;
  font-weight:700;
  background:#c30e02;
  color:#fff;
  border:none;
  border-radius:6px;
  cursor:pointer;
  transition:background .25s ease;
}
.vampire-form button:hover{
  background:#ff0d0d;
}

/* honeypot stays hidden */
.hidden{ display:none !important; }


.vampire-heading{
  font-family:'Lugrasimo', monospace;
  color:#c30e02;                 /* blood-red */
  font-size:2.6rem;
  text-align:center;
  margin:0 0 1.8rem;
  letter-spacing:1px;
  text-shadow:0 0 8px #c30e02aa;
  padding: 20px 0px;
}