/* STREAMING_CHUNK: Styling custom layout scrollbars... /
/ ==========================================================================
Webster Web Design - Creative Custom Stylesheet
========================================================================== */


::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: #FCF9F6;
}
::-webkit-scrollbar-thumb {
background: #EBE2D3;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #D5C9B3;
}

/* STREAMING_CHUNK: Defining keyframe animations for floating elements... /
/ --- Floating Keyframe Animation --- */
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(0.5deg);
}
}

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

/* STREAMING_CHUNK: Configuring creative backdrop color blob animations... /
/ ==========================================================================
Interactive Background Blobs (Organic Drift Animations)
========================================================================== */

/* Distinct movement paths to prevent synchronous, uniform motion */
@keyframes blob-drift-1 {
0%, 100% {
transform: translate(0px, 0px) scale(1) rotate(0deg);
}
33% {
transform: translate(30px, -20px) scale(1.1) rotate(120deg);
}
66% {
transform: translate(-20px, 15px) scale(0.95) rotate(240deg);
}
}

@keyframes blob-drift-2 {
0%, 100% {
transform: translate(0px, 0px) scale(1) rotate(0deg);
}
40% {
transform: translate(-30px, 15px) scale(0.9) rotate(-90deg);
}
70% {
transform: translate(25px, -30px) scale(1.05) rotate(180deg);
}
}

@keyframes blob-drift-3 {
0%, 100% {
transform: translate(0px, 0px) scale(1) rotate(0deg);
}
30% {
transform: translate(25px, 25px) scale(1.05) rotate(150deg);
}
65% {
transform: translate(-30px, -15px) scale(0.95) rotate(-120deg);
}
}


.creative-blob {
position: absolute;
border-radius: 9999px;
filter: blur(50px); 
opacity: 0.45; 
pointer-events: none;
z-index: 0;
mix-blend-mode: multiply;
will-change: transform;
transform: translate3d(0, 0, 0);
transition: all 1.5s ease-in-out;
}

/* STREAMING_CHUNK: Setting up brand color palettes for floating elements... /
/ Brand Palette colors extracted from your hero asset */
.blob-blue { background-color: #B3D4FF; }
.blob-yellow { background-color: #FFE9A3; }
.blob-pink { background-color: #FFC8DD; }
.blob-green { background-color: #C1F2D6; }

/* Animation speeds mapped dynamically */
.blob-anim-1 { animation: blob-drift-1 20s ease-in-out infinite; }
.blob-anim-2 { animation: blob-drift-2 25s ease-in-out infinite; }
.blob-anim-3 { animation: blob-drift-3 22s ease-in-out infinite; }

/* ==========================================================================
Page-Specific Blob Layout Positioning Rules (Cohesive Yet Unique)
========================================================================== */

/* --- Placements for Home Page (index.html) --- */
.hero-index .blob-primary {
top: 15%;
left: -10%;
width: 70vw;
height: 70vw;
min-width: 250px;
}
.hero-index .blob-secondary {
bottom: 12%;
right: -15%;
width: 75vw;
height: 75vw;
min-width: 280px;
}
.hero-index .blob-tertiary {
top: 35%;
right: 15%;
width: 60vw;
height: 60vw;
min-width: 220px;
}

/* STREAMING_CHUNK: Positioning specific background blobs for internal pages... /
/ --- Placements for Services Page (services.html) --- */
.hero-services .blob-primary {
top: 8%;
left: 10%;
width: 70vw;
height: 70vw;
min-width: 250px;
}
.hero-services .blob-secondary {
bottom: 15%;
left: -10%;
width: 65vw;
height: 65vw;
min-width: 230px;
}
.hero-services .blob-tertiary {
bottom: 25%;
right: -10%;
width: 68vw;
height: 68vw;
min-width: 240px;
}

/* --- Placements for Portfolio Page (mywork.html) --- */
.hero-mywork .blob-primary {
top: 10%;
left: -5%;
width: 75vw;
height: 75vw;
min-width: 260px;
}
.hero-mywork .blob-secondary {
bottom: 20%;
right: -10%;
width: 70vw;
height: 70vw;
min-width: 250px;
}
.hero-mywork .blob-tertiary {
top: 40%;
left: 20%;
width: 60vw;
height: 60vw;
min-width: 210px;
}

/* --- Placements for Testimonials Page (endorsements.html) --- */
.hero-endorsements .blob-primary {
top: 25%;
left: -5%;
width: 65vw;
height: 65vw;
min-width: 230px;
}
.hero-endorsements .blob-secondary {
bottom: 10%;
right: -10%;
width: 70vw;
height: 70vw;
min-width: 250px;
}
.hero-endorsements .blob-tertiary {
top: 15%;
right: -5%;
width: 68vw;
height: 68vw;
min-width: 240px;
}

/* STREAMING_CHUNK: Configuring custom coordinates for contact pages... /
/ --- Placements for Quote Form Page (quote.html) --- */
.hero-quote .blob-primary {
top: 12%;
left: 10%;
width: 70vw;
height: 70vw;
min-width: 250px;
}
.hero-quote .blob-secondary {
bottom: 18%;
right: -10%;
width: 75vw;
height: 75vw;
min-width: 270px;
}
.hero-quote .blob-tertiary {
top: 30%;
left: -10%;
width: 65vw;
height: 65vw;
min-width: 230px;
}

@media (min-width: 1024px) {
.creative-blob {
filter: blur(80px);
opacity: 0.35;
}}

.hero-index .blob-primary {
    top: 15%;
    left: 8%;
    width: 28vw;
    height: 28vw;
}
.hero-index .blob-secondary {
    bottom: 12%;
    right: 10%;
    width: 32vw;
    height: 32vw;
}
.hero-index .blob-tertiary {
    top: 35%;
    right: 25%;
    width: 22vw;
    height: 22vw;
}

.hero-services .blob-primary {
    top: 8%;
    left: 25%;
    width: 30vw;
    height: 30vw;
}
.hero-services .blob-secondary {
    bottom: 15%;
    left: 12%;
    width: 26vw;
    height: 26vw;
}
.hero-services .blob-tertiary {
    bottom: 25%;
    right: 15%;
    width: 28vw;
    height: 28vw;
}

.hero-mywork .blob-primary {
    top: 10%;
    left: 12%;
    width: 34vw;
    height: 34vw;
}
.hero-mywork .blob-secondary {
    bottom: 20%;
    right: 15%;
    width: 28vw;
    height: 28vw;
}
.hero-mywork .blob-tertiary {
    top: 40%;
    left: 40%;
    width: 24vw;
    height: 24vw;
}

.hero-endorsements .blob-primary {
    top: 25%;
    left: 18%;
    width: 26vw;
    height: 26vw;
}
.hero-endorsements .blob-secondary {
    bottom: 10%;
    right: 20%;
    width: 30vw;
    height: 30vw;
}
.hero-endorsements .blob-tertiary {
    top: 15%;
    right: 10%;
    width: 28vw;
    height: 28vw;
}

.hero-quote .blob-primary {
    top: 12%;
    left: 30%;
    width: 28vw;
    height: 28vw;
}
.hero-quote .blob-secondary {
    bottom: 18%;
    right: 25%;
    width: 32vw;
    height: 32vw;
}
.hero-quote .blob-tertiary {
    top: 30%;
    left: 10%;
    width: 26vw;
    height: 26vw;
}