/* ========== Fonts ========== */ 

@font-face {
  font-family: 'Grift';
  src: url('fonts/Grift-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'Grift';
  src: url('fonts/Grift-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'Grift';
  src: url('fonts/Grift-ExtraBold.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
}

/* ========== Base ========== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { 
  background: #121212; 
  font-family: 'Grift', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; 
  color: #fff; 
  line-height: 1.5; 
  overflow-x: hidden;
}

/* ========== Shop Button ========== */
.shop-btn {
  position: fixed; top: 20px; right: 20px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.2);
  padding: 10px 20px; border-radius: 8px;
  color: #fff; font-size: .85rem; font-weight: 700;
  z-index: 1000; cursor: pointer; transition: all .3s;
}
.shop-btn:hover { background: #fff; color: #000; }

/* ========== Hero ========== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
  overflow: hidden;
  perspective: 800px;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: linear-gradient(to top, #121212, transparent);
  pointer-events: none;
  z-index: 2;
}

.video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.hero-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

#hero-canvas {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  transition: transform .05s ease-out;
  /* Disable text selection */
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.hero-title {
  font-size: 12vw;
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  animation: fadeInUp 1s ease forwards;
}

.hero-subtitle {
  font-size: 4vw;
  font-weight: 400;
  color: #a1a1a6;
  margin-top: 12px;
  opacity: 0;
  animation: fadeIn 1.4s ease forwards .4s;
}

@media(min-width:768px){
  .hero-title { font-size: clamp(64px, 10vw, 140px); }
  .hero-subtitle { font-size: clamp(18px, 2vw, 28px); }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ========== Releases Grid ========== */
.grid {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr));
  gap: 25px; margin: 60px auto; max-width: 1200px; width: 100%; padding: 0 20px;
}
.grid a { position: relative; border-radius: 12px; overflow: hidden; }
.grid img { width: 100%; display: block; border-radius: 12px; transition: transform .3s; }
.grid a:hover img { transform: scale(1.05); }
.grid a::after {
  content: attr(data-title);
  position: absolute; bottom: 0; left: 0; right: 0;
  padding: 12px; background: linear-gradient(to top,rgba(0,0,0,.8),transparent);
  font-size: .9rem; font-weight: 600; text-align: left; color: #fff;
  opacity: 0; transition: opacity .3s;
}
.grid a:hover::after { opacity: 1; }

/* ========== Press Cards ========== */
.press-cards {
  display: grid; grid-template-columns: repeat(auto-fit,minmax(320px,1fr));
  gap: 25px; margin: 100px auto; max-width: 1200px; width: 100%; padding: 0 20px;
}
.press-cards > div {
  background: rgba(255,255,255,.02); border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px; padding: 25px; transition: transform .3s, box-shadow .3s;
}
.press-cards > div:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.5); }
.press-source { color: #a1a1a6; font-size: .75rem; font-weight: 700; margin-bottom: 8px; text-transform: uppercase; }
.press-cards a { color: #fff; text-decoration: none; font-weight: 600; }
.press-cards a:hover { opacity: .7; }

/* ========== Contact ========== */
.contact-section {
  text-align: center; margin: 100px auto 60px; padding: 40px 20px; max-width: 800px;
  background: rgba(255,255,255,.02); border-radius: 16px; border: 1px solid rgba(255,255,255,.08);
}
.contact-section h2 { margin-bottom: 20px; font-size: 1.6rem; font-weight: 700; }
.contact-section a { color: #fff; font-weight: 600; text-decoration: none; }
.contact-section a:hover { opacity: .7; }

@media(max-width:768px){
  .grid{gap:15px;}
  .press-cards{gap:15px;}
}