#intro-animation {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: var(--background);
    margin: 0;
    position: relative;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 102%;
    z-index: 999999999999999999999999999999999999999999999999999999999999999999999;
    transition: opacity 0.6s ease, transform 1.2s ease;
  }

  .light-mode  #intro-animation{
    background: #f7f7f7;
  }

  #intro-animation.hide {
  transform: translateY(-120vh);
  opacity: 0;
  pointer-events: none;
 }

 @media(min-width: 1200px) {
  #intro-animation.hide {
    transform: translateX(-20vh) translateY(0);
  }
 }

  .the-box {
    position: relative;
    height: 400px;
    width: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: scale(0.35);
  }

  @media(min-width: 600px) {
    .the-box {
        transform: scale(0.65); 
    }
  }

  .scene {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .building {
    width: 100px;   /* depth (short side) */
    height: 350px;  /* height */
    position: relative;
    transform-style: preserve-3d;
    animation: viewShift 9s forwards;
    /* transform: rotateX(-6deg) rotateY(11deg); */
  }

  .face {
    position: absolute;
    padding: 5px;
    width: 100px;
    height: 200px;
    background: rgba(255, 255, 255, 0.05); /* transparent faces */
    border: 1px solid #f7f7f7; 
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content:flex-start;
  }

  .light-mode .face {
     border: 1px solid #00122B;
  }

  /* Windows */
  .window {
    width: 20px;
    height: 20px;
    margin: 4px 4px 0px 4px;
    border: 1px solid var(--text);
  }

  .light-mode .window {
    border: none;
    background-color: #cccccc;
  }

  .window:nth-child(4n) {
    background-color: #866900be;
  }

  .door-box {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 40px;
    padding-top: 10px;
    transform: translateY(10px);
  }

  .door {
    width: 20px;
    height: 30px;
    border: 1px solid #f7f7f7;
    border-bottom: none !important;
  }

  .light-mode .door {
    border: none;
    background-color: #cccccc;
  }

.face.left {
    background-color: #00152a;
}

.light-mode .face.left {
    background-color: #cccccc;
}

.face, .top {
  background-color: #00152a;
  animation: fadeBg 1s forwards;
  animation-delay: 7.5s;
}

.light-mode .face, .light-mode .top {
  background-color: #f7f7f7;
  animation: fadeDarkBg 1s forwards;
  animation-delay: 7.5s;
}

.bottom {
  background-color: #00152a;
  animation: fadeDarkBottom 1s forwards;
  animation-delay: 7.5s;
  
}

.light-mode .bottom {
  background-color: #ededed;
  animation: fadeBottom 1s forwards;
  animation-delay: 7.5s;
}

@keyframes fadeBottom {
  from { background-color: #ededed; }
  to   { background-color: transparent; }
}

@keyframes fadeDarkBottom {
  from { background-color: #00152a; }
  to   { background-color: transparent; }
} 

@keyframes fadeBg {
  from { background-color: #00152a; }
  to   { background-color: transparent; }
}

@keyframes fadeDarkBg {
  from { background-color: #f7f7f7; }
  to   { background-color: transparent; }
}


/* Position faces */
.front  { transform: translateZ(50px); }
.back   { transform: rotateY(180deg) translateZ(50px); }
.right  { transform: rotateY(90deg) translateZ(50px); }
.left   { transform: rotateY(-90deg) translateZ(50px); }
.top    { width: 100px; height: 100px; transform: rotateX(-90deg) translateZ(150px); }
.bottom { width: 100px; height: 100px; transform: rotateX(90deg) translateZ(50px); }


svg.logo {
  position: absolute;
  top: -196px;
  left: -196px;
  width: 770px;
  height: 770px;
  opacity: 0;
  animation: showSVG 2s ease forwards;
  animation-delay: 7s;
}

svg.logo path, svg.logo rect{
    stroke: #f7f7f7;
}

.light-mode svg.logo path, .light-mode svg.logo rect{
    stroke: var(--text);
}

.the-box::after {
    content: "";
    position: absolute;
    top: -61%;
    left: -65%;
    height: 220%;
    width: 220%;
    border: 1.4px solid #f7f7f7;
    border-radius: 50%;
    opacity: 0; 
    animation: showSVG 2s ease forwards;
    animation-delay: 7s; 
}

.light-mode .the-box::after{
    border: 1.4px solid #00122B;
}

@keyframes showSVG {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes viewShift {
  /* Stage 1: side + slight tilt */
  0% {
     transform: rotateX(-6deg) rotateY(11deg);
  }

  60% {
     transform: rotateX(-6deg) rotateY(11deg);
  }

  /* Stage 2: move toward front + tilt upward */
  80% {
    transform: rotateX(-90deg) rotateY(30deg);
  }

  /* Stage 3: top view (square) */
  90% {
    transform: rotateX(-90deg) rotateY(0deg);
  }

  /* Stage 4: hold top view for ~2s */
  100% {
    transform: rotateX(-90deg) rotateY(0deg);
  }

}

.the-text {
    padding: 10px 0 40px;
    z-index: 50;
    transform: translateY(110px) scale(1.25);
    animation-delay: 4s;
    animation: fadeOut 8s forwards;
}

.the-text svg path {
    fill: var(--user-gold);
}

.handwriting {
  stroke-dasharray: 50;  
  stroke-dashoffset: 1000;
  opacity: 1;
  transform: translateY(0);
}

@keyframes fadeOut {
  0% 
  { opacity: 1;
    transform: translateY(110px) scale(1.25); }
  40% 
  { opacity: 1;
    transform: translateY(110px) scale(1.25); }
  50% 
  { opacity: 1;
    transform: translateY(-40px) scale(1.25); }
  75% 
  { opacity: 0;
    transform: translateY(-40px) scale(1.25); }
  100% 
  { opacity: 0;
    transform: translateY(-40px) scale(1.25); }
}

/* Position 1 */
.position-1 {
  position: absolute;
  top: 138px;
  left: 36px;
  animation: positionShift-1 1s ease forwards;
  animation-delay: 2s;
}

/* Position 2 */
.position-2 {
  position: absolute;
  top: 137px;
  right: 108px;
  animation: positionShift-2 1s ease forwards;
  animation-delay: 2.5s;
}

/* Position 3 */
.position-3 {
  position: absolute;
  bottom: 155px;
  left: 84px;
  animation: positionShift-3 1.2s ease forwards;
  animation-delay: 3s;
}

/* Position 4 */
.position-4 {
  position: absolute;
  bottom: 153px;
  right: 40px;
  animation: positionShift-4 1.2s ease forwards;
  animation-delay: 3.5s;
}

@keyframes positionShift-1 {
  from { top: 138px; left: 36px; }
  to   { top: -4px; left: -26px; }
}

@keyframes positionShift-2 {
  from { top: 137px; right: 108px; }
  to   { top: -10px; right: 1px; }
}

@keyframes positionShift-3 {
  from { bottom: 155px; left: 84px; }
  to   { bottom: -3px; left: -12px; }
}

@keyframes positionShift-4 {
  from { bottom: 153px; right: 40px; }
  to   { bottom: -6px; right: -2px; }
}