/* The stage: the CSS that stands in for the Android canvas. Shared by Themulator (style.css imports it) and the admin page (/admin/engine/stage.css). */
@font-face { font-family: 'Material Icons'; src: url(vendor/material-icons.woff2) format('woff2'); font-display: block; }
@font-face { font-family: 'Roboto'; font-weight: 100 900; font-style: normal; src: url(vendor/roboto-var.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Roboto'; font-weight: 400; font-style: italic; src: url(vendor/roboto-italic-400.woff2) format('woff2'); font-display: swap; }
.mi { font-family: 'Material Icons'; font-weight: normal; font-style: normal; letter-spacing: normal; text-transform: none; white-space: nowrap; direction: ltr; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; line-height: 1; }

/* ---------------------------------------------------------------- the stage: what the Android canvas becomes */
#stage { contain: paint; isolation: isolate; position: relative; transform-origin: 0 0; overflow: hidden; background: #000; perspective-origin: 50% 50%; outline: none; }
#enter, #world { position: absolute; inset: 0; transform-style: preserve-3d; }
/* #enter is always flat, projecting the scene with the stage's own perspective: a screen change fades and moves it (transition.js), and switching
   it between flat and 3D at the end of a change cost a frame drawn at another scale while WebKit rebuilt its layers */
#enter { transform-style: flat; perspective: inherit; perspective-origin: inherit; }
#leaving { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; } /* the old screen during a change (transition.js) */
#enter.go { animation: tm-enter .45s cubic-bezier(.42, 0, .58, 1) both; }
#enter.goBack { animation: tm-enter-back .45s cubic-bezier(.42, 0, .58, 1) both; }
#enter.fade { animation: tm-fade .45s ease both; }
@keyframes tm-enter { from { transform: translateZ(-420px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tm-enter-back { from { transform: translateZ(210px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tm-fade { from { opacity: 0; } to { opacity: 1; } }
.pl { position: absolute; transform-style: preserve-3d; transform-origin: 50% 50%; }
.pl.clip { overflow: hidden; transform-style: flat; }
.pl.iso { transform-style: flat; } /* a sibling of an open overlay (dom.js) */
.pl.nohit { pointer-events: none; }
.pl { pointer-events: auto; }
#stage.inspect .pl.nohit, #stage.alt .pl.nohit { pointer-events: auto; } /* Themulator's inspector picks any plane */
.own { position: absolute; inset: 0; }
.w { position: absolute; }
.w-panel, .w-shadow, .w-image, .w-video, .w-check, .w-slider { overflow: visible; }
.w-shadow { pointer-events: none; }
.w-text .t { -webkit-font-smoothing: antialiased; }
.w-icon.missing { outline: 1px dashed #f2b84b88; }
.w-image img, .w-video img, .w-video video { user-select: none; -webkit-user-drag: none; }
.w-rating { overflow: visible; }
.w-help { overflow: visible; }
.w-status svg { display: block; }

@keyframes tm-float { 0%, 100% { translate: 0 0 0; } 25% { translate: 0 -10px 14px; } 75% { translate: 0 10px -14px; } }
@keyframes tm-spin { from { rotate: 0 1 0 0deg; } to { rotate: 0 1 0 360deg; } }
@keyframes tm-breathe { 0%, 100% { scale: 1; } 25% { scale: 1.03; } 75% { scale: .97; } }
@keyframes tm-wobble { 0%, 100% { rotate: 0 0 1 0deg; } 25% { rotate: 0 0 1 3deg; } 75% { rotate: 0 0 1 -3deg; } }
@keyframes tm-drift { 0%, 100% { translate: 0 0 0; } 25% { translate: 36px 0 0; } 75% { translate: -36px 0 0; } }
@keyframes tm-pulse { 0%, 100% { opacity: var(--a, 1); } 50% { opacity: calc(var(--a, 1) * .35); } }
@keyframes tm-marquee { 0%, 20% { transform: translateX(0); } 80%, 100% { transform: translateX(var(--ov)); } }
@keyframes tm-sweep { from { left: -22%; } to { left: 100%; } }

/* C(Box): six CSS planes */
.box3d { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; }
.box3d .face { position: absolute; backface-visibility: hidden; transform-style: flat; opacity: var(--fade, 1); }
.box3d .face img { backface-visibility: hidden; }
.box3d .floor { backface-visibility: visible; }
.box3d .refl { position: absolute; }
.box3d .shine { position: absolute; overflow: hidden; pointer-events: none; }
.box3d .shine .band { position: absolute; animation: tm-sweep 4s linear infinite; }