/* Command intro (from ~/Claude/command-intro): welcome, decrypting lock, doors.
   Every selector is scoped to #commandIntro so nothing leaks into the site.
   It intentionally ignores prefers-reduced-motion (iOS Reduce Motion), like the navbar and bars. */
#commandIntro{
    /* Command's own tokens (command-theme.css), so the intro matches the site. */
    --bg:#000; --line:#727578; --dim:#727578; --faint:#727578; --green-dark:#17331e;
    --accent:#5acc77; --text:#ededed;
    --font: var(--command-font-family, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif);
    --mono: var(--font);
    color:var(--text);font-family:var(--font);touch-action:none;overscroll-behavior:contain;-webkit-user-select:none;user-select:none;
  }
  /* ================================ INTRO ================================ */
  #commandIntro{position:fixed;inset:0;z-index:9999;overflow:hidden;}
  #commandIntro.done{display:none;}
  #commandIntro.skipping{opacity:0;pointer-events:none;transition:opacity .55s ease;}

  /* doors */
  #commandIntro .door{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:var(--bg);
        transition:transform 1.6s cubic-bezier(.65,0,.25,1);}
  /* No door edge lines, so the Planet logo reads as one piece until the doors part. */
  #commandIntro .door{box-sizing:border-box;}
  #commandIntro .door.left{left:0;border-right:1px solid transparent;}
  #commandIntro .door.right{right:0;border-left:1px solid transparent;}
  /* The green seam draws the door edges: grey borders appear under it and travel with the doors. */
  #commandIntro.seam-on .door.left{border-right-color:var(--line);}
  #commandIntro.seam-on .door.right{border-left-color:var(--line);}
  /* Depth: behind the doors the site starts in shadow (darker at the edges) and
     brightens as they part, so it reads as a room behind the doors. */
  #commandIntro .depth{position:absolute;inset:0;pointer-events:none;
        background:radial-gradient(ellipse 75% 65% at 50% 50%, rgb(0 0 0 / .42), rgb(0 0 0 / .8));}
  #commandIntro.open .depth{opacity:0;transition:opacity 2.3s cubic-bezier(.4,0,.2,1) .3s;}
  #commandIntro.open{pointer-events:none;}
  #commandIntro.open .door.left{transform:translateX(-101%);}
  #commandIntro.open .door.right{transform:translateX(101%);}

  /* door panelling */
  #commandIntro .door .panel{position:absolute;inset:0;pointer-events:none;}
  #commandIntro .door .panel::before, #commandIntro .door .panel::after{content:"";position:absolute;left:0;right:0;height:1px;background:var(--faint);}
  #commandIntro .door .panel::before{top:18%;} #commandIntro .door .panel::after{bottom:18%;}

  /* seam light */
  #commandIntro .seam{position:absolute;left:50%;top:50%;width:2px;height:0;transform:translate(-50%,-50%);
        background:var(--accent);box-shadow:0 0 14px var(--accent);opacity:0;z-index:3;
        transition:height .4s ease-out, opacity .25s;}
  #commandIntro.seam-on .seam{height:100%;opacity:.85;}
  #commandIntro.open .seam{opacity:0;transition:opacity .2s;}

  /* lock: one copy per door, each clipped by its door so it splits on the seam */
  #commandIntro .lockwrap{--s:min(300px,72vw);position:absolute;top:50%;width:var(--s);margin-top:calc(var(--s) / -2 - 14px);
        opacity:0;transform:scale(.94);transition:opacity .6s, transform .7s cubic-bezier(.2,.8,.2,1);}
  /* Each half sits 1px towards the seam so the lock lines continue across the 2px door gap. */
  #commandIntro .door.left  .lockwrap{right:calc(var(--s) / -2 - 1px);}
  #commandIntro .door.right .lockwrap{left:calc(var(--s) / -2 - 1px);}
  #commandIntro.lock-in .lockwrap{opacity:1;transform:scale(1);}
  #commandIntro .lockwrap svg{display:block;width:100%;height:auto;overflow:visible;}
  #commandIntro .lockwrap .planet{position:absolute;left:50%;top:calc(var(--s) / 2);width:calc(var(--s) * .5);height:calc(var(--s) * .5);
        transform:translate(-50%,-50%);}
  #commandIntro .lockwrap .intro-status{margin-top:14px;text-align:center;font:10px/1 var(--mono);letter-spacing:.4em;padding-left:.4em;color:var(--line);transition:color .4s;}
  #commandIntro.unlocked .lockwrap .intro-status{color:var(--accent);}
  /* ACCESS | GRANTED: equal columns around the seam with a clear gap; the padding offsets
     the trailing letter-spacing so the visual gap is centred on the seam. */
  #commandIntro .lockwrap .intro-status.split{display:grid;grid-template-columns:1fr 1fr;column-gap:1.6em;}
  #commandIntro .lockwrap .intro-status.split > span:first-child{text-align:right;}
  #commandIntro .lockwrap .intro-status.split > span:last-child{text-align:left;}

  #commandIntro .lock *{vector-effect:non-scaling-stroke;}
  #commandIntro .lock .rot{transform-box:view-box;transform-origin:150px 150px;}
  #commandIntro .lock .slow{animation:command-intro-spin 40s linear infinite;}
  #commandIntro .lock .slowr{animation:command-intro-spin 28s linear infinite reverse;}
  @keyframes command-intro-spin{to{transform:rotate(360deg);}}

  #commandIntro .lock .s{fill:none;stroke:var(--line);stroke-width:1.1;transition:stroke .5s;}
  #commandIntro .lock .d{fill:none;stroke:var(--dim);stroke-width:1;}
  #commandIntro .lock .f{fill:none;stroke:var(--faint);stroke-width:1;}
  #commandIntro .lock .plate{fill:none;stroke:var(--line);stroke-width:3.2;stroke-linecap:butt;transition:stroke .5s;}
  #commandIntro.unlocked .lock .s, #commandIntro.unlocked .lock .plate{stroke:var(--accent);}
  /* Unlocked, the whole lock is green: fine rings and ticks go dark green. */
  #commandIntro .lock .d, #commandIntro .lock .f{transition:stroke .5s;}
  #commandIntro.unlocked .lock .d, #commandIntro.unlocked .lock .f{stroke:var(--green-dark);}

  /* armour plates rotate into alignment with the seam */
  #commandIntro .lock .plates{transform:rotate(58deg);transition:transform 2.2s cubic-bezier(.45,0,.2,1);}
  #commandIntro.align .lock .plates{transform:rotate(0deg);}

  /* progress ring */
  #commandIntro .lock .prog{fill:none;stroke:var(--line);stroke-width:2;transition:stroke .5s;}
  #commandIntro.unlocked .lock .prog{stroke:var(--accent);}

  #commandIntro .lock .burst{fill:none;stroke:var(--accent);stroke-width:1.2;opacity:0;transform-box:view-box;transform-origin:150px 150px;}
  #commandIntro.unlocked .lock .burst{animation:command-intro-burst 1.2s cubic-bezier(.2,.7,.3,1) forwards;}
  @keyframes command-intro-burst{0%{opacity:.9;transform:scale(1);}100%{opacity:0;transform:scale(1.9);}}

  /* welcome */
  #commandIntro .welcome{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;
        transition:opacity .5s;pointer-events:none;padding:0 16px;}
  #commandIntro.welcome-out .welcome{opacity:0;}
  #commandIntro .welcome .big{position:relative;font-size:clamp(14px,2.6vw,20px);font-weight:500;letter-spacing:.18em;padding-left:.18em;
        color:var(--text);min-height:3em;line-height:1.5;text-align:center;}
  #commandIntro.gated .welcome .caret{display:none;}
  #commandIntro .welcome .big #introBig{white-space:pre-line;}
  #commandIntro .welcome .caret{display:inline-block;vertical-align:-.1em;margin-left:.15em;width:.5em;height:1em;background:var(--line);
        animation:command-intro-blink 1s steps(1) infinite;}
  @keyframes command-intro-blink{50%{opacity:0;}}

  /* enter gate (browsers only allow sound after a tap/click) */
  #commandIntro .gate{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;transition:opacity .4s;}
  #commandIntro .gate[hidden]{display:none;}
  /* Enter buttons: black, green border and text; brighter green border and text on desktop hover. */
  #commandIntro .gate button{box-sizing:border-box;height:40px;padding:0 20px;border:1px solid var(--accent);border-radius:9999px;
        background-color:#000;color:var(--accent);font:inherit;font-size:var(--font-md, .8rem);
        -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;cursor:pointer;transition:border-color .2s, color .2s;}
  @media (hover:hover){ #commandIntro .gate button:hover{border-color:var(--command-action-hover, #76df91);color:var(--command-action-hover, #76df91);} }
  #commandIntro .gate.out{opacity:0;pointer-events:none;}
  /* In a wallet's browser: Enter with <wallet> (green, wallet icon) stacked above a grey
     "Enter without wallet"; 10px apart, all the width of the widest. */
  #commandIntro .gate-buttons{display:inline-flex;flex-direction:column;align-items:stretch;gap:10px;}
  #commandIntro .gate-buttons button{display:flex;align-items:center;justify-content:center;gap:8px;}
  #commandIntro .gate-buttons button i{font-size:16px;line-height:1;}
  #commandIntro .gate .gate-plain{border-color:var(--line);color:var(--line);}
  @media (hover:hover){ #commandIntro .gate .gate-plain:hover{border-color:#fff;color:#fff;} }
  /* While signing, the other wallet is dimmed; Enter without wallet stays available. */
  #commandIntro .gate.busy .gate-wallet{pointer-events:none;}
  #commandIntro .gate.busy .gate-wallet:not(.signing){opacity:.35;transition:opacity .3s;}

  /* Skip the fun: quiet grey text with a chevron, no border. The button sits flush right; its own
     right padding (20px desktop, 10px mobile) lines the chevron up with the site's inset. White on hover. */
  #commandIntro .skip-fun{position:absolute;right:0;bottom:20px;z-index:7;box-sizing:border-box;display:flex;align-items:center;gap:5px;
        height:32px;padding:0 20px;border:0;border-radius:0;background:transparent;color:var(--line);
        font:inherit;font-size:var(--font-sm, .7rem);white-space:nowrap;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .3s, color .2s;}
  #commandIntro .skip-fun-chevron{display:block;flex:0 0 auto;width:12px;height:12px;}
  @media (hover:hover){ #commandIntro .skip-fun:hover{color:#fff;} }
  #commandIntro.open .skip-fun{opacity:0;}

  /* Audio notice: bottom left, small and grey, at the header logo's inset. */
  #commandIntro .audio-note{position:absolute;left:20px;bottom:20px;z-index:5;max-width:320px;color:var(--line);
        font-size:var(--font-sm, .7rem);line-height:1.35;pointer-events:none;transition:opacity .4s;}
  #commandIntro .audio-note-title{display:flex;align-items:center;gap:6px;margin-bottom:3px;font-weight:500;text-transform:uppercase;letter-spacing:.06em;}
  #commandIntro .audio-note-title svg{width:14px;height:14px;flex:0 0 14px;}
  #commandIntro.open .audio-note{opacity:0;}
  @media (max-width:800px){
    #commandIntro .skip-fun{right:0;bottom:10px;padding:0 10px;}
    #commandIntro .audio-note{left:10px;bottom:10px;max-width:calc(100% - 130px);}
  }