
/* Living scenes: graphic layers, native motion and page-specific atmosphere. */
#record.composed-hero .wordmark-button{animation:living-name-breathe 9s ease-in-out infinite;transform-origin:50% 60%}
#record .name-idle-shine{position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#fff0b2 44%,#fffef0 50%,#ecd292 56%,transparent 75%);background-size:250% 100%;mask:url('images/maker-wordmark.webp') center/contain no-repeat;-webkit-mask:url('images/maker-wordmark.webp') center/contain no-repeat;animation:living-name-shine 8s ease-in-out infinite;mix-blend-mode:screen;opacity:0}
#record .name-idle-star{position:absolute;left:62%;top:8%;width:21px;height:21px;color:#ffe9ae;pointer-events:none;filter:drop-shadow(0 0 7px #ffce68);animation:living-name-glint 8s ease-in-out infinite}
#record .hero-copy .personal-invite{width:267px;min-height:58px;gap:12px}
#record .personal-invite>.invite-words{position:relative;z-index:2;white-space:nowrap}
#record .personal-invite>.invite-cup,#record .personal-invite>.invite-arrow{position:relative;z-index:2}
#record .personal-invite>.invite-idle-sheen{position:absolute;inset:-80% -90%;width:auto;height:auto;min-width:0;max-width:none;display:block;aspect-ratio:auto;border:0;border-radius:0;background:linear-gradient(110deg,transparent 42%,#fff9dfbb 50%,transparent 58%);z-index:1;pointer-events:none;animation:living-button-shine 7s ease-in-out infinite}
#record .personal-invite:hover{box-shadow:0 1px 0 #fff8e4 inset,0 0 22px #d2a65840,0 12px 25px #10090566}
#services.composed-gallery .project-art .construction-load{position:absolute;left:2%;top:4%;width:87%;height:auto;object-fit:contain;object-position:center;z-index:1;transform-origin:50% 0;filter:drop-shadow(0 7px 7px #3b2d2738);animation:living-hoist 7.5s cubic-bezier(.45,0,.25,1) infinite}
#services.composed-gallery .construction-panel .project-art>.construction-site{object-position:48% 0;filter:saturate(.92)}
#services.composed-gallery .construction-panel .project-art::after{inset:50% 0 0;background:linear-gradient(transparent,#172b37e6 68%,#142530)}
#services.composed-gallery .wedding-stage{background:radial-gradient(ellipse at 45% 20%,#355364,#152b38 75%)}
#services.composed-gallery .wedding-stage::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(105deg,#ffffff04 0 1px,transparent 1px 4px);pointer-events:none}
#services.composed-gallery .wedding-stage>.wedding-envelope-back,#services.composed-gallery .wedding-stage>.wedding-envelope-front{position:absolute;left:4%;top:25%;width:92%;height:auto;object-fit:contain;filter:drop-shadow(0 12px 9px #030d1359)}
#services.composed-gallery .wedding-envelope-back{z-index:1}
#services.composed-gallery .wedding-stage>.wedding-card{position:absolute;left:7%;top:10%;width:86%;height:auto;object-fit:contain;z-index:2;filter:drop-shadow(0 7px 5px #11263444);transform-origin:50% 90%;animation:living-paper 8s ease-in-out infinite}
#services.composed-gallery .wedding-envelope-front{z-index:3;clip-path:polygon(0 38%,50% 69%,100% 38%,100% 100%,0 100%)}
#services.composed-gallery .wedding-stage::after{inset:61% 0 0;z-index:3;background:linear-gradient(transparent,#142530e6 62%,#142530)}
#services.composed-gallery .guru-panel .project-art>img{object-position:59% 0}
#services.composed-gallery .guru-note{position:absolute;top:29%;left:9%;z-index:1;width:63%;padding:17px 18px 15px;background:#eee5cb;color:#3a3d37;box-shadow:0 9px 14px #1a1b1438;border-radius:2px;transform:rotate(-7deg);font:italic 18px/1.35 Georgia,serif;animation:living-guru-note 9s ease-in-out infinite}
#services.composed-gallery .guru-note small{display:block;margin-top:10px;font:9px/1.8 'DM Sans',Arial,sans-serif;letter-spacing:.015em;color:#58645a}
#services.composed-gallery .guru-note svg{width:23px;height:23px;float:right;margin:0 0 8px 7px;color:#8c7648}
#services.composed-gallery .guru-note svg path{stroke-dasharray:30;stroke-dashoffset:30;animation:living-guru-check 9s ease-in-out infinite}
#services.composed-gallery .guru-panel .project-art::after{inset:49% 0 0;background:linear-gradient(transparent,#142530ec 71%,#142530)}
#golden-pass.composed-family{padding-top:31px}
#golden-pass.composed-family .factory-heading{display:flex;align-items:center;justify-content:center;gap:15px;margin-bottom:32px;text-align:center}
#golden-pass.composed-family .factory-crest{display:block;flex:0 0 53px;width:53px;height:49px;margin:0;color:#ecd18f}
#golden-pass.composed-family .factory-heading h2{font-size:42px;line-height:1.1;margin:0;letter-spacing:-.035em;color:#f3e4bf}
#golden-pass.composed-family .ticket-scene{padding-top:20px}
#evidence.composed-worlds{position:relative;isolation:isolate;overflow:hidden;background:#191b1c}
#evidence.composed-worlds::before,#evidence.composed-worlds::after{display:none}
#evidence.composed-worlds>.section-width{position:relative;z-index:3}
#evidence .world-scene{position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;transition:opacity .65s}
#evidence .world-scene>img{width:100%;height:100%;object-fit:cover;object-position:center;filter:brightness(.83)}
#evidence[data-world-scene="outbreak"] .world-scene-outbreak,#evidence[data-world-scene="noir"] .world-scene-noir{opacity:1}
#evidence .world-scene-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0e1419b5,transparent 48%,#0d151bd1)}
#evidence .outbreak-atmosphere,#evidence .noir-atmosphere{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .65s;overflow:hidden}
#evidence[data-world-scene="outbreak"] .outbreak-atmosphere,#evidence[data-world-scene="noir"] .noir-atmosphere{opacity:1}
#evidence .outbreak-fog{position:absolute;width:110%;max-width:none;height:auto;bottom:0;left:-20%;opacity:.18;filter:brightness(.3) sepia(.2);animation:living-fog 24s ease-in-out infinite alternate}
#evidence .outbreak-glow{position:absolute;inset:30% -10% -20%;background:radial-gradient(ellipse at 7% 85%,#d7491245,transparent 38%),radial-gradient(ellipse at 95% 75%,#cc5b1b38,transparent 32%);animation:living-ember-glow 4s ease-in-out infinite alternate}
#evidence .outbreak-sparks i,#evidence .stage-dust i{position:absolute;bottom:3%;left:8%;width:3px;height:5px;border-radius:50%;background:#ffbc68;box-shadow:0 0 9px #ff692c;opacity:0;animation:living-ember 9s linear infinite}
#evidence .outbreak-sparks i:nth-child(2),#evidence .stage-dust i:nth-child(2){left:19%;animation-delay:-6s;animation-duration:12s}
#evidence .outbreak-sparks i:nth-child(3),#evidence .stage-dust i:nth-child(3){left:32%;animation-delay:-3s}
#evidence .outbreak-sparks i:nth-child(4),#evidence .stage-dust i:nth-child(4){left:45%;animation-delay:-8s;animation-duration:13s}
#evidence .outbreak-sparks i:nth-child(5),#evidence .stage-dust i:nth-child(5){left:61%;animation-delay:-1s;animation-duration:11s}
#evidence .outbreak-sparks i:nth-child(6),#evidence .stage-dust i:nth-child(6){left:74%;animation-delay:-5s}
#evidence .outbreak-sparks i:nth-child(7),#evidence .stage-dust i:nth-child(7){left:84%;animation-delay:-10s;animation-duration:14s}
#evidence .outbreak-sparks i:nth-child(8),#evidence .stage-dust i:nth-child(8){left:94%;animation-delay:-4s;animation-duration:10s}
#evidence .stage-beam{position:absolute;top:-10%;left:-20%;width:70%;height:120%;background:linear-gradient(95deg,transparent,#f6d2a019,transparent);clip-path:polygon(48% 0,53% 0,100% 100%,0 100%);transform-origin:50% 0;animation:living-spotlight 17s ease-in-out infinite alternate}
#evidence .stage-beam-two{left:60%;animation-delay:-9s;animation-direction:alternate-reverse}
#evidence .stage-dust i{width:2px;height:2px;background:#ffe0a1;box-shadow:0 0 6px #eac28b66;animation-duration:18s}
#evidence[data-world-scene="noir"] .browser-bar{background:#281c24;color:#e3cfba;border-color:#b7826144}
#evidence[data-world-scene="outbreak"] .browser-bar{background:#252827;color:#dfd4bf;border-color:#bb855444}
#evidence[data-world-scene="outbreak"] .pager [aria-pressed="true"]{background:#8d4c2c;border-color:#bb824b;color:#fff1db}
#evidence[data-world-scene="noir"] .pager [aria-pressed="true"]{background:#a38551;border-color:#d5ba7f;color:#1e1920}
#idea.composed-contact .sky-flyby{position:absolute;z-index:1;top:12px;right:-940px;width:940px;height:290px;pointer-events:none;opacity:0;animation:living-747-flight 48s linear infinite;animation-delay:-21s}
#idea .sky-747{position:absolute;width:650px;height:auto;left:0;top:0;filter:drop-shadow(0 9px 8px #3f638b22)}
#idea .sky-patrick{position:absolute;width:210px;height:auto;left:640px;top:54px;filter:drop-shadow(0 7px 7px #3f638b22);animation:living-superhero-bob 4.5s ease-in-out infinite alternate}
#idea.composed-contact .note-angel{width:420px;right:-43px;top:-181px}
@keyframes living-name-breathe{0%,68%,100%{scale:1}78%{scale:1.022}86%{scale:1}}
@keyframes living-name-shine{0%,57%{background-position:130% 0;opacity:0}60%{opacity:.95}79%{background-position:-35% 0;opacity:.95}83%,100%{background-position:-35% 0;opacity:0}}
@keyframes living-name-glint{0%,71%,85%,100%{opacity:0;scale:.3;rotate:0deg}77%{opacity:1;scale:1.2;rotate:35deg}82%{opacity:0;scale:1.5;rotate:70deg}}
@keyframes living-button-shine{0%,63%{transform:translateX(-48%)}85%,100%{transform:translateX(48%)}}
@keyframes living-hoist{0%,100%{transform:translateY(17px) rotate(-2deg)}33%{transform:translateY(-12px) rotate(1.5deg)}57%{transform:translateY(-15px) rotate(-.7deg)}75%{transform:translateY(2px) rotate(.8deg)}}
@keyframes living-paper{0%,100%{transform:translateY(25px) rotate(-4deg)}35%,63%{transform:translateY(-29px) rotate(2deg)}78%{transform:translateY(-10px) rotate(0)}}
@keyframes living-guru-note{0%,75%,100%{transform:translateY(0) rotate(-7deg)}84%{transform:translateY(-7px) rotate(-4deg)}92%{transform:translateY(0) rotate(-7deg)}}
@keyframes living-guru-check{0%,22%{stroke-dashoffset:30;opacity:.5}42%,89%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:30;opacity:.5}}
@keyframes living-fog{from{transform:translateX(-3%) scale(1)}to{transform:translateX(25%) scale(1.08)}}
@keyframes living-ember-glow{0%,100%{opacity:.45}20%{opacity:.9}47%{opacity:.55}78%{opacity:1}}
@keyframes living-ember{0%{transform:translate(0,0) rotate(0);opacity:0}10%{opacity:.65}75%{opacity:.4}100%{transform:translate(50px,-600px) rotate(220deg);opacity:0}}
@keyframes living-spotlight{from{transform:rotate(-18deg);opacity:.4}to{transform:rotate(18deg);opacity:.75}}
@keyframes living-747-flight{0%{transform:translate(0,4px);opacity:0}3%{opacity:1}74%{opacity:1}83%,100%{transform:translate(calc(-100vw - 1040px),-6px);opacity:0}}
@keyframes living-superhero-bob{from{transform:translateY(-5px) rotate(-2deg)}to{transform:translateY(7px) rotate(1deg)}}
body:not(.hearth-in-view) #record :is(.wordmark-button,.name-idle-shine,.name-idle-star,.invite-idle-sheen),.fire-paused :is(.wordmark-button,.name-idle-shine,.name-idle-star,.invite-idle-sheen),.page-hidden :is(.wordmark-button,.name-idle-shine,.name-idle-star,.invite-idle-sheen){animation-play-state:paused!important}
.ambient-zone:not(.is-visible) .ambient-motion,.fire-paused .ambient-motion,.page-hidden .ambient-motion{animation-play-state:paused!important}
#evidence[data-world-scene="noir"] .outbreak-atmosphere .ambient-motion,#evidence[data-world-scene="outbreak"] .noir-atmosphere .ambient-motion{animation-play-state:paused!important}
@media(max-width:1100px) and (min-width:701px){#services.composed-gallery .guru-note{font-size:15px;padding:13px}.guru-note small{font-size:8px}#idea.composed-contact .note-angel{width:355px;top:-154px;right:-35px}}
@media(max-width:700px){
#record .hero-copy .personal-invite{width:255px;min-height:56px}
#record .name-idle-star{width:17px;height:17px}
#services.composed-gallery .project-art .construction-load{width:82%;left:2%;top:4%}
#services.composed-gallery .wedding-stage>.wedding-card{width:79%;left:10.5%;top:7%}
#services.composed-gallery .wedding-stage>.wedding-envelope-back,#services.composed-gallery .wedding-stage>.wedding-envelope-front{width:83%;left:8.5%;top:24%}
#services.composed-gallery .guru-note{width:62%;top:25%;font-size:18px}
#golden-pass.composed-family .factory-heading{gap:11px;margin-bottom:23px}
#golden-pass.composed-family .factory-crest{width:41px;height:41px;flex-basis:41px}
#golden-pass.composed-family .factory-heading h2{font-size:29px}
#golden-pass.composed-family .ticket-scene{padding-top:10px}
#evidence .world-scene>img{object-position:46% center}
#evidence .world-scene-noir>img{object-position:center}
#evidence .outbreak-fog{width:220%;left:-60%;bottom:10%}
#idea.composed-contact .sky-flyby{width:560px;right:-560px;height:150px;top:6px;animation-name:living-747-flight-mobile;animation-delay:-18s}
#idea .sky-747{width:365px}
#idea .sky-patrick{width:125px;left:340px;top:30px}
#idea.composed-contact .note-angel{width:320px;right:-29px;top:-165px}
}
@keyframes living-747-flight-mobile{0%{transform:translate(0,0);opacity:0}4%{opacity:1}73%{opacity:1}83%,100%{transform:translate(calc(-100vw - 660px),9px);opacity:0}}
@media(max-width:380px){#golden-pass.composed-family .factory-heading{gap:8px}#golden-pass.composed-family .factory-heading h2{font-size:25px}#golden-pass.composed-family .factory-crest{flex-basis:36px;width:36px}#idea.composed-contact .note-angel{width:288px;top:-149px;right:-28px}}
@media(prefers-reduced-motion:reduce){
#record :is(.wordmark-button,.name-idle-shine,.name-idle-star,.invite-idle-sheen),.living-scenes-page .ambient-motion{animation:none!important}
#record :is(.name-idle-shine,.name-idle-star,.invite-idle-sheen),#evidence :is(.outbreak-sparks,.stage-dust,.stage-beam),#idea .sky-flyby{display:none}
#services.composed-gallery .construction-load{transform:none}
#services.composed-gallery .wedding-card{transform:translateY(-12px) rotate(-1deg)}
#services.composed-gallery .guru-note svg path{stroke-dashoffset:0}
#evidence .world-scene{transition:none}
}
@media print{#evidence :is(.world-scene,.world-scene-shade,.outbreak-atmosphere,.noir-atmosphere),#idea .sky-flyby,#record :is(.name-idle-shine,.name-idle-star,.invite-idle-sheen){display:none}}

/* Restart the flyby on entering the sky scene, so it is seen without a long wait. */
#idea.composed-contact:not(.is-visible) .sky-flyby{animation-name:none;opacity:0}
@media(max-width:700px){#idea.composed-contact .sky-flyby{top:307px}}
