@import url('https://fonts.googleapis.com/css2?family=Shippori+Mincho:wght@600;700;800&family=Dela+Gothic+One&family=Chakra+Petch:ital,wght@0,600;0,700;1,700&family=Inter:wght@300;400;500;600;700&family=Space+Grotesk:wght@400;500;700&display=swap');

@font-face {
  font-family: 'The Blackheads';
  src: url('the-blackheads/TheBlackheads-Regular.ttf') format('truetype'),
       url('the-blackheads/TheBlackheads-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-bg: #070b08;
  --color-bg-alt: #0b120c;
  --color-card: #0e1711;
  --color-card-border: rgba(110, 130, 105, 0.2);
  --color-card-hover: rgba(138, 158, 133, 0.12);
  
  --color-accent-mint: #8a9e85;  /* Faded Lichen Sage */
  --color-accent-emerald: #546650; /* Faded Muted Moss */
  --color-accent-moss: #334231;
  --color-accent-tan: #c4b5a5;
  --color-accent-bone: #e6dbcc;   /* Aged Bone Cream */
  
  --color-text-primary: #e6dbcc;
  --color-text-secondary: #9e9484;
  --color-text-dim: #5c5448;
  
  --glass-bg: rgba(11, 18, 13, 0.8);
  --glass-border: rgba(138, 158, 133, 0.2);
  --glass-shadow: 0 20px 50px rgba(0, 0, 0, 0.8);

  --font-display: 'Shippori Mincho', 'Dela Gothic One', serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Chakra Petch', 'Space Grotesk', monospace;
  --font-47: 'The Blackheads', 'Shippori Mincho', serif;
}

/* Japanese Samurai Bushido Typography */
.font-display {
  font-family: var(--font-display) !important;
  letter-spacing: -0.03em;
}

.font-47, .watermark-47, .num-47 {
  font-family: 'The Blackheads', 'Shippori Mincho', serif !important;
  letter-spacing: 0.04em !important;
}

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

html {
  scroll-behavior: smooth;
  background-color: var(--color-bg);
  color: var(--color-text-primary);
  font-family: var(--font-body);
  overflow-x: hidden;
}

body {
  background-color: var(--color-bg);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Faded Vintage Film Grain Overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(230, 219, 204, 0.03) 1px, transparent 0);
  background-size: 4px 4px;
  pointer-events: none;
  z-index: 999;
  opacity: 0.6;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #070b08;
}
::-webkit-scrollbar-thumb {
  background: #1e2b20;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent-mint);
}

/* Selection Highlight */
::selection {
  background: var(--color-accent-mint);
  color: #070b08;
}

/* Background Atmosphere Glows */
.ambient-glow-1 {
  position: fixed;
  top: -10vw;
  left: -10vw;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(51, 66, 49, 0.3) 0%, rgba(7, 11, 8, 0) 70%);
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
}

.ambient-glow-2 {
  position: fixed;
  bottom: -15vw;
  right: -10vw;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(84, 102, 80, 0.2) 0%, rgba(7, 11, 8, 0) 70%);
  filter: blur(110px);
  pointer-events: none;
  z-index: 0;
}

/* Watermark 47 Background */
.watermark-47 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 38vw;
  line-height: 0.8;
  color: rgba(138, 158, 133, 0.025);
  user-select: none;
  pointer-events: none;
  position: absolute;
  top: 15%;
  right: -5vw;
  z-index: 0;
  letter-spacing: -0.08em;
}

/* Glassmorphism Classes (Faded Antique Glass) */
.glass-panel {
  background: rgba(11, 18, 13, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-nav {
  background: rgba(9, 15, 11, 0.8);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(138, 158, 133, 0.18);
}

.glass-card {
  background: rgba(14, 23, 17, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(230, 219, 204, 0.08);
  transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.glass-card:hover {
  background: rgba(22, 36, 26, 0.7);
  border-color: rgba(138, 158, 133, 0.35);
  transform: translateY(-4px);
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.6);
}

/* Typography Helpers */
.font-display {
  font-family: var(--font-display);
}
.font-mono {
  font-family: var(--font-mono);
}

.text-gradient-earth {
  background: linear-gradient(135deg, #e6dbcc 0%, #a3b899 50%, #8a9e85 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-47 {
  display: block;
  font-size: clamp(2rem, 4.5vw, 3.75rem);
  line-height: 1;
  color: var(--color-accent-mint);
  opacity: 0.9;
  margin-bottom: clamp(0.25rem, 1vw, 0.75rem);
  text-shadow: 0 4px 22px rgba(0, 0, 0, 0.6);
  user-select: none;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(3.5rem, 13vw, 13rem);
  line-height: 0.88;
  letter-spacing: -0.06em;
  text-transform: uppercase;
  color: var(--color-accent-bone);
  text-shadow: 0 4px 25px rgba(0, 0, 0, 0.6);
}

/* Floating Audio Visualizer Bars */
.eq-container {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 24px;
}

.eq-bar {
  width: 3px;
  background: var(--color-accent-mint);
  border-radius: 2px;
  animation: eqBounce 1.2s ease-in-out infinite alternate;
}
.eq-bar:nth-child(1) { height: 30%; animation-delay: 0.1s; }
.eq-bar:nth-child(2) { height: 80%; animation-delay: 0.3s; }
.eq-bar:nth-child(3) { height: 50%; animation-delay: 0.2s; }
.eq-bar:nth-child(4) { height: 100%; animation-delay: 0.4s; }
.eq-bar:nth-child(5) { height: 40%; animation-delay: 0.15s; }

.paused .eq-bar {
  animation-play-state: paused;
  height: 20% !important;
}

@keyframes eqBounce {
  0% { height: 15%; }
  100% { height: 100%; }
}

/* Custom Audio Slider Inputs */
input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: transparent;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 4px;
  cursor: pointer;
  background: #192b1f;
  border-radius: 2px;
}
input[type=range]::-webkit-slider-thumb {
  height: 14px;
  width: 14px;
  border-radius: 50%;
  background: var(--color-accent-mint);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -5px;
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.8);
  transition: transform 0.2s ease;
}
input[type=range]::-webkit-slider-thumb:hover {
  transform: scale(1.3);
}

/* Gallery Grid Image Card Styling */
.gallery-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background: #09110b;
  border: 1px solid rgba(74, 222, 128, 0.1);
  cursor: pointer;
  transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
  filter: brightness(0.85) contrast(1.05);
}

.gallery-card:hover img {
  transform: scale(1.06);
  filter: brightness(1) contrast(1.1);
}

.gallery-card .gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(5, 8, 6, 0.9) 0%, rgba(5, 8, 6, 0.2) 60%, rgba(5, 8, 6, 0) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.5rem;
}

.gallery-card:hover .gallery-overlay {
  opacity: 1;
}

.gallery-card:hover {
  border-color: rgba(74, 222, 128, 0.4);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.8), 0 0 30px rgba(74, 222, 128, 0.15);
}

/* Lightbox Modal */
.lightbox-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(4, 7, 5, 0.94);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.lightbox-modal.active {
  opacity: 1;
  pointer-events: auto;
}

/* Streaming Platform Hover Effects */
.platform-card {
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid rgba(255, 255, 255, 0.08);
}
.platform-card:hover {
  transform: translateY(-6px);
  border-color: var(--platform-color, var(--color-accent-mint));
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px var(--platform-glow, rgba(74, 222, 128, 0.2));
}

/* Japanese Samurai Earth-Green Button Design System */
.btn-samurai {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.9rem 2.2rem;
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  /* Katana Angled Chamfer Samurai Silhouette */
  clip-path: polygon(14px 0, 100% 0, 100% calc(100% - 14px), calc(100% - 14px) 100%, 0 100%, 0 14px);
}

/* Katana Blade Flash Light Streak Animation */
.btn-samurai::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 70%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  transform: skewX(-30deg);
  transition: left 0.75s ease;
  pointer-events: none;
}

.btn-samurai:hover::before {
  left: 180%;
}

/* Samurai Sage Primary Button (Faded Forest Aesthetic) */
.btn-samurai-emerald {
  background: linear-gradient(135deg, #6d8268 0%, #4a5c46 100%);
  color: #e6dbcc;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(138, 158, 133, 0.3);
}
.btn-samurai-emerald:hover {
  background: linear-gradient(135deg, #8a9e85 0%, #6d8268 100%);
  color: #ffffff;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.7);
  transform: translateY(-2px) scale(1.02);
}

/* Samurai Dark Lacquer Button */
.btn-samurai-dark {
  background: rgba(14, 23, 17, 0.85);
  color: #e6dbcc;
  border: 1px solid rgba(138, 158, 133, 0.25);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}
.btn-samurai-dark:hover {
  background: rgba(22, 36, 26, 0.95);
  color: #8a9e85;
  border-color: rgba(138, 158, 133, 0.6);
  transform: translateY(-2px) scale(1.02);
}

/* Samurai Katana Cut Accent Shape */
.samurai-cut {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

/* Button & Badge Animations */
.btn-emerald {
  background: var(--color-accent-mint);
  color: #070b08;
  font-weight: 700;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
}
.btn-emerald:hover {
  background: #6d8268;
  color: #ffffff;
  transform: translateY(-2px);
}

.badge-47 {
  background: rgba(138, 158, 133, 0.15);
  color: #8a9e85;
  border: 1px solid rgba(138, 158, 133, 0.3);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  text-transform: uppercase;
}

/* Pulse Glow Animation */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(74, 222, 128, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(74, 222, 128, 0.5);
  }
}

.pulse-glow {
  animation: pulseGlow 3s infinite ease-in-out;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .hero-title {
    font-size: 4rem;
  }
  .hero-47 {
    font-size: 1.75rem;
  }
  .watermark-47 {
    font-size: 60vw;
    top: 25%;
  }
}