/* =========================================================
   SAKURA.CSS — Additional sakura decorative elements
   Ink brush strokes, mon seals, branch motifs
   ========================================================= */

/* ---- Mon Seal (circular stamp) ---- */
.mon-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  background: transparent;
  font-family: 'Amiri', serif;
  font-size: 1.1rem;
  color: var(--gold);
  position: relative;
}

.mon-seal::before {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0.5;
}

/* ---- Ink Brush Stroke (horizontal divider) ---- */
.ink-divider {
  position: relative;
  text-align: center;
  margin: 24px 0;
}

.ink-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, var(--sakura-2) 20%, var(--sakura-1) 50%, var(--sakura-2) 80%, transparent 100%);
  transform: translateY(-50%);
}

.ink-divider span {
  position: relative;
  background: var(--washi-1);
  padding: 0 16px;
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  color: var(--text-light);
  font-size: 0.9rem;
}

/* ---- Sakura Branch SVG-like (CSS only) ---- */
.branch-decor {
  position: absolute;
  pointer-events: none;
  width: 200px;
  height: 200px;
  opacity: 0.15;
}

.branch-decor::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: var(--ink-1);
  transform: rotate(-35deg) translateX(-20%);
  transform-origin: left center;
  border-radius: 2px;
}

.branch-decor::after {
  content: '';
  position: absolute;
  bottom: 30%;
  left: 40%;
  width: 60%;
  height: 2px;
  background: var(--ink-1);
  transform: rotate(-55deg);
  transform-origin: left center;
  border-radius: 2px;
}

/* ---- Petal burst animation (for button click) ---- */
@keyframes petal-burst {
  0% {
    transform: translate(0, 0) rotate(0deg) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translate(var(--bx), var(--by)) rotate(var(--br)) scale(0.2);
    opacity: 0;
  }
}

.petal-particle {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 150% 0 150% 0;
  background: linear-gradient(135deg, var(--sakura-2), var(--sakura-1));
  pointer-events: none;
  z-index: 9999;
  animation: petal-burst 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ---- Shimmer overlay on buttons (extra layer) ---- */
@keyframes shimmer-sweep {
  0%   { transform: translateX(-150%) skewX(-20deg); }
  100% { transform: translateX(250%) skewX(-20deg); }
}

.btn--shimmer::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 35%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  animation: shimmer-sweep 2.5s infinite;
}

/* ---- Hero parallax layers ---- */
.parallax-slow {
  will-change: transform;
  transition: transform 0.1s linear;
}

.parallax-fast {
  will-change: transform;
  transition: transform 0.05s linear;
}

/* ---- Gold mon decorative circles ---- */
.gold-circle-decor {
  position: absolute;
  border-radius: 50%;
  border: 1.5px solid var(--gold);
  pointer-events: none;
  opacity: 0.2;
}

.gold-circle-decor--sm {
  width: 60px;
  height: 60px;
}

.gold-circle-decor--md {
  width: 120px;
  height: 120px;
}

.gold-circle-decor--lg {
  width: 200px;
  height: 200px;
}

/* ---- Animated sakura shimmer on cards ---- */
@keyframes card-shimmer {
  0%   { opacity: 0; left: -60%; }
  40%  { opacity: 1; }
  100% { opacity: 0; left: 120%; }
}

.product-card .shimmer-line {
  position: absolute;
  top: 0;
  left: -60%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transform: skewX(-15deg);
  animation: card-shimmer 3s ease infinite;
  pointer-events: none;
  z-index: 8;
}

/* ---- Kanji floating text ---- */
.kanji-float {
  font-family: 'Amiri', serif;
  color: rgba(232, 117, 142, 0.06);
  position: absolute;
  pointer-events: none;
  user-select: none;
  font-size: 120px;
  z-index: 0;
  animation: kanji-drift 20s ease-in-out infinite alternate;
}

@keyframes kanji-drift {
  0%   { transform: translateY(0) rotate(-5deg); opacity: 0.04; }
  100% { transform: translateY(-30px) rotate(5deg); opacity: 0.07; }
}

/* ---- Ink brush "mon" decorative ring ---- */
.mon-ring {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.mon-ring::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid var(--gold);
  opacity: 0.25;
  animation: mon-pulse 4s ease-in-out infinite;
}

.mon-ring::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1px solid var(--sakura-1);
  opacity: 0.15;
  animation: mon-pulse 4s ease-in-out infinite 1s;
}

@keyframes mon-pulse {
  0%, 100% { transform: scale(1); opacity: 0.25; }
  50%       { transform: scale(1.06); opacity: 0.15; }
}