@charset "utf-8";

/* =========================
    STAGE
========================= */
.stage {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: #000;
}

/* =========================
    COPY
========================= */
.copy-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.copy {
  font-size: min(13.953488372093023vw, 60px);
  line-height: 1.5;
  text-align: left;
  color: #d71a18;
}

.copy span {
  display: block;
}

.copy span:nth-of-type(n+2) {
  margin-top: 20px;
}

/* =========================
    FOLD
========================= */
.fold-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.fold {
  position: relative;
  width: min(900px, calc(100vw - 40px * 2));
  aspect-ratio: 1080 / 646;
  perspective: 1200px;
  will-change: transform, opacity;
}

/* =========================
    TOP
========================= */
.top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 52.47678018575851%;
  z-index: 1;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  overflow: hidden;
}

/* =========================
    MIDDLE GROUP
========================= */
.middle-group {
  position: absolute;
  top: 52.47678018575851%;
  left: 0;
  width: 100%;
  height: 47.523219814241486%;
  z-index: 2;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: top center;
  will-change: transform;
}

/* =========================
    MIDDLE
========================= */
.middle {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 61.23778501628665%;
  z-index: 5;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* =========================
    BOTTOM
========================= */
.bottom {
  position: absolute;
  top: 60.91205211726385%;
  left: 0;
  width: 100%;
  /* height: 39.08794788273616%; */
  height: 38.762214983713356%;
  z-index: 10;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-origin: top center;
  will-change: transform;
}

.bottom-shadow {
  position: absolute;
  top: -10px;
  left: 0;
  width: 100%;
  height: 10px;
  z-index: 20;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.55), rgba(0,0,0,.25), rgba(0,0,0,0));
  opacity: 0;
}

/* =========================
    FACE
========================= */
.face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.top .front,
.middle .front,
.bottom .front {
  background-image: url("/campaign/2026/vivant/0710/images/logo_secret.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.top .front{
  background-position: 0 0;
}

.middle .front{
  background-position: 0 74%;
}

.bottom .front{
  background-position: 0 100%;
}

.back {
  background: #000;
  transform: rotateX(180deg);
}

/* =========================
    LOGO
========================= */
.logo-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
}

.logo {
  position: relative;
  width: min(900px, calc(100vw - 40px * 2));
  aspect-ratio: 1080 / 646;
}

.logo-final {
  opacity: 0;
}

.vivant {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 51.86%;
  z-index: 1;
  opacity: 1;
}

.ships {
  position: absolute;
  top: 51.86%;
  left: 0;
  width: 100%;
  height: 48.14%;
  z-index: 2;
  opacity: 0;
}