/* "the festival has ended" modal on the top page (see end-modal.js): opens right after the loader, settling in from a larger size.
   Shape: a fixed 16:10 card. Everything inside is sized in cqw (a % of the card width), so the card and its text scale
   together and keep the same proportions from a phone (~330px wide) to desktop (360px max).
   Type, all weight 700 with .08em tracking, on one 2.0 line-height, so the line pitch is 8cqw for the lead and thanks lines and 10.4cqw for the headline:
     lead      4.0cqw   line box 8.0cqw    "多摩美術大学芸術祭 2026 は、"
     headline  5.2cqw   line box 10.4cqw   "終了いたしました。"   <- a step larger than the rest
     thanks    4.0cqw   line box 8.0cqw x2 thank-you lines, in softer grey
   The block is 34.4cqw tall inside a 62.5cqw card, so it has 14cqw above and below (about 19cqw to the sides of the longest line). */
.em {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
  /* equal gutters so the card sits exactly in the middle of the screen: the sides keep the card and its 8px shadow off the edge,
     and 56px top and bottom is enough for the × (44px above the card) so it is never clipped */
  padding: 56px max(24px, 8vw);
  background: rgba(0, 0, 0, .2);
  animation: em-dim-in .6s ease both;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic Pro", sans-serif;
}
@keyframes em-dim-in { from { background-color: rgba(0, 0, 0, 0); } }
@keyframes em-dim-out { to { background-color: rgba(0, 0, 0, 0); } }
.em.is-closing { animation: em-dim-out .3s ease both; }

.em__box {
  position: relative;
  box-sizing: border-box;
  /* 360px max; never wider than the screen, and on a short (landscape) screen narrow enough that the 16:10 card plus the × still fit */
  width: min(360px, 100%, calc((100vh - 130px) * 1.6));
  aspect-ratio: 16 / 10;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  --r: clamp(10px, 3vw, 14px); /* corner radius: gently rounded */
  --edge: 1.5px;  /* ring width */
  --shadow: 8px;  /* offset of the shadow shape, down-left */
  color: #333;
  text-align: center;
  /* starts enlarged and shrinks down onto the screen while fading in, easing out so it settles softly.
     A keyframe animation, so it starts the moment the modal is inserted (no class to add on a later frame) */
  transform-origin: 50% 50%;
  animation: em-shrink-in .6s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes em-shrink-in {
  from { transform: scale(1.12); opacity: 0; }
  40% { opacity: 1; }
  to { transform: scale(1); opacity: 1; }
}
@keyframes em-shrink-out { to { transform: scale(.96); opacity: 0; } }
.em.is-closing .em__box { animation: em-shrink-out .3s ease both; }

.em__text { position: relative; margin: 0; padding-inline: 6cqw; } /* positioned so it paints above the white fill */

/* Ring and shadow are flat blue shapes (no blur): .em__tex is the ring, --shadow the same shape offset down-left;
   .em__fill is the white face laid over the ring, inset by --edge. */
.em__tex,
.em__fill {
  position: absolute;
  inset: 0;
  border-radius: var(--r);
}
.em__tex { background: #5aa9ff; }
.em__tex--shadow { background: #4da4ff; translate: calc(var(--shadow) * -1) var(--shadow); }
.em__fill {
  inset: var(--edge);
  border-radius: calc(var(--r) - var(--edge));
  background: #fff;
}
.em__lead,
.em__headline,
.em__thanks {
  font-weight: 700;
  line-height: 2;
  letter-spacing: .08em;
  font-feature-settings: "palt"; /* proportional kana, so the tracking looks even */
}
.em__lead { font-size: 4cqw; }
.em__headline { font-size: 5.2cqw; }
.em__thanks { color: #555; font-size: 4cqw; }

/* Characters on two opposite corners of the card, in front of it and partly overlapping it. Which two, and where, is drawn
   by end-modal.js on every page load; it sets each one's size, place (in cqw, a % of the card width, so they keep their spot as
   the card scales), lean (--tilt), mirroring and animation delays inline. The overlaps are over empty corner areas, clear of the text.
   Three animations on three separate properties so they don't fight: pop in (scale + fade, one after another),
   float (translate) and sway (rotate, rocking around --tilt), both kept gentle. */
.em__chara {
  --tilt: 0deg;
  position: absolute;
  display: block;
  height: auto;
  rotate: var(--tilt);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
  animation:
    em-chara-in .6s cubic-bezier(.2, 1.3, .35, 1) both,
    em-float 5.5s ease-in-out infinite,
    em-sway 6.5s ease-in-out infinite;
}
@keyframes em-chara-in { from { scale: .4; opacity: 0; } }
@keyframes em-float {
  0%, 100% { translate: 0 0; }
  33% { translate: 2px -4px; }
  66% { translate: -2px -7px; }
}
@keyframes em-sway {
  0%, 100% { rotate: calc(var(--tilt) - 2deg); }
  50% { rotate: calc(var(--tilt) + 2deg); }
}
.em.is-closing .em__chara { animation: em-fade-out .25s ease both; }
@keyframes em-fade-out { to { opacity: 0; } }

.em__close {
  position: absolute;
  top: -44px; /* 8px clear of the card */
  right: 0;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.em__close svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 4px rgba(0, 110, 200, .35)); }
.em__close:focus, .em__close:focus-visible { outline: none; }