/* Snapchat Follow Section Styling */
.snapchat-section {
    background: linear-gradient(135deg, #FFFC00 0%, #FFE100 100%);
    padding: 60px 0;
    position: relative;
    overflow: hidden;
    margin: 40px 0;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(255, 252, 0, 0.15);
}

.snapchat-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"><path d="M100,0 C44.8,0 0,44.8 0,100 C0,155.2 44.8,200 100,200 C155.2,200 200,155.2 200,100 C200,44.8 155.2,0 100,0 Z" fill="rgba(255, 255, 255, 0.08)"/></svg>');
    background-size: 120px 120px;
    background-repeat: repeat;
    opacity: 0.6;
    z-index: 1;
    animation: slidePattern 60s linear infinite;
}

@keyframes slidePattern {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 500px 500px;
    }
}

.snapchat-ghost-animation {
    position: absolute;
    top: -60px;
    right: 10%;
    width: 120px;
    height: 120px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23FFFFFF" d="M234.8 138.8c-11.1 0-20.4 9.3-20.4 20.4s9.3 20.4 20.4 20.4 20.4-9.3 20.4-20.4-9.3-20.4-20.4-20.4zm97.6 0c-11.1 0-20.4 9.3-20.4 20.4s9.3 20.4 20.4 20.4 20.4-9.3 20.4-20.4c0-11.2-9.3-20.4-20.4-20.4zm64.1 115.1l-.1.1c-4.3.9-38.3 8.3-54.8 16.2-1.1.7-2.5 1.4-4.1 2.3-9.6 4.7-25.5 12.8-25.5 30.9 0 6 1.5 11.4 4.4 16.1 3.1 4.7 7.5 8.7 12.9 11.6 9.5 4.9 22.8 7.6 37.5 7.6 2.9 0 5.9-.1 9-.3 5.5-.3 10.7-.9 15.5-1.7 11.5-1.9 21.5-5.2 29.9-9.8 10.8-5.8 18.7-13.7 23.4-23.4 3.6-7.5 5.3-16.4 5.3-26.7 0-5.9-1.2-12.2-3.7-18.5-3.4-8.3-8.8-15.5-16.2-21.3-12.2-9.7-28.4-15-46.6-15.4l-1.7.1c7.6 15.8 10.9 32.2 9.9 49.2h.1v.9c0 .3-.3 38.5-95.5 38.5-1 0-1.9 0-2.9-.1h-.1c-1.4 0-2.8.1-4.2.1-95.3 0-95.4-38.2-95.5-38.5v-.9h.1c-1-17 2.3-33.4 9.9-49.2l-1.7-.1c-18.1.4-34.4 5.6-46.6 15.4-7.4 5.9-12.8 13-16.2 21.3-2.5 6.3-3.7 12.6-3.7 18.5 0 10.2 1.7 19.1 5.3 26.7 4.7 9.7 12.5 17.6 23.4 23.4 8.4 4.6 18.5 7.9 30 9.8 4.8.8 9.9 1.4 15.5 1.7 3 .2 6 .3 9 .3 14.8 0 28.1-2.7 37.5-7.6 5.5-2.8 9.9-6.8 12.9-11.6 2.9-4.7 4.4-10.1 4.4-16.1 0-18.1-15.9-26.1-25.5-30.9-1.6-.8-3.1-1.6-4.1-2.2-14.9-7.2-46.5-14.1-52.3-15.6-2.6-.7-2.7-2.8-2-4.9.7-2 2.9-3.1 5-2.8.7.1 1.5.2 2.2.3 6.8 1.6 16.5 3.3 27.2 3.3 12.9 0 25.8-2.1 38.3-6.3 16.7-5.5 30.8-15.5 40.7-29 11.1-15.2 17.1-34.4 17.1-55.5v-.6c-.2-1.5-.2-3.8-.2-3.8-.5-11.9-1.5-18.9-3.2-27.9-.1-.5-.2-.9-.4-1.4C335.5 89.1 321.6 52 256 52c-65.5 0-79.5 37-82.2 62.7-.1.5-.3.9-.4 1.4-1.7 9-2.7 16-3.2 27.9 0 0 0 2.3-.2 3.8v.6c0 21.1 6 40.3 17.1 55.5 10 13.5 24 23.5 40.7 29 12.5 4.1 25.4 6.3 38.3 6.3 10.7 0 20.4-1.7 27.2-3.3.8-.1 1.5-.2 2.2-.3 2.2-.3 4.3.8 5 2.8.7 2.1.7 4.2-1.9 4.9-5.9 1.5-37.5 8.4-52.3 15.6"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.15;
    animation: ghostFloat 8s ease-in-out infinite;
    z-index: 1;
}

@keyframes ghostFloat {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-30px) rotate(5deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

.snapchat-section .container {
    position: relative;
    z-index: 2;
}

.promo-badge {
    background-color: #000;
    color: #FFFC00;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 6px 16px;
    border-radius: 100px;
    display: inline-block;
    margin-bottom: 12px;
    letter-spacing: 0.5px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.snapchat-section .section-title {
    color: #000000;
    margin-bottom: 16px;
    font-size: 2.8rem;
    font-weight: 800;
    line-height: 1.2;
}

.snapchat-section .section-subtitle {
    color: #333333;
    font-size: 1.2rem;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.6;
}

.snapchat-form {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    padding: 30px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    max-width: 500px;
    margin: 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.5);
    position: relative;
}

/* Snapcode styling */
.snapcode-container {
    position: relative;
    width: 140px;
    height: 140px;
    margin: 0 auto 30px;
    filter: drop-shadow(0 10px 15px rgba(0,0,0,0.1));
}

.snapcode-outline {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #FFFFFF;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
}

.snapcode-inner {
    width: 100%;
    height: 100%;
    background: #FFFC00;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.snapcode-inner:before {
    content: '';
    position: absolute;
    width: 200%;
    height: 200%;
    background-image: radial-gradient(circle, rgba(0,0,0,0.05) 2px, transparent 2px);
    background-size: 12px 12px;
    opacity: 0.4;
    top: -50%;
    left: -50%;
    animation: rotatePattern 60s linear infinite;
}

@keyframes rotatePattern {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.snapchat-ghost {
    font-size: 70px;
    color: #000;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}

.snapchat-username {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    background: #FFFC00;
    border-radius: 12px;
    margin-bottom: 20px;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease;
}

.snapchat-username:hover {
    transform: translateY(-3px);
}

.snapchat-icon {
    font-size: 2.2rem;
    color: #000000;
    margin-right: 16px;
}

.snapchat-username span {
    font-size: 1.5rem;
    font-weight: 700;
    color: #000000;
    letter-spacing: 0.5px;
}

.snapchat-btn {
    background: #FF6A00;
    width: 100%;
    padding: 16px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 20px rgba(255, 106, 0, 0.2);
    position: relative;
    overflow: hidden;
}

.snapchat-btn:before {
    content: '\f2ac';
    font-family: 'Font Awesome 6 Brands';
    margin-right: 8px;
    font-size: 1.3rem;
}

.snapchat-btn:hover {
    background: #FF8124;
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 15px 30px rgba(255, 106, 0, 0.3);
}

.snapchat-btn:after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        left: -100%;
    }
    20% {
        left: 100%;
    }
    100% {
        left: 100%;
    }
}

.snapchat-section .form-disclaimer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9rem;
    color: #333;
    line-height: 1.5;
    font-weight: 500;
}

/* Responsive styling */
@media (max-width: 991px) {
    .snapchat-section {
        margin: 30px 0;
        padding: 40px 0;
    }
    
    .snapchat-section .section-title {
        font-size: 2.4rem;
    }
    
    .snapchat-ghost-animation {
        width: 100px;
        height: 100px;
        right: 5%;
    }
}

@media (max-width: 767px) {
    .snapchat-section .newsletter-content {
        flex-direction: column;
        text-align: center;
    }
    
    .snapchat-section .newsletter-text,
    .snapchat-section .newsletter-form {
        max-width: 100%;
        padding: 0 15px;
    }
    
    .snapchat-section .section-title {
        font-size: 2.2rem;
    }
    
    .snapchat-username span {
        font-size: 1.3rem;
    }
    
    .snapchat-ghost-animation {
        width: 80px;
        height: 80px;
        top: -30px;
    }
    
    .snapchat-form {
        padding: 25px 20px;
    }
}

@media (max-width: 480px) {
    .snapchat-section {
        padding: 30px 0;
        margin: 20px 0;
    }
    
    .snapchat-section .section-title {
        font-size: 1.8rem;
    }
    
    .snapchat-section .section-subtitle {
        font-size: 1rem;
    }
    
    .snapchat-ghost-animation {
        display: none;
    }
    
    .snapcode-container {
        width: 120px;
        height: 120px;
        margin-bottom: 20px;
    }
    
    .snapchat-ghost {
        font-size: 60px;
    }
    
    .promo-badge {
        font-size: 0.75rem;
        padding: 5px 12px;
    }
    
    .snapchat-btn {
        font-size: 1rem;
        padding: 14px;
    }
    
    .snapchat-username {
        padding: 12px;
    }
    
    .snapchat-icon {
        font-size: 1.8rem;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .snapchat-form {
        background: rgba(20, 20, 20, 0.8);
        border-color: rgba(50, 50, 50, 0.5);
    }
    
    .snapchat-section .section-subtitle,
    .snapchat-section .form-disclaimer {
        color: rgba(255, 255, 255, 0.8);
    }
    
    .snapchat-form {
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    }
}

/* Ghost animation */
.snapchat-section::after {
    content: '';
    position: absolute;
    width: 100px;
    height: 100px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="%23FFFC00" d="M496 256.5C495.1 143.1 394.2 56 273.4 56c-120.8 0-221.8 87.1-222.7 200.5-1.5 118.2 93.6 215.2 211.8 217.5 0 0-.5-44.6-.7-70.8h-.5c-23.2 0-38.8-5.6-54-12.7-8.3-3.9-16.3-7.9-23.3-9.8-10-2.7-14.7-3-19.7 2.5-4.8 5.3-18 18.1-22.2 22.3-3.9 3.9-7.3 4.4-13.7 1.1-6.4-3.3-27-9.9-51.4-31.6-19-17.2-31.9-38.6-35.6-45.1-3.7-6.5-.3-10 2.8-13.3 2.8-3 6.3-7.9 9.5-11.8 3.2-4 4.2-6.8 6.4-11.4 2.1-4.6 1.1-8.6-0.5-12s-13.7-33.2-19-45.4c-4.8-11.8-9.9-10.3-13.6-10.5-3.5-0.2-7.6-0.2-11.6-0.2-4.1 0-10.7 1.5-16.2 7.6C38.8 148.9 28 172 28 219.5c0 47.5 34.5 93.3 39.3 99.9 4.8 6.6 68.1 104 164.9 145.8 23 9.8 41 15.7 55 20 23.2 7.4 44.4 6.3 61 3.8 18.7-2.8 57.4-23.4 65.6-46.2 8.1-22.7 8.1-42.2 5.7-46.4-2.5-4.1-8.7-6.6-18.7-11.8-10-5-60.8-30.1-70.3-33.5-9.6-3.4-16.6-5.1-23.6 5.1-7 10.2-27 33.2-33.1 40.1-6.1 6.7-12.1 7.5-22.1 2.5-10-5.1-42.3-15.6-80.6-49.9-29.8-26.6-50-59.4-55.8-69.3-5.9-10 .6-15.3 4.4-20.2 4.5-5.6 10.1-14.5 15.1-21.7 5-7.3 6.7-12.5 10.1-20.8 3.3-8.3 1.7-15.7-0.9-22-2.6-6.4-23.8-57.6-32.7-78.8-8.6-20.5-17.4-17.7-23.7-18-6.1-0.3-13.1-.3-20.2-.3-7 0-18.5 2.7-28.2 13.2C60.6 97.7 48 123.1 48 171.3c0 48.2 35.1 94.8 39.9 101.5 4.8 6.8 68.9 105.2 167.2 147.3 23.3 10 41.4 16 55.5 20.5 23.4 7.4 44.8 6.4 61.6 3.9 18.9-2.8 57.9-23.7 66.2-46.8 8.2-23 8.2-42.7 5.7-46.9-2.5-4.2-8.8-6.6-18.9-11.9-10-5.1-60.8-30.1-70.4-33.6-9.5-3.5-16.6-5.1-23.6 5.1-7 10.2-27.1 33.4-33.1 40.1-6.1 6.7-12.1 7.5-22.1 2.5s-42.3-15.6-80.6-49.9c-29.8-26.6-50-59.4-55.9-69.4-5.9-10 .6-15.3 4.4-20.2 4.5-5.6 10.1-14.5 15.1-21.7 5-7.3 6.7-12.5 10.1-20.8 3.3-8.3 1.7-15.7-0.9-22s-23.7-57.2-32.5-78.4c-8.6-20.5-17.4-17.7-23.8-18-6.1-.3-13.1-.3-20.2-.3-7 0-18.5 2.7-28.2 13.2-9.7 10.6-37.2 36.4-37.2 88.7 0 52.4 38.2 102.7 43.4 109.9 5.3 7 74.8 114.2 181.1 159.9 25.2 10.8 44.9 17.4 60.2 22.2 25.3 8 48.3 6.9 66.5 4.2 20.3-3 62.6-25.6 71.5-50.4 8.9-24.8 8.9-46.1 6.3-50.5-2.7-4.3-9.5-7.1-20.5-12.9z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 0.2;
    top: 20px;
    right: 20px;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(10deg);
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .snapchat-section {
        padding: 40px 0;
        border-radius: 0;
    }

    .snapchat-section .section-title {
        font-size: 2rem;
    }

    .snapchat-section .section-subtitle {
        font-size: 1rem;
    }

    .snapchat-form {
        padding: 20px;
    }

    .snapchat-username {
        padding: 15px;
    }

    .snapchat-icon {
        font-size: 2rem;
    }

    .snapchat-username span {
        font-size: 1.2rem;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .snapchat-section {
        background: linear-gradient(135deg, #585200 0%, #857900 100%);
    }

    .snapchat-section .section-title,
    .snapchat-section .section-subtitle {
        color: #ffffff;
    }

    .snapchat-form {
        background: rgba(30, 30, 30, 0.85);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .snapchat-section .form-disclaimer {
        color: #aaa;
    }
}