/* ZeKay Studios: the studio's home page only, loaded after site.css.
   Two worlds side by side, each in its own game's look (For Our King: painted art, gothic gold; Apprentice Mage Gale:
   pixel art, its own frames, buttons and font), then the way in for creators and press. home.js gives the worlds their
   life: they lean toward the pointer, wake into gameplay when looked at, and carry their own particles. */
body.home .rail{display:none!important}   /* the side vines are For Our King's; the studio's page runs edge to edge */

/* ================================================================ the two worlds */
.worlds{position:relative;display:flex;height:100svh;min-height:640px;max-height:1180px;overflow:hidden;background:#050F1E;z-index:3}
.world{position:relative;flex:1 1 0;min-width:0;overflow:hidden;isolation:isolate;
  transition:flex-grow .9s var(--ease),filter .6s var(--ease)}
.world.fok{animation:fromL 1.2s var(--ease) both}
.world.amg{animation:fromR 1.2s .12s var(--ease) both}
@keyframes fromL{from{opacity:0;transform:translateX(-5%)}to{opacity:1;transform:none}}
@keyframes fromR{from{opacity:0;transform:translateX(5%)}to{opacity:1;transform:none}}
@media (hover:hover) and (pointer:fine) and (min-width:901px){
  /* the world looked at opens up; the other steps back */
  .worlds:hover .world{flex-grow:.8;filter:saturate(.55) brightness(.6)}
  .worlds .world:hover,.worlds .world:focus-within{flex-grow:1.2;filter:none}
}

/* layers, back to front: the art (drifting, leaning with the pointer), the gameplay, the particles, the shade, the words */
.w-art{position:absolute;inset:-5%;z-index:-4;
  transform:translate3d(calc(var(--mx,0) * -16px),calc(var(--my,0) * -10px + var(--sy,0px)),0);transition:transform .7s var(--ease)}
/* the art fills the top 80% and fades into its own ground below, so the keep and the party stand clear of the words */
.w-art i{--h:80%;position:absolute;inset:0;transform-origin:50% 40%;animation:kb 26s ease-in-out infinite alternate;
  background:linear-gradient(180deg,rgba(0,0,0,0) calc(var(--h) - 14%),var(--ground) var(--h)),var(--art) 50% 0/auto var(--h) no-repeat,var(--ground)}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1.5%,-1%)}}
.world.fok .w-art i{--ground:#5E5A2A;--art:url(fok-hero.jpg)}
.world.amg .w-art i{--ground:#285918;--art:url(../amg/art/AMG_Library_Hero_3840x1240.png);
  image-rendering:pixelated;image-rendering:crisp-edges;animation-duration:32s}
.w-play{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;opacity:0;
  transform:scale(1.06);transition:opacity .9s var(--ease),transform 1.4s var(--ease)}
.world.amg .w-play{image-rendering:pixelated}
.world.live .w-play{opacity:1;transform:none}
.w-fx{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.w-shade{position:absolute;inset:0;z-index:-1;pointer-events:none;transition:background .8s}
.world.fok .w-shade{background:linear-gradient(180deg,rgba(5,15,30,.42) 0,rgba(5,15,30,0) 26%,rgba(5,15,30,0) 44%,rgba(5,15,30,.55) 66%,rgba(5,15,30,.94) 100%)}
.world.amg .w-shade{background:linear-gradient(180deg,rgba(18,13,34,.5) 0,rgba(18,13,34,0) 26%,rgba(18,13,34,0) 44%,rgba(18,13,34,.6) 66%,rgba(18,13,34,.95) 100%)}
.world.fok.live .w-shade{background:linear-gradient(180deg,rgba(5,15,30,.7) 0,rgba(5,15,30,.25) 36%,rgba(5,15,30,.5) 62%,rgba(5,15,30,.95) 100%)}
.world.amg.live .w-shade{background:linear-gradient(180deg,rgba(18,13,34,.72) 0,rgba(18,13,34,.25) 36%,rgba(18,13,34,.55) 62%,rgba(18,13,34,.96) 100%)}
.w-link{position:absolute;inset:0;z-index:1}
.w-in{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;
  padding:clamp(104px,13vh,150px) 6% clamp(34px,6vh,64px);text-align:center;pointer-events:none}
.w-in a,.w-in button{pointer-events:auto}

/* the logo, and what it rests on */
.w-top{position:relative;width:min(560px,86%);transition:transform .9s var(--ease)}
.world:hover .w-top{transform:scale(1.04)}
.w-logo{position:relative;z-index:2;width:100%;filter:drop-shadow(0 12px 26px rgba(3,10,22,.6));
  animation:heroDrop 1.1s .35s var(--ease) both,bob 7s 1.5s ease-in-out infinite}
.world.amg .w-logo{animation-delay:.47s,1.6s}   /* the logo is drawn well above this size: smooth scaling keeps every letter */
.w-glow{position:absolute;left:50%;top:50%;width:175%;translate:-50% -54%;z-index:1;opacity:.8;image-rendering:pixelated;pointer-events:none;
  animation:wbloom 1.6s .4s var(--ease) both,wbreathe 5s 2s ease-in-out infinite}
@keyframes wbloom{from{opacity:0;scale:.6}to{opacity:.8;scale:1}}
@keyframes wbreathe{0%,100%{opacity:.8;scale:1}50%{opacity:.5;scale:.95}}
.w-wisp{position:absolute;z-index:3;width:120px;image-rendering:pixelated;opacity:0;pointer-events:none;animation:wwisp 8s linear infinite}
.w-wisp.b{width:90px;animation-duration:10s;animation-delay:3s}
@keyframes wwisp{0%{opacity:0;transform:translateX(-100px)}12%{opacity:.85}80%{opacity:.7}100%{opacity:0;transform:translateX(200px)}}

.w-low{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:600px}
.w-low>*{animation:up .9s var(--ease) both}
.w-low>:nth-child(1){animation-delay:.55s}.w-low>:nth-child(2){animation-delay:.65s}.w-low>:nth-child(3){animation-delay:.75s}
.w-low>:nth-child(4){animation-delay:.85s}.w-low>:nth-child(5){animation-delay:.95s}
.w-genre{margin:0;font-family:var(--mono);font-size:11.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);
  text-shadow:0 2px 10px rgba(3,10,22,.9)}
.w-tag{margin:0;max-width:30ch;color:#fff;line-height:1.25}
.w-date{margin:2px 0 4px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;
  font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase}
.w-date span{padding:5px 12px;border-radius:99px;border:1px solid rgba(240,206,94,.55);color:var(--gold);background:rgba(5,15,30,.55)}
.w-date em{font-style:normal;color:#E6EEF7}
.w-date em b{font-weight:600;color:#fff;font-size:15px}
.w-cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
.w-sub{display:flex;gap:6px 18px;justify-content:center;flex-wrap:wrap;margin:2px 0 0;font-size:14px}
.w-sub a{color:#E6EEF7;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);padding-bottom:1px;transition:color .2s,border-color .2s}
.w-sub a:hover{color:var(--gold);border-color:var(--gold)}

/* For Our King: gothic gold, painted art, motes of light and slow clouds over the keep */
.world.fok .w-tag{font-family:var(--disp);font-weight:600;font-size:clamp(22px,2vw,30px);text-shadow:0 3px 0 rgba(4,16,32,.92),0 0 30px rgba(4,16,32,.85)}
.world.fok .btn{font-size:19px;padding:12px 28px}
.mote{position:absolute;left:var(--x);bottom:-12px;width:var(--s);height:var(--s);border-radius:50%;opacity:0;
  background:radial-gradient(circle,#FFF8D6 0,#F0CE5E 42%,rgba(240,206,94,0) 70%);
  animation:moteUp var(--d) linear var(--t) infinite}
@keyframes moteUp{0%{transform:translate3d(0,0,0);opacity:0}15%{opacity:.95}85%{opacity:.6}100%{transform:translate3d(var(--dx),-92vh,0);opacity:0}}
.cloud{position:absolute;top:var(--y);left:-30%;width:var(--w);height:calc(var(--w) * .34);border-radius:50%;
  background:radial-gradient(ellipse at 50% 60%,rgba(255,255,255,.55),rgba(255,255,255,0) 68%);filter:blur(6px);
  animation:drift var(--d) linear var(--t) infinite}
@keyframes drift{to{transform:translateX(190vw)}}
.world.fok .w-fx::before{content:"";position:absolute;right:-12%;top:-18%;width:70%;aspect-ratio:1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,240,190,.45),rgba(255,240,190,0) 62%);animation:sun 9s ease-in-out infinite}
@keyframes sun{50%{opacity:.55;transform:scale(1.08)}}

/* Apprentice Mage Gale: its pixel font, gold and purple pixel buttons, twinkling stars */
.world.amg{--amg-gold:#FFE445}
.world.amg .w-genre{font-family:"Pixelify Sans",var(--mono);font-size:15px;letter-spacing:.16em;color:var(--amg-gold)}
.world.amg .w-tag{font-family:"Pixelify Sans",var(--body);font-weight:600;font-size:clamp(22px,1.9vw,30px);
  text-shadow:0 3px 0 #261A28,0 0 24px rgba(18,13,34,.85)}
.world.amg .w-date span{border-color:rgba(182,140,255,.6);color:var(--amg-gold);background:rgba(18,13,34,.6);font-family:"Pixelify Sans",var(--mono);letter-spacing:.08em;font-size:14px}
.world.amg .w-date em{font-family:"Pixelify Sans",var(--mono);letter-spacing:.06em;font-size:14px}
.world.amg .w-sub a{font-family:"Pixelify Sans",var(--body);font-size:15.5px}
.world.amg .w-sub a:hover{color:var(--amg-gold);border-color:var(--amg-gold)}
.gbtn{--b:url("../amg/ui/primary.png");--bh:url("../amg/ui/primary-hover.png");
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;
  border:solid transparent;border-width:9px 6px 6px 9px;border-image:var(--b) 3 2 2 3 fill / 9px 6px 6px 9px stretch;
  image-rendering:pixelated;image-rendering:crisp-edges;font-family:"Pixelify Sans",var(--body);font-weight:700;font-size:20px;line-height:1.1;
  color:#2A1606;text-decoration:none;padding:9px 24px 11px;cursor:pointer;background:none;
  filter:drop-shadow(0 6px 0 rgba(10,6,22,.55)) drop-shadow(0 14px 22px rgba(6,4,20,.45));transition:transform .12s var(--ease),filter .12s var(--ease)}
.gbtn:hover{border-image-source:var(--bh);transform:translateY(-2px);filter:drop-shadow(0 8px 0 rgba(10,6,22,.55)) drop-shadow(0 18px 26px rgba(255,228,69,.25))}
.gbtn:active{transform:translateY(2px)}
.gbtn.purple{--b:url("../amg/ui/button.png");--bh:url("../amg/ui/button-hover.png");color:#F8F0FF}
.gbtn.pulse{animation:gpulse 2.6s 1.6s ease-in-out infinite}
@keyframes gpulse{0%,100%{filter:drop-shadow(0 6px 0 rgba(10,6,22,.55)) drop-shadow(0 14px 22px rgba(6,4,20,.45))}
  50%{filter:drop-shadow(0 6px 0 rgba(10,6,22,.55)) drop-shadow(0 10px 34px rgba(255,228,69,.55))}}
.spk{position:absolute;left:var(--x);top:var(--y);width:var(--s);height:var(--s);background:var(--c);opacity:0;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);
  animation:twinkle var(--d) ease-in-out var(--t) infinite}
@keyframes twinkle{0%,100%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1)}}

/* the seam between the worlds: a line of light running down it */
.world.amg::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;z-index:4;pointer-events:none;
  background:linear-gradient(180deg,rgba(240,206,94,0),rgba(240,206,94,.8) 18%,rgba(182,140,255,.85) 82%,rgba(182,140,255,0));
  box-shadow:0 0 16px rgba(240,206,94,.45)}
.world.amg::after{content:"";position:absolute;left:-3px;top:-60px;width:8px;height:60px;z-index:4;pointer-events:none;border-radius:4px;
  background:linear-gradient(180deg,rgba(255,255,255,0),#fff);box-shadow:0 0 18px 4px rgba(255,236,170,.8);animation:seam 5.5s 1.4s ease-in-out infinite}
@keyframes seam{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateY(calc(100svh + 60px));opacity:0}}

/* the prompt over the seam */
.choose{position:absolute;top:clamp(72px,9vh,92px);left:50%;z-index:5;translate:-50% 0;margin:0;pointer-events:none;
  font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:#fff;white-space:nowrap;
  padding:7px 16px;border-radius:99px;background:rgba(5,15,30,.72);border:1px solid rgba(240,206,94,.4);backdrop-filter:blur(6px);
  animation:up .9s 1s var(--ease) both}
.choose i{font-style:normal;color:var(--gold);padding:0 6px}

/* ================================================================ creators and press */
#creators{padding:64px 0 56px}
@media (min-width:1280px){ body.home .wrap{max-width:1500px} }
.cr{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);gap:22px;align-items:stretch}
.cr-copy h2{font-size:clamp(32px,3.6vw,48px);margin-bottom:12px}
.cr-copy p{color:#C3D4E6;font-size:16.5px;line-height:1.6;margin-bottom:22px}
.cr-copy .btns{gap:12px}
.cr-copy .btn{font-size:19px;padding:12px 28px}
.cr-mail{display:block;margin-top:16px;font-family:var(--mono);font-size:12.5px;color:var(--dim)}
.cr-mail a{color:var(--gold)}
.kitc{position:relative;display:flex;flex-direction:column;gap:8px;padding:24px 24px 22px;text-decoration:none;color:var(--text);
  overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s}
.kitc:hover{transform:translateY(-6px)}
.kitc img{height:64px;width:auto;max-width:100%;object-fit:contain;object-position:left center;margin-bottom:8px;transition:transform .5s var(--ease)}
.kitc:hover img{transform:scale(1.05)}
.kitc b{font-size:24px;line-height:1.1}
.kitc span{font-size:14.5px;line-height:1.5;color:#C3D4E6}
.kitc em{margin-top:auto;padding-top:8px;font-style:normal;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.kitc em::after{content:" \2192";display:inline-block;transition:transform .3s var(--ease)}
.kitc:hover em::after{transform:translateX(6px)}
.kitc.fok{border:1px solid rgba(240,206,94,.45);border-radius:8px;
  background:linear-gradient(180deg,rgba(12,36,64,.95),rgba(6,20,38,.92));box-shadow:0 20px 50px rgba(3,10,22,.5)}
.kitc.fok::before{content:"";position:absolute;inset:0;z-index:-1;background:url(fok-hero.jpg) 60% 40%/cover;opacity:.16;transition:opacity .4s}
.kitc.fok:hover{box-shadow:0 26px 60px rgba(3,10,22,.6),0 0 0 1px var(--gold)}
.kitc.fok:hover::before{opacity:.3}
.kitc.fok b{font-family:var(--disp);font-weight:700;color:#fff}
.kitc.amg{border:24px solid transparent;border-image:url("../amg/ui/panel.png") 8 fill / 24px stretch;padding:4px 6px 2px;
  image-rendering:pixelated;filter:drop-shadow(0 18px 30px rgba(6,4,20,.55))}
.kitc.amg>*{image-rendering:auto}
.kitc.amg b{font-family:"Pixelify Sans",var(--body);font-weight:600;color:#fff}
.kitc.amg span{color:#E4DAF5}
.kitc.amg em{font-family:"Pixelify Sans",var(--mono);font-size:14px;letter-spacing:.08em;color:#FFE445}

/* ================================================================ narrower screens */
@media (max-width:1200px){
  .cr{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cr-copy{grid-column:1/-1}
}
@media (max-width:900px){
  .worlds{flex-direction:column;height:auto;max-height:none}
  .world{flex:none;min-height:86svh}
  .w-art i{--h:62%}   /* a tall narrow world: a smaller picture, so the keep and the party fit between the logo and the words */
  .w-art{transform:none}   /* stacked worlds keep their art still: the scroll lean is for the side-by-side worlds only */
  .w-in{min-height:86svh;padding:96px 18px 38px}
  .world.amg::before{left:0;right:0;top:0;bottom:auto;width:auto;height:2px;
    background:linear-gradient(90deg,rgba(240,206,94,0),rgba(240,206,94,.8) 18%,rgba(182,140,255,.85) 82%,rgba(182,140,255,0))}
  .world.amg::after{display:none}
  .world.amg .w-in{padding-top:64px}
  .choose{display:none}
  .w-wisp{display:none}
}
@media (max-width:640px){
  .cr{grid-template-columns:1fr}
  .world.fok .btn,.gbtn{font-size:17px;padding:10px 18px}
  .gbtn{padding:7px 16px 9px}
  .w-sub{font-size:13.5px}
}
@media (prefers-reduced-motion:reduce){
  .w-art i,.mote,.cloud,.spk,.w-wisp,.world.amg::after{animation:none!important}
}