/* ==========================================================================
   hobonichi.css — Decorative Hobonichi-inspired elements
   Life Dashboard · Washi tape, stickers, stamps, rainbow accents
   ========================================================================== */

/* ======================================================================
   Washi Tape — Decorative tape strips as section dividers
   ====================================================================== */
.washi-tape {
  display: block;
  height: 18px;
  border-radius: 1px;
  opacity: 0.7;
  transform: rotate(-0.5deg);
  margin: var(--space-md) 0;
  position: relative;
  overflow: hidden;
}

/* Rainbow variant */
.washi-tape,
.washi-tape-rainbow {
  background: repeating-linear-gradient(
    90deg,
    #ffe4ec 0px,
    #ffe4ec 12px,
    #fefce8 12px,
    #fefce8 24px,
    #f0fdf4 24px,
    #f0fdf4 36px,
    #f0f9ff 36px,
    #f0f9ff 48px,
    #e0e7ff 48px,
    #e0e7ff 60px,
    #fdf4ff 60px,
    #fdf4ff 72px
  );
  animation: washiSlide 20s linear infinite;
  background-size: 432px 100%;
}

/* Pink variant */
.washi-tape-pink {
  background: repeating-linear-gradient(
    90deg,
    #ffe4ec 0px,
    #ffe4ec 10px,
    #fff0f5 10px,
    #fff0f5 20px,
    #ffb6c1 20px,
    #ffb6c1 30px,
    #fff0f5 30px,
    #fff0f5 40px
  );
  animation: washiSlide 25s linear infinite;
  background-size: 320px 100%;
}

/* Purple variant */
.washi-tape-purple {
  background: repeating-linear-gradient(
    90deg,
    #faf5ff 0px,
    #faf5ff 10px,
    #e9d5ff 10px,
    #e9d5ff 20px,
    #f5f3ff 20px,
    #f5f3ff 30px,
    #ddd6fe 30px,
    #ddd6fe 40px
  );
  animation: washiSlide 22s linear infinite;
  background-size: 320px 100%;
}

/* Sunset variant */
.washi-tape-sunset {
  background: repeating-linear-gradient(
    90deg,
    #fff0f5 0px,
    #fff0f5 10px,
    #fefce8 10px,
    #fefce8 20px,
    #fff7ed 20px,
    #fff7ed 30px,
    #fef9c3 30px,
    #fef9c3 40px
  );
  animation: washiSlide 18s linear infinite;
  background-size: 320px 100%;
}

/* Wider washi */
.washi-tape-wide {
  height: 24px;
}

/* Slight rotation variants */
.washi-tape-tilt-up {
  transform: rotate(0.8deg);
}

.washi-tape-tilt-down {
  transform: rotate(-1deg);
}

/* ---- Washi Divider (full-width) ---- */
.washi-divider {
  width: 100%;
  height: 14px;
  margin: var(--space-lg) 0;
  opacity: 0.5;
  background: repeating-linear-gradient(
    90deg,
    #ffe4ec 0px,
    #ffe4ec 8px,
    #fefce8 8px,
    #fefce8 16px,
    #ecfdf5 16px,
    #ecfdf5 24px,
    #f0f9ff 24px,
    #f0f9ff 32px,
    #e0e7ff 32px,
    #e0e7ff 40px,
    #fdf4ff 40px,
    #fdf4ff 48px
  );
  background-size: 288px 100%;
  animation: washiSlide 30s linear infinite;
  border-radius: 1px;
}

/* ======================================================================
   Sticker — Decorative positioned elements
   ====================================================================== */
.sticker {
  position: relative;
}

/* Corner stickers via pseudo-elements */
.sticker::after {
  position: absolute;
  font-size: 16px;
  pointer-events: none;
  z-index: 1;
  opacity: 0.7;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.sticker:hover::after {
  opacity: 1;
  transform: scale(1.15) rotate(5deg);
}

/* Sticker position variants */
.sticker-top-right::after {
  content: attr(data-sticker);
  top: -6px;
  right: -6px;
}

.sticker-top-left::after {
  content: attr(data-sticker);
  top: -6px;
  left: -6px;
}

.sticker-bottom-right::after {
  content: attr(data-sticker);
  bottom: -6px;
  right: -6px;
}

.sticker-bottom-left::after {
  content: attr(data-sticker);
  bottom: -6px;
  left: -6px;
}

/* Pre-set sticker styles */
.sticker-star::after {
  content: '\2728';
  top: -4px;
  right: -4px;
}

.sticker-heart::after {
  content: '\1F496';
  top: -4px;
  right: -4px;
}

.sticker-flower::after {
  content: '\1F33C';
  bottom: -4px;
  left: -4px;
}

/* ======================================================================
   Stamp — Circular stamp-like decorative element
   ====================================================================== */
.stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 3px double var(--hotpink);
  font-family: var(--font-pixel);
  font-size: 7px;
  text-transform: uppercase;
  color: var(--hotpink);
  letter-spacing: 0.5px;
  text-align: center;
  line-height: 1.1;
  transform: rotate(-8deg);
  opacity: 0.8;
  position: relative;
}

.stamp::before {
  content: '';
  position: absolute;
  inset: 3px;
  border: 1px dashed var(--hotpink);
  border-radius: 50%;
  opacity: 0.5;
}

.stamp-sm {
  width: 32px;
  height: 32px;
  font-size: 6px;
  border-width: 2px;
}

.stamp-lg {
  width: 64px;
  height: 64px;
  font-size: 8px;
  border-width: 3px;
}

.stamp-purple {
  border-color: var(--area-organization-accent);
  color: var(--area-organization-accent);
}

.stamp-purple::before {
  border-color: var(--area-organization-accent);
}

.stamp-green {
  border-color: var(--area-explore-accent);
  color: var(--area-explore-accent);
}

.stamp-green::before {
  border-color: var(--area-explore-accent);
}

/* ======================================================================
   Rainbow Border
   ====================================================================== */
.rainbow-border {
  position: relative;
  border: 2px solid transparent;
  border-radius: var(--radius-lg);
  background-clip: padding-box;
}

.rainbow-border::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: calc(var(--radius-lg) + 2px);
  background: linear-gradient(
    135deg,
    var(--area-love-accent),
    var(--area-creativity-accent),
    var(--area-explore-accent),
    var(--area-intellect-accent),
    var(--area-career-accent),
    var(--area-organization-accent),
    var(--area-connection-accent)
  );
  z-index: -1;
  background-size: 400% 400%;
  animation: rainbowShift 8s ease infinite;
}

@keyframes rainbowShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ======================================================================
   Color Block — Full-width colored section
   ====================================================================== */
.color-block {
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-md);
}

/* Area-keyed color blocks */
.color-block-love         { background: var(--area-love-bg); }
.color-block-career       { background: var(--area-career-bg); }
.color-block-wealth       { background: var(--area-wealth-bg); }
.color-block-health       { background: var(--area-health-bg); }
.color-block-creativity   { background: var(--area-creativity-bg); }
.color-block-energy       { background: var(--area-energy-bg); }
.color-block-intellect    { background: var(--area-intellect-bg); }
.color-block-explore      { background: var(--area-explore-bg); }
.color-block-organization { background: var(--area-organization-bg); }
.color-block-connection   { background: var(--area-connection-bg); }
.color-block-outreach     { background: var(--area-outreach-bg); }
.color-block-selfcare     { background: var(--area-selfcare-bg); }

/* ======================================================================
   Emoji Float — Rising, fading emoji animation
   ====================================================================== */
.emoji-float {
  position: fixed;
  font-size: 24px;
  pointer-events: none;
  z-index: 3000;
  animation: emojiRise 2.5s ease-out forwards;
}

@keyframes emojiRise {
  0% {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
  50% {
    opacity: 0.8;
    transform: translateY(-60px) scale(1.1) rotate(15deg);
  }
  100% {
    opacity: 0;
    transform: translateY(-140px) scale(0.6) rotate(-10deg);
  }
}

/* ======================================================================
   Gentle Pulse Animation
   ====================================================================== */
@keyframes gentlePulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.02);
  }
}

.pulse {
  animation: gentlePulse 3s ease-in-out infinite;
}

/* ======================================================================
   Washi Slide Animation (used by tape patterns)
   ====================================================================== */
@keyframes washiSlide {
  0% { background-position: 0 0; }
  100% { background-position: 432px 0; }
}

/* ======================================================================
   Shimmer Animation (used by refresh bar, loading)
   ====================================================================== */
@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: -100% 50%; }
}

/* ======================================================================
   Deco Divider — Line + centered image/gif + line
   ====================================================================== */
.deco-divider {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}

.deco-divider::before,
.deco-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: repeating-linear-gradient(
    90deg,
    var(--border) 0px,
    var(--border) 4px,
    transparent 4px,
    transparent 8px
  );
}

.deco-divider-img {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex-shrink: 0;
  image-rendering: pixelated;
}

.deco-divider-emoji {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
}

/* ======================================================================
   Sparkle — Tiny decorative sparkle element
   ====================================================================== */
.sparkle {
  display: inline-block;
  position: relative;
}

.sparkle::before,
.sparkle::after {
  content: '';
  position: absolute;
  background: var(--hotpink);
  border-radius: 50%;
  animation: sparkleFlicker 2s ease-in-out infinite;
}

.sparkle::before {
  width: 3px;
  height: 3px;
  top: -2px;
  right: -4px;
  animation-delay: 0s;
}

.sparkle::after {
  width: 2px;
  height: 2px;
  top: -5px;
  right: 2px;
  animation-delay: 0.8s;
}

@keyframes sparkleFlicker {
  0%, 100% { opacity: 0; transform: scale(0.5); }
  50% { opacity: 1; transform: scale(1); }
}

/* Sparkle color variants */
.sparkle-purple::before,
.sparkle-purple::after {
  background: var(--neon-purple);
}

.sparkle-gold::before,
.sparkle-gold::after {
  background: var(--area-creativity-accent);
}

/* ======================================================================
   Notebook Lines — Ruled paper effect
   ====================================================================== */
.notebook-lines {
  background-image:
    repeating-linear-gradient(
      transparent,
      transparent 27px,
      var(--border-soft) 27px,
      var(--border-soft) 28px
    );
  background-position: 0 8px;
}

/* ======================================================================
   Dot Grid — Hobonichi dot grid background
   ====================================================================== */
.dot-grid {
  background-image:
    radial-gradient(circle, var(--border-soft) 0.8px, transparent 0.8px);
  background-size: 20px 20px;
}

/* ======================================================================
   Responsive
   ====================================================================== */
@media (max-width: 768px) {
  .washi-tape {
    height: 14px;
    margin: var(--space-sm) 0;
  }

  .washi-divider {
    height: 10px;
    margin: var(--space-md) 0;
  }

  .stamp {
    width: 36px;
    height: 36px;
    font-size: 6px;
    border-width: 2px;
  }

  .deco-divider {
    margin: var(--space-md) 0;
    gap: var(--space-sm);
  }
}

@media (max-width: 380px) {
  .washi-tape {
    height: 10px;
  }

  .color-block {
    padding: var(--space-md);
    border-radius: var(--radius-md);
  }

  .deco-divider-img {
    width: 20px;
    height: 20px;
  }
}

/* ======================================================================
   Reduced Motion
   ====================================================================== */
@media (prefers-reduced-motion: reduce) {
  .washi-tape,
  .washi-tape-rainbow,
  .washi-tape-pink,
  .washi-tape-purple,
  .washi-tape-sunset,
  .washi-divider {
    animation: none;
  }

  .rainbow-border::before {
    animation: none;
  }

  .emoji-float {
    animation-duration: 0.01ms;
  }

  .pulse {
    animation: none;
  }

  .sparkle::before,
  .sparkle::after {
    animation: none;
    opacity: 0.5;
  }
}