.reveal {
  opacity: 1;
  transform: translateY(0);
}

.has-reveal-animations .reveal {
  opacity: 0;
  transform: translateY(26px);
  filter: blur(5px);
  transition: opacity 760ms ease, transform 760ms ease, filter 760ms ease;
  transition-delay: var(--reveal-delay, 0ms);
}

.has-reveal-animations .reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translateY(0);
}

.has-reveal-animations .reveal[data-reveal-effect="left"] {
  transform: translate3d(-34px, 18px, 0) rotate(-1.4deg);
}

.has-reveal-animations .reveal[data-reveal-effect="right"] {
  transform: translate3d(34px, 18px, 0) rotate(1.4deg);
}

.has-reveal-animations .reveal[data-reveal-effect="scale"] {
  transform: translateY(22px) scale(0.96);
}

.has-reveal-animations .reveal[data-reveal-effect="blur"] {
  filter: blur(12px);
  transform: translateY(18px);
}

.has-reveal-animations .reveal[data-reveal-effect="tilt"] {
  transform: translateY(24px) rotateX(8deg);
  transform-origin: 50% 70%;
}

.has-reveal-animations .reveal.is-visible[data-reveal-effect] {
  filter: blur(0);
  transform: translate3d(0, 0, 0) rotate(0) rotateX(0) scale(1);
}

.intro-sequence > * {
  opacity: 0;
  transform: translateY(22px);
  animation: fade-up 760ms ease forwards;
}

.intro-sequence > *:nth-child(1) {
  animation-delay: 90ms;
}

.intro-sequence > *:nth-child(2) {
  animation-delay: 220ms;
}

.intro-sequence > *:nth-child(3) {
  animation-delay: 360ms;
}

.intro-sequence > *:nth-child(4) {
  animation-delay: 520ms;
}

.shimmer {
  position: relative;
  display: inline-block;
  overflow: hidden;
}

.shimmer::after {
  position: absolute;
  inset: 0;
  content: "";
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.76), transparent);
  transform: translateX(-120%);
  animation: shimmer 2600ms ease-in-out infinite;
}

.soft-glow {
  animation: soft-glow 3600ms ease-in-out infinite alternate;
}

.float {
  animation: float 5200ms ease-in-out infinite;
}

.cursor-ripple {
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border: 2px solid rgba(201, 141, 46, 0.55);
  border-radius: 50%;
  animation: ripple 640ms ease-out forwards;
}

.heart-burst {
  width: 8px;
  height: 8px;
  color: var(--ribbon-red);
  animation: heart-burst 820ms ease-out forwards;
}

.heart-burst::before {
  content: "\2665";
}

.confetti-piece {
  width: 8px;
  height: 14px;
  background: var(--flax-gold);
  animation: confetti-fall var(--dur, 1200ms) ease-out forwards;
}

.motion-spark {
  width: 6px;
  height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--flax-gold);
  box-shadow: 0 0 16px rgba(243, 216, 137, 0.72);
  animation: motion-spark 620ms ease-out forwards;
}

.has-rich-site-motion .motion-surface:hover .motion-shine,
.has-rich-site-motion .motion-surface:focus-visible .motion-shine,
.has-rich-site-motion .motion-surface.is-motion-pressed .motion-shine {
  opacity: 0.78;
  transform: translate3d(0, 0, 0);
}

.has-rich-site-motion .motion-surface:hover .motion-depth-image {
  filter: saturate(1.1) brightness(1.05);
  transform: translate3d(var(--img-x), var(--img-y), 0) scale(1.045);
}

.button.motion-magnetic:hover {
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0) translateY(-2px);
}

.site-nav__link.motion-magnetic:hover,
.site-nav__link.motion-magnetic.is-active,
.site-nav__link.motion-magnetic[aria-current="page"] {
  transform: translate3d(var(--magnet-x), var(--magnet-y), 0);
}

.portal-card.motion-surface:hover,
.creator-card.motion-surface:hover,
.creator-projects a.motion-surface:hover,
.quote-card.motion-surface:hover,
.timeline-card.motion-surface:hover,
.recipe-card.motion-surface:hover,
.outfit-card.motion-surface:hover,
.fanart-card.motion-surface:hover,
.daily-scene.motion-surface:hover {
  box-shadow:
    var(--shadow-soft),
    0 0 0 1px rgba(255, 255, 255, 0.28),
    0 22px 54px rgba(201, 141, 46, 0.18);
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shimmer {
  0% {
    transform: translateX(-120%);
  }
  45%,
  100% {
    transform: translateX(140%);
  }
}

@keyframes soft-glow {
  from {
    box-shadow: 0 18px 50px rgba(201, 141, 46, 0.16);
  }
  to {
    box-shadow: 0 24px 72px rgba(243, 216, 137, 0.34);
  }
}

@keyframes softPulse {
  0%,
  100% {
    opacity: 0.58;
    transform: scale(0.92);
  }
  50% {
    opacity: 0.92;
    transform: scale(1.08);
  }
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(-10px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes toast-out {
  from {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
  to {
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-12px);
  }
}

@keyframes page-enter {
  0% {
    opacity: 0;
    filter: blur(8px);
  }
  45% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    filter: blur(0);
  }
}

@keyframes transition-ribbon {
  0% {
    opacity: 0;
    transform: translateX(-44%) rotate(-8deg);
  }
  42% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: translateX(32%) rotate(-8deg);
  }
}

@keyframes transition-lines {
  0% {
    opacity: 0;
    transform: translateY(26px);
  }
  42% {
    opacity: 0.42;
  }
  100% {
    opacity: 0;
    transform: translateY(-12px);
  }
}

@keyframes atmosphere-beam {
  from {
    transform: translate3d(-3vw, -1vh, 0) rotate(-14deg);
  }
  to {
    transform: translate3d(8vw, 3vh, 0) rotate(-10deg);
  }
}

@keyframes atmosphere-thread {
  0%,
  100% {
    opacity: 0.24;
    transform: translate3d(-6vw, 0, 0) rotate(-7deg);
  }
  50% {
    opacity: 0.72;
    transform: translate3d(8vw, -2vh, 0) rotate(-5deg);
  }
}

@keyframes section-glow-drift {
  from {
    background-position: 0 0, 0 0;
  }
  to {
    background-position: 120px 0, 88px 0;
  }
}

@keyframes ripple {
  from {
    opacity: 1;
    transform: scale(0.3);
  }
  to {
    opacity: 0;
    transform: scale(4.4);
  }
}

@keyframes heart-burst {
  from {
    opacity: 1;
    transform: translate(0, 0) scale(0.8) rotate(0deg);
  }
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) scale(1.8) rotate(var(--rot));
  }
}

@keyframes confetti-fall {
  from {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg);
  }
  to {
    opacity: 0;
    transform: translate(var(--dx), var(--dy)) rotate(540deg);
  }
}

@keyframes motion-spark {
  0% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(0.72) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--sx), var(--sy), 0) scale(1.4) rotate(var(--sr));
  }
}

@keyframes record-spin {
  to {
    transform: rotate(360deg);
  }
}

@keyframes page-flip {
  from {
    opacity: 0;
    transform: rotateY(-24deg);
  }
  to {
    opacity: 1;
    transform: rotateY(0);
  }
}

@keyframes cinema-dissolve {
  from {
    opacity: 0;
    filter: blur(12px);
    transform: scale(1.04);
  }
  to {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
  }
}

@keyframes shake {
  0%,
  100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(-6px);
  }
  75% {
    transform: translateX(6px);
  }
}

@media (max-width: 760px) {
  .has-reveal-animations .reveal[data-reveal-effect="left"],
  .has-reveal-animations .reveal[data-reveal-effect="right"],
  .has-reveal-animations .reveal[data-reveal-effect="tilt"] {
    transform: translateY(24px);
  }

  .has-reveal-animations .reveal.is-visible[data-reveal-effect] {
    transform: translate3d(0, 0, 0) scale(1);
  }
}