:root {
  --bg: #0b0b0b;
  --surface: #121212;
  --ink: #ffffff;
  --muted: #ffffff;
  --line: #ffffff;
  --font-sans: "Helvetica Neue", Arial, "BIZ UDPMincho", "Noto Sans JP", sans-serif;
  --font-display: "Julius Sans One", var(--font-sans);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--bg);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

::selection {
  background: var(--ink);
  color: var(--bg);
}

.wrap {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
}

.wrap-wide {
  max-width: none;
}

@media (min-width: 768px) {
  .wrap {
    padding: 0 48px;
  }
}

.display {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: -0.04em;
  line-height: 0.9;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  transition: background-color 0.5s ease, backdrop-filter 0.5s ease;
}

.site-header.scrolled {
  background: rgba(11, 11, 11, 0.9);
  backdrop-filter: blur(8px);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 20px;
  padding-bottom: 20px;
}

.logo {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.03em;
  font-size: 20px;
}

.header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.nav-desktop {
  display: none;
  gap: 32px;
}

.nav-desktop a {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
  transition: color 0.2s ease;
}

.nav-desktop a:hover {
  color: var(--ink);
}

@media (min-width: 768px) {
  .nav-desktop {
    display: flex;
  }
  .nav-toggle {
    display: none;
  }
}

.header-social {
  display: flex;
  align-items: center;
  gap: 16px;
}

.header-social a {
  display: flex;
  color: var(--muted);
  transition: color 0.2s ease;
}

.header-social a:hover {
  color: var(--ink);
}

.nav-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink);
}

.nav-mobile {
  display: none;
  flex-direction: column;
  gap: 24px;
  padding: 32px 24px;
  background: var(--bg);
  border-top: 1px solid var(--line);
}

.nav-mobile.open {
  display: flex;
}

.nav-mobile a {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  height: 100svh;
  width: 100%;
  overflow: hidden;
  background: var(--bg);
}

.hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: rgba(11, 11, 11, 0.1);
  pointer-events: none;
}

/* Spans the hero through Live (see .fragment-zone) so the same falling
   fragments drift down across all of those sections at their actual
   position on the page, then are clipped away at Live's bottom edge,
   instead of stopping at the bottom of the hero alone. */
.fragment-zone {
  position: relative;
}

.fragment-field {
  position: absolute;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 30;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 24px;
  /* This box spans the whole hero even though only its text is visible;
     without this it sits above the fragment layer in z-order and
     silently swallows hover/click on every fragment passing behind it. */
  pointer-events: none;
}

.hero-title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.03em;
  line-height: 0.95;
  font-size: 11vw;
  margin: 0;
  opacity: 0;
  animation: fade-up 0.9s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@media (min-width: 768px) {
  .hero-title {
    font-size: 9vw;
  }
}

.hero-since {
  margin: 20px 0 0;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
  opacity: 0;
  animation: fade-in 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.5s forwards;
}

@media (min-width: 768px) {
  .hero-since {
    font-size: 14px;
  }
}

.hero-scroll {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
  opacity: 0;
  pointer-events: none;
  animation: fade-in 1s ease 1.2s forwards;
}

.hero-scroll-line {
  position: relative;
  width: 1px;
  height: 28px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
}

.hero-scroll-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: var(--ink);
  animation: hero-scroll-drop 1.8s ease-in-out infinite;
}

@keyframes hero-scroll-drop {
  0% {
    top: -100%;
  }
  60%,
  100% {
    top: 100%;
  }
}

@keyframes fade-up {
  from { opacity: 0; transform: translateY(32px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ---------- Fragments ---------- */

.fragment {
  position: absolute;
  top: 0;
  left: 0;
  width: auto;
  pointer-events: auto;
  user-select: none;
  -webkit-user-drag: none;
  will-change: translate, rotate, opacity;
  animation-fill-mode: both;
  animation-timing-function: linear;
}

.fragment.fall {
  animation-name: fragment-fall;
}

.fragment.melting {
  animation-name: fragment-melt;
  animation-timing-function: ease-out;
  animation-duration: 0.3s !important;
  animation-delay: 0s !important;
}

/* translate/rotate/scale are animated as separate properties (not the
   combined `transform` shorthand) so melting can scale a fragment in
   place without resetting its fall position/rotation. --fall-scale
   (set in JS from the fragment zone's actual height) stretches the
   original one-screen fall shape so every fragment makes one
   continuous run from above the hero all the way through Live. */
@keyframes fragment-fall {
  0%   { translate: 0 calc(-20vh * var(--fall-scale, 1)); rotate: var(--rot-from); opacity: 0; }
  6%   { opacity: 0.9; }
  30%  { translate: var(--drift) calc(15vh * var(--fall-scale, 1)); rotate: var(--rot-to); }
  60%  { translate: calc(var(--drift) * -0.7) calc(55vh * var(--fall-scale, 1)); opacity: 0.9; }
  100% { translate: calc(var(--drift) * 0.3) calc(120vh * var(--fall-scale, 1)); opacity: 0.85; }
}

/* Melts like snow: stays full size and just fades away quickly, rather
   than shrinking - a light blur sells "dissolving" without changing
   the fragment's size or position. */
@keyframes fragment-melt {
  0%   { opacity: 1; filter: blur(0); }
  100% { opacity: 0; filter: blur(3px); }
}

/* ---------- Sections ---------- */

.section {
  padding: 96px 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  /* Keeps white text/borders legible over the bright, full-color photo
     backgrounds without dimming the photos themselves. */
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.7);
}

/* The fragment-field (z-index 20) drifts over these sections'
   backgrounds, so their actual content needs to sit above it. */
#news > .wrap,
#about > .wrap,
#about > .wrap-wide,
#works > .wrap,
#music > .wrap-wide,
#live > .wrap {
  position: relative;
  z-index: 21;
}

/* A flat black page reads as boring past the hero, so each section gets
   a watercolor background photo. News, About, Works, Music and Live all
   share the same image (no fade layer needed) so they read as one
   continuous backdrop instead of separate photos. */
#news,
#about,
#works,
#music,
#live {
  background-image: url("../images/gallery/background-6.jpg");
}

#contact {
  /* Recropped so the artwork's radiating center sits at the image's own
     center, keeping it aligned with the email address regardless of
     viewport width (background-position stays "center" from .section). */
  background-image: url("../images/gallery/background-5-1-centered.jpg");
}

@media (min-width: 768px) {
  .section {
    padding: 128px 0;
  }
}

.section-heading {
  margin-bottom: 48px;
}

@media (min-width: 768px) {
  .section-heading {
    margin-bottom: 64px;
  }
}

.eyebrow {
  margin: 0 0 12px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
}

.title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 0.9;
  font-size: 36px;
}

@media (min-width: 768px) {
  .title {
    font-size: 56px;
  }
}

.fade-in {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ---------- News ---------- */

.news-list {
  border-top: 1px solid var(--line);
}

.news-list li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {
  .news-list li {
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 28px 0;
  }
}

.news-date {
  font-size: 12px;
  color: var(--muted);
}

@media (min-width: 768px) {
  .news-date {
    width: 112px;
  }
}

.tag {
  display: inline-block;
  border: 1px solid var(--line);
  padding: 4px 12px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
  width: fit-content;
  text-align: center;
}

@media (min-width: 768px) {
  .tag {
    width: 104px;
  }
}

.news-title {
  font-size: 14px;
  transition: color 0.2s ease;
}

@media (min-width: 768px) {
  .news-title {
    font-size: 16px;
  }
}

a.news-title:hover {
  color: var(--muted);
}

/* ---------- About ---------- */

.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 768px) {
  .about-grid {
    grid-template-columns: 1fr 1fr;
    gap: 80px;
  }
}

.about-photo {
  position: relative;
  /* Matches the photo's own proportions so object-fit: cover doesn't
     have to crop the sides (which cut off the people at each end). */
  aspect-ratio: 1200 / 1594;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  background: var(--surface);
}

.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.statement-lead {
  font-size: 22px;
  line-height: 1.5;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.about-name,
.statement {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ink);
  margin: 0;
}

@media (min-width: 768px) {
  .about-name,
  .statement {
    font-size: 16px;
  }

  .statement-lead {
    font-size: 28px;
  }
}

.member-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
}

.member-list li {
  font-size: 14px;
  color: var(--ink);
}

.member-part {
  margin-right: 8px;
  color: var(--muted);
}

.history-list li {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 5px 0;
}

@media (min-width: 768px) {
  .history-list li {
    flex-direction: row;
    gap: 32px;
    padding: 5px 0;
  }
}

.history-date {
  font-size: 12px;
  color: var(--muted);
}

@media (min-width: 768px) {
  .history-date {
    width: 112px;
    flex-shrink: 0;
  }
}

.history-text {
  font-size: 14px;
}

/* ---------- Works ---------- */

.works-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}

@media (min-width: 768px) {
  .works-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
  }
}

.work-image {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--surface);
}

.work-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.work-card:hover .work-image img {
  transform: scale(1.08);
}

.work-details {
  padding-top: 20px;
}

.work-meta {
  margin: 0 0 4px;
  font-size: 12px;
  color: var(--muted);
}

.work-title {
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: 22px;
}

.track-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.track-list li {
  padding: 8px 0;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

.track-list li::before {
  content: counter(list-item) ". ";
  color: var(--ink);
}

/* ---------- Music carousel ---------- */

.music-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 48px;
}

@media (min-width: 768px) {
  .music-heading {
    margin-bottom: 64px;
  }
}

.carousel-controls {
  display: none;
  gap: 12px;
}

@media (min-width: 768px) {
  .carousel-controls {
    display: flex;
  }
}

.carousel-controls button {
  width: 40px;
  height: 40px;
  background: none;
  border: 1px solid var(--line);
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
  transition: border-color 0.2s ease;
}

.carousel-controls button:hover {
  border-color: var(--ink);
}

.carousel {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding: 0 24px 16px;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}

.carousel::-webkit-scrollbar {
  display: none;
}

@media (min-width: 768px) {
  .carousel {
    gap: 24px;
    padding: 0 48px 16px;
  }
}

.video-card {
  position: relative;
  flex-shrink: 0;
  width: 80vw;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  scroll-snap-align: start;
  overflow: hidden;
}

@media (min-width: 768px) {
  .video-card {
    width: 420px;
  }
}

.photo-card {
  position: relative;
  flex-shrink: 0;
  width: 70vw;
  aspect-ratio: 3 / 2;
  background: var(--surface);
  scroll-snap-align: start;
  overflow: hidden;
}

@media (min-width: 768px) {
  .photo-card {
    width: 320px;
  }
}

.photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-thumb {
  position: relative;
  width: 100%;
  height: 100%;
  border: none;
  padding: 0;
  cursor: pointer;
  background: none;
}

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

.video-thumb .play-btn {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(11, 11, 11, 0.3);
  transition: background 0.3s ease;
}

.video-thumb:hover .play-btn {
  background: rgba(11, 11, 11, 0.1);
}

.play-btn span {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(11, 11, 11, 0.6);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  transition: transform 0.3s ease;
}

.video-thumb:hover .play-btn span {
  transform: scale(1.1);
}

.video-card iframe {
  width: 100%;
  height: 100%;
  border: none;
}

/* ---------- Live ---------- */

.live-list {
  border-top: 1px solid var(--line);
}

.live-list li {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 768px) {
  .live-list li {
    padding: 28px 0;
  }
}

.live-line1 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px 24px;
  margin: 0;
}

.live-date,
.live-venue,
.live-title {
  font-size: 14px;
  color: var(--ink);
}

@media (min-width: 768px) {
  .live-date,
  .live-venue,
  .live-title {
    font-size: 16px;
  }
}

.live-venue {
  transition: color 0.2s ease;
}

.live-venue:hover {
  color: var(--muted);
}

.live-title {
  margin: 0;
}

.live-line2,
.live-line3,
.live-line4 {
  margin: 0;
  font-size: 12px;
  color: var(--muted);
}

/* ---------- Contact ---------- */

.contact-cta {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  margin: 0 auto 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-size: 22px;
}

@media (min-width: 768px) {
  .contact-cta {
    font-size: 26px;
  }
}

.contact-cta .arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.contact-cta:hover .arrow {
  transform: translate(4px, -4px);
}

.contact-email {
  margin: 0 0 64px;
  font-family: var(--font-sans);
  font-size: 24px;
  text-align: center;
  color: var(--ink);
}

@media (min-width: 768px) {
  .contact-email {
    font-size: 32px;
  }
}

.contact-email a:hover {
  color: var(--muted);
}

.social-list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 40px;
}

.social-list a {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.3em;
  color: var(--muted);
  transition: color 0.2s ease;
}

.social-list a:hover {
  color: var(--ink);
}

.social-list-center {
  justify-content: center;
}

/* ---------- Footer ---------- */

.site-footer {
  padding: 48px 0;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  text-align: center;
}

@media (min-width: 768px) {
  .footer-inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-inner .social-list {
  font-size: 10px;
  gap: 16px 24px;
  justify-content: center;
}

.copyright {
  font-size: 12px;
  color: var(--muted);
  margin: 0;
}

.footer-credits {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

@media (min-width: 768px) {
  .footer-credits {
    align-items: flex-end;
  }
}