/* Basic Reset & Variables */
* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
:root{
  --bg:#0f0f10; --bg-soft:#141416; --text:#eaeaf0; --muted:#a6abb4; --brand:#ff2e63; --brand-2:#00d1b2;
  --card:#1b1c20; --border:#2a2c31; --shadow: 0 10px 30px rgba(0,0,0,.25);
}

.float-div {
  position: absolute; /* or fixed for fixed position relative to viewport */
  top: 100px;
  left: 0px;
  width: 100%;
  height: 250px;
  color: white;
  padding: 10px;
  z-index: 90; /* Ensures it appears on top of other content */
}

/* Typography */


  a {
      color: #ff2e63; /* Sets all links to red */
    }

    a:visited {
      color: #ff2e63; /* Sets visited links to purple */
    }

    a:hover {
      color: #FF0000; /* Sets hover color to blue */
    }

  a:active {
      color: #ff2e63; /* Sets active color to green */
    }


body{
  font: 16px/1.6 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h3{
    padding-top: 6px;
}


h1,h2,h3{ line-height:1.2; margin:0 0 .5rem; }
p{ margin:0 0 1rem; }
.eyebrow{ text-transform: uppercase; letter-spacing:.12em; font-size:.85rem; color:var(--brand); }
.muted{ color: var(--muted); }

/* Layout */
.wrap{ width:min(1100px, 92vw); margin:0 auto; padding:3rem 0; }
.wrap.narrow{ width:min(850px, 92vw); }

/* Header */
.site-header{
  position: sticky; top:0; z-index: 100;
  background: rgba(15,15,16,.8); backdrop-filter: blur(8px);
  border-bottom:1px solid var(--border);
  transition: transform .4s ease;
}
.site-header.hide { transform: translateY(-100%); }
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; padding: .8rem 0; }
.brand img{ display:block; height: 34px; width:auto; }

.nav__toggle{ display:none; font-size:1.25rem; background:transparent; color:var(--text); border:1px solid var(--border); padding:.4rem .6rem; border-radius:.5rem; }
.nav__menu{ list-style:none; margin:0; padding:0; display:flex; gap:1rem; }
.nav__menu a{
  color:var(--text); text-decoration:none; padding:.5rem .75rem; border-radius:.5rem;
}
.nav__menu a:hover, .nav__menu a[aria-current="page"]{ background: var(--bg-soft); }

@media (max-width: 820px){
  .nav__toggle{ display:block; z-index: 50}
  .nav__menu{ display:none; position:absolute; right:1rem; top:64px; background:var(--bg-soft); border:1px solid var(--border); border-radius:.75rem; padding:.5rem; flex-direction:column; box-shadow: var(--shadow); min-width: 200px; }
  .nav__menu.show{ display:flex; }
}

/* Hero */
.hero{
  position: relative; min-height: 76vh; display:grid; place-items:center;
  border-bottom:1px solid var(--border);
}
.hero__bg{
  position:absolute; inset:0; background-image:url('/assets/heroGIF.gif'); background-size:cover; background-position:center;
  filter: brightness(.55) saturate(1.1);
}
.hero__inner{ position: relative; text-align:center; padding: 2rem; }
.hero__title{ font-size: clamp(1.8rem, 3.5vw + .5rem, 3rem); font-weight: 700; }
.hero__cta{ margin-top:1rem; }

/* Buttons */
.btn{ display:inline-block; border:1px solid var(--border); padding:.7rem 1rem; border-radius:.7rem; text-decoration:none; color:#ff2e63; transition: transform .08s ease, background .2s ease; }
.btn:hover{ background: var(--bg-soft); transform: translateY(-1px); }
.btn--primary{ background: var(--brand); border-color: transparent; color:white; }
.btn--primary:hover{ filter: brightness(1.1); }

.btnrow{ display:flex; flex-wrap:wrap; gap:.6rem; }

/* Release section */
.release .wrap{ display:grid; grid-template-columns: 1fr 1fr; gap:2rem; align-items:center; }
.release__title{ font-size:1.8rem; margin:.2rem 0 .5rem;}
.release__links{ display:flex; gap:.6rem; margin-top:1rem; }
@media (max-width: 900px){ .release .wrap{ grid-template-columns:1fr; }}

/* Press */
.press__list{ display:flex; gap:1rem; flex-wrap:wrap; padding:0; margin:0; list-style:none; }
.press__item{ display:inline-block; padding:.6rem .8rem; border:1px solid var(--border); border-radius:.6rem; text-decoration:none; color:var(--text); }
.press__item:hover{ background:var(--bg-soft); }

/* Subscribe placeholder */
.subscribe__placeholder{ border:0px dashed var(--border); padding:2rem; border-radius: .8rem; background: linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.03)); }

/* Page hero */
.page-hero.small .wrap{ padding: 2.5rem 0; }
.page-hero h1{ font-size: clamp(1.6rem, 2.2vw + .6rem, 2.6rem); }

/* Cards & Grids */
.grid{ list-style:none; padding:0; margin:0; display:grid; gap:1.2rem; }
.grid--albums{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid--videos{ grid-template-columns: repeat(1, minmax(0,1fr)); }
.grid--photos{ grid-template-columns: repeat(4, minmax(0,1fr)); }
.card{ background: var(--card); border:1px solid var(--border); border-radius:.9rem; padding:1rem; box-shadow: var(--shadow); }
.card img{ width:100%; height:auto; display:block; border-radius:.6rem; }
.ratio{ position:relative; width:100%; padding-top:56.25%; border-radius:.6rem; overflow:hidden; }
.ratio iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

@media (max-width: 1100px){ .grid--albums{ grid-template-columns: repeat(1, minmax(0,1fr)); } }
@media (max-width: 780px){ .grid--photos{ grid-template-columns: repeat(2, minmax(0,1fr)); } }

/* Content */
.content p + p{ margin-top:.5rem; }

/* Footer */
.site-footer{ border-top:1px solid var(--border); }
.site-footer .wrap{ padding:1.5rem 0; }
.site-footer p{ margin:.25rem 0; }

/* Accessibility */
.skip a{ position:absolute; left:-9999px; background:#fff; color:#000; padding:.5rem; border-radius:.5rem; }
.skip a:focus{ left: 1rem; top: 1rem; z-index: 999; }

/* Appear on scroll animations */
[data-animate]{ opacity:0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; }
[data-animate].in{ opacity:1; transform: translateY(0px); }

/* Lightbox */
.lightbox__overlay{ position:fixed; inset:0; background: rgba(0,0,0,.9); display:none; place-items:center; z-index:9999; }
.lightbox__overlay.show{ display:grid; }
.lightbox__img{ max-width: 92vw; max-height: 88vh; border-radius: .5rem; }
.lightbox__close{ position:absolute; top: 1rem; right: 1rem; font-size:2rem; background:transparent; color:#fff; border:0; cursor:pointer; }

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