@font-face { font-family: 'IM Fell English'; src: url("im-fell-english.ttf") format('truetype'); font-style: normal; font-weight: 400; font-display: swap; }
.finale-title { top: 11.5%; left: 50%; right: auto; width: min(1000px,94vw); margin: 0; isolation: isolate; overflow: visible; font-family: 'IM Fell English', Georgia, serif; font-size: clamp(23px,2.5vw,32px); font-weight: 400; line-height: 1.18; letter-spacing: .12em; color: #e4d6bd; transform: translate3d(-50%,calc((1 - var(--finale-title,0)) * 12px),0); text-shadow: 0 2px 2px #000b, 0 5px 24px #000c; }
.finale-intro, .finale-title .finale-name { display: block; padding: .15em .14em .25em; margin: -.15em -.14em -.25em; opacity: 0; overflow: visible; }
.finale-intro { text-transform: uppercase; }
.finale-title .finale-name { margin-top: .06em; font-family: inherit; font-size: clamp(56px,min(7.2vw,10svh),104px); font-style: normal; font-weight: 400; line-height: 1.15; letter-spacing: .055em; color: inherit; white-space: nowrap; }
.finale-title.is-materializing .finale-intro { animation: ink-materialize 1150ms cubic-bezier(.18,.55,.28,1) both; }
.finale-title.is-materializing .finale-name { animation: ink-materialize 1400ms cubic-bezier(.18,.55,.28,1) 220ms both; }
.finale-title.is-materialized .finale-intro, .finale-title.is-materialized .finale-name { opacity: 1; filter: none; transform: none; }
@keyframes ink-materialize { from { opacity: 0; filter: blur(5px); transform: translate3d(0,6px,0); } to { opacity: 1; filter: blur(0px); transform: translate3d(0,0,0); } }
/* Animate the plaque inside the button, preserving its scroll/centering transform. */
.blood-cta { background: none; }
.blood-cta > .blood-cta-art { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 0; opacity: 1; background: url("sanguine-button.webp") center / 100% 100% no-repeat; text-shadow: none; animation: none; transform-origin: center; transition: transform 180ms ease,filter 180ms ease; }
.blood-cta-label { color: #e27885; text-shadow: 0 1px 0 #450511,0 0 5px #bc263f,0 0 15px #9e183cbb; animation: sanguine-ink 3.7s ease-in-out infinite alternate; }
.blood-cta.is-ready .blood-cta-art { animation: blood-beckon 2600ms ease-in-out infinite; }
.blood-cta.is-ready:hover, .blood-cta:focus-visible { background: none; }
.blood-cta.is-ready:hover .blood-cta-art, .blood-cta:focus-visible .blood-cta-art { animation: none; transform: scale(1.045); filter: drop-shadow(0 0 15px #c02d4c66); }
.blood-cta.is-performing .blood-cta-art { animation: none; transform: none; opacity: 1; }
.blood-cta.is-performing .blood-cta-label { animation: none; opacity: .65; }
@keyframes blood-beckon { 0%,100% { transform: scale(1); filter: drop-shadow(0 0 3px #a31b3333); } 48% { transform: scale(1.035); filter: drop-shadow(0 0 15px #cd2e4c77) drop-shadow(0 0 24px #7b102833); } 64% { transform: scale(1.025); filter: drop-shadow(0 0 10px #a31b3355); } }
@media (max-width: 600px) { .finale-title { top: 18%; font-size: clamp(22px,5.8vw,29px); } .finale-title .finale-name { font-size: clamp(50px,13.5vw,66px); } }
@media (max-width: 600px) and (max-height: 600px) { .finale-title { top: 14.5%; } }
@media (max-height: 550px) and (min-width: 601px) { .finale-title { top: 11.5%; font-size: 4.7svh; } .finale-title .finale-name { font-size: 10.5svh; } }
@media (prefers-reduced-motion: reduce) { .finale-title .finale-intro,.finale-title .finale-name { animation: none !important; opacity: 1; filter: none; transform: none; } .blood-cta-art,.blood-cta-label { animation: none !important; transition: none !important; } }

.finale-panel .blood-cta { transition:opacity 380ms ease,filter 180ms ease; }