/* =====================================================================
   RIGEL WOW — hand-drawn doodles for Elementor (no plugins, no libraries)
   Install once: Elementor › Site Settings › Custom CSS → paste this file.

   Day-to-day editing, all from the Elementor panel (no HTML):
   1. Drop a Heading (or Text Editor) widget and type the text as usual.
   2. Advanced › CSS Classes → type one or more classes:
        rg-burst   sun-ray strokes on both sides   \ text /
        rg-burst-l strokes on the left only
        rg-burst-r strokes on the right only
        rg-heart   small outline heart after the text
        rg-chevron yellow chevron before the text  > Title
        rg-arrow   curly arrow after the text
        rg-letters letters drop in one by one (needs rigel-wow.js)
        rg-float   gentle floating movement
   3. Colour of the doodles = Global Color "Accent" (Site Settings › Global Colors).
      Handwritten font     = Global Font "Accent"  (Site Settings › Global Fonts).
   Underline / circle around words: use the native Animated Headline widget
   (Highlighted › Underline / Circle), no class needed.
   ===================================================================== */
:root {
  --rg-accent: var(--e-global-color-accent, #FFC21A);
  --rg-hand-font: var(--e-global-typography-accent-font-family, "Caveat Brush"), cursive;
}

/* The decorated box: the element itself in plain HTML, or the inner title inside an Elementor widget */
:where(.rg-burst, .rg-burst-l, .rg-burst-r, .rg-heart, .rg-chevron, .rg-arrow):not(.elementor-widget),
.elementor-widget:where(.rg-burst, .rg-burst-l, .rg-burst-r, .rg-heart, .rg-chevron, .rg-arrow) :where(.elementor-heading-title, .elementor-widget-container > p:last-child) {
  position: relative;
  display: inline-block;
}

/* Optional preset: handwritten font + tilt (same as setting Typography + Transform › Rotate in the panel) */
:where(.rg-hand) { font-family: var(--rg-hand-font); font-weight: 400; display: inline-block; transform: rotate(var(--rg-rotate, -5deg)); }
.elementor-widget:where(.rg-hand) { transform: none; }
.elementor-widget:where(.rg-hand) :where(.elementor-heading-title) { font-family: var(--rg-hand-font); display: inline-block; transform: rotate(var(--rg-rotate, -5deg)); }

/* ---------- Doodle shapes (masked so colour = --rg-accent) ---------- */
:where(.rg-burst, .rg-burst-l):not(.elementor-widget)::before,
.elementor-widget:where(.rg-burst, .rg-burst-l) :where(.elementor-heading-title, .elementor-widget-container > p:last-child)::before,
:where(.rg-burst, .rg-burst-r):not(.elementor-widget)::after,
.elementor-widget:where(.rg-burst, .rg-burst-r) :where(.elementor-heading-title, .elementor-widget-container > p:last-child)::after,
:where(.rg-heart):not(.elementor-widget)::after,
.elementor-widget:where(.rg-heart) :where(.elementor-heading-title, .elementor-widget-container > p:last-child)::after,
:where(.rg-chevron):not(.elementor-widget)::before,
.elementor-widget:where(.rg-chevron) :where(.elementor-heading-title)::before,
:where(.rg-arrow):not(.elementor-widget)::after,
.elementor-widget:where(.rg-arrow) :where(.elementor-heading-title, .elementor-widget-container > p:last-child)::after {
  content: ""; position: absolute; pointer-events: none;
  background: var(--rg-accent);
  -webkit-mask: var(--rg-shape) center / 100% 100% no-repeat;
          mask: var(--rg-shape) center / 100% 100% no-repeat;
}

/* Sun-ray bursts */
:where(.rg-burst, .rg-burst-l):not(.elementor-widget)::before,
.elementor-widget:where(.rg-burst, .rg-burst-l) :where(.elementor-heading-title, .elementor-widget-container > p:last-child)::before {
  --rg-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40' fill='none' stroke='black' stroke-width='3.8' stroke-linecap='round'%3E%3Cpath d='M25 11 13 4M24 20H7M25 29l-12 7'/%3E%3C/svg%3E");
  width: .8em; height: 1.05em; right: calc(100% + .12em); top: 50%; margin-top: -.55em;
  animation: rg-twinkle 1.6s ease-in-out infinite alternate;
}
:where(.rg-burst, .rg-burst-r):not(.elementor-widget)::after,
.elementor-widget:where(.rg-burst, .rg-burst-r) :where(.elementor-heading-title, .elementor-widget-container > p:last-child)::after {
  --rg-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 40' fill='none' stroke='black' stroke-width='3.8' stroke-linecap='round'%3E%3Cpath d='M5 11l12-7M6 20h17M5 29l12 7'/%3E%3C/svg%3E");
  width: .8em; height: 1.05em; left: calc(100% + .12em); top: 50%; margin-top: -.55em;
  animation: rg-twinkle 1.6s ease-in-out infinite alternate;
}

/* Heart after the text */
:where(.rg-heart):not(.elementor-widget),
.elementor-widget:where(.rg-heart) :where(.elementor-heading-title, .elementor-widget-container > p:last-child) { padding-right: .85em; }
:where(.rg-heart):not(.elementor-widget)::after,
.elementor-widget:where(.rg-heart) :where(.elementor-heading-title, .elementor-widget-container > p:last-child)::after {
  --rg-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.6' stroke-linejoin='round'%3E%3Cpath d='M12 20s-7-4.4-9-9a4.5 4.5 0 0 1 9-3 4.5 4.5 0 0 1 9 3c-2 4.6-9 9-9 9Z'/%3E%3C/svg%3E");
  width: .62em; height: .62em; right: 0; bottom: .55em;
  animation: rg-beat 1.8s ease-in-out infinite;
}

/* Chevron before section titles */
:where(.rg-chevron):not(.elementor-widget),
.elementor-widget:where(.rg-chevron) :where(.elementor-heading-title) { margin-left: .78em; }
:where(.rg-chevron):not(.elementor-widget)::before,
.elementor-widget:where(.rg-chevron) :where(.elementor-heading-title)::before {
  --rg-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 40' fill='none' stroke='black' stroke-width='5' stroke-linecap='round'%3E%3Cpath d='M5 5l12 12M5 35l12-12'/%3E%3C/svg%3E");
  width: .42em; height: .72em; right: calc(100% + .26em); top: .14em;
}

/* Curly arrow after the text */
:where(.rg-arrow):not(.elementor-widget),
.elementor-widget:where(.rg-arrow) :where(.elementor-heading-title, .elementor-widget-container > p:last-child) { padding-right: 1.4em; }
:where(.rg-arrow):not(.elementor-widget)::after,
.elementor-widget:where(.rg-arrow) :where(.elementor-heading-title, .elementor-widget-container > p:last-child)::after {
  --rg-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 44' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 6c18 0 34 10 40 30M33 31l10 7 3-12'/%3E%3C/svg%3E");
  width: 1.15em; height: 1em; right: 0; top: .2em;
}

/* Gentle floating */
:where(.rg-float) { animation: rg-float 5s ease-in-out infinite; }

/* Mockup-only helpers that mimic Animated Headline › Highlighted (Underline / Circle) */
:where(.rg-underline, .rg-circle) { position: relative; display: inline-block; z-index: 0; }
:where(.rg-underline)::after, :where(.rg-circle)::before {
  content: ""; position: absolute; pointer-events: none; z-index: -1; background: var(--rg-accent);
  -webkit-mask: var(--rg-shape) center / 100% 100% no-repeat; mask: var(--rg-shape) center / 100% 100% no-repeat;
}
:where(.rg-underline)::after {
  --rg-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none' fill='none' stroke='black' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M4 14C50 5 120 3 196 9'/%3E%3C/svg%3E");
  left: -2%; width: 104%; bottom: -.16em; height: .26em;
}
:where(.rg-circle)::before {
  --rg-shape: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 70' preserveAspectRatio='none' fill='none' stroke='black' stroke-width='3.2' stroke-linecap='round'%3E%3Cpath d='M30 12C70 2 160 4 190 26s-20 40-90 40S4 52 8 34 50 8 120 6'/%3E%3C/svg%3E");
  inset: -.28em -.4em -.22em -.4em;
}

/* ---------- Keyframes ---------- */
@keyframes rg-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes rg-twinkle { from { scale: .86; } to { scale: 1.08; } }
@keyframes rg-beat { 0%, 60%, 100% { scale: 1; } 30% { scale: 1.25; } }
@keyframes rg-float { 50% { translate: 0 -10px; rotate: 2deg; } }
@supports (animation-timeline: view()) {
  :where(.rg-underline)::after, :where(.rg-circle)::before {
    animation: rg-draw linear both; animation-timeline: view(); animation-range: entry 30% cover 40%;
  }
}

/* ---------- Letters drop in (rigel-wow.js adds the spans) ---------- */
.rg-ch { display: inline-block; white-space: pre; }
.rg-js .rg-letters:not(.rg-in) .rg-ch { opacity: 0; transform: translateY(-.7em) rotate(-14deg); }
.rg-letters.rg-in .rg-ch { animation: rg-drop .7s cubic-bezier(.3,1.7,.5,1) both; animation-delay: calc(var(--i) * 45ms); }
.rg-letters.rg-in:hover .rg-ch { animation: rg-wave .6s ease-in-out both; animation-delay: calc(var(--i) * 30ms); }
@keyframes rg-drop { from { opacity: 0; transform: translateY(-.7em) rotate(-14deg); } to { opacity: 1; transform: none; } }
@keyframes rg-wave { 50% { transform: translateY(-.18em) rotate(-4deg); } }

/* Elementor editor: never hide letters while editing */
.elementor-editor-active .rg-letters .rg-ch { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  *::before, *::after, .rg-float, .rg-ch { animation: none !important; }
  .rg-ch { opacity: 1 !important; transform: none !important; }
}

/* Words stay whole when letters are split (rigel-wow.js) */
.rg-letters .rg-w { display: inline-block; white-space: nowrap; }