@font-face {
  font-family: "Steronite";
  src: url("./assets/fonts/Steronite.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "Aristotelica";
  src: url("./assets/fonts/AristotelicaSmallCaps-Regular.ttf") format("truetype");
  font-display: swap;
}

/* ===== Global Styles ===== */

:root {
  --ink: #09111b;
  --cyan: #55e7ff;
  --card-navy: rgba(10, 38, 63, 0.96);
  --white-soft: rgba(255, 255, 255, 0.97);
}

* {
  box-sizing: border-box;
}

html {
  color-scheme: light;
}

body {
  margin: 0;
  min-height: 100vh;
  background: #eef2f7;
  color: var(--ink);
}

img {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

p,
h1,
h2,
h3 {
  margin: 0;
}

/* ===== Main Layout ===== */

.poster-shell {
  display: flex;
  justify-content: center;
  width: 100%;
}

.hero-layout {
  --float-x: 0px;
  --float-y: 0px;
  position: relative;
  width: min(100vw, 1920px);
  aspect-ratio: 1920 / 3281;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(8, 12, 22, 0.42), transparent 11%),
    linear-gradient(180deg, transparent 65%, rgba(255, 255, 255, 0.12));
}

.hero-layout::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url("/assets/images/background.png");
  opacity: 0.05;
  mix-blend-mode: multiply;
}

.hero-layout__background,
.hero-layout__shade,
.hero-layout__stars {
  position: absolute;
  inset: 0;
}

.hero-layout__background {
  z-index: -4;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-layout__shade {
  z-index: -3;
  background:
    linear-gradient(180deg, rgba(4, 8, 18, 0.56), rgba(4, 8, 18, 0.18) 14%, transparent 27%),
    radial-gradient(circle at 50% 11%, rgba(10, 15, 28, 0.24), transparent 26%),
    radial-gradient(circle at -3% 56%, rgba(255, 255, 255, 0.72), transparent 21%),
    radial-gradient(circle at 103% 74%, rgba(255, 255, 255, 0.68), transparent 21%),
    linear-gradient(180deg, transparent 78%, rgba(255, 255, 255, 0.08));
}

.hero-layout__stars {
  z-index: -2;
  opacity: 0.46;
  background-image:
    radial-gradient(circle at 13% 20%, rgba(255, 255, 255, 0.92) 0 1px, transparent 1.4px),
    radial-gradient(circle at 25% 12%, rgba(255, 255, 255, 0.72) 0 1.8px, transparent 2.2px),
    radial-gradient(circle at 53% 24%, rgba(230, 238, 255, 0.78) 0 1.6px, transparent 2px),
    radial-gradient(circle at 85% 17%, rgba(255, 255, 255, 0.82) 0 1.2px, transparent 1.6px),
    radial-gradient(circle at 78% 74%, rgba(255, 255, 255, 0.9) 0 2px, transparent 2.4px),
    radial-gradient(circle at 91% 86%, rgba(222, 232, 255, 0.86) 0 1.8px, transparent 2.2px);
}

.logo-block,
.intro-block,
.icon-group,
.top-right-text,
.left-title-block,
.left-mini-image-card,
.center-story-card,
.upper-right-title-block,
.upper-right-copy-block,
.mid-right-title-block,
.mid-left-copy-block,
.lower-left-copy-block,
.robot-small,
.robot-large,
.large-robot-copy-card,
.bottom-card-small,
.bottom-card-large,
.footer-title-block {
  position: absolute;
}

/* ===== Shared Typography ===== */

.intro-block__text,
.top-right-text__text,
.floating-text-block__text,
.card-text,
.large-robot-copy-card__text {
  font-family: "Aristotelica", "Segoe UI", sans-serif;
  font-size: clamp(0.48rem, 0.56vw, 0.8rem);
  line-height: 1.58;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.floating-text-block {
  z-index: 7;
}

.floating-text-block--light {
  color: var(--white-soft);
  text-shadow: 0 0.65rem 1.1rem rgba(4, 11, 21, 0.46);
  top: 22.05%;
}

.floating-text-block__title,
.floating-text-block__subtitle,
.card-title,
.card-subtitle,
.bottom-card-small__label,
.logo-block__title,
.logo-block__subtitle {
  font-family: "Steronite", "Trebuchet MS", sans-serif;
  letter-spacing: 0.04em;
  width: 12.4%;
}

.floating-text-block__title,
.card-title {
  font-size: clamp(1.55rem, 2.5vw, 3rem);
  line-height: 0.88;
  text-transform: uppercase;
  width: 12.4%;
}

.floating-text-block__subtitle,
.card-subtitle {
  margin-bottom: 0.45rem;
  font-size: clamp(0.95rem, 1.28vw, 1.55rem);
  line-height: 0.95;
  width: 11.4%;
}

/* ===== Floating Cards ===== */

.floating-card {
  z-index: 6;
  transition:
    transform 220ms ease,
    box-shadow 220ms ease;
}

.floating-card:hover,
.floating-card:focus-within {
  transform: translateY(-0.22rem);
}

.floating-card__frame {
  display: block;
  width: 100%;
  height: auto;
}

.card-title {
  font-size: clamp(1.2rem, 1.72vw, 1.95rem);
  line-height: 0.92;
  text-transform: uppercase;
}

.card-subtitle {
  margin-bottom: 0.42rem;
  font-size: clamp(0.84rem, 1.08vw, 1.2rem);
}

.card-text,
.large-robot-copy-card__text {
  font-size: clamp(0.48rem, 0.56vw, 0.78rem);
}

/* ===== Top Left Area ===== */

.logo-block {
  top: 1.72%;
  left: 21.8%;
  z-index: 10;
  display: inline-flex;
  flex-direction: column;
  gap: 0.18rem;
  color: #ffffff;
  text-shadow: 0 0.4rem 1.2rem rgba(4, 10, 20, 0.28);
}

.logo-block__title {
  font-size: clamp(1.9rem, 3vw, 3.45rem);
  line-height: 0.95;
  letter-spacing: 0.08em;
}

.logo-block__subtitle {
  font-size: clamp(1.35rem, 1.85vw, 2.15rem);
  line-height: 0.95;
}

.logo-block__accent {
  color: var(--cyan);
  text-shadow: 0 0 1rem rgba(85, 231, 255, 0.65);
}

.intro-block {
  top: 7%;
  left: 21.9%;
  width: 19.6%;
  z-index: 7;
  color: var(--white-soft);
  text-shadow: 0 0.65rem 1.1rem rgba(4, 11, 21, 0.46);
}

/* ===== Top Right Area ===== */

.icon-group {
  top: 1.72%;
  right: 21.9%;
  z-index: 10;
  display: flex;
  gap: clamp(0.6rem, 1vw, 1rem);
}

.icon-group__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(2.3rem, 4vw, 3.7rem);
  aspect-ratio: 1;
  border: 1.5px solid rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.02);
  color: #ffffff;
  box-shadow: 0 0.8rem 1.6rem rgba(7, 13, 25, 0.12);
  transition:
    transform 220ms ease,
    background-color 220ms ease,
    box-shadow 220ms ease;
}

.icon-group__button:hover,
.icon-group__button:focus-visible {
  transform: translateY(-0.2rem);
  background: rgba(85, 231, 255, 0.14);
  box-shadow: 0 1.1rem 1.9rem rgba(7, 13, 25, 0.2);
  outline: none;
}

.icon-group__icon {
  width: 46%;
  filter: brightness(0) invert(1);
}

.top-right-text {
  top: 7.85%;
  left: 61.4%;
  width: 17.6%;
  z-index: 7;
  color: var(--white-soft);
  text-align: center;
  text-shadow: 0 0.65rem 1.1rem rgba(4, 11, 21, 0.46);
}

/* ===== Floating Text Blocks ===== */

.left-title-block {
  top: 22.05%;
  left: 22.1%;
  width: 12.4%;
}

.upper-right-title-block {
  top: 19.15%;
  left: 59.7%;
  width: 16.7%;
}

.upper-right-copy-block {
  top: 25.85%;
  left: 64.7%;
  width: 13.8%;
  text-align: center;
}

.mid-right-title-block {
  top: 42.15%;
  left: 67.2%;
  width: 12.6%;
  text-align: center;
}

.mid-left-copy-block {
  top: 61.4%;
  left: 21.9%;
  width: 11.4%;
}

.lower-left-copy-block {
  top: 78.95%;
  left: 21.9%;
  width: 13.9%;
}

.footer-title-block {
  top: 87.2%;
  left: 67%;
  width: 14.2%;
}

/* ===== Left Card Stack ===== */

.left-mini-image-card {
  top: 30%;
  left: 23.15%;
  width: auto;
  z-index: -1;
}

.left-mini-image-card__content {
  position: absolute;
  inset: 34.5% 13% 7% 13%;
  color: var(--white-soft);
}

/* ===== Center Feature Card ===== */

.center-story-card {
  top: 22.7%;
  left: 36.1%;
  width: 22.4%;
  z-index: -1;
}

.center-story-card__side-copy {
  position: absolute;
  top: 37.4%;
  left: 2.4%;
  width: 29.5%;
  color: var(--white-soft);
}

.center-story-card__main-copy {
  position: absolute;
  top: 49%;
  left: 37.5%;
  width: 57%;
  color: var(--ink);
  text-align: center;
}

.center-story-card__text {
  margin-top: 0.72rem;
  text-align: left;
}

/* ===== Robots ===== */

.robot-small,
.robot-large {
  z-index: 5;
  pointer-events: none;
  transition: transform 260ms ease;
}

.robot-small__image,
.robot-large__image {
  width: 100%;
  filter: drop-shadow(0 1.6rem 2.8rem rgba(7, 12, 22, 0.16));
}

.robot-small__image {
  animation: drift 7.5s ease-in-out infinite;
}

.robot-large__image {
  animation: drift 9s ease-in-out infinite;
}

.robot-small {
  top: 30.3%;
  left: 22.9%;
  width: 25.4%;
  transform: translate3d(calc(var(--float-x) * 0.18), calc(var(--float-y) * 0.16), 0);
}

.robot-large {
  top: 45.2%;
  left: 39%;
  width: 42.6%;
  transform: translate3d(calc(var(--float-x) * -0.14), calc(var(--float-y) * -0.1), 0);
}

.large-robot-copy-card {
  position: absolute;
  top: 66.1%;
  left: 59.7%;
  z-index: 8;
  width: 10.9%;
  aspect-ratio: 217 / 426;
  padding: 1rem 0.92rem 1.08rem;
  background-color: rgba(10, 38, 63, 0.96);
  background-image: url("./assets/images/box3.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center;
  color: var(--white-soft);
  box-shadow: 0 1.2rem 2rem rgba(6, 18, 31, 0.18);
  overflow: hidden;
}

.large-robot-copy-card__text {
  display: block;
  color: rgba(255, 255, 255, 0.97);
  font-family: "Aristotelica", "Segoe UI", sans-serif;
  font-size: clamp(0.46rem, 0.54vw, 0.72rem);
  line-height: 1.55;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* ===== Bottom Section ===== */

.bottom-card-small {
  top: 84.85%;
  left: 30.7%;
  width: 9.45%;
}

.bottom-card-small__label {
  position: absolute;
  left: 23%;
  bottom: 18%;
  color: var(--white-soft);
  font-size: clamp(0.82rem, 1.14vw, 1.25rem);
}

.bottom-card-large {
  top: 88.25%;
  left: 41.4%;
  width: 17.35%;
}

.bottom-card-large__header {
  position: absolute;
  top: 17.5%;
  left: 10.5%;
  width: 68%;
  color: var(--white-soft);
}

.bottom-card-large__body {
  position: absolute;
  top: 64.2%;
  left: 7.3%;
  width: 76%;
  color: var(--ink);
}

/* ===== Motion ===== */

@keyframes drift {
  0%,
  100% {
    transform: translateY(0rem);
  }

  50% {
    transform: translateY(-0.65rem);
  }
}

/* ===== Responsive ===== */

@media (max-width: 900px) {
  .intro-block__text,
  .top-right-text__text,
  .floating-text-block__text,
  .card-text,
  .large-robot-copy-card__text {
    font-size: clamp(0.42rem, 0.72vw, 0.68rem);
    letter-spacing: 0.15em;
  }

  .floating-text-block__title,
  .card-title {
    font-size: clamp(1rem, 1.8vw, 1.7rem);
  }

  .floating-text-block__subtitle,
  .card-subtitle {
    font-size: clamp(0.72rem, 1vw, 1rem);
  }

  .logo-block__title {
    font-size: clamp(1.5rem, 2.6vw, 2.6rem);
  }

  .logo-block__subtitle {
    font-size: clamp(1rem, 1.55vw, 1.4rem);
  }
}

@media (max-width: 620px) {
  .logo-block {
    top: 1.2%;
    left: 10%;
  }

  .intro-block {
    left: 10%;
    width: 24%;
  }

  .icon-group {
    right: 10%;
    gap: 0.38rem;
  }

  .top-right-text {
    left: 61%;
    width: 20%;
  }

  .intro-block__text,
  .top-right-text__text,
  .floating-text-block__text,
  .card-text,
  .large-robot-copy-card__text {
    font-size: clamp(0.26rem, 0.48vw, 0.46rem);
    letter-spacing: 0.12em;
  }

  .floating-text-block__title,
  .card-title {
    font-size: clamp(0.72rem, 1.3vw, 1rem);
  }

  .floating-text-block__subtitle,
  .card-subtitle {
    margin-bottom: 0.2rem;
    font-size: clamp(0.5rem, 0.72vw, 0.7rem);
  }

  .bottom-card-small__label {
    font-size: clamp(0.56rem, 0.8vw, 0.82rem);
  }

  .icon-group__button,
  .floating-card,
  .robot-small,
  .robot-large {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .icon-group__button,
  .floating-card,
  .robot-small,
  .robot-large {
    transition: none;
  }

  .robot-small__image,
  .robot-large__image {
    animation: none;
  }
}