style.css

/* Custom Style Sheet for BettaSchool Interactive Effects & Overrides */

/* ==========================================================================
   1. Interactive Background Canvas Setup
   ========================================================================== */
#paint-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0; /* Behind main text content, but in front of background color to mix correctly */
    pointer-events: none; /* Mouse input tracked on window level */
}

/* ==========================================================================
   2. Textured Paper Overlay (Tactile noise filter)
   ========================================================================== */
.paper-texture-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 999; /* Always on top of everything to bind page elements together */
    opacity: 0.05;
}

/* ==========================================================================
   3. Floating Art Supplies (Parallax layers)
   ========================================================================== */
.floating-art-supplies {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5; /* Under headers and main content, over background canvas */
    overflow: hidden;
}

.art-supply {
    position: absolute;
    width: 60px;
    height: auto;
    opacity: 0.55;
    transform: translate3d(0, 0, 0) rotate(0deg);
    transition: transform 0.1s ease-out;
}

/* Placements */
.supply-pencil {
    top: 18%;
    right: 6%;
    width: 40px;
}

.supply-brush {
    top: 55%;
    left: 4%;
    width: 55px;
}

.supply-pastel {
    top: 78%;
    right: 8%;
    width: 35px;
}

/* Hide floating elements on touch screens / mobile to reduce clutter */
@media (max-width: 768px) {
    .floating-art-supplies {
        display: none;
    }
}

/* ==========================================================================
   3a. Mobile Nav Overlay (Full-screen fade)
   ========================================================================== */

/* ---- Hamburger icon (three horizontal lines) ---- */
.burger-icon {
    width: 22px;
    height: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.burger-line {
    display: block;
    height: 2px;
    width: 100%;
    background-color: #994124;
    border-radius: 2px;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1),
                opacity 0.2s ease;
    transform-origin: center;
}

/* Animate hamburger → X while overlay is open */
.burger-icon.open .burger-line:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}
.burger-icon.open .burger-line:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.burger-icon.open .burger-line:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}



/**
 * Full-screen overlay — sits over all page content.
 * Closed state: invisible + non-interactive.
 * Open state (.open): fades in over 300ms.
 */
.mobile-nav-overlay {
    /* Positioning */
    position: fixed;
    inset: 0;
    z-index: 100; /* Highest layer — above everything */

    /* Appearance */
    background-color: #ffffff;

    /* Layout — column, centred */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    /* Closed state */
    opacity: 0;
    pointer-events: none;
    visibility: hidden;

    /* Smooth fade transition */
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Open state — toggled by JavaScript */
.mobile-nav-overlay.open {
    opacity: 1;
    pointer-events: auto;
    visibility: visible;
}

/**
 * X close button — top-right corner, mirrors the hamburger position.
 * Uses the same px-margin-mobile padding + py-4 as the header flex row.
 */
.mobile-nav-close {
    position: absolute;
    top: 0;
    right: 0;
    /* Match header padding: py-4 (1rem) top, px-margin-mobile (16px) right + inner button padding (8px) */
    padding: 1.25rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    border-radius: 0.5rem;
    transition: opacity 0.2s ease;
}

.mobile-nav-close:hover {
    opacity: 0.7;
}

/**
 * Centred navigation list — no bullets, 2rem vertical gap between items.
 */
.mobile-nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    text-align: center;
}

/* Nav link styling — dark gray/brown, bold */
.mobile-nav-link {
    display: inline-block;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.25rem; /* 20px */
    font-weight: 700;
    color: #3d2b25; /* Dark warm brown */
    text-decoration: none;
    letter-spacing: -0.01em;
    line-height: 1.2;
    transition: color 0.2s ease;
}

.mobile-nav-link:hover,
.mobile-nav-link:focus-visible {
    color: #994124; /* Primary warm brown */
    outline: none;
}

/**
 * CTA button — pill-shaped, warm brown, white text, centred below links.
 */
.mobile-nav-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2.5rem;
    padding: 0.875rem 2rem;
    background-color: #994124; /* Primary warm brown */
    color: #ffffff;
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    text-decoration: none;
    border-radius: 9999px; /* Fully pill-shaped */
    box-shadow: 0 2px 12px rgba(153, 65, 36, 0.18); /* Very faint drop shadow */
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.mobile-nav-cta:hover {
    background-color: #7d2c11;
    box-shadow: 0 4px 20px rgba(153, 65, 36, 0.28);
}

/* Mobile hero fills full viewport, accounting for browser chrome */
@media (max-width: 767px) {
    .hero-section {
        min-height: 100vh;
        min-height: 100svh;
    }
}

/* ==========================================================================
   3c. Testimonial Carousel (mobile only)
   ========================================================================== */
.testimonial-carousel-outer {
    overflow: hidden;
}

.testimonial-carousel-track {
    display: flex;
    transition: transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform;
}

.testimonial-slide {
    flex: 0 0 100%;
    width: 100%;
}

.testimonial-dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
}

.testimonial-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #dcc1b9;
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background-color 0.25s, transform 0.25s;
}

.testimonial-dot.active {
    background-color: #994124;
    transform: scale(1.25);
}

/* About section portrait blob — organic shape */
.about-blob {
    border-radius: 62% 38% 55% 45% / 58% 44% 56% 42%;
}

/* ==========================================================================
   4. Logo & Underline Accents
   ========================================================================== */
.logo {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.logo-brush {
    position: absolute;
    bottom: -8px;
    left: -6px;
    width: 115%;
    height: 24px;
    z-index: 0;
    overflow: hidden;
}

.logo-stroke-svg {
    width: 100%;
    height: 100%;
}

.logo-text {
    position: relative;
    z-index: 10;
}

/* Brush Underline (Tailwind utility extension) */
.brush-underline {
    position: relative;
    display: inline-block;
}

.brush-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 100%;
    height: 10px;
    background-color: #cfe7bd; /* secondary-container color */
    border-radius: 4px 8px 3px 6px;
    z-index: -1;
    opacity: 0.65;
    transform: rotate(-0.5deg);
}

/* ==========================================================================
   5. Interactive Micro-effects & Glows
   ========================================================================== */
/* Soft tinted shadow for interactivity */
.hover-glow {
    transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.hover-glow:hover {
    box-shadow: 0 20px 40px -10px rgba(153, 65, 36, 0.08); /* Primary color */
    transform: translateY(-4px);
}

/* Material Symbols customization */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.icon-fill {
    font-variation-settings: 'FILL' 1;
}

/* Custom Scrollbar for studio feel */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #fcf9f4;
}
::-webkit-scrollbar-thumb {
    background: #b6cea5; /* secondary-fixed-dim */
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #4f6443; /* secondary */
}

/* Interactive helper teaser (Scroll Indicator) */
.interactive-teaser {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    opacity: 0.5;
    pointer-events: none;
}

.mouse-icon {
    width: 20px;
    height: 32px;
    border: 2px solid #994124; /* primary */
    border-radius: 20px;
    position: relative;
}

.mouse-wheel {
    width: 2px;
    height: 6px;
    background-color: #994124;
    border-radius: 2px;
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    animation: scrollWheel 2s infinite;
}

.teaser-text {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    color: #994124;
    text-transform: uppercase;
    font-family: 'Plus Jakarta Sans', sans-serif;
}

@keyframes scrollWheel {
    0% { opacity: 0; top: 6px; }
    30% { opacity: 1; }
    80% { opacity: 0; top: 16px; }
    100% { opacity: 0; top: 6px; }
}

/* ==========================================================================
   6. Scroll Reveal Animations (IntersectionObserver driven)
   ========================================================================== */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.reveal-delay-1 {
    transition-delay: 0.15s;
}

.reveal-delay-2 {
    transition-delay: 0.3s;
}

.reveal-delay-3 {
    transition-delay: 0.45s;
}

/* Header border fade-in when scrolled */
header.scrolled {
    background-color: rgba(252, 249, 244, 0.9) !important;
    border-bottom-color: rgba(137, 114, 108, 0.25);
    box-shadow: 0 4px 30px rgba(153, 65, 36, 0.03);
}