/* HOLIDAYS v1.4 — lightweight weekend-festival world. */
:root {
  --holiday-purple: #9167e8;
  --holiday-red: #ff5e67;
  --holiday-pink: #ff83b8;
  --holiday-blue: #66c4ff;
  --holiday-gold: #ffdb62;
  --holiday-paper: #fffdf7;
  --font-jp-round: "Hiragino Maru Gothic ProN", "Hiragino Maru Gothic Pro", "Yu Gothic", "Meiryo", sans-serif;
  --font-latin-pop: "Arial Rounded MT Bold", "Avenir Next", "Trebuchet MS", sans-serif;
  --font-latin-editorial: Georgia, "Times New Roman", "Yu Mincho", serif;
}

body {
  background:
    radial-gradient(circle at 8% 12%, rgba(255,219,98,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 89% 18%, rgba(255,94,158,.13) 0 2px, transparent 3px),
    #fffaf1;
  background-size: 46px 46px, 61px 61px, auto;
  font-family: var(--font-jp-round);
}

body::before {
  background: linear-gradient(90deg, var(--holiday-purple), var(--holiday-red), var(--holiday-pink), var(--holiday-blue), var(--holiday-purple));
  content: "";
  height: 5px;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 99;
}

.nav-links > a,
.hero-kicker,
.button,
.ticker,
.eyebrow,
.section-heading h2,
.calendar-top,
.weekday-row,
.calendar-legend,
.member-info > span,
.member-info > p,
.member-info a,
.modal-kicker,
.next-live-sticker,
.upcoming-title span,
.schedule-ticket {
  font-family: var(--font-latin-pop);
}

.section-heading h2 em,
.calendar-top strong { font-family: var(--font-latin-editorial); }

.site-header::after {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.42), transparent);
  bottom: 0;
  content: "";
  height: 1px;
  left: 3vw;
  position: absolute;
  right: 3vw;
}

.header-logo { filter: drop-shadow(0 3px 0 rgba(255,255,255,.78)) drop-shadow(0 8px 16px rgba(18,28,80,.18)); }

.hero::after {
  background: linear-gradient(90deg, var(--holiday-purple) 0 25%, var(--holiday-red) 25% 50%, var(--holiday-pink) 50% 75%, var(--holiday-blue) 75%);
  bottom: 0;
  content: "";
  height: 8px;
  left: 0;
  position: absolute;
  right: 0;
  z-index: 8;
}

.hero-content::before {
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 38px;
  content: "";
  inset: -31px -38px;
  pointer-events: none;
  position: absolute;
  transform: rotate(-1deg);
  z-index: -1;
}
.hero-kicker span { letter-spacing: .24em; }
.hero h1 { font-family: var(--font-jp-round); font-weight: 900; }
.hero-copy { font-family: var(--font-jp-round); }
.ticker { box-shadow: 0 9px 0 rgba(22,38,79,.08); position: relative; z-index: 10; }

.section-heading { position: relative; }
.section-heading::before {
  color: rgba(255,80,154,.12);
  content: "✦";
  font-size: 96px;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: -28px;
  transform: translateX(-50%) rotate(12deg);
  z-index: -1;
}
.section-heading h2 { text-shadow: 0 4px 0 rgba(255,255,255,.7); }
.section-heading h2 em { font-style: italic; }

.about {
  background:
    linear-gradient(115deg, transparent 0 74%, rgba(255,132,184,.08) 74% 75%, transparent 75% 100%),
    radial-gradient(circle at 18% 24%, rgba(255,214,83,.23) 0 3px, transparent 4px),
    radial-gradient(circle at 80% 72%, rgba(115,204,255,.14) 0 2px, transparent 3px),
    #fffaf1;
  background-size: 56px 56px, 48px 48px, 64px 64px, auto;
  overflow: hidden;
}
.about::after {
  color: rgba(255,79,154,.055);
  content: "WEEKEND";
  font-family: var(--font-latin-pop);
  font-size: clamp(100px, 20vw, 300px);
  font-weight: 900;
  left: -3vw;
  letter-spacing: -.08em;
  line-height: .8;
  position: absolute;
  top: 43%;
  transform: rotate(-4deg);
  white-space: nowrap;
}
.about > * { position: relative; z-index: 2; }
.photo-frame { box-shadow: 12px 13px 0 var(--pink), 24px 26px 0 rgba(255,218,94,.64); }
.photo-frame::before { border: 2px dashed rgba(22,38,79,.23); content: ""; inset: 8px; pointer-events: none; position: absolute; }

/* The calendar sits in an illustrated festival sky with no additional images. */
.schedule {
  background: linear-gradient(180deg, rgba(103,122,236,.9) 0%, rgba(107,204,255,.9) 28%, rgba(255,194,217,.8) 61%, #fff3d8 100%), #84d8ff;
  border-color: var(--navy);
  isolation: isolate;
  overflow: hidden;
}
.schedule::before {
  animation: calendar-sky-drift 26s linear infinite;
  background:
    radial-gradient(circle at 8% 20%, rgba(255,255,255,.95) 0 2px, transparent 3px),
    radial-gradient(circle at 78% 7%, rgba(255,231,116,.95) 0 3px, transparent 4px),
    radial-gradient(circle at 30% 70%, rgba(255,255,255,.78) 0 2px, transparent 3px),
    radial-gradient(circle at 94% 54%, rgba(255,255,255,.9) 0 2px, transparent 3px);
  background-size: 67px 67px, 103px 103px, 83px 83px, 91px 91px;
  inset: -12%;
  opacity: .86;
}
.schedule::after {
  background:
    radial-gradient(ellipse at 12% 0%, #fff 0 12%, transparent 12.5%),
    radial-gradient(ellipse at 34% 8%, #fff 0 14%, transparent 14.5%),
    radial-gradient(ellipse at 65% 0%, #fff 0 13%, transparent 13.5%),
    radial-gradient(ellipse at 91% 10%, #fff 0 15%, transparent 15.5%),
    linear-gradient(#fff, #fff8e9);
  border-top: 3px solid rgba(22,38,79,.15);
  bottom: -110px;
  height: 300px;
  left: -8%;
  opacity: .9;
  transform: rotate(-1.2deg);
  width: 116%;
}
.schedule .section-heading { color: white; text-shadow: 0 3px 0 rgba(25,39,98,.22); }
.schedule .section-heading h2 { color: white; text-shadow: 4px 5px 0 rgba(22,38,79,.28); }
.schedule .section-heading h2 em { color: var(--holiday-gold); }
.schedule .section-heading .eyebrow { color: white; }
.schedule .section-heading::before { color: rgba(255,255,255,.16); }
.schedule .section-heading::after { box-shadow: 4px 4px 0 var(--navy); }

.schedule-horizon {
  height: 510px;
  left: 50%;
  pointer-events: none;
  position: absolute !important;
  top: 235px;
  transform: translateX(-50%);
  width: min(1300px, 120vw);
  z-index: 1 !important;
}
.schedule-horizon::before,
.schedule-horizon::after { border: 2px solid rgba(255,255,255,.45); border-radius: 50%; content: ""; left: 50%; position: absolute; transform: translateX(-50%); }
.schedule-horizon::before { height: 470px; top: 70px; width: 960px; }
.schedule-horizon::after { height: 350px; top: 125px; width: 720px; }
.schedule-horizon i {
  background: linear-gradient(180deg, rgba(255,255,255,.62), transparent);
  clip-path: polygon(48% 0, 52% 0, 100% 100%, 0 100%);
  height: 460px;
  left: 50%;
  opacity: .2;
  position: absolute;
  top: 0;
  transform-origin: 50% 100%;
  width: 210px;
}
.schedule-horizon i:nth-child(1) { transform: translateX(-50%) rotate(-39deg); }
.schedule-horizon i:nth-child(2) { transform: translateX(-50%) rotate(-13deg); }
.schedule-horizon i:nth-child(3) { transform: translateX(-50%) rotate(13deg); }
.schedule-horizon i:nth-child(4) { transform: translateX(-50%) rotate(39deg); }

.schedule-ticket {
  background: var(--holiday-paper);
  border: 3px solid var(--navy);
  box-shadow: 7px 8px 0 rgba(22,38,79,.18);
  color: var(--navy);
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 24px 16px 34px;
  position: absolute !important;
  z-index: 2 !important;
}
.schedule-ticket::before { border-left: 2px dashed rgba(22,38,79,.3); content: ""; inset: 7px auto 7px 18px; position: absolute; }
.schedule-ticket span { color: var(--pink); font-size: 7px; letter-spacing: .22em; }
.schedule-ticket strong { font-size: 16px; letter-spacing: .08em; }
.ticket-sat { animation: ticket-float-a 5.2s ease-in-out infinite; left: 3vw; top: 345px; transform: rotate(-8deg); }
.ticket-sun { animation: ticket-float-b 5.8s ease-in-out infinite; right: 3vw; top: 495px; transform: rotate(7deg); }
.schedule-sun, .schedule-cloud, .schedule-starfield { z-index: 2 !important; }

.calendar-scene { filter: drop-shadow(0 36px 46px rgba(31,37,91,.2)); margin-top: 20px; padding: 96px 52px 110px; z-index: 6 !important; }
.calendar-scene::before,
.calendar-scene::after { height: 78%; top: 11%; width: calc(96% - 104px); }
.calendar-scene::before { left: 3%; }
.calendar-scene::after { right: 3%; }
.calendar-scene .calendar-shell { position: relative; z-index: 5; }

.calendar-mascot {
  filter: drop-shadow(0 9px 0 rgba(22,38,79,.2)) drop-shadow(0 18px 20px rgba(22,38,79,.13));
  height: 205px;
  width: 205px;
  z-index: 7;
}
.calendar-mascot-mikoto { animation: mascot-peek-left 4.6s -.6s ease-in-out infinite; left: -26px; top: 0; transform: rotate(-7deg); }
.calendar-mascot-eru { animation: mascot-peek-right 4.9s -.1s ease-in-out infinite; left: auto; right: -25px; top: 0; transform: rotate(7deg); }
.calendar-mascot-milk { animation: calendar-bounce-left 4.5s -1.4s ease-in-out infinite; bottom: 4px; left: -33px; top: auto; transform: rotate(-8deg); }
.calendar-mascot-seira { animation: calendar-bounce-right 4.8s -2.1s ease-in-out infinite; bottom: 0; right: -28px; top: auto; transform: rotate(8deg); }

.calendar-shell { border-width: 5px; box-shadow: 0 18px 0 rgba(22,38,79,.13), 0 35px 60px rgba(31,37,91,.19) !important; }
.calendar-shell::before,
.calendar-shell::after { background: var(--holiday-gold); }
.calendar-top { border-bottom: 3px solid var(--navy); }
.calendar-top::after { background: linear-gradient(90deg, var(--holiday-purple), var(--holiday-red), var(--holiday-pink), var(--holiday-blue)); bottom: 0; content: ""; height: 5px; left: 0; position: absolute; right: 0; }
.calendar-day { background-image: radial-gradient(circle at 88% 13%, rgba(255,108,164,.08) 0 2px, transparent 3px); overflow: hidden; }
.calendar-day.has-event::after {
  animation: event-shimmer 3.6s ease-in-out infinite;
  background: linear-gradient(110deg, transparent 20%, rgba(255,255,255,.88) 48%, transparent 76%);
  content: "";
  inset: 0;
  pointer-events: none;
  position: absolute;
  transform: translateX(-130%);
}
.event-pill { position: relative; z-index: 2; }
.event-pill:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }

.upcoming-list { border-color: white; box-shadow: 0 0 0 4px var(--navy), 11px 12px 0 var(--holiday-gold), 0 34px 50px rgba(31,37,91,.18); position: relative; z-index: 6; }
.upcoming-list::before,
.upcoming-list::after { background: var(--holiday-pink); border: 3px solid var(--navy); border-radius: 50%; content: ""; height: 28px; position: absolute; top: 57px; width: 28px; z-index: 4; }
.upcoming-list::before { left: -18px; }
.upcoming-list::after { right: -18px; }

.members { overflow: hidden; }
.members::before,
.members::after { color: rgba(255,79,154,.055); font-family: var(--font-latin-pop); font-size: clamp(120px, 19vw, 280px); font-weight: 900; line-height: .8; position: absolute; white-space: nowrap; }
.members::before { content: "4 COLORS"; left: -4vw; top: 12%; transform: rotate(-3deg); }
.members::after { bottom: 4%; content: "ONE HOLIDAY"; right: -4vw; transform: rotate(2deg); }
.members > * { position: relative; z-index: 2; }
.member-card { --member-accent: var(--pink); backdrop-filter: blur(5px); box-shadow: 8px 9px 0 var(--member-accent), 0 23px 38px rgba(37,31,73,.11); }
.member-purple { --member-accent: #8e62db; }
.member-red { --member-accent: #f04c55; }
.member-pink { --member-accent: #ff83b5; }
.member-blue { --member-accent: #4a90e2; }
.member-card::after { border: 2px dashed var(--member-accent); border-radius: 50%; content: ""; height: 240px; left: 50%; opacity: .42; position: absolute; top: 31px; transform: translateX(-50%); width: 240px; z-index: 0; }

.movie { isolation: isolate; }
.movie::after { animation: movie-light-sweep 9s ease-in-out infinite; background: linear-gradient(100deg, transparent 31%, rgba(255,255,255,.23) 47%, transparent 63%); content: ""; inset: -20%; pointer-events: none; position: absolute; transform: translateX(-70%) rotate(-8deg); z-index: 0; }
.movie > * { position: relative; z-index: 2; }
.movie-copy h2 { font-family: var(--font-jp-round); }
.movie-copy h2 em { font-family: var(--font-latin-pop); }
.phone-stage::before { animation: phone-orbit 12s linear infinite; border: 2px dashed rgba(255,255,255,.55); border-radius: 50%; content: ""; height: 430px; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 430px; }

.debut-cta::before { animation: cta-rays 36s linear infinite; background: repeating-conic-gradient(from 0deg, rgba(255,218,90,.16) 0 8deg, transparent 8deg 20deg); border-radius: 50%; content: ""; height: 1100px; left: 50%; position: absolute; top: 50%; transform: translate(-50%,-50%); width: 1100px; }
.cta-card { backdrop-filter: blur(8px); }
.cta-card h2 { font-family: var(--font-jp-round); }
footer { border-top: 8px solid transparent; border-image: linear-gradient(90deg, var(--holiday-purple), var(--holiday-red), var(--holiday-pink), var(--holiday-blue)) 1; }

@keyframes calendar-sky-drift { to { transform: translate3d(6%, -2%, 0); } }
@keyframes ticket-float-a { 0%,100% { transform: rotate(-8deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-12px); } }
@keyframes ticket-float-b { 0%,100% { transform: rotate(7deg) translateY(0); } 50% { transform: rotate(3deg) translateY(11px); } }
@keyframes calendar-bounce-left { 0%,100% { transform: rotate(-8deg) translateY(5px); } 50% { transform: rotate(-3deg) translateY(-8px); } }
@keyframes calendar-bounce-right { 0%,100% { transform: rotate(8deg) translateY(5px); } 50% { transform: rotate(3deg) translateY(-8px); } }
@keyframes event-shimmer { 0%,58% { transform: translateX(-130%); } 100% { transform: translateX(130%); } }
@keyframes movie-light-sweep { 0%,25% { transform: translateX(-70%) rotate(-8deg); } 75%,100% { transform: translateX(70%) rotate(-8deg); } }
@keyframes phone-orbit { to { transform: translate(-50%,-50%) rotate(360deg); } }
@keyframes cta-rays { to { transform: translate(-50%,-50%) rotate(360deg); } }

@media (max-width: 980px) {
  .schedule-ticket { opacity: .62; }
  .calendar-scene { padding-left: 40px; padding-right: 40px; }
  .calendar-scene::before,
  .calendar-scene::after { width: calc(96% - 80px); }
}

@media (max-width: 760px) {
  body::before { height: 4px; }
  .site-header::after { left: 16px; right: 16px; }
  .hero {
    align-items: flex-start;
    min-height: max(720px, 100svh);
    padding: clamp(320px, 65vw, 500px) 18px max(48px, env(safe-area-inset-bottom));
  }
  .hero-backdrop {
    animation: none;
    background-color: #172966;
    background-image:
      linear-gradient(180deg, rgba(8,14,51,.02) 0%, rgba(8,14,51,.02) 35vw, rgba(18,31,88,.76) 51vw, #172966 68vw),
      url("../../images/hero-festival.webp");
    background-position: center top, center top;
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% auto;
    transform: none;
    translate: 0 0;
  }
  .hero-backdrop::after { background: linear-gradient(180deg, transparent 0 50vw, rgba(12,21,68,.38) 62vw, transparent 78vw); }
  .hero-content::before { backdrop-filter: blur(2px); border-radius: 26px; inset: -18px -12px; }
  .hero-content { padding-top: 0; }
  .hero h1 { font-size: clamp(25px, 7.5vw, 32px); }
  .hero-copy { letter-spacing: .025em; }
  .section-heading::before { font-size: 70px; top: -16px; }
  .about::after { font-size: 112px; top: 54%; }
  .photo-frame { box-shadow: 8px 9px 0 var(--pink), 16px 18px 0 rgba(255,218,94,.62); }
  .schedule { padding-left: 12px; padding-right: 12px; }
  .schedule .section-heading { padding: 0 8px; }
  .schedule-horizon { height: 410px; top: 210px; }
  .schedule-horizon::before { height: 330px; width: 580px; }
  .schedule-horizon::after { height: 250px; width: 420px; }
  .schedule-horizon i { height: 360px; width: 125px; }
  .schedule-ticket { display: none; }
  .next-live-sticker { top: clamp(194px, 51vw, 388px); }
  .calendar-scene { margin-top: 38px; padding: 64px 17px 75px; }
  .calendar-scene::before,
  .calendar-scene::after { height: 76%; top: 12%; width: calc(100% - 34px); }
  .calendar-scene::before { left: 4px; }
  .calendar-scene::after { right: 4px; }
  .calendar-mascot { height: 104px; width: 104px; }
  .calendar-mascot-mikoto { left: -12px; top: 0; }
  .calendar-mascot-eru { right: -13px; top: 0; }
  .calendar-mascot-milk { bottom: 0; left: -13px; }
  .calendar-mascot-seira { bottom: 0; right: -12px; }
  .calendar-shell { border-width: 4px; }
  .calendar-shell::before,
  .calendar-shell::after { top: 80px; }
  .calendar-top { padding-left: 12px; padding-right: 12px; }
  .calendar-day { min-height: 58px; }
  .upcoming-list { margin-left: 5px; margin-right: 5px; }
  .members::before { font-size: 100px; top: 17%; }
  .members::after { bottom: 7%; font-size: 82px; }
  .member-card::after { height: 220px; top: 25px; width: 220px; }
  .phone-stage::before { height: 330px; width: 330px; }
  .debut-cta::before { height: 760px; width: 760px; }
}

@media (max-width: 390px) {
  .hero { padding-top: clamp(300px, 65vw, 430px); }
  .calendar-mascot { height: 92px; width: 92px; }
  .calendar-mascot-mikoto,
  .calendar-mascot-eru { top: 0; }
  .calendar-day { min-height: 55px; }
}

@media (prefers-reduced-motion: reduce) {
  .schedule::before,
  .schedule-ticket,
  .calendar-mascot,
  .calendar-day.has-event::after,
  .movie::after,
  .phone-stage::before,
  .debut-cta::before { animation: none !important; }
}