:root {
  color-scheme: light;
  --lavender: #f3e8ff;
  --heading: #b9a9cd;
  --body: #545357;
  --serif: "Spectral", "Noto Sans JP", serif;
}
* { box-sizing: border-box; }
.petals { display: none; position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.petal { position: absolute; top: -24px; left: var(--left); width: var(--size); height: calc(var(--size) * 1.5); }
.petal::before { content: ""; display: block; width: 100%; height: 100%; border-radius: 85% 15% 75% 25%; background: linear-gradient(135deg, #fff5fa, #e8b8d2); }
.petals.is-paused .petal, .petals.is-paused .petal::before { animation-play-state: paused; }
@keyframes petal-fall {
  0% { transform: translateY(0); opacity: 0; }
  8%, 85% { opacity: .32; }
  100% { transform: translateY(calc(100vh + 48px)); opacity: 0; }
}
@keyframes petal-sway {
  0% { transform: translateX(-16px) rotate(-25deg) rotateY(0deg); }
  50% { transform: translateX(16px) rotate(35deg) rotateY(65deg); }
  100% { transform: translateX(-16px) rotate(95deg) rotateY(150deg); }
}
@media (prefers-reduced-motion: no-preference) {
  .petals { display: block; }
  .petal { animation: petal-fall var(--fall-duration) var(--delay) linear infinite; }
  .petal::before { animation: petal-sway var(--sway-duration) var(--delay) ease-in-out infinite alternate; }
  .hero-title img { animation: title-appear 1.6s ease-out both; }
  .reveal { transition: opacity 1s ease, transform 1s cubic-bezier(.22, 1, .36, 1); }
  .reveal-pending { opacity: 0; transform: translateY(24px); }
  .past-works img { transition: transform .5s ease, filter .5s ease; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .past-works picture:hover img { transform: translateY(-4px); filter: brightness(1.04); }
}
@keyframes title-appear {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
body { margin: 0; color: var(--body); font-family: "Noto Sans JP", sans-serif; background-color: var(--lavender); background-image: url("img/pc_bg.png"); background-repeat: repeat; background-position: center top; background-size: 382px 375px; }
h1, h2, h3, p, dl, dd, ul { margin: 0; }
img { display: block; max-width: 100%; }
.hero { position: relative; z-index: 1; width: 100%; }
.hero-art { width: 100%; height: auto; }
.hero-title { position: absolute; top: 31.36%; left: 51.04%; width: 46.2%; }
.hero-title img { width: 100%; height: auto; }
.contents { --panel-color: #ffffffcc; position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; gap: 70px; width: min(1100px, calc(100% - 150px)); margin: max(-140px, -7.2917vw) auto 0; padding: clamp(80px, 8.3333vw, 160px) 40px 160px; }
/* Extend the panel behind the curved hero without moving the content. */
.contents-backdrop { position: absolute; inset: -20vw 0 0; z-index: -1; background: var(--panel-color); pointer-events: none; }
.contents::before, .contents::after { content: ""; position: absolute; top: -20vw; bottom: 0; width: 61px; background: url("img/race-right.png") repeat-y left top / 61px 77px; pointer-events: none; }
.contents::before { right: calc(100% + 8px); transform: scaleX(-1); }
.contents::after { left: calc(100% + 8px); }
section { width: 100%; }
.section-title { font: 500 100px/1.52 var(--serif); text-align: center; color: var(--heading); padding-bottom: 50px; }
.section-title > span { display: inline-block; position: relative; overflow: hidden; vertical-align: top; }
.title-text { display: block; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .title-text {
    background-color: var(--heading);
    background-image: linear-gradient(#b9a9cd80, #b9a9cd80), url("img/font-bg.png");
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 100% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
  }
}
.section-title > .title-ornament { display: block; overflow: visible; width: 233px; height: 14px; margin: -14px auto 0; background: url("img/line-stems.png") center / 100% 100% no-repeat; }
.flower { position: absolute; top: 0; width: 6.438%; height: 100%; object-fit: contain; }
.flower-pink { left: 41.202%; }
.flower-teal { left: 51.931%; }
.story-copy, .thanks-copy { max-width: 714px; margin: 10px auto 0; font-size: 16px; line-height: 2; text-align: center; }
.catchphrase { font-size: 32px; font-weight: 700; }
.character-list { display: flex; flex-direction: column; gap: 40px; max-width: 760px; margin: auto; }
.character { --accent: #bf6f9b; display: grid; grid-template-columns: minmax(0, 420px) 320px; gap: 20px; align-items: start; color: #0a2235; }
.character-art { width: 320px; height: 634px; object-fit: contain; grid-column: 2; grid-row: 1; }
.profile { display: flex; flex-direction: column; gap: 40px; grid-column: 1; grid-row: 1; }
.character-name { align-self: flex-start; text-align: center; }
.character-name h3 { font: 700 40px/48px var(--serif); color: var(--accent); }
.character-name p { font-size: 13px; font-weight: 500; letter-spacing: 2.6px; color: #9f9f9f; }
.profile-details { display: flex; flex-direction: column; gap: 30px; font-size: 14px; line-height: 1.5; }
dl { display: flex; flex-direction: column; gap: 30px; }
dl > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 6px; }
dt { font-family: var(--serif); font-weight: 700; color: var(--accent); }
.favorites { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.favorites li { display: flex; align-items: center; gap: 10px; }
.favorites span { width: 64px; flex-shrink: 0; border-radius: 4px; padding: 2px 0; background: var(--accent); color: white; font: 400 12px/12px var(--serif); text-align: center; }
.quote { color: var(--accent); font-size: 32px; font-weight: 500; line-height: 48px; white-space: nowrap; }
.kurone { --accent: #3c9b9b; grid-template-columns: 308px minmax(0, 432px); }
.kurone .character-art { width: 308px; grid-column: 1; }
.kurone .profile { grid-column: 2; }
.thanks-copy { font-weight: 500; }
.past-works { width: min(100%, 970px); display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.past-works img { width: 100%; height: auto; }
.past-works a { display: block; min-width: 0; }
.past-works a:focus-visible { outline: 3px solid #bf6f9b; outline-offset: 5px; }
.footer { min-height: 251px; padding: 40px 16px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; background: #cdbee2; text-align: center; color: white; }
.footer > img { width: 200px; height: 79px; object-fit: contain; }
.footer small { display: block; font-size: 12px; font-weight: 500; line-height: 1.5; }
@media (min-width: 768px) and (max-width: 1100px) {
  .contents { padding-inline: 24px; }
  .character { grid-template-columns: minmax(0, 1fr) 40%; }
  .kurone { grid-template-columns: 40% minmax(0, 1fr); }
  .character-art { width: 100%; height: auto; }
  .quote { font-size: clamp(20px, 2.5vw, 28px); }
  .biography br { display: none; }
  dl > div { grid-template-columns: 70px minmax(0, 1fr); }
}
@media (max-width: 767px) {
  .petal:nth-child(n + 4) { display: none; }
  body { background-image: url("img/sp/sp_bg.png"); background-size: 191px 188px; }
  .hero-title { top: auto; bottom: 6%; left: 0; width: 100%; }
  .contents { --panel-color: #ffffff99; width: calc(100% - 44px); max-width: 520px; margin-top: -90px; padding: 100px 10px 80px; gap: 40px; }
  .contents::before, .contents::after { width: 12px; background-size: 12.2px 15.4px; }
  .contents::before { right: 100%; }
  .contents::after { left: 100%; }
  .section-title { font-size: 64px; padding-bottom: 30px; }
  .section-title > .title-ornament { width: 192.5px; height: 11.5px; margin-top: -11.5px; }
  .story-copy { max-width: 320px; }
  .catchphrase { font-size: clamp(17px, 5.7vw, 22px); white-space: nowrap; }
  .character-list { max-width: 320px; gap: 20px; padding-top: 32px; }
  .character, .kurone { display: flex; flex-direction: column; align-items: center; gap: 20px; }
  .character-art, .kurone .character-art { width: 300px; height: 595px; object-fit: contain; }
  .profile { width: 100%; gap: 30px; }
  .character-name { align-self: center; }
  .profile-details, dl { gap: 20px; }
  dl > div { grid-template-columns: 60px minmax(0, 1fr); gap: 20px; }
  .quote { font-size: clamp(19px, 6.2vw, 24px); }
  .thanks-copy { font-size: 14px; line-height: 32px; max-width: 320px; }
  .past-works { width: min(290px, 100%); grid-template-columns: 1fr; gap: 20px; }
  .footer { min-height: 173px; padding: 20px 8px; }
  .footer small { font-size: clamp(10px, 3.1vw, 12px); }
}

/* Brief, one-time accents; static content remains readable without JavaScript. */
.opening-veil { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .opening-veil { display: block; position: fixed; inset: 0; background: #fffaff; z-index: 5; pointer-events: none; animation: veil-away 1.1s ease-out both; }
  .section-title.is-revealed .flower { animation: flower-turn 4s .25s ease-in-out both; }
  .section-title.is-revealed .flower-teal { animation-name: flower-turn-back; animation-delay: .4s; }
  .quote.reveal { transition-delay: .25s; }
  .hero-title { transform: translateY(var(--hero-offset, 0px)); }
  .hero-title::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(110deg, transparent 35%, #ffffff99 50%, transparent 65%) no-repeat; background-size: 250% 100%; mask: url("img/logo.png") center / 100% 100% no-repeat; -webkit-mask: url("img/logo.png") center / 100% 100% no-repeat; animation: logo-shimmer 2.4s 1.2s ease-in-out both; }
}
@keyframes veil-away { from { opacity: .8; } to { opacity: 0; visibility: hidden; } }
@keyframes flower-turn { 0% { transform: rotate(-45deg); } 40% { transform: rotate(30deg); } 75% { transform: rotate(-15deg); } 100% { transform: rotate(0); } }
@keyframes flower-turn-back { 0% { transform: rotate(45deg); } 40% { transform: rotate(-30deg); } 75% { transform: rotate(15deg); } 100% { transform: rotate(0); } }
@keyframes logo-shimmer { 0% { background-position: 140% 0; opacity: 0; } 15%, 80% { opacity: .5; } 100% { background-position: -40% 0; opacity: 0; } }
@media (max-width: 767px) {
  .hero-title::after { display: none; }
}

.sp-only { display: none; }
@media (max-width: 767px) {
  .sp-only { display: inline; }
}