/* ============================================================
   modal-animations.css — Modal / Dialog アニメーション集
   ============================================================ */

.modal-anim {
  --modal-duration: 0.35s;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 6px;
}

.modal-anim__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  animation: modal-backdrop-in 0.3s ease both;
}

@keyframes modal-backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal-anim__box {
  position: relative;
  z-index: 1;
  width: 85%;
  padding: 1.25rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.modal-anim__title {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text);
}

.modal-anim__body {
  margin: 0;
  font-size: 0.75rem;
  color: var(--text-muted);
}

/* --- Fade Scale --- */
.modal-anim-fade-scale .modal-anim__box {
  animation: modal-fade-scale var(--modal-duration) var(--modal-ease) both;
}

@keyframes modal-fade-scale {
  from { opacity: 0; transform: scale(0.9); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Slide Up --- */
.modal-anim-slide-up .modal-anim__box {
  animation: modal-slide-up var(--modal-duration) var(--modal-ease) both;
}

@keyframes modal-slide-up {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Flip In --- */
.modal-anim-flip-in {
  perspective: 800px;
}

.modal-anim-flip-in .modal-anim__box {
  animation: modal-flip-in var(--modal-duration) var(--modal-ease) both;
}

@keyframes modal-flip-in {
  from { opacity: 0; transform: rotateX(-20deg); }
  to   { opacity: 1; transform: rotateX(0deg); }
}

/* --- Bounce In --- */
.modal-anim-bounce-in .modal-anim__box {
  animation: modal-bounce-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes modal-bounce-in {
  from { opacity: 0; transform: scale(0.6); }
  to   { opacity: 1; transform: scale(1); }
}

/* --- Drawer Right --- */
.modal-anim-drawer-right {
  align-items: stretch;
}

.modal-anim-drawer-right .modal-anim__box {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 70%;
  border-radius: 0;
  animation: modal-drawer-right var(--modal-duration) var(--modal-ease) both;
}

@keyframes modal-drawer-right {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}

/* --- Blur Backdrop --- */
.modal-anim-blur-backdrop .modal-anim__backdrop {
  animation: modal-blur-backdrop 0.4s ease both;
}

@keyframes modal-blur-backdrop {
  from { backdrop-filter: blur(0); background: rgba(0,0,0,0); }
  to   { backdrop-filter: blur(12px); background: rgba(0,0,0,0.45); }
}

.modal-anim-blur-backdrop .modal-anim__box {
  animation: modal-fade-scale var(--modal-duration) var(--modal-ease) both;
}

/* --- Newspaper --- */
.modal-anim-newspaper .modal-anim__box {
  animation: modal-newspaper 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes modal-newspaper {
  from { opacity: 0; transform: rotate(-3deg) scale(0); }
  to   { opacity: 1; transform: rotate(0deg) scale(1); }
}

/* --- Elastic Pop --- */
.modal-anim-elastic-pop .modal-anim__box {
  animation: modal-elastic-pop 0.6s both;
}

@keyframes modal-elastic-pop {
  0%   { opacity: 0; transform: scale(0.5); }
  55%  { opacity: 1; transform: scale(1.1); }
  70%  { transform: scale(0.95); }
  85%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}

/* --- Fall From Top --- */
.modal-anim-fall-top .modal-anim__box {
  animation: modal-fall-top var(--modal-duration) var(--modal-ease) both;
}

@keyframes modal-fall-top {
  from { opacity: 0; transform: translateY(-60px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* --- Zoom In Blur --- */
.modal-anim-zoom-in-blur .modal-anim__box {
  animation: modal-zoom-in-blur 0.45s var(--modal-ease) both;
}

@keyframes modal-zoom-in-blur {
  from { opacity: 0; transform: scale(1.15); filter: blur(8px); }
  to   { opacity: 1; transform: scale(1);    filter: blur(0); }
}

/* --- Slide Down --- */
.modal-anim-slide-down .modal-anim__box {
  animation: modal-slide-down var(--modal-duration) var(--modal-ease) both;
}

@keyframes modal-slide-down {
  from { opacity: 0; transform: translateY(-30px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Drawer Bottom --- */
.modal-anim-drawer-bottom {
  align-items: flex-end;
}

.modal-anim-drawer-bottom .modal-anim__box {
  width: 100%;
  border-radius: 12px 12px 0 0;
  animation: modal-drawer-bottom var(--modal-duration) var(--modal-ease) both;
}

@keyframes modal-drawer-bottom {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

/* --- Zoom Out --- */
.modal-anim-zoom-out .modal-anim__box {
  animation: modal-zoom-out var(--modal-duration) var(--modal-ease) both;
}

@keyframes modal-zoom-out {
  from { opacity: 0; transform: scale(1.18); }
  to { opacity: 1; transform: scale(1); }
}

/* --- 3D Rotate --- */
.modal-anim-rotate-3d .modal-anim__box {
  animation: modal-rotate-3d 0.5s var(--modal-ease) both;
  transform-origin: left center;
}

@keyframes modal-rotate-3d {
  from { opacity: 0; transform: perspective(600px) rotateY(60deg); }
  to { opacity: 1; transform: perspective(600px) rotateY(0deg); }
}

/* --- Morph In --- */
.modal-anim-morph-in .modal-anim__box {
  animation: modal-morph-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes modal-morph-in {
  0%   { opacity: 0; width: 48px; height: 48px; border-radius: 50%; transform: scale(0.5); }
  40%  { opacity: 1; width: 48px; height: 48px; border-radius: 50%; transform: scale(1); }
  100% { width: 85%; height: auto; border-radius: 10px; transform: scale(1); }
}

/* --- Slide Left --- */
.modal-anim-slide-left {
  align-items: stretch;
}

.modal-anim-slide-left .modal-anim__box {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 70%;
  border-radius: 0;
  animation: modal-slide-left var(--modal-duration) var(--modal-ease) both;
}

@keyframes modal-slide-left {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0); }
}

/* --- Ripple Expand --- */
.modal-anim-ripple-expand .modal-anim__box {
  animation: modal-ripple-expand 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.modal-anim-ripple-expand .modal-anim__box::before,
.modal-anim-ripple-expand .modal-anim__box::after {
  content: '';
  position: absolute;
  inset: -8px;
  border-radius: 14px;
  border: 2px solid var(--accent);
  opacity: 0;
  animation: modal-ripple-ring 0.7s ease-out 0.15s both;
}

.modal-anim-ripple-expand .modal-anim__box::after {
  inset: -18px;
  border-radius: 18px;
  animation-delay: 0.25s;
}

@keyframes modal-ripple-expand {
  0%   { opacity: 0; transform: scale(0.05); }
  50%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes modal-ripple-ring {
  0%   { opacity: 0.7; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.3); }
}

/* --- Perspective Drop --- */
.modal-anim-perspective-drop {
  perspective: 900px;
}

.modal-anim-perspective-drop .modal-anim__box {
  animation: modal-perspective-drop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: top center;
}

@keyframes modal-perspective-drop {
  0%   { opacity: 0; transform: translateY(-40px) rotateX(60deg); }
  60%  { opacity: 1; transform: translateY(4px) rotateX(-4deg); }
  100% { opacity: 1; transform: translateY(0) rotateX(0deg); }
}

/* --- Glitch In --- */
.modal-anim-glitch-in .modal-anim__box {
  animation: modal-glitch-in 0.5s steps(1) both;
}

@keyframes modal-glitch-in {
  0%   { opacity: 0; transform: translate(0, 0) skewX(0deg); clip-path: inset(0 0 100% 0); }
  10%  { opacity: 1; transform: translate(-6px, 2px) skewX(4deg); clip-path: inset(20% 0 30% 0); }
  20%  { transform: translate(5px, -3px) skewX(-3deg); clip-path: inset(50% 0 10% 0); }
  30%  { transform: translate(-4px, 1px) skewX(2deg); clip-path: inset(10% 0 60% 0); }
  40%  { transform: translate(3px, 0px) skewX(-5deg); clip-path: inset(30% 0 5% 0); }
  55%  { transform: translate(-2px, 2px) skewX(1deg); clip-path: inset(0 0 0 0); }
  70%  { transform: translate(2px, -1px) skewX(-1deg); clip-path: inset(0 0 0 0); }
  85%  { transform: translate(-1px, 0) skewX(0.5deg); filter: hue-rotate(30deg); }
  100% { opacity: 1; transform: translate(0, 0) skewX(0deg); clip-path: inset(0 0 0 0); filter: hue-rotate(0deg); }
}

/* --- Curtain Part --- */
.modal-anim-curtain-part {
  overflow: hidden;
}

.modal-anim-curtain-part .modal-anim__backdrop {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: transparent;
}

.modal-anim-curtain-part .modal-anim__backdrop::before,
.modal-anim-curtain-part .modal-anim__backdrop::after {
  content: '';
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background: rgba(10, 10, 22, 0.88);
  backdrop-filter: blur(6px);
  z-index: 1;
}

.modal-anim-curtain-part .modal-anim__backdrop::before {
  left: 0;
  transform-origin: left center;
  animation: modal-curtain-open-l 0.72s cubic-bezier(0.77, 0, 0.175, 1) both;
}

.modal-anim-curtain-part .modal-anim__backdrop::after {
  right: 0;
  left: auto;
  transform-origin: right center;
  animation: modal-curtain-open-r 0.72s cubic-bezier(0.77, 0, 0.175, 1) both;
}

.modal-anim-curtain-part .modal-anim__box {
  position: relative;
  z-index: 2;
  animation: modal-curtain-box 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.5s both;
}

@keyframes modal-curtain-open-l {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-100%); }
}

@keyframes modal-curtain-open-r {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

@keyframes modal-curtain-box {
  0%   { opacity: 0; transform: scale(0.78); }
  55%  { opacity: 1; transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1); }
}

/* --- Spotlight In --- */
.modal-anim-spotlight-in .modal-anim__backdrop {
  background: #000;
  animation: modal-spotlight-bg 0.25s ease both;
}

.modal-anim-spotlight-in .modal-anim__box {
  animation: modal-spotlight-reveal 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

@keyframes modal-spotlight-bg {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-spotlight-reveal {
  0%   {
    opacity: 0.5;
    clip-path: circle(0% at 50% 50%);
    transform: scale(0.88);
    filter: blur(10px);
  }
  25%  {
    opacity: 1;
    clip-path: circle(12% at 50% 50%);
    filter: blur(4px);
  }
  100% {
    opacity: 1;
    clip-path: circle(150% at 50% 50%);
    transform: scale(1);
    filter: blur(0px);
  }
}

/* --- Letter Assemble --- */
.modal-anim-letter-assemble .modal-anim__box {
  animation: modal-letter-box-fade 0.3s ease both;
}

.modal-anim-letter-assemble .modal-anim__title {
  display: flex;
  flex-wrap: wrap;
  gap: 0.02em;
  overflow: visible;
  justify-content: center;
}

.modal-anim-letter-assemble .modal-anim__title .letter {
  display: inline-block;
  animation: modal-letter-fly 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  opacity: 0;
}

.modal-anim-letter-assemble .modal-anim__title .letter:nth-child(1)  { animation-delay: 0.18s; --tx: -65px; --ty: -42px; --rot: -32deg; }
.modal-anim-letter-assemble .modal-anim__title .letter:nth-child(2)  { animation-delay: 0.22s; --tx:  52px; --ty: -56px; --rot:  22deg; }
.modal-anim-letter-assemble .modal-anim__title .letter:nth-child(3)  { animation-delay: 0.27s; --tx: -44px; --ty:  48px; --rot: -17deg; }
.modal-anim-letter-assemble .modal-anim__title .letter:nth-child(4)  { animation-delay: 0.31s; --tx:  62px; --ty:  38px; --rot:  26deg; }
.modal-anim-letter-assemble .modal-anim__title .letter:nth-child(5)  { animation-delay: 0.35s; --tx: -58px; --ty: -32px; --rot: -21deg; }
.modal-anim-letter-assemble .modal-anim__title .letter:nth-child(6)  { animation-delay: 0.39s; --tx:  48px; --ty: -52px; --rot:  19deg; }
.modal-anim-letter-assemble .modal-anim__title .letter:nth-child(7)  { animation-delay: 0.43s; --tx: -36px; --ty:  58px; --rot: -24deg; }
.modal-anim-letter-assemble .modal-anim__title .letter:nth-child(8)  { animation-delay: 0.47s; --tx:  57px; --ty:  36px; --rot:  29deg; }
.modal-anim-letter-assemble .modal-anim__title .letter:nth-child(9)  { animation-delay: 0.51s; --tx: -52px; --ty: -47px; --rot: -13deg; }
.modal-anim-letter-assemble .modal-anim__title .letter:nth-child(10) { animation-delay: 0.55s; --tx:  42px; --ty:  62px; --rot:  16deg; }

@keyframes modal-letter-box-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-letter-fly {
  0%   {
    opacity: 0;
    transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg)) scale(0.35);
  }
  55%  {
    opacity: 1;
    transform: translate(calc(var(--tx, 0px) * -0.06), calc(var(--ty, 0px) * -0.06))
               rotate(calc(var(--rot, 0deg) * -0.08)) scale(1.08);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

/* --- Page Takeover --- */
.modal-anim-page-takeover {
  overflow: hidden;
}

.modal-anim-page-takeover .modal-anim__backdrop {
  background: linear-gradient(135deg, var(--accent, #6366f1) 0%, #7c3aed 100%);
  animation: modal-takeover-slide 0.58s cubic-bezier(0.77, 0, 0.175, 1) both;
  transform-origin: bottom center;
}

.modal-anim-page-takeover .modal-anim__box {
  background: transparent;
  box-shadow: none;
  border: none;
  position: relative;
  z-index: 2;
  animation: modal-takeover-content 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.54s both;
}

.modal-anim-page-takeover .modal-anim__box h4,
.modal-anim-page-takeover .modal-anim__box p {
  color: #fff;
}

@keyframes modal-takeover-slide {
  0%   { transform: translateY(100%); }
  100% { transform: translateY(0); }
}

@keyframes modal-takeover-content {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- Unfold --- */
.modal-anim-unfold .modal-anim__box {
  transform-origin: center center;
  animation: modal-unfold 0.65s cubic-bezier(0.34, 1.3, 0.64, 1) both;
  overflow: hidden;
}

.modal-anim-unfold .modal-anim__box > * {
  animation: modal-unfold-content 0.4s ease 0.5s both;
}

@keyframes modal-unfold {
  0%   { transform: scaleY(0.02); opacity: 0.7; border-radius: 40px; }
  35%  { transform: scaleY(1.06); opacity: 1; }
  55%  { transform: scaleY(0.97); }
  75%  { transform: scaleY(1.01); }
  100% { transform: scaleY(1); opacity: 1; }
}

@keyframes modal-unfold-content {
  0%   { opacity: 0; transform: scaleY(1.8); }
  100% { opacity: 1; transform: scaleY(1); }
}

/* --- Crack Open --- */
.modal-anim-crack-open .modal-anim__box {
  overflow: hidden;
  animation: modal-crack-open 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.modal-anim-crack-open .modal-anim__box::before,
.modal-anim-crack-open .modal-anim__box::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  z-index: 2;
  animation: modal-crack-half 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

.modal-anim-crack-open .modal-anim__box::before {
  top: 0;
  border-radius: 10px 10px 0 0;
  transform-origin: top center;
  animation-name: modal-crack-top;
}

.modal-anim-crack-open .modal-anim__box::after {
  bottom: 0;
  border-radius: 0 0 10px 10px;
  transform-origin: bottom center;
  animation-name: modal-crack-bottom;
}

@keyframes modal-crack-open {
  0%   { opacity: 0; transform: scaleY(0.02); }
  20%  { opacity: 1; transform: scaleY(1); }
  100% { transform: scaleY(1); opacity: 1; }
}

@keyframes modal-crack-top {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(-55%); }
  70%  { transform: translateY(-45%); }
  100% { transform: translateY(0); opacity: 0; }
}

@keyframes modal-crack-bottom {
  0%   { transform: translateY(0); }
  40%  { transform: translateY(55%); }
  70%  { transform: translateY(45%); }
  100% { transform: translateY(0); opacity: 0; }
}

/* --- Roll Down --- */
.modal-anim-roll-down {
  perspective: 800px;
  align-items: flex-start;
}

.modal-anim-roll-down .modal-anim__box {
  transform-origin: top center;
  animation: modal-roll-down 0.65s cubic-bezier(0.22, 1, 0.36, 1) both;
  overflow: hidden;
}

@keyframes modal-roll-down {
  0%   { opacity: 0.6; transform: perspective(600px) rotateX(-90deg) scaleY(0); }
  40%  { opacity: 1;   transform: perspective(600px) rotateX(8deg)  scaleY(1.02); }
  65%  { transform: perspective(600px) rotateX(-3deg) scaleY(0.99); }
  100% { transform: perspective(600px) rotateX(0deg)  scaleY(1); }
}

/* --- Shatter In --- */
.modal-anim-shatter-in .modal-anim__box {
  animation: modal-shatter-box 0.05s ease 0.55s both;
  opacity: 0;
  position: relative;
}

.modal-anim-shatter-in .modal-anim__box::before,
.modal-anim-shatter-in .modal-anim__box::after {
  content: '';
  position: absolute;
  width: 50%; height: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  z-index: 2;
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}

.modal-anim-shatter-in .modal-anim__box::before {
  top: 0; left: 0;
  border-radius: 10px 0 0 0;
  animation-name: modal-shatter-tl;
}

.modal-anim-shatter-in .modal-anim__box::after {
  top: 0; right: 0; left: auto;
  border-radius: 0 10px 0 0;
  animation-name: modal-shatter-tr;
}

.modal-anim-shatter-in .modal-anim__shard-bl,
.modal-anim-shatter-in .modal-anim__shard-br {
  position: absolute;
  width: 50%; height: 50%;
  background: var(--surface);
  border: 1px solid var(--border);
  z-index: 2;
  animation-duration: 0.55s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
  bottom: 0;
}

.modal-anim-shatter-in .modal-anim__shard-bl {
  left: 0;
  border-radius: 0 0 0 10px;
  animation-name: modal-shatter-bl;
}

.modal-anim-shatter-in .modal-anim__shard-br {
  right: 0;
  border-radius: 0 0 10px 0;
  animation-name: modal-shatter-br;
}

@keyframes modal-shatter-box {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes modal-shatter-tl {
  0%   { opacity: 0; transform: translate(-40px, -40px) rotate(-8deg) scale(0.7); }
  60%  { opacity: 1; transform: translate(2px, 2px) rotate(1deg); }
  100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
}

@keyframes modal-shatter-tr {
  0%   { opacity: 0; transform: translate(40px, -40px) rotate(8deg) scale(0.7); }
  60%  { opacity: 1; transform: translate(-2px, 2px) rotate(-1deg); }
  100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
}

@keyframes modal-shatter-bl {
  0%   { opacity: 0; transform: translate(-40px, 40px) rotate(8deg) scale(0.7); }
  60%  { opacity: 1; transform: translate(2px, -2px) rotate(-1deg); }
  100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
}

@keyframes modal-shatter-br {
  0%   { opacity: 0; transform: translate(40px, 40px) rotate(-8deg) scale(0.7); }
  60%  { opacity: 1; transform: translate(-2px, -2px) rotate(1deg); }
  100% { opacity: 0; transform: translate(0, 0) rotate(0deg); }
}

/* --- Stack Fan --- */
.modal-anim-stack-fan .modal-anim__box {
  position: relative;
  animation: modal-stack-fan-in 0.55s cubic-bezier(0.34, 1.3, 0.64, 1) 0.35s both;
}

.modal-anim-stack-fan .modal-anim__box::before,
.modal-anim-stack-fan .modal-anim__box::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  z-index: -1;
}

.modal-anim-stack-fan .modal-anim__box::before {
  animation: modal-fan-card1 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.modal-anim-stack-fan .modal-anim__box::after {
  animation: modal-fan-card2 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

@keyframes modal-stack-fan-in {
  0%   { opacity: 0; transform: scale(0.85) translateY(10px); }
  60%  { opacity: 1; transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

@keyframes modal-fan-card1 {
  0%   { opacity: 0; transform: translateY(20px) rotate(0deg); }
  30%  { opacity: 0.7; transform: translateY(-6px) rotate(-8deg) translateX(-8px); }
  70%  { transform: translateY(-2px) rotate(-4deg) translateX(-4px); }
  100% { opacity: 0.6; transform: translateY(4px) rotate(-5deg) translateX(-5px); }
}

@keyframes modal-fan-card2 {
  0%   { opacity: 0; transform: translateY(20px) rotate(0deg); }
  30%  { opacity: 0.5; transform: translateY(-4px) rotate(8deg) translateX(8px); }
  70%  { transform: translateY(0px) rotate(4deg) translateX(4px); }
  100% { opacity: 0.4; transform: translateY(6px) rotate(5deg) translateX(5px); }
}

/* --- Blur Bloom --- */
.modal-anim-blur-bloom .modal-anim__box {
  animation: modal-blur-bloom 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes modal-blur-bloom {
  0%   { opacity: 0; transform: scale(0.2); filter: blur(20px); }
  50%  { opacity: 1; transform: scale(1.04); filter: blur(2px); }
  100% { opacity: 1; transform: scale(1);   filter: blur(0); }
}

/* --- Slide Right In --- */
.modal-anim-slide-right-in .modal-anim__box {
  animation: modal-slide-right-in 0.42s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes modal-slide-right-in {
  0%   { opacity: 0; transform: translateX(100%); }
  60%  { opacity: 1; transform: translateX(-4px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* --- Scale Rotate --- */
.modal-anim-scale-rotate .modal-anim__box {
  animation: modal-scale-rotate 0.45s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}

@keyframes modal-scale-rotate {
  0%   { opacity: 0; transform: scale(0) rotate(-10deg); }
  60%  { opacity: 1; transform: scale(1.04) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* --- Liquid Morph --- */
.modal-anim-liquid-morph .modal-anim__box {
  animation: modal-liquid-morph 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes modal-liquid-morph {
  0%   { opacity: 0; transform: scale(0.4); border-radius: 50%; }
  40%  { opacity: 1; transform: scale(1.06); border-radius: 30% 60% 50% 40% / 40% 50% 60% 30%; }
  70%  { transform: scale(0.98); border-radius: 16px 8px 12px 8px / 8px 16px 8px 12px; }
  100% { opacity: 1; transform: scale(1); border-radius: 10px; }
}

/* --- Elevator --- */
.modal-anim-elevator .modal-anim__box {
  animation: modal-elevator 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes modal-elevator {
  0%   { opacity: 0; transform: translateY(120%); }
  55%  { opacity: 1; transform: translateY(-8px); }
  75%  { transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* --- Reveal Layers --- */
.modal-anim-reveal-layers {
  overflow: hidden;
}

.modal-anim-reveal-layers .modal-anim__box {
  animation: modal-reveal-box-in 0.01s 0.85s both;
  opacity: 0;
  position: relative;
  z-index: 2;
}

.modal-anim-reveal-layers .modal-anim__backdrop {
  z-index: 0;
}

.modal-anim-reveal-layers .modal-anim__layer {
  position: absolute;
  inset: 0;
  z-index: 3;
  transform-origin: right;
}

.modal-anim-reveal-layers .modal-anim__layer--1 {
  background: var(--accent, #6366f1);
  animation: modal-layer-peel 0.3s cubic-bezier(0.76, 0, 0.24, 1) 0.0s both;
}

.modal-anim-reveal-layers .modal-anim__layer--2 {
  background: #8b5cf6;
  animation: modal-layer-peel 0.3s cubic-bezier(0.76, 0, 0.24, 1) 0.18s both;
}

.modal-anim-reveal-layers .modal-anim__layer--3 {
  background: #a78bfa;
  animation: modal-layer-peel 0.3s cubic-bezier(0.76, 0, 0.24, 1) 0.36s both;
}

@keyframes modal-layer-peel {
  0%   { transform: scaleX(1); }
  100% { transform: scaleX(0); }
}

@keyframes modal-reveal-box-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}

/* --- comic-pop --- */
.modal-anim-comic-pop .modal-anim__box {
  animation: modal-comic-pop 0.5s cubic-bezier(0.34,1.56,0.64,1) both;
  border: 3px solid var(--accent);
  box-shadow: 6px 6px 0 var(--accent);
}
@keyframes modal-comic-pop {
  from { opacity: 0; transform: scale(0.3) rotate(-8deg); }
  60%  { transform: scale(1.05) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

/* --- hologram-appear --- */
.modal-anim-hologram-appear .modal-anim__box {
  animation: modal-hologram 0.7s steps(1) both;
  box-shadow: 0 0 20px rgba(0,255,200,0.4), 0 0 60px rgba(0,255,200,0.15);
}
@keyframes modal-hologram {
  0%   { opacity: 0; transform: scaleY(0.02) translateY(-20px); filter: brightness(4) hue-rotate(180deg); }
  15%  { opacity: 1; transform: scaleY(0.3); filter: brightness(3); }
  30%  { transform: scaleY(0.6); filter: brightness(2); }
  45%  { opacity: 0.7; transform: scaleY(0.85); }
  60%  { opacity: 1; transform: scaleY(1.03); filter: brightness(1.2); }
  100% { transform: scaleY(1); filter: none; }
}

/* --- tunnel-zoom --- */
.modal-anim-tunnel-zoom .modal-anim__backdrop {
  animation: modal-tunnel-backdrop 0.5s both;
}
.modal-anim-tunnel-zoom .modal-anim__box {
  animation: modal-tunnel-box 0.6s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes modal-tunnel-backdrop {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-tunnel-box {
  from { opacity: 0; transform: scale(8) translateZ(0); filter: blur(20px); }
  to   { opacity: 1; transform: scale(1); filter: none; }
}

/* --- bottom-sheet --- */
.modal-anim-bottom-sheet .modal-anim__box {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  border-radius: 16px 16px 0 0;
  padding: 1.5rem 1.25rem 1.25rem;
  animation: modal-sheet-up 0.45s cubic-bezier(0.22,1,0.36,1) both;
}
.modal-anim-bottom-sheet .modal-anim__handle {
  width: 36px;
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin: 0 auto 1rem;
}
@keyframes modal-sheet-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* --- origami-open --- */
.modal-anim-origami-open .modal-anim__box {
  animation: modal-origami 0.6s cubic-bezier(0.22,1,0.36,1) both;
  transform-origin: top center;
}
@keyframes modal-origami {
  0%   { opacity: 0; transform: rotateX(-90deg) scaleY(0.1); }
  40%  { opacity: 1; transform: rotateX(-20deg) scaleY(0.7); }
  70%  { transform: rotateX(6deg) scaleY(1.02); }
  100% { transform: rotateX(0) scaleY(1); }
}

/* --- type-in --- */
.modal-anim-type-in .modal-anim__box {
  animation: modal-type-in-box 0.4s cubic-bezier(0.22,1,0.36,1) both;
}
.modal-anim-type-in .modal-anim__title {
  overflow: hidden;
  white-space: nowrap;
  animation: modal-type-in-title 0.5s steps(12) 0.4s both;
}
.modal-anim-type-in .modal-anim__body {
  animation: modal-type-in-body 0.4s ease 0.95s both;
}
@keyframes modal-type-in-box {
  from { opacity: 0; transform: scale(0.95) translateY(10px); }
  to   { opacity: 1; transform: none; }
}
@keyframes modal-type-in-title {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes modal-type-in-body {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* --- stacked-deck --- */
.modal-anim-stacked-deck .modal-anim__deck {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: calc(100% - 2rem);
}
.modal-anim-stacked-deck .modal-anim__deck--3 {
  height: 60px;
  bottom: 4px;
  animation: modal-deck-3 0.5s cubic-bezier(0.22,1,0.36,1) both;
  z-index: 0;
}
.modal-anim-stacked-deck .modal-anim__deck--2 {
  height: 60px;
  bottom: 8px;
  animation: modal-deck-2 0.5s cubic-bezier(0.22,1,0.36,1) 0.06s both;
  z-index: 1;
}
.modal-anim-stacked-deck .modal-anim__box {
  position: relative;
  z-index: 2;
  animation: modal-deck-1 0.5s cubic-bezier(0.22,1,0.36,1) 0.12s both;
}
@keyframes modal-deck-3 { from { opacity:0; transform:translateX(-50%) translateY(30px) scale(0.85); } to { opacity:0.4; transform:translateX(-50%) translateY(0) scale(0.92); } }
@keyframes modal-deck-2 { from { opacity:0; transform:translateX(-50%) translateY(20px) scale(0.9); } to { opacity:0.7; transform:translateX(-50%) translateY(0) scale(0.96); } }
@keyframes modal-deck-1 { from { opacity:0; transform:translateY(20px) scale(0.95); } to { opacity:1; transform:none; } }

/* --- liquid-enter --- */
.modal-anim-liquid-enter .modal-anim__box {
  animation: modal-liquid 0.7s cubic-bezier(0.22,1,0.36,1) both;
}
@keyframes modal-liquid {
  0%   { opacity: 0; transform: scale(0.5) translateY(40px); border-radius: 50%; }
  40%  { border-radius: 30% 70% 60% 40% / 50% 40% 60% 50%; }
  70%  { transform: scale(1.04) translateY(-4px); border-radius: 10px; }
  100% { opacity: 1; transform: scale(1); border-radius: 10px; }
}

/* --- notification-toast --- */
.modal-anim-notification-toast .modal-anim__box--toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  min-width: unset;
  border-left: 3px solid #22c55e;
  animation: modal-toast-slide 0.5s cubic-bezier(0.22,1,0.36,1) both;
}
.modal-anim-notification-toast .modal-anim__toast-icon {
  width: 24px; height: 24px;
  background: #22c55e;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 0.8rem;
  flex-shrink: 0;
  animation: modal-toast-icon-pop 0.4s cubic-bezier(0.34,1.56,0.64,1) 0.3s both;
}
@keyframes modal-toast-slide {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes modal-toast-icon-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* --- radial-open --- */
.modal-anim-radial-open .modal-anim__backdrop {
  animation: modal-radial-bd 0.5s both;
}
.modal-anim-radial-open .modal-anim__box {
  animation: modal-radial-box 0.6s cubic-bezier(0.22,1,0.36,1) both;
  clip-path: circle(0% at 50% 50%);
}
@keyframes modal-radial-bd {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-radial-box {
  from { clip-path: circle(0% at 50% 50%); opacity: 0; }
  to   { clip-path: circle(120% at 50% 50%); opacity: 1; }
}

/* ============================================================
   21st.dev インスパイア Modal 新着 (2026-06)
   ============================================================ */

/* --- drawer-panel ---
   Side drawer slides in from right. */
.modal-anim-drawer-panel .modal-anim__backdrop {
  animation: modal-fade-in 0.3s ease both;
}
.modal-anim-drawer-panel .modal-anim__box {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 65%; border-radius: 0;
  border-radius: 12px 0 0 12px;
  animation: modal-drawer-slide 0.4s cubic-bezier(0.22,1,0.36,1) var(--anim-delay, 0s) both;
}
@keyframes modal-drawer-slide {
  from { transform: translateX(100%); opacity: 0.5; }
  to   { transform: translateX(0); opacity: 1; }
}

/* --- command-palette ---
   Command palette drops from top with blur backdrop. */
.modal-anim-command-palette .modal-anim__backdrop {
  background: rgba(0,0,0,0.7);
  backdrop-filter: blur(4px);
  animation: modal-fade-in 0.25s ease both;
}
.modal-anim-command-palette .modal-anim__box {
  position: absolute; top: 15%; left: 50%; transform: translateX(-50%);
  width: 85%; max-width: 300px;
  background: rgba(20,20,32,0.97);
  border: 1px solid rgba(124,108,255,0.3);
  border-radius: 14px;
  animation: modal-cmd-drop 0.35s cubic-bezier(0.34,1.56,0.64,1) var(--anim-delay, 0s) both;
  box-shadow: 0 24px 64px rgba(0,0,0,0.6), 0 0 0 1px rgba(124,108,255,0.2);
}
.modal-anim-command-palette .modal-anim__title {
  font-size: 0.78em; color: rgba(255,255,255,0.5);
  border-bottom: 1px solid rgba(255,255,255,0.08); padding-bottom: 8px; margin-bottom: 8px;
}
@keyframes modal-cmd-drop {
  from { transform: translateX(-50%) translateY(-20px) scale(0.95); opacity: 0; }
  to   { transform: translateX(-50%) translateY(0) scale(1); opacity: 1; }
}

/* --- bottom-sheet ---
   Mobile-style bottom sheet slides up. */
.modal-anim-bottom-sheet .modal-anim__backdrop {
  animation: modal-fade-in 0.3s ease both;
}
.modal-anim-bottom-sheet .modal-anim__box {
  position: absolute; bottom: 0; left: 0; right: 0;
  border-radius: 16px 16px 0 0;
  animation: modal-sheet-up 0.4s cubic-bezier(0.22,1,0.36,1) var(--anim-delay, 0s) both;
}
.modal-anim-bottom-sheet .modal-anim__box::before {
  content: '';
  display: block; width: 36px; height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px; margin: 0 auto 12px;
}
@keyframes modal-sheet-up {
  from { transform: translateY(100%); opacity: 0.6; }
  to   { transform: translateY(0); opacity: 1; }
}

/* --- spotlight-modal ---
   Modal appears from a single bright spotlight expanding. */
.modal-anim-spotlight-modal .modal-anim__backdrop {
  background: radial-gradient(circle at 50% 40%, rgba(124,108,255,0.25) 0%, rgba(0,0,0,0.85) 60%);
  animation: modal-spotlight-in 0.5s ease both;
}
.modal-anim-spotlight-modal .modal-anim__box {
  animation: modal-spotlight-box 0.45s cubic-bezier(0.34,1.56,0.64,1) calc(var(--anim-delay,0s) + 0.1s) both;
}
@keyframes modal-spotlight-in {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes modal-spotlight-box {
  from { opacity:0; transform: scale(0.6) rotate(-3deg); }
  to   { opacity:1; transform: scale(1) rotate(0deg); }
}