body,
html {
  overflow-x: hidden;
  background: white;
}

* {
  color: black;
}

/*TYPOGRAPHY*/

body,
html,
* {
  margin: 0;
  padding: 0;
  font-family: "Roam", sans-serif;
  scroll-behavior: smooth;
  text-decoration: none;
  user-select: none;
}

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

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

ul,
li,
a {
  text-decoration: none;
  display: inline-block;
  padding: 0;
  margin: 0;
}

a {
  cursor: pointer;
}

.anchor-dis {
  display: block;
}


img {
  width: 100%;
}

.phone video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* This ensures the video covers the area of the container */
}

@keyframes fadeOutToWhite {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    background-color: white;
  }
}

@keyframes fadeInFromWhite {
  0% {
    opacity: 0;
    background-color: white;
  }
  100% {
    opacity: 1;
  }
}

.video-transition-effect {
  animation-fill-mode: forwards; /* Keeps the element in the state of the last animation frame when the animation finishes. */
}

/****** TYPOGRAPHY *****/

@font-face {
  font-family: "Roam";
  src: url("fonts/RoamVF.ttf") format("truetype");
}

.large-title {
  font-weight: normal;
  font-size: 162px;
  text-align: center;
  font-variation-settings: "wght" 400, "wdth" 490;
  letter-spacing: -11px;
  line-height: 0.85;
}

h1 {
  font-weight: normal;
  font-size: 48px;
  text-align: center;
  font-variation-settings: "wght" 550, "wdth" 480;
  letter-spacing: -2px;
  line-height: 0.86;
}

h2 {
  font-weight: normal;
  font-size: 28px;
  text-align: center;
  font-variation-settings: "wght" 550, "wdth" 480;
  letter-spacing: -1px;
  line-height: 0.9;
}

h3 {
  font-weight: normal;
  font-size: 26px;
  text-align: center;
  font-variation-settings: "wght" 550, "wdth" 600;
  letter-spacing: -1.1px;
  line-height: 26px;
  text-transform: uppercase;
}

h4 {
  font-weight: normal;
  font-size: 22px;
  text-align: center;
  font-variation-settings: "wght" 500, "wdth" 465;
  letter-spacing: -0.5px;
  line-height: 21px;
  text-transform: uppercase;
}

p {
  font-weight: normal;
  font-size: 18px;
  text-align: center;
  font-variation-settings: "wght" 600, "wdth" 480;
  letter-spacing: -0.6px;
  line-height: 18px;
}

.link-button {
  font-weight: normal;
  font-size: 28px;
  text-align: center;
  font-variation-settings: "wght" 550, "wdth" 480;
  letter-spacing: -1px;
  line-height: 0.9;
  opacity: .3;
}

.link-button:hover {
 background: rgba(0,0,0,.3);
 color: black;
}

.break {
  display: inline-block;
}

.download {
  font-weight: normal;
  font-size: 16px;
  text-align: left;
  font-variation-settings: "wght" 610, "wdth" 505;
  letter-spacing: -0.8px;
  line-height: 1;
}

.beta {
  font-weight: normal;
  font-size: 11px;
  text-align: left;
  font-variation-settings: "wght" 610, "wdth" 505;
  letter-spacing: -0.3px;
  line-height: 1;
  opacity: 0.5;
}

.version {
  font-weight: normal;
  font-size: 22px;
  text-align: center;
  font-variation-settings: "wght" 550, "wdth" 480;
  letter-spacing: -0.8px;
  line-height: 1;
  color: #cacaca;
}

.top-left,
.top-center,
.top-right {
  opacity: 0;
}

.txt-nav,
ul,
li,
a {
  font-weight: normal;
  font-size: 13px;
  text-align: left;
  font-variation-settings: "wght" 610, "wdth" 505;
  letter-spacing: -0.3px;
  line-height: 1;
  margin: 0;
  padding: 0;
  text-decoration: none;
}

ul {
  list-style-type: none;
  line-height: 1;
  display: block;
}

.row {
  width: 100vw;
  height: 100vh;
  background: transparent;
  z-index: 1;
  position: relative;
}

.flex {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

#hero-title,
#footer-title {
  margin-top: -5vh;
}

#phone-wrapper {
  height: 100vh;
  width: 100vw; /* Initially, it doesn't take up space */
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
}

#footer-phone {
  height: 100vh;
  width: 100vw; /* Initially, it doesn't take up space */
  position: absolute;
  z-index: 1000;
  top: 0;
  left: 0;
  overflow-y: hidden;
}

.phone {
  background-color: white;
  width: 52vw;
  height: calc(52vw * 2.164);
  border-radius: 5.2vw;
  position: absolute;
  left: 50%;
  top: 100%; /* Adjusted to start from the bottom of the viewport */
  overflow: hidden;
  border: 2px solid #e9e9e9;
}

.mobile-phone {
  display: none;
}

.ft-phone {
  border: 2px solid #e9e9e9;
  background-color: white;
  width: 52vw;
  height: calc(52vw * 2.164);
  border-radius: 5.2vw;
  position: absolute;
  left: 50%;
  top: auto;
  top: 80%;
  overflow: hidden;
  transform: translateX(
    -50%
  ); /* This centers the element, but we'll adjust it initially for the top position */
}

#carousel-container {
  perspective: 10000px;
  perspective-origin: center -6000px;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}

#carousel {
  margin: 0 auto;
  width: 100%;
  height: 75%;
  transform-style: preserve-3d;
}

.card {
  position: absolute;
  left: 50%;
  top: 50%;
  transform-origin: 0 50%;
  overflow: hidden;
  border-radius: 10px; /* Adjust as needed to round the corners */
  border: 5px solid rgba(0, 0, 0, 0);
  transition: border-color 0.3s ease-in-out; /* Smoothly transition the border color over 0.5 seconds */
}

.video-container {
  position: relative;
  z-index: 9999;
}

#manifesto-video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  width: 420px;
  max-width: 28%;
  cursor: pointer;
  transition: transform 0.5s ease-in-out;
  border-radius: 24px;
  z-index: 9999;
  border: 2px solid #e9e9e9;
}

.play-button {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 64px;
  color: white;
  cursor: pointer;
  pointer-events: none;
  z-index: 10000;
}

#paragraph-post {
  transform: translate(-50%, -50%);
  position: absolute;
  left: 50%;
  top: 50%;
  width: 400px;
  background: transparent;
  height: auto;
  border-radius: 30px;
  max-width: 28%;
}

#paragraph-post img {
  border-radius: 32px;
  border: 2px solid #E9E9E9;
}

.card img {
  box-sizing: border-box;
  width: 150px;
  display: block;
}

.card-horiz img {
  width: calc(150px * 1.2);
}

#centre-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.svg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url("img/phone-mask.svg") no-repeat center center; /* Update path accordingly */
  background-size: cover;
  z-index: 10; /* Above the video element */
}

#title {
  width: 180px;
}

#description {
  width: 120px;
}

.main {
  width: 220px;
  position: absolute;
  left: 20vw;
  top: 50%;
  transform: translate(-50%, -50%);
  padding: 2px 0;
}

.secondary {
  width: 180px;
  position: absolute;
  right: 20vw;
  top: 50%;
  transform: translate(50%, -50%);
  padding: 2px 0;
}

.w-80 {
  width: 80%;
}

.version-bttn {
  border: 1.5px solid #cacaca;
  border-radius: 4px;
  padding: 3px 4px 0px 4px;
}

.icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 54px; /* Adjust based on actual size */
  height: 42px; /* Adjust based on actual size */
}

.ellipse-background {
  width: 100%; /* Full width of the wrapper */
  height: auto;
}

.lottie-animation {
  position: absolute;
  height: 42px; /* Adjust based on actual size of the animation */
}

.apple-btn {
  display: block;
  width: 128px;
  height: 42px;
  background-color: #f0f0f0;
  border-radius: 4px;
  color: #000;
  text-decoration: none;
  font-size: 10px;
  text-align: center;
  line-height: 10px;
  position: relative;
  /* overflow: hidden; */
}

/****** NAV *****/

.top-nav {
  position: fixed;
  top: 16px;
  width: 100%;
  display: block;
  height: 30px;
  z-index: 2000;
  display: flex;
  flex-direction: row;
  align-items: center;
  z-index: 9999;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  width: 100%;
  display: block;
  height: 30px;
  z-index: 9999;
}

.top-left {
  position: absolute;
  left: 20vw;
  transform: translateX(-50%);
}

.top-center {
  position: absolute;
  left: 50vw;
  transform: translateX(-50%);
}

.top-right {
  position: absolute;
  right: 20vw;
  transform: translateX(50%);
}

.bottom-left {
  position: absolute;
  left: 12px;
  bottom: 6px;
}

.bottom-center {
  position: absolute;
  left: 50vw;
  transform: translateX(-50%);
  bottom: 6px;
}

.bottom-left-mid {
  position: absolute;
  left: 20vw;
  bottom: 6px;
  transform: translateX(-50%);
}

.bottom-mid-right {
  position: absolute;
  right: 20vw;
  bottom: 6px;
  transform: translateX(50%);
}

.bottom-right {
  position: absolute;
  right: 12px;
  bottom: 6px;
}

.nav-list li {
  margin: 0 4px;
}

/****** INTERACTION *****/

@keyframes spin {
  from {
    transform: rotateY(0deg);
  }
  to {
    transform: rotateY(360deg);
  }
}

.apple-btn:hover .text-original,
.apple-btn:hover .text-clone {
  animation: slideText 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.apple-btn:hover .text-clone {
  animation-delay: 0.5s; /* Matches the duration of the original text's animation */
  animation: slideTextClone 0.5s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes slideText {
  to {
    transform: translateY(-100%);
    opacity: 0; /* Fade out */
  }
}

@keyframes slideTextClone {
  from {
    transform: translateY(100%);
    opacity: 0; /* Start fully transparent */
  }
  to {
    transform: translateY(0);
    opacity: 1; /* Fade in */
  }
}

/* Existing glow effect */
.glow {
  border: 5px solid #007aff; /* Blue glow */
}

/* New class for the grey state after hover */
.glow-grey {
  border: 5px solid rgba(0, 0, 0, 0.3); /* Change the color as needed */
}

.dim {
  opacity: 0.3;
}

.dim:hover {
  opacity: 1;
}

.link:hover {
  color: white !important;
  background-color: black;
  opacity: 1;
}

.link:hover > a {
  color: white; /* Change the color to red on hover */
}

.blinking {
  animation: pulse 0.5s infinite alternate; /* Animation name, duration, and repetition */
}

@keyframes pulse {
  0% {
    opacity: 0.3; /* Start opacity */
  }
  100% {
    opacity: 1; /* End opacity */
  }
}

#phone-video {
  transition: opacity 0.2s ease-in-out;
}

.white-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: 2; /* Above the video */
  opacity: 0;
  transition: opacity 150ms ease-in-out;
}

.footer-btn:hover {
  filter: invert();
}

.apple-logo {
  width: 18px; /* Adjusted for visual proportionality */
  height: auto;
  position: absolute;
  left: 12px; /* Adjusted for visual proportionality */
  top: 45%;
  transform: translateY(-50%);
}

.txt-download {
  position: relative;
  overflow: hidden;
  height: 26px; /* Set this to the height needed to fit your text */
  padding-top: 8px;
  margin-left: 38px;
  overflow: hidden;
}

/* Base styles */
.text-original,
.text-clone {
  display: flex;
  flex-direction: column;
  justify-content: start;
  position: absolute;
  width: 100%;
  padding-bottom: 14px;
}

.text-clone {
  transform: translateY(100%); /* Start below the original text */
}

#footer {
  overflow: hidden;
}

.video-player {
    background: white;
    padding: 18px 26px 10px;
    border-radius: 150px;
    font-variation-settings: "wght" 550, "wdth" 460;
    font-size: 52px;
    cursor: pointer;
}

/* RESPONSIVE */

@media only screen and (max-width: 782px) and (orientation: portrait) {


  #phone-wrapper {
    display: none;
  }

  #manifesto-video {
    width: 220px;
    max-width: none;
  }

  #paragraph-post {
    width: 220px;
    max-width: none;
  }

  .row {
    height: 700px;
  }

  #hero {
    height: 620px;
  }

  #team {
    height: 620px;
  }

  #footer {
    justify-content: start;
    height: 500px;
  }

  .mobile-phone {
    background-color: white;
    width: 220px;
    height: calc(220px * 2.164);
    border-radius: 22px;
    position: absolute;
    left: 50%;
    bottom: 180px; /* Adjusted to start from the bottom of the viewport */
    overflow: hidden;
    border: 2px solid #e9e9e9;
    display: block;
    transform: translate(-50%);
  }

  .mobile-phone img {
    width: 100% !important;
  }

  #first-phone {
    bottom: auto;
  }

  .large-title {
    font-size: 18vw;
    letter-spacing: -1.4vw;
    line-height: 0.85;
  }

  .text-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    position: absolute;
    align-items: center;
    bottom: 40px;
  }

  #hero-title,
  #footer-title {
    margin-top: 24px;
  }

  .main {
    display: block;
    position: relative;
    width: 260px;
    left: auto;
    top: auto;
    transform: translate(0, 0);
  }

  h1 {
    font-size: 34px;
    letter-spacing: -1.8px;
    line-height: 0.92;
  }

  .secondary {
    padding-top: 8px;
    width: 220px;
    display: block;
    position: relative;
    right: auto;
    top: auto;
    transform: translate(0, 0);
    opacity: 0.3;
  }

  h2 {
    font-size: 20px;
    letter-spacing: -0.7px;
    line-height: 1;
  }

  .phone {
    display: none;
    visibility: hidden;
  }

  .break {
    display: contents;
  }

  .space::after {
    content: "\00a0"; /* Unicode for non-breaking space */
  }

  .top-left {
    left: 8px;
    transform: translateX(0) scale(0.8);
  }

  .top-right {
    right: 8px;
    transform: translateX(0) scale(0.8);
  }

  .top-center {
    transform: translateX(-50%) scale(1);
  }

  .bottom-center {
    display: none;
  }

  .bottom-left {
    display: none;
  }

  .bottom-right {
    display: none;
  }

  .bottom-left-mid {
    left: 12px;
    transform: translate(0);
  }

  .bottom-mid-right {
    right: 12px;
    transform: translate(0);
  }

  .nav-list li {
    margin: 0 4px;
  }

  .background-bar {
    width: 100%;
    height: 90px;
    position: absolute;
    left: 0;
    bottom: -8px;
    display: block;
    margin: 0;
    padding: 0;
    background: linear-gradient(
      to top,
      rgba(255, 255, 255, 1),
      rgba(255, 255, 255, 0)
    );
  }

  #carousel-container {
    perspective: 10000px;
    perspective-origin: center -6000px;
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
  }

  #carousel {
    margin: 0 auto;
    width: 100%;
    height: 80%;
    transform-style: preserve-3d;
  }

  .card img {
    box-sizing: border-box;
    width: 90px;
    display: block;
  }

  .card-horiz img {
    width: calc(90px * 1.2);
  }

  #title,
  #description {
    color: black;
  }

  .ft-phone {
    top: 340px;
  }

  #manifesto {
    height: 620px;
    margin-top: -100px;
  }
  
  #paragraph {
    height: 560px;
    margin-top: -100px;
  }

  .link-button {
    font-size: 20px;
    letter-spacing: -0.7px;
    line-height: 1;
    opacity: 1;
    text-decoration: underline;
  }
}

@media only screen and (min-width: 783px) and (max-width: 1440px) and (orientation: portrait) {
  .phone,
  .ft-phone {
    width: 64vw;
    height: calc(64vw * 2.164);
    border-radius: 6.4vw;
  }

  .mobile-or-tablet #hero-title,
  #footer-title {
    font-size: 13vw;
    letter-spacing: -0.95vw;
    line-height: 0.85;
    margin-top: 0;
  }

  /* body {
        background: green;
    } */
}

@media only screen and (min-width: 783px) and (-webkit-min-device-pixel-ratio: 2) {
  .mobile-or-tablet #hero-title,
  #footer-title {
    font-size: 11vw;
    letter-spacing: -0.8vw;
    line-height: 0.85;
    margin-top: 0;
  }
}

@media only screen and (min-width: 1441px) and (orientation: portrait) {
  .phone,
  .ft-phone {
    width: 64vw;
    height: calc(64vw * 2.164);
    border-radius: 6.4vw;
  }

  /* body {
        background: darkgreen;
    } */

  h1 {
    font-size: 28px;
    letter-spacing: -1px;
    line-height: 0.9;
  }

  .main {
    width: 130px;
  }

  .secondary {
    width: 150px;
  }

  h2 {
    font-size: 18px;
    letter-spacing: -0.7px;
    line-height: 0.9;
  }

}

@media only screen and (max-width: 600px) and (orientation: landscape) {
  /* body {
        background: pink;
    } */
}

@media only screen and (min-width: 600px) and (orientation: landscape) {
}

@media only screen and (min-width: 1550px) and (orientation: landscape) {
  /* body {
        background: darkred;
    } */

  .large-title {
    font-size: 11.25vw;
    letter-spacing: -0.72vw;
    line-height: 0.85;
  }

  #hero-title,
  #footer-title {
    margin-top: -5vh;
  }

  .phone,
  .ft-phone {
    width: 44vw;
    height: calc(44vw * 2.164);
    border-radius: 4.4vw;
  }

  .top-nav {
    top: 28px;
  }

  .top-left {
    transform: translateX(-50%) scale(1.25);
  }

  .top-center {
    transform: translateX(-50%) scale(1.25);
  }

  .top-right {
    transform: translateX(50%) scale(1.25);
  }

  .txt-nav,
  ul,
  li,
  a {
    font-size: 15px;
    font-variation-settings: "wght" 610, "wdth" 505;
    letter-spacing: -0.5px;
    line-height: 1;
  }

  .card img {
    width: 220px;
  }

  .card-horiz img {
    width: calc(220 * 1.2);
  }
}

/* MOBILE OR TABLET JS QUERY */

.mobile-or-tablet #phone-wrapper {
  display: none;
}

.mobile-or-tablet .row {
  height: 740px;
}

.mobile-or-tablet #manifesto {
  height: 620px;
  margin-top: -100px;
}

.mobile-or-tablet #paragraph {
  height: 560px;
  margin-top: -100px;
}

.mobile-or-tablet #feature2 {
  height: 700px;
}

.mobile-or-tablet #hero {
  height: 620px;
}

.mobile-or-tablet #team {
  height: 620px;
}

.mobile-or-tablet #footer {
  justify-content: start;
  height: 500px;
}

.mobile-or-tablet .mobile-phone {
  background-color: white;
  width: 220px;
  height: calc(220px * 2.164);
  border-radius: 22px;
  position: absolute;
  left: 50%;
  bottom: 180px; /* Adjusted to start from the bottom of the viewport */
  overflow: hidden;
  border: 2px solid #e9e9e9;
  display: block;
  transform: translate(-50%);
}

.mobile-or-tablet .mobile-phone img {
  width: 100% !important;
}

.mobile-or-tablet #first-phone {
  bottom: auto;
}

.mobile-or-tablet .large-title {
  font-size: 18vw;
  letter-spacing: -1.4vw;
  line-height: 0.85;
}

.mobile-or-tablet .text-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: absolute;
  align-items: center;
  bottom: 40px;
}


.mobile-or-tablet #hero-title,
#footer-title {
  margin-top: 24px;
}

.mobile-or-tablet .main {
  display: block;
  position: relative;
  width: 260px;
  left: auto;
  top: auto;
  transform: translate(0, 0);
}

.mobile-or-tablet h1 {
  font-size: 34px;
  letter-spacing: -1.8px;
  line-height: 0.92;
}

.mobile-or-tablet .secondary {
  padding-top: 8px;
  width: 220px;
  display: block;
  position: relative;
  right: auto;
  top: auto;
  transform: translate(0, 0);
  opacity: 0.3;
}

.mobile-or-tablet .link-button {
  font-size: 20px;
  letter-spacing: -0.7px;
  line-height: 1;
  opacity: 1;
  text-decoration: underline;
}

.mobile-or-tablet h2 {
  font-size: 20px;
  letter-spacing: -0.7px;
  line-height: 1;
}


.mobile-or-tablet .phone {
  display: none;
  visibility: hidden;
}

.mobile-or-tablet .break {
  display: contents;
}

.mobile-or-tablet .space::after {
  content: "\00a0"; /* Unicode for non-breaking space */
}

.mobile-or-tablet .top-left {
  left: 8px;
  transform: translateX(0) scale(0.8);
}

.mobile-or-tablet .top-right {
  right: 8px;
  transform: translateX(0) scale(0.8);
}

.mobile-or-tablet .top-center {
  transform: translateX(-50%) scale(1);
}

.mobile-or-tablet .bottom-center {
  display: none;
}

.mobile-or-tablet .bottom-left {
  display: none;
}

.mobile-or-tablet .bottom-right {
  display: none;
}

.mobile-or-tablet .bottom-left-mid {
  left: 12px;
  transform: translate(0);
}

.mobile-or-tablet .bottom-mid-right {
  right: 12px;
  transform: translate(0);
}

.mobile-or-tablet .nav-list li {
  margin: 0 4px;
}

.mobile-or-tablet .background-bar {
  width: 100%;
  height: 90px;
  position: absolute;
  left: 0;
  bottom: -8px;
  display: block;
  margin: 0;
  padding: 0;
  background: linear-gradient(
    to top,
    rgba(255, 255, 255, 1),
    rgba(255, 255, 255, 0)
  );
}

.mobile-or-tablet #carousel-container {
  perspective: 10000px;
  perspective-origin: center -6000px;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
}

.mobile-or-tablet #carousel {
  margin: 0 auto;
  width: 100%;
  height: 80%;
  transform-style: preserve-3d;
}

.mobile-or-tablet .card img {
  box-sizing: border-box;
  width: 90px;
  display: block;
}

.mobile-or-tablet .card-horiz img {
  width: calc(90px * 1.2);
}

.mobile-or-tablet #title,
.mobile-or-tablet #description {
  color: black;
}

.mobile-or-tablet .ft-phone {
  top: 340px;
}