/* A twelve-second chapel entrance. Artwork is kept on separate
   planes, so each door can turn while its flowers remain in front. */
#gate {
  --entrance-duration: 12000ms;
  --door-width: 73%;
  --seal-level: 57%;
  --seal-size: 144px;
  background: radial-gradient(ellipse at 50% 38%, #3056a0 0%, #183875 43%, #091c47 83%);
  transition: none;
}
#gate::after { box-shadow: inset 0 0 140px #04133299; z-index: 7; }
#gate .gate-grain { inset: 18px; border: 1px solid #b9d5ff26; }
.chapel-ambience { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.chapel-ambience::before, .chapel-ambience::after {
  content: ''; position: absolute; top: -15%; bottom: -20%; width: 20%;
  background: linear-gradient(90deg, #071b3f, #7298ce16 29%, #a3c4f025 32%, #071a3d 38%, #325b9b23 51%, #061635);
  filter: blur(1px); opacity: .58;
}
.chapel-ambience::before { left: -7%; transform: perspective(1200px) rotateY(20deg); }
.chapel-ambience::after { right: -7%; transform: perspective(1200px) rotateY(-20deg) scaleX(-1); }
.chapel-ambience i { position: absolute; left: 50%; top: -8%; width: 90%; height: 118%; border: 1px solid #b5d7ff0d; border-radius: 50% 50% 0 0; transform: translateX(-50%); }
.chapel-ambience i + i { width: 98%; top: -12%; }
#gate .gate-ray { opacity: .28; }
#gate .entry-architecture { top: 6%; bottom: 7%; width: min(860px, 96vh, 96vw); transform-origin: 50% 56%; }
#gate .portal-surround {
  background: #173779; border-color: #a9c4e5;
  box-shadow: 0 0 0 4px #102957, 0 0 0 6px #97b7df88, 0 0 0 14px #1b3c74, 0 0 0 16px #5c83b457, 0 18px 50px #03102c99;
}
#gate .portal { perspective: 1800px; background: #122d65; }
#gate .portal-light { opacity: .3; background: radial-gradient(ellipse at 50% 43%, #e4f1ff 0%, #90bcec 20%, #315ca6 58%, #122c64 100%); box-shadow: none; transition: none; }
#gate .doors { perspective: 1500px; }
#gate .door-leaf {
  transition: none; border-color: #9cb7df66;
  background: linear-gradient(104deg, #5274a9 0%, #335b99 6%, #244b88 18%, #1c407d 60%, #102d61 100%);
  box-shadow: inset 0 0 0 7px #17386f, inset 0 0 0 9px #8aa9d49c, inset 0 0 0 12px #0e2b5f, inset 10px 0 24px #a7c8ec0b, inset -12px 0 30px #03143155;
}
#gate .door-right { background: linear-gradient(256deg, #5274a9 0%, #335b99 6%, #244b88 18%, #1c407d 60%, #102d61 100%); }
#gate .door-moulding { border-color: #b4cce780; box-shadow: 0 0 0 4px #102b59, 0 0 0 5px #87a4cc70, inset 1px 1px 2px #eff8ff22; }
#gate .door-lancet { background: linear-gradient(112deg, #3b629b6b, #132d5c99); border-color: #a9c5e1b0; box-shadow: inset 0 0 0 5px #15356a, inset 0 0 0 6px #8babd67d, inset 5px 6px 18px #020d29a1, 1px 2px 2px #e4f4ff29; }
#gate .door-bottom-panel { background: linear-gradient(115deg, #213f71, #355e99 52%, #17376a); border-color: #9fbce099; box-shadow: inset 3px 5px 15px #07163188, 0 0 0 4px #173668, 0 0 0 5px #8ba9d577; }
#gate .door-rosette { top: 24%; left: 50%; width: 55%; height: auto; aspect-ratio: 540 / 486; transform: translateX(-50%); border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 0; opacity: .82; }
#gate .door-rosette img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(1px 3px 3px #030f2f99) brightness(.87) saturate(.65); }
#gate .door-handle { top: 66%; background: linear-gradient(90deg, #6e829e, #e4ebf2 40%, #a4bbd8 65%, #667e9d); box-shadow: 2px 5px 8px #020e3180, inset 1px 0 1px #fff9; }
#gate .door-seam { width: 2px; opacity: .45; background: #d7e9ff; box-shadow: 0 0 14px 2px #b1d3ff55; transition: none; }
.door-trace { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.door-trace path { fill: none; stroke: #e5f1ff; stroke-width: 1.2; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 3px #c7e8ff); opacity: 0; }
#gate .entry-architecture .gate-floral-arch { top: -5%; width: 114%; filter: drop-shadow(0 12px 15px #07193766); animation: entrance-arch-breathe 11s ease-in-out infinite; }
#gate .gate-flowers { filter: drop-shadow(0 10px 18px #04112f70); }
#gate .candles-left { left: max(4%, calc(50% - 385px)); }
#gate .candles-right { right: max(4%, calc(50% - 385px)); }
#gate .candle-group { bottom: 8%; opacity: .86; }
#gate .candle-group > i { background: linear-gradient(90deg, #b8b7aa, #f7f0d6 44%, #c0bb9f); }

/* One semantic button covers both doors; the seal remains its visual focus. */
#gate .entrance-trigger {
  position: absolute; z-index: 15; top: 0; left: 50%; width: var(--door-width); height: 100%;
  transform: translateX(-50%); padding: 0; border: 0; border-radius: 50% 50% 2px 2px / 30% 30% 2px 2px;
  background: none; color: inherit; cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
#gate .entrance-trigger:active { scale: 1; filter: none; }
#gate .entrance-trigger:focus-visible { outline: none; }
#gate .entrance-trigger:disabled { cursor: default; }
#gate .entrance-seal {
  position: absolute; left: 50%; top: var(--seal-level); width: var(--seal-size); height: var(--seal-size);
  transform: translate(-50%, -50%); display: grid; place-items: center;
  border-radius: 50%; background: none; isolation: isolate; pointer-events: none;
  transition: filter .3s ease;
}
.seal-art { position: relative; z-index: 2; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 8px #031233aa); transition: transform .45s ease, filter .45s ease; }
.seal-aura { position: absolute; inset: -17%; border-radius: 50%; border: 1px solid #d0e7ff30; background: radial-gradient(circle, #e5f4ff1c 32%, #afd6ff24 45%, transparent 68%); box-shadow: 0 0 38px #97c9ff17; animation: seal-breathe 4.5s ease-in-out infinite; }
.seal-glint { position: absolute; z-index: 3; inset: 8%; border-radius: 50%; background: linear-gradient(115deg, transparent 28%, #effaff80 46%, transparent 62%); mix-blend-mode: screen; opacity: 0; pointer-events: none; animation: seal-silver-sweep 7s ease-in-out infinite; }
.entrance-trigger:hover .seal-art, .entrance-trigger:focus-visible .seal-art { transform: perspective(500px) rotateX(var(--seal-tilt-y, 0deg)) rotateY(var(--seal-tilt-x, 0deg)) scale(1.055); filter: drop-shadow(0 7px 10px #031233aa) brightness(1.12); }
#gate .entrance-trigger:focus-visible .entrance-seal { outline: 2px solid #e1f1ff; outline-offset: 9px; }
#gate .entrance-trigger:active .seal-art { transform: scale(.94); }
.entrance-hint {
  position: absolute; left: 50%; top: calc(var(--seal-level) + var(--seal-size) / 2 + 24px);
  width: max-content; max-width: calc(100% - 14px); padding: 9px 16px 11px;
  font: italic 500 clamp(22px, 2.5vw, 30px)/1.25 var(--serif); text-align: center;
  color: #edf6ff; text-shadow: 0 2px 10px #061a48;
  background: radial-gradient(ellipse, #163974dd, #15357099 50%, transparent 75%);
  opacity: 0; visibility: hidden; transform: translate(-50%, 7px);
  transition: opacity .8s ease, transform .8s ease, visibility .8s; pointer-events: none;
}
#gate.entrance-attention .seal-aura { animation: seal-attention 1.3s ease-in-out 2 forwards; }
#gate.entrance-attention .seal-art { animation: seal-attention-light 1.3s ease-in-out 2; }
#gate.entrance-hint-visible .entrance-hint { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
#gate.opening .entrance-hint { opacity: 0; visibility: hidden; transition: none; }
#gate.opening .entrance-trigger { pointer-events: none; }
#entrance-motes { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 11; pointer-events: none; }
#gate > .living-garden { z-index: 10; }
#gate .garden-butterfly { filter: saturate(.8) drop-shadow(0 5px 7px #051a4980); }
#gate .garden-lovebirds { filter: drop-shadow(0 8px 8px #04183e55); }
#gate .gate-bottom { left: max(22px, env(safe-area-inset-left)); right: max(22px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 20; }
#gate .gate-bottom button { display: grid; place-items: center; width: 48px; height: 48px; min-height: 48px; padding: 11px; border-radius: 50%; border: 1px solid #bfd8f243; background: #0b245b77; color: #c7def5; backdrop-filter: blur(8px); text-shadow: none; }
#gate .gate-bottom .icon { width: 22px; height: 22px; }
#gate #entry-music[aria-pressed="false"] { color: #a1b3d1; opacity: .65; }
#gate #entry-music[aria-pressed="false"]::after { content: ''; position: absolute; width: 25px; height: 1px; background: currentColor; transform: rotate(-45deg); }
#gate #skip-entrance { opacity: .58; }
#gate #skip-entrance:hover, #gate #skip-entrance:focus-visible { opacity: 1; }

/* One shared duration keeps the silver trace, light, doors, and flowers in sync. */
#gate.opening { visibility: visible; opacity: 1; animation: entrance-dissolve var(--entrance-duration) linear both; }
#gate.opening .entry-architecture { animation: entrance-forward var(--entrance-duration) cubic-bezier(.22,.05,.2,1) both; }
#gate.opening .door-left { animation: entrance-left-door var(--entrance-duration) linear both; }
#gate.opening .door-right { animation: entrance-right-door var(--entrance-duration) linear both; }
#gate.opening .door-trace path { animation: entrance-silver-trace var(--entrance-duration) linear both; }
#gate.opening .door-seam { animation: entrance-seam-light var(--entrance-duration) linear both; }
#gate.opening .portal-light { animation: entrance-inner-light var(--entrance-duration) linear both; }
#gate.opening .entrance-seal { pointer-events: none; animation: entrance-seal-release var(--entrance-duration) linear both; }
#gate.opening .seal-aura { animation: entrance-aura-release var(--entrance-duration) linear both; }
#gate.opening .entry-architecture .gate-floral-arch { transition: none; animation: entrance-floral-reveal var(--entrance-duration) linear both; }
#gate.opening .gate-flowers { transition: none; animation: entrance-corner-reveal var(--entrance-duration) linear both; }
#gate.opening .gate-flowers-left { --exit-side: -1; }
#gate.opening .gate-flowers-right { --exit-side: 1; }
#gate.opening .candle-group { animation: entrance-candle-reveal var(--entrance-duration) linear both; }
#gate.opening .gate-grain, #gate.opening .chapel-ambience { animation: entrance-dissolve var(--entrance-duration) linear both; }
.entrance-suspended *, .motion-paused #gate * { animation-play-state: paused !important; }

@keyframes entrance-arch-breathe { 0%,100% { transform: translateX(-50%) scale(1); } 50% { transform: translateX(-50%) scale(1.009); } }
@keyframes seal-breathe { 0%,100% { opacity: .42; scale: .97; } 50% { opacity: 1; scale: 1.035; } }
@keyframes seal-silver-sweep { 0%,62%,100% { opacity: 0; transform: rotate(-30deg); } 73% { opacity: .48; } 84% { opacity: 0; transform: rotate(55deg); } }
@keyframes seal-attention { 0%,100% { opacity: .7; scale: 1.04; box-shadow: 0 0 38px #a5d4ff33; } 48% { opacity: 1; scale: 1.22; box-shadow: 0 0 58px #c9e7ff77; } }
@keyframes seal-attention-light { 0%,100% { filter: drop-shadow(0 8px 8px #031233aa) brightness(1.04); } 48% { filter: drop-shadow(0 0 16px #c4e1ff80) brightness(1.2); } }
@keyframes entrance-seal-release { 0% { transform: translate(-50%,-50%) scale(1); opacity: 1; } 4% { transform: translate(-50%,-50%) scale(.94); } 12% { transform: translate(-50%,-50%) scale(1.04); opacity: 1; } 25% { transform: translate(-50%,-50%) scale(1.12); opacity: 0; } 100% { transform: translate(-50%,-50%) scale(1.12); opacity: 0; } }
@keyframes entrance-aura-release { 0% { scale: 1; opacity: .7; } 16% { scale: 2.5; opacity: .4; } 28%,100% { scale: 3.6; opacity: 0; } }
@keyframes entrance-silver-trace { 0% { stroke-dashoffset: 1; opacity: .4; } 8% { opacity: .9; } 38% { stroke-dashoffset: 0; opacity: .9; } 75%,100% { stroke-dashoffset: 0; opacity: 0; } }
@keyframes entrance-seam-light { 0% { opacity: .45; box-shadow: 0 0 12px 2px #b1d3ff44; } 20% { opacity: .7; } 42% { opacity: 1; box-shadow: 0 0 24px 5px #e5f4ffaa, 0 0 70px 18px #a8ceff77; } 69%,100% { opacity: 0; } }
@keyframes entrance-left-door { 0% { transform: rotateY(0deg); } 12% { transform: rotateY(3deg); } 26% { transform: rotateY(12deg); } 40% { transform: rotateY(26deg); } 58% { transform: rotateY(51deg); } 78% { transform: rotateY(78deg); } 100% { transform: rotateY(89deg); } }
@keyframes entrance-right-door { 0% { transform: rotateY(0deg); } 12% { transform: rotateY(-3deg); } 26% { transform: rotateY(-12deg); } 40% { transform: rotateY(-26deg); } 58% { transform: rotateY(-51deg); } 78% { transform: rotateY(-78deg); } 100% { transform: rotateY(-89deg); } }
@keyframes entrance-inner-light { 0% { opacity: .3; } 18% { opacity: .48; } 48% { opacity: .65; } 68% { opacity: 1; } 100% { opacity: .85; } }
@keyframes entrance-forward { 0% { transform: translateX(-50%) scale(1); } 40% { transform: translateX(-50%) scale(1.035); } 74% { transform: translateX(-50%) scale(1.09); } 100% { transform: translateX(-50%) scale(1.24); } }
@keyframes entrance-floral-reveal { 0% { transform: translateX(-50%) scale(1); opacity: 1; } 35% { transform: translateX(-50%) scale(1.035); opacity: 1; } 76% { transform: translateX(-50%) scale(1.1); opacity: .95; } 100% { transform: translateX(-50%) scale(1.3); opacity: 0; } }
@keyframes entrance-corner-reveal { 0% { transform: translateX(0) scaleX(var(--flip,1)); opacity: 1; } 40% { transform: translateX(calc(var(--exit-side) * 16px)) scaleX(var(--flip,1)) scale(1.035); opacity: 1; } 77% { opacity: .86; } 100% { transform: translateX(calc(var(--exit-side) * 65px)) scaleX(var(--flip,1)) scale(1.16); opacity: 0; } }
@keyframes entrance-candle-reveal { 0%,70% { opacity: .86; } 100% { opacity: 0; } }
@keyframes entrance-dissolve { 0%,78% { opacity: 1; } 100% { opacity: 0; } }

@media (max-width:650px) {
  #gate { --door-width: 86%; --seal-level: 56%; --seal-size: 116px; }
  #gate .entry-architecture { top: 6%; bottom: 8%; width: calc(100% - 20px); }
  #gate .entry-architecture .portal, #gate .portal-surround { width: 86%; border-radius: 50% 50% 0 0 / 24% 24% 0 0; }
  #gate .entry-architecture .gate-floral-arch { top: -5%; width: 148%; }
  #gate .entrance-hint { top: calc(var(--seal-level) + var(--seal-size) / 2 + 20px); padding-inline: 8px; }
  #gate .gate-flowers { width: 270px; bottom: -6%; }
  #gate .gate-flowers-left { left: -35%; } #gate .gate-flowers-right { right: -35%; }
  #gate .candles-left { left: 5%; } #gate .candles-right { right: 5%; }
  #gate .candle-group { bottom: 10%; gap: 9px; }
  #gate .gate-bottom { bottom: max(16px, env(safe-area-inset-bottom)); left: 17px; right: 17px; }
  #gate .gate-bottom button { width: 46px; height: 46px; min-height: 46px; }
  #gate .door-rosette { width: 68%; }
  #gate .door-handle { top: 65%; }
}
@media (max-width:380px) {
  #gate { --seal-size: 106px; }
  #gate .entrance-hint { top: calc(var(--seal-level) + var(--seal-size) / 2 + 6px); font-size: 21px; }
  #gate .entry-architecture .gate-floral-arch { width: 153%; }
}
@media (max-height:560px) and (orientation:landscape) {
  #gate { --seal-size: 88px; --seal-level: 59%; }
  #gate .entry-architecture { top: 16px; bottom: 20px; width: min(500px,90vh); }
  #gate .entry-architecture .gate-floral-arch { top: -8%; width: 113%; }
  #gate .entrance-hint { top: calc(var(--seal-level) + var(--seal-size) / 2 + 12px); font-size: 21px; padding: 7px; }
  #gate .gate-flowers { width: 250px; bottom: -26%; }
  #gate .gate-flowers-left { left: -3%; } #gate .gate-flowers-right { right: -3%; }
  #gate .candles-left { left: 16%; } #gate .candles-right { right: 16%; }
  #gate .candle-group { bottom: 10%; }
  #gate .candle-group > i { height: 65px; width: 14px; }
  #gate .candle-group > i:nth-child(2) { height: 88px; width: 17px; }
  #gate .candle-group > i:nth-child(3) { display: none; }
}
#gate.opening[data-entrance-mode="instant"] { animation: none; opacity: 0; transition: opacity .32s ease; }
#gate[data-entrance-mode="instant"] * { animation: none !important; }
body.motion-paused #gate .entrance-hint { transition: none; }
body.motion-paused #gate.entrance-attention .seal-aura { animation: none; opacity: .85; box-shadow: 0 0 38px #a5d4ff44; }
@media (prefers-reduced-motion:reduce) {
  #gate *, #gate.opening { animation: none !important; }
  #gate.opening { opacity: 0; transition: opacity .32s ease; }
  #gate .entrance-trigger:hover .seal-art, #gate .entrance-trigger:focus-visible .seal-art { transform: none; }
  #gate .entrance-hint { transition: none; }
  #gate.entrance-attention .seal-aura { opacity: .85; box-shadow: 0 0 38px #a5d4ff44; }
}

/* Personal names appear as illuminated lettering suspended above the seal. */
#gate.has-dedication { --seal-level: 70%; }
#gate .entrance-dedication {
  position: absolute; z-index: 16; left: 50%;
  bottom: calc(100% - var(--seal-level) + var(--seal-size) / 2 + 24px);
  width: 72%; max-width: 620px; transform: translateX(-50%);
  text-align: center; color: #f5f7ff; pointer-events: none;
}
#gate .entrance-dedication[hidden] { display: none; }
.dedication-visual { position: relative; isolation: isolate; }
.dedication-visual::before {
  content: ''; position: absolute; z-index: -1; inset: -16px -4%;
  background: radial-gradient(ellipse, #102c62ed 8%, #16396bd9 38%, #16396b55 60%, transparent 75%);
  pointer-events: none;
}
#gate.has-dedication .door-rosette { opacity: .22; transition: opacity 1.5s ease; }
#gate .dedication-names {
  --dedication-size: clamp(32px, min(4.7vw, 6.4vh), 58px);
  font: italic 500 var(--dedication-fit, var(--dedication-size))/1.08 var(--serif);
  height: max(calc(var(--dedication-size) * 2.65), var(--dedication-height, 0px));
  display: grid; align-items: center; padding: 3px 0 5px;
  text-shadow: 0 2px 14px #061c49, 0 0 22px #afdaff30;
}
#gate .dedication-name { font: inherit; margin: 0; text-wrap: balance; overflow-wrap: anywhere; }
.dedication-word { position: relative; display: inline-block; max-width: 100%; vertical-align: bottom; }
@supports ((background-clip: text) or (-webkit-background-clip: text)) {
  .dedication-word {
    background: linear-gradient(112deg, #e0eeff 22%, #f5f8ff 38%, #b9dcff 45%, #ffffff 50%, #ffffff 53%, #c8e5ff 59%, #f5f8ff 68%, #e0eeff 82%) 130% 50% / 280% 100%;
    background-clip: text; -webkit-background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  }
}
.dedication-word::after {
  content: ''; position: absolute; left: var(--glint-x, 60%); top: 24%;
  width: 9px; height: 9px; opacity: 0; pointer-events: none;
  background: linear-gradient(transparent, #fff, transparent) center / 1px 100%, linear-gradient(90deg, transparent, #fff, transparent) center / 100% 1px;
  background-repeat: no-repeat; filter: drop-shadow(0 0 4px #e4f5ff);
  animation: dedication-letter-glint 8.5s ease-in-out var(--glint-delay, 1.8s) infinite;
}
.dedication-and { display: block; font-size: .43em; line-height: 1; margin: .17em 0; color: #c2dcfa; }
.dedication-flourish { display: flex; justify-content: center; align-items: center; gap: 11px; margin: 11px auto 0; color: #d7eaff; }
.dedication-flourish > i { width: min(23%, 85px); height: 1px; background: linear-gradient(90deg, transparent, #b5d7ef); }
.dedication-flourish > i:last-child { transform: scaleX(-1); }
.dedication-flourish > span { font: 23px/1 var(--serif); text-shadow: 0 0 11px #a5cfff; }
.dedication-pages { height: 6px; display: flex; justify-content: center; gap: 7px; margin: 12px auto 0; }
.dedication-pages[hidden] { display: none; }
.dedication-pages i { width: 4px; height: 4px; border: 1px solid #c2ddf5a8; border-radius: 50%; transition: background .8s, box-shadow .8s; }
.dedication-pages .is-current { background: #eaf6ff; box-shadow: 0 0 7px #e2f3ff; }
.dedication-sparks { position: absolute; z-index: 2; inset: -10px -8%; pointer-events: none; }
.dedication-sparks i {
  position: absolute; left: var(--spark-x); top: var(--spark-y); width: 3px; height: 3px;
  background: #eff9ff; border-radius: 50%; opacity: 0;
  box-shadow: 0 0 7px 2px #c2e5ff77;
  animation: dedication-starlight 9s ease-in-out var(--spark-delay) infinite;
}
.dedication-sparks i:nth-child(4n)::after, .dedication-sparks i:nth-child(4n)::before {
  content: ''; position: absolute; background: linear-gradient(transparent, #e1f5ff, transparent);
  width: 1px; height: 15px; top: -6px; left: 1px;
}
.dedication-sparks i:nth-child(4n)::after { transform: rotate(90deg); }
.entrance-dedication.is-arriving .dedication-word { animation: dedication-ink 4.2s cubic-bezier(.16,.7,.24,1) calc(.35s + var(--word-delay)) both, dedication-name-shimmer 10s ease-in-out var(--word-delay) infinite; }
.entrance-dedication.is-arriving .dedication-and { animation: dedication-preface 3.6s .7s ease both; }
.entrance-dedication.is-arriving .dedication-flourish { animation: dedication-rule 3.8s .5s ease both; }
.entrance-dedication.is-changing .dedication-name-group { animation: dedication-turn-page 1.6s ease both; }
.entrance-dedication.is-releasing .dedication-visual { animation: dedication-release 2s ease both; }
.entrance-dedication.is-releasing .dedication-sparks i { animation: dedication-scatter 1.9s ease-out calc(var(--spark-delay) * .2) both; }
.entrance-suspended .entrance-dedication *, .entrance-suspended .entrance-dedication *::after { animation-play-state: paused !important; }
@keyframes dedication-preface { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: translateY(0); } }
@keyframes dedication-ink { from { opacity: 0; filter: blur(7px); transform: translateY(15px) scale(.96); } 60% { opacity: 1; } to { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); } }
@keyframes dedication-rule { from { opacity: 0; transform: scaleX(.25); } to { opacity: 1; transform: scaleX(1); } }
@keyframes dedication-turn-page { to { opacity: 0; filter: blur(5px); transform: translateY(-12px); } }
@keyframes dedication-starlight { 0%, 100% { opacity: 0; transform: translateY(10px) scale(.5); } 35% { opacity: .85; } 72% { opacity: .25; transform: translateY(-14px) scale(1.2); } }
@keyframes dedication-name-shimmer { 0%, 10% { background-position: 130% 50%; } 80%, 100% { background-position: -30% 50%; } }
@keyframes dedication-letter-glint { 0%, 8%, 54%, 100% { opacity: 0; transform: scale(.35) rotate(0deg); } 28% { opacity: .9; transform: scale(1.08) rotate(20deg); } 42% { opacity: .45; transform: scale(.75) rotate(32deg); } }
@keyframes dedication-release { 0%, 18% { opacity: 1; transform: scale(1); } 100% { opacity: 0; filter: blur(5px); transform: translateY(-26px) scale(1.08); } }
@keyframes dedication-scatter { 0% { opacity: .9; transform: translate(0, 0) scale(1); } 80% { opacity: .6; } 100% { opacity: 0; transform: translate(var(--spark-flight-x), var(--spark-flight-y)) scale(.3); } }
@media (max-width:650px) {
  #gate.has-dedication { --seal-level: 56%; }
  #gate .entrance-dedication { width: 77%; bottom: calc(100% - var(--seal-level) + var(--seal-size) / 2 + 23px); }
  #gate .dedication-names { --dedication-size: clamp(29px, 8.6vw, 45px); }
  .dedication-flourish { margin-top: 9px; }
  .dedication-pages { margin-top: 8px; }
}
@media (max-width:380px) {
  #gate .entrance-dedication { bottom: calc(100% - var(--seal-level) + var(--seal-size) / 2 + 17px); }
}
@media (max-height:560px) and (orientation:landscape) {
  #gate.has-dedication { --seal-level: 66%; --seal-size: 70px; }
  #gate .entrance-dedication { width: 81%; bottom: calc(100% - var(--seal-level) + var(--seal-size) / 2 + 8px); }
  #gate .dedication-names { --dedication-size: 26px; }
  .dedication-flourish { margin-top: 3px; }
  .dedication-flourish > span { font-size: 17px; }
  .dedication-pages { margin-top: 5px; }
}
body.motion-paused #gate .entrance-dedication *,
body.motion-paused #gate .entrance-dedication *::before,
body.motion-paused #gate .entrance-dedication *::after { animation: none !important; transition: none !important; }
body.motion-paused .dedication-sparks { display: none; }
body.motion-paused .dedication-word::after { display: none; }
@media (prefers-reduced-motion:reduce) { .dedication-sparks, .dedication-word::after { display: none; } }