.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

.reveal-up        { opacity: 0; transform: translateY(48px);    transition: opacity 0.85s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1); }
.reveal-up.visible { opacity: 1; transform: translateY(0); }

.reveal-fade      { opacity: 0; transition: opacity 1s cubic-bezier(0.16,1,0.3,1); }
.reveal-fade.visible { opacity: 1; }

.reveal-left      { opacity: 0; transform: translateX(-36px);   transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.8s cubic-bezier(0.16,1,0.3,1); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }

.reveal-d1 { transition-delay: 0.08s; }
.reveal-d2 { transition-delay: 0.18s; }
.reveal-d3 { transition-delay: 0.30s; }
.reveal-d4 { transition-delay: 0.44s; }

@keyframes charWave {
  0%   { transform: translateY(0)    skewX(0deg);    }
  30%  { transform: translateY(-8px) skewX(-2.5deg); }
  65%  { transform: translateY(-5px) skewX(1.2deg);  }
  100% { transform: translateY(-3px) skewX(0deg);    }
}
@keyframes charWaveOut {
  0%   { transform: translateY(-3px) skewX(0deg);   }
  45%  { transform: translateY(2px)  skewX(0.8deg); }
  100% { transform: translateY(0)    skewX(0deg);   }
}

@keyframes imgSlotReveal {
  from { clip-path: inset(0 100% 0 0); transform: translateX(-10px); }
  to   { clip-path: inset(0 0% 0 0);   transform: translateX(0);     }
}

@keyframes wordUp {
  0%   { transform: translateY(100%); opacity: 0;    }
  40%  { opacity: 0.6; }
  100% { transform: translateY(0);    opacity: 1;    }
}
.strip-word {
  display: inline-block;
  overflow: hidden;
  line-height: inherit;
  vertical-align: bottom;
}
.strip-word-inner {
  display: inline-block;
  transform: translateY(100%);
  opacity: 0;
}
.strip-grid.strip-enter .strip-desc .strip-word-inner {
  animation: wordUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) both;
}

#preloader {
  position: fixed;
  inset: 0;
  background: #FFFFFF;
  z-index: 100001;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
}
#pl-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
#pl-brand {
  font-family: 'Poppins', sans-serif;
  font-size: clamp(52px, 11vw, 130px);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: #0A0A0A;
  display: block;
  opacity: 0;
  will-change: transform, opacity;
}
#pl-tag {
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(9px, 1.1vw, 13px);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #0A0A0A;
  opacity: 0;
  display: block;
  will-change: opacity;
}

.sw {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.06em;
}
.swi {
  display: inline-block;
  will-change: transform;
}

.wc-overlay {
  position: absolute;
  inset: 0;
  background: rgba(10,10,10,0.1);
  opacity: 0;
  z-index: 0;
  pointer-events: none;
  transition: none;
}
.wc-arrow {
  position: absolute;
  top: 1.4rem;
  right: 1.5rem;
  font-size: 15px;
  font-weight: 700;
  color: var(--black);
  opacity: 0;
  transform: translate(-6px, 6px);
  z-index: 2;
  pointer-events: none;
  will-change: transform, opacity;
}
.work-card .work-card-bg {
  transition: none;
  will-change: transform;
}
.work-card .work-card-name,
.work-card .work-card-type {
  transition: none;
  will-change: transform, opacity;
}

@keyframes lineIn {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}