/* Selected page-title concept 2: the ribbon uses the existing brand tokens. */
.page-title-ribbon,body main#app h1.page-title-ribbon{
  position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;align-self:start;
  box-sizing:border-box;width:100%;max-width:var(--layout-reading);min-width:0;
  margin:var(--sp-4) 0 var(--sp-8);padding:var(--sp-8) var(--sp-40);
  border-radius:0;background:transparent;color:var(--c-white);
  font-family:var(--font-display);font-size:var(--fs-ui-page);font-weight:900;line-height:var(--lh-tight);
  text-align:center;text-wrap:balance;text-shadow:none;transform:none;box-shadow:none;
}
.page-title-ribbon::after{content:'';position:absolute;z-index:-1;inset:0;pointer-events:none;border:1px solid var(--c-deco-lilac);border-radius:var(--radius-s);box-shadow:var(--shadow-offset) var(--c-deco-pink);background:linear-gradient(var(--c-gold),var(--c-gold)) center var(--sp-4)/calc(100% - var(--sp-24)) var(--sp-2) no-repeat,linear-gradient(var(--c-gold),var(--c-gold)) center calc(100% - var(--sp-4))/calc(100% - var(--sp-24)) var(--sp-2) no-repeat,linear-gradient(110deg,var(--c-navy-deep),var(--c-navy) 48%,var(--c-navy-deep))}
.page-title-ribbon-stars{position:absolute;inset:0;pointer-events:none}
.page-title-ribbon-stars::before,.page-title-ribbon-stars::after{content:'✧';position:absolute;top:50%;transform:translateY(-50%);font-size:var(--fs-14);line-height:var(--lh-tight);color:var(--c-yellow)}
.page-title-ribbon-stars::before{left:var(--sp-16)}.page-title-ribbon-stars::after{right:var(--sp-16)}
/* PC: the band stops at the middle of the screen; the narrow My Page column keeps its own width. */
@media (min-width: 960px){.page-title-ribbon,body main#app h1.page-title-ribbon{max-width:50%}.mypage-side .page-title-ribbon,body main#app :is(.mypage-columns-side,.list-layout-side) h1.page-title-ribbon{max-width:none}}
/* Short interaction feedback using the existing festival palette. */
.festival-hero {
  position: relative; isolation: isolate; display: flex; flex-direction: column;
  align-items: center; gap: var(--sp-16); width: 100%; min-width: 0;
}
.festival-hero > .top-logo { max-width: 100%; }
.page-background-page[data-page="home"] { overflow-x: clip; }
.page-background-page[data-page="home"] > main:before { left: calc(50% - 50vw); right: auto; width: 100vw; }
.festival-hero-art { position: absolute; top: 0; bottom: 0; left: calc(50% - 50vw); width: 100vw; z-index: -1; overflow: hidden; pointer-events: none; opacity: .9; mask-image: linear-gradient(transparent, var(--c-navy) var(--sp-40), var(--c-navy) calc(100% - var(--sp-40)), transparent); }
.festival-hero-art-motion { position: absolute; inset: 0; }
.festival-orbit { position: absolute; width: 130%; height: 70%; left: -15%; top: 12%; border: 2px solid var(--c-deco-lilac); border-radius: 50%; transform: rotate(-17deg); }
.festival-orbit-cross { width: 112%; height: 51%; left: -6%; top: 25%; border-color: var(--c-deco-aqua); transform: rotate(14deg); }
.festival-band, .festival-orbit { mask-image: linear-gradient(90deg, transparent, var(--c-navy), transparent); }
.festival-band { position: absolute; width: 120%; height: var(--sp-40); left: -10%; border-radius: var(--radius-pill); }
.festival-band-pink { top: calc(40% - var(--sp-20) - var(--sp-16)); background: var(--c-deco-pink); transform: rotate(-14deg); }
.festival-band-aqua { top: calc(40% - var(--sp-20) + var(--sp-16)); background: var(--c-deco-aqua); transform: rotate(13deg); }
.festival-star { position: absolute; width: var(--sp-20); height: var(--sp-20); background: currentColor; clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); }
.festival-star-pink { left: 6%; top: 14%; color: var(--c-pink-bright); transform: rotate(12deg); }
.festival-star-gold { right: 5%; top: 51%; color: var(--c-gold); width: var(--sp-24); height: var(--sp-24); }
.festival-star-aqua { right: 17%; top: 8%; color: var(--c-aqua-text); width: var(--sp-12); height: var(--sp-12); }
.festival-dot { position: absolute; width: var(--sp-8); height: var(--sp-8); border-radius: 50%; }
.festival-dot-pink { right: 10%; top: 20%; background: var(--c-pink-bright); }
.festival-dot-aqua { left: 12%; top: 72%; background: var(--c-aqua); }
.festival-hero.utamita-hero-enter > :is(.top-logo,.hero-logo) { animation: utamita-hero-fade var(--motion-hero-fade) var(--ease-festival) both, utamita-hero-enter var(--motion-hero-enter) var(--ease-hero-drift) both; }
.festival-hero.utamita-hero-enter > .festival-hero-art > .festival-hero-art-motion { animation: utamita-hero-decoration var(--motion-hero-decoration) var(--ease-hero-settle) both; }
.festival-hero.utamita-hero-enter .utamita-catch-char { display: inline-block; animation: utamita-hero-catch var(--motion-hero-catch) var(--ease-festival) calc(var(--motion-hero-catch-delay) + var(--catch-index) * var(--motion-hero-catch-step)) both; }
@keyframes utamita-hero-catch { from { opacity: 0; transform: translateX(calc(-1 * var(--sp-12))); } to { opacity: 1; transform: none; } }
.utamita-catch-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@keyframes utamita-hero-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes utamita-hero-enter { from { transform: translateY(var(--sp-16)) scale(.94); } to { transform: none; } }
@keyframes utamita-hero-decoration { from { opacity: 0; transform: rotate(-3deg) scale(.9); } to { opacity: 1; transform: none; } }
/* The event date follows the logo; the staff art settles like the hero decoration and keeps its own faint opacity. */
.festival-hero.utamita-hero-enter ~ .event-date > :is(time,.event-date-posting) { animation: utamita-hero-fade var(--motion-hero-fade) var(--ease-festival) both, utamita-hero-enter var(--motion-hero-enter) var(--ease-hero-drift) both; }
.festival-hero.utamita-hero-enter ~ .event-date > .event-date-art { animation: utamita-hero-decoration-in var(--motion-hero-decoration) var(--ease-hero-settle) both; }
@keyframes utamita-hero-decoration-in { from { opacity: 0; transform: rotate(-3deg) scale(.9); } }
.festival-wide { display: none; }
.festival-wide-a { left: 19%; top: 42%; color: var(--c-aqua-text); width: var(--sp-12); height: var(--sp-12); }
.festival-wide-c { left: 28%; top: 69%; color: var(--c-gold); width: var(--sp-16); height: var(--sp-16); transform: rotate(12deg); }
.festival-wide-d { left: 73%; top: 19%; color: var(--c-pink-bright); width: var(--sp-16); height: var(--sp-16); }
.festival-wide-b { left: 31%; top: 17%; background: var(--c-aqua); }
.festival-wide-e { left: 81%; top: 48%; background: var(--c-pink-bright); }
.festival-wide-f { left: 71%; top: 72%; background: var(--c-aqua); }
@media (min-width: 960px) { .festival-hero { gap: var(--sp-24); } .festival-wide { display: block; } .festival-star-aqua { display: none; } }
/* 全作品視聴：聴いた作品のバーを金色にする */
.is-all-heard .award-listening-fill{background:linear-gradient(90deg,var(--c-gold),var(--c-yellow-border) 50%,var(--c-gold))}
/* 全作品視聴の視聴状況が画面に入るたびに、4か所から星を弾けさせる */
.my-participation-progress.is-all-heard{position:relative}
.page-background-page[data-page="mypage"]>main#app{overflow-x:clip}
.all-heard-burst-layer{position:absolute;inset:0;overflow:visible;pointer-events:none;z-index:1}
.all-heard-burst{position:absolute;width:0;height:0;pointer-events:none;z-index:1}
.all-heard-burst-1{left:77%;top:14%}
.all-heard-burst-2{left:17%;top:37%}
.all-heard-burst-3{left:80%;top:62%}
.all-heard-burst-4{left:30%;top:88%}
.all-heard-burst>span{position:absolute;left:0;top:0;color:var(--c-gold);font-size:var(--fs-18);line-height:var(--lh-tight);opacity:0;transform:translate(-50%,-50%) scale(.2);animation:all-heard-pop var(--motion-all-heard-burst) var(--ease-festival) var(--delay) forwards}
.all-heard-burst>span:nth-child(4n+2){color:var(--c-pink)}
.all-heard-burst>span:nth-child(4n+3){color:var(--c-aqua-text)}
.all-heard-burst>span:nth-child(4n){color:var(--c-role-collaborator)}
.all-heard-burst>span:nth-child(3n){font-size:var(--fs-13)}
.all-heard-burst>span:nth-child(5n){font-size:var(--fs-22)}
@keyframes all-heard-pop{15%,55%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1) rotate(var(--r))}}
/* 埋まった視聴進捗のバーは色を変えずに、短い周期で光を通す */
.is-all-heard .award-listening-track{position:relative;overflow:hidden}
.is-all-heard .award-listening-track::after{content:'';position:absolute;inset:0;background:linear-gradient(100deg,transparent 35%,color-mix(in srgb,var(--c-white) 85%,transparent) 50%,transparent 65%);transform:translateX(-100%);animation:utamita-bar-shine var(--motion-award-cycle) var(--ease-festival) infinite;pointer-events:none}
@keyframes utamita-bar-shine{0%{transform:translateX(-100%)}23%,100%{transform:translateX(100%)}}
.is-background .award-listening-track,.is-background .award-listening-track::after{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.all-heard-burst{display:none}.is-all-heard .award-listening-track::after{display:none}}
@media (prefers-reduced-motion: reduce) {
  .festival-hero.utamita-hero-enter .utamita-catch-char,
  .festival-hero.utamita-hero-enter > :is(.top-logo,.hero-logo),
  .festival-hero.utamita-hero-enter > .festival-hero-art > .festival-hero-art-motion { animation: none; }
}

body[data-festival-ux] :where(button:enabled, a.button, a.creator-button, a.profile-button, .site-listen-link, .site-chat-link, .site-account, .site-menu-links a, .participation-choice-button, .my-action-link, .page-return-links a:first-child, summary) {
  transition: transform var(--motion-control) var(--ease-festival), filter var(--motion-control) ease-out;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body[data-festival-ux] :where(button:enabled, a.button, a.creator-button, .site-listen-link, .site-chat-link, .site-account, .site-menu-links a, .participation-choice-button, .my-action-link, .page-return-links a:first-child):hover {
    transform: translateY(calc(-1 * var(--sp-2)));
  }
}
@media (prefers-reduced-motion: no-preference) {
  body[data-festival-ux] :where(button:enabled, a.button, a.creator-button, .site-listen-link, .site-chat-link, .site-account, .site-menu-links a, .participation-choice-button, .my-action-link, .page-return-links a:first-child, summary):active {
    transform: translateY(var(--sp-2)) scale(.98);
  }
  body[data-festival-ux] .utamita-ux-reveal {
    animation: utamita-ux-reveal var(--motion-reveal) ease-out;
  }
  body[data-festival-ux] dialog.utamita-ux-reveal::backdrop { animation: utamita-ux-reveal var(--motion-reveal) ease-out; }
}
@keyframes utamita-ux-reveal { from { opacity: .65; } to { opacity: 1; } }

.utamita-ux-layer {
  position: fixed; inset: 0; width: 100%; height: 100%; overflow: hidden;
  pointer-events: none; user-select: none; contain: strict; z-index: 100;
}
.utamita-ux-burst {
  position: absolute; width: 0; height: 0;
  --ux-spread: var(--sp-20); --ux-near: var(--sp-8);
  --ux-duration: calc(var(--motion-sparkle) * .6); --ux-accent: var(--c-aqua);
}
.utamita-ux-burst.is-success {
  --ux-spread: var(--sp-40); --ux-near: var(--sp-16);
  --ux-duration: var(--motion-sparkle); --ux-accent: var(--c-gold);
}
.utamita-ux-burst::before {
  content: ''; position: absolute; width: var(--sp-24); height: var(--sp-24);
  border: 1px solid var(--ux-accent); border-radius: 50%; opacity: 0;
  animation: utamita-ux-ring var(--ux-duration) ease-out both;
}
.utamita-ux-particle {
  position: absolute; width: var(--sp-8); height: var(--sp-8); color: var(--c-gold);
  opacity: 0; will-change: transform, opacity;
  animation: utamita-ux-sparkle var(--ux-duration) var(--ease-festival) both;
}
.utamita-ux-particle svg { display: block; width: 100%; height: 100%; fill: currentColor; }
.utamita-ux-particle:nth-child(1) { --ux-x: calc(-1 * var(--ux-spread)); --ux-y: calc(-1 * var(--ux-near)); color: var(--c-pink); }
.utamita-ux-particle:nth-child(2) { --ux-x: var(--ux-near); --ux-y: calc(-1 * var(--ux-spread)); width: var(--sp-12); height: var(--sp-12); }
.utamita-ux-particle:nth-child(3) { --ux-x: var(--ux-spread); --ux-y: var(--ux-near); color: var(--c-aqua); }
.utamita-ux-particle:nth-child(4) { --ux-x: calc(-1 * var(--ux-near)); --ux-y: var(--ux-spread); }
.utamita-ux-particle:nth-child(5) { --ux-x: calc(-1 * var(--ux-spread)); --ux-y: calc(-1 * var(--ux-spread)); }
.utamita-ux-particle:nth-child(6) { --ux-x: var(--ux-spread); --ux-y: calc(-1 * var(--ux-spread)); color: var(--c-aqua); }
.utamita-ux-particle:nth-child(7) { --ux-x: var(--ux-spread); --ux-y: var(--ux-spread); }
.utamita-ux-particle:nth-child(8) { --ux-x: calc(-1 * var(--ux-spread)); --ux-y: var(--ux-spread); color: var(--c-pink); }
.utamita-ux-burst.is-success .utamita-ux-particle { width: var(--sp-12); height: var(--sp-12); }
.utamita-ux-burst.is-success .utamita-ux-particle:nth-child(2) { width: var(--sp-16); height: var(--sp-16); }
@keyframes utamita-ux-sparkle {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3) rotate(0deg); }
  15% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--ux-x)), calc(-50% + var(--ux-y))) scale(.4) rotate(45deg); }
}
@keyframes utamita-ux-ring {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  20% { opacity: .5; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.8); }
}
@media (prefers-reduced-motion: reduce) {
  body[data-festival-ux] :where(button, a, summary),
  body[data-festival-ux] .my-registration-panel,
  body[data-festival-ux] details > :not(summary), body[data-festival-ux] dialog,
  body[data-festival-ux] dialog::backdrop { transition: none; animation: none; }
  .utamita-ux-layer { display: none; }
}