body.ember-active { background: #35271f; }
body.ember-active::before { opacity: .08; }
body.ember-active .site-header, body.ember-active .site-footer { display: none; }
body.ember-active .brand, body.ember-active .text-button, body.ember-active .site-footer,
body.ember-active .header-note { color: #c9b59e; }
.ember-scene { color: #e9dfcf; min-height: 100svh; padding-block: 24px; }
.ember-field { position: relative; height: 660px; margin: 12px auto; isolation: isolate; }
.ember-card { position: absolute; left: var(--x); top: var(--y); width: clamp(110px, 16vw, 192px); aspect-ratio: 3/4; transform: translate(-50%,-50%) rotate(var(--angle)); transition: left 1.15s cubic-bezier(.22,.8,.25,1), top 1.15s cubic-bezier(.22,.8,.25,1), transform 1.15s ease; }
.ember-card.is-gathered { left: var(--target-x); top: var(--target-y); transform: translate(-50%,-50%); z-index: 2; }
.ember-card.is-revealing { z-index: 4; }
.ember-card { transition: left 1.5s cubic-bezier(.22,.8,.25,1), top 1.5s cubic-bezier(.22,.8,.25,1), transform 1.5s ease, width 1.5s ease; }
.ember-card.is-center-video { width: min(32vw, 340px); z-index: 5; }
.ember-card.is-surrounding-photo { transform: translate(-50%,-50%) rotate(var(--final-angle)); }
.ember-card.is-center-video .ember-photo { border-color: #d0b697; box-shadow: 0 0 60px #d6b48330, 0 24px 60px #160f0c99; }
.ember-photo, .ember-cover { position: absolute; inset: 0; border-radius: 5px; }
.ember-photo { overflow: hidden; background: #251b15; box-shadow: 0 15px 40px #160f0c80; border: 5px solid #bca286; }
.ember-photo img, .ember-photo video { display: block; width: 100%; height: 100%; object-fit: contain; }
.ember-cover { width: 100%; border: 1px solid #a68562; background: repeating-linear-gradient(135deg, transparent 0 15px, #99755212 15px 16px), radial-gradient(ellipse at top, #bfa88a, #836448); color: #e1c8a2; font: 55px Georgia,serif; display: grid; place-items: center; box-shadow: 0 12px 32px #170f0b88; }
.ember-cover::after { content: ''; position: absolute; inset: 10px; border: 1px solid #ddc7a34a; border-radius: 2px; }
.ember-cover:disabled { opacity: 1; cursor: default; }
.ember-card.is-waiting .ember-cover { animation: coal-breathe 3.5s ease-in-out infinite; }
.ember-card.is-open .ember-cover { visibility: hidden; }
.ember-card.is-revealing .ember-cover { pointer-events: none; animation: coal-smoulder 2.4s ease-in 1.1s both; }
.ember-card.is-revealing[data-effect=burn] .ember-cover { animation-name: coal-burn; }
.ember-card.is-revealing[data-effect=melt] .ember-cover { animation-name: coal-melt; }
.ember-card.is-revealing[data-effect=light] .ember-cover { animation-name: coal-light; }
.ember-card.is-open .ember-photo { box-shadow: 0 0 28px #d6b48322, 0 15px 40px #160f0c80; }
.ember-particles { position: absolute; inset: 0; pointer-events: none; }
.ember-particles i { position: absolute; left: 50%; top: 40%; width: 3px; height: 3px; background: #d1af7c; border-radius: 50%; opacity: 0; }
.is-revealing:not([data-effect=light]) .ember-particles i { animation: coal-ash 1.8s ease-out calc(1.2s + var(--delay)) both; }
.ember-words { min-height: 110px; max-width: 900px; margin: 16px auto; text-align: center; font: clamp(25px,3vw,42px)/1.35 Georgia,serif; color: #e5d2b8; text-wrap: balance; }
.ember-line[hidden] { display: none; }
.ember-line.is-writing { animation: ash-words 1.5s ease-out both; }
.ember-line:last-child { display: block; margin-top: 14px; color: #edc99f; }
.ember-line:last-child[hidden] { display: none; }
.ember-actions { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }
.ember-actions [hidden] { display: none; }
@keyframes coal-breathe { 50% { box-shadow: 0 0 24px #d3a26740; filter: brightness(1.08); } }
@keyframes coal-smoulder {
  0% { clip-path: inset(0); }
  35% { filter: sepia(.8) brightness(.6); box-shadow: inset 0 -22px 30px #c87834; }
  65% { clip-path: polygon(0 0,100% 0,100% 65%,85% 58%,70% 67%,55% 50%,40% 62%,25% 48%,0 60%); filter: sepia(1) brightness(.5); }
  100% { clip-path: polygon(0 0,100% 0,100% 0,85% 0,70% 0,55% 0,40% 0,25% 0,0 0); opacity: 0; }
}
@keyframes coal-burn {
  0% { clip-path: inset(0); }
  25% { filter: sepia(1) brightness(1.35); box-shadow: inset 0 -90px 50px #d18a42; }
  55% { clip-path: polygon(0 0,100% 0,100% 35%,85% 58%,70% 22%,55% 50%,40% 20%,25% 48%,0 30%); filter: sepia(1) brightness(.8); }
  100% { clip-path: inset(0 0 100%); opacity: 0; }
}
@keyframes coal-melt { 35% { filter: blur(2px); border-radius: 5px 5px 40% 30%; } 100% { transform: translateY(75px) scaleY(.05); transform-origin: bottom; filter: blur(12px); opacity: 0; } }
@keyframes coal-light { 45% { box-shadow: 0 0 50px #dec7a260; filter: brightness(1.15); } 100% { opacity: 0; filter: blur(8px); } }
@keyframes coal-ash { 15% { opacity: .8; box-shadow: 0 0 6px #d99554; } 100% { opacity: 0; transform: translate(var(--dx),var(--dy)) rotate(180deg); filter: blur(2px); } }
@keyframes ash-words { from { opacity: 0; filter: blur(12px); text-shadow: 0 -30px 8px #bfa17e; } to { opacity: 1; filter: blur(0); text-shadow: 0 0 0 transparent; } }
@media(max-width:700px) {
  .ember-field { height: 500px; }
  .ember-card { width: clamp(105px, 30vw, 160px); }
  .ember-field.is-finale { height: 600px; }
  .ember-card.is-center-video { width: min(62vw, 240px); }
  .ember-card.is-surrounding-photo { width: 78px; }
  .ember-words { font-size: 27px; min-height: 140px; }
}
@media(prefers-reduced-motion:reduce) {
  .ember-card, .ember-cover, .ember-line, .ember-particles i { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
}