@import url('./video-sections.css?v=27');

*::-webkit-scrollbar {
  display: none;
}

* {
  scrollbar-width: none;
}

.observe {
  --lazyOffset: 30rem;
}

.observe.will-show,
.observe .will-show {
  opacity: 0;
  translate: 0% var(--lazyOffset);
  transition: opacity 0.5s cubic-bezier(0, 0, 0.13, 0.97),
    translate 0.5s cubic-bezier(0, 0, 0.13, 0.97);
}

@-moz-document url-prefix() {
  @media (orientation: portrait) {
    .observe.will-show:not(.visible),
    .observe .will-show:not(.visible) {
      min-height: var(--lazyOffset);
    }
  }
}

.observe.will-show.visible,
.observe.visible .will-show {
  translate: 0% 0%;
  opacity: 1;
  transition-delay: 0.15s;
}

@media (orientation: portrait) {
  .observe.mobile-will-show,
  .observe .mobile-will-show {
    opacity: 0;
    translate: 0% var(--lazyOffset);
    transition: opacity 0.5s cubic-bezier(0, 0, 0.13, 0.97),
      translate 0.5s cubic-bezier(0, 0, 0.13, 0.97);
  }

  .observe.mobile-will-show.visible,
  .observe.visible .mobile-will-show {
    translate: 0% 0%;
    opacity: 1;
    transition-delay: 0.15s;
  }
}

section#mobile-app {
  --offset: 3vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-block: calc(var(--headerHeight) + var(--offset)) 538rem;
  position: relative;
  z-index: 2;
  isolation: isolate;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  background-image: image-set(
    url('/assets/epn_cards/img/app-bg-mobile.jpg?v=1') 1x,
    url('/assets/epn_cards/img/app-bg-mobile@2x.jpg?v=1') 2x
  );
  overflow: hidden;
}

@media (orientation: landscape) {
  section#mobile-app {
    --offset: 12.8vh;
    padding-block: var(--offset);
    background-attachment: unset;
    background-image: image-set(
      url('/assets/epn_cards/img/app-bg.jpg') 1x,
      url('/assets/epn_cards/img/app-bg@2x.jpg') 2x
    );
  }
}

section#mobile-app .inner {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

section#mobile-app .content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 55rem;
}

@media (orientation: landscape) {
  section#mobile-app .content {
    flex-direction: row;
    gap: 140rem;
  }
}

section#mobile-app .content .left .info {
  max-width: 650rem;
}

@media (orientation: landscape) {
  section#mobile-app .content .left .info {
    padding-block-start: 70rem;
  }
}

section#mobile-app .content .left .info .edescription {
  max-width: 540rem;
  text-wrap: unset;
  margin-block-end: 32rem;
}

@media (orientation: landscape) {
  section#mobile-app .content .left .info .etitle {
    margin-block-end: 20rem;
  }

  section#mobile-app .content .left .info .edescription {
    margin-block-end: 32rem;
  }
}

section#mobile-app .content .left .info .buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 12rem;
}

@media (orientation: landscape) {
  section#mobile-app .content .left .info .buttons {
    justify-content: flex-start;
  }

  section#mobile-app .content .left .info .buttons .btn {
    padding-inline: 10rem;
    gap: 8rem;
  }
}

section#mobile-app .content .left .info .buttons .btn.apple .icon {
  width: 20rem;
}

section#mobile-app .content .left .info .buttons .btn.google .icon {
  width: 20rem;
}

section#mobile-app .content .left .info .buttons .btn.gallery .icon {
  width: 18rem;
}

section#end {
  background: #1a1c1f;
  overflow: hidden;
  isolation: isolate;
  position: relative;
}

section#end .mobile-grad,
section#end .grad {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 66%;
  translate: -50% -50%;
  width: 1280rem;
  z-index: -1;
  mix-blend-mode: hard-light;
  pointer-events: none;
  display: none;
}

@media (orientation: landscape) {
  section#end .grad {
    display: block;
  }
}

@media (orientation: portrait) {
  section#end .mobile-grad {
    display: block;
    width: 100%;
  }
}

section#end::before {
  content: '';
  position: absolute;
  z-index: -1;
  height: 100%;
  width: 100%;
  background: linear-gradient(
    to bottom,
    hsl(from #66391f h s l / 5%) 0%,
    hsl(from #66391f h s l / 100%) 70%,
    hsl(from #66391f h s l / 1%) 100%
  );
  background-position: 50% 50%;
  pointer-events: none;
}

@media (orientation: landscape) {
  section#end::before {
    inset-inline-start: 50%;
    inset-block-start: 50%;
    translate: -50% -50%;
    width: 165%;
    height: 125%;
    border-radius: 50%;
    aspect-ratio: 1 / 0.7041666666666667;
    background: radial-gradient(
      60% 100% at center center,
      hsl(from #74503a h s l / 80%) 0%,
      rgba(0, 0, 0, 0) 50%,
      rgba(0, 0, 0, 0) 100%
    );
  }
}

section#support {
  padding-block: calc(var(--headerHeight) + 8vh) 16vh;
}

@media (orientation: landscape) {
  section#support {
    padding-block: 80rem 120rem;
    margin-block-start: -1rem;
  }
}

section#support .head .info {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

section#support .head .info .edescription {
  max-width: 425rem;
  text-align: center;
  text-wrap: pretty;
}

@media (orientation: portrait) {
  section#support .head .info .etitle {
    margin-block-end: 14rem;
  }

  section#support .head .info .edescription {
    font-size: 16rem;
    margin-block-end: 16rem;
  }
}

section#support .content {
  margin-block-start: 50rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  user-select: none;
  position: relative;
  z-index: 1;
  font-size: 151rem;
  font-weight: 700;
  line-height: 1;
}

@media (orientation: landscape) {
  section#support .content {
    font-size: 369rem;
  }
}

section#support .content .number {
  position: relative;
  z-index: 2;
  display: grid;
  align-items: center;
  isolation: isolate;
}

section#support .content .number::before,
section#support .content .number::after {
  content: attr(data-text);
  font: inherit;
  grid-area: 1/1;
  background: linear-gradient(180deg, #f9f2e8 0%, #fafbfb 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  position: relative;
}

section#support .content .number::before {
  z-index: -1;
  filter: blur(18rem);
}

@media (orientation: landscape) {
  section#support .head .info .btn {
    padding-inline: 10rem;
  }

  section#support .content .number::before {
    filter: blur(28rem);
  }
}

section#support .content .number::after {
  z-index: 2;
}

section#support .content .number .slash {
  display: grid;
  align-items: center;
  grid-area: 1 / 2;
  justify-items: center;
  margin-inline: -27rem -7rem;
  margin-block: 0 -41rem;
}

@media (orientation: landscape) {
  section#support .content .number .slash {
    margin-inline: -61rem -21rem;
    margin-block: 0 -86rem;
  }
}

section#support .content .number .slash .slash-text {
  grid-area: 1 / 1;
}

section#support .content .number .slash .slash-card {
  width: 94rem;
  display: block;
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
}

@media (orientation: landscape) {
  section#support .content .number .slash .slash-card {
    width: 228rem;
  }
}

.eglowText {
  text-shadow: 0 -0.07ex 12rem hsl(from #d36f51 h s 70% / 80%),
    0 0.1ex 14rem hsl(from #8489bd h s l / 50%);
}

.eglow {
  box-shadow: 0 -3rem 16rem -2rem hsl(from #d36f51 h s 70% / 80%),
    0 3rem 12rem -3rem hsl(from #8489bd h s l / 80%);
}