/* PatchFall landing page. Palette and type follow the game's start menu: deep space, cream gold, slate blue, teal robot light, Inter. */
@font-face{font-family:Inter;src:url(fonts/inter-regular.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Inter;src:url(fonts/inter-medium.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --space:#04060d; --night:#0b1222; --dusk:#1b2a4a;
  --cream:#f6e7b4; --slate:#9fb2d6; --teal:#3fd6c4; --amber:#ff8a3d;
  --pad:clamp(16px,6vw,72px);
  --bot-h:48dvh;   /* the robot is sized by height or width, whichever runs out first (see --bot-w) */
  --bot-w:min(calc(var(--bot-h)*1.1747),calc(100vw - var(--pad)*2));
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;overscroll-behavior:none;background:var(--space);color-scheme:dark}
body{position:fixed;inset:0;font:400 16px/1.4 Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--cream);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* sky: the game's own gradient and star tiles, held still */
.sky{position:fixed;inset:0;z-index:0;background:radial-gradient(ellipse at 50% 115%,var(--dusk) 0%,var(--night) 52%,var(--space) 100%)}
.sky::before,.sky::after{content:"";position:absolute;inset:0;background-repeat:repeat}
.sky::before{background-image:
  radial-gradient(1px 1px at 20px 30px,#fff,transparent),radial-gradient(1px 1px at 90px 120px,#cfe3ff,transparent),
  radial-gradient(1.5px 1.5px at 160px 60px,#fff,transparent),radial-gradient(1px 1px at 40px 150px,#ffe9c7,transparent);
  background-size:200px 200px}
.sky::after{background-image:
  radial-gradient(1px 1px at 70px 40px,#bcd2ff,transparent),radial-gradient(1px 1px at 210px 190px,#fff,transparent),
  radial-gradient(2px 2px at 260px 90px,#ffe9c7,transparent);
  background-size:320px 320px;opacity:.7}

main{
  position:fixed;inset:0;z-index:1;
  display:grid;justify-items:center;text-align:center;
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,.75fr) auto auto auto minmax(max(15dvh,92px),1.25fr);
  grid-template-areas:"." "logo" "tag" "bot" "soon";
}
.logo{grid-area:logo;margin:0;line-height:0;align-self:end}
.logo img{display:block;width:min(86vw,calc(clamp(56px,13dvh,150px)*2.6667));height:auto}
.tagline{grid-area:tag;margin:clamp(2px,.8dvh,10px) 0 clamp(14px,3.2dvh,40px);padding:0 var(--pad);max-width:30em;color:var(--slate);font-size:clamp(14px,2.2dvh,20px);letter-spacing:.08em;text-wrap:balance}

.stage{grid-area:bot;position:relative;width:100%;display:flex;justify-content:center}
.bot{display:block;position:relative;z-index:1;transform:translateY(4.5%);width:var(--bot-w);aspect-ratio:800/681;height:auto;overflow:visible}
.eye{transform-box:fill-box;transform-origin:center;animation:boot 1.7s .5s backwards,blink 7s 3.2s infinite}
.led{animation:pulse 3.4s ease-in-out 2.2s infinite}

/* the planet: a very big circle whose top edge is the floor the robot stands on */
.planet{
  position:absolute;z-index:0;left:50%;top:100%;transform:translateX(-50%);
  width:min(240vmax,200vw);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 50% 0%,#2b2f5c 0%,#1b2149 20%,#0f1535 52%,#070a1d 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,176,110,.5),
    inset 0 22px 34px -14px rgba(255,138,61,.38),
    0 -14px 46px -8px rgba(255,138,61,.3),
    0 -60px 140px -30px rgba(120,150,255,.22);
}

.soon{grid-area:soon;position:relative;z-index:2;margin:0;align-self:start;padding-top:clamp(16px,5.5dvh,52px);font-weight:500;font-size:clamp(15px,2.4dvh,21px);letter-spacing:.1em;color:var(--cream)}
.soon::after{content:"";display:inline-block;width:.5em;height:1.05em;margin-left:.45em;vertical-align:-.17em;background:var(--teal);animation:caret 1.1s steps(1) infinite}

@keyframes boot{0%,38%{opacity:0}42%{opacity:1}48%{opacity:.15}54%{opacity:1}60%{opacity:.5}66%,100%{opacity:1}}
@keyframes blink{0%,93%,100%{transform:scaleY(1)}96%{transform:scaleY(.1)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
@keyframes caret{0%,55%{opacity:1}56%,100%{opacity:0}}

/* short landscape screens (phones on their side): text left, robot right */
@media (orientation:landscape) and (max-height:540px){
  :root{--bot-h:66dvh;--bot-w:min(calc(var(--bot-h)*1.1747),calc(50vw - var(--pad)))}
  main{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-rows:minmax(0,1fr) auto auto auto minmax(0,1fr);
    grid-template-areas:". bot" "logo bot" "tag bot" "soon bot" ". bot";
    padding-bottom:0;
  }
  .logo{align-self:auto}
  .logo img{width:min(38vw,calc(clamp(44px,26dvh,130px)*2.6667))}
  .tagline{margin-bottom:clamp(8px,2dvh,16px)}
  .soon{padding-top:0;align-self:auto}
  .stage{margin-bottom:max(13dvh,env(safe-area-inset-bottom));align-self:end}
}
@media (prefers-reduced-motion:reduce){.eye,.led,.soon::after{animation:none}}