/* Hand-drawn styling and animations */

/* Import Google Fonts for hand-drawn feel */
@import url('https://fonts.googleapis.com/css2?family=Kalam:wght@300;400;700&display=swap');

/* Hand-drawn elements */
.handdrawn {
    font-family: 'Kalam', cursive;
}

/* SVG Hand-drawn animations */
@keyframes draw {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.hand-drawn-svg {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: draw 2s ease-out forwards;
}

/* Hand-drawn borders and decorative elements */
.handdrawn-border {
    position: relative;
    border: none;
}

.handdrawn-border::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    background: 
        linear-gradient(45deg, transparent 49%, #2c5aa0 50%, transparent 51%),
        linear-gradient(-45deg, transparent 49%, #2c5aa0 50%, transparent 51%);
    background-size: 8px 8px;
    background-position: 0 0, 4px 4px;
    border-radius: 15px;
    z-index: -1;
    opacity: 0.7;
}

/* Sketch-style buttons */
.btn-sketch {
    position: relative;
    background: transparent;
    border: 3px solid #2c5aa0;
    border-radius: 0;
    padding: 12px 30px;
    font-family: 'Kalam', cursive;
    font-weight: 600;
    transition: all 0.3s ease;
    overflow: hidden;
}

.btn-sketch::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(44, 90, 160, 0.2), transparent);
    transition: left 0.5s;
}

.btn-sketch:hover::before {
    left: 100%;
}

.btn-sketch:hover {
    transform: translateY(-2px) rotate(-1deg);
    box-shadow: 5px 5px 0 rgba(44, 90, 160, 0.3);
}

/* Hand-drawn underlines */
.handdrawn-underline {
    position: relative;
    text-decoration: none;
}

.handdrawn-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 100%;
    height: 3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 10'%3E%3Cpath d='M0,8 Q25,2 50,8 T100,8' stroke='%23e67e22' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-size: 100% 100%;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.handdrawn-underline:hover::after {
    opacity: 1;
}

/* Wobble animation for interactive elements */
@keyframes wobble {
    0% { transform: rotate(0deg); }
    15% { transform: rotate(-5deg); }
    30% { transform: rotate(3deg); }
    45% { transform: rotate(-3deg); }
    60% { transform: rotate(2deg); }
    75% { transform: rotate(-1deg); }
    100% { transform: rotate(0deg); }
}

.wobble-on-hover:hover {
    animation: wobble 0.8s ease-in-out;
}

/* Sketch-style cards */
.sketch-card {
    background: #fff;
    position: relative;
    border-radius: 0;
    transform: rotate(-0.5deg);
    transition: all 0.3s ease;
}

.sketch-card:nth-child(even) {
    transform: rotate(0.5deg);
}

.sketch-card::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: #2c5aa0;
    z-index: -1;
    transform: rotate(1deg);
    border-radius: 3px;
    opacity: 0.1;
}

.sketch-card:hover {
    transform: rotate(0deg) scale(1.02);
    box-shadow: 10px 10px 0 rgba(44, 90, 160, 0.1);
}

/* Hand-drawn arrows */
.arrow-sketch {
    position: relative;
    display: inline-block;
}

.arrow-sketch::after {
    content: '→';
    font-size: 1.2em;
    margin-left: 0.5rem;
    transition: transform 0.3s ease;
    display: inline-block;
    transform: rotate(-5deg);
}

.arrow-sketch:hover::after {
    transform: rotate(0deg) translateX(5px);
}

/* Doodle decorations */
.doodle-decoration {
    position: relative;
}

.doodle-decoration::before {
    content: '';
    position: absolute;
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='15' stroke='%23e67e22' stroke-width='2' fill='none' stroke-dasharray='3,3'/%3E%3C/svg%3E");
    opacity: 0.6;
    animation: rotate 10s linear infinite;
}

@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* Sketch-style separators */
.sketch-separator {
    height: 2px;
    background: none;
    border: none;
    margin: 2rem 0;
    position: relative;
}

.sketch-separator::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 4'%3E%3Cpath d='M0,2 Q50,0 100,2 T200,2' stroke='%23bdc3c7' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-size: 200px 4px;
    background-repeat: repeat-x;
}

/* Hand-drawn navigation */
.nav-link.handdrawn {
    font-family: 'Kalam', cursive;
    position: relative;
    font-weight: 500;
}

.nav-link.handdrawn::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -5px;
    left: 50%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 4'%3E%3Cpath d='M0,2 Q12.5,0 25,2 T50,2' stroke='%23e67e22' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-size: 50px 4px;
    transition: all 0.3s ease;
    transform: translateX(-50%);
}

.nav-link.handdrawn:hover::after,
.nav-link.handdrawn.active::after {
    width: 100%;
}

/* Floating animation for decorative elements */
@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

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

.float-animation:nth-child(2n) {
    animation-delay: -1s;
}

.float-animation:nth-child(3n) {
    animation-delay: -2s;
}

/* Hand-drawn highlights */
.highlight-sketch {
    background: linear-gradient(120deg, transparent 0%, rgba(230, 126, 34, 0.3) 0%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: background-size 0.6s ease;
}

.highlight-sketch:hover,
.highlight-sketch.active {
    background-size: 100% 100%;
}

/* Sketch-style inputs */
.input-sketch {
    border: 2px solid #bdc3c7;
    border-radius: 0;
    background: #fff;
    font-family: 'Kalam', cursive;
    position: relative;
    transition: all 0.3s ease;
}

.input-sketch:focus {
    border-color: #2c5aa0;
    transform: translateY(-1px);
    box-shadow: 3px 3px 0 rgba(44, 90, 160, 0.2);
    outline: none;
}

/* Hand-drawn icons enhancement */
.icon-sketch {
    filter: drop-shadow(2px 2px 0 rgba(44, 90, 160, 0.2));
    transition: all 0.3s ease;
}

.icon-sketch:hover {
    transform: rotate(-5deg) scale(1.1);
    filter: drop-shadow(3px 3px 0 rgba(230, 126, 34, 0.3));
}

/* Scribble backgrounds */
.scribble-bg {
    position: relative;
    overflow: hidden;
}

.scribble-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath d='M20,20 Q40,10 60,20 T80,30 Q70,50 60,70 T40,80 Q20,70 10,50 T20,20' stroke='%23ecf0f1' stroke-width='1' fill='none' opacity='0.3'/%3E%3C/svg%3E");
    background-size: 100px 100px;
    z-index: -1;
    opacity: 0.1;
}

/* Paper texture effect */
.paper-texture {
    background: 
        radial-gradient(circle at 1px 1px, rgba(0,0,0,0.15) 1px, transparent 0);
    background-size: 20px 20px;
    position: relative;
}

.paper-texture::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        linear-gradient(90deg, transparent 98%, rgba(0,0,0,0.03) 100%),
        linear-gradient(0deg, transparent 98%, rgba(0,0,0,0.03) 100%);
    background-size: 25px 25px;
    pointer-events: none;
}

/* Hand-drawn section dividers */
.section-divider {
    text-align: center;
    margin: 4rem 0;
    position: relative;
}

.section-divider::before,
.section-divider::after {
    content: '';
    position: absolute;
    top: 50%;
    width: 30%;
    height: 2px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 4'%3E%3Cpath d='M0,2 Q25,0 50,2 T100,2' stroke='%23bdc3c7' stroke-width='1' fill='none'/%3E%3C/svg%3E");
    background-size: 100px 4px;
    background-repeat: repeat-x;
}

.section-divider::before {
    left: 0;
}

.section-divider::after {
    right: 0;
}

/* Sketch-style testimonial quotes */
.quote-sketch {
    position: relative;
    font-style: italic;
    padding: 1rem 2rem;
}

.quote-sketch::before {
    content: '"';
    position: absolute;
    top: -10px;
    left: 0;
    font-size: 4rem;
    color: #e67e22;
    font-family: 'Kalam', cursive;
    line-height: 1;
    opacity: 0.7;
    transform: rotate(-10deg);
}

.quote-sketch::after {
    content: '"';
    position: absolute;
    bottom: -30px;
    right: 0;
    font-size: 4rem;
    color: #e67e22;
    font-family: 'Kalam', cursive;
    line-height: 1;
    opacity: 0.7;
    transform: rotate(10deg);
}

/* Hand-drawn loading animation */
@keyframes sketch-draw {
    0% {
        stroke-dashoffset: 100;
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
    100% {
        stroke-dashoffset: 0;
        opacity: 1;
    }
}

.loading-sketch {
    stroke-dasharray: 100;
    animation: sketch-draw 2s ease-in-out infinite;
}

/* Crayon-style color blocks */
.crayon-block {
    position: relative;
    background: linear-gradient(45deg, 
        rgba(44, 90, 160, 0.8) 25%, 
        rgba(44, 90, 160, 0.6) 25%, 
        rgba(44, 90, 160, 0.6) 50%, 
        rgba(44, 90, 160, 0.8) 50%);
    background-size: 4px 4px;
    border-radius: 5px;
    overflow: hidden;
}

.crayon-block::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.crayon-block:hover::before {
    transform: translateX(100%);
}

/* Apply hand-drawn styles to specific elements */
.hero-title {
    font-family: 'Kalam', cursive;
    font-weight: 700;
}

.section-title {
    font-family: 'Kalam', cursive;
    font-weight: 700;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 6'%3E%3Cpath d='M0,3 Q25,1 50,3 T100,3' stroke='%23e67e22' stroke-width='2' fill='none'/%3E%3C/svg%3E");
    background-size: 100px 6px;
}

/* Hand-drawn service cards */
.service-card {
    transform: rotate(-1deg);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.service-card:nth-child(2n) {
    transform: rotate(1deg);
}

.service-card:hover {
    transform: rotate(0deg) translateY(-5px);
}

.service-card::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Ccircle cx='20' cy='20' r='1' fill='%23ecf0f1'/%3E%3C/svg%3E");
    background-size: 40px 40px;
    opacity: 0.5;
    animation: float 20s linear infinite;
    z-index: -1;
}

/* Make forms more hand-drawn */
.contact-form,
.newsletter-form {
    font-family: 'Kalam', cursive;
}

.contact-form input,
.contact-form select,
.contact-form textarea,
.newsletter-form input {
    font-family: 'Kalam', cursive;
    border: 2px solid #bdc3c7;
    border-radius: 0;
    transition: all 0.3s ease;
}

.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus,
.newsletter-form input:focus {
    border-color: #2c5aa0;
    transform: translateY(-1px) rotate(-0.5deg);
    box-shadow: 3px 3px 0 rgba(44, 90, 160, 0.2);
}

/* Hand-drawn blog cards */
.blog-card,
.blog-card-large {
    transform: rotate(-0.5deg);
    transition: all 0.3s ease;
}

.blog-card:nth-child(2n),
.blog-card-large:nth-child(2n) {
    transform: rotate(0.5deg);
}

.blog-card:hover,
.blog-card-large:hover {
    transform: rotate(0deg) translateY(-5px) scale(1.02);
}

/* Responsive adjustments for hand-drawn elements */
@media (max-width: 768px) {
    .handdrawn-border::before {
        background-size: 6px 6px;
        background-position: 0 0, 3px 3px;
    }
    
    .btn-sketch {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .section-title::after {
        width: 80px;
    }
    
    .quote-sketch::before,
    .quote-sketch::after {
        font-size: 3rem;
    }
}

@media (max-width: 480px) {
    .hero-title,
    .section-title {
        font-family: 'Kalam', cursive;
        font-weight: 600;
    }
    
    .service-card,
    .blog-card,
    .blog-card-large {
        transform: rotate(0deg);
    }
    
    .service-card:hover,
    .blog-card:hover,
    .blog-card-large:hover {
        transform: translateY(-3px);
    }
}