/* Two-stage reveal: title appears *over* the picture, while the story finishes.
   Only after the 20-second animation ends can the backdrop obscure it. */
html body main.page > :is(#intro,#top.ralph-landing-reception) .ralph-reception-endcard {
  background:transparent!important;
  animation:none!important;
  pointer-events:none;
}
html body main.page > :is(#intro,#top.ralph-landing-reception) .ralph-reception-endcard::before {
  content:"";
  position:absolute;
  z-index:0;
  inset:0;
  background:radial-gradient(ellipse at center,rgba(252,254,255,.98),rgba(237,245,253,.98));
  opacity:0;
  transition:opacity 1.1s ease;
}
html body main.page > :is(#intro,#top.ralph-landing-reception) .ralph-reception-endcard > * {
  position:relative;
  z-index:1;
}
html body main.page > :is(#intro,#top.ralph-landing-reception) .ralph-reception-endcard .ralph-ending-wordmark {
  animation:ralph-brand-arrival .9s cubic-bezier(.22,1,.36,1) both;
}
html body main.page > :is(#intro,#top.ralph-landing-reception) .ralph-ending-logo {
  transition:width .9s cubic-bezier(.22,1,.36,1),opacity .8s ease;
}
html body main.page > :is(#intro,#top.ralph-landing-reception).ralph-reception-logo-visible:not(.ralph-reception-finished) .ralph-ending-logo {
  width:min(365px,48vw)!important;
  opacity:.86;
}
html body main.page > :is(#intro,#top.ralph-landing-reception) .ralph-reception-endcard :is(.cta-group,.trust) {
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transform:translateY(8px)!important;
  transition:opacity .75s ease .25s,transform .75s ease .25s,visibility 0s linear .9s!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception).ralph-reception-finished .ralph-reception-endcard {
  pointer-events:auto;
}
html body main.page > :is(#intro,#top.ralph-landing-reception).ralph-reception-finished .ralph-reception-endcard::before {
  opacity:1;
}
html body main.page > :is(#intro,#top.ralph-landing-reception).ralph-reception-finished .ralph-reception-endcard :is(.cta-group,.trust) {
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  transform:none!important;
  transition:opacity .75s ease .25s,transform .75s ease .25s!important;
}
@media(max-width:750px){
  html body main.page > :is(#intro,#top.ralph-landing-reception,#room-manager,.ralph-illustration-scene) .ralph-story-action{
    width:33px!important;height:33px!important;min-width:33px!important;min-height:33px!important;
    right:12px!important;bottom:13px!important;
  }
  html body main.page > :is(#intro,#top.ralph-landing-reception).ralph-reception-logo-visible:not(.ralph-reception-finished) .ralph-ending-logo {
    width:min(260px,64vw)!important;
  }
}
@media(prefers-reduced-motion:reduce){
  html body main.page > :is(#intro,#top.ralph-landing-reception) .ralph-reception-endcard *,
  html body main.page > :is(#intro,#top.ralph-landing-reception) .ralph-reception-endcard::before {
    animation:none!important;transition:none!important;
  }
}

/* Podcast-like player: all four controls stay on the illustration itself. */
html body .ralph-illustration {position:relative}
html body .ralph-illustration .ralph-story-player {
  position:absolute!important;
  right:clamp(6px,1vw,14px)!important;
  bottom:clamp(6px,1vw,14px)!important;
  z-index:12!important;
  display:flex!important;
  align-items:center!important;
  flex-direction:row!important;
  gap:clamp(3px,.55vw,8px)!important;
  width:max-content!important;
  height:auto!important;
  max-width:calc(100% - 12px)!important;
  padding:0!important;
  background:transparent!important;
  border:0!important;
  isolation:isolate;
}
html body .ralph-illustration .ralph-story-player :is(.ralph-player-button,.ralph-illustration-toggle) {
  box-sizing:border-box!important;
  position:relative!important;
  inset:auto!important;
  z-index:auto!important;
  flex:0 0 auto!important;
  display:grid!important;
  place-items:center!important;
  width:36px!important;
  height:36px!important;
  min-width:36px!important;
  min-height:36px!important;
  margin:0!important;
  padding:7px!important;
  border:1px solid rgba(116,136,157,.26)!important;
  border-radius:999px!important;
  background:rgba(255,255,255,.85)!important;
  color:#8897a8!important;
  box-shadow:0 2px 9px rgba(18,49,80,.05)!important;
  opacity:.9!important;
  cursor:pointer!important;
  transition:background .18s ease,color .18s ease,border-color .18s ease!important;
}
html body .ralph-illustration .ralph-story-player .ralph-illustration-toggle {
  color:#263f5b!important;
  background:rgba(255,255,255,.98)!important;
  width:40px!important;
  height:40px!important;
  min-width:40px!important;
  min-height:40px!important;
}
html body .ralph-illustration .ralph-story-player :is(button):hover {
  background:#fff!important;
  color:#274e7f!important;
  border-color:rgba(96,123,150,.5)!important;
}
html body .ralph-illustration .ralph-story-player button:focus-visible {
  outline:2px solid #256ab5!important;
  outline-offset:3px!important;
}
html body .ralph-illustration .ralph-story-player button:disabled {
  opacity:.43!important;
  cursor:default!important;
}
html body .ralph-illustration .ralph-story-player svg {
  display:block!important;
  width:19px!important;
  height:19px!important;
  fill:none!important;
  stroke:currentColor!important;
  stroke-width:1.9!important;
  stroke-linecap:round;
  stroke-linejoin:round;
}
html body .ralph-illustration .ralph-story-player .ralph-player-speed span {
  font-size:12px!important;
  line-height:1!important;
  font-weight:700!important;
  letter-spacing:-.02em!important;
}
html body .ralph-illustration .ralph-story-player .ralph-player-speed[aria-pressed="true"] {
  background:#e9f2fc!important;
  color:#315c8e!important;
}
html body .ralph-illustration .ralph-story-player .ralph-story-replay-icon{display:none!important}
html body .ralph-illustration .ralph-story-player [data-mode="replay"] .ralph-story-skip-icon{display:none!important}
html body .ralph-illustration .ralph-story-player [data-mode="replay"] .ralph-story-replay-icon{display:block!important}
html body .ralph-illustration .ralph-story-player .play-icon{display:none!important}
html body .ralph-illustration .ralph-story-player [aria-pressed="true"] .pause-icon{display:none!important}
html body .ralph-illustration .ralph-story-player [aria-pressed="true"] .play-icon{display:block!important}
/* Do not hide the control row when the reception resolves into its brand endcard.
   Keep controls above the visual endcard without bringing the SVG itself above it. */
html body main.page > :is(#intro,#top.ralph-landing-reception) .ralph-reception-slot {
  isolation:auto!important;
  opacity:1!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception).ralph-reception-finished .ralph-reception-slot {
  opacity:1!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception) .ralph-reception-endcard {
  z-index:5!important;
}
html body main.page > #room-manager .ralph-room-slot .ralph-illustration-toggle{
  inset:auto!important;
}
html body main.page > #room-manager .ralph-room-slot .ralph-story-player{
  z-index:20!important;
}
/* Avoid fighting room's previously isolated picture/video stacking contexts. */
html body main.page > #room-manager .ralph-room-slot{
  overflow:visible!important;
}
@media(max-width:750px){
 html body .ralph-illustration .ralph-story-player {
  right:4px!important;bottom:5px!important;gap:4px!important;
 }
 html body .ralph-illustration .ralph-story-player :is(.ralph-player-button,.ralph-illustration-toggle) {
  width:31px!important;height:31px!important;min-width:31px!important;min-height:31px!important;padding:6px!important;
 }
 html body .ralph-illustration .ralph-story-player .ralph-illustration-toggle{
  width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important;
 }
 html body .ralph-illustration .ralph-story-player svg{width:17px!important;height:17px!important}
}
@media(prefers-reduced-motion:reduce){
 html body .ralph-illustration .ralph-story-player{display:none!important}
}


/* Finishing no longer buries the player behind the full-screen endcard.
   display:contents removes the image-frame stacking/containing block ONLY at
   completion. The four existing buttons then position directly over the scene
   rather than being trapped under the endcard (z-index 5). */
html body main.page > :is(#intro,#top.ralph-landing-reception).ralph-reception-finished .ralph-reception-slot {
  display:contents!important;
  opacity:1!important;
  pointer-events:none!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception).ralph-reception-finished .ralph-reception-slot :is(.ralph-illustration-motion,.ralph-illustration-still) {
  display:none!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception).ralph-reception-finished .ralph-reception-slot .ralph-story-player {
  position:absolute!important;
  z-index:20!important;
  right:clamp(16px,3.5vw,52px)!important;
  bottom:clamp(18px,3vh,30px)!important;
  left:auto!important;
  top:auto!important;
  pointer-events:auto!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception) .ralph-reception-slot .ralph-story-player {
  pointer-events:auto!important;
}
/* The early logo is small and high, clear of the reception characters.
   When the story ends, the same wordmark zooms gently to the full-size,
   centred hero logo. Do not animate its layout box or hide the scene early. */
html body main.page > :is(#intro,#top.ralph-landing-reception) .ralph-reception-endcard .ralph-ending-wordmark {
  animation:none!important;
  transform:translateY(0) scale(1)!important;
  transform-origin:center center!important;
  transition:transform 1.2s cubic-bezier(.22,1,.36,1),opacity .7s ease!important;
}
html body main.page > :is(#intro,#top.ralph-landing-reception).ralph-reception-logo-visible:not(.ralph-reception-finished) .ralph-reception-endcard .ralph-ending-wordmark {
  transform:translateY(clamp(-270px,-26vh,-160px)) scale(.40)!important;
  animation:ralph-overlay-logo-appear .75s ease-out both!important;
}
@keyframes ralph-overlay-logo-appear {
  from{opacity:0}
  to{opacity:1}
}
html body main.page > :is(#intro,#top.ralph-landing-reception).ralph-reception-logo-visible:not(.ralph-reception-finished) .ralph-ending-logo {
  width:min(690px,73vw)!important;
  opacity:1!important;
}
@media(max-width:750px) {
  html body main.page > :is(#intro,#top.ralph-landing-reception).ralph-reception-logo-visible:not(.ralph-reception-finished) .ralph-reception-endcard .ralph-ending-wordmark {
    transform:translateY(clamp(-200px,-21vh,-100px)) scale(.44)!important;
  }
  html body main.page > :is(#intro,#top.ralph-landing-reception).ralph-reception-finished .ralph-reception-slot .ralph-story-player {
    right:12px!important;
    bottom:13px!important;
  }
}
@media(prefers-reduced-motion:reduce) {
  html body main.page > :is(#intro,#top.ralph-landing-reception) .ralph-reception-endcard .ralph-ending-wordmark {
    animation:none!important;
    transition:none!important;
  }
}