/* @alc-notice */
/*!
 * Copyright (c) 2026 Alien Life Creations. All rights reserved.
 *
 * This file is part of a proprietary work. It is served to your browser
 * because a browser cannot run code it has not received; that is a technical
 * necessity and not a grant of any licence. You may not copy, redistribute,
 * or create derivative works from it.
 *
 * alienlifecreations.com | alienlifearcade.com | alienlifestudio.com
 */

/* THE UFO MENU -- GENERATED by _scripts/estate/ufo_menu.py.
   DO NOT EDIT THIS FILE. It is derived from alienlifeai.com's own
   chrome.py, which is where the design lives; edit there, or edit the
   six colour triples below in this site's build, and regenerate.
   theme: arcade -- green saucer, CYAN phosphor dome, neon-violet panel ring */
:root{
  --ufo-1-rgb:72,255,43;   --ufo-1b-rgb:168,255,151;
  --ufo-2-rgb:63,250,245;   --ufo-2b-rgb:155,253,250;
  --ufo-3-rgb:155,93,229;  --ufo-3b-rgb:201,168,245;
}

/* ---------- THE UFO MENU (mobile) ----------
   No script. A checkbox holds the state, the label is the saucer, and the panel
   is a sibling. The three tractor beams double as the hamburger bars: closed
   they read as three lines, open they widen into a cone with the menu below. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;
  border:0;clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;
  white-space:nowrap}
.ufo-check{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  clip:rect(0 0 0 0);clip-path:inset(50%);overflow:hidden;white-space:nowrap}
/* THE BUTTON IS A PLATE of dark reflective metal with a neon edge travelling
   around it, the way a lead card wears a coloured edge. The ring is a CONIC
   gradient on a SQUARE pseudo-element rotating about its own centre -- square,
   because rotating a 58x50 rounded rect visibly wobbles as the long axis swings
   through the short one. ::after then covers the middle and leaves a 1px rim.
   That is the whole trick, and it needs no script and no extra markup. */
.ufo{display:none;position:relative;width:49px;height:43px;cursor:pointer;
  margin:0;flex:none;border-radius:11px;overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  box-shadow:0 6px 18px -8px rgba(0,0,0,.95),0 0 22px -10px rgba(var(--ufo-1-rgb),.45)}
.ufo::before{content:"";position:absolute;left:50%;top:50%;width:170%;
  aspect-ratio:1;transform:translate(-50%,-50%);
  background:conic-gradient(from 0deg,
    rgba(var(--ufo-1-rgb),0) 0deg,rgb(var(--ufo-1-rgb)) 34deg,rgb(var(--ufo-1b-rgb)) 58deg,
    rgba(var(--ufo-1-rgb),0) 108deg,rgba(var(--ufo-2-rgb),0) 210deg,rgb(var(--ufo-2-rgb)) 262deg,
    rgb(var(--ufo-2b-rgb)) 288deg,rgba(var(--ufo-2-rgb),0) 340deg);
  animation:uforing 4.6s linear infinite}
/* Dark metal: a hard specular line near the top, a deep body, a second colder
   reflection low down. Reflective is two highlights and a dark middle, not one
   pale ramp. */
.ufo::after{content:"";position:absolute;inset:1px;border-radius:12px;
  border-radius:10px;
  background:linear-gradient(168deg,#39433D 0%,#232B27 26%,#121715 58%,
    #1C2320 82%,#0C100E 100%);
  box-shadow:inset 0 1px 0 rgba(198,214,204,.16),
    inset 0 -8px 14px -10px rgba(0,0,0,.9)}
@keyframes uforing{to{transform:translate(-50%,-50%) rotate(1turn)}}
/* the saucer rides on top of the plate */
.ufo span{position:absolute;left:50%;transform:translateX(-50%);z-index:2;
  transition:all .34s cubic-bezier(.22,1,.36,1)}
/* the glass dome */
.ufo .dome{top:5px;width:20px;height:9px;border-radius:20px 20px 3px 3px;
  background:linear-gradient(180deg,rgba(var(--ufo-2b-rgb),.72) 0%,rgba(var(--ufo-2-rgb),.22) 68%,
    rgba(var(--ufo-2-rgb),.08) 100%);
  border:1px solid rgba(var(--ufo-1b-rgb),.42);border-bottom:0;
  box-shadow:0 0 12px rgba(var(--ufo-2-rgb),.45),inset 0 2px 5px rgba(255,255,255,.28)}
/* THE HULL IS DARK METAL NOW, not the pale silver it was. Same two-highlight
   rule as the plate: a thin specular top edge, a deep body, a cold reflection
   under it. A bright hull on a dark plate read as a sticker. */
.ufo .hull{top:14px;width:39px;height:11px;border-radius:50%;
  background:linear-gradient(180deg,#96A69D 0%,#5A6961 22%,#2A322E 56%,
    #434F49 78%,#151A18 100%);
  box-shadow:0 0 16px rgba(var(--ufo-1-rgb),.34),inset 0 1px 0 rgba(226,236,230,.55),
    inset 0 -3px 5px rgba(0,0,0,.6)}
.ufo .hull::after{content:"";position:absolute;left:50%;top:6px;
  transform:translateX(-50%);width:3px;height:3px;border-radius:50%;
  background:rgb(var(--ufo-1-rgb));
  box-shadow:0 0 5px 1px rgb(var(--ufo-1-rgb)),-10px 0 0 0 rgb(var(--ufo-2-rgb)),-10px 0 4px 1px rgb(var(--ufo-2-rgb)),
    10px 0 0 0 rgb(var(--ufo-2-rgb)),10px 0 4px 1px rgb(var(--ufo-2-rgb))}
/* the three beams: the hamburger, hiding in plain sight */
/* DARK REFLECTIVE STEEL, with a thin green ooze running along it. Two
   background layers on one element: the metal ramp is the lower layer and does
   not move; the ooze is the upper layer, a narrow gradient wider than the bar,
   slid across by animating background-position. 2px tall -- as skinny as a
   thing you have to hit with a thumb can honestly be -- and the three are
   staggered so the ooze runs DOWN the saucer instead of pulsing at it. */
.ufo .beam{height:2px;border-radius:2px;transform-origin:50% 50%;
  background-image:
    linear-gradient(90deg,rgba(var(--ufo-1b-rgb),0) 0%,rgba(var(--ufo-1b-rgb),.9) 8%,
      rgba(var(--ufo-1-rgb),.5) 18%,rgba(var(--ufo-1-rgb),.12) 30%,rgba(var(--ufo-1-rgb),0) 44%),
    linear-gradient(180deg,#c3cec6 0%,#7d8a82 22%,#39423c 50%,
      #6b776f 76%,#232a25 100%);
  background-size:300% 100%,100% 100%;
  background-repeat:no-repeat;
  animation:ooze 3.6s linear infinite;
  box-shadow:0 1px 0 rgba(0,0,0,.7),0 0 5px rgba(var(--ufo-1-rgb),.22)}
.ufo .b1{top:28px;width:24px}
.ufo .b2{top:33px;width:18px;animation-delay:.42s}
.ufo .b3{top:38px;width:11px;animation-delay:.84s}
@keyframes ooze{
  from{background-position:-210% 0,0 0}
  to{background-position:190% 0,0 0}}

/* OPEN: the saucer lifts, the beams widen into a cone, the menu comes down it */
.ufo-check:checked + .ufo .dome{transform:translateX(-50%) translateY(-3px)}
.ufo-check:checked + .ufo .hull{transform:translateX(-50%) translateY(-3px);
  box-shadow:0 0 26px rgba(var(--ufo-1-rgb),.75),inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -3px 5px rgba(0,0,0,.45)}
.ufo-check:checked + .ufo .b1{top:26px;width:10px;opacity:1}
.ufo-check:checked + .ufo .b2{top:32px;width:22px;opacity:.75}
.ufo-check:checked + .ufo .b3{top:38px;width:36px;opacity:.5}
/* Open, the ring speeds up and warms: the plate is doing something. */
.ufo-check:checked + .ufo::before{animation-duration:2.2s}
.ufo-check:checked + .ufo{box-shadow:0 6px 18px -8px rgba(0,0,0,.95),
  0 0 30px -8px rgba(var(--ufo-1-rgb),.7)}
.ufo-check:focus-visible + .ufo{outline:2px solid rgb(var(--ufo-2-rgb));outline-offset:6px;
  border-radius:10px}

@media (max-width:700px){
  /* PINNED TO THE CORNER, AND THE SAME CORNER ON EVERY SITE THAT DERIVES THIS.
     Gortiva, 2026-09-21: the saucer must sit in the top right in the same exact
     spot everywhere. It did not. Measured live at 375px, the three sites that
     carry this block had it at top 2.8/11.0/22.0 and 16.0/22.0/71.1 from the
     right edge -- 19px of vertical spread and 55px of horizontal, with the
     arcade's 71px inside the edge and not in a corner at all.

     THE SHARED CSS WAS NOT THE PROBLEM AND COULD NOT HAVE BEEN. The saucer is
     49x43 on all three, so ufo_menu.py's derivation was exact; `.ufo` was
     `position:relative` and each site's own header decided where that landed.
     A diff of the three stylesheets would have found nothing. Only measuring
     the rendered box on each site could.

     `fixed` makes it identical by construction rather than by three headers
     agreeing, and no header can move it again. The values are this site's own,
     since this block is the source. `max(..., env(...))` keeps it clear of a
     notch. z-index 30 sits above the header's own children and inside
     .site-head's z-20 context, so it stays under the z-60 gloss modal.

     Verified before it was written, by injecting it into all three LIVE pages:
     top 11.0 and 22.0 from the right on every one, and the panel still opens. */
  .ufo{display:block;position:fixed;
    top:max(11px,env(safe-area-inset-top));
    right:max(22px,env(safe-area-inset-right));
    z-index:30}
  /* THE PANEL IS THE SAME OBJECT, LARGER: dark metal, and a neon edge going
     round it. Different colours on purpose -- cyan and violet where the saucer
     runs green and cyan -- so the two read as one family without reading as one
     thing. No border here: the rim is ::before showing past ::after, the same
     trick the plate uses, which keeps the two in step. */
  .head-nav.head-nav{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:0;
    margin-top:0;flex-basis:100%;order:3;
    max-height:0;opacity:0;overflow:hidden;
    transition:max-height .38s cubic-bezier(.22,1,.36,1),opacity .28s ease,
      margin-top .38s cubic-bezier(.22,1,.36,1);
    border-radius:16px;background:transparent;border:0;width:100%}
  .head-nav.head-nav::before{content:"";position:absolute;left:50%;top:50%;width:150%;
    aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none;
    background:conic-gradient(from 0deg,
      rgba(var(--ufo-2-rgb),0) 0deg,rgb(var(--ufo-2-rgb)) 30deg,rgb(var(--ufo-2b-rgb)) 52deg,
      rgba(var(--ufo-2-rgb),0) 104deg,rgba(var(--ufo-3-rgb),0) 206deg,rgb(var(--ufo-3-rgb)) 256deg,
      rgb(var(--ufo-3b-rgb)) 282deg,rgba(var(--ufo-3-rgb),0) 336deg);
    animation:uforing 7s linear infinite;opacity:0;
    transition:opacity .3s ease}
  .head-nav.head-nav::after{content:"";position:absolute;inset:1px;border-radius:15px;
    pointer-events:none;
    background:linear-gradient(168deg,rgba(32,40,36,.93) 0%,rgba(18,23,21,.95) 44%,
      rgba(10,14,12,.96) 100%);
    box-shadow:inset 0 1px 0 rgba(198,214,204,.12)}
  .head-nav.head-nav a{position:relative;z-index:1}
  /* Each item is its own capsule rather than a cell in a ruled grid. The grid
     rules were inheriting the desktop pill radius and drawing half-capsules,
     which looked deliberate by accident; this makes it deliberate on purpose. */
  /* THE GROUP FLATTENS ON A PHONE. The UFO panel is a full menu, not a row that
     needs narrowing, and :hover means nothing on touch -- a dropdown here would
     bury three pages behind a gesture that does not exist. display:contents
     dissolves the wrapper so its links become ordinary grid items, and the
     trigger, whose only job was to open a panel that is no longer a panel, goes. */
  .ngrp,.npop{display:contents}
  /* AND THE PANEL MUST BE VISIBLE AGAIN. `display:contents` dissolves the box but
     does NOT reset visibility, so the first version inherited the desktop rule's
     `visibility:hidden` down to the three links and the phone menu simply lost
     them: eight items where eleven belong, no error, nothing behind a gesture --
     they were just gone. Measured on a 375px panel, which is the only way that
     shows, because the desktop row looked perfect throughout. */
  .npop{visibility:visible;opacity:1;position:static;transform:none}
  .ntrig{display:none}
  .head-nav.head-nav a{margin:5px;padding:13px 10px;font-size:13.5px;text-align:center;
    border:1px solid rgba(var(--ufo-2b-rgb),.13);border-radius:12px;
    background:rgba(var(--ufo-2b-rgb),.022)}
  .head-nav.head-nav a:active{background:rgba(var(--ufo-2-rgb),.1);
    border-color:rgba(var(--ufo-2b-rgb),.4)}
  /* Stretch the last pill across both columns ONLY when the count is odd
     and it would otherwise sit alone. Written for nine pills; at ten it was
     singling out a page for no reason, which is what the whole-width row
     looked like. :nth-child(odd):last-child is exactly 'alone on its row'. */
  .head-nav.head-nav a:nth-child(odd):last-child{grid-column:1 / -1}
  .head-nav.head-nav a:last-child{border-bottom:0}
  .ufo-check:checked ~ .head-nav.head-nav{max-height:70vh;opacity:1;margin-top:12px;
    box-shadow:0 18px 46px -18px rgba(0,0,0,.95),0 0 34px -12px rgba(var(--ufo-2-rgb),.34)}
  .ufo-check:checked ~ .head-nav.head-nav::before{opacity:.85}
}
@media (prefers-reduced-motion:reduce){
  .ufo span,.head-nav.head-nav{transition:none}
  .ufo .beam{animation:none;background-position:-210% 0,0 0}
  .ufo::before,.head-nav.head-nav::before{animation:none}
}