/* ================================================================
   THE LIVELY 7DAYS — heisei.css
   平成レトロデコ盛りナイト — 意図的トーン破壊セクション
   ================================================================ */

/* ----------------------------------------------------------------
   Section wrapper
   ---------------------------------------------------------------- */
.section-heisei {
  position: relative;
  background-color: #0a0a1a;
  overflow: hidden;
  padding-bottom: clamp(4rem, 8vw, 8rem);
}

/* Rainbow divider: brand → heisei transition */
.heisei-rainbow {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg,
    #ff0000 0%,
    #ff7f00 16.6%,
    #ffff00 33.3%,
    #00ff00 50%,
    #0000ff 66.6%,
    #8b00ff 100%
  );
}

/* ----------------------------------------------------------------
   Inner layout
   ---------------------------------------------------------------- */
.heisei-inner {
  max-width: 860px;
  margin: 0 auto;
  /* Task#6: top padding reduced — the enlarged key visual (now placed
     above, outside this container) already carries its own top margin. */
  padding: 0 clamp(1.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* ----------------------------------------------------------------
   Badge
   ---------------------------------------------------------------- */
.heisei-badge {
  display: inline-block;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #0a0a1a;
  padding: .38rem 1.25rem;
  margin-bottom: 2.5rem;
  background: linear-gradient(90deg, #FF6EB4, #FFE44D, #5BC8F5, #FF6EB4);
  background-size: 200% 100%;
  animation: badgeShift 4s linear infinite;
  opacity: 0;
  transform: translateX(-20px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1);
}
.heisei-badge.visible { opacity: 1; transform: translateX(0); }
@keyframes badgeShift {
  from { background-position: 0% 50%; }
  to   { background-position: 200% 50%; }
}

/* ----------------------------------------------------------------
   Main title
   Task#6: heisei-title-block / heisei-title / heisei-title-en removed
   from markup — the key visual image (heisei-logo-stamp) already
   contains the event name, so the text heading was a duplicate.
   Rules kept here would be dead CSS, so removed together with the markup.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   Body text
   ---------------------------------------------------------------- */
.heisei-body {
  font-family: 'Noto Serif JP', serif;
  font-size: .875rem;
  font-weight: 300;
  line-height: 2.2;
  color: rgba(255,255,255,.65);
  letter-spacing: .05em;
  max-width: 42ch;
  margin-bottom: 2.5rem;
}

/* ----------------------------------------------------------------
   Food & drink image
   ---------------------------------------------------------------- */
.heisei-fooddrink-img {
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
  border-radius: 4px;
  margin-bottom: 2.5rem;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1);
}
.heisei-fooddrink-img.visible { opacity: 1; transform: translateY(0); }

/* ----------------------------------------------------------------
   Dates grid
   ---------------------------------------------------------------- */
.heisei-dates {
  display: flex;
  width: 100%;
  max-width: 580px;
  border: 1px solid rgba(255,110,180,.25);
  margin-bottom: 2.5rem;
}
.hd-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 1.5rem .75rem;
  border-right: 1px solid rgba(255,110,180,.2);
  opacity: 0;
  transform: scale(.8);
  transition: opacity .6s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1);
}
.hd-item:last-child { border-right: none; }
.hd-item.visible { opacity: 1; transform: scale(1); }
.hd-item:nth-of-type(1) { transition-delay: 0s; }
.hd-item:nth-of-type(2) { transition-delay: .1s; }
.hd-item:nth-of-type(3) { transition-delay: .2s; }
.hd-city {
  font-family: 'Noto Serif JP', serif;
  font-size: .75rem;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  letter-spacing: .1em;
}
.hd-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: #fff;
}
.hd-time {
  font-size: .66rem;
  font-weight: 300;
  letter-spacing: .14em;
  color: rgba(255,110,180,.7);
}

/* ----------------------------------------------------------------
   Artists
   ---------------------------------------------------------------- */
.heisei-artists {
  display: flex;
  gap: 2.5rem;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
}
.ha {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  opacity: 0;
  transform: scale(.8);
  transition: opacity .6s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1);
}
.ha.visible { opacity: 1; transform: scale(1); }
.ha:nth-of-type(1) { transition-delay: 0s; }
.ha:nth-of-type(2) { transition-delay: .1s; }
.ha:nth-of-type(3) { transition-delay: .2s; }
.ha-photo {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: .3rem;
  border: 2px solid rgba(255,110,180,.5);
}
.heisei-logo-stamp {
  /* Task#6: sized to roughly match the Restaurant Dinner section's image
     width (~470px on desktop), since it's now the sole title element in
     this section (duplicate text heading removed). */
  display: block;
  max-width: 480px;
  width: 100%;
  height: auto;
  margin: clamp(3rem, 6vw, 5rem) auto 1.5rem;
  transform: rotate(-4deg) scale(.7);
  opacity: 0;
  transition: opacity .6s ease, transform .7s cubic-bezier(.34, 1.56, .64, 1);
}
.heisei-logo-stamp.visible { opacity: 1; transform: rotate(-4deg) scale(1); }
.ha-role {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .28em;
  color: rgba(255,110,180,.65);
  text-transform: uppercase;
}
.ha-name {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: .04em;
}

/* ----------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------- */
@media (max-width: 600px) {
  .heisei-dates {
    flex-direction: column;
    max-width: 260px;
  }
  .hd-item {
    border-right: none;
    border-bottom: 1px solid rgba(255,110,180,.2);
  }
  .hd-item:last-child { border-bottom: none; }

  .heisei-artists { gap: 1.5rem; }
}

/* ================================================================
   A1: Reduced motion — heisei section specific
   shimmer, badgeShift, titleGrad are handled by style.css global rule;
   this ensures the animated gradient text shows as static fallback.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .heisei-badge,
  .heisei-logo-stamp,
  .hd-item,
  .ha {
    opacity: 1 !important;
  }
  .heisei-badge { transform: translateX(0) !important; }
  .heisei-logo-stamp { transform: rotate(-4deg) scale(1) !important; }
  .hd-item, .ha { transform: scale(1) !important; }
}