/* Originkit Cube Roll — topbar "리버시티" only.
   Selectors start with .top .brand so they outrank the existing
   `.brand span` / `.site-header .brand span{...!important}` rules,
   which would otherwise hit every nested face span. */

.top .brand .cube-roll-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  white-space: nowrap !important;
}

/* 1.2em = existing computed font-size of the 리버시티 span × 1.2 at every breakpoint */
.top .brand .cube-roll {
  display: inline-block;
  margin: 0;
  padding: 0 !important;
  border: 0 !important;
  font-size: 1.2em !important;
  font-family: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  color: #480202;
  white-space: nowrap;
  perspective: 600px;
  transform-style: preserve-3d;
  pointer-events: none;
}

.top .brand .cube-roll span {
  padding: 0 !important;
  border: 0 !important;
  font-size: inherit !important;
  letter-spacing: inherit;
}

.top .brand .cube-roll-word {
  display: inline-block;
  transform-style: preserve-3d;
}

.top .brand .cube-roll-char {
  display: inline-block;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
  animation: cube-roll-spin 10s linear calc(var(--i, 0) * 0.1s) infinite backwards;
}

.top .brand .cube-roll-face {
  display: block;
  font-style: inherit;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  white-space: pre;
  animation-duration: 10s;
  animation-timing-function: linear;
  animation-delay: calc(var(--i, 0) * 0.1s);
  animation-iteration-count: infinite;
  animation-fill-mode: backwards;
}

.top .brand .cube-roll-front {
  position: relative;
  transform: translateZ(var(--d, 0.5em));
  opacity: 1;
  animation-name: cube-roll-front;
}

.top .brand .cube-roll-top {
  position: absolute;
  inset: 0;
  transform: rotateX(-90deg) translateZ(var(--d, 0.5em));
  opacity: 0;
  animation-name: cube-roll-top;
}

.top .brand .cube-roll-bottom {
  position: absolute;
  inset: 0;
  transform: rotateX(90deg) translateZ(var(--d, 0.5em));
  opacity: 0;
  animation-name: cube-roll-bottom;
}

.top .brand .cube-roll-back {
  position: absolute;
  inset: 0;
  transform: rotateX(180deg) translateZ(var(--d, 0.5em));
  opacity: 0;
  animation-name: cube-roll-back;
}

/* site-pages.css fixes the brand column at 210px in this range; the 1.2× text
   would touch the first nav link, so give that column back the ~12px it needs. */
@media (min-width: 1024px) and (max-width: 1190px) {
  .site-header.top {
    grid-template-columns: 222px minmax(0, 1fr) 155px;
  }
}

/* rotateX [0,-90,-180,-270,-360], linear */
@keyframes cube-roll-spin {
  from { transform: rotateX(0deg); }
  to { transform: rotateX(-360deg); }
}

/* sideOpacity 100 → side = 0 */
@keyframes cube-roll-front {
  0% { opacity: 1; } 25% { opacity: 0; } 50% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 1; }
}
@keyframes cube-roll-top {
  0% { opacity: 0; } 25% { opacity: 0; } 50% { opacity: 0; } 75% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes cube-roll-bottom {
  0% { opacity: 0; } 25% { opacity: 1; } 50% { opacity: 0; } 75% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes cube-roll-back {
  0% { opacity: 0; } 25% { opacity: 0; } 50% { opacity: 1; } 75% { opacity: 0; } 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .top .brand .cube-roll-char,
  .top .brand .cube-roll-face {
    animation: none;
  }
  .top .brand .cube-roll-char {
    transform: none;
    will-change: auto;
  }
  .top .brand .cube-roll-front {
    opacity: 1;
  }
  .top .brand .cube-roll-top,
  .top .brand .cube-roll-bottom,
  .top .brand .cube-roll-back {
    opacity: 0;
  }
}