/* main.css - Core styles for Wrong Fuel In Car UK */

/* Custom Fonts & Material Symbols styling */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    display: inline-block;
    vertical-align: middle;
}

/* Accordion details/summary resets */
details > summary {
    list-style: none;
}
details > summary::-webkit-details-marker {
    display: none;
}

/* Animations */
@keyframes kenburns {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

@keyframes pulse-amber {
    0% { box-shadow: 0 0 0 0 rgba(255, 184, 0, 0.7); }
    70% { box-shadow: 0 0 0 15px rgba(255, 184, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 184, 0, 0); }
}

.pulse-btn {
    animation: pulse-amber 2s infinite;
}

/* Hero and CTA Backgrounds using local images */
.hero-wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.hero-bg {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(rgba(15, 23, 42, 0.85), rgba(15, 23, 42, 0.95)), url('../images/6.png');
    background-size: cover;
    background-position: center;
    animation: kenburns 20s ease-out forwards;
    z-index: 0;
}

.cta-bg {
    background: linear-gradient(rgba(15, 23, 42, 0.9), rgba(15, 23, 42, 0.95)), url('../images/1.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Dynamic background utilities for landing pages */
.hero-img-1 {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.97) 0%, rgba(15, 23, 42, 0.85) 100%), url('../images/1.png');
    background-size: cover;
    background-position: center;
}

.hero-img-2 {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.97) 0%, rgba(15, 23, 42, 0.85) 100%), url('../images/2.png');
    background-size: cover;
    background-position: center;
}

.hero-img-3 {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.97) 0%, rgba(15, 23, 42, 0.85) 100%), url('../images/3.png');
    background-size: cover;
    background-position: center;
}

.hero-img-4 {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.97) 0%, rgba(15, 23, 42, 0.85) 100%), url('../images/4.png');
    background-size: cover;
    background-position: center;
}

.hero-img-5 {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.97) 0%, rgba(15, 23, 42, 0.85) 100%), url('../images/5.png');
    background-size: cover;
    background-position: center;
}

.hero-img-6 {
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.97) 0%, rgba(15, 23, 42, 0.85) 100%), url('../images/6.png');
    background-size: cover;
    background-position: center;
}