/* Il segno "ordine": the tratto pyramid (widgets.js TR: blocks 200/150/100/50 × 38) drawn with the hero's lines. The resting state is this file alone; motion.js only plays into it. See team/out/motion-ordine.md */

.mo-sign {
  --s: 1;
  --lw: 4px;
  position: absolute;
  width: calc(200px * var(--s));
  height: calc(152px * var(--s));
  display: flex;
  flex-direction: column-reverse;
  pointer-events: none;
}
.mo-lv { display: grid; grid-auto-rows: 1fr; height: calc(38px * var(--s)); margin-inline: auto; }
.mo-lv[data-level="protection"] { width: 100%; }
.mo-lv[data-level="reserve"] { width: 75%; }
.mo-lv[data-level="investment"] { width: 50%; }
.mo-lv[data-level="frontier"] { width: 25%; }
/* Lit from the right, logo blue at the base, light at the apex */
.mo-ln { display: block; align-self: end; height: var(--lw); background: linear-gradient(90deg, color-mix(in oklab, var(--c) 62%, #011a53), var(--c) 58%, color-mix(in oklab, var(--c) 84%, #ffffff)); }
.site { --mo-construct: rgb(143 180 240 / 0.6); }

/* Hero: the pyramid stands on the Roadmap window, flush with its right edge (motion.js measures; these are the 1440 values) */
.hero .field .mo-sign { --s: 2.1; --lw: 5px; left: var(--mo-x, 840px); top: var(--mo-y, 87px); }
.hero[data-mo-sign] .field canvas { display: none; }
.h-diagonale[data-mo-sign] .field { -webkit-mask-image: none; mask-image: none; }
@media (max-width: 1100px) { .hero .field .mo-sign { --s: 1.7; --lw: 4px; } }

/* Phones: a still band 64px tall between the copy and the product, the pyramid on its ground line */
.mo-strip { display: none; }
@media (max-width: 759px) {
  .hero .field .mo-sign { display: none; }
  .mo-strip { display: block; position: relative; height: 64px; margin: -4px 0 12px; }
  .mo-strip::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--mo-construct); }
  .mo-strip .mo-sign { --s: 0.4; --lw: 2px; right: 12px; bottom: 1px; }
}

/* The consultant's edit on first load: the old horizon is a decorative copy laid over the chip until it rolls away */
plannix-roadmap .prm-when { position: relative; }
plannix-roadmap .prm-when.mo-ghost { position: absolute; left: 0; top: 0; height: 100%; pointer-events: none; }

/* Until motion.js takes over, a pre-rendered sign waits closed; if the script never runs it opens on its own */
.mo-js .hero .mo-sign:not([data-mo-played]) { animation: mo-failsafe 0s linear 2s both; }
@keyframes mo-failsafe { from { clip-path: inset(100% 0 0 0); } to { clip-path: none; } }

@media (prefers-reduced-motion: reduce) {
  .mo-sign, .mo-ln, .mo-lv, .mo-js .hero .mo-sign:not([data-mo-played]) { animation: none !important; transition: none !important; }
}

/* Pyramid chapter: on wide screens it is the page's second world, a full viewport around the sign */
@media (min-width: 1101px) {
  #piramide.chapter { min-height: 100svh; display: flex; flex-direction: column; justify-content: center; }
}