/**
 * Handwritten Text Animation - Real SVG Path Drawing Styles
 * Version: 3.0.0
 * Effetto scrittura a mano autentico con path SVG reali via opentype.js
 */

/* ==========================================================================
   Base Styles
   ========================================================================== */

.handwritten-text-wrapper {
    position: relative;
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.hta-svg-container {
    display: inline-block;
    vertical-align: middle;
    line-height: 1;
    min-height: 50px;
}

.hta-svg-container svg,
.hta-svg-container .hta-svg {
    display: block;
    overflow: visible;
    max-width: 100%;
    height: auto;
}

/* Indicatore di caricamento */
.handwritten-text-wrapper.hta-loading .hta-svg-container::after {
    content: '';
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 2px solid var(--hta-text-color, #333);
    border-top-color: transparent;
    border-radius: 50%;
    animation: hta-spinner 0.8s linear infinite;
}

@keyframes hta-spinner {
    to {
        transform: rotate(360deg);
    }
}

/* Screen reader only text */
.hta-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   Text Alignment
   ========================================================================== */

.hta-align-left {
    text-align: left;
}

.hta-align-center {
    text-align: center;
}

.hta-align-right {
    text-align: right;
}

/* ==========================================================================
   SVG Path Styles - Il cuore dell'animazione di disegno
   ========================================================================== */

.hta-path {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    will-change: stroke-dashoffset;
}

/* Stato iniziale - nascosto */
.handwritten-text-wrapper.hta-waiting .hta-path {
    opacity: 0.001;
}

/* Durante animazione di disegno */
.handwritten-text-wrapper.hta-drawing .hta-path {
    opacity: 1;
    fill: none;
}

/* Completato */
.handwritten-text-wrapper.hta-complete .hta-path {
    opacity: 1;
}

/* Completato - con riempimento */
.handwritten-text-wrapper.hta-complete.hta-fill .hta-path {
    transition: fill 0.4s ease-out, stroke 0.4s ease-out;
}

/* ==========================================================================
   Animation Keyframes
   ========================================================================== */

@keyframes hta-draw-stroke {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes hta-fill-in {
    from {
        fill: transparent;
    }
    to {
        fill: var(--hta-text-color, currentColor);
    }
}

@keyframes hta-fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
    .handwritten-text-wrapper .hta-path {
        fill: currentColor !important;
        stroke: none !important;
        opacity: 1 !important;
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
    }
    
    .hta-sr-only {
        position: static !important;
        width: auto !important;
        height: auto !important;
        margin: 0 !important;
        clip: auto !important;
        white-space: normal !important;
    }
    
    .hta-svg-container {
        display: none !important;
    }
}

/* ==========================================================================
   Accessibility - Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .hta-path {
        animation: none !important;
        transition: none !important;
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
        fill: var(--hta-text-color, currentColor) !important;
        stroke: none !important;
        opacity: 1 !important;
    }
    
    .handwritten-text-wrapper.hta-waiting .hta-path,
    .handwritten-text-wrapper.hta-loading .hta-path {
        opacity: 1;
        fill: var(--hta-text-color, currentColor);
        stroke: none;
    }
    
    .handwritten-text-wrapper.hta-loading .hta-svg-container::after {
        display: none;
    }
}

/* ==========================================================================
   WPBakery Preview Mode
   ========================================================================== */

.vc_element-handwritten_text .handwritten-text-wrapper .hta-path,
.compose-mode .handwritten-text-wrapper .hta-path {
    fill: var(--hta-text-color, currentColor) !important;
    stroke: none !important;
    stroke-dasharray: none !important;
    stroke-dashoffset: 0 !important;
    opacity: 1 !important;
}

/* ==========================================================================
   Hover/Click Trigger States
   ========================================================================== */

.handwritten-text-wrapper[data-trigger="hover"],
.handwritten-text-wrapper[data-trigger="click"] {
    cursor: pointer;
}

.handwritten-text-wrapper[data-trigger="hover"]:hover,
.handwritten-text-wrapper[data-trigger="click"]:active {
    transform: scale(1.01);
}

/* ==========================================================================
   Additional Effect Classes
   ========================================================================== */

/* Effetto ombra leggera */
.hta-shadow .hta-path {
    filter: drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.2));
}

/* Effetto glow neon */
.hta-glow .hta-path {
    filter: drop-shadow(0 0 4px currentColor) drop-shadow(0 0 8px currentColor);
}

/* Effetto pennello - stroke più spessa e irregolare */
.hta-brush .hta-path {
    stroke-linecap: butt;
    stroke-width: calc(var(--hta-stroke-width, 2) * 1.5);
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 1024px) {
    .hta-svg-container {
        min-height: 40px;
    }
}

@media (max-width: 767px) {
    .hta-svg-container {
        min-height: 30px;
    }
    
    /* Su mobile, riduci leggermente lo stroke */
    .hta-path {
        stroke-width: calc(var(--hta-stroke-width, 2) * 0.85);
    }
}