/* Elements are hidden via JS (gsap.set) — no CSS opacity rule needed */

/* Scroll indicator bounce */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(8px); }
}

.scroll-indicator {
  animation: bounce 2s ease-in-out infinite;
}

/* SVG stroke draw */
@keyframes strokeDraw {
  to { stroke-dashoffset: 0; }
}

/* Confirmation checkmark */
@keyframes checkDraw {
  to {
    stroke-dashoffset: 0;
  }
}

.checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  animation: checkDraw 0.6s ease forwards;
}

.checkmark-check {
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: checkDraw 0.3s 0.4s ease forwards;
}

/* Foam wobble */
@keyframes foamWobble {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}

/* Grain overlay */
.grain-overlay {
  position: absolute;
  inset: 0;
  opacity: 0.04;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px;
}