/* The homepage's opening (opening.js sets html.opening): a trading terminal coming on. A gold scan line runs down the hero as the top
   edge of a dark curtain in front of it: above the line the hero is on, below it still dark, so the label, the title, the text, the
   buttons, the figures and the authorization card appear exactly as the line passes them, like a screen being scanned in. The XAUUSD
   label also types with a caret. About 1.1 s, once on arrival, no blur.
   Owner 27 Oct: the card comes in with the rest;: the curtain moves by
   transform only (the compositor), which the page's loading scripts cannot hold up, and nothing in the hero is clipped, faded or moved
   (a fade or move on the card flattened its 3D rows and it shook under the mouse); "spo duket sikur ajo vija po i shfaq sendet": the
   line ran behind the text in the background, now it is the edge that reveals it. */
.op-scan { display: none; }
.opening .op-scan { display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; will-change: transform;
  background: var(--bg); border-top: 2px solid rgba(243, 220, 147, .9); animation: op-scan 1.1s cubic-bezier(.4, .05, .6, .95) forwards; }
/* the line's glow, just above it, on the part already on */
.opening .op-scan::before { content: ""; position: absolute; left: 0; right: 0; top: -58px; height: 56px;
  background: linear-gradient(180deg, transparent, rgba(226, 196, 108, .1)); }
@keyframes op-scan { from { transform: translateY(0); } to { transform: translateY(100%); } }
.opening .hero .pill { animation: op-type .5s steps(18, end) backwards; }
@keyframes op-type { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.opening .hero .pill::after { content: ""; width: 2px; height: 14px; margin-left: -4px; background: var(--gold); opacity: 0;
  animation: op-caret 1s steps(1, end) both; }
@keyframes op-caret { 0%, 40%, 80% { opacity: 1; } 20%, 60%, 100% { opacity: 0; } }
/* the curtain is the hero's reveal: no fade of its own under it (it began late and left the price line at 40 % at 1.5 s, under Ask) */
.opening .hero .reveal { opacity: 1; transform: none; transition: none; }
/* nor the gold line's own wipe: it repaints the title's letters every frame on the main thread (the stuck "Ex|" he saw) */
.opening .hero .gold-text { animation: none; background-size: 100% 100%; }
@media (prefers-reduced-motion: reduce) {
  .opening .hero .pill, .opening .hero .pill::after { animation: none; }
  .opening .op-scan { display: none; }
}