/* Jurassic AI — support styles.
   The design itself lives in each element's inline style (verbatim from the design handoff)
   and in each page's own <style> block. Nothing here restyles the design: these rules only
   cover what the prototype runtime used to do in JavaScript. */

[hidden]{display:none!important}

/* Scroll reveal: start hidden as soon as the page paints (site.js then takes over). */
.jai-js [data-reveal=""]{opacity:0;transform:translateY(34px)}

/* Logos carry width/height attributes so the layout never jumps while they load. */
img[width][height]{width:auto;height:auto}

/* Nav: the prototype switched layouts in JavaScript at 1000px. */
@media (max-width:999px){.jai-desk{display:none!important}}
@media (min-width:1000px){.jai-mob,.jai-drawer{display:none!important}}
.jai-drawer:not(.open){display:none!important}

/* Keyboard access */
.jai-skip{position:absolute;left:-9999px;top:0;z-index:100;padding:12px 16px;background:#000;color:#5bf8fc;border:1px solid rgba(91,248,252,.55);border-radius:8px;font:700 12px/1 Manrope,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.jai-skip:focus{left:12px;top:12px}
a:focus-visible,button:focus-visible,[tabindex]:focus-visible{outline:2px solid #5bf8fc;outline-offset:3px}

/* Form plumbing */
.jai-hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}
.jai-busy{pointer-events:none}
.jai-spin{flex:none;width:14px;height:14px;border-radius:50%;border:2px solid rgba(91,248,252,.25);border-top-color:#5bf8fc;animation:jai-spin .7s linear infinite}
@keyframes jai-spin{to{transform:rotate(360deg)}}
.jai-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:90;width:max-content;max-width:min(520px,calc(100% - 32px));padding:14px 18px;border-radius:10px;background:#000;border:1px solid rgba(248,8,232,.6);box-shadow:0 0 32px rgba(248,8,232,.25);color:#f8f8f8;font:600 14px/1.45 Manrope,system-ui,sans-serif;text-align:center}

/* Image placeholder: the static equivalent of the design's <image-slot> element. */
.jai-slot{display:block;position:relative;width:100%;height:100%;aspect-ratio:3/2;font:13px/1.3 system-ui,-apple-system,sans-serif}
.jai-slot-frame{position:absolute;inset:0;overflow:hidden;background:rgba(127,127,127,.08)}
.jai-slot-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.jai-slot-empty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:12px;box-sizing:border-box;user-select:none}
.jai-slot-empty svg{opacity:.45}
.jai-slot-cap{max-width:90%;font-weight:500;letter-spacing:.01em;opacity:.75}
.jai-slot-ring{position:absolute;inset:0;pointer-events:none;border:1.5px dashed currentColor;opacity:.35}

/* Reduced motion: every animation jumps straight to its resting state. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.01ms!important;transition-delay:0s!important;scroll-behavior:auto!important}
}