MineGeo/app/cinematic-intro.css

.first-visit-intro {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  color: #f5f0da;
  background: radial-gradient(
    ellipse at 50% 58%,
    #264c38,
    #0a1914 48%,
    #050c09 100%
  );
}
.first-visit-intro[open] {
  display: grid;
  place-items: center;
  animation: intro-reveal-site 0.55s 4.2s both;
}
.first-visit-intro::backdrop {
  background: #050c09;
  animation: intro-reveal-site 0.55s 4.2s both;
}
/* A modal lives above the custom cursor overlay, so restore a native cursor. */
html.has-site-cursor dialog.first-visit-intro,
html.has-site-cursor dialog.first-visit-intro * {
  cursor: auto !important;
}
html.has-site-cursor dialog.first-visit-intro button {
  cursor: pointer !important;
}
.intro-landscape {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.intro-horizon {
  position: absolute;
  inset: 45% -40% -65%;
  background:
    repeating-linear-gradient(90deg, #b6d99210 0 1px, transparent 1px 90px),
    repeating-linear-gradient(0deg, #b6d99210 0 1px, transparent 1px 90px);
  transform: perspective(450px) rotateX(56deg);
  mask-image: linear-gradient(transparent, #000 28%);
}
.intro-terrain {
  position: absolute;
  inset: 10% -5%;
  transform: rotate(-12deg);
}
.intro-terrain i {
  position: absolute;
  width: 90px;
  height: 90px;
  background: #274b35;
  border: 1px solid #74935e40;
  box-shadow:
    18px 18px 0 #112d22,
    19px 19px 0 #74935e40;
  transform: rotateX(52deg) rotateZ(45deg);
  animation: intro-terrain-rise 4.75s both;
}
.intro-terrain i:nth-child(3n) {
  width: 140px;
  height: 140px;
  background: #33573c;
  animation-delay: 0.15s;
}
.intro-terrain i:nth-child(5n) {
  width: 55px;
  height: 55px;
  background: #51714a;
  animation-delay: 0.3s;
}
.intro-terrain i:nth-child(1) {
  left: 8%;
  top: 14%;
}
.intro-terrain i:nth-child(2) {
  left: 20%;
  top: 67%;
}
.intro-terrain i:nth-child(3) {
  left: 77%;
  top: 65%;
}
.intro-terrain i:nth-child(4) {
  left: 89%;
  top: 14%;
}
.intro-terrain i:nth-child(5) {
  left: 63%;
  top: 15%;
}
.intro-terrain i:nth-child(6) {
  left: 0;
  top: 75%;
}
.intro-terrain i:nth-child(7) {
  left: 31%;
  top: 82%;
}
.intro-terrain i:nth-child(8) {
  left: 70%;
  top: 86%;
}
.intro-terrain i:nth-child(9) {
  left: 93%;
  top: 60%;
}
.intro-terrain i:nth-child(10) {
  left: 27%;
  top: 13%;
}
.intro-terrain i:nth-child(11) {
  left: 4%;
  top: 45%;
}
.intro-terrain i:nth-child(12) {
  left: 43%;
  top: -15%;
}
.intro-terrain i:nth-child(13) {
  left: 56%;
  top: 95%;
}
.intro-terrain i:nth-child(14) {
  left: 85%;
  top: 43%;
}
.intro-terrain i:nth-child(15) {
  left: 16%;
  top: 40%;
}
.intro-compass {
  position: absolute;
  left: 50%;
  top: 38%;
  width: 230px;
  height: 230px;
  transform: translate(-50%, -50%);
  color: #e9c67d;
  animation: intro-compass-arrive 3.8s both;
}
.intro-compass > span {
  position: absolute;
  inset: -18px;
  border: 1px solid #e9c67d60;
  border-radius: 50%;
}
.intro-compass > span:nth-child(2) {
  inset: -40px;
  border-style: dashed;
  opacity: 0.45;
  animation: intro-ring-turn 15s linear infinite;
}
.intro-compass > svg:first-of-type {
  width: 100%;
  height: 100%;
  opacity: 0.35;
}
.intro-compass .intro-pin {
  position: absolute;
  inset: 65px;
  width: 100px;
  height: 100px;
  filter: drop-shadow(0 0 24px #cdb57766);
}
.intro-coordinate {
  position: absolute;
  top: 44%;
  color: #e9c67d60;
  font: 11px monospace;
  letter-spacing: 3px;
}
.intro-coordinate-left {
  left: 14%;
}
.intro-coordinate-right {
  right: 14%;
}
.intro-title {
  position: relative;
  text-align: center;
  padding: 220px 24px 0;
  animation: intro-title-sequence 4.4s both;
}
.intro-title .eyebrow {
  color: #e9c67d;
  letter-spacing: 5px;
  font-size: 10px;
}
.intro-title h2 {
  font:
    clamp(50px, 9vw, 100px) / 1.2 MineGeoPixel,
    monospace;
  letter-spacing: -4px;
  margin: 0 0 12px;
  text-shadow:
    0 5px #11291c,
    0 0 45px #9ac57725;
}
.intro-title > p:last-child {
  color: #c6d4c5;
  font-size: clamp(13px, 2vw, 18px);
  letter-spacing: 2px;
}
.intro-skip.button {
  position: absolute;
  bottom: 30px;
  right: 32px;
  border: 1px solid #c7d5ba50;
  background: #0d211bd9;
  color: #e6eddd;
  gap: 20px;
}
.intro-skip span {
  color: #e9c67d;
}
.site-trailer {
  padding-top: 28px;
}
.site-trailer .eyebrow {
  display: flex;
  align-items: center;
  gap: 9px;
}
.trailer-duration {
  color: var(--muted);
  font: 12px monospace;
  white-space: nowrap;
}
.site-trailer-player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #08130e;
  border: 1px solid var(--line);
  border-radius: 15px;
  object-fit: contain;
}
.trailer-caption {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 30px;
  padding-top: 18px;
}
.trailer-caption p {
  max-width: 710px;
  margin: 0;
  color: var(--muted);
  font-size: 13px;
}
.trailer-caption .text-link {
  white-space: nowrap;
  font-size: 12px;
}
@keyframes intro-terrain-rise {
  0% {
    opacity: 0;
    translate: 0 95px;
  }
  25%,
  70% {
    opacity: 0.8;
  }
  100% {
    opacity: 0.15;
    translate: 0 -30px;
  }
}
@keyframes intro-compass-arrive {
  0% {
    opacity: 0;
    scale: 0.5;
    rotate: -32deg;
  }
  30%,
  80% {
    opacity: 1;
    scale: 1;
    rotate: 0deg;
  }
  100% {
    opacity: 0.4;
    scale: 1.08;
    rotate: 6deg;
  }
}
@keyframes intro-title-sequence {
  0%,
  17% {
    opacity: 0;
    translate: 0 22px;
    filter: blur(8px);
  }
  38%,
  78% {
    opacity: 1;
    translate: 0 0;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    translate: 0 -12px;
    filter: blur(4px);
  }
}
@keyframes intro-reveal-site {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes intro-ring-turn {
  to {
    rotate: 360deg;
  }
}
@media (max-width: 640px) {
  .intro-compass {
    width: 160px;
    height: 160px;
    top: 35%;
  }
  .intro-compass .intro-pin {
    inset: 45px;
    width: 70px;
    height: 70px;
  }
  .intro-title {
    padding-top: 150px;
  }
  .intro-title h2 {
    letter-spacing: -2px;
  }
  .intro-title .eyebrow {
    letter-spacing: 3px;
  }
  .intro-coordinate {
    display: none;
  }
  .intro-skip.button {
    bottom: 22px;
    right: 20px;
  }
  .intro-terrain {
    opacity: 0.6;
  }
  .trailer-caption {
    flex-direction: column;
    gap: 12px;
  }
  .site-trailer .section-heading {
    align-items: flex-start;
    gap: 15px;
    flex-direction: column;
  }
}
@media (prefers-reduced-motion: reduce) {
  .first-visit-intro[open] {
    display: none;
  }
  .first-visit-intro *,
  .first-visit-intro::backdrop {
    animation: none !important;
  }
}