/* company-profile.html, "The Golden Passage": navy, gold and the hero's pale blue. Every moving part is placed by
   js/profile-open.js from one clock; this file is the resting look. Only transforms, opacity and strokes move. */
:root { --navy: #0b1f33; --gold: #b6893a; }
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  overflow: hidden;
  background: radial-gradient(ellipse at 50% 45%, #fffdf8 0%, #f1f7fd 50%, #d9e9f8 100%);
  color: var(--navy);
  font-family: Georgia, "Times New Roman", Times, serif;
}
.po { position: relative; height: 100%; overflow: hidden; }
.po-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.po-chart { position: absolute; inset: 0; width: 100%; height: 100%; }

.po-doc { position: absolute; perspective: 1500px; opacity: 0; }
.po-shadow {
  position: absolute; inset: 0; border-radius: 2px; transform-origin: 0 50%; opacity: 0;
  box-shadow: 0 22px 46px rgba(11, 31, 51, 0.2), 0 3px 8px rgba(11, 31, 51, 0.12);
}
.po-sheet { position: absolute; inset: 0; transform-style: preserve-3d; }
.po-panel {
  position: absolute; top: 0; width: 50%; height: 100%;
  background: linear-gradient(135deg, #ffffff 0%, #fbf8f1 100%);
}
.po-left { left: 0; border-radius: 2px 0 0 2px; }
.po-right { left: 50%; transform-origin: 0 50%; border-radius: 0 2px 2px 0; background: linear-gradient(135deg, #fffefb 0%, #f7f2e8 100%); }
.po-fold { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11, 31, 51, 0.5), rgba(11, 31, 51, 0.08)); opacity: 0; }

.po-content {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5%; padding: 0 9%; text-align: center;
}
.po-content img { width: 66%; height: auto; opacity: 0; }
.po-rule { width: 18%; height: 1px; background: var(--gold); transform: scaleX(0); }
.po-name { font-size: clamp(0.62rem, 1.15vw, 0.8rem); letter-spacing: 0.2em; text-transform: uppercase; line-height: 1.8; opacity: 0; }

.po-sweepclip { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.po-sweep {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 34%; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(201, 160, 74, 0.34) 45%, rgba(255, 255, 255, 0.6) 55%, transparent);
  transform: translateX(-120%) skewX(-16deg);
}

.po-error { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 24px; text-align: center; line-height: 1.6; background: #f1f7fd; }
.po-error[hidden] { display: none; }
.po a { color: var(--navy); text-decoration-color: var(--gold); text-underline-offset: 4px; }
.po a:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.po-fallback { position: absolute; left: 0; right: 0; bottom: 5vh; width: max-content; margin: 0 auto; font-size: 0.9rem; opacity: 0; transition: opacity 0.5s ease 2.6s; }
.po.is-late .po-fallback, .po-fallback:focus-visible { opacity: 0.85; transition-delay: 0s; }