@charset "UTF-8";

/* =========================
  Base
========================= */
:root {
  --color-black: #050505;
  --color-dark: #0b0b0d;
  --color-white: #ffffff;
  --color-text: rgba(255, 255, 255, .88);
  --color-muted: rgba(255, 255, 255, .62);
  --line-white: rgba(255, 255, 255, .24);
  --container: 1440px;
  --gutter: clamp(16px, 3vw, 48px);
  --font-main:
    "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-main);
  color: var(--color-text);
  background: var(--color-black);
  line-height: 1.7;
  overflow-x: hidden;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
}

button {
  font: inherit;
}

.site {
  min-height: 100svh;
  background: var(--color-black);
}


/* =========================
  Header
========================= */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 50;
  width: 100%;
  pointer-events: none;
}

.site-header__inner {
  width: min(var(--container), calc(100% - var(--gutter) * 2));
  margin-inline: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.site-header__brand {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  backdrop-filter: blur(12px);
  color: rgba(255, 255, 255, .86);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
}

.site-header__nav {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 4px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  backdrop-filter: blur(14px);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, .04),
    0 16px 38px rgba(0, 0, 0, .22);
}

.site-header__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 13px;
  border-radius: 999px;
  color: rgba(255, 255, 255, .74);
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-decoration: none;
  text-transform: uppercase;
  transition:
    color .25s ease,
    background .25s ease,
    box-shadow .25s ease,
    transform .25s ease;
}

.site-header__nav a::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 5px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .86), transparent);
  opacity: 0;
  transform: scaleX(.4);
  transition:
    opacity .25s ease,
    transform .25s ease;
}

.site-header__nav a:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
  transform: translateY(-1px);
  box-shadow: inset 0 0 16px rgba(255, 255, 255, .055);
}

.site-header__nav a:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.site-header__menu {
  pointer-events: auto;
  position: relative;
  display: inline-block;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(0, 0, 0, .28);
  backdrop-filter: blur(12px);
  cursor: pointer;
  transition:
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.site-header__menu span {
  position: absolute;
  left: 50%;
  top: 50%;
  display: block;
  width: 17px;
  height: 1px;
  background: rgba(255, 255, 255, .9);
  transform: translate(-50%, -50%);
  transform-origin: center;
  transition:
    transform .25s ease,
    opacity .2s ease;
}

.site-header__menu span:nth-child(1) {
  transform: translate(-50%, calc(-50% - 5px));
}

.site-header__menu span:nth-child(2) {
  transform: translate(-50%, -50%);
}

.site-header__menu span:nth-child(3) {
  transform: translate(-50%, calc(-50% + 5px));
}

body.is-nav-open .site-header__menu {
  border-color: rgba(255, 255, 255, .48);
  background: rgba(255, 255, 255, .08);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, .08),
    0 0 18px rgba(255, 255, 255, .12);
}

body.is-nav-open .site-header__menu span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(42deg);
}

body.is-nav-open .site-header__menu span:nth-child(2) {
  opacity: 0;
  transform: translate(-50%, -50%) scaleX(0);
}

body.is-nav-open .site-header__menu span:nth-child(3) {
  transform: translate(-50%, -50%) rotate(-42deg);
}

.sp-nav {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: block;
  padding: 82px 16px 18px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .28s ease;
}

.sp-nav::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, .13), transparent 34%),
    rgba(0, 0, 0, .82);
  backdrop-filter: blur(16px);
}

.sp-nav.is-open {
  pointer-events: auto;
  opacity: 1;
}

.sp-nav__panel {
  position: relative;
  width: min(100%, 420px);
  margin-inline: auto;
  padding: 24px 18px 20px;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .03)),
    rgba(0, 0, 0, .54);
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, .04),
    0 28px 80px rgba(0, 0, 0, .52);
  transform: translateY(-10px) scale(.98);
  transition: transform .28s ease;
  overflow: hidden;
}

.sp-nav.is-open .sp-nav__panel {
  transform: translateY(0) scale(1);
}

.sp-nav__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .035) 0, rgba(255, 255, 255, .035) 1px, transparent 1px, transparent 5px);
  opacity: .22;
}

.sp-nav__label {
  position: relative;
  margin: 0 0 18px;
  color: rgba(255, 255, 255, .58);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .24em;
  text-align: center;
  text-transform: uppercase;
}

.sp-nav__links {
  position: relative;
  display: grid;
  gap: 10px;
}

.sp-nav__links a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 999px;
  background: rgba(255, 255, 255, .045);
  color: rgba(255, 255, 255, .84);
  font-size: .82rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
}

.sp-nav__links a::after {
  content: "→";
  color: rgba(255, 255, 255, .5);
  font-size: .78rem;
}

.sp-nav__copy {
  position: relative;
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .56);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .18em;
  text-align: center;
}

@media (min-width: 901px) {
  .site-header__menu {
    display: none;
  }
}

@media (max-width: 900px) {
  .site-header__nav {
    display: none;
  }
}

@media (max-width: 640px) {
  .site-header__inner {
    width: calc(100% - 28px);
    padding-top: 12px;
  }

  .site-header__brand {
    min-height: 36px;
    font-size: .68rem;
    letter-spacing: .12em;
  }

  .site-header__menu {
    width: 40px;
    height: 40px;
  }

  .site-header__menu span {
    width: 16px;
  }

  .site-header__menu span:nth-child(1) {
    transform: translate(-50%, calc(-50% - 4px));
  }

  .site-header__menu span:nth-child(3) {
    transform: translate(-50%, calc(-50% + 4px));
  }

  body.is-nav-open .site-header__menu span:nth-child(1) {
    transform: translate(-50%, -50%) rotate(42deg);
  }

  body.is-nav-open .site-header__menu span:nth-child(3) {
    transform: translate(-50%, -50%) rotate(-42deg);
  }
}


/* =========================
  Hero
========================= */
.hero {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, .13), transparent 32%),
    linear-gradient(180deg, #050505 0%, #111 46%, #050505 100%);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 34%, rgba(255, 255, 255, .14), transparent 30%),
    radial-gradient(circle at 86% 38%, rgba(255, 255, 255, .13), transparent 30%),
    linear-gradient(90deg, rgba(255, 255, 255, .04), transparent 22%, transparent 76%, rgba(255, 255, 255, .04));
  mix-blend-mode: screen;
  opacity: .72;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .032) 0, rgba(255, 255, 255, .032) 1px, transparent 1px, transparent 5px);
  opacity: .12;
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100svh;
  margin-inline: auto;
  padding: 0 0 clamp(34px, 4vw, 64px);
  display: grid;
  grid-template-rows: auto auto auto;
  align-items: start;
}

.hero__logoWrap {
  position: relative;
  width: 100%;
  margin-inline: auto;
  aspect-ratio: 2000 / 600;
  overflow: hidden;
  background: #050505;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, .72))
    drop-shadow(0 0 10px rgba(255, 255, 255, .28))
    drop-shadow(0 0 24px rgba(255, 255, 255, .12));
}

.hero__logoWrap::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 240%;
  background-image: url("../img/band/hero/title-slide.webp");
  background-size: 100% 100%;
  background-position: left center;
  background-repeat: no-repeat;
  animation: heroLogoSlide 26s linear infinite;
}

.hero__logoWrap::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../img/band/logo/w_b_font_smoke.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

@keyframes heroLogoSlide {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.hero__nameLoop {
  position: relative;
  z-index: 2;
  width: 100%;
  margin: clamp(-34px, -2.45vw, -20px) auto 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .18);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .96) 0%, rgba(255, 255, 255, .08) 48%, rgba(0, 0, 0, .96) 100%);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, .06),
    0 0 20px rgba(0, 0, 0, .45);
}


.hero__nameLoop.is-pulse {
  animation: heroNameBarPulse .58s ease-out;
}

.hero__nameLoop.is-pulse .hero__nameTrack span {
  animation: heroNameTextPulse .58s ease-out;
}

.hero__nameLoop.is-pulse .hero__nameTrack span::after {
  animation: heroNameDotPulse .58s ease-out;
}

@keyframes heroNameBarPulse {
  0% {
    box-shadow:
      inset 0 0 18px rgba(255, 255, 255, .06),
      0 0 20px rgba(0, 0, 0, .45);
    border-top-color: rgba(255, 255, 255, .18);
    border-bottom-color: rgba(255, 255, 255, .16);
  }

  28% {
    box-shadow:
      inset 0 0 34px rgba(255, 255, 255, .26),
      0 0 34px rgba(255, 255, 255, .34),
      0 0 72px rgba(255, 255, 255, .22);
    border-top-color: rgba(255, 255, 255, .72);
    border-bottom-color: rgba(255, 255, 255, .62);
  }

  100% {
    box-shadow:
      inset 0 0 18px rgba(255, 255, 255, .06),
      0 0 20px rgba(0, 0, 0, .45);
    border-top-color: rgba(255, 255, 255, .18);
    border-bottom-color: rgba(255, 255, 255, .16);
  }
}

@keyframes heroNameTextPulse {
  0% {
    color: rgba(255, 255, 255, .76);
    text-shadow:
      0 0 8px rgba(255, 255, 255, .18),
      0 0 18px rgba(255, 255, 255, .08);
  }

  28% {
    color: rgba(255, 255, 255, 1);
    text-shadow:
      0 0 14px rgba(255, 255, 255, .86),
      0 0 34px rgba(255, 255, 255, .46),
      0 0 72px rgba(255, 255, 255, .26);
  }

  100% {
    color: rgba(255, 255, 255, .76);
    text-shadow:
      0 0 8px rgba(255, 255, 255, .18),
      0 0 18px rgba(255, 255, 255, .08);
  }
}

@keyframes heroNameDotPulse {
  0% {
    background: rgba(255, 255, 255, .6);
    box-shadow:
      0 0 8px rgba(255, 255, 255, .34),
      0 0 18px rgba(255, 255, 255, .16);
  }

  28% {
    background: rgba(255, 255, 255, 1);
    box-shadow:
      0 0 16px rgba(255, 255, 255, .92),
      0 0 36px rgba(255, 255, 255, .5);
  }

  100% {
    background: rgba(255, 255, 255, .6);
    box-shadow:
      0 0 8px rgba(255, 255, 255, .34),
      0 0 18px rgba(255, 255, 255, .16);
  }
}

.hero__nameLoop::before,
.hero__nameLoop::after {
  content: "";
  position: absolute;
  top: 0;
  z-index: 2;
  width: clamp(92px, 10vw, 180px);
  height: 100%;
  pointer-events: none;
}

.hero__nameLoop::before {
  left: 0;
  background: linear-gradient(90deg, #050505 0%, rgba(5, 5, 5, .92) 28%, transparent 100%);
}

.hero__nameLoop::after {
  right: 0;
  background: linear-gradient(270deg, #050505 0%, rgba(5, 5, 5, .92) 28%, transparent 100%);
}

.hero__nameTrack {
  display: flex;
  width: max-content;
  align-items: center;
  gap: clamp(28px, 4vw, 72px);
  min-height: clamp(34px, 3vw, 42px);
  padding-inline: clamp(18px, 3vw, 42px);
  white-space: nowrap;
  animation: heroNameLoop 34s linear infinite;
}

.hero__nameTrack span {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: rgba(255, 255, 255, .76);
  font-size: clamp(.66rem, .9vw, .82rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(255, 255, 255, .18),
    0 0 18px rgba(255, 255, 255, .08);
}

.hero__nameTrack span::after {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: clamp(28px, 4vw, 72px);
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  box-shadow:
    0 0 8px rgba(255, 255, 255, .34),
    0 0 18px rgba(255, 255, 255, .16);
}

@keyframes heroNameLoop {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

.hero__visual {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 0 auto;
  overflow: hidden;
  background: #050505;
}
.hero-media {
  max-width: none;
}

.hero-media{
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  object-fit: cover;

  opacity: 0;
  transition: opacity 1.2s ease;

  pointer-events: none;
}

.hero-media.is-active{
  opacity: 1;
  z-index: 2;
}

.hero__visual::before {
  content: "";
  position: absolute;
  inset: 6% -5% -4%;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 65%, rgba(255, 255, 255, .18), transparent 42%),
    radial-gradient(circle at 22% 38%, rgba(80, 120, 160, .12), transparent 34%),
    radial-gradient(circle at 82% 42%, rgba(255, 255, 255, .14), transparent 34%);
  filter: blur(20px);
  opacity: .9;
}

.hero__image {
  width: 100%;
  height: auto;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: min(100% - 32px, 980px);
  margin: clamp(22px, 3vw, 44px) auto 0;
  text-align: center;
}

.hero__label {
  margin: 0 0 8px;
  font-size: clamp(.68rem, 1.2vw, .82rem);
  line-height: 1;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.hero__title {
  margin: 0;
  font-size: clamp(2.45rem, 7vw, 6.4rem);
  line-height: .95;
  letter-spacing: .03em;
  font-weight: 900;
  text-shadow:
    0 0 8px rgba(255, 255, 255, .38),
    0 0 24px rgba(255, 255, 255, .16);
}

.hero__lead {
  margin: clamp(12px, 1.6vw, 18px) 0 0;
  font-size: clamp(.95rem, 1.45vw, 1.2rem);
  line-height: 1.9;
  letter-spacing: .08em;
  color: rgba(255, 255, 255, .76);
}

.hero__actions {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(18px, 2vw, 26px);
}

.hero__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 156px;
  min-height: 46px;
  padding: 0 24px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-decoration: none;
  transition:
    transform .25s ease,
    border-color .25s ease,
    background .25s ease,
    box-shadow .25s ease;
}

.hero__btn--primary {
  color: #050505;
  background: rgba(255, 255, 255, .94);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow:
    0 0 18px rgba(255, 255, 255, .22),
    0 16px 40px rgba(0, 0, 0, .26);
}

.hero__btn--ghost {
  color: rgba(255, 255, 255, .9);
  background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .36);
  box-shadow: inset 0 0 22px rgba(255, 255, 255, .045);
}

.hero__btn:hover {
  transform: translateY(-3px);
}

.hero__btn--primary:hover {
  box-shadow:
    0 0 24px rgba(255, 255, 255, .34),
    0 20px 44px rgba(0, 0, 0, .34);
}

.hero__btn--ghost:hover {
  border-color: rgba(255, 255, 255, .68);
  background: rgba(255, 255, 255, .09);
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, .075),
    0 0 18px rgba(255, 255, 255, .14);
}


.hero__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  background: rgba(255, 255, 255, .72);
  opacity: 0;
}

.hero__visual.is-flashing::after {
  animation: heroFlash .42s ease-out;
}

@keyframes heroFlash {
  0% {
    opacity: 0;
  }

  18% {
    opacity: .55;
  }

  100% {
    opacity: 0;
  }
}


@media (max-width: 900px) {
  .hero__inner {
    grid-template-rows: auto auto auto;
    padding-top: 0;
  }

  .hero__logoWrap {
    width: 100%;
  }

  .hero__visual {
    width: 100%;
    margin-inline: auto;
    transform: none;
    margin-top: 0;
  }

  .hero__content {
    margin-top: clamp(20px, 4vw, 36px);
  }
}

@media (max-width: 640px) {
  .hero__inner {
    padding-inline: 0;
    padding-top: 0;
    padding-bottom: 34px;
  }

  .hero__logoWrap {
    width: 100%;
    margin-inline: auto;
    transform: none;
  }

  .hero__nameLoop {
    width: 100%;
    margin-top: clamp(-34px, -7vw, -22px);
  }

  .hero__nameLoop::before,
  .hero__nameLoop::after {
    width: 72px;
  }

  .hero__nameTrack {
    min-height: 30px;
    gap: 30px;
    padding-inline: 18px;
    animation-duration: 28s;
  }

  .hero__nameTrack span {
    font-size: .62rem;
    letter-spacing: .16em;
  }

  .hero__nameTrack span::after {
    width: 4px;
    height: 4px;
    margin-left: 30px;
  }

  .hero__visual {
    width: 100%;
    margin-top: 0;
  }

  .hero__image {
    max-width: 100%;
  }

  .hero__label {
    letter-spacing: .18em;
  }

  .hero__title {
    font-size: clamp(2.15rem, 9.6vw, 3.15rem);
    letter-spacing: .01em;
    line-height: 1.04;
    white-space: nowrap;
  }

  .hero__lead {
    line-height: 1.75;
  }

  .hero__actions {
    gap: 10px;
  }

  .hero__btn {
    min-width: min(100%, 148px);
    min-height: 44px;
    padding-inline: 18px;
    font-size: .72rem;
  }
}


/* =========================
  Release
========================= */
.section--release {
  overflow: hidden;
  background:
    radial-gradient(circle at 76% 18%, rgba(255, 255, 255, .11), transparent 32%),
    radial-gradient(circle at 18% 64%, rgba(255, 255, 255, .08), transparent 34%),
    linear-gradient(180deg, #050505 0%, #0a0a0b 54%, #050505 100%);
}

.release {
  width: min(1180px, 100%);
}

.release__head {
  text-align: center;
}

.release-heading {
  position: relative;
  isolation: isolate;
  left: 50%;
  width: min(1180px, calc(100vw - 32px));
  margin: 0;
  aspect-ratio: 2400 / 420;
  overflow: hidden;
  background: #050505;
  transform: translateX(-50%);
}

.release-heading::before,
.release-heading::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: clamp(18px, 3.2%, 42px);
  background: #050505;
  pointer-events: none;
}

.release-heading::before {
  left: 0;
}

.release-heading::after {
  right: 0;
}

.release-heading__visual {
  position: absolute;
  inset: 0;
  display: block;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, .6))
    drop-shadow(0 0 12px rgba(255, 255, 255, .24))
    drop-shadow(0 0 28px rgba(255, 255, 255, .12));
}

.release-heading__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/band/release/latest-sound-slide.webp");
  background-size: 200% 100%;
  background-position: left center;
  background-repeat: repeat-x;
  animation: releaseTitleSlide 28s linear infinite;
}

.release-heading__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("../img/band/release/latest-sound-font.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

@keyframes releaseTitleSlide {
  0% {
    background-position: left center;
  }

  100% {
    background-position: right center;
  }
}

.release__single {
  width: min(100%, 1080px);
  margin: clamp(34px, 5vw, 62px) auto 0;
  text-align: center;
}

.release__body {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
  margin-top: clamp(28px, 4vw, 54px);
}

.release__jacket {
  position: relative;
  isolation: isolate;
  border-radius: 28px;
}

.release__jacket::before {
  content: "";
  position: absolute;
  inset: -18px;
  z-index: -1;
  border-radius: 36px;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .24), transparent 58%),
    linear-gradient(135deg, rgba(255, 255, 255, .16), transparent 42%, rgba(255, 255, 255, .1));
  filter: blur(18px);
  opacity: .72;
}

.release__jacket::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .18),
    inset 0 0 34px rgba(255, 255, 255, .06);
}

.release__jacket img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 28px;
  box-shadow:
    0 28px 80px rgba(0, 0, 0, .55),
    0 0 24px rgba(255, 255, 255, .12);
}

.release__info {
  text-align: left;
}

.release__kicker {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, .56);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.release__title {
  margin: 0;
  color: #fff;
  font-size: clamp(3.1rem, 8.6vw, 7.6rem);
  line-height: .9;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(255, 255, 255, .35),
    0 0 30px rgba(255, 255, 255, .14);
}

.release__copy {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  font-size: clamp(.95rem, 1.2vw, 1.08rem);
  line-height: 2;
  letter-spacing: .08em;
}

.release__tracks {
  display: grid;
  gap: 8px;
  margin: clamp(22px, 3vw, 34px) 0 0;
  padding: 0;
  list-style: none;
}

.release__tracks li {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 999px;
  background: rgba(255, 255, 255, .04);
  color: rgba(255, 255, 255, .82);
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .12em;
}

.release__tracks span {
  color: rgba(255, 255, 255, .46);
  font-size: .72rem;
  letter-spacing: .18em;
}

.release__store {
  margin-top: clamp(22px, 3vw, 34px);
}

.release__store p {
  margin: 0 0 10px;
  color: rgba(255, 255, 255, .48);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.release__storeGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(120px, 1fr));
  gap: 12px;
  width: min(420px, 100%);
}

.release__storeGrid img {
  width: 100%;
  border-radius: 18px;
  opacity: .92;
  filter: saturate(.9);
  box-shadow:
    0 18px 48px rgba(0, 0, 0, .34),
    0 0 18px rgba(255, 255, 255, .08);
}

.release__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(24px, 3vw, 38px);
}

@media (max-width: 640px) {
  .section--release {
    padding-top: 78px;
  }

  .release-heading {
    left: 50%;
    width: calc(100vw - 16px);
    margin-top: 4px;
    transform: translateX(-50%);
  }

  .release-heading::before,
  .release-heading::after {
    width: 8px;
  }

  .release__body {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 34px;
  }

  .release__jacket {
    width: min(100%, 360px);
    margin-inline: auto;
  }

  .release__jacket,
  .release__jacket img,
  .release__jacket::after {
    border-radius: 22px;
  }

  .release__info {
    text-align: center;
  }

  .release__single {
    margin-top: 34px;
  }

  .release__title {
    font-size: clamp(2.45rem, 13vw, 4.2rem);
    letter-spacing: .04em;
  }

  .release__copy {
    font-size: .9rem;
    line-height: 1.9;
  }

  .release__tracks li {
    justify-content: flex-start;
    min-height: 42px;
    padding-inline: 14px;
    font-size: .74rem;
    letter-spacing: .08em;
  }

  .release__storeGrid {
    grid-template-columns: 1fr;
    width: min(260px, 100%);
    margin-inline: auto;
  }

  .release__actions {
    justify-content: center;
  }
}


/* =========================
  About
========================= */
.section--about {
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(255, 255, 255, .08), transparent 30%),
    radial-gradient(circle at 86% 70%, rgba(255, 255, 255, .07), transparent 34%),
    linear-gradient(180deg, #050505 0%, #0b0b0c 52%, #050505 100%);
}

.section--about::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .026) 0, rgba(255, 255, 255, .026) 1px, transparent 1px, transparent 6px);
  opacity: .42;
}

.about {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
}

.about__head {
  text-align: center;
}

.about-heading {
  position: relative;
  isolation: isolate;
  left: 50%;
  width: min(1280px, calc(100vw - 32px));
  margin: 0;
  aspect-ratio: 3000 / 520;
  overflow: hidden;
  background: #050505;
  transform: translateX(-50%);
}

.about-heading::before,
.about-heading::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: clamp(8px, 1.2%, 18px);
  background: #050505;
  pointer-events: none;
}

.about-heading::before {
  left: 0;
}

.about-heading::after {
  right: 0;
}

.about-heading__visual {
  position: absolute;
  inset: 0;
  display: block;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, .58))
    drop-shadow(0 0 12px rgba(255, 255, 255, .22))
    drop-shadow(0 0 28px rgba(255, 255, 255, .1));
}

.about-heading__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/band/about/about-title-slide.webp");
  background-size: 200% auto;
  background-position: left center;
  background-repeat: repeat-x;
  animation: aboutTitleSlide 26s linear infinite;
}

.about-heading__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("../img/band/about/about-title-font.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

@keyframes aboutTitleSlide {
  0% {
    background-position: left center;
  }

  100% {
    background-position: right center;
  }
}

.about__lead {
  line-height: 2;
}

.about__statement {
  width: min(980px, 100%);
  margin: clamp(34px, 5vw, 62px) auto 0;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)),
    rgba(0, 0, 0, .36);
  box-shadow:
    inset 0 0 32px rgba(255, 255, 255, .035),
    0 24px 70px rgba(0, 0, 0, .42);
}

.about__statement p {
  margin: 0;
  color: rgba(255, 255, 255, .78);
  font-size: clamp(.92rem, 1.08vw, 1.02rem);
  line-height: 2.15;
  letter-spacing: .06em;
  text-align: center;
}

.about__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
  margin-top: clamp(34px, 5vw, 62px);
}

.about-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: clamp(320px, 28vw, 430px);
  padding: clamp(22px, 3vw, 32px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 28px;
  background-color: #050505;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, .045),
    0 24px 70px rgba(0, 0, 0, .48);
  overflow: hidden;
}

.about-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, .12), transparent 36%),
    linear-gradient(180deg, rgba(0, 0, 0, .16) 0%, rgba(0, 0, 0, .34) 44%, rgba(0, 0, 0, .86) 100%);
}

.about-card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .38), transparent);
  pointer-events: none;
}

.about-card > * {
  position: relative;
  z-index: 2;
}

.about-card__num {
  margin: 0;
  color: rgba(255, 255, 255, .56);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .24em;
}

.about-card__title {
  margin: 14px 0 0;
  color: #fff;
  font-size: clamp(2.1rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow:
    0 0 8px rgba(255, 255, 255, .42),
    0 0 22px rgba(0, 0, 0, .78),
    0 0 34px rgba(255, 255, 255, .16);
}

.about-card--beta .about-card__title {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  font-weight: 700;
  letter-spacing: .02em;
  text-transform: none;
}

.about-card__text {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .82);
  font-size: .86rem;
  line-height: 1.95;
  letter-spacing: .035em;
  text-shadow:
    0 1px 8px rgba(0, 0, 0, .85),
    0 0 18px rgba(0, 0, 0, .66);
}

.about-card--black {
  background-image: url("../img/band/about/about-black.webp");
  background-position: center;
}

.about-card--white {
  background-image: url("../img/band/about/about-white.webp");
  background-position: center;
}

.about-card--beta {
  background-image: url("../img/band/about/about-beta.webp");
  background-size: 100% auto;
  background-position: center top;
}

.about-card--beta::before {
  background:
    radial-gradient(circle at 50% 16%, rgba(255, 255, 255, .1), transparent 34%),
    linear-gradient(180deg, rgba(0, 0, 0, .26) 0%, rgba(0, 0, 0, .42) 48%, rgba(0, 0, 0, .88) 100%);
}

.about-card--white::before {
  background:
    radial-gradient(circle at 50% 10%, rgba(255, 255, 255, .08), transparent 28%),
    radial-gradient(circle at 50% 58%, rgba(0, 0, 0, .42), transparent 48%),
    linear-gradient(180deg, rgba(0, 0, 0, .32) 0%, rgba(0, 0, 0, .48) 42%, rgba(0, 0, 0, .9) 100%);
}

.about-card--white .about-card__title,
.about-card--white .about-card__text {
  text-shadow:
    0 1px 10px rgba(0, 0, 0, .95),
    0 0 24px rgba(0, 0, 0, .82),
    0 0 18px rgba(255, 255, 255, .18);
}

.about__tagline {
  margin: clamp(32px, 5vw, 58px) 0 0;
  color: rgba(255, 255, 255, .76);
  font-size: clamp(.9rem, 1.4vw, 1.08rem);
  font-weight: 900;
  letter-spacing: .24em;
  text-align: center;
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(255, 255, 255, .18),
    0 0 28px rgba(255, 255, 255, .08);
}

.about-history {
  position: relative;
  width: min(980px, 100%);
  margin: clamp(34px, 5vw, 64px) auto 0;
  padding: clamp(24px, 4vw, 42px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 0%, rgba(255, 255, 255, .12), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .025)),
    rgba(0, 0, 0, .34);
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, .035),
    0 26px 80px rgba(0, 0, 0, .46);
  overflow: hidden;
}

.about-history::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .028) 0, rgba(255, 255, 255, .028) 1px, transparent 1px, transparent 6px);
  opacity: .5;
}

.about-history__head,
.about-history__timeline {
  position: relative;
  z-index: 1;
}

.about-history__head {
  text-align: center;
}

.about-history__label {
  margin: 0 0 8px;
  color: rgba(255, 255, 255, .48);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .28em;
  text-transform: uppercase;
}

.about-history__title {
  margin: 0;
  color: #fff;
  font-size: clamp(1.8rem, 4vw, 3.8rem);
  line-height: 1;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow:
    0 0 10px rgba(255, 255, 255, .28),
    0 0 28px rgba(255, 255, 255, .12);
}

.about-history__lead {
  margin: 14px 0 0;
  color: rgba(255, 255, 255, .62);
  font-size: .88rem;
  line-height: 1.9;
  letter-spacing: .08em;
}

.about-history__timeline {
  display: grid;
  gap: 0;
  margin-top: clamp(26px, 4vw, 42px);
}

.history-item {
  position: relative;
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: clamp(18px, 3vw, 34px);
  padding: 0 0 30px;
}

.history-item:last-child {
  padding-bottom: 0;
}

.history-item::before {
  content: "";
  position: absolute;
  left: 138px;
  top: .55em;
  bottom: 0;
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, .55), rgba(255, 255, 255, .08));
  transform: translateX(calc(clamp(18px, 3vw, 34px) / 2 * -1));
}

.history-item__year {
  margin: 0;
  color: #fff;
  font-size: clamp(1.3rem, 2.2vw, 2rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: .08em;
  text-shadow:
    0 0 10px rgba(255, 255, 255, .24),
    0 0 24px rgba(255, 255, 255, .1);
}

.history-item__body {
  position: relative;
  padding-left: 22px;
  text-align: left;
}

.history-item__body::before {
  content: "";
  position: absolute;
  left: 6px;
  top: .35em;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow:
    0 0 12px rgba(255, 255, 255, .34),
    0 0 28px rgba(255, 255, 255, .14);
}

.history-item__title {
  margin: 0;
  color: rgba(255, 255, 255, .94);
  font-size: clamp(1.05rem, 1.6vw, 1.35rem);
  line-height: 1.2;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.history-item__text {
  margin: 10px 0 0;
  color: rgba(255, 255, 255, .68);
  font-size: .9rem;
  line-height: 1.95;
  letter-spacing: .055em;
  text-align: left;
}

@media (max-width: 900px) {
  .about__cards {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .about-card {
    min-height: clamp(330px, 50vw, 460px);
    padding: clamp(26px, 5vw, 42px);
    text-align: left;
  }

  .about-card__num {
    font-size: .78rem;
  }

  .about-card__title {
    font-size: clamp(3.2rem, 11vw, 5.4rem);
  }

  .about-card__text {
    max-width: 620px;
    font-size: clamp(.95rem, 2vw, 1.08rem);
    line-height: 1.95;
  }

  .about-history {
    border-radius: 26px;
  }

  .history-item {
    grid-template-columns: 82px 1fr;
    gap: 28px;
  }

  .history-item::before {
    left: 88px;
    transform: none;
  }

  .history-item__body {
    padding-left: 32px;
  }

  .history-item__body::before {
    left: 8px;
  }

  .history-item__title {
    letter-spacing: .1em;
  }
}

@media (max-width: 640px) {
  .about-heading {
    left: 50%;
    width: calc(100vw - 16px);
    margin-top: 4px;
    transform: translateX(-50%);
  }

  .about-heading::before,
  .about-heading::after {
    width: 4px;
  }

  .about__statement {
    border-radius: 24px;
  }

  .about__statement p {
    font-size: .9rem;
    line-height: 2;
    text-align: left;
  }

  .about__cards {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 32px;
  }

  .about-card {
    min-height: 330px;
    padding: 24px 20px;
    border-radius: 24px;
    text-align: left;
  }

  .about-card__title {
    font-size: clamp(3rem, 14vw, 4.2rem);
  }

  .about-card__text {
    max-width: 100%;
    font-size: .92rem;
    line-height: 1.9;
  }

  .about-card--beta {
    background-size: cover;
    background-position: center;
  }

  .about__tagline {
    font-size: .72rem;
    line-height: 1.8;
    letter-spacing: .18em;
  }

  .about-history {
    margin-top: 34px;
    padding: 24px 18px;
    border-radius: 24px;
  }

  .about-history__head {
    text-align: left;
  }

  .about-history__title {
    font-size: clamp(1.75rem, 9vw, 2.6rem);
    line-height: 1.05;
  }

  .about-history__lead {
    font-size: .82rem;
  }

  .history-item {
    grid-template-columns: 1fr;
    gap: 10px;
    padding-bottom: 28px;
  }

  .history-item::before {
    left: 6px;
    top: 2.5rem;
    transform: none;
  }

  .history-item__year {
    padding-left: 24px;
  }

  .history-item__body {
    padding-left: 24px;
  }

  .history-item__body::before {
    left: 0;
  }

  .history-item__text {
    font-size: .86rem;
    line-height: 1.9;
  }
}


/* =========================
  Members
========================= */
body.is-member-modal-open {
  overflow: hidden;
}

.section--members {
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 20%, rgba(255, 43, 43, .12), transparent 30%),
    radial-gradient(circle at 84% 24%, rgba(56, 189, 248, .11), transparent 30%),
    radial-gradient(circle at 50% 86%, rgba(168, 85, 247, .12), transparent 36%),
    linear-gradient(180deg, #050505 0%, #0a0a0b 54%, #050505 100%);
}

.members {
  position: relative;
  z-index: 1;
  width: min(1240px, 100%);
}

.members__head {
  width: min(900px, 100%);
  margin-inline: auto;
  text-align: center;
}

.members-heading {
  position: relative;
  isolation: isolate;
  left: 50%;
  width: min(1280px, calc(100vw - 32px));
  height: clamp(150px, 17.3vw, 222px);
  margin: 0;
  overflow: hidden;
  background: #050505;
  transform: translateX(-50%);
}

.members-heading__visual {
  overflow: hidden;
}


.members-heading::before,
.members-heading::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: clamp(8px, 1.2%, 18px);
  background: #050505;
  pointer-events: none;
}

.members-heading::before {
  left: 0;
}

.members-heading::after {
  right: 0;
}

.members-heading__visual {
  position: absolute;
  inset: 0;
  display: block;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, .58))
    drop-shadow(0 0 12px rgba(255, 255, 255, .22))
    drop-shadow(0 0 28px rgba(255, 255, 255, .1));
}

.members-heading__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/band/members/members-title-slide.webp");
  background-size: 200% auto;
  background-position: left center;
  background-repeat: repeat-x;
  animation: membersTitleSlide 24s linear infinite;
}

.members-heading__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("../img/band/members/members-title-font.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

@keyframes membersTitleSlide {
  0% {
    background-position: left center;
  }

  100% {
    background-position: right center;
  }
}

.members__lead {
  line-height: 2;
}

.members__grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(38px, 5vw, 68px);
}

.member-card {
  position: relative;
  display: grid;
  gap: 10px;
  width: 100%;
  padding: 0 0 22px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 28px;
  background: rgba(255, 255, 255, .045);
  color: #fff;
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, .035),
    0 24px 70px rgba(0, 0, 0, .42);
  transition:
    transform .3s ease,
    border-color .3s ease,
    box-shadow .3s ease;
}

.member-card::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--member-color), transparent);
  opacity: .72;
}

.member-card:hover {
  transform: translateY(-8px);
  border-color: color-mix(in srgb, var(--member-color) 64%, white 18%);
  box-shadow:
    inset 0 0 30px rgba(255, 255, 255, .05),
    0 28px 80px rgba(0, 0, 0, .5),
    0 0 28px color-mix(in srgb, var(--member-color) 34%, transparent);
}

.member-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #050505;
}

.member-card__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    transform .38s ease,
    filter .38s ease;
}

.member-card:hover .member-card__thumb img {
  transform: scale(1.07);
  filter: brightness(1.08) contrast(1.08);
}

.member-card__role,
.member-card__name {
  padding-inline: 18px;
}

.member-card__role {
  margin-top: 10px;
  color: color-mix(in srgb, var(--member-color) 78%, white 22%);
  font-size: .68rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.member-card__name {
  color: rgba(255, 255, 255, .92);
  font-size: clamp(.98rem, 1.25vw, 1.24rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.member-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}

.member-modal.is-open {
  opacity: 1;
  pointer-events: auto;
}

.member-modal__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .78);
  backdrop-filter: blur(18px);
}

.member-modal__overlay::before,
.member-modal__overlay::after {
  content: "";
  position: absolute;
  inset: -20%;
  pointer-events: none;
}

.member-modal__panel {
  position: relative;
  width: min(1040px, 100%);
  max-height: min(820px, calc(100svh - 48px));
  display: grid;
  grid-template-columns: minmax(280px, 460px) 1fr;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 30px;
  background:
    radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--modal-color, #fff) 20%, transparent), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .035)),
    rgba(0, 0, 0, .76);
  box-shadow:
    inset 0 0 36px rgba(255, 255, 255, .045),
    0 36px 100px rgba(0, 0, 0, .72),
    0 0 38px color-mix(in srgb, var(--modal-color, #fff) 30%, transparent);
  transform: translateY(14px) scale(.98);
  transition: transform .28s ease;
}

.member-modal__panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  border: 2px solid var(--modal-color);
  border-radius: inherit;
  pointer-events: none;
  opacity: .82;
  box-shadow:
    inset 0 0 18px color-mix(in srgb, var(--modal-color) 34%, transparent),
    0 0 24px color-mix(in srgb, var(--modal-color) 42%, transparent);
}

.member-modal.is-open .member-modal__panel {
  transform: translateY(0) scale(1);
}

.member-modal__close,
.member-modal__nav {
  position: absolute;
  z-index: 5;
}

.member-modal__close {
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, .24);
  border-radius: 999px;
  background: rgba(0, 0, 0, .42);
  color: #fff;
  font-size: 1.35rem;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  line-height: 1;
}

.member-modal__nav {
  top: 50%;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(0, 0, 0, .42);
  color: #fff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  transition:
    border-color .22s ease,
    background .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.member-modal__nav--prev {
  left: 14px;
}

.member-modal__nav--next {
  right: 14px;
}

.member-modal__nav:hover {
  border-color: var(--modal-color);
  background: color-mix(in srgb, var(--modal-color) 18%, rgba(0, 0, 0, .62));
  box-shadow:
    0 0 22px color-mix(in srgb, var(--modal-color) 54%, transparent),
    inset 0 0 14px color-mix(in srgb, var(--modal-color) 24%, transparent);
}

.member-modal__nav--prev:hover {
  transform: translateY(-50%) translateX(-3px);
}

.member-modal__nav--next:hover {
  transform: translateY(-50%) translateX(3px);
}

.member-modal__visual {
  position: relative;
  min-height: 620px;
  background: #050505;
  overflow: hidden;
  z-index: 1;
}

.member-modal__visual img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition:
    opacity .24s ease,
    transform .24s ease;
}

.member-modal__body {
  position: relative;
  z-index: 1;
  align-self: center;
  padding: clamp(28px, 5vw, 58px);
  text-align: left;
  transition:
    opacity .24s ease,
    transform .24s ease;
}

.member-modal.is-switching .member-modal__visual img {
  opacity: .35;
  transform: scale(1.035);
}

.member-modal.is-switching .member-modal__body {
  opacity: .45;
  transform: translateY(8px);
}

.member-modal__role {
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--modal-color, #fff) 78%, white 22%);
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.member-modal__name {
  margin: 0;
  color: #fff;
  font-size: clamp(2.5rem, 5vw, 5.4rem);
  line-height: .92;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.member-modal__jp {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .56);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .14em;
}

.member-modal__copy {
  margin: clamp(24px, 3vw, 36px) 0 0;
  color: rgba(255, 255, 255, .9);
  font-size: clamp(1.02rem, 1.5vw, 1.24rem);
  font-weight: 900;
  line-height: 1.8;
  letter-spacing: .05em;
}

.member-modal__text {
  margin: 16px 0 0;
  color: rgba(255, 255, 255, .68);
  font-size: .94rem;
  line-height: 2;
  letter-spacing: .05em;
}

.member-modal__thumbs {
  position: absolute;
  left: clamp(18px, 3vw, 34px);
  bottom: clamp(16px, 2.2vw, 26px);
  z-index: 7;
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  margin: 0;
}

.member-modal__thumbs button {
  width: 54px;
  height: 68px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .06);
  overflow: hidden;
  cursor: pointer;
  display: block;
}

.member-modal__thumbs button.is-active {
  border-color: var(--modal-color);
  box-shadow: 0 0 18px color-mix(in srgb, var(--modal-color) 42%, transparent);
  animation: memberThumbPulse 1.45s ease-in-out infinite;
}

.member-modal__thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

@keyframes memberThumbPulse {
  0%, 100% {
    box-shadow:
      0 0 14px color-mix(in srgb, var(--modal-color) 38%, transparent),
      inset 0 0 10px rgba(255, 255, 255, .08);
  }

  50% {
    box-shadow:
      0 0 26px color-mix(in srgb, var(--modal-color) 72%, transparent),
      inset 0 0 16px color-mix(in srgb, var(--modal-color) 20%, transparent);
  }
}

.member-modal[data-member="vocal"] .member-modal__overlay::after {
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 43, 43, .62), transparent 26%),
    radial-gradient(circle at 30% 22%, rgba(255, 43, 43, .36), transparent 34%),
    radial-gradient(circle at 76% 72%, rgba(255, 43, 43, .28), transparent 38%);
  filter: blur(16px);
  animation: memberPulseRed .72s ease-in-out infinite;
}

@keyframes memberPulseRed {
  0%, 100% {
    opacity: .28;
    transform: scale(.94);
  }

  50% {
    opacity: 1;
    transform: scale(1.11);
  }
}

.member-modal[data-member="bass"] .member-modal__overlay::after {
  inset: 0;
  background-image:
    repeating-linear-gradient(90deg, transparent 0, transparent 10px, rgba(168, 85, 247, .48) 11px, transparent 13px),
    repeating-linear-gradient(0deg, transparent 0, transparent 34px, rgba(255, 255, 255, .08) 35px, transparent 37px);
  opacity: .72;
  animation: memberNoisePurple .72s steps(5) infinite;
}

@keyframes memberNoisePurple {
  0% {
    transform: translateX(-3%);
    opacity: .42;
  }

  40% {
    transform: translateX(3%);
    opacity: .85;
  }

  70% {
    transform: translateX(-1%);
    opacity: .58;
  }

  100% {
    transform: translateX(2%);
    opacity: .75;
  }
}

.member-modal[data-member="drums"] .member-modal__overlay::after {
  inset: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 10%, rgba(56, 189, 248, .48) 11%, transparent 13%, transparent 22%, rgba(56, 189, 248, .34) 23%, transparent 25%, transparent 36%, rgba(56, 189, 248, .22) 37%, transparent 39%),
    radial-gradient(circle at 30% 62%, transparent 0 8%, rgba(185, 242, 255, .32) 9%, transparent 11%, transparent 20%, rgba(56, 189, 248, .22) 21%, transparent 23%);
  filter: blur(1px);
  opacity: .82;
  animation: memberRippleBlue 2.4s ease-out infinite;
}

@keyframes memberRippleBlue {
  0% {
    transform: scale(.72);
    opacity: .15;
  }

  35% {
    opacity: .88;
  }

  100% {
    transform: scale(1.42);
    opacity: .08;
  }
}

.member-modal[data-member="guitar"] .member-modal__overlay::after {
  background:
    radial-gradient(circle at 8% 18%, rgba(255, 212, 59, .70) 0 2px, transparent 4px),
    radial-gradient(circle at 14% 54%, rgba(255, 212, 59, .52) 0 2px, transparent 4px),
    radial-gradient(circle at 20% 78%, rgba(255, 255, 255, .38) 0 1px, transparent 3px),
    radial-gradient(circle at 26% 28%, rgba(255, 212, 59, .62) 0 2px, transparent 4px),
    radial-gradient(circle at 32% 64%, rgba(255, 212, 59, .48) 0 2px, transparent 4px),
    radial-gradient(circle at 40% 16%, rgba(255, 255, 255, .34) 0 1px, transparent 3px),
    radial-gradient(circle at 46% 46%, rgba(255, 212, 59, .68) 0 2px, transparent 4px),
    radial-gradient(circle at 52% 84%, rgba(255, 212, 59, .42) 0 2px, transparent 4px),
    radial-gradient(circle at 58% 30%, rgba(255, 212, 59, .58) 0 2px, transparent 4px),
    radial-gradient(circle at 64% 62%, rgba(255, 255, 255, .36) 0 1px, transparent 3px),
    radial-gradient(circle at 70% 18%, rgba(255, 212, 59, .54) 0 2px, transparent 4px),
    radial-gradient(circle at 76% 74%, rgba(255, 212, 59, .50) 0 2px, transparent 4px),
    radial-gradient(circle at 82% 42%, rgba(255, 212, 59, .66) 0 2px, transparent 4px),
    radial-gradient(circle at 88% 22%, rgba(255, 255, 255, .34) 0 1px, transparent 3px),
    radial-gradient(circle at 94% 68%, rgba(255, 212, 59, .46) 0 2px, transparent 4px);
  filter:
    blur(.4px)
    drop-shadow(0 0 10px rgba(255, 212, 59, .58));
  animation: memberParticlesYellow 2.8s ease-in-out infinite alternate;
}

@keyframes memberParticlesYellow {
  0% {
    opacity: .42;
    transform: translate3d(-2%, 18px, 0) scale(.98);
  }

  100% {
    opacity: 1;
    transform: translate3d(2%, -26px, 0) scale(1.08);
  }
}

.member-modal[data-member="keyboard"] .member-modal__overlay::after {
  background:
    linear-gradient(100deg, transparent 0%, rgba(74, 222, 128, .18) 18%, rgba(255, 255, 255, .10) 32%, transparent 48%, rgba(74, 222, 128, .22) 66%, transparent 86%),
    radial-gradient(ellipse at 22% 44%, rgba(74, 222, 128, .38), transparent 36%),
    radial-gradient(ellipse at 72% 58%, rgba(185, 255, 210, .20), transparent 42%);
  filter: blur(24px);
  opacity: .86;
  animation: memberBreezeGreen 4.6s ease-in-out infinite alternate;
}

@keyframes memberBreezeGreen {
  0% {
    transform: translate3d(-14%, 2%, 0) scale(1.05) skewX(-4deg);
    opacity: .34;
  }

  50% {
    opacity: .9;
  }

  100% {
    transform: translate3d(14%, -2%, 0) scale(1.18) skewX(4deg);
    opacity: .72;
  }
}

.member-modal__qaButton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 42px;
  margin-top: 24px;
  padding: 0 22px;
  border: 1px solid color-mix(in srgb, var(--modal-color) 58%, white 16%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--modal-color) 16%, rgba(0, 0, 0, .64));
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, .05),
    0 0 18px color-mix(in srgb, var(--modal-color) 28%, transparent);
  transition:
    transform .24s ease,
    box-shadow .24s ease,
    background .24s ease;
}

.member-modal__qaButton:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--modal-color) 26%, rgba(0, 0, 0, .72));
  box-shadow:
    inset 0 0 22px rgba(255, 255, 255, .08),
    0 0 28px color-mix(in srgb, var(--modal-color) 48%, transparent);
}

.member-qa {
  position: fixed;
  inset: 0;
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity .24s ease;
}

.member-qa.is-open {
  pointer-events: auto;
  opacity: 1;
}

.member-qa__panel {
  position: absolute;
  top: 8vh;
  left: 50%;
  width: min(500px, calc(100vw - 48px));
  max-height: min(720px, calc(100svh - 72px));
  overflow-y: auto;
  padding: clamp(26px, 3vw, 38px);
  border: 2px solid var(--modal-color);
  border-radius: 30px;
  background:
    radial-gradient(circle at 18% 12%, color-mix(in srgb, var(--modal-color) 30%, transparent), transparent 42%),
    linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035)),
    rgba(0, 0, 0, .92);
  box-shadow:
    0 0 34px color-mix(in srgb, var(--modal-color) 52%, transparent),
    0 34px 90px rgba(0, 0, 0, .72),
    inset 0 0 26px rgba(255, 255, 255, .06);
  transform: translate(130px, -18px) scale(.96);
  transition: transform .28s ease;
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--modal-color) 52%, rgba(255, 255, 255, .2)) rgba(255, 255, 255, .05);
}

.member-qa.is-open .member-qa__panel {
  transform: translate(130px, 0) scale(1);
}

.member-qa__panel::-webkit-scrollbar {
  width: 6px;
}

.member-qa__panel::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .045);
  border-radius: 999px;
}

.member-qa__panel::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--modal-color) 58%, rgba(255, 255, 255, .22));
  border-radius: 999px;
}

.member-qa__panel::-webkit-scrollbar-thumb:hover {
  background: color-mix(in srgb, var(--modal-color) 78%, rgba(255, 255, 255, .32));
}

.member-modal.is-qa-open .member-modal__close,
.member-modal.is-qa-open .member-modal__nav,
.member-modal.is-qa-open .member-modal__thumbs,
.member-modal.is-qa-open .member-modal__qaButton {
  pointer-events: none;
  opacity: .24;
}

.member-qa__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 5;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--modal-color) 48%, rgba(255, 255, 255, .28));
  border-radius: 999px;
  background: rgba(0, 0, 0, .58);
  color: #fff;
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
  box-shadow:
    0 0 16px color-mix(in srgb, var(--modal-color) 28%, transparent),
    inset 0 0 12px rgba(255, 255, 255, .06);
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    background .22s ease;
}

.member-qa__close:hover {
  transform: rotate(90deg) scale(1.06);
  background: color-mix(in srgb, var(--modal-color) 18%, rgba(0, 0, 0, .72));
  box-shadow:
    0 0 24px color-mix(in srgb, var(--modal-color) 58%, transparent),
    inset 0 0 16px rgba(255, 255, 255, .1);
}

.member-modal.is-qa-center .member-qa__panel {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -48%) scale(.96);
}

.member-modal.is-qa-center .member-qa.is-open .member-qa__panel {
  transform: translate(-50%, -50%) scale(1);
}

@media (min-width: 901px) {
  .member-modal__panel {
    grid-template-columns: minmax(280px, 460px) 1fr;
  }
}

@media (min-width: 901px) and (max-width: 1260px) {
  .member-modal.is-qa-center .member-qa__panel,
  .member-modal .member-qa__panel {
    top: 50%;
    left: 50%;
    right: auto;
    transform: translate(-50%, -48%) scale(.96);
  }

  .member-modal.is-qa-center .member-qa.is-open .member-qa__panel,
  .member-modal .member-qa.is-open .member-qa__panel {
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 900px) {
  .members__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .member-card--wide {
    grid-column: 1 / -1;
  }

  .member-modal {
    padding: 18px;
  }

  .member-modal__panel {
    width: min(100%, calc(100vw - 28px));
    max-height: calc(100svh - 28px);
    min-width: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color:
      color-mix(in srgb, var(--modal-color) 52%, rgba(255, 255, 255, .22))
      rgba(255, 255, 255, .045);
  }

  .member-modal__panel::-webkit-scrollbar {
    width: 6px;
  }

  .member-modal__panel::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, .045);
    border-radius: 999px;
  }

  .member-modal__panel::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--modal-color) 58%, rgba(255, 255, 255, .22));
    border-radius: 999px;
  }

  .member-modal__panel::-webkit-scrollbar-thumb:hover {
    background: color-mix(in srgb, var(--modal-color) 78%, rgba(255, 255, 255, .32));
  }

  .member-modal__visual {
    min-height: 0;
    height: 52svh;
    min-width: 0;
  }

  .member-modal__visual img {
    width: 100%;
    min-width: 0;
  }

  .member-modal__body {
    min-width: 0;
    padding-bottom: 30px;
  }

  .member-modal__name {
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
    font-size: clamp(2.05rem, 7vw, 3.85rem);
    line-height: .96;
    letter-spacing: .045em;
  }

  .pc-name-break {
    display: block;
  }

  .member-modal__thumbs {
    left: 50%;
    bottom: 14px;
    z-index: 7;
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 10px;
    width: auto;
    max-width: calc(100% - 32px);
    margin: 0;
    padding: 12px 16px 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .62) 34%, rgba(0, 0, 0, .88) 100%);
    transform: translateX(-50%);
  }

  .member-modal__thumbs::-webkit-scrollbar {
    display: none;
  }

  .member-modal__thumbs button {
    flex: 0 0 46px;
    width: 46px;
    height: 58px;
  }

  .member-qa {
    padding: 18px;
    display: grid;
    place-items: center;
  }

  .member-qa__panel {
    position: relative;
    top: auto;
    left: auto;
    width: min(100%, 560px);
    max-height: calc(100svh - 36px);
    transform: translateY(14px) scale(.96);
  }

  .member-qa.is-open .member-qa__panel {
    transform: translateY(0) scale(1);
  }
}

@media (min-width: 641px) and (max-width: 900px) {
  .member-modal__visual {
    height: 50svh;
  }

  .member-modal__thumbs {
    bottom: 8px;
    gap: 8px;
    max-width: calc(100% - 48px);
    padding: 8px 10px;
    border-radius: 16px;
    background: rgba(0, 0, 0, .42);
  }

  .member-modal__thumbs button {
    flex: 0 0 42px;
    width: 42px;
    height: 54px;
    border-radius: 11px;
  }
}

@media (max-width: 640px) {
  .members__head {
    text-align: left;
  }

.members-heading {
  left: 50%;
  width: calc(100vw - 16px);
  height: calc((100vw - 16px) * 520 / 3000);
  margin-top: 4px;
  transform: translateX(-50%);
}

  .members-heading::before,
  .members-heading::after {
    width: 4px;
  }

  .members__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .member-card {
    border-radius: 24px;
  }

  .member-card__thumb {
    aspect-ratio: 4 / 5;
  }

  .member-modal {
    padding: 14px;
  }

  .member-modal__panel {
    max-height: calc(100svh - 28px);
    border-radius: 24px;
  }

  .member-modal__visual {
    height: 48svh;
  }

  .member-modal__body {
    padding: 24px 18px 26px;
  }

  .member-modal__name {
    font-size: clamp(1.85rem, 9.2vw, 2.55rem);
    line-height: .96;
    letter-spacing: .035em;
  }

  .member-modal__nav {
    top: 38%;
    width: 42px;
    height: 42px;
  }

  .member-modal__nav--prev {
    left: 10px;
  }

  .member-modal__nav--next {
    right: 10px;
  }

  .member-modal__thumbs {
    gap: 8px;
    bottom: 12px;
    padding: 10px 12px 16px;
  }

  .member-modal__thumbs button {
    flex: 0 0 40px;
    width: 40px;
    height: 52px;
  }
}


/* =========================
  Movie
========================= */
.section--movie {
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 18%, rgba(255, 255, 255, .09), transparent 30%),
    radial-gradient(circle at 82% 72%, rgba(255, 43, 43, .10), transparent 34%),
    linear-gradient(180deg, #050505 0%, #0b0b0c 54%, #050505 100%);
}

.movie {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
}

.movie__head {
  width: min(860px, 100%);
  margin-inline: auto;
  text-align: center;
}

.movie-heading {
  position: relative;
  isolation: isolate;
  left: 50%;
  width: min(760px, calc(100vw - 32px));
  margin: 0;
  aspect-ratio: 1600 / 520;
  overflow: hidden;
  background: #050505;
  transform: translateX(-50%);
}

.movie-heading::before,
.movie-heading::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: clamp(8px, 1.2%, 18px);
  background: #050505;
  pointer-events: none;
}

.movie-heading::before {
  left: 0;
}

.movie-heading::after {
  right: 0;
}

.movie-heading__visual {
  position: absolute;
  inset: 0;
  display: block;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, .58))
    drop-shadow(0 0 12px rgba(255, 255, 255, .22))
    drop-shadow(0 0 28px rgba(255, 255, 255, .1));
}

.movie-heading__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/band/movie/movie-title-slide.webp");
  background-size: auto 100%;
  background-position: left center;
  background-repeat: repeat-x;
  animation: movieTitleSlide 10s linear infinite;
}

.movie-heading__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("../img/band/movie/movie-title-font.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

@keyframes movieTitleSlide {
  0% {
    background-position: 0 center;
  }

  100% {
    background-position: 50% center;
  }
}

.movie__lead {
  line-height: 2;
}

.movie__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 3vw, 34px);
  margin-top: clamp(36px, 5vw, 68px);
}

.movie-card {
  position: relative;
  display: block;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 30px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .075), rgba(255, 255, 255, .025)),
    rgba(0, 0, 0, .38);
  color: #fff;
  text-decoration: none;
  overflow: hidden;
  box-shadow:
    inset 0 0 30px rgba(255, 255, 255, .035),
    0 26px 80px rgba(0, 0, 0, .48);
  transition:
    transform .32s ease,
    border-color .32s ease,
    box-shadow .32s ease;
}

.movie-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, .44);
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, .055),
    0 34px 90px rgba(0, 0, 0, .58),
    0 0 32px rgba(255, 255, 255, .14);
}

.movie-card--youtube:hover {
  border-color: rgba(255, 43, 43, .58);
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, .055),
    0 34px 90px rgba(0, 0, 0, .58),
    0 0 34px rgba(255, 43, 43, .24);
}

.movie-card__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050505;
}

.movie-card__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 45%, rgba(0, 0, 0, .62) 100%),
    radial-gradient(circle at 50% 50%, transparent 0 28%, rgba(0, 0, 0, .36) 72%);
  opacity: .72;
  transition: opacity .32s ease;
}

.movie-card:hover .movie-card__thumb::after {
  opacity: .42;
}

.movie-card__thumb img,
.movie-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: contrast(1.04) brightness(.92);
  transition:
    transform .42s ease,
    filter .42s ease,
    opacity .42s ease;
}

.movie-card__img--color {
  position: absolute;
  inset: 0;
  opacity: 0;
}

.movie-card--youtube:hover .movie-card__img--mono {
  opacity: 0;
}

.movie-card--youtube:hover .movie-card__img--color {
  opacity: 1;
}

.movie-card:hover .movie-card__thumb img,
.movie-card:hover .movie-card__img {
  transform: scale(1.055);
  filter: contrast(1.1) brightness(1.04);
}

.movie-card__play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: clamp(62px, 8vw, 92px);
  height: clamp(62px, 8vw, 92px);
  border: 1px solid rgba(255, 255, 255, .46);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  backdrop-filter: blur(10px);
  transform: translate(-50%, -50%);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, .12),
    0 0 26px rgba(255, 255, 255, .18);
  animation: moviePlayPulse 1.8s ease-in-out infinite;
}

.movie-card--youtube .movie-card__play {
  background: rgba(255, 43, 43, .66);
  border-color: rgba(255, 255, 255, .7);
  box-shadow:
    inset 0 0 18px rgba(255, 255, 255, .18),
    0 0 30px rgba(255, 43, 43, .42);
}

.movie-card__play::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0;
  height: 0;
  border-top: 13px solid transparent;
  border-bottom: 13px solid transparent;
  border-left: 20px solid rgba(255, 255, 255, .94);
  transform: translate(-38%, -50%);
}

@keyframes moviePlayPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: .82;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.08);
    opacity: 1;
  }
}

.movie-card__body {
  display: grid;
  gap: 8px;
  padding: clamp(20px, 3vw, 30px);
}

.movie-card__label {
  color: rgba(255, 255, 255, .52);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.movie-card__title {
  color: rgba(255, 255, 255, .96);
  font-size: clamp(1.35rem, 2.4vw, 2.4rem);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.movie-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  margin-top: 10px;
  color: rgba(255, 255, 255, .82);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.movie-card__cta::after {
  content: "→";
  transition: transform .24s ease;
}

.movie-card:hover .movie-card__cta::after {
  transform: translateX(4px);
}

@media (max-width: 900px) {
  .movie__grid {
    grid-template-columns: 1fr;
    width: min(680px, 100%);
    margin-inline: auto;
  }
}

@media (max-width: 640px) {
  .movie__head {
    text-align: left;
  }

  .movie-heading {
    width: min(640px, calc(100vw - 16px));
  }

  .movie-card {
    border-radius: 24px;
  }

  .movie-card__body {
    padding: 20px;
  }

  .movie-card__title {
    font-size: 1.35rem;
  }
}



/* =========================
  Photobook
========================= */
.section--photobook {
  overflow: hidden;
  background:
    radial-gradient(circle at 20% 18%, rgba(255, 255, 255, .09), transparent 30%),
    radial-gradient(circle at 78% 74%, rgba(168, 85, 247, .10), transparent 34%),
    radial-gradient(circle at 50% 100%, rgba(255, 43, 43, .08), transparent 36%),
    linear-gradient(180deg, #050505 0%, #0b0b0c 54%, #050505 100%);
}

.photobook {
  position: relative;
  z-index: 1;
  width: min(1240px, 100%);
}

.photobook__head {
  width: min(860px, 100%);
  margin-inline: auto;
  text-align: center;
}

.photobook-heading {
  position: relative;
  isolation: isolate;
  left: 50%;
  width: min(1280px, calc(100vw - 32px));
  margin: 0;
  aspect-ratio: 3000 / 520;
  overflow: hidden;
  background: #050505;
  transform: translateX(-50%);
}

.photobook-heading::before,
.photobook-heading::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 4;
  width: clamp(8px, 1.2%, 18px);
  background: #050505;
  pointer-events: none;
}

.photobook-heading::before {
  left: 0;
}

.photobook-heading::after {
  right: 0;
}

.photobook-heading__visual {
  position: absolute;
  inset: 0;
  display: block;
  filter:
    drop-shadow(0 0 2px rgba(255, 255, 255, .58))
    drop-shadow(0 0 12px rgba(255, 255, 255, .22))
    drop-shadow(0 0 28px rgba(255, 255, 255, .1));
}

.photobook-heading__visual::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url("../img/band/photobook/photobook-title-slide.webp");
  background-size: 200% 100%;
  background-position: left center;
  background-repeat: repeat-x;
  animation: photobookTitleSlide 22s linear infinite;
}

.photobook-heading__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background-image: url("../img/band/photobook/photobook-title-font.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

@keyframes photobookTitleSlide {
  0% {
    background-position: left center;
  }

  100% {
    background-position: right center;
  }
}

.photobook__lead {
  line-height: 2;
}

.photobook__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(38px, 5vw, 68px);
}

.photo-card {
  position: relative;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 26px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, .022)),
    rgba(0, 0, 0, .42);
  overflow: hidden;
  box-shadow:
    inset 0 0 28px rgba(255, 255, 255, .035),
    0 24px 70px rgba(0, 0, 0, .46);
  transition:
    transform .34s ease,
    border-color .34s ease,
    box-shadow .34s ease;
}

.photo-card:hover {
  transform: translateY(-8px);
  border-color: rgba(255, 255, 255, .42);
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, .055),
    0 34px 90px rgba(0, 0, 0, .58),
    0 0 30px rgba(255, 255, 255, .14);
}

.photo-card__image {
  position: relative;
  display: block;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: #050505;
}

.photo-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(180deg, transparent 42%, rgba(0, 0, 0, .74) 100%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .025) 0, rgba(255, 255, 255, .025) 1px, transparent 1px, transparent 6px);
  opacity: .82;
  transition: opacity .34s ease;
}

.photo-card:hover .photo-card__image::after {
  opacity: .45;
}

.photo-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition:
    opacity .42s ease,
    transform .42s ease,
    filter .42s ease;
}

.photo-card__img--mono {
  filter: contrast(1.05) brightness(.9);
}

.photo-card__img--color {
  position: absolute;
  inset: 0;
  opacity: 0;
  filter: contrast(1.06) brightness(1.02);
}

.photo-card:hover .photo-card__img--mono {
  opacity: 0;
  transform: scale(1.055);
}

.photo-card:hover .photo-card__img--color {
  opacity: 1;
  transform: scale(1.055);
}

.photo-card__caption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 14px;
  z-index: 4;
  display: grid;
  gap: 4px;
  text-align: left;
  transform: translateY(4px);
  transition:
    transform .3s ease,
    opacity .3s ease;
}

.photo-card:hover .photo-card__caption {
  transform: translateY(0);
}

.photo-card__caption span {
  color: rgba(255, 255, 255, .58);
  font-size: .62rem;
  font-weight: 900;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.photo-card__caption strong {
  color: rgba(255, 255, 255, .94);
  font-size: clamp(.92rem, 1.2vw, 1.12rem);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-shadow:
    0 1px 10px rgba(0, 0, 0, .86),
    0 0 18px rgba(255, 255, 255, .16);
}

@media (max-width: 900px) {
  .photobook__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .photobook__head {
    text-align: left;
  }

  .photobook__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .photo-card {
    border-radius: 20px;
  }

  .photo-card__caption {
    left: 12px;
    right: 12px;
    bottom: 12px;
  }

  .photo-card__caption span {
    font-size: .56rem;
    letter-spacing: .12em;
  }

  .photo-card__caption strong {
    font-size: .82rem;
    letter-spacing: .05em;
  }
  
  
  .photobook-heading {
    left: 50%;
    width: calc(100vw - 16px);
    margin-top: 4px;
    transform: translateX(-50%);
  }

  .photobook-heading::before,
  .photobook-heading::after {
    width: 4px;
  }
  
}


/* Photobook polish */
.photo-card {
  --photo-accent: rgba(255, 255, 255, .22);
}

.photo-card:nth-child(1) { --photo-accent: rgba(255, 43, 43, .34); transform: rotate(-.35deg); }
.photo-card:nth-child(2) { --photo-accent: rgba(56, 189, 248, .34); transform: rotate(.28deg); }
.photo-card:nth-child(3) { --photo-accent: rgba(255, 212, 59, .34); transform: rotate(-.22deg); }
.photo-card:nth-child(4) { --photo-accent: rgba(255, 255, 255, .28); transform: rotate(.34deg); }
.photo-card:nth-child(5) { --photo-accent: rgba(168, 85, 247, .34); transform: rotate(-.28deg); }
.photo-card:nth-child(6) { --photo-accent: rgba(74, 222, 128, .34); transform: rotate(.24deg); }
.photo-card:nth-child(7) { --photo-accent: rgba(255, 212, 59, .36); transform: rotate(.32deg); }
.photo-card:nth-child(8) { --photo-accent: rgba(56, 189, 248, .34); transform: rotate(-.34deg); }
.photo-card:nth-child(9) { --photo-accent: rgba(255, 43, 43, .30); transform: rotate(.22deg); }
.photo-card:nth-child(10) { --photo-accent: rgba(74, 222, 128, .34); transform: rotate(-.24deg); }
.photo-card:nth-child(11) { --photo-accent: rgba(255, 255, 255, .30); transform: rotate(.18deg); }
.photo-card:nth-child(12) { --photo-accent: rgba(255, 255, 255, .34); transform: rotate(-.18deg); }

.photo-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px var(--photo-accent),
    inset 0 0 28px rgba(255, 255, 255, .035);
  opacity: .55;
  transition: opacity .34s ease, box-shadow .34s ease;
}

.photo-card:hover {
  transform: translateY(-8px) rotate(0deg);
  box-shadow:
    inset 0 0 34px rgba(255, 255, 255, .055),
    0 34px 90px rgba(0, 0, 0, .58),
    0 0 34px var(--photo-accent);
}

.photo-card:hover::before {
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--photo-accent) 72%, white 18%),
    inset 0 0 30px rgba(255, 255, 255, .06),
    0 0 22px var(--photo-accent);
}

.photo-card__caption {
  opacity: .88;
}

.photo-card:hover .photo-card__caption {
  opacity: 1;
  transform: translateY(-4px);
}

.photo-card__caption::before {
  content: "";
  width: 42px;
  height: 2px;
  margin-bottom: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--photo-accent), transparent);
  box-shadow: 0 0 12px var(--photo-accent);
}


@media (max-width: 640px) {
  .photobook__grid {
    display: flex;
    gap: 14px;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

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

  .photo-card {
    flex: 0 0 72%;
    scroll-snap-align: center;
  }

  .photo-card:nth-child(n) {
    transform: none;
  }

  .photo-card:hover {
    transform: translateY(-5px);
  }
}

.photobook__nav {
  display: none;
}

@media (max-width: 640px) {
  .photobook__nav {
    display: flex;
    justify-content: center;
    gap: 14px;
    margin-top: 18px;
  }

  .photobook__arrow {
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 999px;
    background: rgba(0, 0, 0, .42);
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    box-shadow:
      inset 0 0 16px rgba(255, 255, 255, .06),
      0 0 18px rgba(255, 255, 255, .10);
  }

  .photobook__arrow:active {
    transform: scale(.94);
  }
}



/* =========================
  Contact
========================= */
.section--contact {
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 20%, rgba(255, 255, 255, .12), transparent 34%),
    radial-gradient(circle at 20% 78%, rgba(255, 43, 43, .08), transparent 32%),
    radial-gradient(circle at 78% 76%, rgba(56, 189, 248, .08), transparent 34%),
    linear-gradient(180deg, #050505 0%, #09090a 58%, #030303 100%);
}

.contact {
  width: min(980px, 100%);
}

.contact-card {
  position: relative;
  overflow: hidden;
  padding: clamp(34px, 6vw, 72px) clamp(22px, 5vw, 64px);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 34px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .025)),
    rgba(0, 0, 0, .44);
  box-shadow:
    inset 0 0 36px rgba(255, 255, 255, .04),
    0 32px 100px rgba(0, 0, 0, .58),
    0 0 34px rgba(255, 255, 255, .08);
}

.contact-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      0deg,
      rgba(255, 255, 255, .03) 0,
      rgba(255, 255, 255, .03) 1px,
      transparent 1px,
      transparent 6px
    );
  opacity: .42;
}

.contact-card::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  width: min(680px, 80%);
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .8), transparent);
  box-shadow: 0 0 24px rgba(255, 255, 255, .28);
  transform: translateX(-50%);
}

.contact-card > * {
  position: relative;
  z-index: 1;
}

.contact__title {
  text-shadow:
    0 0 10px rgba(255, 255, 255, .28),
    0 0 32px rgba(255, 255, 255, .12);
}

.contact__lead {
  line-height: 2;
}

.contact__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 220px;
  min-height: 52px;
  margin-top: clamp(24px, 3vw, 38px);
  padding: 0 30px;
  border: 1px solid rgba(255, 255, 255, .42);
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  color: #050505;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-decoration: none;
  text-transform: uppercase;
  overflow: hidden;
  box-shadow:
    0 0 22px rgba(255, 255, 255, .22),
    0 18px 48px rgba(0, 0, 0, .34);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    background .28s ease;
}

.contact__btn::before {
  content: "";
  position: absolute;
  inset: -40% auto -40% -60%;
  width: 42%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9), transparent);
  transform: skewX(-18deg);
  animation: contactBtnShine 2.8s ease-in-out infinite;
}

.contact__btn::after {
  content: "→";
  margin-left: 10px;
  transition: transform .24s ease;
}

.contact__btn span {
  position: relative;
  z-index: 1;
}

.contact__btn:hover {
  transform: translateY(-4px);
  background: #fff;
  box-shadow:
    0 0 30px rgba(255, 255, 255, .42),
    0 24px 58px rgba(0, 0, 0, .42);
}

.contact__btn:hover::after {
  transform: translateX(5px);
}

@keyframes contactBtnShine {
  0%, 55% {
    left: -60%;
    opacity: 0;
  }

  70% {
    opacity: 1;
  }

  100% {
    left: 120%;
    opacity: 0;
  }
}

.contact__btn {
  animation: contactBtnPulse 2.4s ease-in-out infinite;
}

@keyframes contactBtnPulse {
  0%, 100% {
    box-shadow:
      0 0 18px rgba(255, 255, 255, .22),
      0 18px 48px rgba(0, 0, 0, .34);
  }

  50% {
    box-shadow:
      0 0 34px rgba(255, 255, 255, .48),
      0 0 58px rgba(255, 255, 255, .22),
      0 22px 58px rgba(0, 0, 0, .42);
  }
}




.contact__note {
  margin: 18px 0 0;
  color: rgba(255, 255, 255, .42);
  font-size: .72rem;
  letter-spacing: .12em;
}

@media (max-width: 640px) {
  .contact-card {
    border-radius: 26px;
    text-align: left;
  }

  .contact__title {
    font-size: clamp(2.1rem, 12vw, 3.6rem);
  }

  .contact__btn {
    width: 100%;
    min-width: 0;
  }

  .contact__note {
    line-height: 1.7;
  }
}


/* =========================
  Common Sections / Footer
========================= */
.section {
  position: relative;
  padding: clamp(82px, 10vw, 140px) var(--gutter);
  background: #080808;
  border-top: 1px solid rgba(255, 255, 255, .08);
}

.section__inner {
  width: min(1100px, 100%);
  margin-inline: auto;
  text-align: center;
}

.section__label {
  margin: 0 0 12px;
  color: rgba(255, 255, 255, .52);
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.section__title {
  margin: 0;
  color: #fff;
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: 1;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.section__lead {
  margin: 22px 0 0;
  color: rgba(255, 255, 255, .66);
}

.site-footer {
  padding: 26px var(--gutter);
  background: #030303;
  border-top: 1px solid rgba(255, 255, 255, .08);
  text-align: center;
}

.site-footer__copy {
  color: rgba(255, 255, 255, .48);
  font-size: .75rem;
  letter-spacing: .12em;
}