/* Gold shimmer sweep on text */
.shimmer-text {
  background: linear-gradient(
    90deg,
    var(--tighty-whitey) 0%,
    var(--tighty-whitey) 40%,
    var(--gold-light) 48%,
    #FFF 50%,
    var(--gold-light) 52%,
    var(--tighty-whitey) 60%,
    var(--tighty-whitey) 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmer-sweep 3s ease-in-out infinite;
}

@keyframes shimmer-sweep {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Flip clock digit — single tile, center line divider */
.flip-card {
  position: relative;
  width: 56px;
  height: 72px;
  background: var(--mall-goth);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Center divider line */
.flip-card::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(253, 248, 243, 0.12);
  z-index: 2;
}

.flip-card .top,
.flip-card .bottom {
  /* Not used in simplified version — handled by JS text update */
  display: none;
}

/* The visible digit */
.flip-card__digit {
  font-family: var(--font-heading);
  font-size: 44px;
  color: var(--tighty-whitey);
  line-height: 1;
  position: relative;
  z-index: 1;
}

/* Flip animation on digit change */
@keyframes flip-in {
  0%   { transform: rotateX(90deg); opacity: 0; }
  100% { transform: rotateX(0deg);  opacity: 1; }
}

.flip-card.flipping .flip-card__digit {
  animation: flip-in 0.25s ease-out forwards;
}

/* Magnetic button hover glow */
.cta-magnetic {
  position: relative;
  transition: transform 0.15s ease-out;
}

.cta-magnetic::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--cheeto-fingers);
  opacity: 0;
  z-index: -1;
  filter: blur(12px);
  transition: opacity 0.3s ease;
}

.cta-magnetic:hover::after {
  opacity: 0.4;
}

/* Section reveal (initial state before GSAP) */
.reveal {
  opacity: 0;
  transform: translateY(30px);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.8);
}

/* Gold particle fade overlay */
.particle-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  background: linear-gradient(to bottom, transparent, var(--mall-goth));
  pointer-events: none;
  z-index: 1;
}