/* A self-contained prologue; gameplay layout stays in place underneath it. */
#shell.opening-pending > #logo,#shell.opening-pending > #hud,#shell.opening-pending > #stage,#shell.opening-pending > #bar{visibility:hidden}
#shell.opening-build > #stage{visibility:visible}
#shell.opening-build .dotsRow,#shell.opening-build .gauge{visibility:hidden}
#opening{position:absolute;inset:0;z-index:20;pointer-events:none;overflow:hidden;isolation:isolate}
#opening .op-landscape{position:absolute;inset:0;background:linear-gradient(#8bcbd9 0%,#e1ecd0 42%,#78a45d 43%,#547e3e 100%);transition:opacity 1s}
.op-sun{position:absolute;width:18%;aspect-ratio:1;border-radius:50%;background:#fff2bb;top:12%;right:15%;box-shadow:0 0 55px #fff0ae90}
.op-hills{position:absolute;left:-30%;width:160%;height:30%;top:29%;border-radius:50% 70% 0 0;background:#91b58a;transform:rotate(-8deg)}
.op-forest{position:absolute;left:-70%;width:240%;height:44%;top:5%;background:radial-gradient(ellipse at 50% 80%,#356348 0 49%,transparent 50%) 0 0/18% 100% repeat-x;transition:opacity .9s}
.op-forest.far{opacity:.45;top:4%;transform:scale(.8);filter:blur(1px)}
.op-forest.near{top:10%;background-size:24% 100%;filter:drop-shadow(0 12px 0 #284e3520)}
.op-path{position:absolute;width:160%;height:26%;left:-30%;top:60%;border-radius:50%;background:#dac58b;transform:rotate(-7deg);box-shadow:0 0 0 10px #e1d7a230;transition:opacity .6s}
.op-pigs{position:absolute;left:37%;top:51%;width:62%;height:18%;transition:left .6s,top .7s,width .7s,opacity .4s;z-index:4}
.op-pig{position:absolute;width:32%;left:calc(var(--i)*34%);top:calc(var(--i)*15%);filter:drop-shadow(0 4px 3px #1a3d2520)}
.op-pig svg,.op-wolf svg{width:100%;overflow:visible}
.op-wolf{position:absolute;left:-14%;top:55%;width:40%;z-index:3;transform-origin:50% 100%;transition:opacity .5s,left .9s,top .9s,width .9s}
.op-body{transform-origin:50% 80%}.op-leg{transform-box:fill-box;transform-origin:50% 0%}
.op-alert{position:absolute;left:58%;top:49%;width:16%;height:4%;transition:opacity .2s}
.op-alert i{position:absolute;left:40%;width:7%;height:65%;background:#fff1ac;border-radius:4px;transform:rotate(-10deg)}
.op-alert i:first-child{left:10%;top:24%;transform:rotate(-43deg)}.op-alert i:last-child{left:75%;top:20%;transform:rotate(30deg)}
[data-phase="arrival"] .op-alert,[data-phase="build"] .op-alert,[data-phase="ready"] .op-alert{opacity:0}
[data-phase="chase"] .op-pigs{animation:op-escape 2.2s linear both}
[data-phase="chase"] .op-alert{animation:op-notice .32s ease-out both}
[data-phase="chase"] .op-wolf{animation:op-pursue 1.85s .35s linear both}
[data-phase="chase"] .op-forest.near{animation:op-scroll .65s linear infinite}
[data-phase="chase"] .op-forest.far{animation:op-scroll 1.2s linear infinite}
[data-phase="chase"] .op-leg,[data-phase="arrival"] .op-pig .op-leg{animation:op-stride .18s infinite alternate}
[data-phase="chase"] .leg-b,[data-phase="arrival"] .op-pig .leg-b{animation-direction:alternate-reverse}
[data-phase="chase"] .op-body,[data-phase="arrival"] .op-pig .op-body{animation:op-bound .18s infinite alternate}
[data-phase="arrival"] .op-landscape,[data-phase="build"] .op-landscape,[data-phase="ready"] .op-landscape{opacity:0}
[data-phase="arrival"] .op-pigs{left:12%;top:calc(var(--yard) + 1%);width:39%;animation:op-arrive 1.1s ease-out both}
[data-phase="arrival"] .op-wolf,[data-phase="relief"] .op-wolf,[data-phase="build"] .op-wolf,[data-phase="ready"] .op-wolf{visibility:hidden;opacity:0}
[data-phase="build"] .op-pigs,[data-phase="ready"] .op-pigs{left:12%;top:calc(var(--yard) + 1%);width:39%}
[data-phase="build"] .op-pig .op-head{transform-box:fill-box;transform-origin:center;animation:op-look .9s ease-in-out}
.op-clearing{position:absolute;background:linear-gradient(145deg,#c7bc80,#8b9861);border:2px solid #e3d69b90;border-radius:5%;opacity:0;transition:opacity .8s,transform 1s;transform:scale(.92);box-shadow:0 10px 40px #102d2f40}
[data-phase="arrival"] .op-clearing{opacity:1;transform:scale(1)}
[data-phase="build"] .op-clearing{opacity:0;transform:scale(1)}
[data-phase="ready"] .op-pigs,[data-phase="ready"] .op-wolf{opacity:0}
[data-phase="chase"] .op-wolf .op-leg{animation-name:op-gallop;animation-delay:.35s}
[data-phase="chase"] .op-wolf .op-body{animation-delay:.35s}
@keyframes op-gallop{from{transform:rotate(-20deg)}to{transform:rotate(20deg)}}
@keyframes op-notice{0%,55%{opacity:1}100%{opacity:0}}
@keyframes op-escape{0%{transform:translateX(0)}55%{transform:translateX(20%)}100%{transform:translateX(170%)}}
@keyframes op-pursue{0%{transform:translateX(0)}65%{transform:translateX(40%)}90%,100%{transform:translateX(85%)}}
@keyframes op-scroll{from{margin-left:0}to{margin-left:-24%}}
@keyframes op-stride{from{transform:rotate(-28deg)}to{transform:rotate(28deg)}}
@keyframes op-bound{from{transform:translateY(0) rotate(-2deg)}to{transform:translateY(-4px) rotate(2deg)}}
@keyframes op-arrive{from{transform:translateX(-160%)}to{transform:translateX(0)}}
@keyframes op-look{0%,100%{transform:rotate(0)}50%{transform:rotate(-12deg)}}
/* The wolf loses the trail; it never appears in the new clearing. */
.op-cut{position:absolute;inset:0;z-index:8;background:#234735;opacity:0;transition:opacity .35s ease-in-out}
.op-smile{display:none}
[data-phase="lost"] .op-pigs,[data-phase="transit"] .op-pigs{visibility:hidden}
[data-phase="lost"] .op-alert,[data-phase="transit"] .op-alert,[data-phase="relief"] .op-alert{opacity:0}
[data-phase="lost"] .op-wolf,[data-phase="transit"] .op-wolf{transform:translateX(85%)}
[data-phase="lost"] .op-wolf svg{animation:op-search 1.1s ease-in-out both;transform-origin:50% 70%}
[data-phase="transit"] .op-cut{opacity:1}
[data-phase="relief"] .op-landscape{opacity:0}
[data-phase="relief"] .op-pigs{left:12%;top:calc(var(--yard) + 1%);width:39%}
[data-phase="relief"] .op-clearing{opacity:1;transform:scale(1)}
[data-phase="relief"] .op-pig .op-body{animation:op-sigh .75s ease-out both;animation-delay:calc(var(--i)*.025s)}
[data-phase="relief"] .op-mouth,[data-phase="build"] .op-mouth{display:none}
[data-phase="relief"] .op-smile,[data-phase="build"] .op-smile{display:block}
@keyframes op-search{0%,15%{transform:scaleX(1) rotate(0)}30%,65%{transform:scaleX(-1) rotate(-4deg)}85%,100%{transform:scaleX(1) rotate(3deg)}}
@keyframes op-sigh{0%{transform:translateY(0) scaleY(1)}30%{transform:translateY(-2px) scaleY(1.04)}100%{transform:translateY(2px) scaleY(.97)}}
@media(prefers-reduced-motion:reduce){#opening *,#opening *::before{animation:none!important;transition:none!important}}

/* Put on the same equipment that is used to build the reel cells. */
.op-pig .pig-kit{opacity:0}
.op-pig.op-equipped .pig-kit{opacity:1}
.pig-tool{transform-box:view-box;transform-origin:89px 83px}
[data-phase="equip"] .op-landscape,[data-phase="equip"] .op-alert{opacity:0}
[data-phase="equip"] .op-wolf{visibility:hidden;opacity:0}
[data-phase="equip"] .op-clearing{opacity:1;transform:scale(1)}
[data-phase="equip"] .op-pigs{left:8%;top:44%;width:78%}
[data-phase="equip"] .op-mouth{display:none}
[data-phase="equip"] .op-smile{display:block}
[data-phase="equip"] .op-equipped .pig-helmet{animation:pigHatOn .5s cubic-bezier(.2,.8,.3,1.3) both}
[data-phase="equip"] .op-equipped .pig-tool{animation:pigToolOn .45s ease-out both}
@keyframes pigHatOn{from{opacity:0;transform:translateY(-32px) rotate(-12deg)}to{opacity:1;transform:none}}
@keyframes pigToolOn{from{opacity:0;transform:translate(20px,12px) rotate(35deg)}to{opacity:1;transform:none}}
.builderPig{position:absolute;z-index:8;pointer-events:none;filter:drop-shadow(0 2px 2px #0005)}
.builderPig svg{width:100%;height:100%;overflow:visible;display:block}
.builderPig .op-mouth{display:none}.builderPig .op-smile{display:block}
@media(prefers-reduced-motion:reduce){.op-equipped .pig-kit{animation:none!important}}