/*
	This file is the migrated root stylesheet from the old public website.
	It keeps the original visual layout intact so the public site looks the same after migration.
*/

/* Reset and base styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  width: 100%;
  height: 100%;
  background-color: hsl(349, 21%, 15%) !important;
  background-attachment: fixed;
  background-image: linear-gradient(to bottom, hsl(13, 21%, 28%) 23.2%, hsl(349, 11%, 15%) 100%);
}

body {
  width: 100%;
  min-height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  text-align: center;
  font-size: 20px;
  font-weight: 400;
  color: hsl(25, 21%, 52%);
}

body#privacy, body#contact {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Container layout */
.container {
  min-height: 100dvh;
  min-height: -webkit-fill-available;
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Video section */
.video-section {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
  order: 2;
}

/* Loader spinner */
.video-loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 75vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(255, 255, 255, 0.1);
  border-top: 3px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 11;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.video-section video::-webkit-media-controls-overlay-play-button,
.video-section video::-webkit-media-controls-start-playback-button,
.video-section video::-webkit-media-controls-play-button,
.video-section video::-webkit-media-controls-enclosure,
.video-section video::-webkit-media-controls-panel,
.video-section video::-webkit-media-controls {
  display: none !important;
}

.video-section video {
  cursor: pointer;
  transition: opacity 0.3s ease;
  opacity: 0;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  user-select: none;
  background-color: transparent;
  object-fit: contain;
  width: 154vw;
  aspect-ratio: 1000 / 1240;
  will-change: transform;
  -webkit-transform: translate(15%, 0%);
  transform: translate(15%, 0%);
  padding-bottom: 25px;
}

.video-section video.loaded {
  opacity: 1;
}

.content-section {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-top: max(5%, 45px);
  order: 1;
}

@supports (-webkit-touch-callout: none) {
  .video-section video {
    transform: translate(15%, 0%);
  }
}

a {
  text-decoration: none;
  color: hsl(50, 60%, 50%);
}

h1 {
  color: hsl(35, 46%, 70%);
  font-size: 40px;
  line-height: .5;
}

h2 {
  color: hsl(34, 31%, 57%);
  font-size: 27px;
  font-weight: 400;
  line-height: 1;
}

p {
  margin-bottom: 1rem;
}

#appIcon {
  filter: drop-shadow(0 1px 22px #2e1513);
  overflow: visible !important;
  margin-bottom: .5rem;
  width: 100px;
}

.gradientText {
  background: linear-gradient(hsl(0, 21%, 42%) 0%, hsl(0, 20%, 62%) 19.2%, hsl(22, 21%, 42%) 51.7%, hsl(12, 21%, 42%) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 1px 8px #2e1513);
}

main p {
  margin-top: 20px;
  font-size: 20px;
  font-family: Marker Felt, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
    "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  font-weight: normal;
  color: hsl(50, 60%, 50%);
  letter-spacing: 0.7px;
  line-height: 1.6;
  filter: drop-shadow(0 1px 2px hsl(35, 35%, 19%));
}

.roundButton {
  margin-top: 20px;
  font-size: 21px;
  font-family: Marker Felt, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-weight: normal;
  color: #735e40;
  letter-spacing: 0.5px;
  background-image: linear-gradient(to bottom, hsl(35, 35%, 69%) 0%, hsl(35, 33%, 57%) 100%);
  padding: 8px 25px;
  border-radius: 20px;
  text-shadow: 1px 1px 3px #dfd2c0;
  text-decoration: none;
  display: inline-block;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.roundButton:hover {
  background-image: linear-gradient(to bottom, hsl(35, 35%, 74%) 0%, hsl(35, 33%, 62%) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.roundButton:active {
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

footer {
  transform: translateY(-50%);
  z-index: 1000;
}

@media (min-width: 768px) and (orientation: landscape) {
  .container {
    flex-direction: row;
    min-height: 100dvh;
    height: -webkit-fill-available;
  }
  .video-section {
    position: fixed;
    right: 0;
    top: 0;
    width: 50%;
    height: 100dvh;
    height: -webkit-fill-available;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .video-section video {
    width: auto;
    height: min(100vh, 1086px);
    object-fit: contain;
    transform: translate(10%, 4%);
  }
  .content-section {
    margin-top: 0;
    margin-right: 50%;
    width: 50%;
    min-height: 100dvh;
    min-height: -webkit-fill-available;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 2rem;
    z-index: 2;
    will-change: transform;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  #appIcon {
    width: 170px;
  }
  h2 {
    line-height: 1;
  }
  footer {
    position: absolute;
    bottom: 1%;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
  }
  footer nav {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    max-width: 455px;
    padding: 0 2rem;
    transform: translateX(-10%);
  }
  footer nav p {
    flex: 1;
    text-align: center;
    margin: 0;
    font-size: 19px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
      "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-weight: 500;
  }
  footer nav p:last-child {
    display: none;
  }
  footer nav p a {
    color: hsl(40, 20%, 35%);
  }
  footer nav p a:hover {
    color: hsl(50, 60%, 50%);
  }
}

@media (max-width: 430px) and (max-height: 932px) {
  .content-section {
    padding-top: env(safe-area-inset-top, 1.5rem);
    padding-bottom: env(safe-area-inset-bottom, 1.5rem);
  }
}