@charset "UTF-8";

:root
{
  --sans-serif: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: "averia", serif;
  --background: #c6c5c5;
  --text: #141414;
  --subtle: #7a7878;
  --lightsand: #f0f0f0;
  --interactive: #487d95;
}

*,
*:before,
*:after
{
  box-sizing: border-box;
}

html
{
  font-size: 1vw;
}

body
{
  font-size: 3.6rem;
  letter-spacing: -.05ch;
}

@media (min-width: 670px)
{
  body
  {
    font-size: 2rem;
  }
}

@media (min-width: 1000px)
{
  html
  {
    font-size: 10px;
  }
}

html
{
  margin: 0;
  padding: 0;
  position: relative;
  overflow-x: clip;
  background: var(--background);
}

body
{
  margin: 0;
  padding: 0;
  background: var(--background);
  color: var(--text);

  font-family: var(--serif);
}

a
{
  text-decoration: none;
  color: inherit;
}

a:hover
{
  text-decoration: underline
}

#header
{
  margin: 0;
  position: relative;
  text-align: center;
}

#presskit #header
{
  padding-bottom: 0;
}

/* Parallax Header */

#parallaxWrapper
{
  width: 100%;
  height: 65vw;
  position: relative;
  top: 0;
  left: 0;
}

#main::before
{
  content: "";
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: var(--background);
  -webkit-mask-image: url("/img/brushed-edge.png");
  -webkit-mask-position: top left;
  -webkit-mask-repeat: repeat-x;
  -webkit-mask-size: contain;
  pointer-events: none;
  top: -6vw;
}

.parallaxLayer
{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 65vw;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  pointer-events: none;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  /* image-rendering: pixelated; */
}

#title
{
  /* -webkit-mask-size: auto 12vw;
  -webkit-mask-position: center 15vw;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-image: url("/img/herdling-logo.png");
  background-color: var(--interactive); */
  position: relative;
  z-index: 3;
  background-size: auto 12vw;
  background-position: center 15vw;
  background-image: url("/img/herdling-logo.png");
}

/* Plush */

#plush-bang
{
  display: block;
  position: absolute;
  z-index: 100;
  text-indent: -10000em;
  color: transparent;
  
  top: 5rem;
  left: 6rem;
  width: 15rem;
  height: 15rem;
  
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  background-image: url('/img/web-bang-plush.png');
}

#layer1 { background-image: url("/img/keyart-layer-1.png"); z-index: 1; background-position: top center; }
#layer2 { background-image: url("/img/keyart-layer-2.png"); z-index: 2; }
#layer3 { background-image: url("/img/keyart-layer-3.png"); z-index: 3; }
#layer4 { background-image: url("/img/keyart-layer-4.png"); z-index: 4; }
#layer5 { background-image: url("/img/keyart-layer-5.png"); z-index: 5; }


#header
{
  display: none;
}

.title
{
  position: relative;
  margin: 0 auto;
  color: transparent;
  will-change: opacity;
  opacity: 1;
  height: 12vw;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center top;
  background-image: url("/img/herdling-logo.png");
  visibility: hidden;
}

.title::after
{
  margin: 0 auto;
}

.title a
{
  display: block;
  color: transparent;

}


.wishlist-container
{
  display: flex;
  gap: 1ch;
  width: 100rem;
  margin: 0 auto;
  padding-top: 1ch;
  align-items: center;
  justify-content: center;
  flex-flow: row wrap;
}


.wishlist-container p
{
  margin: 0;
  text-align: left;
}

@media (max-width: 670px)
{
  .wishlist-container p
  {
    width: 100%;
    text-align: center;
  }
}

#trailer
{
  margin: 0 auto;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: grid;
  place-items: center;
  width: calc(100vw);
  height: calc(56.25vw);
  max-width: 90rem;
  max-height: 50.625rem;
  border-radius: 0.5ch;
  cursor: pointer;
  color: transparent;
  background-color: white;
  border: 0.25rem solid white;
  border-top-width: .5rem;
}

#trailer iframe
{
  transition: 1000ms all ease;
  background: #fff;
  overflow: hidden;
  object-fit: fill;
}

#trailer.poster iframe
{
  opacity: 0;
}

#trailer.poster,
#trailer.loading
{
  background-image: url("/img/poster-image-launch.jpg");
}

#trailer.loading
{
  animation-name: pulse;
  animation-duration: 1500ms;
  animation-iteration-count: infinite;
  animation-play-state: running;
  animation-timing-function: ease-in-out;
}

#trailer.playing
{
  animation-name: none;
}

@keyframes pulse
{
  from { opacity: 1; }
  50% { opacity: 0.35; }
  to { opacity: 1; }
}

#trailer.playing iframe
{
  opacity: 1;
}

#container
{
  position: relative;
  margin: 0;
  z-index: 10;
  background-color: var(--background);
}

#main p
{
  margin: 2ch 0;
}

#main
{
  color: #000;
  position: relative;
}

@supports (background-image: url("image.webp"))
{
  #main::before { -webkit-mask-image: url("/img/brushed-edge.webp"); }

  #layer1 { background-image: url("/img/keyart-layer-1.webp");}
  #layer2 { background-image: url("/img/keyart-layer-2.webp");}
  #layer3 { background-image: url("/img/keyart-layer-3.webp");}
  #layer4 { background-image: url("/img/keyart-layer-4.webp");}
  #layer5 { background-image: url("/img/keyart-layer-5.webp");}
  /* #title  { background-image: url("/img/herdling-logo.webp"); } */

  #trailer.poster,
  #trailer.loading
  {
    background-image: url("/img/poster-image-launch.webp");
  }
}

@supports (background-image: url("image.avif"))
{
  #main::before { -webkit-mask-image: url("/img/brushed-edge.avif"); }

  #layer1 { background-image: url("/img/keyart-layer-1.avif");}
  #layer2 { background-image: url("/img/keyart-layer-2.avif");}
  #layer3 { background-image: url("/img/keyart-layer-3.avif");}
  #layer4 { background-image: url("/img/keyart-layer-4.avif");}
  #layer5 { background-image: url("/img/keyart-layer-5.avif");}
  /* #title  { background-image: url("/img/herdling-logo.avif"); } */

  #trailer.poster,
  #trailer.loading
  {
    background-image: url("/img/poster-image-launch.avif");
  }
}

a
{
    color: var(--interactive);
}

#intro,
#extraLinks,
#merch
{
  max-width: 58ch;
  margin: 0 auto;
  line-height: 1.3;
  text-align: center;
  padding: 0 1ch;
}

#intro p::before
{
  content: '';
  display: block;
  margin: 3ch auto;

  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  /* mix-blend-mode: multiply; */
}

#intro p:nth-of-type(2)
{
  font-style: italic;
}

#intro p:nth-of-type(2)::before
{
  height: 6ch;
  background-image: url("/img/decoration-1.png");
}

p#availability
{
  text-align: center;
  text-shadow: none;
}

.centered
{
  text-align: center;
}

.wishlist,
.bigButton
{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5ch;
  padding: .5ch 1ch .5ch .5ch;
  border: .2ch solid transparent;
  border-radius: 2ch;
  color: var(--lightsand);
  background: var(--interactive);
  flex: 0 0 auto;
}

.wishlist::before,
.bigButton::before
{
  content: "";
  display: block;
  width: 2ch;
  height: 2ch;
  background: currentcolor;
  -webkit-mask-image: url("/img/platform-logo-steam.svg");
  -webkit-mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
}

.wishlist a,
.bigButton a
{
  color: var(--lightsand);
  text-decoration: none;
}

.wishlist.steam { background: #141414; }
.wishlist.steam::before { -webkit-mask-image: url("/img/platform-logo-steam.svg"); }

.wishlist.xbox { background: #76663d; }
.wishlist.xbox::before { -webkit-mask-image: url("/img/platform-logo-xbox.svg"); }

.wishlist.playstation { background: #487d95; }
.wishlist.playstation::before { -webkit-mask-image: url("/img/platform-logo-ps.svg"); }

.wishlist.epic { background: #D98D38; }
.wishlist.epic::before { -webkit-mask-image: url("/img/platform-logo-egs.svg"); }

.wishlist.switch { background: #913030; }
.wishlist.switch::before { -webkit-mask-image: url("/img/platform-logo-switch.svg"); }

.demo
{
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lightsand);
  gap: .5ch;
  padding: .5ch 1ch .5ch .5ch;
  border: .2ch solid transparent;
  border-radius: 2ch;
}

.demo a
{
  color: inherit
}

.demo::before
{
  content: "";
  width: 3ch;
  height: 3ch;
  display: inline-block;
  background-image: url("/img/play-button.png");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

#presskit #main
{
  max-width: 90rem;
  margin: 0 auto;
}

#presskit h2
{
  text-align: center;
}

#presskit dt
{
  font-weight: bold;
  margin-top: 2ch;
  margin-bottom: 1ch;
}

#presskit ul li
{
  margin-left: 0;
}

#presskit li,
#presskit dd,
#presskit details
{
  margin-bottom: .75ch;
}

#presskit #videos dl dd,
#presskit #screenshots dd
{
  margin-left: 0;
}

@keyframes pulse
{
  from { opacity: 1; }
  50% { opacity: 0.35; }
  to { opacity: 1; }
}

#trailer.playing iframe
{
  opacity: 1;
}

section#mailingList
{
  margin: 4ch auto 0 auto;
  padding-bottom: 4ch;
}

.hidden
{
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}

#elist_form
{

  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
  gap: 1ch 0;
}

.control-group input,
.control-group button
{

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  font: inherit;
  background: transparent;
  border: 0;
}

.control-group.email,
.control-group.button
{
  flex: 0 0 auto;
}

.meta
{
  text-align: center;
  font-size: 1em;
  flex: 0 0 100%;
}

.meta
{
  opacity: 0;
  transition-duration: 350ms;
  transition-timing-function: ease;
  transition-property: opacity;
}

.meta.success,
.meta.error
{
  opacity: 1;
}

.control-group input
{
  padding: 1ch;
  background: var(--lightsand);
  color: var(--text);
  min-width: 22ch;
}

.control-group.button button
{
    background-color: black;
    color: #fff;
    text-decoration: none;
    text-shadow: none;
    padding: 1ch 2ch;
    cursor: pointer;
    width: 100%;
    border-radius: 0.2ch;
}

#screenshots
{
  margin: 4ch auto;
  max-width: 136rem;
}

#screenshots ul
{
  margin: .5ch auto;
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1ch;
  flex-flow: row wrap;
  justify-content: center;
}

#screenshots ul li
{
  margin: 0;
  position: relative;
  width: 90rem;
  height: calc(90rem * .5625);
}

/* Extra Links */

#extraLinks
{
  margin-top: 8rem;
}

#extraLinks h2
{
  font-size: 1.4em;
}

#extraLinks #youtube-doc
{
  background-color: #913030;
}

#extraLinks #youtube-doc::before
{
-webkit-mask-image: url("/img/platform-logo-youtube.svg");
}


/* Merch */

a#plush
{
  display: block;
  text-indent: -10000em;
  color: transparent;
  
  width: calc(1600rem / 25);
  height: calc(900rem / 25);
  margin: 5rem auto;
  border-radius: 1em;
  
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  background-image: url('/img/web-link-plush.png');
  
  box-shadow: 0 .2em .3em #00000044;
  transition: all ease .2s;
}
a#plush:hover
{
  transform: scale(1.05);
  box-shadow: 0 .4em 1em #00000044;
}

@media (min-width: 670px)
{

  #screenshots ul li
  {
    width: 44rem;
    height: calc(44rem * .5625);
  }
}

#screenshots li a
{
  cursor: pointer;

}

#screenshots li .shine
{
  display: block;
  height: 100%;
  border-radius: 0.5ch;
  position: relative;
  z-index: 999;
  pointer-events: none;
}

#screenshots img
{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 0.5ch;
  -webkit-object-fit: cover;

  box-shadow: rgba(0,0,0,.3) 0 .2ch .5ch;
  border: 0.25rem solid var(--lightsand);
}

#gif-01::after,
#gif-02::after,
#gif-03::after
{
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  border-radius: 0.5;
  -webkit-object-fit: cover;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  pointer-events: none;
}

#gif-01::after
{
  background-image: url("/img/screenshots/herdling-gif-01.gif");
}

#gif-02::after
{
  background-image: url("/img/screenshots/herdling-gif-02.gif");
}

#gif-03::after
{
  background-image: url("/img/screenshots/herdling-gif-03.gif");
}

#footer
{
  color: var(--subtle);
  background: var(--background);
  padding-bottom: 2ch;
}

#footer nav
{
  text-align: center;
}

#footer p
{
  text-align: center;
}
#footer a
{
  color: inherit;
}

#footer::before
{
  content: '';
  display: block;
  width: 100%;
  height: 10ch;
  margin: 0 auto 4ch auto;

  background-image: url("/img/decoration-3.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;

  /* mix-blend-mode: multiply; */
}

.logos
{
  margin: 4ch auto;
  display: flex;
  justify-content: center;
  align-content: center;
}

.logos a
{
  position: absolute;
  color: transparent;
  width: 100%;
  height: 100%;
}

.logos .logo
{
  position: relative;
  height: 8ch;
  width: 16ch;
  margin: 0;
  -webkit-mask-size: contain;
  -webkit-mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  background-color: var(--subtle);
  color: transparent;
}

#logo-panic
{
  -webkit-mask-image: url("/img/logo-panic.png");
}

#logo-okomotive
{
  -webkit-mask-image: url("/img/logo-okomotive.png");
}

#viewer
{
  width: 100vw;
  height: 100vh;
  display: grid;
  place-content: center;
  background: rgba(0,0,0,0.75);
  position: fixed;
  top: 0;
  left: 0;
  opacity: 0;
  pointer-events: none;
  transition: 250ms opacity ease;
  z-index: 1000;
}

#viewer #image
{
  display: block;
  width: 100vw;
  height: 56.25vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: contain;
  max-width: 128rem;
  max-height: 72rem;
  transform: scale(0);
  transition: 500ms transform ease;
  cursor: pointer;
  z-index: 10000;
}

#zoomedImage
{
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

body.viewer
{
  overflow: hidden;
  pointer-events: none;
}

body.viewer #viewer
{
  opacity: 1;
  pointer-events: all;
}

body.viewer #viewer #image
{
  transform: scale(1);
}

.hidden
{
  position: absolute;
  visibility: hidden;
  pointer-events: none;
  z-index: -1;
}