/* GF 2027 (50 Years) - shared styles for all Queue-Fair pages (queue, hold, presale, postsale; de + en).
   Upload this file together with everything else in 2027/files using the Files button.
   Paths below are relative to this file, so all files must sit next to each other in Files. */

@font-face { font-family: "ABC Diatype"; src: url(ABCDiatype-Bold-RG.woff2) format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "ABC Diatype"; src: url(ABCDiatype-Black.woff2) format("woff2"); font-weight: 900; font-display: swap; }

/* FOR EASY CUSTOMISATION EDIT THIS */
:root {
  --page-background: #ffffff;
  --banner-background: transparent;
  --textbox-background: transparent;

  --progress-outer-fade-color: rgba(99, 205, 244, 0);
  --progress-border-color: #000000;
  --progress-inner-color1: rgb(99, 205, 244);
  --progress-inner-color2: rgba(99, 205, 244, 0.35);

  --banner: url(gf27-logo-c.png);
  --banner-height: 190px;
  --banner-border-color: transparent;
  --banner-textbox-divider-color: transparent;
  --textbox-border-color: transparent;
  --corner-radius: 20px;

  --text-color: #000000;
  --text-font: "ABC Diatype", "Helvetica Neue", Arial;
  --link-color: #000000;
}
/*
END EASY CUSTOMISATION
You can also EDIT the styles below, but please don't DELETE or RENAME them.
You can also ADD more styles if you need.
*/
.message {
  background-color: #e6e6e6;
  border-radius: var(--corner-radius);
  padding: 14px 18px;
}
.banner-image {
  width: auto;
  height: var(--banner-height);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-image: var(--banner);
}
body {
  background: var(--page-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  margin: 0;
  padding: 0;
}
.container { position: relative; z-index: 1; min-height: 100vh; display: flex; align-items: center; justify-content: center; margin: 0; padding: 0 }
a { color: var(--link-color); font-weight: 700; }
.flags { position: absolute; top: 8px; right: 12px; }
.flags img { width: 32px; height: 24px; border-radius: 3px }
.center { position: relative; width: 90%; max-width: 520px; background: transparent; margin-top: 10px; margin-bottom: 10px; }
.mainbox {
  background: var(--textbox-background);
  text-align: center;
  font-family: var(--text-font), sans-serif;
  font-weight: 700;
  line-height: 1.35;
  color: var(--text-color);
}
.lower { padding: 0 20px 20px; }
.upper { padding: 20px 20px 8px; }
.margintb { margin-top: 16px !important; margin-bottom: 16px !important; }
.marginnob { margin-bottom: 0px !important}
.smaller { font-size: 0.75em }
/* ss06/ss07 = alternate G and R from the brand manual */
.nox { font-size: 2.2em; font-weight: 900; font-feature-settings: "ss06", "ss07"; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1 }
.estwait { padding-top: 20px; font-size: 1.2em}
.ahead { text-transform: uppercase; letter-spacing: -0.01em }
#aheadNumber { display: block; font-size: 3.6em; font-weight: 900; letter-spacing: -0.04em; line-height: 1.05 }
#util { position: fixed; top: 0px }
.skip { position: absolute; left: -9999px; z-index: 999; padding: 1em; opacity: 0; }
.skip:focus { left: 50%; transform: translateX(-50%); opacity: 1; }
* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
@media screen and (max-width: 991px) {
  .mainbox { font-size: 0.9em; }
  .nox { font-size: 1.8em; }
  .estwait { padding-top: 5px; }
  .banner-image { height: 130px; }
  .sm-padding { padding-left: 15px !important; padding-right: 15px !important; }
}

.mainbox img { width: 5rem; } 

/* Progress bar (queue page). Its width comes from %% progress %% and is set inline in the queue pages. */
.progressOuter {
  border: 2px solid var(--progress-border-color);
  width: auto;
  position: relative;
  margin-left: 50px;
  margin-right: 50px;
  padding: 2px;
  text-align: center;
  border-radius: 999px;
  box-shadow: var(--progress-outer-fade-color) 0px 0px 10px 3px;
  background-color: white;
}
.progressInner {
  background-image: linear-gradient(to right, var(--progress-inner-color1),var(--progress-inner-color2), var(--progress-inner-color1),var(--progress-inner-color2));
  background-size: 300% 300%;
  min-width: 5px;
  transition: width 2s;
  height: 14px;
  border-radius: 999px;
  -webkit-animation: proganim 5s linear infinite;
  -moz-animation: proganim 5s linear infinite;
  animation: proganim 5s linear infinite;
}
@-webkit-keyframes proganim { 0%{background-position:100% 50%} 100%{background-position:0% 50%} }
@-moz-keyframes proganim { 0%{background-position:100% 50%} 100%{background-position:0% 50%} }
@keyframes proganim { 0%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ------------------------------------------------------------------------------------------------
   GF 2027 CHARMS - float very slowly around the text, behind it. Closer = bigger and blurrier.
   The pages contain 16 empty <i> elements; charm N is styled by .charms i:nth-child(N).
   Desktop: --x = left edge, measured from the page centre (text column is ±260px), --y = top in vh.
   Per charm: --s size, --b blur, --dx/--dy/--r drift, --t duration, --d start offset, --z depth.
   ------------------------------------------------------------------------------------------------ */
/* --speed: global charm speed. 1 = original slow drift, 2 = twice as fast. */
.charms { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; --k: 1; --speed: 4; }
.charms i {
  position: absolute; left: calc(50% + var(--x)); top: var(--y); z-index: var(--z, 1);
  width: calc(var(--s) * var(--k)); height: calc(var(--s) * var(--k));
  background: var(--img) center / contain no-repeat;
  filter: blur(calc(var(--b, 0px) * var(--k)));
  animation: drift calc(var(--t) / var(--speed)) ease-in-out calc(var(--d, 0s) / var(--speed)) infinite alternate;
  will-change: transform;
}
@keyframes drift { from { transform: translate(0, 0) rotate(0deg) } to { transform: translate(var(--dx), var(--dy)) rotate(var(--r)) } }

/* left of the text */
.charms i:nth-child(1)  { --img: url(gf27-charm-14.png); --x: -760px; --y: 2vh;  --s: 260px; --b: 10px; --z: 3; --dx: 40px;  --dy: 50px;  --r: 10deg;  --t: 130s; --d: -40s } /* disco ball */
.charms i:nth-child(2)  { --img: url(gf27-charm-01.png); --x: -470px; --y: 10vh; --s: 120px;               --dx: 20px;  --dy: 25px;  --r: -5deg;  --t: 90s;  --d: -10s } /* tram */
.charms i:nth-child(3)  { --img: url(gf27-charm-03.png); --x: -720px; --y: 34vh; --s: 300px; --b: 12px; --z: 3; --dx: 50px;  --dy: -50px; --r: 12deg;  --t: 140s; --d: -70s } /* fan */
.charms i:nth-child(4)  { --img: url(gf27-charm-08.png); --x: -380px; --y: 30vh; --s: 80px;                --dx: -20px; --dy: 25px;  --r: 15deg;  --t: 80s;  --d: -25s } /* clover */
.charms i:nth-child(5)  { --img: url(gf27-charm-10.png); --x: -600px; --y: 64vh; --s: 150px; --b: 3px;  --z: 2; --dx: 30px;  --dy: -40px; --r: -8deg;  --t: 110s; --d: -55s } /* boat */
.charms i:nth-child(6)  { --img: url(gf27-charm-06.png); --x: -440px; --y: 76vh; --s: 140px; --b: 2px;  --z: 2; --dx: -25px; --dy: 30px;  --r: 7deg;   --t: 100s; --d: -15s } /* flame heart */
.charms i:nth-child(7)  { --img: url(gf27-charm-09.png); --x: -640px; --y: 88vh; --s: 100px;               --dx: 20px;  --dy: -25px; --r: -10deg; --t: 85s;  --d: -35s } /* fire */
.charms i:nth-child(8)  { --img: url(gf27-charm-16.png); --x: -400px; --y: 50vh; --s: 100px;               --dx: -20px; --dy: 25px;  --r: -8deg;  --t: 95s;  --d: -75s } /* M bag */
/* right of the text */
.charms i:nth-child(9)  { --img: url(gf27-charm-02.png); --x: 330px;  --y: 6vh;  --s: 110px;               --dx: 20px;  --dy: 25px;  --r: -6deg;  --t: 95s;  --d: -20s } /* Gurten */
.charms i:nth-child(10) { --img: url(gf27-charm-13.png); --x: 560px;  --y: 16vh; --s: 80px;                --dx: -20px; --dy: 25px;  --r: 20deg;  --t: 75s;  --d: -5s  } /* sun */
.charms i:nth-child(11) { --img: url(gf27-charm-04.png); --x: 400px;  --y: 26vh; --s: 200px; --b: 3px;  --z: 2; --dx: 30px;  --dy: 40px;  --r: -6deg;  --t: 115s; --d: -60s } /* highland cow */
.charms i:nth-child(12) { --img: url(gf27-charm-11.png); --x: 340px;  --y: 52vh; --s: 110px;               --dx: 20px;  --dy: -25px; --r: 10deg;  --t: 85s;  --d: -45s } /* butterfly */
.charms i:nth-child(13) { --img: url(gf27-charm-12.png); --x: 560px;  --y: 46vh; --s: 160px; --b: 4px;  --z: 2; --dx: -25px; --dy: 40px;  --r: -12deg; --t: 105s; --d: -30s } /* guitar */
.charms i:nth-child(14) { --img: url(gf27-charm-05.png); --x: 520px;  --y: 64vh; --s: 360px; --b: 14px; --z: 3; --dx: 50px;  --dy: -50px; --r: -10deg; --t: 150s; --d: -90s } /* ladybug */
.charms i:nth-child(15) { --img: url(gf27-charm-07.png); --x: 360px;  --y: 80vh; --s: 90px;                --dx: 20px;  --dy: -25px; --r: 25deg;  --t: 80s;  --d: -50s } /* flower */
.charms i:nth-child(16) { --img: url(gf27-charm-15.png); --x: 440px;  --y: 92vh; --s: 90px;                --dx: -20px; --dy: -25px; --r: -15deg; --t: 90s;  --d: -65s } /* walnut */

/* Narrow screens: no room beside the text, so charms sit in bands above and below it.
   Charms without --mx/--my here are hidden. --my can be measured from the bottom with calc(100% - …). */
@media screen and (max-width: 1000px) {
  body { position: relative; }
  .container { padding: 140px 0; box-sizing: border-box; }
  .charms { position: absolute; --k: 0.5; }
  .charms i { display: none; left: var(--mx); top: var(--my); }
  .charms i:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(6), :nth-child(8), :nth-child(9), :nth-child(11), :nth-child(14), :nth-child(15)) { display: block; }
  /* above */
  .charms i:nth-child(1)  { --mx: -12vw; --my: -50px }
  .charms i:nth-child(2)  { --mx: 24vw;  --my: 25px }
  .charms i:nth-child(8)  { --mx: 46vw;  --my: 40px }
  .charms i:nth-child(9)  { --mx: 64vw;  --my: 10px }
  .charms i:nth-child(11) { --mx: 80vw;  --my: 35px }
  /* below */
  .charms i:nth-child(3)  { --mx: -14vw; --my: calc(100% - 120px) }
  .charms i:nth-child(6)  { --mx: 26vw;  --my: calc(100% - 100px) }
  .charms i:nth-child(15) { --mx: 52vw;  --my: calc(100% - 75px) }
  .charms i:nth-child(14) { --mx: 70vw;  --my: calc(100% - 150px) }
}
/* Visitors who turned on "reduce motion" in their system settings get still charms. */
@media (prefers-reduced-motion: reduce) { .charms i { animation: none } }