/* PrimeX OS の節の、右側の絵。
   os.prime-x.jp のヒーローから markup・CSS・動きをそのまま持ってきた。
   一度こちらで作り直したが別物になったので、移植に切り替えている。

   規則はすべて .px-os__vis の中へ閉じ込めてある。
   元は .hero 以下に書かれているので、その前置きを差し替えて取り込んだ。
   こうしないと本体の見出しや釦の指定と衝突する。 */

.px-os__vis {
  /* os.prime-x.jp 側の変数。この絵の中だけで使う。
     本体の配色（--px-*）とは別物なので、外には出さない。 */
  --bg: #fdfdfd;
  --surface: #fff;
  --sunk: #f4f4f6;
  --ink: #1a1a1a;
  --ink-2: #3d3d44;
  --muted: #85858e;
  --line: rgba(26,26,26,.1);
  --accent: #4b3bff;
  --accent-2: #6b5cff;
  --accent-3: #a79cff;
  --accent-soft: #eeecff;
  --night: #1a1a1a;
  --f-en: "Outfit","Noto Sans JP",sans-serif;
  --f-deco: "Cormorant Garamond",serif;
}

.px-os__vis{ background: var(--accent); border-radius: 32px; padding: clamp(18px, 3vw, 36px); position: relative; overflow: hidden; }
.px-os__vis::before{ content: ""; position: absolute; right: -90px; top: -110px; width: 300px; height: 300px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.35); }
.px-os__vis::after{ content: ""; position: absolute; left: -60px; bottom: -80px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); }
.px-os__vis .mock{ position: relative; z-index: 1; }
.px-os__vis .mock{ background: var(--surface); border-radius: 22px; box-shadow: rgba(26, 26, 26, 0.5) 0px 40px 90px -40px; border: 1px solid var(--line); overflow: hidden; display: grid; grid-template-columns: 132px minmax(0px, 1fr); }
.px-os__vis .mock .sd{ background: var(--night); color: rgb(255, 255, 255); padding: 16px 10px; display: grid; gap: 3px; align-content: start; font-size: 11px; }
.px-os__vis .mock .sd b{ font-family: var(--f-en); font-size: 14px; padding: 0px 8px 10px; }
.px-os__vis .mock .sd b i{ font-style: normal; color: var(--accent-3); }
.px-os__vis .mock .sd span{ padding: 6px 8px; border-radius: 7px; opacity: 0.72; }
.px-os__vis .mock .sd span.on{ background: var(--accent); opacity: 1; }
.px-os__vis .mock .mn{ padding: 16px; display: grid; gap: 12px; }
.px-os__vis .kp{ display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 8px; }
.px-os__vis .kp div{ border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; display: grid; }
.px-os__vis .kp span{ font-size: 10px; color: var(--muted); }
.px-os__vis .kp b{ font-family: var(--f-en); font-size: 20px; font-weight: 500; line-height: 1.3; }
.px-os__vis .mk{ font-family: var(--f-en); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; color: var(--muted); }
.px-os__vis .ap{ display: grid; gap: 6px; }
.px-os__vis .ap div{ display: grid; grid-template-columns: auto minmax(0px, 1fr) auto; gap: 8px; align-items: center; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; font-size: 11.5px; }
.px-os__vis .ap i{ font-style: normal; font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); }
.px-os__vis .ap u{ text-decoration: none; font-size: 10.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--accent); color: rgb(255, 255, 255); }
.px-os__vis .ap div:nth-child(1){ animation: 9s ease 0s infinite normal none running pop; }
.px-os__vis .ap div:nth-child(2){ animation: 9s ease 3s infinite normal none running pop; }
.px-os__vis .ap div:nth-child(3){ animation: 9s ease 6s infinite normal none running pop; }
.px-os__vis .lg{ display: grid; gap: 5px; font-size: 11px; color: var(--ink-2); }
.px-os__vis .lg div{ display: flex; gap: 8px; }
.px-os__vis .lg time{ font-family: var(--f-en); color: var(--muted); flex: 0 0 auto; }
.px-os__vis .kp3{ display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 10px; }
.px-os__vis .kp3 div{ border: 1px solid var(--line); border-radius: 14px; padding: 14px; background: var(--surface); display: grid; }
.px-os__vis .kp3 span{ font-size: 11.5px; color: var(--muted); }
.px-os__vis .kp3 b{ font-family: var(--f-en); font-size: 26px; font-weight: 500; }
.px-os__vis .apply{ display: grid; grid-template-columns: minmax(0px, 0.9fr) minmax(0px, 1.1fr); gap: 48px; align-items: start; }
.px-os__vis .rv:not(.vis) > *{ animation: 0.9s cubic-bezier(0.16, 0.8, 0.2, 1) 0s 1 normal both running beat; }
.px-os__vis .rv:not(.vis) > :nth-child(2){ animation-delay: 0.12s; }
.px-os__vis .rv:not(.vis) > :nth-child(3){ animation-delay: 0.24s; }
.px-os__vis .rv:not(.vis) > :nth-child(4){ animation-delay: 0.38s; }
.px-os__vis .rv:not(.vis) > :nth-child(5){ animation-delay: 0.5s; }
.px-os__vis .rv:not(.vis) > :nth-child(6){ animation-delay: 0.6s; }
@keyframes beat { 
  0% { opacity: 0; transform: translateY(26px); }
  100% { opacity: 1; transform: none; }
}
.px-os__vis{ perspective: 1500px; background: linear-gradient(160deg, rgb(12, 13, 38), rgb(26, 23, 87) 58%, rgb(58, 46, 214)); overflow: hidden; min-height: 440px; display: grid; align-items: center; }
.px-os__vis::before, .px-os__vis::after{ display: none; }
.px-os__vis .dawn-l{ position: absolute; inset: 0px; background: linear-gradient(165deg, rgb(90, 75, 255) 0%, rgb(156, 146, 255) 55%, rgb(255, 211, 173) 100%); opacity: 0; transition: opacity 2s; }
.px-os__vis.dawn .dawn-l{ opacity: 1; }
.px-os__vis .sky{ position: absolute; inset: 0px; background-image: radial-gradient(rgb(255, 255, 255) 1px, transparent 1.6px), radial-gradient(rgb(255, 255, 255) 0.8px, transparent 1.4px), radial-gradient(rgb(255, 255, 255) 1.2px, transparent 1.8px); background-size: 97px 89px, 151px 133px, 211px 197px; background-position: 12px 18px, 70px 64px, 130px 30px; opacity: 0.55; transition: opacity 2s; animation: 3.6s ease-in-out 0s infinite alternate none running twinkle; }
.px-os__vis.dawn .sky{ opacity: 0; }
.px-os__vis .moon{ position: absolute; right: 8%; top: 9%; width: 46px; height: 46px; border-radius: 50%; background: rgb(241, 238, 255); box-shadow: rgba(241, 238, 255, 0.32) 0px 0px 44px 10px; transition: transform 2.2s, background 2s, box-shadow 2s; }
.px-os__vis.dawn .moon{ transform: translate(-30px, 14px) scale(1.25); background: rgb(255, 226, 176); box-shadow: rgba(255, 214, 150, 0.55) 0px 0px 70px 24px; }
.px-os__vis .clock{ position: absolute; left: clamp(16px, 3vw, 30px); top: clamp(14px, 2.6vw, 26px); z-index: 3; display: flex; align-items: baseline; gap: 10px; color: rgb(255, 255, 255); background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(8px); border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 999px; padding: 6px 16px; }
.px-os__vis .clock span{ font-family: var(--f-en); font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; }
.px-os__vis .clock small{ font-size: 12px; opacity: 0.9; }
.px-os__vis .scene{ position: relative; z-index: 2; transform-style: preserve-3d; transform: rotateY(var(--ry,-13deg)) rotateX(var(--rx,7deg)); transition: transform 0.3s ease-out; margin-top: 44px; animation: 1.3s cubic-bezier(0.16, 0.8, 0.2, 1) 0.2s 1 normal both running swing; }
@keyframes swing { 
  0% { opacity: 0; transform: rotateY(-42deg) rotateX(18deg) translateZ(-260px); }
  100% { opacity: 1; transform: rotateY(var(--ry,-13deg)) rotateX(var(--rx,7deg)); }
}
.px-os__vis .flt{ transform-style: preserve-3d; animation: 7s ease-in-out 0s infinite normal none running flt; }
@keyframes flt { 
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-12px); }
}
.px-os__vis .mock{ box-shadow: rgba(0, 0, 0, 0.7) 0px 60px 90px -40px, rgba(255, 255, 255, 0.08) 0px 0px 0px 1px; }
.px-os__vis .lg div{ opacity: 0.28; transition: opacity 0.5s, color 0.5s; }
.px-os__vis .lg div.lit{ opacity: 1; }
.px-os__vis .lg div.now{ color: var(--accent); font-weight: 700; }
.px-os__vis .ap div{ opacity: 0.22; transform: translateX(14px); transition: opacity 0.5s, transform 0.6s cubic-bezier(0.16, 0.8, 0.2, 1); animation: auto ease 0s 1 normal none running none; }
.px-os__vis .ap.ready div{ opacity: 1; transform: none; }
.px-os__vis .ap.ready div:nth-child(2){ transition-delay: 0.15s; }
.px-os__vis .ap.ready div:nth-child(3){ transition-delay: 0.3s; }
.px-os__vis .fc{ position: absolute; z-index: 4; background: rgb(255, 255, 255); color: var(--ink); border-radius: 16px; padding: 10px 16px; font-size: 12.5px; font-weight: 700; box-shadow: rgba(0, 0, 0, 0.6) 0px 26px 50px -18px; display: grid; gap: 1px; opacity: 0; transform: translateZ(110px) translateY(18px) scale(0.92); transition: opacity 0.5s, transform 0.7s cubic-bezier(0.16, 0.8, 0.2, 1); pointer-events: none; }
.px-os__vis .fc small{ font-family: var(--f-en); font-weight: 600; color: var(--accent); font-size: 11px; letter-spacing: 0.08em; }
.px-os__vis .fc.show{ opacity: 1; transform: translateZ(110px); }
.px-os__vis .fc.f1{ left: -3%; top: 20%; }
.px-os__vis .fc.f2{ right: -4%; top: 44%; }
.px-os__vis .fc.f3{ left: 8%; bottom: -6%; }
@media (max-width: 560px){.px-os__vis .mock{ grid-template-columns: minmax(0px, 1fr); }.px-os__vis .mock .sd{ display: none; }}
@media (prefers-reduced-motion: reduce){.px-os__vis .rv, .px-os__vis .ap div{ animation: auto ease 0s 1 normal none running none; }}
@media (max-width: 860px){.px-os__vis .apply{ grid-template-columns: minmax(0px, 1fr); gap: 28px; }}
@media (max-width: 1040px){.px-os__vis .scene{ --ry: -7deg; --rx: 5deg; }.px-os__vis .fc.f1{ left: 2%; }.px-os__vis .fc.f2{ right: 2%; }}
@media (max-width: 560px){.px-os__vis{ min-height: 0px; }.px-os__vis .fc{ font-size: 11.5px; padding: 8px 12px; }}
@media (prefers-reduced-motion: reduce){.px-os__vis .rv:not(.vis) > *, .px-os__vis .scene, .px-os__vis .flt, .px-os__vis .sky, .px-os__vis .sc.on, .px-os__vis .rings i{ animation: auto ease 0s 1 normal none running none; }.px-os__vis .lg div, .px-os__vis .ap div{ opacity: 1; transform: none; }}