/**
 * Royal Plugins - Hand-Drawn Sketch Elements
 *
 * Reusable hand-drawn/sketchy CSS styles for adding personality to pages.
 * Include this file on any page that needs sketch elements.
 *
 * Usage: <link rel="stylesheet" href="/css/sketch-elements.css">
 */

/* ==========================================================================
   SECTION TITLE ACCENTS
   Add .sketch-underline or .sketch-circle to spans within .section-title
   ========================================================================== */

.section-title .sketch-underline,
h1 .sketch-underline,
h2 .sketch-underline {
    position: relative;
    display: inline-block;
}

.section-title .sketch-underline::after,
h1 .sketch-underline::after,
h2 .sketch-underline::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: -4px;
    right: -4px;
    height: 10px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M2 9 Q15 3, 35 7 T60 5 T90 8 T118 4' stroke='%23C9A227' stroke-width='2.5' fill='none' stroke-linecap='round'/%3E%3Cpath d='M0 10 Q20 5, 40 8 T70 6 T100 9 T120 5' stroke='%23C9A227' stroke-width='1.5' fill='none' stroke-linecap='round' opacity='0.4'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% 100%;
    pointer-events: none;
    /* Scroll-triggered animation */
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sketch-underline.drawn::after {
    transform: scaleX(1);
}

.section-title .sketch-circle,
h1 .sketch-circle,
h2 .sketch-circle {
    position: relative;
    display: inline-block;
}

.section-title .sketch-circle::before,
h1 .sketch-circle::before,
h2 .sketch-circle::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -12px;
    right: -12px;
    bottom: -8px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'%3E%3Cellipse cx='50' cy='25' rx='48' ry='22' stroke='%23C9A227' stroke-width='2' fill='none' stroke-linecap='round' stroke-dasharray='3 2'/%3E%3Cellipse cx='51' cy='24' rx='46' ry='20' stroke='%23C9A227' stroke-width='1.5' fill='none' stroke-linecap='round' opacity='0.4'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% 100%;
    pointer-events: none;
    /* Scroll-triggered animation */
    transform: scale(0);
    opacity: 0;
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}

.sketch-circle.drawn::before {
    transform: scale(1);
    opacity: 1;
}


/* ==========================================================================
   HAND-DRAWN LINK UNDERLINES
   Add .sketch-link class to any link for hand-drawn underline on hover
   ========================================================================== */

.sketch-link {
    position: relative;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sketch-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 6px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M0 5 Q10 2, 25 5 T50 4 T75 5 T100 3' stroke='%23C9A227' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3Cpath d='M2 6 Q15 3, 30 6 T55 4 T80 6 T98 4' stroke='%23C9A227' stroke-width='1.2' fill='none' stroke-linecap='round' opacity='0.5'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100% 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sketch-link:hover::after {
    transform: scaleX(1);
}


/* ==========================================================================
   SKETCH ICON BASE STYLES
   Common styles for hand-drawn SVG icons
   ========================================================================== */

.sketch-icon {
    opacity: 0;
    transform: scale(0.5) rotate(-10deg);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sketch-icon.visible,
.active .sketch-icon,
.reveal.active .sketch-icon {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}


/* ==========================================================================
   HOVER ANIMATIONS
   Different animations for different contexts
   ========================================================================== */

/* Jiggle - side to side shake (good for plugin cards) */
@keyframes iconJiggle {
    0%, 100% { transform: scale(1) translateX(0); }
    25% { transform: scale(1.05) translateX(-4px); }
    50% { transform: scale(1.08) translateX(4px); }
    75% { transform: scale(1.05) translateX(-2px); }
}

/* Float - lift up effect (good for principle cards) */
@keyframes iconFloat {
    0% { transform: scale(1) translateY(0); }
    40% { transform: scale(1.15) translateY(-8px); }
    100% { transform: scale(1.1) translateY(-4px); }
}

/* Pop - quick bounce scale (good for checkmarks) */
@keyframes iconPop {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1.15); }
}

/* Wobble - rotate back and forth */
@keyframes iconWobble {
    0%, 100% { transform: scale(1) rotate(0deg); }
    20% { transform: scale(1.1) rotate(-8deg); }
    40% { transform: scale(1.05) rotate(6deg); }
    60% { transform: scale(1.08) rotate(-4deg); }
    80% { transform: scale(1.02) rotate(2deg); }
}

/* Apply animations with utility classes */
.hover-jiggle:hover { animation: iconJiggle 0.5s ease-in-out; }
.hover-float:hover { animation: iconFloat 0.5s ease-out forwards; }
.hover-pop:hover { animation: iconPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.hover-wobble:hover { animation: iconWobble 0.6s ease-in-out; }

/* Simple scale hover - use for clean grow effect */
.hover-grow {
    transition: transform 0.3s ease;
}
.hover-grow:hover {
    transform: scale(1.15);
}

/* Parent-triggered hover - add .hover-trigger to parent, .hover-grow-child to children */
.hover-trigger .hover-grow-child {
    transition: transform 0.3s ease;
}
.hover-trigger:hover .hover-grow-child {
    transform: scale(1.15);
}


/* ==========================================================================
   PRICING CARD HOVER EFFECTS
   Triggered when hovering the pricing card container
   ========================================================================== */

/* Bullet points kick right */
.pricing-card .pricing-features li {
    transition: transform 0.3s ease;
}
.pricing-card:hover .pricing-features li {
    transform: translateX(6px);
}

/* Stagger the bullet animations */
.pricing-card:hover .pricing-features li:nth-child(1) { transition-delay: 0s; }
.pricing-card:hover .pricing-features li:nth-child(2) { transition-delay: 0.03s; }
.pricing-card:hover .pricing-features li:nth-child(3) { transition-delay: 0.06s; }
.pricing-card:hover .pricing-features li:nth-child(4) { transition-delay: 0.09s; }
.pricing-card:hover .pricing-features li:nth-child(5) { transition-delay: 0.12s; }
.pricing-card:hover .pricing-features li:nth-child(6) { transition-delay: 0.15s; }
.pricing-card:hover .pricing-features li:nth-child(7) { transition-delay: 0.18s; }
.pricing-card:hover .pricing-features li:nth-child(8) { transition-delay: 0.21s; }

/* Tier name grows (Personal, Professional, Agency) */
.pricing-card .pricing-tier h3 {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pricing-card:hover .pricing-tier h3 {
    transform: scale(1.1);
}

/* Most Popular badge grows */
.pricing-card .popular-badge {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pricing-card:hover .popular-badge {
    transform: scale(1.1);
}

/* Savings badge grows */
.pricing-card .savings-badge {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pricing-card:hover .savings-badge {
    transform: scale(1.15);
}

/* Buy now button grows */
.pricing-card .pricing-cta {
    transition: transform 0.3s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.pricing-card:hover .pricing-cta {
    transform: scale(1.05);
}


/* ==========================================================================
   SCROLL-TRIGGERED ANIMATION HELPER
   Add this JS to enable scroll-triggered animations:

   (function() {
       function animateSketchAccents() {
           const hasScrolled = window.scrollY >= 50;
           document.querySelectorAll('.sketch-underline, .sketch-circle').forEach(el => {
               if (el.classList.contains('drawn')) return;
               const rect = el.getBoundingClientRect();
               const inViewport = rect.top < window.innerHeight * 0.8 && rect.top > -50;
               const aboveFold = rect.top < window.innerHeight * 0.5;
               // Above fold: animate after page load; Below fold: require scroll
               if (inViewport && (aboveFold || hasScrolled)) {
                   el.classList.add('drawn');
               }
           });
       }
       setTimeout(animateSketchAccents, 400);
       window.addEventListener('scroll', animateSketchAccents);
   })();
   ========================================================================== */


/* ==========================================================================
   HERO FLOATING ICONS (Homepage specific)
   For the hero ensemble of floating plugin icons
   ========================================================================== */

.hero-visual {
    position: relative;
    width: 100%;
    height: 400px;
}

.hero-visual .sketch-icon {
    position: absolute;
    opacity: 0;
    transform: scale(0) rotate(-20deg);
    filter: drop-shadow(0 4px 12px rgba(0,0,0,0.08));
}

/* Entrance animation */
.hero-visual.animate .sketch-icon {
    animation: flyIn 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Stagger delays for hero icons */
.hero-visual .sketch-icon:nth-child(1) { animation-delay: 0.1s; }
.hero-visual .sketch-icon:nth-child(2) { animation-delay: 0.2s; }
.hero-visual .sketch-icon:nth-child(3) { animation-delay: 0.3s; }
.hero-visual .sketch-icon:nth-child(4) { animation-delay: 0.4s; }
.hero-visual .sketch-icon:nth-child(5) { animation-delay: 0.5s; }
.hero-visual .sketch-icon:nth-child(6) { animation-delay: 0.6s; }
.hero-visual .sketch-icon:nth-child(7) { animation-delay: 0.7s; }
.hero-visual .sketch-icon:nth-child(8) { animation-delay: 0.8s; }
.hero-visual .sketch-icon:nth-child(9) { animation-delay: 0.9s; }

@keyframes flyIn {
    0% {
        opacity: 0;
        transform: scale(0) rotate(-20deg) translateY(40px);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg) translateY(0);
    }
}

/* Floating animation after entrance */
.sketch-icon.floating {
    animation: float 4s ease-in-out infinite !important;
    opacity: 1 !important;
}

@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(2deg); }
}

/* Centered icon needs special float to preserve position */
.sketch-icon.floating.icon-centered {
    animation: floatCentered 4s ease-in-out infinite !important;
}

@keyframes floatCentered {
    0%, 100% { transform: translate(-50%, -50%) translateY(0) rotate(0deg); }
    50% { transform: translate(-50%, -50%) translateY(-12px) rotate(2deg); }
}


/* ==========================================================================
   CROWN WATERMARK
   Background crown element for hero sections
   ========================================================================== */

.sketch-crown-watermark {
    position: absolute;
    opacity: 0.06;
    pointer-events: none;
    z-index: 0;
}