@charset "utf-8";

/* =========================================
   RESET / BASE
========================================= */
:root{
  --bg: #06070b;
  --bg-soft: #0d1020;
  --surface: rgba(255,255,255,.06);
  --surface-strong: rgba(255,255,255,.10);
  --line: rgba(255,255,255,.14);

  --text: #f7f8fc;
  --muted: rgba(247,248,252,.72);

  --pink: #ff3ebf;
  --blue: #38d8ff;
  --violet: #7f5cff;
  --yellow: #ffd84d;

  --shadow-lg: 0 24px 80px rgba(0,0,0,.42);
  --shadow-md: 0 14px 40px rgba(0,0,0,.28);

  --radius-lg: 28px;
  --radius-md: 20px;

  --container: 1180px;
}

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

html{
  scroll-behavior: smooth;
}

body{
  margin: 0;
  min-width: 320px;
  font-family: "Noto Sans JP", sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(127,92,255,.12), transparent 60%),
    radial-gradient(900px 520px at 100% 10%, rgba(56,216,255,.10), transparent 58%),
    linear-gradient(180deg, #04050a 0%, #070910 100%);
  line-height: 1.7;
  overflow-x: hidden;
  overscroll-behavior-x: none;
}

img{
  display: block;
  width: 100%;
  height: auto;
}

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

button,
input,
textarea,
select{
  font: inherit;
}

.container{
  width: min(var(--container), calc(100% - 40px));
  margin-inline: auto;
}

.section{
  position: relative;
  padding: 112px 0;
}

.section-head{
  margin-bottom: 42px;
  text-align: center;
}

.section-head--left{
  text-align: left;
}

.section-head__eyebrow{
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .26em;
  color: var(--blue);
  text-transform: uppercase;
}

.section-head__title{
  margin: 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: clamp(32px, 5vw, 62px);
  line-height: 1.06;
  font-weight: 900;
  letter-spacing: -.03em;
}

.section-head__lead{
  width: min(780px, 100%);
  margin: 18px auto 0;
  font-size: 16px;
  color: var(--muted);
}

.section-head--left .section-head__lead{
  margin-left: 0;
  margin-right: 0;
}

.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 800;
  letter-spacing: .02em;
  transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
  cursor: pointer;
}

.btn:hover{
  transform: translateY(-2px);
}

.btn--primary{
  color: #09101d;
  background: linear-gradient(135deg, var(--blue), #b9f2ff);
  box-shadow: 0 12px 34px rgba(56,216,255,.25);
}

.btn--ghost{
  color: var(--text);
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  backdrop-filter: blur(10px);
}

.btn--sm{
  min-height: 42px;
  padding-inline: 18px;
  font-size: 14px;
}

.btn--lg{
  min-height: 60px;
  padding-inline: 28px;
}

/* =========================================
   HEADER
========================================= */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  background: rgba(5, 7, 14, .48);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.site-header__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
}

.site-logo{
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  line-height: 1;
}

.site-logo__main{
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .12em;
}

.site-logo__sub{
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .28em;
  color: var(--muted);
}

.site-nav{
  display: flex;
  align-items: center;
  gap: 20px;
}

.site-nav a{
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}


.menu-toggle{
  display: none;
  position: relative;
  z-index: 60;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(56,216,255,.42);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(56,216,255,.10), rgba(255,62,191,.08)),
    rgba(255,255,255,.05);
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 10px rgba(56,216,255,.18),
    0 0 22px rgba(255,62,191,.10),
    inset 0 0 0 1px rgba(255,255,255,.04);
  cursor: pointer;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    opacity .22s ease;
}

.menu-toggle span{
  position: absolute;
  left: 50%;
  width: 22px;
  height: 2px;
  border-radius: 999px;
  background: var(--text);
  transform: translateX(-50%);
  transition: transform .28s ease, opacity .28s ease, top .28s ease;
}

.menu-toggle span:nth-child(1){
  top: 17px;
}

.menu-toggle span:nth-child(2){
  top: 25px;
}

.menu-toggle span:nth-child(3){
  top: 33px;
}



.menu-toggle:hover{
  transform: translateY(-2px) scale(1.06);
  border-color: rgba(255,62,191,.95);
  background:
    linear-gradient(135deg, rgba(56,216,255,.18), rgba(255,62,191,.16)),
    rgba(255,255,255,.08);
  box-shadow:
    0 0 14px rgba(56,216,255,.42),
    0 0 32px rgba(56,216,255,.28),
    0 0 56px rgba(255,62,191,.24),
    inset 0 0 0 1px rgba(255,255,255,.08);
}





.menu-toggle.is-active span:nth-child(1){
  top: 25px;
  transform: translateX(-50%) rotate(45deg);
}

.menu-toggle.is-active span:nth-child(2){
  opacity: 0;
}

.menu-toggle.is-active span:nth-child(3){
  top: 25px;
  transform: translateX(-50%) rotate(-45deg);
}


.menu-toggle.is-active{
  border-color: rgba(255,62,191,.88);
  box-shadow:
    0 0 14px rgba(255,62,191,.34),
    0 0 30px rgba(255,62,191,.24),
    0 0 48px rgba(56,216,255,.18);
  animation: menuToggleNeonPulse 1.1s ease-in-out infinite alternate;

  transform: scale(1.08);

  animation:
    menuToggleNeonPulse 1.1s ease-in-out infinite alternate,
    menuToggleFlash .35s ease;
}


.sp-nav{
  position: fixed;
  inset: 0;
  z-index: 55;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
}

.sp-nav__backdrop{
  position: absolute;
  inset: 0;
  background: rgba(3,5,10,.68);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity .3s ease;
}

.sp-nav__panel{
  position: absolute;
  top: 0;
  right: 0;
  width: min(86vw, 360px);
  height: 100dvh;
  padding: 24px 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow: hidden;
  background:
    radial-gradient(460px 240px at 100% 0%, rgba(56,216,255,.18), transparent 60%),
    radial-gradient(420px 240px at 0% 100%, rgba(255,62,191,.16), transparent 60%),
    rgba(7,10,18,.96);
  border-left: 1px solid rgba(255,255,255,.10);
  box-shadow: -24px 0 60px rgba(0,0,0,.32);
  transform: translateX(108%);
  opacity: 0;
  visibility: hidden;
  transition: transform .32s ease, opacity .22s ease, visibility .22s ease;
  will-change: transform;
}

.sp-nav.is-open .sp-nav__panel{
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
}

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

.sp-nav.is-open .sp-nav__backdrop{
  opacity: 1;
}


body.is-menu-open .menu-toggle{
  opacity: 0;
  pointer-events: none;
}

.sp-nav__head{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sp-nav__title{
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .22em;
  color: var(--blue);
}

.sp-nav__close{
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(56,216,255,.48);
  border-radius: 14px;
  background:
    linear-gradient(135deg, rgba(56,216,255,.12), rgba(255,62,191,.10)),
    rgba(255,255,255,.05);
  color: var(--text);
  cursor: pointer;
  box-shadow:
    0 0 10px rgba(56,216,255,.22),
    0 0 22px rgba(255,62,191,.14);
  transition: all .25s ease;

  animation: menuToggleNeonPulse 1.6s ease-in-out infinite alternate;
}


.sp-nav__close:hover{
  border-color: rgba(255,62,191,.82);
  box-shadow:
    0 0 12px rgba(255,62,191,.32),
    0 0 28px rgba(255,62,191,.24),
    0 0 44px rgba(56,216,255,.18);
}


.sp-nav__links{
    padding-top: 20px;

  display: grid;
  gap: 12px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  align-content: start;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}

.sp-nav__links a{
  display: flex;
  align-items: center;
  min-height: 58px;
  padding: 0 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .06em;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
  flex: 0 0 auto;
}

.sp-nav__links a:hover{
  transform: translateY(-2px);
  border-color: rgba(56,216,255,.38);
  box-shadow:
    0 0 10px rgba(56,216,255,.18),
    0 0 24px rgba(255,62,191,.10);
}

.sp-nav__links a.sp-nav__cta{
  margin-top: 6px;
  justify-content: center;
  color: #09101d;
  background: linear-gradient(135deg, var(--blue), #b9f2ff);
  border-color: transparent;
  box-shadow: 0 12px 34px rgba(56,216,255,.22);
}



/* =========================================
   HERO
========================================= */
.hero{
  position: relative;
  min-height: calc(100svh - 78px);
  display: flex;
  align-items: center;
  isolation: isolate;
  overflow: clip;
  background: #05060a;
    will-change: transform;
}

.hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(3,5,10,.88) 0%, rgba(3,5,10,.54) 42%, rgba(3,5,10,.36) 65%, rgba(3,5,10,.64) 100%),
    linear-gradient(180deg, rgba(0,0,0,.25) 0%, rgba(0,0,0,.08) 35%, rgba(0,0,0,.74) 100%);
}

.hero::after{
  content: "";
  position: absolute;
  inset: auto -8vw -1px -8vw;
  height: 180px;
  z-index: 2;
  background: linear-gradient(180deg, transparent 0%, rgba(5,7,14,.95) 70%, rgba(5,7,14,1) 100%);
  clip-path: polygon(0 52%, 100% 0, 100% 100%, 0 100%);
}

.hero__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg-main{
  position: absolute;
  inset: -3% -3%;
  width: 106%;
  height: 106%;
  object-fit: cover;

}

.hero__overlay{
  position: absolute;
  inset: auto;
  pointer-events: none;
  user-select: none;
  mix-blend-mode: screen;
}

.hero__overlay--light{
  top: 10%;
  right: -6%;
  width: min(62vw, 980px);
  opacity: .34;
  filter: blur(2px);
  animation: floatLight 12s ease-in-out infinite alternate;
}

.hero__overlay--smoke{
  left: -4%;
  bottom: -6%;
  width: min(60vw, 900px);
  opacity: .26;
  filter: blur(4px);
  animation: floatSmoke 14s ease-in-out infinite alternate;
}

.hero__content{
  position: relative;
  z-index: 3;
  padding-block: 84px 132px;
}

.hero__eyebrow{
  margin: 0 0 18px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .28em;
  color: var(--blue);
}

.hero__title{
  margin: 0;
  max-width: 8.5em;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: clamp(44px, 7vw, 108px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.05em;
  text-wrap: balance;
}

.hero__lead{
  max-width: 620px;
  margin: 24px 0 0;
  font-size: clamp(16px, 2vw, 19px);
  color: rgba(247,248,252,.86);
}

.hero__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 34px;
}

.hero__meta{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 760px;
  margin-top: 46px;
}

.hero__meta-card{
  padding: 18px 18px 16px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(12px);
  box-shadow: var(--shadow-md);
}

.hero__meta-label{
  display: block;
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--muted);
}

.hero__meta-card strong{
  font-size: 18px;
  font-weight: 800;
}

/* =========================================
   INTRO STRIP
========================================= */
.intro-strip{
  position: relative;
  z-index: 4;
  overflow: hidden;
  border-top: 1px solid rgba(255,255,255,.10);
  border-bottom: 1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(
      90deg,
      rgba(127,92,255,.28),
      rgba(255,62,191,.26),
      rgba(56,216,255,.28),
      rgba(255,216,77,.20),
      rgba(127,92,255,.28)
    );
  box-shadow:
    0 0 18px rgba(56,216,255,.16),
    0 0 34px rgba(255,62,191,.14);
  /*animation: introStripBgPulse 1.2s ease-in-out infinite alternate;*/

  animation:
    introStripFlashIn .5s ease,
    introStripBgPulse 1.2s ease-in-out infinite alternate;
}


.intro-strip::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(
      90deg,
      rgba(56,216,255,.00) 0%,
      rgba(56,216,255,.36) 18%,
      rgba(255,62,191,.34) 38%,
      rgba(255,216,77,.28) 52%,
      rgba(56,216,255,.34) 68%,
      rgba(127,92,255,.30) 84%,
      rgba(56,216,255,.00) 100%
    );
  mix-blend-mode: screen;
  opacity: .88;
  pointer-events: none;
  animation: introStripFlash 1.6s ease-in-out infinite;
}

.intro-strip::after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(56,216,255,.95), rgba(255,62,191,.95), rgba(255,216,77,.90), rgba(56,216,255,.95)) top / 100% 2px no-repeat,
    linear-gradient(90deg, rgba(255,62,191,.95), rgba(56,216,255,.95), rgba(127,92,255,.90), rgba(255,62,191,.95)) bottom / 100% 2px no-repeat;
  box-shadow:
    inset 0 8px 22px rgba(56,216,255,.08),
    inset 0 -8px 22px rgba(255,62,191,.08);
  opacity: .92;
  animation: introStripLineBlink 1s ease-in-out infinite alternate;
}


.intro-strip__track{
  position: relative;
  z-index: 2;
  display: flex;
  width: max-content;
  padding: 16px 24px;
  white-space: nowrap;
  animation: marquee 34s linear infinite;
  will-change: transform;
}



.intro-strip__group{
  display: flex;
  gap: 42px;
  flex-shrink: 0;
  padding-right: 42px;
}


.intro-strip__group span:nth-child(2){ animation-delay: .2s; }
.intro-strip__group span:nth-child(3){ animation-delay: .4s; }
.intro-strip__group span:nth-child(4){ animation-delay: .6s; }
.intro-strip__group span:nth-child(5){ animation-delay: .8s; }
.intro-strip__group span:nth-child(6){ animation-delay: 1s; }
.intro-strip__group span:nth-child(7){ animation-delay: 1.2s; }
.intro-strip__group span:nth-child(8){ animation-delay: 1.4s; }



.intro-strip__track span{
  font-family: "Montserrat", sans-serif;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .24em;
  color: rgba(255,255,255,.98);
  text-shadow:
    0 0 8px rgba(56,216,255,.34),
    0 0 16px rgba(255,62,191,.24),
    0 0 26px rgba(255,255,255,.12);
  animation: introStripTextBlink 1.35s ease-in-out infinite alternate;
}

/* =========================================
   LINEUP
========================================= */
.lineup{
  background:
    radial-gradient(900px 440px at 0% 0%, rgba(127,92,255,.12), transparent 58%),
    radial-gradient(840px 420px at 100% 10%, rgba(255,62,191,.10), transparent 60%);
}

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

.day-card{
  position: relative;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

.day-card::before{
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--pink), var(--blue));
}

.day-card__head{
  margin-bottom: 22px;
}

.day-card__eyebrow{
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--blue);
}

.day-card__title{
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 34px;
  font-weight: 900;
  line-height: 1;
}

.day-card__time{
  margin: 8px 0 0;
  color: var(--muted);
}

.artist-list{
  display: grid;
  gap: 16px;
}

.artist-card{
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 22px;
  background: rgba(7,10,18,.72);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}

.artist-card:hover{
  transform: translateY(-4px) scale(1.015);
  border-color: rgba(56,216,255,.95);
  box-shadow:
    0 0 10px rgba(56,216,255,.55),
    0 0 22px rgba(56,216,255,.45),
    0 0 44px rgba(255,62,191,.30),
    0 20px 40px rgba(0,0,0,.30);
  animation: artistNeonBlink .9s ease-in-out infinite alternate;
}


.artist-card__thumb{
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: 16px;
}

.artist-card__thumb::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, rgba(0,0,0,.28) 100%);
}

.artist-card__thumb img{
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease;
}

.artist-card:hover .artist-card__thumb img{
  transform: scale(1.06);
}

.artist-card__time{
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--yellow);
}

.artist-card__name{
  margin: 0;
  font-family: "Montserrat", sans-serif;
  font-size: 24px;
  line-height: 1.04;
  font-weight: 900;
}

.artist-card__genre{
  margin: 8px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* =========================================
   EXPERIENCE
========================================= */
.experience{
  position: relative;
  overflow: clip;
  isolation: isolate;
  min-height: 840px;
}

.experience__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.experience__bg::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(5,7,14,.88) 0%, rgba(5,7,14,.48) 44%, rgba(5,7,14,.62) 100%),
    linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.72));
}

.experience__bg-main{
  width: 100%;
  height: 100%;
  object-fit: cover;
  animation: heroZoom 18s ease-in-out infinite alternate;
}

.experience__overlay{
  position: absolute;
  z-index: 2;
  mix-blend-mode: screen;
  pointer-events: none;
}

.experience__overlay--light{
  right: -8%;
  top: 8%;
  width: min(54vw, 880px);
  opacity: .28;

  animation: beatPulseLight .48s cubic-bezier(.8,0,.2,1) infinite;
}

.experience__overlay--smoke{
  left: -8%;
  bottom: -6%;
  width: min(56vw, 900px);
  opacity: .22;

  animation: beatPulseSmoke .56s cubic-bezier(.8,0,.2,1) infinite;
}

.experience__content{
  position: relative;
  z-index: 3;
}

.experience__grid{
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin-top: 34px;
}

.experience-card{
  padding: 28px 24px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(14px);
  box-shadow: var(--shadow-md);

  animation: cardPulse 1.2s ease-in-out infinite;
}

.experience-card h3{
  margin: 0 0 10px;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 900;
  letter-spacing: .02em;
}

.experience-card p{
  margin: 0;
  color: rgba(247,248,252,.78);
}

/* =========================================
   FIREWORKS
========================================= */
.fireworks{
  position: relative;
  min-height: 88svh;
  display: flex;
  align-items: center;
  overflow: clip;
  isolation: isolate;
}

.fireworks__bg{
  position: absolute;
  inset: 0;
  z-index: 0;
}

.fireworks__bg::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(800px 320px at 50% 72%, rgba(255,120,80,.10), transparent 60%),
    linear-gradient(180deg, rgba(2,4,10,.56) 0%, rgba(2,4,10,.44) 30%, rgba(2,4,10,.84) 100%);
}

.fireworks__bg-main{
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.fireworks__particles{
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.fireworks__burst{
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(160px, 20vw, 360px);
  aspect-ratio: 1 / 1;
  background: url("../img/fes/fireworks.png") center / contain no-repeat;
  opacity: 0;
  --burst-rotate: 0deg;
  transform: translate(-50%, -50%) scale(.35) rotate(var(--burst-rotate));
  transform-origin: center center;
  filter:
    drop-shadow(0 0 12px rgba(255,216,140,.28))
    drop-shadow(0 0 28px rgba(255,120,80,.18));
  will-change: transform, opacity;
  animation: fireworksBurst 2.2s ease-out forwards;
}

.fireworks__burst--small{
  width: clamp(110px, 12vw, 220px);
  animation-duration: 1.8s;
}

.fireworks__burst--large{
  width: clamp(180px, 24vw, 420px);
  animation-duration: 2.6s;
}



.fireworks__content{
  position: relative;
  z-index: 2;
  text-align: center;
}

.fireworks__title{
  margin: 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: clamp(34px, 6vw, 80px);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.04em;
}

.fireworks__lead{
  width: min(760px, 100%);
  margin: 24px auto 0;
  font-size: clamp(16px, 2vw, 19px);
  color: rgba(247,248,252,.86);
}

/* =========================================
   TICKET
========================================= */
.ticket{
  padding-top: 96px;
  padding-bottom: 130px;
}

.ticket-box{
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 24px;
  align-items: center;
  padding: 34px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 32px;
  background:
    radial-gradient(500px 260px at 0% 0%, rgba(255,62,191,.14), transparent 60%),
    radial-gradient(520px 260px at 100% 100%, rgba(56,216,255,.16), transparent 60%),
    rgba(255,255,255,.05);
  box-shadow: var(--shadow-lg);
}

.ticket-box__title{
  margin: 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: clamp(32px, 4.4vw, 58px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: -.04em;
}

.ticket-box__lead{
  margin: 16px 0 0;
  color: var(--muted);
}

.ticket-box__actions{
  display: flex;
  flex-direction: column;
  gap: 14px;
}



/* =========================================
   ARTIST MODAL
========================================= */
.artist-modal{
  position: fixed;
  inset: 0;
  z-index: 120;
  opacity: 0;
  pointer-events: none;
  transition: opacity .32s ease;
  overflow: hidden;
  overscroll-behavior-x: none;
}

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

.artist-modal__backdrop{
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(2,4,10,.76), rgba(2,4,10,.88)),
    radial-gradient(900px 500px at 50% 50%, rgba(56,216,255,.08), transparent 60%);
  backdrop-filter: blur(14px);
}

.artist-modal__viewport{
  position: relative;
  z-index: 1;
  width: min(1400px, 100%);
  height: 100dvh;
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 40px 0;
  overscroll-behavior: none;
}


.artist-modal__marquee{
  position: absolute;
  left: 0;
  width: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 2;
    
  height: 40px;
  display: flex;
  align-items: center;

    opacity: .92;
}

.artist-modal__marquee--top{
  top: 36px;
}

.artist-modal__marquee--bottom{
  bottom: 28px;
  top: auto;
}

.artist-modal__marquee::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg,
      rgba(2,4,10,1) 0%,
      rgba(2,4,10,.18) 10%,
      rgba(2,4,10,0) 18%,
      rgba(2,4,10,0) 82%,
      rgba(2,4,10,.18) 90%,
      rgba(2,4,10,1) 100%);
  pointer-events: none;
}

.artist-modal__marquee-track{
  display: flex;
  width: max-content;
  gap: 42px;
  white-space: nowrap;
  will-change: transform;
}

.artist-modal__marquee--top .artist-modal__marquee-track{
  animation: artistNameMarquee 18s linear infinite;
}

.artist-modal__marquee--bottom .artist-modal__marquee-track{
  animation: artistNameMarqueeReverse 18s linear infinite;
}

.artist-modal__marquee-item{
  flex: 0 0 auto;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: clamp(22px, 2.2vw, 34px);
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;

  text-shadow:
    0 0 10px rgba(56,216,255,.30),
    0 0 20px rgba(255,62,191,.22),
    0 0 34px rgba(127,92,255,.18);

  opacity: .92;
  animation: artistNameBlink 1.2s ease-in-out infinite alternate;

  filter: contrast(1.1) saturate(1.1);
}

.artist-modal__marquee--top .artist-modal__marquee-item{
  background: linear-gradient(
    90deg,
    #38d8ff 0%,
    #b9f2ff 35%,
    #7f5cff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.artist-modal__marquee--bottom .artist-modal__marquee-item{
  background: linear-gradient(
    90deg,
    #ff3ebf 0%,
    #ff8de1 35%,
    #ffd84d 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.artist-modal__marquee--top .artist-modal__marquee-track{
  animation: artistNameMarquee 16s linear infinite;
}

.artist-modal__marquee--bottom .artist-modal__marquee-track{
  animation: artistNameMarqueeReverse 20s linear infinite;
}


.artist-modal__marquee-item:nth-child(2n){
  animation-delay: .25s;
}

.artist-modal__marquee-item:nth-child(3n){
  animation-delay: .5s;
}







.artist-modal__track{
  width: 100%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr) minmax(0, 1fr);
  align-items: center;
  gap: 24px;
}



.artist-slide{
  position: relative;
  transition:
    transform .45s ease,
    opacity .45s ease,
    filter .45s ease,
    box-shadow .45s ease;
}

.artist-slide--prev,
.artist-slide--next{
  opacity: .5;
  filter: blur(1px);
}

.artist-slide--prev{
  transform: translateX(-22%);
}

.artist-slide--next{
  transform: translateX(22%);
}

.artist-slide--current{
  z-index: 2;
}

.artist-slide__inner{
  display: grid;
  grid-template-columns: minmax(320px, .82fr) minmax(0, 1.18fr);
  gap: 30px;
  align-items: stretch;
  min-height: min(72vh, 760px);
  max-height: calc(100dvh - 160px);
  padding: 28px;
  border: 1px solid rgba(56,216,255,.58);
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(6,10,20,.92), rgba(5,8,16,.96)),
    radial-gradient(520px 320px at 0% 0%, rgba(56,216,255,.08), transparent 60%),
    radial-gradient(560px 320px at 100% 100%, rgba(255,62,191,.08), transparent 60%);
  box-shadow:
    0 0 10px rgba(56,216,255,.24),
    0 0 22px rgba(56,216,255,.18),
    0 0 44px rgba(255,62,191,.12),
    0 24px 80px rgba(0,0,0,.40);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior-y: contain;
  transition: transform .38s cubic-bezier(.22,.7,.2,1), opacity .28s ease;
  touch-action: pan-y;
  user-select: none;
}

.artist-slide__inner::-webkit-scrollbar-track{
  background: transparent;
}

.artist-slide__inner::-webkit-scrollbar-thumb{
  background: linear-gradient(
    180deg,
    rgba(56,216,255,.6),
    rgba(255,62,191,.4)
  );
  border-radius: 999px;
}


.artist-slide--current .artist-slide__inner{
  position: relative;
  --mx: 50%;
  --my: 50%;
}

.artist-slide--current .artist-slide__inner::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      320px circle at var(--mx) var(--my),
      rgba(56,216,255,.28),
      rgba(255,62,191,.16) 35%,
      transparent 72%
    );
  opacity: 0;
  transition: opacity .22s ease;
  mix-blend-mode: screen;
  pointer-events: none;
}


.artist-slide--current .artist-slide__inner.is-hover-glow{
  border-color: rgba(56,216,255,1);
  box-shadow:
    0 0 14px rgba(56,216,255,.40),
    0 0 28px rgba(56,216,255,.30),
    0 0 54px rgba(255,62,191,.20),
    0 24px 80px rgba(0,0,0,.44);
}



.artist-slide--current .artist-slide__inner.is-hover-glow::after{
  opacity: 1;
}




.artist-slide--current .artist-slide__inner{
  animation: artistModalNeonBlink 1.2s ease-in-out infinite alternate;
}

.artist-slide--current.is-flash .artist-slide__inner{
  animation:
    artistModalFlash .35s ease,
    artistModalNeonBlink 1.2s ease-in-out infinite alternate;
}


.artist-modal__track.is-moving-prev .artist-slide--current .artist-slide__inner{
  transform: translateX(22px) scale(.985);
}

.artist-modal__track.is-moving-next .artist-slide--current .artist-slide__inner{
  transform: translateX(-22px) scale(.985);
}



.artist-slide__media{
  position: relative;
  min-height: 100%;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
}

.artist-slide__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artist-slide__media--main{
  min-height: 100%;
}

.artist-slide--prev .artist-slide__media,
.artist-slide--next .artist-slide__media{
  aspect-ratio: 4 / 5;
  min-height: auto;
  border-radius: 28px;
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
}

.artist-slide__content{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.artist-slide__meta{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .18em;
  color: var(--blue);
  text-transform: uppercase;
}

.artist-slide__name{
  margin: 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: clamp(34px, 4vw, 64px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.artist-slide__genre{
  margin: 14px 0 0;
  font-size: 17px;
  color: rgba(247,248,252,.84);
}

.artist-slide__section{
  margin-top: 28px;
}

.artist-slide__section h4{
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--yellow);
}

.artist-slide__section p{
  margin: 0;
  font-size: 16px;
  line-height: 1.95;
  color: rgba(247,248,252,.86);
}

.artist-modal__close{
  position: fixed;
  top: 26px;
  right: 26px;
  z-index: 130;
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid rgba(56,216,255,.42);
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(56,216,255,.12), rgba(255,62,191,.10)),
    rgba(255,255,255,.05);
  color: var(--text);
  box-shadow:
    0 0 10px rgba(56,216,255,.18),
    0 0 24px rgba(255,62,191,.10);
  cursor: pointer;
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}

.artist-modal__close:hover{
  transform: translateY(-2px) scale(1.04);
  border-color: rgba(255,62,191,.82);
  box-shadow:
    0 0 12px rgba(255,62,191,.28),
    0 0 28px rgba(255,62,191,.18),
    0 0 44px rgba(56,216,255,.14);
}

.artist-modal__nav{
  position: fixed;
  top: 50%;
  z-index: 4;
  transform: translateY(-50%);
  display: inline-grid;
  place-items: center;
  width: 58px;
  height: 58px;
  padding: 0;
  border: 1px solid rgba(255,62,191,.58);
  border-radius: 999px;
  background:
    linear-gradient(135deg, rgba(255,62,191,.22), rgba(255,110,110,.16)),
    rgba(255,255,255,.08);
  color: #fff;
  backdrop-filter: blur(12px);
  box-shadow:
    0 0 10px rgba(255,62,191,.22),
    0 0 22px rgba(255,62,191,.16);
  cursor: pointer;
  transition:
    transform .22s ease,
    border-color .22s ease,
    box-shadow .22s ease,
    background-color .22s ease,
    opacity .22s ease;

    animation: navFloat 1.2s cubic-bezier(.6,0,.3,1) infinite alternate;
}

.artist-modal__nav::before{
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(255,255,255,.12), transparent 70%);
  pointer-events: none;
}


.artist-modal__nav::after{
  content: "";
  position: absolute;
  top: 7px;
  right: 7px;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #ff4d6d;
  box-shadow:
    0 0 8px rgba(255,77,109,.70),
    0 0 16px rgba(255,77,109,.45);
  pointer-events: none;

  animation: navPulse .9s ease-in-out infinite alternate;
}


.artist-modal__nav:hover{
  transform: translateY(-50%) scale(1.08);
  border-color: rgba(56,216,255,.88);
  background:
    linear-gradient(135deg, rgba(56,216,255,.22), rgba(127,92,255,.14)),
    rgba(255,255,255,.10);
  box-shadow:
    0 0 14px rgba(56,216,255,.30),
    0 0 32px rgba(56,216,255,.20),
    0 0 52px rgba(255,62,191,.14);

    animation: none;
}

.artist-modal__nav:hover::after{
  animation: none;
}

.artist-modal__nav span,
.artist-modal__nav{
  font-weight: 900;
  text-shadow:
    0 0 8px rgba(255,255,255,.16),
    0 0 16px rgba(255,62,191,.14);
}



.artist-modal__nav--prev{
  left: calc(50% - 460px + 50px);
}

.artist-modal__nav--next{
  right: calc(50% - 460px + 50px);
}



body.is-artist-modal-open{
  overflow: hidden;
}


.artist-modal__track{
  transition: transform .38s cubic-bezier(.22,.7,.2,1);
  will-change: transform;
}

.artist-modal__track.is-moving-prev{
  transform: translateX(88px);
}

.artist-modal__track.is-moving-next{
  transform: translateX(-88px);
}


.hero__title,
.section-head__title,
.fireworks__title{
  animation: neonTextBlink 2.6s ease-in-out infinite alternate;
}

.sp-nav.is-open .sp-nav__panel{
  transform: translateX(0);
  animation: menuPanelFlash .45s ease;
}



/* =========================================
   ANIMATION
========================================= */
@keyframes heroZoom{
  from{
    transform: scale(1);
  }
  to{
    transform: scale(1.08);
  }
}


@keyframes marquee{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-25%);
  }
}


@keyframes artistNeonBlink{
  0%{
    border-color: rgba(56,216,255,.75);
    box-shadow:
      0 0 8px rgba(56,216,255,.35),
      0 0 18px rgba(56,216,255,.30),
      0 0 28px rgba(255,62,191,.18),
      0 18px 34px rgba(0,0,0,.22);
  }
  50%{
    border-color: rgba(255,62,191,.95);
    box-shadow:
      0 0 12px rgba(255,62,191,.55),
      0 0 24px rgba(255,62,191,.48),
      0 0 42px rgba(56,216,255,.32),
      0 20px 38px rgba(0,0,0,.26);
  }
  100%{
    border-color: rgba(56,216,255,1);
    box-shadow:
      0 0 14px rgba(56,216,255,.70),
      0 0 30px rgba(56,216,255,.58),
      0 0 56px rgba(255,62,191,.34),
      0 22px 42px rgba(0,0,0,.30);
  }
}


@keyframes neonTextBlink{
  0%{
    color: rgba(247,248,252,.92);
    text-shadow:
      0 0 6px rgba(56,216,255,.25),
      0 0 12px rgba(56,216,255,.18),
      0 0 18px rgba(255,62,191,.12);
  }
  50%{
    color: rgba(255,255,255,1);
    text-shadow:
      0 0 10px rgba(255,62,191,.35),
      0 0 20px rgba(255,62,191,.28),
      0 0 36px rgba(56,216,255,.22);
  }
  100%{
    color: rgba(247,248,252,.96);
    text-shadow:
      0 0 8px rgba(56,216,255,.30),
      0 0 16px rgba(56,216,255,.22),
      0 0 28px rgba(255,62,191,.16);
  }
}



@keyframes menuToggleNeonPulse{
  0%{
    box-shadow:
      0 0 8px rgba(56,216,255,.16),
      0 0 18px rgba(255,62,191,.08),
      inset 0 0 0 1px rgba(255,255,255,.04);
  }
  100%{
    box-shadow:
      0 0 12px rgba(56,216,255,.24),
      0 0 26px rgba(255,62,191,.14),
      inset 0 0 0 1px rgba(255,255,255,.05);
  }
}


@keyframes menuToggleFlash{
  0%{
    box-shadow:
      0 0 0 rgba(56,216,255,0),
      0 0 0 rgba(255,62,191,0);
  }
  100%{
    box-shadow:
      0 0 60px rgba(56,216,255,.55),
      0 0 90px rgba(255,62,191,.45);
  }
}


@keyframes menuPanelFlash{
  0%{
    box-shadow:
      -24px 0 60px rgba(0,0,0,.32),
      0 0 0 rgba(56,216,255,0),
      0 0 0 rgba(255,62,191,0);
  }
  100%{
    box-shadow:
      -24px 0 60px rgba(0,0,0,.32),
      0 0 42px rgba(56,216,255,.18),
      0 0 72px rgba(255,62,191,.14);
  }
}


@keyframes artistModalNeonBlink{
  0%{
    border-color: rgba(56,216,255,.70);
    box-shadow:
      0 0 10px rgba(56,216,255,.22),
      0 0 20px rgba(56,216,255,.16),
      0 0 34px rgba(255,62,191,.10),
      0 24px 80px rgba(0,0,0,.40);
  }
  50%{
    border-color: rgba(255,62,191,.82);
    box-shadow:
      0 0 12px rgba(255,62,191,.26),
      0 0 24px rgba(255,62,191,.20),
      0 0 42px rgba(56,216,255,.14),
      0 24px 80px rgba(0,0,0,.42);
  }
  100%{
    border-color: rgba(56,216,255,.96);
    box-shadow:
      0 0 14px rgba(56,216,255,.30),
      0 0 28px rgba(56,216,255,.22),
      0 0 54px rgba(255,62,191,.16),
      0 24px 80px rgba(0,0,0,.44);
  }
}


@keyframes artistModalFlash{
  0%{
    box-shadow:
      0 0 0 rgba(56,216,255,0),
      0 0 0 rgba(255,62,191,0);
  }
  100%{
    box-shadow:
      0 0 60px rgba(56,216,255,.55),
      0 0 100px rgba(255,62,191,.45);
  }
}


@keyframes navPulse{
  0%{
    transform: scale(1);
    opacity: .85;
    box-shadow:
      0 0 6px rgba(255,77,109,.45),
      0 0 12px rgba(255,77,109,.28);
  }
  100%{
    transform: scale(1.4);
    opacity: 1;
    box-shadow:
      0 0 10px rgba(255,77,109,.75),
      0 0 20px rgba(255,77,109,.55);
  }
}


@keyframes navFloat{
  0%{
    transform: translateY(-50%) translateY(0) scale(1);
  }
  60%{
    transform: translateY(-50%) translateY(-10px) scale(1.08);
  }
  100%{
    transform: translateY(-50%) translateY(-6px) scale(1.03);
  }
}



@keyframes introStripBgPulse{
  0%{
    filter: saturate(1) brightness(1);
    box-shadow:
      0 0 18px rgba(56,216,255,.16),
      0 0 34px rgba(255,62,191,.14);
  }
  50%{
    filter: saturate(1.18) brightness(1.08);
    box-shadow:
      0 0 28px rgba(56,216,255,.28),
      0 0 56px rgba(255,62,191,.22),
      0 0 88px rgba(255,216,77,.12);
  }
  100%{
    filter: saturate(1.28) brightness(1.14);
    box-shadow:
      0 0 34px rgba(56,216,255,.34),
      0 0 72px rgba(255,62,191,.28),
      0 0 110px rgba(127,92,255,.18);
  }
}

@keyframes introStripFlash{
  0%, 100%{
    opacity: .42;
    transform: scaleX(1);
  }
  35%{
    opacity: .92;
    transform: scaleX(1.02);
  }
  55%{
    opacity: .58;
    transform: scaleX(1);
  }
  75%{
    opacity: 1;
    transform: scaleX(1.01);
  }
}

@keyframes introStripLineBlink{
  0%{
    opacity: .58;
    filter: brightness(1);
  }
  100%{
    opacity: 1;
    filter: brightness(1.35);
  }
}

@keyframes introStripTextBlink{
  0%{
    opacity: .88;
    text-shadow:
      0 0 6px rgba(56,216,255,.24),
      0 0 12px rgba(255,62,191,.16),
      0 0 18px rgba(255,255,255,.10);
  }
  100%{
    opacity: 1;
    text-shadow:
      0 0 10px rgba(56,216,255,.42),
      0 0 20px rgba(255,62,191,.28),
      0 0 34px rgba(255,255,255,.18);
  }
}

@keyframes introStripFlashIn{
  0%{
    opacity: 0;
    transform: scaleY(.4);
    filter: brightness(3) saturate(1.6);
  }
  40%{
    transform: scaleY(1.12);
    filter: brightness(2.4);
  }
  70%{
    transform: scaleY(.96);
    filter: brightness(1.4);
  }
  100%{
    transform: scaleY(1);
    filter: brightness(1);
  }
}


@keyframes artistNameMarquee{
  from{
    transform: translateX(0);
  }
  to{
    transform: translateX(-50%);
  }
}

@keyframes artistNameMarqueeReverse{
  from{
    transform: translateX(-50%);
  }
  to{
    transform: translateX(0);
  }
}

@keyframes artistNameBlink{
  0%{
    opacity: .72;
    text-shadow:
      0 0 6px rgba(56,216,255,.24),
      0 0 12px rgba(255,62,191,.16),
      0 0 20px rgba(255,255,255,.08);
  }
  100%{
    opacity: 1;
    text-shadow:
      0 0 10px rgba(56,216,255,.42),
      0 0 22px rgba(255,62,191,.28),
      0 0 36px rgba(255,255,255,.16);
  }
}

@keyframes beatPulseLight{
  0%{
    transform: scale(1);
    opacity: .26;
  }

  20%{
    transform: scale(1.15);
    opacity: .34;
  }

  35%{
    transform: scale(1.15); /* ← 一瞬止める */
  }

  60%{
    transform: scale(.96);
    opacity: .22;
  }

  100%{
    transform: scale(1.05);
    opacity: .28;
  }
}

@keyframes beatPulseSmoke{
  0%{
    transform: scale(1) translate3d(0,0,0);
    opacity: .20;
  }
  30%{
    transform: scale(1.22) translate3d(8px, -6px, 0);
    opacity: .30;
  }
  60%{
    transform: scale(.94) translate3d(-6px, 6px, 0);
    opacity: .18;
  }
  100%{
    transform: scale(1.06) translate3d(4px, -2px, 0);
    opacity: .24;
  }
}

@keyframes cardPulse{
  0%, 100%{
    transform: translateY(0);
  }
  50%{
    transform: translateY(-2px);
  }
}


@keyframes fireworksBurst{
  0%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(.35) rotate(var(--burst-rotate));
  }
  12%{
    opacity: .95;
    transform: translate(-50%, -50%) scale(.62) rotate(var(--burst-rotate));
  }
  55%{
    opacity: 1;
    transform: translate(-50%, -50%) scale(1) rotate(var(--burst-rotate));
  }
  100%{
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.28) rotate(var(--burst-rotate));
  }
}






body.is-menu-open{
  overflow: hidden;
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 1080px){
  .lineup__grid,
  .experience__grid,
  .ticket-box{
    grid-template-columns: 1fr;
  }

  .hero__meta{
    grid-template-columns: 1fr;
    max-width: 420px;
  }

  .site-nav{
    gap: 14px;
  }

  .site-nav a:not(.btn){
    font-size: 13px;
  }
    
    
.artist-modal__viewport{
  align-items: center;
  overflow: hidden;
  padding: 72px 0 32px;
  -webkit-overflow-scrolling: auto;
  overscroll-behavior: none;
}
    
    
    
  .artist-modal__track{
    grid-template-columns: .82fr 1.36fr .82fr;
    gap: 16px;
  }

  .artist-slide__inner{
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .artist-slide__media--main{
    aspect-ratio: 4 / 5;
    min-height: auto;
  }

  .artist-slide--prev{
    transform: translateX(-14%);
  }

  .artist-slide--next{
    transform: translateX(14%);
  }    


  .artist-modal__marquee--top{
    top: 36px;
  }

  .artist-modal__marquee--bottom{
    bottom: 18px;
    top: auto;
  }
    
    
}

@media (max-width: 820px){
  .site-header__inner{
    min-height: 70px;
  }

  .site-nav{
    display: none;
  }
    
    
  .menu-toggle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}  
    

  .hero{
    min-height: auto;
  }

  .hero__content{
    padding-block: 78px 118px;
  }

  .hero::after{
    height: 120px;
  }

  .artist-card{
    grid-template-columns: 96px minmax(0, 1fr);
  }

  .artist-card__name{
    font-size: 20px;
  }

  .section{
    padding: 88px 0;
  }

  .experience{
    min-height: auto;
  }
    
    
  .artist-modal__viewport{
    padding: 72px 0 28px;
  }

  .artist-modal__track{
    grid-template-columns: 18vw minmax(0, 1fr) 18vw;
    gap: 10px;
  }

  .artist-slide--prev{
    transform: translateX(-36%);
    opacity: .34;
  }

  .artist-slide--next{
    transform: translateX(36%);
    opacity: .34;
  }

  .artist-slide__inner{
    padding: 20px;
    border-radius: 24px;
    gap: 18px;
  }

  .artist-slide__name{
    font-size: clamp(28px, 8vw, 42px);
  }

  .artist-slide__genre{
    font-size: 15px;
  }

  .artist-slide__section{
    margin-top: 20px;
  }

  .artist-slide__section p{
    font-size: 15px;
    line-height: 1.85;
  }

  .artist-modal__close{
    top: 14px;
    right: 14px;
    width: 46px;
    height: 46px;
  }

  .artist-modal__nav{
    width: 46px;
    height: 46px;

    border-color: rgba(255,62,191,.74);
    background:
      linear-gradient(135deg, rgba(255,62,191,.28), rgba(255,110,110,.20)),
      rgba(255,255,255,.10);
    box-shadow:
      0 0 12px rgba(255,62,191,.28),
      0 0 26px rgba(255,62,191,.18);

    animation: navFloat 2.4s ease-in-out infinite alternate;
}
    
    
    
.artist-modal__nav--prev{
  left: clamp(10px, 8vw, 28px);
}

.artist-modal__nav--next{
  right: clamp(10px, 8vw, 28px);
}
    
    
  .artist-modal__marquee--top{
    top: 28px;
  }

  .artist-modal__marquee--bottom{
    bottom: 14px;
    top: auto;
  }
    
    
}

@media (max-width: 640px){
  .container{
    width: min(var(--container), calc(100% - 24px));
  }

  .hero__title{
    max-width: 100%;
  }

  .hero__lead br,
  .fireworks__lead br,
  .ticket-box__lead br{
    display: none;
  }

  .hero__actions{
    flex-direction: column;
    align-items: stretch;
  }

  .btn{
    width: 100%;
  }

  .day-card{
    padding: 20px;
  }

  .artist-card{
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
  }

  .artist-card__name{
    font-size: 18px;
  }

  .experience-card{
    padding: 22px 18px;
    border-radius: 20px;
  }

  .ticket-box{
    padding: 24px 20px;
    border-radius: 24px;
  }


.artist-modal__viewport{
  display: block;
  width: 100%;
  height: 100dvh;
  padding: 60px 10px 18px;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

.artist-modal__track{
  width: min(100%, 560px);
  margin: 0 auto;
  grid-template-columns: 1fr;
  gap: 0;
}

.artist-slide--prev,
.artist-slide--next{
  display: none;
}

.artist-slide{
  width: 100%;
}

.artist-slide__inner{
  position: relative;
  width: 100%;
  min-height: auto;
  padding: 12px;
  gap: 12px;
  border-radius: 20px;
}

.artist-slide__media--main{
  aspect-ratio: 4 / 5;
  min-height: auto;
  max-height: min(52svh, 420px);
}

  .artist-slide__meta{
    gap: 8px;
    font-size: 11px;
  }

  .artist-slide__inner{
    padding: 16px;
  }

  .artist-slide__meta{
    gap: 8px;
    font-size: 11px;
  }


  .artist-slide__section h4{
    margin-bottom: 8px;
  }


.artist-slide__content{
  display: block;
  min-width: 0;
}

.artist-slide__name{
  font-size: clamp(26px, 8vw, 36px);
  line-height: 1.02;
}

.artist-slide__genre{
  margin-top: 8px;
  font-size: 14px;
}

.artist-slide__section{
  margin-top: 16px;
}

.artist-slide__section p{
  font-size: 14px;
  line-height: 1.75;
}

  .artist-modal__marquee{
    height: 32px;
  }
    
  .artist-modal__marquee--top{
    top: 18px;
  }

  .artist-modal__marquee--bottom{
    bottom: 18px;
    top: auto;
  }

.artist-modal__marquee-item{
  font-size: 16px;
  letter-spacing: .14em;
}    
    

.artist-modal__nav--prev{
  left: clamp(8px, 4vw, 18px);
}

.artist-modal__nav--next{
  right: clamp(8px, 4vw, 18px);
}
    
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}


[data-reveal]{
  opacity: 0;
  transform: translateY(40px);
  transition: all .8s ease;
}

[data-reveal].is-visible{
  opacity: 1;
  transform: translateY(0);
}


.artist-card{
  position: relative;
  overflow: hidden;
}

.artist-card::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      220px circle at var(--x) var(--y),
      rgba(56,216,255,.30),
      rgba(255,62,191,.16) 35%,
      transparent 70%
    );
  opacity: 0;
  transition: opacity .22s ease;
  mix-blend-mode: screen;
}

.artist-card:hover::after{
  opacity: 1;
}


.hero{
  transition: filter .4s ease, opacity .4s ease;
}

.hero__blackout{
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: radial-gradient(circle at 50% 40%, rgba(0,0,0,0) 0%, rgba(0,0,0,.85) 70%, rgba(0,0,0,.95) 100%);
  opacity: 0;
  transition: opacity .35s ease;
}

.hero.is-blackout{
  filter: brightness(0.2) contrast(1.2);
}

.hero.is-blackout .hero__blackout{
  opacity: 1;
}

.hero.is-blackout .hero__content,
.hero.is-blackout .hero__overlay{
  opacity: 0;
  transform: translateY(10px);
}

.hero__content,
.hero__overlay{
  transition: opacity .4s ease, transform .4s ease;
}


.artist-card.is-active{
  border-color: var(--blue);
  box-shadow: 0 0 30px rgba(56,216,255,.25);
  transform: scale(1.02);
}


/* =========================================
   TICKET PAGE
========================================= */
.page-ticket{
  background:
    radial-gradient(1200px 700px at 10% 0%, rgba(127,92,255,.14), transparent 60%),
    radial-gradient(900px 520px at 100% 10%, rgba(56,216,255,.12), transparent 58%),
    linear-gradient(180deg, #04050a 0%, #070910 100%);
}

.ticket-page-hero{
  position: relative;
  overflow: clip;
  padding: 120px 0 70px;
}

.ticket-page-hero__bg{
  position: absolute;
  inset: 0;
  background:
    radial-gradient(700px 300px at 20% 20%, rgba(56,216,255,.10), transparent 60%),
    radial-gradient(760px 320px at 80% 10%, rgba(255,62,191,.10), transparent 60%);
  pointer-events: none;
}

.ticket-page-hero__content{
  position: relative;
  z-index: 1;
}

.ticket-page-hero__eyebrow{
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .28em;
  color: var(--blue);
}

.ticket-page-hero__title{
  margin: 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: clamp(42px, 7vw, 86px);
  line-height: .96;
  font-weight: 900;
  letter-spacing: -.05em;
}

.ticket-page-hero__lead{
  margin: 22px 0 0;
  max-width: 760px;
  color: rgba(247,248,252,.82);
  font-size: 17px;
}

.ticket-purchase{
  padding-top: 36px;
  padding-bottom: 120px;
}

.ticket-purchase__layout{
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
  gap: 28px;
  align-items: start;
}

.ticket-purchase__main,
.ticket-summary{
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 32px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(14px);
}

.ticket-purchase__main{
  padding: 32px;
}

.ticket-summary{
  position: sticky;
  top: 100px;
  padding: 28px;
}

.ticket-purchase__head{
  margin-bottom: 28px;
}

.ticket-form{
  display: grid;
  gap: 24px;
}

.ticket-form__group{
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 14px;
}

.ticket-form__legend{
  margin-bottom: 4px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .22em;
  color: var(--yellow);
  text-transform: uppercase;
}

.ticket-option{
  display: block;
  cursor: pointer;
}

.ticket-option input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ticket-option__body{
  display: grid;
  gap: 6px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 22px;
  background: rgba(255,255,255,.05);
  transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, background-color .22s ease;
}

.ticket-option__title{
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 22px;
  font-weight: 900;
}

.ticket-option__meta{
  color: rgba(247,248,252,.70);
  font-size: 14px;
}

.ticket-option__price{
  color: var(--blue);
  font-weight: 800;
  font-size: 18px;
}

.ticket-option input:checked + .ticket-option__body{
  border-color: rgba(56,216,255,.82);
  background:
    linear-gradient(135deg, rgba(56,216,255,.12), rgba(255,62,191,.08)),
    rgba(255,255,255,.06);
  box-shadow:
    0 0 12px rgba(56,216,255,.22),
    0 0 24px rgba(255,62,191,.12);
  transform: translateY(-2px);
}

.ticket-chip{
  display: inline-flex;
  margin-right: 10px;
  cursor: pointer;
}

.ticket-chip input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ticket-chip span{
  display: inline-flex;
  align-items: center;
  min-height: 48px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  transition: all .22s ease;
}

.ticket-chip input:checked + span{
  border-color: rgba(56,216,255,.78);
  background:
    linear-gradient(135deg, rgba(56,216,255,.16), rgba(255,62,191,.10)),
    rgba(255,255,255,.08);
  box-shadow:
    0 0 10px rgba(56,216,255,.20),
    0 0 22px rgba(255,62,191,.12);
}

.ticket-qty{
  display: inline-grid;
  grid-template-columns: 54px 110px 54px;
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: rgba(255,255,255,.05);
  width: max-content;
}

.ticket-qty__btn{
  min-height: 56px;
  border: 0;
  color: var(--text);
  background: transparent;
  cursor: pointer;
}

.ticket-qty__input{
  min-height: 56px;
  border: 0;
  text-align: center;
  color: var(--text);
  background: transparent;
  appearance: textfield;
}

.ticket-qty__input::-webkit-outer-spin-button,
.ticket-qty__input::-webkit-inner-spin-button{
  appearance: none;
  margin: 0;
}

.ticket-form__actions{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 10px;
}

.ticket-summary__eyebrow{
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .24em;
  color: var(--blue);
}

.ticket-summary__title{
  margin: 0 0 22px;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 32px;
  font-weight: 900;
}

.ticket-summary__list{
  display: grid;
  gap: 14px;
  margin: 0;
}

.ticket-summary__row{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ticket-summary__row dt{
  color: rgba(247,248,252,.68);
}

.ticket-summary__row dd{
  margin: 0;
  text-align: right;
  font-weight: 700;
}

.ticket-summary__total{
  display: flex;
  justify-content: space-between;
  align-items: end;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.14);
}

.ticket-summary__total span{
  font-size: 12px;
  letter-spacing: .22em;
  color: var(--yellow);
  font-weight: 800;
}

.ticket-summary__total strong{
  font-family: "Montserrat", sans-serif;
  font-size: clamp(28px, 4vw, 42px);
  line-height: 1;
}

.ticket-summary__note{
  margin: 18px 0 0;
  color: rgba(247,248,252,.64);
  font-size: 13px;
}

@media (max-width: 980px){
  .ticket-purchase__layout{
    grid-template-columns: 1fr;
  }

  .ticket-summary{
    position: static;
  }
}

@media (max-width: 640px){
  .ticket-purchase__main,
  .ticket-summary{
    padding: 22px;
    border-radius: 24px;
  }

  .ticket-option__title{
    font-size: 18px;
  }

  .ticket-form__actions{
    flex-direction: column;
  }

  .ticket-form__actions .btn{
    width: 100%;
  }
}



.ticket-preview{
  display: grid;
  gap: 10px;
  padding: 18px 20px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 20px;
  background: rgba(255,255,255,.04);
}

.ticket-preview__row{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: start;
}

.ticket-preview__row span{
  color: rgba(247,248,252,.68);
  font-size: 14px;
}

.ticket-preview__row strong{
  text-align: right;
}

.ticket-cart{
  display: grid;
  gap: 14px;
}

.ticket-cart__empty{
  margin: 0;
  padding: 18px 20px;
  border: 1px dashed rgba(255,255,255,.14);
  border-radius: 20px;
  color: rgba(247,248,252,.64);
  background: rgba(255,255,255,.03);
}

.ticket-cart__list{
  display: grid;
  gap: 14px;
}

.ticket-cart__item{
  padding: 18px;
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 20px;
  background: rgba(255,255,255,.05);
}

.ticket-cart__item-head{
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 14px;
}

.ticket-cart__item-title{
  margin: 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 900;
}

.ticket-cart__item-meta{
  margin: 6px 0 0;
  color: rgba(247,248,252,.68);
  font-size: 14px;
}

.ticket-cart__remove{
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 14px;
  background: rgba(255,255,255,.05);
  color: var(--text);
  cursor: pointer;
}

.ticket-cart__item-list{
  display: grid;
  gap: 10px;
  margin: 0;
}

.ticket-cart__item-list div{
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.ticket-cart__item-list dt{
  color: rgba(247,248,252,.68);
}

.ticket-cart__item-list dd{
  margin: 0;
  font-weight: 700;
  text-align: right;
}

.ticket-summary__actions{
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.ticket-summary__actions .btn{
  width: 100%;
}


.ticket-builder{
  display: grid;
  gap: 18px;
}

.ticket-entry{
  padding: 22px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.04));
  box-shadow: var(--shadow-md);
}

.ticket-entry__head{
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 16px;
  margin-bottom: 16px;
}

.ticket-entry__title{
  margin: 0;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  font-size: 24px;
  font-weight: 900;
}

.ticket-entry__meta{
  margin: 6px 0 0;
  color: rgba(247,248,252,.70);
  font-size: 14px;
}

.ticket-entry__price{
  margin: 0;
  color: var(--blue);
  font-family: "Montserrat", sans-serif;
  font-size: 22px;
  font-weight: 900;
  white-space: nowrap;
}

.ticket-entry__controls{
  display: grid;
  grid-template-columns: 1.25fr auto auto;
  gap: 12px;
  align-items: center;
}

.ticket-entry__controls--twodays{
  grid-template-columns: auto auto;
  justify-content: start;
}

.ticket-entry__days{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ticket-mini-chip{
  display: block;
  cursor: pointer;
}

.ticket-mini-chip input{
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.ticket-mini-chip span{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 0 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05);
  font-weight: 800;
  transition: all .22s ease;
}

.ticket-mini-chip input:checked + span{
  border-color: rgba(56,216,255,.82);
  background:
    linear-gradient(135deg, rgba(56,216,255,.16), rgba(255,62,191,.10)),
    rgba(255,255,255,.08);
  box-shadow:
    0 0 10px rgba(56,216,255,.20),
    0 0 22px rgba(255,62,191,.12);
}

.ticket-qty--compact{
  grid-template-columns: 46px 78px 46px;
}

.ticket-entry__add{
  min-width: 180px;
  width: auto;
  white-space: nowrap;
}

@media (max-width: 820px){
  .ticket-entry__controls{
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .ticket-entry__days{
    grid-column: 1 / -1;
  }

  .ticket-entry__add{
    min-width: 0;
    width: 100%;
  }

  .ticket-entry__controls--twodays{
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

@media (max-width: 640px){
  .ticket-entry{
    padding: 18px;
    border-radius: 20px;
  }

  .ticket-entry__head{
    flex-direction: column;
    gap: 8px;
  }

  .ticket-entry__price{
    font-size: 20px;
  }

  .ticket-entry__controls{
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .ticket-entry__days{
    grid-column: 1 / -1;
  }

  .ticket-qty--compact{
    width: 100%;
    grid-template-columns: 42px 1fr 42px;
  }

  .ticket-entry__add{
    grid-column: span 1;
  }

  .ticket-entry__controls--twodays{
    grid-template-columns: 1fr 1fr;
  }
}


.ticket-cart__item{
  position: relative;
  overflow: hidden;
  animation: ticketCartNeonBlink 1.4s ease-in-out infinite alternate;
}

.ticket-cart__item::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    radial-gradient(320px 120px at 0% 0%, rgba(56,216,255,.12), transparent 60%),
    radial-gradient(320px 120px at 100% 100%, rgba(255,62,191,.10), transparent 60%);
  opacity: .9;
}

.ticket-cart__item::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px rgba(56,216,255,.28),
    0 0 10px rgba(56,216,255,.14),
    0 0 22px rgba(255,62,191,.10);
}

.ticket-summary__actions .btn--primary{
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    border-color .25s ease,
    color .25s ease,
    opacity .25s ease;
}

.ticket-summary__actions .btn--primary.is-ready{
  color: #09101d;
  background: linear-gradient(135deg, #38d8ff 0%, #ff3ebf 55%, #ffd84d 100%);
  box-shadow:
    0 0 14px rgba(56,216,255,.34),
    0 0 30px rgba(56,216,255,.24),
    0 0 56px rgba(255,62,191,.22),
    0 14px 34px rgba(0,0,0,.28);
  animation: ticketReadyGlow 1s ease-in-out infinite alternate;
}

@keyframes ticketCartNeonBlink{
  0%{
    border-color: rgba(56,216,255,.42);
    box-shadow:
      0 0 8px rgba(56,216,255,.14),
      0 0 18px rgba(255,62,191,.08);
  }
  50%{
    border-color: rgba(255,62,191,.58);
    box-shadow:
      0 0 12px rgba(255,62,191,.18),
      0 0 24px rgba(255,62,191,.12),
      0 0 36px rgba(56,216,255,.08);
  }
  100%{
    border-color: rgba(56,216,255,.72);
    box-shadow:
      0 0 14px rgba(56,216,255,.22),
      0 0 28px rgba(56,216,255,.16),
      0 0 42px rgba(255,62,191,.12);
  }
}

@keyframes ticketReadyGlow{
  0%{
    filter: saturate(1) brightness(1);
    box-shadow:
      0 0 12px rgba(56,216,255,.28),
      0 0 24px rgba(255,62,191,.18),
      0 12px 28px rgba(0,0,0,.24);
  }
  100%{
    filter: saturate(1.18) brightness(1.08);
    box-shadow:
      0 0 18px rgba(56,216,255,.42),
      0 0 36px rgba(255,62,191,.28),
      0 0 62px rgba(255,216,77,.12),
      0 16px 34px rgba(0,0,0,.30);
  }
}