/* What a visitor sees before the lab does: the dark of the room with one lit
   window the shape of the card (both pages), then, on the AR page, a frame to
   hold the card in while it is being looked for. In place of A-Frame's and
   MindAR's stock screens. If the camera or the tracker will not start
   (start.js), the veil stays and offers a second try and the lab without the camera. */

@font-face { font-family: "Special Elite"; src: url("SpecialElite.ttf") format("truetype"); font-display: swap; }

#veil { position: fixed; inset: 0; z-index: 50; display: flex; flex-direction: column; align-items: center; justify-content: center;
        gap: 26px; padding: 24px; box-sizing: border-box; text-align: center;
        background: radial-gradient(ellipse at 50% 42%, #2a1c12 0%, #160f0a 62%, #0d0906 100%);
        color: #f3e7cf; font: 17px/1.45 "Special Elite", "Courier New", monospace;
        opacity: 0; visibility: hidden; transition: opacity .7s ease, visibility 0s .7s; }
body.loading #veil, body.trouble #veil { opacity: 1; visibility: visible; transition-delay: 0s; }

/* the window: the card's rounded square, lamp light behind it, breathing */
#veil .pane { width: 132px; height: 132px; border-radius: 24px; border: 1px solid rgba(217, 180, 106, .55);
              background: radial-gradient(circle at 50% 62%, rgba(255, 196, 120, .5), rgba(138, 106, 72, .16) 58%, rgba(22, 15, 10, 0) 100%);
              box-shadow: 0 0 46px rgba(255, 190, 110, .22), inset 0 0 22px rgba(0, 0, 0, .55);
              animation: lamp 2.8s ease-in-out infinite; }
@keyframes lamp { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
body.trouble #veil .pane { animation: none; opacity: .35; }

#veil p { margin: 0; max-width: 300px; min-height: 2.9em; }
#veil .ways { display: none; flex-direction: column; gap: 12px; width: min(300px, 100%); }
body.trouble #veil .ways { display: flex; }
#veil .ways > * { display: flex; align-items: center; justify-content: center; min-height: 50px; padding: 0 18px; box-sizing: border-box;
                  border-radius: 25px; border: 1px solid rgba(217, 180, 106, .45); background: rgba(217, 180, 106, .1);
                  color: #f3e7cf; font: 600 15px/1.2 -apple-system, system-ui, sans-serif; text-decoration: none; cursor: pointer;
                  -webkit-tap-highlight-color: transparent; }
#veil .ways > .main { background: #d9b46a; border-color: #d9b46a; color: #1c130c; }
#veil .ways > *:active { opacity: .75; }
#veil .ways > *:focus-visible { outline: 2px solid #f3e7cf; outline-offset: 2px; }

/* the frame to hold the card in, while the camera is up and the card is not found */
#frame { position: fixed; left: 50%; top: 44%; z-index: 9; width: min(62vw, 280px); aspect-ratio: 1; border-radius: 17%;
         transform: translate(-50%, -50%); pointer-events: none;
         border: 2px solid rgba(243, 231, 207, .9); box-shadow: 0 0 0 1px rgba(22, 15, 10, .35), 0 0 26px rgba(255, 196, 120, .3);
         opacity: 0; transition: opacity .5s ease; animation: hold 2.4s ease-in-out infinite; }
@keyframes hold { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.035); } }
body.looking:not(.loading):not(.trouble):not(.note-up) #frame { opacity: 1; }

/* after a while of looking: the lab without the camera */
#without { display: none; width: fit-content; margin: 8px auto 0; padding: 9px 16px; border-radius: 18px; pointer-events: auto;
           color: #f3e7cf; font-size: 14px; text-decoration: none; text-shadow: none;
           background: rgba(22, 15, 10, .68); border: 1px solid rgba(217, 180, 106, .4); -webkit-tap-highlight-color: transparent; }
body.long-look #without { display: block; }

@media (prefers-reduced-motion: reduce) { #veil .pane, #frame { animation: none; } #veil .pane { opacity: .9; } }

/* when it cannot start, the ways to reach Elwin still show, over the veil */
body.trouble #links { z-index: 60; }