/* ==========================================================================
   Kawaii Bundle — CSS Effects
   Vanilla Breeze · Kawaii / Cute
   Decorative overrides, animations, and data-effect attribute effects.
   Migrated to data-effect~="name" selectors.
   ========================================================================== */

@layer bundle-effects {

  /* ------------------------------------------------------------------
     Keyframes
     ------------------------------------------------------------------ */

  @keyframes vb-kawaii-sparkle {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.5; transform: scale(0.8); }
  }

  @keyframes vb-kawaii-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
  }

  @keyframes vb-kawaii-wiggle {
    0%, 100% { transform: rotate(-3deg); }
    50%      { transform: rotate(3deg); }
  }

  @keyframes vb-kawaii-float {
    0%, 100% { transform: translateY(0) rotate(0deg); opacity: 1; }
    25%      { transform: translateY(-8px) rotate(5deg); }
    50%      { transform: translateY(-3px) rotate(-3deg); opacity: 0.8; }
    75%      { transform: translateY(-10px) rotate(2deg); }
  }

  @keyframes vb-kawaii-starburst {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
  }


  /* ------------------------------------------------------------------
     data-effect~="starburst" — Pastel starburst background
     ------------------------------------------------------------------ */

  [data-effect~="starburst"] {
    position: relative;
    overflow: hidden;
    background: linear-gradient(
      180deg,
      oklch(85% 0.08 290) 0%,
      oklch(90% 0.10 340) 40%,
      oklch(95% 0.06 60) 100%
    );
  }

  [data-effect~="starburst"]::before {
    content: "";
    position: absolute;
    inset: -50%;
    width: 200%;
    height: 200%;
    background: repeating-conic-gradient(
      from 0deg,
      oklch(92% 0.05 300 / 0.4) 0deg 10deg,
      transparent 10deg 20deg
    );
    animation: vb-kawaii-starburst 60s linear infinite;
    pointer-events: none;
    z-index: 0;
  }

  [data-effect~="starburst"]::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background:
      radial-gradient(ellipse 120px 80px at 10% 90%, oklch(95% 0.06 350 / 0.9) 0%, transparent 100%),
      radial-gradient(ellipse 160px 100px at 30% 85%, oklch(92% 0.08 290 / 0.85) 0%, transparent 100%),
      radial-gradient(ellipse 140px 90px at 55% 92%, oklch(95% 0.05 200 / 0.9) 0%, transparent 100%),
      radial-gradient(ellipse 180px 110px at 75% 80%, oklch(93% 0.07 350 / 0.85) 0%, transparent 100%),
      radial-gradient(ellipse 120px 80px at 95% 88%, oklch(94% 0.06 290 / 0.9) 0%, transparent 100%);
    pointer-events: none;
    z-index: 1;
  }

  [data-effect~="starburst"] > * {
    position: relative;
    z-index: 2;
  }


  /* ------------------------------------------------------------------
     data-effect~="sparkle" — Animated sparkle effect on text/elements
     ------------------------------------------------------------------ */

  [data-effect~="sparkle"] {
    position: relative;
    display: inline-block;
  }

  [data-effect~="sparkle"]::before,
  [data-effect~="sparkle"]::after {
    position: absolute;
    font-size: 0.6em;
    pointer-events: none;
    animation: vb-kawaii-float 3s ease-in-out infinite;
  }

  [data-effect~="sparkle"]::before {
    content: "\2726";
    top: -0.3em;
    right: -0.5em;
    color: oklch(75% 0.18 60);
    animation-delay: 0s;
  }

  [data-effect~="sparkle"]::after {
    content: "\2726";
    bottom: -0.2em;
    left: -0.4em;
    color: oklch(70% 0.15 290);
    animation-delay: -1.5s;
    font-size: 0.4em;
  }


  /* ------------------------------------------------------------------
     data-effect~="bounce" — Bouncy hover animation
     ------------------------------------------------------------------ */

  [data-effect~="bounce"] {
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  [data-effect~="bounce"]:hover {
    animation: vb-kawaii-bounce 0.6s ease-in-out;
  }


  /* ------------------------------------------------------------------
     data-effect~="wiggle" — Wiggle animation
     ------------------------------------------------------------------ */

  [data-effect~="wiggle"] {
    display: inline-block;
    animation: vb-kawaii-wiggle 2s ease-in-out infinite;
  }

  [data-effect~="wiggle"][data-trigger~="hover"] {
    animation: none;
  }

  [data-effect~="wiggle"][data-trigger~="hover"]:hover {
    animation: vb-kawaii-wiggle 0.4s ease-in-out;
  }


  /* ------------------------------------------------------------------
     Kawaii scoped decorative overrides
     (Only apply when kawaii theme is active)
     ------------------------------------------------------------------ */

  /* Scallop mask definition */
  [data-theme~="kawaii"] {
    --kawaii-scallop-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Crect width='200' height='200' rx='24' fill='white'/%3E%3Ccircle cx='14' cy='0' r='10' fill='white'/%3E%3Ccircle cx='38' cy='0' r='10' fill='white'/%3E%3Ccircle cx='62' cy='0' r='10' fill='white'/%3E%3Ccircle cx='86' cy='0' r='10' fill='white'/%3E%3Ccircle cx='110' cy='0' r='10' fill='white'/%3E%3Ccircle cx='134' cy='0' r='10' fill='white'/%3E%3Ccircle cx='158' cy='0' r='10' fill='white'/%3E%3Ccircle cx='182' cy='0' r='10' fill='white'/%3E%3Ccircle cx='14' cy='200' r='10' fill='white'/%3E%3Ccircle cx='38' cy='200' r='10' fill='white'/%3E%3Ccircle cx='62' cy='200' r='10' fill='white'/%3E%3Ccircle cx='86' cy='200' r='10' fill='white'/%3E%3Ccircle cx='110' cy='200' r='10' fill='white'/%3E%3Ccircle cx='134' cy='200' r='10' fill='white'/%3E%3Ccircle cx='158' cy='200' r='10' fill='white'/%3E%3Ccircle cx='182' cy='200' r='10' fill='white'/%3E%3C/svg%3E");
  }

  /* Heart dividers */
  [data-theme~="kawaii"] :is(main, article) hr:not([data-ornament]):not(:is(.wave, .zigzag, .scallop, .diamonds, .dots)) {
    border: none;
    height: 2rem;
    background: transparent;
    position: relative;
    margin-block: 2rem;
  }

  [data-theme~="kawaii"] :is(main, article) hr:not([data-ornament]):not(:is(.wave, .zigzag, .scallop, .diamonds, .dots))::before {
    content: "\2661 \2726 \2661 \2726 \2661";
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    color: var(--color-primary);
    font-size: 1.25rem;
    letter-spacing: 0.5rem;
    animation: vb-kawaii-sparkle 2s ease-in-out infinite;
  }

  /* Cute headings */
  [data-theme~="kawaii"] :is(main, article) h1 {
    color: var(--color-primary);
    font-family: var(--font-display, var(--font-sans));
  }

  [data-theme~="kawaii"] :is(main, article) h1::before { content: "\273F "; }
  [data-theme~="kawaii"] :is(main, article) h1::after  { content: " \273F"; }

  [data-theme~="kawaii"] :is(main, article) h2 {
    color: var(--color-lavender, oklch(55% 0.12 290));
  }

  [data-theme~="kawaii"] :is(main, article) h2::before {
    content: "\2605 ";
    animation: vb-kawaii-sparkle 1.5s ease-in-out infinite;
  }

  [data-theme~="kawaii"] :is(main, article) h3 {
    color: var(--color-accent);
  }

  /* Bouncy buttons */
  [data-theme~="kawaii"] :is(main, article) button,
  [data-theme~="kawaii"] :is(main, article) .button {
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary), var(--color-lavender, oklch(55% 0.12 290)));
    border: none;
    color: white;
    font-weight: 700;
    box-shadow: var(--shadow-md);
    transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  [data-theme~="kawaii"] :is(main, article) button:hover,
  [data-theme~="kawaii"] :is(main, article) .button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: var(--shadow-lg);
  }

  /* Rainbow link underlines */
  [data-theme~="kawaii"] :is(main, article) a:not([class]) {
    color: var(--color-primary);
    text-decoration: none;
    position: relative;
  }

  [data-theme~="kawaii"] :is(main, article) a:not([class])::after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-lavender, oklch(55% 0.12 290)), var(--color-accent));
    border-radius: var(--radius-full);
    transform: scaleX(0);
    transition: transform 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }

  [data-theme~="kawaii"] :is(main, article) a:not([class]):hover::after {
    transform: scaleX(1);
  }

  /* Heart list markers */
  [data-theme~="kawaii"] article :not(nav) > ul:not([class]) {
    list-style: none;
  }

  [data-theme~="kawaii"] article :not(nav) > ul:not([class]) > li::before {
    content: "\2661";
    color: var(--color-primary);
    margin-inline-end: 0.5rem;
  }

  /* Cute blockquotes */
  [data-theme~="kawaii"] :is(main, article) blockquote:not([data-callout]) {
    background: linear-gradient(135deg, var(--color-primary-subtle), oklch(95% 0.04 290));
    border: none;
    border-radius: var(--radius-xl);
    padding: 1.5rem 2rem;
    position: relative;
    mask-image: var(--kawaii-scallop-mask);
    mask-size: cover;
    -webkit-mask-image: var(--kawaii-scallop-mask);
    -webkit-mask-size: cover;
  }

  [data-theme~="kawaii"] :is(main, article) blockquote:not([data-callout])::before {
    content: "\1F4AD";
    position: absolute;
    top: -1rem;
    left: 1.5rem;
    font-size: 2rem;
  }

  /* Selection */
  [data-theme~="kawaii"] ::selection {
    background: var(--color-primary);
    color: white;
  }

  /* Cute code */
  [data-theme~="kawaii"] :is(main, article) code {
    background: var(--color-accent-subtle);
    color: oklch(35% 0.12 180);
    border-radius: var(--radius-s);
    padding: 0.125rem 0.375rem;
  }


  /* ------------------------------------------------------------------
     Reduced motion
     ------------------------------------------------------------------ */

  @media (prefers-reduced-motion: reduce) {
    [data-effect~="sparkle"]::before,
    [data-effect~="sparkle"]::after,
    [data-effect~="wiggle"],
    [data-effect~="starburst"]::before {
      animation: none;
    }
  }

  :root[data-motion-reduced] [data-effect~="sparkle"]::before,
  :root[data-motion-reduced] [data-effect~="sparkle"]::after,
  :root[data-motion-reduced] [data-effect~="wiggle"],
  :root[data-motion-reduced] [data-effect~="starburst"]::before {
    animation: none;
  }


  /* ------------------------------------------------------------------
     Print
     ------------------------------------------------------------------ */

  @media print {
    [data-effect~="starburst"],
    [data-effect~="sparkle"],
    [data-effect~="bounce"],
    [data-effect~="wiggle"] {
      animation: none !important;
      transform: none !important;
    }

    [data-effect~="starburst"]::before,
    [data-effect~="starburst"]::after,
    [data-effect~="sparkle"]::before,
    [data-effect~="sparkle"]::after {
      display: none !important;
    }
  }

}