/* R174_MAIN_CINEMATIC_CSS_V1 */

html.r174-main-ready,
html.r174-main-ready body {
  max-width: 100%;
  overflow-x: hidden;
}

html.r174-main-ready body {
  overscroll-behavior-x: none;
}

.r174-main-hero {
  isolation: isolate;
}

.r174-main-hero .hero-visual {
  display: grid !important;
  position: relative !important;
  min-height: 610px !important;
  overflow: hidden !important;
  border: 1px solid rgba(231, 190, 98, 0.2) !important;
  border-radius: 42px !important;
  background:
    radial-gradient(circle at 50% 43%, rgba(52, 215, 203, 0.13), transparent 25%),
    radial-gradient(circle at 50% 30%, rgba(231, 190, 98, 0.12), transparent 43%),
    linear-gradient(155deg, rgba(8, 21, 36, 0.99), rgba(3, 8, 15, 0.99)) !important;
  box-shadow:
    0 34px 100px rgba(0, 0, 0, 0.43),
    inset 0 1px 0 rgba(255, 255, 255, 0.035) !important;
  contain: layout paint;
}

.r174-main-hero .hero-visual::before,
.r174-main-hero .hero-visual::after {
  content: none !important;
  display: none !important;
}

.r174-scene {
  --r174-gold: #e7be62;
  --r174-gold-bright: #ffe5a1;
  --r174-teal: #42d8cb;
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  border-radius: inherit;
  perspective: 1100px;
}

.r174-scene::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.28;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.022) 1px, transparent 1px);
  background-size: 36px 36px;
  -webkit-mask-image: linear-gradient(to bottom, #000 5%, transparent 90%);
  mask-image: linear-gradient(to bottom, #000 5%, transparent 90%);
}

.r174-network {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  opacity: 0.88;
}

.r174-aurora {
  position: absolute;
  z-index: 1;
  inset: 12% 7% 16%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, rgba(66, 216, 203, 0.16), transparent 43%),
    conic-gradient(
      from 170deg,
      transparent,
      rgba(231, 190, 98, 0.08),
      transparent 34%,
      rgba(66, 216, 203, 0.08),
      transparent 67%
    );
  filter: blur(17px);
  animation: r174Aurora 12s linear infinite;
}

.r174-gate-stage {
  position: absolute;
  inset: 7% 8% 15%;
  z-index: 3;
  display: grid;
  place-items: center;
  transform-style: preserve-3d;
}

.r174-gate {
  position: relative;
  width: min(350px, 70%);
  aspect-ratio: 0.76;
  display: grid;
  place-items: center;
  border: 4px solid rgba(231, 190, 98, 0.78);
  border-bottom-width: 2px;
  border-radius: 190px 190px 28px 28px;
  background:
    radial-gradient(circle at 50% 47%, rgba(66, 216, 203, 0.12), transparent 42%),
    linear-gradient(180deg, rgba(231, 190, 98, 0.04), transparent 70%);
  box-shadow:
    0 0 0 1px rgba(255, 226, 157, 0.16),
    0 0 42px rgba(231, 190, 98, 0.22),
    0 0 100px rgba(66, 216, 203, 0.09),
    inset 0 0 40px rgba(231, 190, 98, 0.09);
  animation: r174GateBreathe 6.8s ease-in-out infinite;
}

.r174-gate::before,
.r174-gate::after {
  content: "";
  position: absolute;
  pointer-events: none;
  border-bottom-width: 1px;
  border-style: solid;
  border-radius: inherit;
}

.r174-gate::before {
  inset: 15px;
  border-color: rgba(66, 216, 203, 0.39);
  box-shadow: inset 0 0 28px rgba(66, 216, 203, 0.09);
}

.r174-gate::after {
  inset: 34px;
  border-color: rgba(231, 190, 98, 0.24);
}

.r174-runes {
  position: absolute;
  inset: 10px;
  border-radius: inherit;
  opacity: 0.36;
  background:
    repeating-conic-gradient(
      from 0deg,
      rgba(255, 228, 163, 0.38) 0 0.7deg,
      transparent 0.7deg 6deg
    );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  padding: 7px;
  animation: r174Runes 24s linear infinite;
}

.r174-logo-stage {
  position: relative;
  z-index: 4;
  width: min(240px, 62%);
  aspect-ratio: 0.98;
  display: grid;
  place-items: center;
  filter: drop-shadow(0 28px 30px rgba(0, 0, 0, 0.48));
  animation:
    r174LogoEntrance 1.9s cubic-bezier(0.16, 0.82, 0.23, 1) both,
    r174LogoFloat 7s ease-in-out 2s infinite;
}

.r174-logo-stage::before {
  content: "";
  position: absolute;
  inset: 10%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(231, 190, 98, 0.28), rgba(66, 216, 203, 0.1) 43%, transparent 72%);
  filter: blur(14px);
  animation: r174LogoGlow 4.8s ease-in-out infinite;
}

.r174-logo-stage img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
}

.r174-floor {
  position: absolute;
  z-index: 2;
  left: 12%;
  right: 12%;
  bottom: 5%;
  height: 25%;
  transform: perspective(500px) rotateX(67deg);
  transform-origin: center bottom;
  border-radius: 50%;
  background:
    repeating-radial-gradient(
      ellipse at center,
      rgba(231, 190, 98, 0.22) 0 1px,
      transparent 2px 25px
    ),
    radial-gradient(ellipse at center, rgba(231, 190, 98, 0.16), transparent 68%);
  opacity: 0.58;
  filter: blur(0.25px);
  animation: r174Floor 6s ease-in-out infinite;
}

.r174-light-beam {
  position: absolute;
  z-index: 2;
  top: 1%;
  left: 50%;
  width: 48%;
  height: 80%;
  transform: translateX(-50%);
  clip-path: polygon(42% 0, 58% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(
      to bottom,
      rgba(255, 230, 170, 0.16),
      rgba(66, 216, 203, 0.045) 42%,
      transparent
    );
  filter: blur(9px);
  animation: r174Beam 5.6s ease-in-out infinite;
}

.r174-scene-label {
  position: absolute;
  z-index: 6;
  left: 50%;
  bottom: 23px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 36px);
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 13px;
  border: 1px solid rgba(231, 190, 98, 0.22);
  border-radius: 999px;
  color: #f4d998;
  background: rgba(5, 12, 21, 0.67);
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(10px);
  font-size: 0.68rem;
  font-weight: 800;
  white-space: nowrap;
}

.r174-scene-label::before {
  content: "";
  width: 6px;
  height: 6px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--r174-teal);
  box-shadow: 0 0 12px var(--r174-teal);
  animation: r174Dot 2.6s ease-in-out infinite;
}

.r174-main-hero .hero-copy .eyebrow,
.r174-main-hero .hero-copy h1,
.r174-main-hero .hero-copy > p,
.r174-main-hero .hero-copy .hero-cta,
.r174-main-hero .hero-copy .proof {
  opacity: 0;
  transform: translateY(16px);
  animation: r174CopyReveal 0.78s cubic-bezier(0.2, 0.75, 0.22, 1) forwards;
}

.r174-main-hero .hero-copy .eyebrow { animation-delay: 0.18s; }
.r174-main-hero .hero-copy h1 { animation-delay: 0.34s; }
.r174-main-hero .hero-copy > p { animation-delay: 0.5s; }
.r174-main-hero .hero-copy .hero-cta { animation-delay: 0.66s; }
.r174-main-hero .hero-copy .proof { animation-delay: 0.82s; }

.r174-main-hero .hero-copy h1 span {
  background:
    linear-gradient(100deg, #c58b31, #ffe6a8, #62ddd3, #e7be62);
  background-size: 240% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: r174TitleShimmer 7.5s ease-in-out infinite;
}

html.r174-main-ready .services {
  scroll-behavior: smooth;
}

@media (max-width: 760px) {
  .r174-main-hero {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    min-height: auto !important;
    padding-top: 24px !important;
  }

  .r174-main-hero .hero-visual {
    order: -1;
    min-height: 560px !important;
    width: 100%;
    border-radius: 30px !important;
    margin: 0 auto 4px;
  }

  .r174-gate-stage {
    inset: 5% 5% 13%;
  }

  .r174-gate {
    width: min(300px, 76%);
  }

  .r174-logo-stage {
    width: min(210px, 60%);
  }

  .r174-scene-label {
    bottom: 18px;
    font-size: 0.64rem;
  }

  .r174-main-hero .hero-copy {
    min-width: 0;
    text-align: center;
  }

  .r174-main-hero .hero-copy h1 {
    margin-inline: auto;
  }

  .r174-main-hero .hero-copy > p {
    margin-inline: auto;
  }

  .r174-main-hero .hero-cta {
    justify-content: center;
    flex-wrap: wrap;
  }

  .r174-main-hero .proof {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  html.r174-main-ready .services {
    display: grid !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(252px, 82vw) !important;
    grid-template-columns: none !important;
    gap: 12px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 18px;
    padding: 5px 18px 16px !important;
    margin-inline: -18px !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }

  html.r174-main-ready .services::-webkit-scrollbar {
    display: none;
  }

  html.r174-main-ready .services > * {
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    min-width: 0 !important;
    min-height: 265px;
  }

  html.r174-main-ready .service {
    margin: 0 !important;
    transform: none !important;
  }
}

@media (max-width: 430px) {
  .r174-main-hero .hero-visual {
    min-height: 515px !important;
    border-radius: 26px !important;
  }

  .r174-gate {
    width: min(272px, 79%);
  }

  .r174-logo-stage {
    width: min(188px, 61%);
  }

  .r174-main-hero .proof {
    gap: 7px !important;
  }

  .r174-main-hero .proof div {
    padding: 10px 7px !important;
  }

  .r174-scene-label {
    max-width: calc(100% - 26px);
    padding-inline: 10px;
    font-size: 0.59rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .r174-scene *,
  .r174-main-hero .hero-copy *,
  .r174-main-hero .hero-copy .eyebrow,
  .r174-main-hero .hero-copy h1,
  .r174-main-hero .hero-copy > p,
  .r174-main-hero .hero-copy .hero-cta,
  .r174-main-hero .hero-copy .proof {
    animation: none !important;
    transition: none !important;
  }

  .r174-main-hero .hero-copy .eyebrow,
  .r174-main-hero .hero-copy h1,
  .r174-main-hero .hero-copy > p,
  .r174-main-hero .hero-copy .hero-cta,
  .r174-main-hero .hero-copy .proof {
    opacity: 1 !important;
    transform: none !important;
  }

  .r174-network {
    opacity: 0.52;
  }

  html.r174-main-ready .services {
    scroll-behavior: auto !important;
  }
}

@keyframes r174LogoEntrance {
  0% {
    opacity: 0;
    transform: translate3d(0, 34px, -100px) scale(0.76);
    filter: blur(10px);
  }
  62% {
    opacity: 1;
    transform: translate3d(0, -4px, 10px) scale(1.035);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
    filter: blur(0);
  }
}

@keyframes r174LogoFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-0.3deg); }
  50% { transform: translate3d(0, -10px, 18px) rotate(0.5deg); }
}

@keyframes r174LogoGlow {
  0%, 100% { opacity: 0.48; transform: scale(0.94); }
  50% { opacity: 0.9; transform: scale(1.12); }
}

@keyframes r174GateBreathe {
  0%, 100% {
    transform: translateZ(0) scale(0.985);
    box-shadow:
      0 0 0 1px rgba(255, 226, 157, 0.13),
      0 0 34px rgba(231, 190, 98, 0.17),
      0 0 80px rgba(66, 216, 203, 0.07),
      inset 0 0 34px rgba(231, 190, 98, 0.07);
  }
  50% {
    transform: translateZ(25px) scale(1.015);
    box-shadow:
      0 0 0 1px rgba(255, 226, 157, 0.24),
      0 0 58px rgba(231, 190, 98, 0.3),
      0 0 115px rgba(66, 216, 203, 0.13),
      inset 0 0 52px rgba(231, 190, 98, 0.12);
  }
}

@keyframes r174Runes {
  to { transform: rotate(360deg); }
}

@keyframes r174Aurora {
  to { transform: rotate(360deg) scale(1.04); }
}

@keyframes r174Floor {
  0%, 100% { opacity: 0.43; transform: perspective(500px) rotateX(67deg) scale(0.95); }
  50% { opacity: 0.68; transform: perspective(500px) rotateX(67deg) scale(1.04); }
}

@keyframes r174Beam {
  0%, 100% { opacity: 0.28; transform: translateX(-50%) scaleX(0.86); }
  50% { opacity: 0.62; transform: translateX(-50%) scaleX(1.08); }
}

@keyframes r174Dot {
  50% { opacity: 0.45; transform: scale(1.8); }
}

@keyframes r174CopyReveal {
  to { opacity: 1; transform: translateY(0); }
}

@keyframes r174TitleShimmer {
  0%, 100% { background-position: 0% center; }
  48%, 72% { background-position: 100% center; }
}