/* ============================================
   Dan & Sam Studios — Animations CSS
   ============================================ */

/* ─── Scroll Reveal ──────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.reveal-delay-5 { transition-delay: 0.5s; }

.reveal-left {
  opacity: 0;
  transform: translateX(-28px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(28px);
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.visible {
  opacity: 1;
  transform: translateX(0);
}

/* ─── Gift Box Animation ──────────────────────── */
.gift-wrapper {
  display: flex;
  justify-content: center;
  margin-bottom: 3rem;
}

.gift-box {
  position: relative;
  width: 120px;
  height: 120px;
}

.gift-base {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 70%;
  background: linear-gradient(135deg, var(--color-gold), var(--color-gold-light));
  border-radius: 4px 4px 8px 8px;
}

.gift-base::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 16px;
  height: 100%;
  background: rgba(0,0,0,0.15);
}

.gift-lid {
  position: absolute;
  top: 0;
  left: -6px;
  right: -6px;
  height: 36%;
  background: linear-gradient(135deg, var(--color-gold-light), var(--color-gold));
  border-radius: 4px;
  transform-origin: bottom center;
  animation: giftOpen 1.2s cubic-bezier(0.4, 0, 0.2, 1) 0.8s forwards;
}

.gift-lid::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 16px;
  height: 100%;
  background: rgba(0,0,0,0.1);
}

.gift-ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
}

.gift-ribbon::before,
.gift-ribbon::after {
  content: '';
  position: absolute;
  background: var(--color-bg);
  border-radius: 50% 0;
  width: 18px;
  height: 14px;
}

.gift-ribbon::before {
  left: 0;
  top: 5px;
  transform: rotate(-30deg);
}

.gift-ribbon::after {
  right: 0;
  top: 5px;
  transform: rotate(30deg);
}

.gift-sparkles {
  position: absolute;
  inset: -40px;
  pointer-events: none;
}

.gift-sparkle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-gold);
  opacity: 0;
  animation: sparkle 1.5s ease-out infinite;
}

.gift-sparkle:nth-child(1) { top: 20%; left: 10%; animation-delay: 1.2s; }
.gift-sparkle:nth-child(2) { top: 10%; left: 50%; animation-delay: 1.4s; }
.gift-sparkle:nth-child(3) { top: 20%; right: 10%; animation-delay: 1.6s; }
.gift-sparkle:nth-child(4) { top: 50%; left: 0%; animation-delay: 1.8s; }
.gift-sparkle:nth-child(5) { top: 50%; right: 0%; animation-delay: 1.3s; }
.gift-sparkle:nth-child(6) { top: 70%; left: 15%; animation-delay: 1.5s; }
.gift-sparkle:nth-child(7) { top: 70%; right: 15%; animation-delay: 1.7s; }

@keyframes giftOpen {
  0%   { transform: rotateX(0deg); }
  60%  { transform: rotateX(-60deg) translateY(-8px); }
  100% { transform: rotateX(-70deg) translateY(-12px); }
}

@keyframes sparkle {
  0%   { opacity: 0; transform: scale(0) translate(0, 0); }
  30%  { opacity: 1; }
  100% { opacity: 0; transform: scale(1.5) translate(var(--tx, 20px), var(--ty, -20px)); }
}

.gift-sparkle:nth-child(1) { --tx: -15px; --ty: -25px; }
.gift-sparkle:nth-child(2) { --tx: 5px;  --ty: -30px; }
.gift-sparkle:nth-child(3) { --tx: 20px; --ty: -25px; }
.gift-sparkle:nth-child(4) { --tx: -25px; --ty: 0; }
.gift-sparkle:nth-child(5) { --tx: 25px; --ty: 0; }
.gift-sparkle:nth-child(6) { --tx: -15px; --ty: 15px; }
.gift-sparkle:nth-child(7) { --tx: 15px; --ty: 15px; }

/* ─── Hero background radial ─────────────────── */
@keyframes heroGlow {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.05); }
}

.hero-glow {
  animation: heroGlow 6s ease-in-out infinite;
}

/* ─── Subtle floating ─────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.float {
  animation: float 5s ease-in-out infinite;
}

/* ─── Page transition ─────────────────────────── */
.page-content {
  animation: pageIn 0.5s ease both;
}

@keyframes pageIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Subtle line scan (decorative) ─────────────  */
@keyframes lineScan {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

/* ─── Counter numbers ─────────────────────────── */
@keyframes countUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Float utility ──────────────────────────── */
.float {
  animation: floatUpDown 3s ease-in-out infinite;
}

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

/* ─── Gift box open ──────────────────────────── */
@keyframes giftOpen {
  0%   { transform: rotateX(0); }
  30%  { transform: rotateX(-40deg); }
  60%  { transform: rotateX(-60deg); }
  100% { transform: rotateX(-70deg) translateY(-10px); }
}

/* ─── Gradient text shimmer ──────────────────── */
@keyframes shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #82bdff 40%, #a78bfa 70%, #529cff 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s ease infinite;
}

/* ─── Ambient background orb ─────────────────── */
@keyframes orbDrift {
  0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.5; }
  33%       { transform: translate(30px, -20px) scale(1.05); opacity: 0.7; }
  66%       { transform: translate(-20px, 15px) scale(0.97); opacity: 0.4; }
}

.hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  animation: orbDrift 12s ease-in-out infinite;
}

.hero-orb-1 {
  width: 500px; height: 500px;
  top: -100px; right: -100px;
  background: radial-gradient(circle, rgba(82,156,255,0.18) 0%, transparent 70%);
  animation-delay: 0s;
}

.hero-orb-2 {
  width: 400px; height: 400px;
  bottom: 0; left: -80px;
  background: radial-gradient(circle, rgba(167,139,250,0.12) 0%, transparent 70%);
  animation-delay: 4s;
}

.hero-orb-3 {
  width: 300px; height: 300px;
  top: 40%; left: 40%;
  background: radial-gradient(circle, rgba(34,211,238,0.07) 0%, transparent 70%);
  animation-delay: 8s;
}

/* ─── Card image shimmer on hover ────────────── */
@keyframes imgReveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}