@import url('https://fonts.googleapis.com/css2?family=Arvo&display=swap');

:root {
  --measure: 60ch;
  --ratio: 1.5;
  --s-5: calc(var(--s-4) / var(--ratio));
  --s-4: calc(var(--s-3) / var(--ratio));
  --s-3: calc(var(--s-2) / var(--ratio));
  --s-2: calc(var(--s-1) / var(--ratio));
  --s-1: calc(var(--s0) / var(--ratio));
  --s0: 1rem;
  --s1: calc(var(--s0) * var(--ratio));
  --s2: calc(var(--s1) * var(--ratio));
  --s3: calc(var(--s2) * var(--ratio));
  --s4: calc(var(--s3) * var(--ratio));
  --s5: calc(var(--s4) * var(--ratio));
  --s6: calc(var(--s5) * var(--ratio));

  --flow: var(--s1);

  --color1: #cc0e74;
  --color2: #67e8ff;
  --color3: #9ca973;
  --color4: rgba(52, 27, 43, 1);
  
  color: #000;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
  font-size: calc(100% + .5vw);
  line-height: var(--ratio);
  scroll-behavior: smooth;
}

* {
  box-sizing: border-box;
  margin: 0;
  max-inline-size: var(--measure);
  padding: 0;
}

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

html,
body,
div,
header,
nav,
main,
footer,
section {
  max-inline-size: none;
}

body {
	background-image: url("data:image/svg+xml,%3Csvg width='84' height='84' viewBox='0 0 84 84' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ccc' fill-opacity='0.6'%3E%3Cpath d='M84 23c-4.417 0-8-3.584-8-7.998V8h-7.002C64.58 8 61 4.42 61 0H23c0 4.417-3.584 8-7.998 8H8v7.002C8 19.42 4.42 23 0 23v38c4.417 0 8 3.584 8 7.998V76h7.002C19.42 76 23 79.58 23 84h38c0-4.417 3.584-8 7.998-8H76v-7.002C76 64.58 79.58 61 84 61V23zM59.05 83H43V66.95c5.054-.5 9-4.764 9-9.948V52h5.002c5.18 0 9.446-3.947 9.95-9H83v16.05c-5.054.5-9 4.764-9 9.948V74h-5.002c-5.18 0-9.446 3.947-9.95 9zm-34.1 0H41V66.95c-5.053-.502-9-4.768-9-9.948V52h-5.002c-5.184 0-9.447-3.946-9.95-9H1v16.05c5.053.502 9 4.768 9 9.948V74h5.002c5.184 0 9.447 3.946 9.95 9zm0-82H41v16.05c-5.054.5-9 4.764-9 9.948V32h-5.002c-5.18 0-9.446 3.947-9.95 9H1V24.95c5.054-.5 9-4.764 9-9.948V10h5.002c5.18 0 9.446-3.947 9.95-9zm34.1 0H43v16.05c5.053.502 9 4.768 9 9.948V32h5.002c5.184 0 9.447 3.946 9.95 9H83V24.95c-5.053-.502-9-4.768-9-9.948V10h-5.002c-5.184 0-9.447-3.946-9.95-9zM50 50v7.002C50 61.42 46.42 65 42 65c-4.417 0-8-3.584-8-7.998V50h-7.002C22.58 50 19 46.42 19 42c0-4.417 3.584-8 7.998-8H34v-7.002C34 22.58 37.58 19 42 19c4.417 0 8 3.584 8 7.998V34h7.002C61.42 34 65 37.58 65 42c0 4.417-3.584 8-7.998 8H50z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

a {
  text-decoration: none;
}

button {
  cursor: pointer;
}

h2 {
  font-family: 'Arvo', serif;
  text-align: center;
}

img {
  display: block;
  width: 100%;
}

p {
  line-height: var(--ratio);
}

main {
  --flow: var(--s5);
  margin-block-start: var(--s4);
}

article {
  background: #fff;
  margin: var(--s2) auto;
}

.intro p {
  place-self: center;
  text-align: center;
}

.intro p,
.intro h2,
.referenzen p,
.referenzen h2 {
  background: #fff;
}

.referenzen.center {
  inline-size: 90vw;
  max-inline-size: 1200px;
  text-align: center;
}

.referenzen * {
  --flow: var(--s2);
}

.referenzen ul * {
  --flow: var(--s0);
}

.referenzen ul {
  list-style: none;
}

.referenzen ul img {
  background: #fff;
  margin-inline: auto;
  max-inline-size: 150px;
}

.referenzen .switcher {
  align-items: center;
}

.referenzen h2 {
  display: inline-block;
  max-inline-size: auto;
 }

.box {
  padding: var(--s1);
}

.stack > * + * {
  margin-block-start: var(--flow);
}

.cover {
  background-color: #645862;
  display: flex;
  flex-direction: column;
  min-block-size: 100vh;
}

.cover > * {
  margin-block: var(--s1);
}

.cover > section {
  margin-block: auto;
}

.cover > :last-child:not(section) {
  margin-block-end: 0;
}

header#main {
  background: url('images/light-bl.svg') no-repeat bottom left, url('../../images/banner-intro.jpg') no-repeat center;
  background-color: #645862;
  background-size: 45vw, cover;
  min-block-size: 100vh;
}

footer {
  background: url('images/light-tr.svg') no-repeat top right, url('../../images/banner-outro.jpg') no-repeat bottom;
  background-color: #645862;
  background-size: 30vw, cover;
}

@media (min-device-width: 480px) {
  header#main,
  footer {
    background-attachment: scroll, fixed;
  }
}

footer small {
  display: flex;
  gap: var(--s0);
  margin-inline: auto;
}

footer small a {
  color: #fff;
}

footer section {
  color: #fff;
  text-align: center;
}

footer .switcher > :first-child {
  filter: brightness(90%);
  flex-grow: 0.5;
}

.button {
  background-color: var(--color3);
  border: 1px solid #fff;
  border-radius: 3px;
  color: #fff;
  cursor: pointer;
  display: block;
  font-size: var(--s-1);
  font-weight: 900;
  letter-spacing: 2px;
  line-height: 3.75em;
  margin-inline: auto;
  max-inline-size: 13em;
  min-width: 18em;
  padding: 0 .75em;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

header#main a {
  background-color: var(--color3);
  border: 1px solid #fff;
  border-radius: 3px;
  color: #fff;
  font-size: var(--s-1);
  padding: var(--s-2);
  position: fixed;
  top: var(--s0);
  right: 2vw;
  z-index: 1;
}

#logo {
  --flow: var(--s-1);
  background-color: rgb(52, 27, 43);
  border: 1px solid #fff;
  border-bottom-left-radius: 1em;
  border-bottom-right-radius: 1em;
  border-top: none;
  min-inline-size: 150px;
  position: fixed;
  top: 0;
  left: 5vw;
  width: 10vw;
  z-index: 1;
}

#logo p {
  color: #fff;
  font-size: var(--s-2);
  text-align: center;
  text-transform: uppercase;
}

.center {
  margin-inline: auto;
  max-inline-size: 65vw;
}

.grid {
  display: grid;
  gap: var(--s2);
  grid-template:
    "vid vid vid vid vid vid vid vid vid"
    ". trailer trailer trailer trailer trailer text1 text1 text1"
    ". trailer trailer trailer trailer trailer text1 text1 text1"
    "gintonic gintonic gintonic gintonic welcome welcome welcome welcome ." 
    "gintonic gintonic gintonic gintonic welcome welcome welcome welcome ." 
    "text2 text2 text2 text2 makingof makingof makingof makingof ."
    ". bottles bottles bottles bottles bottles texel texel texel" 
    ". bottles bottles bottles bottles bottles texel texel texel" 
    ". count count count count count texel texel texel"
    / 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
}

@media (max-width: 70em) {
  .grid {
    grid-template:
      "vid vid vid vid"
      "trailer trailer trailer trailer"
      ". text1 text1 ."
      "gintonic gintonic welcome welcome"
      "text2 text2 makingof makingof"
      "bottles bottles texel texel"
      "count count texel texel"
      / 1fr 1fr 1fr 1fr;
  }
}

@media (max-width: 50em) {
  .grid {
    grid-template:
      "vid"
      "trailer"
      "text1"
      "gintonic"
      "welcome"
      "text2"
      "makingof"
      "bottles"
      "count"
      "texel";
  }
}

.grid img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.grid video {
  grid-area: vid;
  max-width: 100%;
}

.grid img:nth-of-type(1) {
  grid-area: trailer;
}

.grid img:nth-of-type(2) {
  grid-area: bottles;
}

.grid img:nth-of-type(3) {
  grid-area: gintonic;
}

.grid img:nth-of-type(4) {
  grid-area: welcome;
  transition-delay: 200ms;
}

.grid img:nth-of-type(5) {
  grid-area: texel;
  transition-delay: 200ms;
}

.grid p:nth-of-type(1) {
  grid-area: text1;
  transition-delay: 400ms;
}

.grid p:nth-of-type(2) {
  grid-area: text2;
  transition-delay: 200ms;
}

.grid aside {
  align-items: center;
  background: url('images/badge.svg') no-repeat scroll;
  color: #fff;
  display: flex;
  flex-direction: column;
  grid-area: makingof;
  justify-content: center;
  place-self: center;
  text-align: center;
  text-shadow: 1px 1px 2px #333;
  transition-delay: 400ms;
  width: 11rem;
  height: 11rem;
}

.grid div {
  grid-area: count;
  text-align: center;
}

.hidden {
  filter: blur(5px);
  opacity: 0;
  transform: translateX(-50%);
  transition: all 1s;
}

.show {
  filter: blur(0);
  opacity: 1;
  transform: translateX(0);
}

aside.show {
  transform: translateX(0) rotate(15deg);
}

.switcher {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
}

.switcher > * {
  flex-grow: 1;
  flex-basis: calc((35em - 100%) * 999);
}

.switcher > :nth-child(2) {
  flex-grow: 0.5;
}

.reel {
  position: relative;
  scroll-behavior: smooth;
}

.reel ul {
  background-color: #645862;
  color: #fff;
  display: flex;
  gap: var(--s-1);
  list-style: none;
  max-inline-size: 100%;
  overflow-x: auto;
  padding: var(--s-1);
}

.reel ul li {
  aspect-ratio: 1 / 1;
  background-color: rgb(52, 27, 43);
  flex: 0 0 350px;
  transition: opacity 0.5s linear;
}

.reel ul li[inert] {
  opacity: 0.3;
}

.reel ul li img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.reel button[disabled] {
  opacity: 0.5;
}

.reel-buttons {
  position: absolute;
  top: var(--s1);
  right: var(--s-1);
  z-index: 1;
}

.reel-buttons button {
  background: rgb(52, 27, 43);
  border: 0;
  color: #fff;
}

.reel-buttons svg {
  width: var(--s1);
  height: var(--s1);
}

.reel-sr {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}