/* =========================================================
   ROOT
   ========================================================= */

:root {
  --page-background: #000000;
  --page-foreground: #ffffff;
  --page-accent: #fe2c55;

  --intro-background-image: url("/assets/vb-web.jpg");
  --intro-background-position: center center;
  --intro-video-position: center center;
  --intro-overlay: rgba(0, 0, 0, 0.40);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);

  --intro-padding-mobile: 15px;
  --intro-padding-tablet: 32px;
  --intro-padding-desktop: 56px;

  --logo-width-mobile: min(76vw, 410px);
  --logo-width-tablet: min(58vw, 560px);
  --logo-width-desktop: min(42vw, 680px);

  --logo-stop-mobile: 19vh;
  --logo-stop-tablet: 16vh;
  --logo-stop-desktop: 14vh;

  --logo-duration: 2400ms;
  --logo-easing: cubic-bezier(0.16, 1, 0.3, 1);

  --enter-font-size-mobile: clamp(22px, 6vw, 29px);
  --enter-font-size-tablet: clamp(26px, 3.4vw, 34px);
  --enter-font-size-desktop: clamp(28px, 2vw, 38px);

  --enter-letter-spacing: 0.1em;

  --gate-gap-mobile: 16px;
  --gate-gap-tablet: 20px;
  --gate-gap-desktop: 24px;

  --arrow-size-mobile: 30px;
  --arrow-size-tablet: 32px;
  --arrow-size-desktop: 34px;

  --enter-duration: 1600ms;
  --enter-easing: cubic-bezier(0.14, 0.92, 0.18, 1);

  --arrow-cycle-duration: 6000ms;
  --arrow-easing: cubic-bezier(0.14, 0.92, 0.18, 1);

  --video-reveal-duration: 180ms;

  --sound-hitbox-size: 52px;
  --sound-icon-size: 24px;
  --sound-bottom-mobile: -6px;
  --sound-bottom-tablet: 8px;
  --sound-bottom-desktop: 12px;
}

/* =========================================================
   RESET
   ========================================================= */

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

html {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;

  background: var(--page-background);
  color: var(--page-foreground);

  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  width: 100%;
  min-width: 320px;
  min-height: 100%;
  min-height: 100svh;
  margin: 0;
  padding: 0;
  overflow: hidden;

  background: var(--page-background);
  color: var(--page-foreground);

  overscroll-behavior: none;
  touch-action: manipulation;

  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "SF Pro Text",
    "Helvetica Neue",
    Arial,
    sans-serif;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

button,
input,
textarea,
select {
  font: inherit;
}

button {
  margin: 0;
  padding: 0;

  appearance: none;
  -webkit-appearance: none;

  border: 0;
  border-radius: 0;
  background: none;
  color: inherit;
}

img,
video {
  display: block;
  max-width: 100%;

  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}

video {
  border: 0;
  outline: 0;
}

/* =========================================================
   INTRO SCREEN
   ========================================================= */

.intro {
  position: fixed;
  inset: 0;

  width: 100%;
  height: 100%;
  min-height: 100svh;

  overflow: hidden;
  isolation: isolate;

  background: var(--page-background);
}

/* =========================================================
   FALLBACK / POSTER PHOTOGRAPH
   ========================================================= */

.intro::before {
  content: "";

  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  background-image: var(--intro-background-image);
  background-position: var(--intro-background-position);
  background-repeat: no-repeat;
  background-size: cover;
  background-color: var(--page-background);

  z-index: 0;
  pointer-events: none;

  transform: translateZ(0) scale(1.001);
  transform-origin: center center;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* =========================================================
   DYNAMIC INTRO VIDEO
   Element vytvoří app.js.
   ========================================================= */

.intro__video {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
  min-width: 100%;
  min-height: 100%;

  margin: 0;
  padding: 0;

  object-fit: cover;
  object-position: var(--intro-video-position);

  background: transparent;

  z-index: 1;

  opacity: 0;
  visibility: visible;

  pointer-events: none;

  transform: translateZ(0) scale(1.001);
  transform-origin: center center;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  will-change: opacity;

  transition:
    opacity var(--video-reveal-duration) linear;

  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}

.intro.is-video-ready .intro__video {
  opacity: 1;
}

.intro.is-video-settled .intro__video {
  will-change: auto;
}

.intro__video::-webkit-media-controls {
  display: none !important;
}

.intro__video::-webkit-media-controls-enclosure {
  display: none !important;
}

.intro__video::-webkit-media-controls-panel {
  display: none !important;
}

.intro__video::-webkit-media-controls-play-button {
  display: none !important;
}

.intro__video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
}

/* =========================================================
   DARK SMOKE OVERLAY
   ========================================================= */

.intro::after {
  content: "";

  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  background: var(--intro-overlay);

  z-index: 2;
  pointer-events: none;

  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  transform: translateZ(0);

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* =========================================================
   FOREGROUND CONTENT
   ========================================================= */

.intro__content {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  z-index: 3;

  pointer-events: none;
}

/* =========================================================
   LOGO
   ========================================================= */

.intro__logo {
  position: absolute;

  top: calc(var(--safe-top) + var(--logo-stop-mobile));
  left: calc(var(--safe-left) + var(--intro-padding-mobile));

  width: var(--logo-width-mobile);
  height: auto;

  margin: 0;
  padding: 0;

  object-fit: contain;
  object-position: left top;

  opacity: 0;

  transform:
    translate3d(
      0,
      calc(-100% - var(--logo-stop-mobile) - var(--safe-top) - 48px),
      0
    );

  transform-origin: left top;

  will-change: transform, opacity;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transition:
    transform var(--logo-duration) var(--logo-easing),
    opacity 420ms ease-out;
}

.intro.is-logo-visible .intro__logo {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.intro.is-logo-settled .intro__logo {
  will-change: auto;
}

/* =========================================================
   ENTER GATE
   ========================================================= */

.intro__gate {
  position: absolute;

  top:
    calc(
      var(--safe-top) +
      var(--logo-stop-mobile) +
      var(--logo-width-mobile) +
      var(--gate-gap-mobile)
    );

  left: calc(var(--safe-left) + var(--intro-padding-mobile));

  width: var(--logo-width-mobile);
  height: 160px;

  opacity: 1;
  visibility: visible;

  pointer-events: none;
}

/* =========================================================
   ENTER
   ========================================================= */

.intro__enter {
  position: absolute;

  top: 0;
  left: 0;

  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  min-width: 0;
  min-height: 44px;

  padding: 0;

  color: var(--page-foreground);
  background: transparent;

  font-family:
    "Chakra Petch",
    Arial,
    sans-serif;

  font-size: var(--enter-font-size-mobile);
  font-weight: 600;
  line-height: 1;
  letter-spacing: var(--enter-letter-spacing);
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;

  opacity: 0;

  transform: translate3d(calc(100vw + 100%), 0, 0);
  transform-origin: left center;

  cursor: pointer;
  pointer-events: auto;

  will-change: transform, opacity, color;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  transition:
    transform var(--enter-duration) var(--enter-easing),
    opacity 320ms ease-out,
    color 120ms linear;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.intro__enter:focus {
  outline: none;
}

.intro__enter:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.8);
  outline-offset: 7px;
}

.intro.is-enter-visible .intro__enter {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.intro.is-enter-settled .intro__enter {
  will-change: color;
}

/* =========================================================
   ARROW
   ========================================================= */

.intro__arrow {
  position: absolute;

  top: 54px;
  left: 0;

  width: var(--arrow-size-mobile);
  height: var(--arrow-size-mobile);

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;

  transform: translate3d(0, calc(100svh + 100%), 0);
  transform-origin: 50% 50%;

  pointer-events: none;

  will-change: transform, opacity;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.intro__arrow-icon {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  opacity: 1;

  transform: rotate(0deg) translateZ(0);
  transform-origin: 50% 50%;

  will-change: transform;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;

  filter:
    drop-shadow(0 0 2px rgba(0, 0, 0, 0.6))
    drop-shadow(0 2px 8px rgba(0, 0, 0, 0.45));
}

/* =========================================================
   SOUND CONTROL
   ========================================================= */

.intro__sound {
  position: absolute;

  left: 50%;
  bottom:
    calc(
      var(--safe-bottom) +
      var(--sound-bottom-mobile)
    );

  width: var(--sound-hitbox-size);
  height: var(--sound-hitbox-size);

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  background: transparent;
  border: 0;
  border-radius: 0;

  opacity: 1;
  visibility: visible;

  pointer-events: auto;
  cursor: pointer;

  transform: translate3d(-50%, 0, 0);
  transform-origin: 50% 50%;

  z-index: 5;

  overflow: visible;

  outline: none;
  box-shadow: none;

  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.intro__sound:focus {
  outline: none;
}

.intro__sound:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.8);
  outline-offset: 2px;
}

.intro__sound:active {
  transform:
    translate3d(-50%, 0, 0)
    scale(0.94);
}

.intro__sound-icon {
  width: var(--sound-icon-size);
  height: var(--sound-icon-size);

  max-width: none;
  flex: 0 0 auto;

  display: block;

  object-fit: contain;
  object-position: center;

  opacity: 1;

  filter: none;

  transform: translate3d(0, 0, 0);
  transform-origin: 50% 50%;

  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);

  pointer-events: none;

  transition:
    transform 120ms ease,
    filter 100ms linear,
    clip-path 100ms linear,
    -webkit-clip-path 100ms linear;

  will-change: transform;

  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.intro__sound.is-sound-on .intro__sound-icon {
  clip-path: inset(0 46% 0 0);
  -webkit-clip-path: inset(0 46% 0 0);

  filter:
    brightness(0)
    invert(1);

  transform:
    translate3d(
      calc(var(--sound-icon-size) * 0.23),
      0,
      0
    );
}

/* =========================================================
   ACTIVE ARROW CYCLE
   ========================================================= */

.intro.is-arrow-cycling .intro__arrow {
  animation:
    introArrowTravel
    var(--arrow-cycle-duration)
    linear
    infinite;
}

.intro.is-arrow-cycling .intro__arrow-icon {
  animation:
    introArrowSpin
    var(--arrow-cycle-duration)
    var(--arrow-easing)
    infinite;
}

.intro.is-arrow-cycling .intro__enter {
  animation:
    introEnterFlash
    var(--arrow-cycle-duration)
    linear
    infinite;
}

/* =========================================================
   ARROW TRAVEL
   ========================================================= */

@keyframes introArrowTravel {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(100svh + 100%), 0);
  }

  8% {
    opacity: 1;
  }

  42% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  98% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }

  98.01% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }

  100% {
    opacity: 0;
    transform: translate3d(0, 0, 0);
  }
}

/* =========================================================
   ARROW SPIN
   ========================================================= */

@keyframes introArrowSpin {
  0% {
    transform: rotate(0deg) translateZ(0);
  }

  42% {
    transform: rotate(0deg) translateZ(0);
  }

  90% {
    transform: rotate(1080deg) translateZ(0);
  }

  100% {
    transform: rotate(1080deg) translateZ(0);
  }
}

/* =========================================================
   ENTER FLASH
   ========================================================= */

@keyframes introEnterFlash {
  0%,
  78% {
    color: var(--page-foreground);
  }

  79%,
  98% {
    color: var(--page-accent);
  }

  100% {
    color: var(--page-foreground);
  }
}

/* =========================================================
   ENTER INTERACTION
   ========================================================= */

.intro__enter:active {
  transform: translate3d(0, 0, 0) scale(0.97);
}

/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 374px) {
  :root {
    --intro-padding-mobile: 13px;
    --logo-width-mobile: min(79vw, 360px);
    --logo-stop-mobile: 18vh;

    --enter-font-size-mobile: clamp(20px, 6vw, 26px);
    --gate-gap-mobile: 13px;

    --arrow-size-mobile: 26px;

    --sound-hitbox-size: 58px;
    --sound-icon-size: 35px;
    --sound-bottom-mobile: -6px;
  }

  .intro__gate {
    height: 145px;
  }

  .intro__arrow {
    top: 50px;
  }
}

/* =========================================================
   LARGE MOBILE
   ========================================================= */

@media (min-width: 430px) and (max-width: 767px) {
  :root {
    --intro-padding-mobile: 18px;
    --logo-width-mobile: min(72vw, 460px);
    --logo-stop-mobile: 18vh;

    --enter-font-size-mobile: clamp(24px, 5.6vw, 31px);
    --gate-gap-mobile: 17px;

    --arrow-size-mobile: 30px;

    --sound-hitbox-size: 62px;
    --sound-icon-size: 32px;
    --sound-bottom-mobile: -2px;
  }

  .intro__arrow {
    top: 57px;
  }
}

/* =========================================================
   TABLET
   ========================================================= */

@media (min-width: 768px) and (max-width: 1199px) {
  .intro__logo {
    top: calc(var(--safe-top) + var(--logo-stop-tablet));
    left: calc(var(--safe-left) + var(--intro-padding-tablet));

    width: var(--logo-width-tablet);

    transform:
      translate3d(
        0,
        calc(-100% - var(--logo-stop-tablet) - var(--safe-top) - 64px),
        0
      );
  }

  .intro.is-logo-visible .intro__logo {
    transform: translate3d(0, 0, 0);
  }

  .intro__gate {
    top:
      calc(
        var(--safe-top) +
        var(--logo-stop-tablet) +
        var(--logo-width-tablet) +
        var(--gate-gap-tablet)
      );

    left: calc(var(--safe-left) + var(--intro-padding-tablet));

    width: var(--logo-width-tablet);
    height: 180px;
  }

  .intro__enter {
    font-size: var(--enter-font-size-tablet);
  }

  .intro__arrow {
    top: 62px;

    width: var(--arrow-size-tablet);
    height: var(--arrow-size-tablet);
  }

  .intro__sound {
    bottom:
      calc(
        var(--safe-bottom) +
        var(--sound-bottom-tablet)
      );
  }
}

/* =========================================================
   DESKTOP
   ========================================================= */

@media (min-width: 1200px) {
  .intro__logo {
    top: calc(var(--safe-top) + var(--logo-stop-desktop));
    left: calc(var(--safe-left) + var(--intro-padding-desktop));

    width: var(--logo-width-desktop);

    transform:
      translate3d(
        0,
        calc(-100% - var(--logo-stop-desktop) - var(--safe-top) - 80px),
        0
      );
  }

  .intro.is-logo-visible .intro__logo {
    transform: translate3d(0, 0, 0);
  }

  .intro__gate {
    top:
      calc(
        var(--safe-top) +
        var(--logo-stop-desktop) +
        var(--logo-width-desktop) +
        var(--gate-gap-desktop)
      );

    left: calc(var(--safe-left) + var(--intro-padding-desktop));

    width: var(--logo-width-desktop);
    height: 190px;
  }

  .intro__enter {
    font-size: var(--enter-font-size-desktop);
  }

  .intro__arrow {
    top: 68px;

    width: var(--arrow-size-desktop);
    height: var(--arrow-size-desktop);
  }

  .intro__sound {
    bottom:
      calc(
        var(--safe-bottom) +
        var(--sound-bottom-desktop)
      );
  }
}

/* =========================================================
   VERY WIDE DESKTOP
   ========================================================= */

@media (min-width: 1800px) {
  :root {
    --intro-padding-desktop: 72px;
    --logo-width-desktop: min(38vw, 760px);
    --logo-stop-desktop: 13vh;

    --enter-font-size-desktop: 40px;
    --gate-gap-desktop: 28px;

    --arrow-size-desktop: 36px;

    --sound-hitbox-size: 68px;
    --sound-icon-size: 41px;
    --sound-bottom-desktop: 24px;
  }

  .intro__arrow {
    top: 72px;
  }
}

/* =========================================================
   LANDSCAPE MOBILE
   ========================================================= */

@media (max-height: 520px) and (orientation: landscape) {
  .intro__logo {
    top: calc(var(--safe-top) + 8vh);
    left: calc(var(--safe-left) + 20px);

    width: min(42vw, 390px);

    transform:
      translate3d(
        0,
        calc(-100% - 8vh - var(--safe-top) - 32px),
        0
      );
  }

  .intro.is-logo-visible .intro__logo {
    transform: translate3d(0, 0, 0);
  }

  .intro__gate {
    top:
      calc(
        var(--safe-top) +
        8vh +
        min(42vw, 390px) +
        8px
      );

    left: calc(var(--safe-left) + 20px);

    width: min(42vw, 390px);
    height: 105px;
  }

  .intro__enter {
    min-height: 34px;
    font-size: clamp(18px, 2.8vw, 25px);
  }

  .intro__arrow {
    top: 38px;

    width: 24px;
    height: 24px;
  }

  .intro__sound {
    bottom: var(--safe-bottom);

    width: 54px;
    height: 54px;
  }

  .intro__sound-icon {
    width: 33px;
    height: 33px;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .intro__video {
    transition-duration: 1ms;
  }

  .intro__logo {
    transition:
      transform 700ms ease-out,
      opacity 300ms ease-out;
  }

  .intro__enter {
    transition:
      transform 700ms ease-out,
      opacity 300ms ease-out,
      color 120ms linear;
  }

  .intro__sound-icon {
    transition-duration: 1ms;
  }

  .intro.is-arrow-cycling .intro__arrow {
    animation-duration: 3000ms;
  }

  .intro.is-arrow-cycling .intro__arrow-icon {
    animation-duration: 3000ms;
  }

  .intro.is-arrow-cycling .intro__enter {
    animation-duration: 3000ms;
  }
}

/* =========================================================
   MOBILE INTRO — LEFT ART COMPOSITION
   ========================================================= */

@media (max-width: 767px) {
  /*
   * Logo zůstává vysoko, ale celý podpis je viditelný.
   */
  .intro__logo {
    top: calc(var(--safe-top) + 1vh);
    left: calc(var(--safe-left) + 14px);
  }

  /*
   * Gate pokrývá celý viewport.
   */
  .intro__gate {
    inset: 0;

    width: 100%;
    height: 100%;

    pointer-events: none;
  }

  /*
   * ENTER je jeden celek otočený o -90°.
   */
  .intro__enter {
    top: calc(var(--safe-top) + 124px);
    left: calc(var(--safe-left) + 30px);

    min-height: 36px;

    font-size: 19px;
    font-weight: 700;

    transform:
      translate3d(
        calc(100vw + 100%),
        0,
        0
      )
      rotate(-90deg);

    transform-origin: left center;
  }

  .intro.is-enter-visible .intro__enter {
    opacity: 1;

    transform:
      translate3d(0, 0, 0)
      rotate(-90deg);
  }

  .intro__enter:active {
    transform:
      translate3d(0, 0, 0)
      rotate(-90deg)
      scale(0.97);
  }

  /*
   * Šipka zůstává ve stejné velikosti.
   * Posunutá více vlevo a výrazně výš.
   */
  .intro__arrow {
    top: calc(var(--safe-top) + 148px);

    left: calc(var(--safe-left) + 18px);

    width: 26px;
    height: 26px;
  }
}