/* Stripe Demo - Animated Branding Styles */

/* Camera Plain Variable font */
@font-face {
    font-family: 'Camera Plain Variable';
    src: url('/static/ABC Camera/ABC Camera Plain Variable/ABCCameraPlainVariable-Trial.woff2') format('woff2'),
         url('/static/ABC Camera/ABC Camera Plain Variable/ABCCameraPlainVariable-Trial.woff') format('woff'),
         url('/static/ABC Camera/ABC Camera Plain Variable/ABCCameraPlainVariable-Trial.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --gradient-color-1: #FF8E63;
    --gradient-color-2: #FF7EB0;
    --gradient-color-3: #4B73FF;
}

body {
    margin: 0;
    padding: 0;
    position: relative;
    overflow-x: hidden;
    font-family: 'Camera Plain Variable', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: #1a1a2e;
}

@media (prefers-color-scheme: light) {
    body {
        background-color: #f5f5f7;
    }
}

/* Animated gradient background */
#gradient-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 100%);
}

@media (prefers-color-scheme: light) {
    #gradient-background {
        mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 100%);
    }
}

/* Noise overlay */
#noise-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    opacity: 0.03;
    pointer-events: none;
}

/* Loading bar */
#loading-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 5px;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#loading-bar.active {
    opacity: 1;
}

/* Heart trail container */
#heart-trail-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;
}

.heart-trail {
    position: absolute;
    font-size: 20px;
    opacity: 0;
    pointer-events: none;
    filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.5));
}

/* Glow effect for interactive elements */
.glow-hover {
    transition: filter 0.3s ease;
}

.glow-hover:hover {
    filter: drop-shadow(0 0 8px rgba(99, 91, 255, 0.5));
}

/* Content wrapper to sit above background */
.content-wrapper {
    position: relative;
    z-index: 1;
}