@font-face {
  font-family: 'Higure Gothic';
  src: url('../assets/fonts/HigureGothic-Medium.woff2?v=20261028') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+0020-024F, U+02B0-036F, U+037E, U+0384-0385, U+0387, U+1E00-1EFF,
    U+2000-2BFF, U+3000-3004, U+3008-3030, U+3036-3037, U+303D, U+309B-309C,
    U+30A0, U+30FB, U+3200-33FF, U+FE10-FE1F, U+FE30-FE6F, U+FF01-FF9F, U+FFE0-FFEE;
}

@font-face {
  font-family: 'Shippori Gothic B2';
  src: url('../assets/fonts/ShipporiGothicB2-Kanji.woff2?v=20261028') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+4E00-4F5B, U+4F5D-516C, U+516E-518C, U+518E-54C0,
    U+54C2-571E, U+5720-5830, U+5832-5919, U+591B-5926,
    U+5928-5B65, U+5B67-5C54, U+5C56-60C4, U+60C6-629B,
    U+629D-6468, U+646A-65E4, U+65E6-6727, U+6729-672B,
    U+672D-7F8D, U+7F8F-8852, U+8854-8AAC, U+8AAE-8AB1,
    U+8AB3-8FBB, U+8FBD-9077, U+9079-984B, U+984D-9FFF;
}

@font-face {
  font-family: 'Shippori Gothic B2';
  src: url('../assets/fonts/ShipporiGothicB2-Bold.woff2?v=20261028-weekdays') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
  unicode-range: U+20-7E, U+3002, U+3005-3007, U+3033-3035, U+303B, U+3041-3096, U+3099-309A, U+309D-309E,
    U+30A1-30FA, U+30FC-30FE, U+31F0-31FF, U+4F5C, U+516D, U+518D, U+54C1, U+571F, U+5831, U+591A, U+5927,
    U+5B66, U+5C55, U+60C5, U+629C, U+6469, U+65E5, U+6728, U+672C, U+7F8E, U+8853, U+8AAD, U+8AB2, U+8FBC,
    U+9078, U+984C;
}

@font-face {
  font-family: 'Shippori Soon';
  src: url('../assets/fonts/ShipporiGothicB2-Soon.woff2?v=20261028') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: block;
}

:root {
  --page-color: #004097;
  --tape-color: #e51c3f;
  --core-text-color: #004097;
  --grid-color: #6c6f77;
  --text-color: #ffffff;
  --heading-color: #ffffff;
  --credit-color: #ffffff;
  --label-color: #e51c3f;
  --loading-color: #ffffff;
  --top-background: #004097;
  --top-color: #becae8;
  --bottom-background: #004097;
  --bottom-color: #becae8;
  color: var(--text-color);
  background: var(--page-color);
  font-family: 'Higure Gothic', 'Shippori Gothic B2', 'Hiragino Kaku Gothic ProN', sans-serif;
  line-height: 1.15;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

*, ::before, ::after {
  box-sizing: border-box;
}
html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body, h1, p {
  margin: 0;
}
body {
  position: fixed;
  inset: 0;
  height: 100svh;
  height: 100dvh;
  touch-action: pinch-zoom;
}
h1, p {
  font-weight: 400;
}
.page {
  visibility: hidden;
}

.loading {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: grid;
  place-content: center;
  gap: 80px;
  padding: 32px;
  background: var(--page-color);
  text-align: center;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: .04em;
  transition: transform .4s cubic-bezier(.76, 0, .24, 1), visibility 0s .4s;
}
.icon {
  position: relative;
  width: 200px;
  height: 72px;
  margin: auto;
  transform: translateX(-25%) scale(1.4);
}
.strip {
  position: absolute;
  left: 54px;
  bottom: 0;
  width: 92px;
  height: 12px;
  background: var(--loading-color);
  transform-origin: left center;
  animation: strip 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
.roll {
  position: absolute;
  left: 64px;
  bottom: 0;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--loading-color);
  animation: roll 1.8s cubic-bezier(.65, 0, .35, 1) infinite;
}
.roll::before {
  content: '';
  position: absolute;
  top: 18px;
  left: 18px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--page-color);
  will-change: transform;
  animation: core .45s ease-out .2s both;
}

@keyframes roll {
  0%, 100% {
    transform: translateX(0) rotate(0);
  }
  25% {
    transform: translateX(46px) rotate(73.2deg);
  }
  75% {
    transform: translateX(-46px) rotate(-73.2deg);
  }
}
@keyframes strip {
  0%, 100% {
    transform: scaleX(.5);
  }
  25% {
    transform: scaleX(1);
  }
  75% {
    transform: scaleX(0);
  }
}
@keyframes core {
  from {
    transform: translateZ(0) scale(.001);
  }
  to {
    transform: translateZ(0) scale(1);
  }
}
body.ready .loading {
  transform: translate3d(0, -100%, 0);
  visibility: hidden;
  pointer-events: none;
}
body.ready .page {
  visibility: visible;
}
body.ready .icon * {
  animation-play-state: paused;
}
body.ready .roll::before {
  animation: none;
  transform: translateZ(0) scale(1);
  will-change: auto;
}

:root {
  --roll-x: 80%;
  --tape-y: 60%;
  --roll-size: clamp(200px, 30svh, 330px);

  --soon-y: 17%;
  --soon-size: clamp(64px, 4vw, 124px);
  --grid-size: 140px;
  --marquee-height: 30px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --content-left: max(5.5%, calc(var(--safe-left) + 16px));
}

::selection {
  background: var(--tape-color);
}
:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 6px;
}

.page {
  position: relative;
  height: 100%;
  overflow: hidden;
  isolation: isolate;
}

.marquee {
  position: absolute;
  inset: 0 0 auto;
  z-index: 2;
  display: flex;
  align-items: center;
  height: calc(var(--marquee-height) + var(--safe-top));
  padding-top: var(--safe-top);
  overflow: hidden;
  background: var(--top-background);
  color: var(--top-color);
  font-size: 18px;
  line-height: 1.4;
  letter-spacing: .04em;
  white-space: nowrap;
  pointer-events: none;
}
.track {
  display: flex;
  width: max-content;
  animation: marquee 45s linear infinite paused;
}
.group {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 1.5em;
  padding-inline: .75em;
}

.countdown .number {
  display: inline-block;
  min-width: 2.2ch;
  letter-spacing: 0;
}
.countdown .digit {
  display: inline-block;
  width: 1.1ch;
  text-align: center;
}
.countdown .unit {
  display: inline-block;
}
.bottom {
  inset: auto 0 0;
  height: calc(var(--marquee-height) + var(--safe-bottom));
  padding-top: 0;
  padding-bottom: var(--safe-bottom);
  background: var(--bottom-background);
  color: var(--bottom-color);
}
.bottom .track {
  animation-duration: 60s;
  animation-direction: reverse;
}
body.ready .track {
  animation-play-state: running;
}
@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

.scene, .scene canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.scene canvas {
  display: block;
}
.anchor {
  position: absolute;
  left: var(--roll-x);
  top: var(--tape-y);
  width: var(--roll-size);
  height: var(--roll-size);
  transform: translate(-50%, -100%);
  pointer-events: none;
}

h1 {
  position: absolute;
  top: max(var(--soon-y), calc(var(--marquee-height) + var(--safe-top) + 1.5em + 8px));
  left: var(--content-left);
  transform: translateY(-50%);
  color: var(--heading-color);
  font-size: var(--soon-size);
  line-height: 1.2;
  letter-spacing: -.025em;
  white-space: nowrap;
}

#soon {
  font-family: 'Shippori Soon', 'Shippori Gothic B2', sans-serif;
}

.label {
  position: relative;
  isolation: isolate;
  display: inline-block;
  padding-inline: .06em;
  vertical-align: top;
  transform: rotate(var(--tilt, 0deg));
}
.label::before, .year::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--label-color);
  transform: scaleX(0);
  transform-origin: left;
}
.year::before {
  content: none;
}

#soon .label::before {
  inset: .08em .02em .04em -.02em;
}
#soon .text {
  display: inline-block;
  vertical-align: top;
  rotate: var(--text-tilt, -2deg);
  translate: var(--text-x, .18em) calc(var(--text-y, 0em) - .11em);
}

.credit .label::before, .year::before {
  rotate: var(--band-tilt, 0deg);
  translate: var(--band-x, 0em) var(--band-y, 0em);
}

body.entered .label::before, body.entered .year::before {
  transform: scaleX(1);
  transition: transform 1s linear;
}

body.fallback .scene, body.fallback .marquee:not(.bottom) {
  visibility: hidden;
}
body.fallback .label::before, body.fallback .year::before {
  transform: none;
  transition: none;
}

.credit {
  color: var(--credit-color);
  position: absolute;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: last baseline;
  gap: 32px;
  left: var(--content-left);
  right: max(5.5%, calc(var(--safe-right) + 16px));
  bottom: max(7.2%, calc(var(--marquee-height) + var(--safe-bottom) + 16px));
  line-height: 1.35;
  transform: translateZ(0);
}
.university {
  font-size: clamp(18px, 2.15vw, 32px);
}
.subtitle {
  margin-top: 15px;
  font-size: clamp(14px, 1.55vw, 23px);
}
.title {
  margin-top: 29px;
  font-size: clamp(32px, 4.25vw, 64px);
  font-feature-settings: 'palt';
  letter-spacing: .05em;
}
.year {
  margin-left: .04em;
  font-size: 1.1em;
  font-feature-settings: normal;
  letter-spacing: .075em;
}

.details {
  font-size: clamp(16px, 1.7vw, 24px);
  line-height: 1.4;
  text-align: right;
  white-space: nowrap;
}
.weekday {
  font-size: .8em;
}
.venue {
  font-size: .9em;
}

:root[data-view='oblique'] {
  --roll-x: 78%;
  --tape-y: min(74%, calc(100% - 160px));
  --roll-size: clamp(220px, 34svh, 360px);
}
:root[data-view='overhead'] {
  --roll-x: 79%;
  --tape-y: 52%;
  --roll-size: clamp(180px, 25svh, 290px);
}

@media (min-width: 1101px) {
  :root[data-view='overhead'] #soon {
    font-size: min(var(--soon-size), max(40px, calc(13.333svh - 32px)));
  }
}

@media (max-width: 1100px) {
  :root {
    --roll-x: 80%;
    --tape-y: 54%;
    --roll-size: clamp(106px, min(30vw, 28svh), 240px);
    --soon-size: clamp(24px, 9vw, 40px);
    --grid-size: 98px;
    --content-left: max(6%, calc(var(--safe-left) + 16px));
  }

  .credit {
    grid-template-columns: 1fr;
    gap: 18px;
    right: max(6%, calc(var(--safe-right) + 16px));
    bottom: max(6%, calc(var(--marquee-height) + var(--safe-bottom) + 12px));
  }
  .university {
    font-size: clamp(16px, 4.7vw, 24px);
  }
  .subtitle {
    font-size: clamp(14px, 3.7vw, 20px);
  }
  .title {
    margin-top: 16px;
    font-size: clamp(30px, 8.7vw, 48px);
  }
  .title .label {
    white-space: nowrap;
  }
  .title .label::before {
    bottom: auto;
    height: 1.35em;
  }
  .year {
    position: relative;
    isolation: isolate;
    display: table;
    margin-top: 6px;
    margin-left: 0;
  }
  .year::before {
    content: '';
  }
  .details {
    font-size: clamp(16px, 4.5vw, 20px);
    line-height: 1.2;
    text-align: left;
  }

  :root[data-view='oblique'] {
    --roll-x: 80%;
    --tape-y: 58%;
    --roll-size: clamp(106px, min(32vw, 29svh), 240px);
  }
  :root[data-view='overhead'] {
    --roll-x: 80%;
    --tape-y: 49%;
    --roll-size: clamp(106px, min(29vw, 26svh), 220px);
  }
}

@media (max-height: 540px) {
  :root {
    --roll-size: clamp(92px, 30svh, 125px);
    --tape-y: calc(56% - var(--safe-bottom));
    --soon-size: clamp(28px, 4.5vw, 40px);
  }

  .university {
    font-size: clamp(16px, 2.8vw, 22px);
  }
  .subtitle {
    font-size: clamp(14px, 2.2vw, 18px);
  }
  .title {
    margin-top: 10px;
    font-size: clamp(28px, 4.8vw, 40px);
  }
  .details {
    font-size: 16px;
  }

  :root[data-view='oblique'] {
    --roll-x: 80%;
    --tape-y: calc(54% - var(--safe-bottom));
    --roll-size: clamp(92px, 30svh, 125px);
  }
  :root[data-view='overhead'] {
    --roll-x: 80%;
    --tape-y: calc(46% - var(--safe-bottom));
    --roll-size: clamp(80px, 26svh, 110px);
  }
}

@media (max-width: 1100px) and (max-height: 540px) {
  :root {
    --soon-size: clamp(24px, 3.8vw, 34px);
  }
}

@media (max-width: 539px) and (max-height: 540px) {
  .credit {
    gap: 12px;
  }
}

@media (min-width: 540px) and (max-height: 540px) {
  .credit {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
  }
  .details {
    text-align: right;
  }
}

@media (min-width: 1101px) and (max-height: 540px) {
  :root[data-view='oblique'] {
    --tape-y: min(calc(74% - var(--safe-bottom)), calc(100% - var(--safe-bottom) - 124px));
  }
  :root[data-view='overhead'] {
    --tape-y: calc(51% - var(--safe-bottom));
  }
}

@media (min-width: 540px) and (max-width: 1100px) and (max-height: 540px) {
  :root[data-view] {
    --roll-size: clamp(68px, calc(24svh - var(--safe-bottom)), 96px);
    --tape-y: calc(44% - var(--safe-bottom));
    --soon-size: clamp(22px, 7.5svh, 30px);
  }
  :root[data-view='oblique'] {
    --tape-y: calc(49% - var(--safe-bottom));
  }
  .university {
    font-size: clamp(14px, 4.6svh, 18px);
  }
  .subtitle {
    margin-top: 6px;
    font-size: clamp(12px, 3.6svh, 14px);
  }
  .title {
    margin-top: 4px;
    font-size: clamp(22px, 7.2svh, 28px);
  }
}