/* ==========================================================================
   The Offering: the portal chamber, its queue of votive relics,
   and the page-wide drop portal that blazes when files are dragged in.
   ========================================================================== */

.chamber-offering { width: min(720px, calc(100vw - 24px)); }
.chamber-offering::backdrop { transition: opacity .4s ease-in; }
.chamber-offering.is-leaving::backdrop { opacity: 0; }
.chamber-offering.is-leaving .offering { animation: offering-ascend .42s ease-in forwards; }

.offering {
  overflow-x: hidden;
  transition: box-shadow .4s;
}
.offering.is-receiving {
  box-shadow: 0 0 0 1px #000, 0 0 0 4px rgba(255, 214, 120, .35), 0 0 120px rgba(255, 186, 72, .6), 0 30px 90px rgba(0, 0, 0, .85);
}
.offering .chamber-title { margin-inline: 30px; }

.offering-kicker {
  margin: 0;
  color: var(--gold-2);
  font: 700 .68rem/1.4 var(--font-head);
  letter-spacing: .34em;
  text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   The portal
   -------------------------------------------------------------------------- */
.offering-stage {
  position: relative;
  display: grid;
  justify-items: center;
  padding: clamp(30px, 6vw, 54px) 0 4px;
}

.offering-portal {
  --size: clamp(210px, 60vw, 296px);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 8px 10px;
  border: 0;
  border-radius: 14px;
  background: none;
  color: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.offering-portal:focus-visible { outline: none; }
.offering-portal:focus-visible .portal-disc {
  box-shadow: 0 0 0 3px var(--abyss), 0 0 0 5px var(--gold-hi), 0 0 60px rgba(255, 200, 90, .8);
}
.offering-portal:focus-visible .portal-label { text-decoration: underline 1px var(--gold-2); text-underline-offset: .35em; }

.portal-disc {
  position: relative;
  display: block;
  flex: none;
  width: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255, 220, 140, .4), 0 0 46px rgba(255, 170, 50, .5), 0 0 130px rgba(255, 140, 30, .28);
  transition: width .6s var(--ease-divine), scale .55s var(--ease-slam), box-shadow .4s;
}
.portal-disc > * {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
}

.portal-aura {
  inset: -26%;
  background: radial-gradient(closest-side, rgba(255, 206, 100, .55), rgba(255, 150, 40, .2) 55%, transparent);
  animation: portal-breathe 3.4s ease-in-out infinite;
  transition: opacity .4s, scale .6s var(--ease-divine);
}
.portal-sunburst {
  inset: -34%;
  animation: portal-spin 70s linear infinite;
  transition: opacity .4s, scale .6s var(--ease-divine);
}
.portal-sunburst::before,
.portal-sunburst::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 226, 150, 0) 0deg 12deg, rgba(255, 226, 150, .5) 14.2deg, rgba(255, 226, 150, 0) 16.4deg 30deg);
  -webkit-mask: radial-gradient(closest-side, transparent 50%, #000 58%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 50%, #000 58%, transparent 100%);
}
.portal-sunburst::after {
  background: repeating-conic-gradient(from 7deg, rgba(255, 196, 96, 0) 0deg 4deg, rgba(255, 204, 110, .42) 5deg, rgba(255, 196, 96, 0) 6deg 10deg);
  -webkit-mask: radial-gradient(closest-side, transparent 52%, #000 58%, transparent 80%);
  mask: radial-gradient(closest-side, transparent 52%, #000 58%, transparent 80%);
  animation: portal-spin 34s linear infinite reverse;
}
.portal-well {
  background:
    radial-gradient(circle, #fffbea 0%, #ffe19a 8%, #e8ac3c 17%, #8a5410 31%, #3a2306 48%, #140b03 64%, #050302 82%, #000 100%);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .9), inset 0 0 30px rgba(0, 0, 0, .9);
}
.portal-rays {
  inset: 1%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 236, 180, 0) 0deg 4.5deg, rgba(255, 236, 180, .62) 7.5deg, rgba(255, 236, 180, 0) 10.5deg 15deg);
  -webkit-mask: radial-gradient(closest-side, transparent 16%, #000 30%, #000 58%, transparent 92%);
  mask: radial-gradient(closest-side, transparent 16%, #000 30%, #000 58%, transparent 92%);
  mix-blend-mode: screen;
  animation: portal-spin 46s linear infinite;
}
.portal-rays-rev {
  background: repeating-conic-gradient(from 3deg, rgba(255, 196, 96, 0) 0deg 2.5deg, rgba(255, 210, 120, .5) 4deg, rgba(255, 196, 96, 0) 5.5deg 9deg);
  -webkit-mask: radial-gradient(closest-side, transparent 22%, #000 34%, #000 50%, transparent 80%);
  mask: radial-gradient(closest-side, transparent 22%, #000 34%, #000 50%, transparent 80%);
  animation-duration: 30s;
  animation-direction: reverse;
}
.portal-swirl {
  inset: 6%;
  background: conic-gradient(from 0deg,
    transparent 0turn, rgba(255, 220, 140, .6) .07turn, transparent .2turn,
    transparent .33turn, rgba(255, 220, 140, .6) .4turn, transparent .53turn,
    transparent .66turn, rgba(255, 220, 140, .6) .73turn, transparent .86turn);
  -webkit-mask: radial-gradient(closest-side, transparent 26%, #000 48%, transparent 86%);
  mask: radial-gradient(closest-side, transparent 26%, #000 48%, transparent 86%);
  filter: blur(4px);
  mix-blend-mode: screen;
  animation: portal-spin 10s linear infinite;
}
.portal-flare {
  inset: -18%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 246, 214, 0) 0deg 8deg, rgba(255, 246, 214, .85) 9.5deg, rgba(255, 246, 214, 0) 11deg 20deg);
  -webkit-mask: radial-gradient(closest-side, transparent 34%, #000 48%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 34%, #000 48%, transparent 100%);
  mix-blend-mode: screen;
  opacity: 0;
  transition: opacity .35s;
  animation: portal-spin 6s linear infinite reverse;
}
.portal-ring {
  inset: 5%;
  border: 2px solid rgba(255, 228, 156, .9);
  box-shadow: 0 0 14px rgba(255, 196, 80, .7), inset 0 0 14px rgba(255, 196, 80, .5);
}
.portal-ring::after {
  content: '';
  position: absolute;
  inset: 8.5%;
  border-radius: 50%;
  border: 1px solid rgba(249, 220, 133, .5);
}
.portal-runes { animation: portal-spin 80s linear infinite reverse; transition: opacity .4s; }
.portal-runes svg { display: block; width: 100%; height: 100%; overflow: visible; }
.portal-runes text {
  fill: rgba(255, 236, 184, .88);
  font: 700 9.2px var(--font-head);
  letter-spacing: .5px;
}
.portal-core {
  inset: 29%;
  background: radial-gradient(closest-side, #fff 0%, #fff7da 30%, rgba(255, 222, 140, .75) 55%, rgba(255, 180, 70, 0) 100%);
  animation: portal-pulse 2.6s ease-in-out infinite;
  transition: scale .5s var(--ease-slam);
}
.portal-glyph {
  inset: 38%;
  display: grid;
  place-items: center;
  color: #3a2306;
  animation: portal-bob 2.6s ease-in-out infinite;
}
.portal-glyph svg { width: 100%; height: 100%; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .9)); }

.portal-embers { inset: -12%; border-radius: 0; transition: opacity .4s; }
.portal-embers i {
  position: absolute;
  left: calc(50% + var(--x));
  top: 58%;
  width: var(--s);
  height: var(--s);
  border-radius: 50%;
  background: #fff1c4;
  box-shadow: 0 0 6px 2px rgba(255, 170, 60, .85);
  opacity: 0;
  animation: portal-ember var(--dur) var(--delay) linear infinite;
}

.portal-words {
  display: grid;
  gap: 6px;
  justify-items: center;
  max-width: 24em;
  text-wrap: balance;
}
.portal-label {
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 2px 0 #2a1703) drop-shadow(0 0 14px rgba(255, 176, 56, .45));
  font: 700 clamp(.98rem, 3.4vw, 1.18rem)/1.25 var(--font-head);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.portal-hint {
  color: var(--text-dim);
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.3;
}

/* The portal flares when touched, focused or fed. */
@media (hover: hover) {
  .offering-portal:hover .portal-disc { scale: 1.05; }
  .offering-portal:hover .portal-flare { opacity: .75; }
  .offering-portal:hover .portal-aura { scale: 1.15; }
}
.offering.is-receiving .portal-disc,
.offering.is-triumphant .portal-disc {
  scale: 1.1;
  box-shadow: 0 0 0 2px rgba(255, 240, 190, .8), 0 0 70px rgba(255, 196, 80, .85), 0 0 180px rgba(255, 150, 40, .5);
}
.offering.is-receiving .portal-flare,
.offering.is-triumphant .portal-flare { opacity: 1; }
.offering.is-receiving .portal-aura { scale: 1.4; }
.offering.is-receiving .portal-sunburst { scale: 1.18; }
.offering.is-triumphant .portal-sunburst { scale: 1.4; }
.offering.is-receiving .portal-core { scale: 1.25; }
.offering.is-triumphant .portal-aura { scale: 1.9; }
.offering.is-triumphant .portal-core { scale: 1.6; }
.portal-disc.is-fed { animation: portal-gulp .8s var(--ease-slam); }

/* Once relics wait on the altar the portal steps aside. */
.offering.has-relics .offering-stage { padding-top: 16px; }
.offering.has-relics .offering-portal {
  --size: clamp(84px, 20vw, 108px);
  flex-direction: row;
  gap: clamp(16px, 4vw, 26px);
  text-align: left;
}
.offering.has-relics .portal-words { justify-items: start; }
.offering.has-relics .portal-label { font-size: clamp(.86rem, 2.8vw, 1rem); }
.offering.has-relics .portal-hint { font-size: .98rem; }
.offering.has-relics .portal-runes,
.offering.has-relics .portal-embers { opacity: 0; }
.offering.has-relics .portal-sunburst { opacity: .7; }

/* --------------------------------------------------------------------------
   Notices
   -------------------------------------------------------------------------- */
.offering-notice { display: flex; justify-content: center; }
.offering-notice-text {
  display: block;
  max-width: 36em;
  margin-top: 14px;
  padding: .6em 1.1em;
  border: 1px solid var(--gold-4);
  border-radius: 4px;
  background: rgba(12, 7, 2, .85);
  box-shadow: 0 0 18px rgba(255, 176, 56, .18);
  color: var(--gold-1);
  font: 600 .8rem/1.45 var(--font-head);
  letter-spacing: .06em;
  animation: notice-in .45s var(--ease-divine);
}
.offering-notice-text[data-tone='error'] { border-color: rgba(255, 106, 69, .6); color: #ffcdbd; }

/* --------------------------------------------------------------------------
   The queue
   -------------------------------------------------------------------------- */
.offering-queue {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  text-align: left;
}
.offering-queue:empty { display: none; }

.votive {
  --thumb: 74px;
  position: relative;
  display: grid;
  grid-template-columns: calc(var(--thumb) + 6px) minmax(0, 1fr) 40px 40px;
  grid-template-areas:
    'thumb title reroll remove'
    'thumb status status status'
    'thumb bar bar bar';
  align-items: center;
  gap: 6px 8px;
  padding: 10px 12px 12px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background:
    linear-gradient(100deg, rgba(52, 33, 10, .92), rgba(16, 10, 4, .94) 62%) padding-box,
    linear-gradient(100deg, rgba(232, 189, 89, .75), rgba(107, 68, 14, .35) 48%, rgba(232, 189, 89, .55)) border-box;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 236, 180, .08);
  animation: votive-in .55s var(--ease-divine) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: box-shadow .4s;
}

.votive-thumb {
  grid-area: thumb;
  align-self: start;
  position: relative;
  width: var(--thumb);
  aspect-ratio: 1;
  border-radius: 3px;
  overflow: hidden;
  background: radial-gradient(circle, #2a1703, #050302);
  box-shadow: 0 0 0 1px #000, 0 0 0 2px var(--gold-3), 0 0 0 3px #000, 0 6px 16px rgba(0, 0, 0, .6);
}
.votive-thumb img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.votive-thumb.is-blind img { visibility: hidden; }
.votive-sigil {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--gold-3);
  font-size: 1.9rem;
}
.votive-seal {
  position: absolute;
  right: 4px;
  bottom: 4px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: linear-gradient(180deg, #fff4cc, #e0ad45 55%, #9a6418);
  box-shadow: 0 0 0 1px #2a1703, 0 0 12px rgba(255, 200, 90, .9);
  color: #2a1703;
  scale: 0;
  transition: scale .5s var(--ease-slam) .1s;
}
.votive-seal svg { width: 15px; height: 15px; }

.votive-title {
  grid-area: title;
  width: 100%;
  min-width: 0;
  height: 40px;
  padding: 0 .75em;
  border: 1px solid rgba(176, 122, 34, .6);
  border-radius: 3px;
  background: rgba(5, 3, 2, .78);
  color: var(--gold-hi);
  font: 600 1.1rem/1 var(--font-body);
  transition: border-color .2s, box-shadow .2s;
}
.votive-title::placeholder { color: rgba(205, 180, 130, .72); font-style: italic; }
.votive-title:focus { outline: none; border-color: var(--gold-1); box-shadow: 0 0 0 1px var(--gold-2), 0 0 18px rgba(255, 190, 80, .35); }
.votive-title[readonly] { border-color: rgba(107, 68, 14, .5); }

.votive-btn {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(176, 122, 34, .6);
  border-radius: 3px;
  background: linear-gradient(#1f1407, #0a0602);
  color: var(--gold-1);
  cursor: pointer;
  transition: color .2s, border-color .2s, box-shadow .25s, opacity .3s;
}
.votive-btn svg { width: 20px; height: 20px; pointer-events: none; }
.votive-btn:hover:not(:disabled) { color: var(--gold-hi); border-color: var(--gold-2); box-shadow: var(--glow); }
.votive-btn:disabled { opacity: .28; cursor: default; }
.votive-reroll { grid-area: reroll; }
.votive-remove { grid-area: remove; }
.votive-remove:hover:not(:disabled) { color: #ffd2c2; border-color: var(--danger); box-shadow: 0 0 18px rgba(255, 106, 69, .35); }
.votive-reroll.is-rolling svg { animation: die-roll .6s var(--ease-slam); }

.votive-status {
  grid-area: status;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .1em .9em;
  min-height: 1.3em;
  margin: 0;
  color: var(--text-dim);
  font: italic 500 1rem/1.3 var(--font-body);
}
.votive-retry { padding: .2em 0; font-size: .7rem; font-style: normal; color: var(--gold-1); }
.votive-retry[hidden] { display: none; }

.votive-bar {
  grid-area: bar;
  position: relative;
  height: 5px;
  border-radius: 3px;
  overflow: hidden;
  background: rgba(0, 0, 0, .65);
  box-shadow: inset 0 0 0 1px rgba(107, 68, 14, .6);
}
.votive-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #7d4e10, #e0ad45 55%, #fff4cc);
  box-shadow: 0 0 12px rgba(255, 190, 80, .9);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
  transition: transform .3s ease-out;
}
.votive-fill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  translate: -100% 0;
  opacity: 0;
}

/* States */
.votive[data-state='preparing'],
.votive[data-state='uploading'] {
  box-shadow: 0 6px 20px rgba(0, 0, 0, .45), 0 0 26px rgba(255, 180, 60, .25), inset 0 1px 0 rgba(255, 236, 180, .12);
}
.votive[data-state='preparing'] .votive-status,
.votive[data-state='uploading'] .votive-status { color: var(--gold-1); }
.votive[data-state='preparing'] .votive-fill {
  right: auto;
  width: 38%;
  transform: none;
  animation: votive-seek 1.1s ease-in-out infinite;
}
.votive[data-state='uploading'] .votive-fill::after { opacity: 1; animation: votive-shine 1.2s linear infinite; }
.votive[data-state='risen'] {
  background:
    linear-gradient(100deg, rgba(120, 78, 18, .92), rgba(36, 22, 7, .94) 66%) padding-box,
    linear-gradient(100deg, #fff0b8, #c8902a 50%, #fff0b8) border-box;
  box-shadow: 0 0 34px rgba(255, 190, 80, .4), inset 0 1px 0 rgba(255, 244, 210, .25);
  animation: votive-exalt .9s var(--ease-slam);
}
.votive[data-state='risen'] .votive-seal { scale: 1; }
.votive[data-state='risen'] .votive-status {
  color: var(--gold-hi);
  font: 700 .72rem/1.4 var(--font-head);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.votive[data-state='risen'] .votive-fill { transform: scaleX(1); }
.votive[data-state='failed'] {
  background:
    linear-gradient(100deg, rgba(58, 18, 8, .92), rgba(18, 8, 4, .94) 62%) padding-box,
    linear-gradient(100deg, rgba(255, 106, 69, .75), rgba(107, 30, 14, .35) 50%, rgba(255, 106, 69, .5)) border-box;
}
.votive[data-state='failed'] .votive-status { color: #ffbfa9; }
.votive[data-state='failed'] .votive-fill {
  transform: scaleX(1);
  background: linear-gradient(90deg, #5a1a0c, #ff6a45);
  box-shadow: none;
  opacity: .55;
}
.votive.is-leaving { animation: votive-out .3s ease-in forwards; pointer-events: none; }

/* --------------------------------------------------------------------------
   Actions and fine print
   -------------------------------------------------------------------------- */
.offering-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 24px;
  margin-top: 24px;
}
.offering-submit {
  min-height: 54px;
  padding: 1em 1.7em;
  font-size: .9rem;
}
.offering-submit:not(:disabled) { animation: submit-call 2.6s ease-in-out infinite; }
.offering-submit:disabled {
  background: linear-gradient(#170e05, #080402) padding-box, var(--gold-frame) border-box;
  color: var(--gold-3);
  text-shadow: none;
  opacity: .55;
}
.offering-crown { display: block; width: 1.3em; height: 1.3em; }
.offering-crown svg { display: block; width: 100%; height: 100%; }
.offering-count {
  display: inline-grid;
  place-items: center;
  min-width: 1.9em;
  height: 1.9em;
  padding: 0 .45em;
  border-radius: 999px;
  background: #2a1703;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 180, .35);
  color: var(--gold-1);
  font-size: .8rem;
  letter-spacing: 0;
  text-shadow: none;
}
.offering-count[hidden],
.offering-clear[hidden] { display: none; }

.offering-fine {
  max-width: 38em;
  margin: 24px auto 0;
  padding-top: 16px;
  border-top: 1px solid rgba(107, 68, 14, .55);
  color: var(--text-dim);
  font-size: .98rem;
  line-height: 1.45;
}
.offering-fine strong { color: var(--gold-1); font-weight: 700; }

@media (max-width: 540px) {
  .votive {
    --thumb: 60px;
    grid-template-columns: calc(var(--thumb) + 4px) minmax(0, 1fr) 40px 40px;
    grid-template-areas:
      'thumb title title title'
      'thumb status reroll remove'
      'bar bar bar bar';
    padding: 9px;
  }
  .votive-status { font-size: .95rem; }
  .offering-submit { width: 100%; }
  .offering .chamber-sub { font-size: 1.08rem; }
}
@media (max-width: 479px) {
  .offering-kicker { display: none; }
}

/* --------------------------------------------------------------------------
   The drop portal: the whole page becomes a gate while files are dragged in
   -------------------------------------------------------------------------- */
.drop-portal {
  position: fixed;
  inset: 0;
  z-index: var(--z-summoning);
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background: radial-gradient(circle at 50% 50%, rgba(150, 92, 16, .55), rgba(22, 13, 4, .9) 52%, rgba(3, 2, 1, .97));
  text-align: center;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease-out, visibility 0s linear .25s;
}
.drop-portal.is-active { opacity: 1; visibility: visible; transition: opacity .18s ease-out; }
.drop-portal::before {
  content: '';
  position: absolute;
  inset: 12px;
  border: 2px solid rgba(249, 220, 133, .85);
  border-radius: 6px;
  outline: 1px solid rgba(249, 220, 133, .35);
  outline-offset: -10px;
  box-shadow: inset 0 0 60px rgba(255, 186, 72, .35), 0 0 40px rgba(255, 186, 72, .35);
  animation: drop-frame 1.5s ease-in-out infinite alternate;
}
.drop-portal-sun {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(150vmax, 900px);
  aspect-ratio: 1;
  border-radius: 50%;
  translate: -50% -50%;
  background: repeating-conic-gradient(from 0deg, rgba(255, 222, 140, 0) 0deg 4deg, rgba(255, 222, 140, .34) 6deg, rgba(255, 222, 140, 0) 8deg 12deg);
  -webkit-mask: radial-gradient(closest-side, transparent 8%, #000 20%, rgba(0, 0, 0, .55) 52%, transparent 100%);
  mask: radial-gradient(closest-side, transparent 8%, #000 20%, rgba(0, 0, 0, .55) 52%, transparent 100%);
  animation: portal-spin 40s linear infinite;
}
.drop-portal-sun-rev {
  background: repeating-conic-gradient(from 3deg, rgba(255, 180, 70, 0) 0deg 9deg, rgba(255, 196, 90, .26) 12deg, rgba(255, 180, 70, 0) 15deg 24deg);
  animation-duration: 24s;
  animation-direction: reverse;
}
.drop-portal-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(80vmin, 640px);
  aspect-ratio: 1;
  border: 3px solid rgba(255, 238, 190, .95);
  border-radius: 50%;
  translate: -50% -50%;
  background: radial-gradient(closest-side, rgba(16, 9, 3, .88) 0%, rgba(20, 12, 4, .78) 62%, rgba(255, 190, 80, .28) 92%, rgba(255, 220, 140, .5) 100%);
  box-shadow:
    0 0 0 9px rgba(224, 173, 69, .14),
    0 0 0 11px rgba(249, 220, 133, .55),
    0 0 90px rgba(255, 190, 80, .85),
    inset 0 0 70px rgba(255, 190, 80, .5);
}
.drop-portal.is-active .drop-portal-ring { animation: drop-ring-in .6s var(--ease-slam), drop-ring 1.5s .6s ease-in-out infinite alternate; }
.drop-portal-words {
  position: relative;
  display: grid;
  justify-items: center;
  gap: .55em;
  max-width: min(15em, 70vmin);
}
.drop-portal.is-active .drop-portal-words { animation: drop-words-in .55s var(--ease-slam); }
.drop-portal-kicker {
  margin: 0;
  color: var(--gold-1);
  font: 700 clamp(.66rem, 1.5vw, .86rem)/1.3 var(--font-head);
  letter-spacing: .38em;
  text-transform: uppercase;
}
.drop-portal-title {
  margin: 0;
  background: var(--gold-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 3px 0 #2a1703) drop-shadow(0 0 24px rgba(255, 176, 56, .6));
  font: 900 clamp(1.05rem, 3.4vw, 2.1rem)/1.15 var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.drop-portal-title span {
  display: block;
  font-size: 2.3em;
  line-height: 1;
  letter-spacing: .02em;
}
.drop-portal-sub {
  margin: 0;
  color: var(--text);
  font-size: clamp(1rem, 2.3vw, 1.3rem);
  font-style: italic;
  text-shadow: 0 2px 8px #000;
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@keyframes portal-spin { to { transform: rotate(1turn); } }
@keyframes portal-breathe {
  0%, 100% { transform: scale(.94); opacity: .78; }
  50% { transform: scale(1.06); opacity: 1; }
}
@keyframes portal-pulse {
  0%, 100% { transform: scale(.86); opacity: .86; }
  50% { transform: scale(1.12); opacity: 1; }
}
@keyframes portal-bob {
  0%, 100% { transform: translateY(6%); }
  50% { transform: translateY(-8%); }
}
@keyframes portal-ember {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--dx), calc(var(--size) * -.78)) scale(.3); opacity: 0; }
}
@keyframes portal-gulp {
  0% { transform: scale(1); }
  28% { transform: scale(.8); }
  100% { transform: scale(1); }
}
@keyframes offering-ascend {
  to { opacity: 0; transform: translateY(-36px) scale(1.03); filter: blur(5px); }
}
@keyframes notice-in { from { opacity: 0; transform: translateY(-6px); } }
@keyframes votive-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes votive-out { to { opacity: 0; transform: translateX(40px) scale(.96); } }
@keyframes votive-exalt {
  0% { transform: scale(1); }
  30% { transform: scale(1.025); }
  100% { transform: scale(1); }
}
@keyframes votive-seek {
  from { translate: -100% 0; }
  to { translate: 270% 0; }
}
@keyframes votive-shine {
  from { translate: -100% 0; }
  to { translate: 100% 0; }
}
@keyframes die-roll { from { transform: rotate(-220deg) scale(.55); } }
@keyframes submit-call {
  0%, 100% { box-shadow: 0 0 0 1px #000, 0 8px 26px rgba(0, 0, 0, .6), 0 0 14px rgba(255, 196, 80, .25); }
  50% { box-shadow: 0 0 0 1px #000, 0 8px 26px rgba(0, 0, 0, .6), 0 0 34px rgba(255, 196, 80, .65); }
}
@keyframes drop-frame { from { opacity: .55; } to { opacity: 1; } }
@keyframes drop-ring-in { from { scale: .55; opacity: 0; } }
@keyframes drop-ring { to { scale: 1.05; } }
@keyframes drop-words-in { from { opacity: 0; transform: scale(1.3); } }

@media (prefers-reduced-motion: reduce) {
  .portal-disc,
  .portal-disc *,
  .drop-portal *,
  .drop-portal::before,
  .votive,
  .votive *,
  .offering-submit,
  .chamber-offering.is-leaving .offering { animation: none !important; }
  .portal-embers { display: none; }
  .portal-disc,
  .portal-disc > *,
  .votive-fill { transition: none; }
}