/* Ten Arms landing page. One screen: the game's own frame behind, and pinned to the bottom left the title, the clock to
   the opening and the five fighters. Same palette and type as the game (index.html). Its one script, countdown.js, runs
   the clock; without it the page still says when. */
:root{
  color-scheme:dark;
  --ink:#0b0a12;
  --paper:#f3ecdf;
  --dim:rgba(243,236,223,.78);
  --line:rgba(243,236,223,.22);
  --plate:rgba(11,10,18,.62);
  --w:#b46bff;
  --gold:#ffc24a;
  --display:'Chakra Petch','Avenir Next Condensed','Arial Narrow',sans-serif;
  --body:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --pad:clamp(20px,4.4vw,72px);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}

/* ---------- backdrop: fixed, so a short screen scrolls the text over it; it breathes very slowly ---------- */
.bg,.scrim,.embers{position:fixed;inset:0}
.bg{z-index:-3;overflow:hidden}
/* the wide cut has the god of the square right of the middle, his horns near the top edge, and the ronin beside him:
   a screen wider than the picture loses more of its bottom than of its top, and the slow zoom grows from his chest */
.bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:74% 26%;transform-origin:70% 30%;animation:breathe 36s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(1.01)}to{transform:scale(1.075)}}
/* washes of ink: out of the bottom left corner for the text, a thin one along the bottom, in from the left for the
   title, down from the top for the bar, and a breath of the katana's violet low on the left, behind the clock. The
   right is left clear: the god and the ronin stand there */
.scrim{z-index:-2;background:
  radial-gradient(60% 55% at 12% 88%,rgba(120,60,200,.2) 0,rgba(120,60,200,0) 70%),
  radial-gradient(78% 84% at 0 100%,rgba(11,10,18,.94) 0,rgba(11,10,18,.82) 46%,rgba(11,10,18,0) 100%),
  linear-gradient(to top,rgba(11,10,18,.9) 0,rgba(11,10,18,.4) 15%,rgba(11,10,18,0) 36%),
  linear-gradient(to right,rgba(11,10,18,.72) 0,rgba(11,10,18,.3) 40%,rgba(11,10,18,0) 62%),
  linear-gradient(to bottom,rgba(11,10,18,.55) 0,rgba(11,10,18,0) 18%)}

/* sparks: each rises from below the screen, drifting, on its own clock */
.embers{z-index:-1;overflow:hidden;pointer-events:none}
.embers i{--x:50%;--t:14s;--s:4px;--c:var(--gold);--sway:30px;position:absolute;left:var(--x);bottom:-12px;width:var(--s);height:var(--s);border-radius:50%;
  background:var(--c);box-shadow:0 0 8px 1px var(--c);opacity:0;animation:rise var(--t) linear infinite;animation-delay:var(--d,0s)}
@keyframes rise{
  0%{transform:translate3d(0,0,0) scale(1);opacity:0}
  8%{opacity:.9}
  60%{opacity:.55}
  100%{transform:translate3d(var(--sway),-78vh,0) scale(.3);opacity:0}}
.embers i:nth-child(1){--x:6%;--t:15s;--d:-2s;--sway:46px}
.embers i:nth-child(2){--x:13%;--t:19s;--d:-11s;--s:3px;--c:var(--w);--sway:-24px}
.embers i:nth-child(3){--x:21%;--t:13s;--d:-6s;--s:5px;--sway:60px}
.embers i:nth-child(4){--x:29%;--t:22s;--d:-17s;--s:3px;--sway:-40px}
.embers i:nth-child(5){--x:36%;--t:16s;--d:-9s;--c:var(--w);--sway:22px}
.embers i:nth-child(6){--x:44%;--t:20s;--d:-3s;--s:3px;--sway:-52px}
.embers i:nth-child(7){--x:52%;--t:14s;--d:-12s;--s:5px;--sway:36px}
.embers i:nth-child(8){--x:60%;--t:23s;--d:-20s;--s:3px;--c:var(--w);--sway:-30px}
.embers i:nth-child(9){--x:67%;--t:17s;--d:-5s;--sway:54px}
.embers i:nth-child(10){--x:74%;--t:21s;--d:-14s;--s:3px;--sway:-44px}
.embers i:nth-child(11){--x:81%;--t:15s;--d:-8s;--c:var(--w);--sway:28px}
.embers i:nth-child(12){--x:88%;--t:19s;--d:-1s;--s:5px;--sway:-36px}
.embers i:nth-child(13){--x:94%;--t:24s;--d:-16s;--s:3px;--sway:20px}
.embers i:nth-child(14){--x:48%;--t:26s;--d:-22s;--s:3px;--sway:-64px}

.wrap{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:space-between;gap:28px;
  padding:max(18px,env(safe-area-inset-top,0px)) max(var(--pad),env(safe-area-inset-right,0px)) max(clamp(20px,3.4vw,46px),env(safe-area-inset-bottom,0px)) max(var(--pad),env(safe-area-inset-left,0px))}

/* ---------- top bar ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--display);font-weight:600;font-size:12px;letter-spacing:.2em;text-transform:uppercase}
.mark{display:inline-flex;align-items:center;gap:10px}
.mark svg{border-radius:6px;box-shadow:0 0 0 1px var(--line)}
.soon{display:inline-flex;align-items:center;gap:9px;padding:8px 14px 8px 12px;background:var(--plate);border:1px solid var(--line);transform:skewX(-14deg);white-space:nowrap}
.soon i{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px var(--gold);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35;transform:scale(.7)}}

/* ---------- title block: each part comes up in turn as the page opens ---------- */
.hero{max-width:min(66rem,62vw)}
.hero>*{animation:arrive .8s cubic-bezier(.2,.7,.2,1) both}
.hero>:nth-child(2){animation-delay:.08s}
.hero>:nth-child(3){animation-delay:.18s}
.hero>:nth-child(4){animation-delay:.3s}
.hero>:nth-child(5){animation-delay:.42s}
.hero>:nth-child(6){animation-delay:.52s}
@keyframes arrive{from{opacity:0;transform:translateY(18px)}}
.eyebrow{margin:0 0 .9em;font-family:var(--display);font-weight:600;font-size:clamp(11px,.95vw,14px);letter-spacing:.24em;text-transform:uppercase;color:var(--dim);text-shadow:0 1px 10px rgba(11,10,18,.85)}
h1{margin:0 0 0 -.04em;font:italic 700 clamp(3.4rem,min(9.6vw,21vh),10rem)/.86 var(--display);text-transform:uppercase;white-space:nowrap;text-shadow:0 2px 24px rgba(11,10,18,.55)}
/* "Arms" is lit in the katana's violet, and a glint runs along it now and then, as along a blade turned in the light */
h1 span{display:inline-block;padding-right:.1em;color:var(--w);text-shadow:none;filter:drop-shadow(0 0 .1em rgba(180,107,255,.8)) drop-shadow(0 0 .32em rgba(180,107,255,.4));
  background:linear-gradient(105deg,var(--w) 0,var(--w) 44%,#f6eaff 50%,var(--w) 56%,var(--w) 100%) 100% 0/300% 100% no-repeat;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:arrive .8s cubic-bezier(.2,.7,.2,1) both,glint 7s ease-in-out 1.4s infinite}
@keyframes glint{0%,60%{background-position:100% 0}90%,100%{background-position:0 0}}
.lede{margin:clamp(12px,1.5vw,22px) 0 0;max-width:40em;font-size:clamp(14.5px,1.12vw,18px);line-height:1.6;color:var(--dim);text-shadow:0 1px 3px rgba(11,10,18,.9),0 1px 14px rgba(11,10,18,.85)}      /* on a squarer screen its last words lie over the braziers */

/* ---------- the gate: when it opens, as a running clock ---------- */
.gate{margin:clamp(18px,2.2vw,32px) 0 0}
.gate-label{display:flex;align-items:center;gap:13px;margin:0 0 clamp(9px,.9vw,13px);font-family:var(--display);font-weight:600;font-size:clamp(11px,.95vw,14px);letter-spacing:.26em;text-transform:uppercase}
/* ten blades, one per weapon in its own colour; a light runs along the row */
.blades{display:inline-flex;gap:3px;padding-left:3px;transform:skewX(-14deg)}
.blades i{--c:var(--paper);width:4px;height:15px;background:var(--c);opacity:.5;animation:blade 2.4s linear infinite}
.blades i:nth-child(1){--c:#b14cff}
.blades i:nth-child(2){--c:#35d6ff;animation-delay:.12s}
.blades i:nth-child(3){--c:#ff3b30;animation-delay:.24s}
.blades i:nth-child(4){--c:#ffa726;animation-delay:.36s}
.blades i:nth-child(5){--c:#ffd23f;animation-delay:.48s}
.blades i:nth-child(6){--c:#54ff62;animation-delay:.6s}
.blades i:nth-child(7){--c:#4f7bff;animation-delay:.72s}
.blades i:nth-child(8){--c:#ff2f52;animation-delay:.84s}
.blades i:nth-child(9){--c:#a6ff3d;animation-delay:.96s}
.blades i:nth-child(10){--c:#e8f6ff;animation-delay:1.08s}
@keyframes blade{0%,22%,100%{opacity:.45;box-shadow:none;transform:scaleY(.72)}8%{opacity:1;box-shadow:0 0 10px var(--c);transform:scaleY(1.12)}}

/* a plate of two digits for each unit; --fs is the digit size, which the colons between share */
.clock{--fs:clamp(3rem,6.2vw,6.9rem);display:flex;align-items:flex-start;gap:clamp(7px,.8vw,13px);padding-left:.5vw;font-family:var(--display)}
.unit{display:flex;flex-direction:column;align-items:center;gap:clamp(6px,.6vw,9px)}
.digits{position:relative;display:flex;padding:.1em .17em .06em;font-weight:700;font-size:var(--fs);line-height:1;transform:skewX(-10deg);
  background:linear-gradient(180deg,rgba(40,33,62,.86) 0,rgba(17,15,28,.9) 50%,rgba(11,10,18,.9) 50%,rgba(22,19,36,.9) 100%);
  border:1px solid rgba(243,236,223,.26);box-shadow:0 14px 34px -14px rgba(0,0,0,.9),0 0 34px -12px rgba(180,107,255,.55),inset 0 1px 0 rgba(243,236,223,.16)}
/* the seam of a split-flap board, across the middle of each plate */
.digits::after{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:rgba(0,0,0,.6);box-shadow:0 1px 0 rgba(243,236,223,.07)}
.d{display:inline-block;width:.66em;text-align:center;text-shadow:0 0 .3em rgba(180,107,255,.5)}      /* fixed width: a 1 is as wide as an 8, so nothing jumps */
.d.tick{animation:tick .34s cubic-bezier(.2,.8,.2,1)}
@keyframes tick{from{transform:translateY(-.2em);opacity:.2}}
.unit:last-child .d{color:var(--w);text-shadow:0 0 .3em rgba(180,107,255,.75)}
.unit small{font-weight:600;font-size:clamp(9px,.76vw,11.5px);letter-spacing:.24em;text-transform:uppercase;color:var(--dim)}
.sep{display:flex;flex-direction:column;justify-content:center;gap:.2em;height:1.16em;font-size:var(--fs);transform:skewX(-10deg);animation:colon 1s steps(1) infinite}
.sep::before,.sep::after{content:"";width:.09em;height:.09em;background:var(--w);box-shadow:0 0 8px var(--w)}
@keyframes colon{50%{opacity:.25}}
.gate-when{margin:clamp(10px,1vw,14px) 0 0;font-family:var(--display);font-weight:500;font-size:clamp(10.5px,.86vw,13px);letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.gate-when b{font-weight:600;color:var(--paper)}
/* without the script: the moment itself, set as large as the clock would be */
.clock-static{margin:0;font-weight:700;font-size:clamp(1.7rem,3.3vw,3.4rem);line-height:1.05;text-transform:uppercase;font-style:italic}
.clock-static small{font-size:.5em;font-weight:600;letter-spacing:.12em;color:var(--dim)}
/* the last minute */
.hot .d,.hot .unit:last-child .d{color:var(--gold);text-shadow:0 0 .32em rgba(255,194,74,.8)}
.hot .digits{border-color:rgba(255,194,74,.6);box-shadow:0 14px 34px -14px rgba(0,0,0,.9),0 0 38px -8px rgba(255,194,74,.6),inset 0 1px 0 rgba(243,236,223,.16)}
.hot .sep::before,.hot .sep::after{background:var(--gold);box-shadow:0 0 8px var(--gold)}
/* the moment has come: the game is taking this address */
.open .clock{flex-direction:column;gap:10px;padding-left:0}
.opened{margin:0;font:italic 700 clamp(2.2rem,5vw,5rem)/.95 var(--display);text-transform:uppercase;color:var(--gold);filter:drop-shadow(0 0 .2em rgba(255,194,74,.55));animation:pulse 1.6s ease-in-out infinite}
.opening{margin:0;max-width:34em;font-family:var(--body);font-size:clamp(13.5px,1.05vw,16.5px);line-height:1.55;color:var(--dim)}
.open .blades i{animation-duration:.9s}

/* ---------- the five fighters, each with the colours of its two weapons ---------- */
.classes{list-style:none;display:flex;flex-wrap:wrap;gap:8px 9px;width:max-content;max-width:calc(100vw - 2*var(--pad));margin:clamp(18px,2.1vw,30px) 0 0;padding:0 0 0 3px}
.classes li{--a:var(--paper);--b:var(--paper);position:relative;display:flex;flex-direction:column;gap:5px;padding:9px 16px 9px 25px;background:var(--plate);border:1px solid var(--line);transform:skewX(-14deg);
  font-family:var(--display);line-height:1;text-transform:uppercase;white-space:nowrap;transition:border-color .2s,box-shadow .2s}
.classes li::before{content:"";position:absolute;left:10px;top:7px;bottom:7px;width:4px;background:linear-gradient(var(--a) 0,var(--a) 46%,var(--b) 54%,var(--b) 100%);box-shadow:0 0 10px var(--a)}
.classes li:hover{border-color:var(--a);box-shadow:0 0 20px -4px var(--a)}
.classes b{font-weight:700;font-size:clamp(12px,1vw,15px);letter-spacing:.16em}
.classes span{font-weight:500;font-size:clamp(9px,.72vw,11px);letter-spacing:.13em;color:var(--dim)}
.classes li:nth-child(1){--a:#b14cff;--b:#35d6ff}
.classes li:nth-child(2){--a:#ff3b30;--b:#ffa726}
.classes li:nth-child(3){--a:#ffd23f;--b:#54ff62}
.classes li:nth-child(4){--a:#4f7bff;--b:#ff2f52}
.classes li:nth-child(5){--a:#a6ff3d;--b:#e8f6ff}

.foot{margin:clamp(14px,1.7vw,22px) 0 0;font-size:clamp(12.5px,.95vw,14.5px);line-height:1.55;color:var(--dim)}
.foot b{font-weight:600;color:var(--paper)}

/* a laptop's squat window: the block is the tallest thing on the page, so it gives up its last line */
@media (min-aspect-ratio:4/5) and (max-height:820px){
  .foot{display:none}
  .lede{max-width:44em}
}
@media (min-aspect-ratio:4/5) and (max-height:700px){
  .classes span{display:none}
  .classes li{padding:8px 14px 8px 23px}
}

/* ---------- upright screens: the title across the full width, the backdrop in the upper part of the screen ---------- */
@media (max-aspect-ratio:4/5){
  /* the picture ends partway down; below it the screen is ink, and the text stands on that. A screen wider than a
     phone (an upright tablet) keeps the wide cut up there: the tall one would stand the god and the ronin behind the title */
  .bg{bottom:auto;height:58vh;height:58svh}
  .bg img{object-position:80% 50%}
  .scrim{background:
    radial-gradient(90% 34% at 20% 96%,rgba(120,60,200,.22) 0,rgba(120,60,200,0) 70%),
    linear-gradient(to top,var(--ink) 0,var(--ink) 42%,rgba(11,10,18,.88) 48%,rgba(11,10,18,0) 62%),
    linear-gradient(to bottom,rgba(11,10,18,.55) 0,rgba(11,10,18,0) 14%)}
  .hero{max-width:40rem}
  h1{font-size:clamp(3.2rem,17.6vw,8.4rem)}
  .lede{font-size:clamp(14px,3.6vw,18px);line-height:1.55}
  .lede span{display:none}                    /* the first sentence says what the game is; the second is for wider screens */
  .gate-label{font-size:clamp(10.5px,2.9vw,14px);letter-spacing:.22em}
  .clock{--fs:clamp(2.6rem,15.5vw,6.4rem);gap:clamp(6px,2vw,14px);padding-left:1vw}
  .unit small{font-size:clamp(9px,2.5vw,12px)}
  .gate-when{font-size:clamp(10px,2.8vw,13px);letter-spacing:.14em}
  .clock-static{font-size:clamp(1.6rem,8vw,3rem)}
  .opened{font-size:clamp(2.2rem,11vw,4.6rem)}
  .classes{gap:7px 8px}
  .classes li{flex-direction:row;align-items:center;padding:8px 12px 8px 22px}
  .classes b{font-size:clamp(11px,2.9vw,14px)}
  .classes span{display:none}                 /* the names carry the row; the weapons would make it five lines */
  .foot{font-size:clamp(12px,3.2vw,14.5px)}
}
/* phones: the tall cut, under the very condition index.html's <source> gives it by (keep the two the same, or a width
   between them gets one cut laid out as the other). A browser's bars leave a squat window, so the picture ends at
   four fifths of it and hangs from its top edge, where the god's horns are. */
@media (max-aspect-ratio:4/5) and (max-width:480px){
  .bg{height:80vh;height:80svh}
  .bg img{object-position:50% 0;transform-origin:50% 16%}
  .scrim{background:
    radial-gradient(90% 34% at 20% 96%,rgba(120,60,200,.22) 0,rgba(120,60,200,0) 70%),
    linear-gradient(to top,var(--ink) 0,var(--ink) 24%,rgba(11,10,18,.92) 40%,rgba(11,10,18,0) 66%),
    linear-gradient(to bottom,rgba(11,10,18,.55) 0,rgba(11,10,18,0) 14%)}
}
/* a squat phone window (a browser with its bars up, or a chat app's own browser): the ronin's feet come down to where
   the text begins, so the line above the title makes room */
@media (max-width:480px) and (min-aspect-ratio:1/2) and (max-aspect-ratio:4/5){
  .eyebrow{display:none}
}
@media (max-aspect-ratio:4/5) and (max-height:800px){
  .foot{display:none}
  .lede{margin-top:10px;font-size:14px}
  .gate{margin-top:16px}
  .classes{margin-top:16px}
}
@media (max-aspect-ratio:4/5) and (max-height:680px){
  .eyebrow{display:none}
  h1{font-size:15vw}
  .lede{display:none}
  .gate{margin-top:14px}
  .clock{--fs:14vw}
  .classes li{padding:6px 10px 6px 20px}
  .classes b{font-size:10.5px}
}
/* a phone on its side: little height, so the title and the clock stand alone */
@media (max-height:480px) and (min-aspect-ratio:4/5){
  .wrap{gap:10px;padding-top:12px;padding-bottom:12px}
  .hero{max-width:66vw}
  .eyebrow{margin-bottom:.6em;font-size:10px}
  h1{font-size:min(9vw,19vh)}
  .lede,.classes,.foot{display:none}
  .gate{margin-top:12px}
  .gate-label{margin-bottom:7px;font-size:10px}
  .clock{--fs:min(11vh,5.4vw)}
  .unit{gap:5px}
  .unit small{font-size:8.5px}
  .gate-when{margin-top:7px;font-size:9.5px}
}
@media (prefers-reduced-motion:reduce){
  .bg img,.soon i,.blades i,.sep,.hero>*,h1 span,.d.tick,.opened{animation:none}
  .embers{display:none}
}